/* ============================================================ estils_projecte.css — Estils personalitzats Clemen Beauty Inclou aquest fitxer DESPRÉS d'estils.css al ============================================================ */ /* ------------------------------------------------------- 1. Variables de marca Clemen Beauty ------------------------------------------------------- */ :root { /* Colors de marca — valors base */ --cb-black: rgba(30, 30, 30, 1); /* #1E1E1E */ --cb-white: rgba(255, 255, 255, 1); /* #FFFFFF */ --cb-lila: rgba(178, 152, 180, 1); /* #B298B4 */ --cb-green: rgba(128, 151, 112, 1); /* #809770 */ --cb-red: rgba(238, 37, 36, 1); /* #EE2524 */ --cb-pink: rgba(238, 188, 197, 1); /* #EEBCC5 */ /* Variants d'opacitat */ --cb-black-soft: rgba(30, 30, 30, 0.07); --cb-lila-soft: rgba(178, 152, 180, 0.15); --cb-green-soft: rgba(128, 151, 112, 0.12); --cb-red-soft: rgba(238, 37, 36, 0.08); --cb-pink-bg: rgba(238, 188, 197, 0.10); /* backgrounds suaus */ --cb-pink-light: rgba(238, 188, 197, 0.40); /* Hover */ --cb-red-hover: rgba(210, 30, 29, 1); --cb-lila-hover: rgba(155, 130, 157, 1); --cb-green-hover: rgba(105, 126, 91, 1); /* Àlies semàntics */ --color-primary: var(--cb-red); --color-accent: var(--cb-pink); --color-heading: var(--cb-black); /* Retrocompatibilitat */ --cb-dark: var(--cb-black); --cb-dark-soft: var(--cb-black-soft); /* Tipografies */ --font-default: 'Zalando Sans', 'Roboto', sans-serif; --font-secondary: 'big-caslon-fb', serif; --font-mono: 'Roboto Mono', monospace; /* Container */ --container-max: 1400px; } /* ------------------------------------------------------- 2. Tipografia ------------------------------------------------------- */ html, body { overflow-x: clip; } body { font-family: var(--font-default); } h1, h2, h3, h4, h5, h6 { color: var(--cb-dark); } /* ------------------------------------------------------- 3. Botons de marca ------------------------------------------------------- */ .btn-clean, .btn, .icon-btn { border-radius: 5px; } .btn-cb-primary { background: var(--cb-red); color: var(--color-white); border: 1px solid var(--cb-red); border-radius: 5px; padding: 0.55rem 1.75rem; font-weight: 600; transition: background 0.2s, border-color 0.2s; } .btn-cb-primary:hover { background: var(--cb-red-hover); border-color: var(--cb-red-hover); color: var(--color-white); } .btn-light-clean { color: var(--color-primary); text-transform: uppercase; font-weight: 500; padding: 0.55rem 1.35rem; transition: background 0.2s, color 0.2s; font-size: 15px; } .btn-light-clean:hover { background: var(--cb-red); color: var(--cb-white); } .btn-cb-outline { background: transparent; color: var(--cb-red); border: 1.5px solid var(--cb-red); border-radius: 5px; padding: 0.55rem 1.75rem; font-weight: 600; transition: background 0.2s, color 0.2s; } .btn-cb-outline:hover { background: var(--cb-red); color: var(--color-white); } .btn-cb-outline-inv { background: var(--cb-red); color: var(--cb-white); border: 1.5px solid var(--cb-red); border-radius: 5px; padding: 0.55rem 1.75rem; font-weight: 600; transition: background 0.2s, color 0.2s; } .btn-cb-outline-inv:hover { background: transparent; color: var(--cb-red); border-color: var(--cb-red); } .btn-cb-pink { background: var(--cb-pink); color: var(--cb-black); border: 1px solid var(--cb-pink); font-family: var(--font-default); font-weight: 300; font-size: 15px; text-transform: uppercase; text-align: center; border-radius: 5px; padding: 0.55rem 1.75rem; transition: background 0.2s, border-color 0.2s; } .btn-cb-pink:hover { background: var(--cb-lila); border-color: var(--cb-lila); color: var(--cb-black); } .btn-cb-pink:disabled { opacity: 0.55; cursor: not-allowed; } .btn-cb-dark { background: var(--cb-dark); color: var(--color-white); border: 1px solid var(--cb-dark); border-radius: 5px; padding: 0.55rem 1.75rem; font-weight: 600; transition: background 0.2s; } .btn-cb-dark:hover { background: rgba(30, 30, 30, 0.85); color: var(--color-white); } /* ------------------------------------------------------- 4. Badges / etiquetes ------------------------------------------------------- */ .badge-cb { background: var(--cb-pink); color: var(--cb-dark); border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; padding: 0.25em 0.65em; } .badge-cb-red { background: var(--cb-red); color: var(--color-white); border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; padding: 0.25em 0.65em; } /* ------------------------------------------------------- 5. Links i accents ------------------------------------------------------- */ .link-cb { color: var(--cb-red); font-weight: 600; text-decoration: none; transition: opacity 0.15s; } .link-cb:hover { opacity: 0.75; color: var(--cb-red); } /* ------------------------------------------------------- 6. Seccions de fons de marca ------------------------------------------------------- */ .bg-cb-soft { background: var(--cb-red-soft); } .bg-cb-pink { background: var(--cb-pink-light); } .bg-cb-dark { background: var(--cb-dark); color: var(--color-white); } .bg-destacats { background: linear-gradient(to bottom, rgba(238, 188, 197, 0.15) 84%, var(--cb-white) 100%); } /* ------------------------------------------------------- 7. Cards de producte (genèric) ------------------------------------------------------- */ .product-card-cb { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; } .product-card-cb:hover { box-shadow: var(--shadow-soft); transform: translateY(-3px); } .product-card-cb .card-body { padding: var(--spacing-md); } .product-card-cb .product-price { color: var(--cb-red); font-weight: 700; font-size: 1.1rem; } .category-card { min-height: 220px; } /* ------------------------------------------------------- 8. Separadors i accents visuals ------------------------------------------------------- */ .divider-cb { border: none; border-top: 2px solid var(--cb-pink); margin: var(--section-space) 0; } .accent-bar { display: inline-block; width: 40px; height: 3px; background: var(--cb-red); border-radius: 99px; margin-bottom: 1rem; } /* ------------------------------------------------------- 9. Header i navegació Clemen Beauty ------------------------------------------------------- */ /* Topbar: fons vermell, layout 2 columnes */ .topbar { background: var(--cb-red); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .topbar-info { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; color: var(--cb-white); font-size: 13px; text-transform: uppercase; } .topbar-info a { color: var(--cb-white); } .topbar-sep { opacity: 0.6; } .topbar-nav { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; } .topbar-nav a { color: var(--cb-white); font-size: 13px; text-decoration: none; opacity: 0.9; transition: opacity 0.15s; text-transform: uppercase; font-family: var(--font-default); } .topbar-nav a:hover { opacity: 1; } .topbar-right { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; } /* Icones del menú principal: sense border ni background, color igual als links del menú */ .site-header .icon-btn { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--cb-red) !important; } .btn-topbar-pro { background: var(--cb-pink); color: var(--cb-red); border: none; border-radius: 5px; padding: 0.3rem 0.9rem; font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; transition: background 0.2s; white-space: nowrap; } .btn-topbar-pro:hover { background: rgba(238, 188, 197, 0.75); color: var(--cb-red); } /* Links del menú */ .navbar-nav .nav-link { color: var(--cb-red); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.04em; } .nav-arrow { font-size: 0.6rem; vertical-align: middle; margin-left: 3px; opacity: 0.7; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--cb-red-hover); opacity: 0.85; } /* Megamenú: links en negre de marca */ .mega-links a { color: var(--cb-black); } .mega-links a:hover { color: var(--cb-red); } /* Megamenú: amplada màxima del contingut */ .mega-menu .container-custom { max-width: 1000px !important; } /* Menú mòbil: padding-top reduït i animació més ràpida */ .site-header .navbar-collapse { padding-top: 0.5rem !important; transition: transform 0.25s ease !important; } /* Header del menú mòbil: logo + creu — mateixa alçada que la navbar */ .mobile-nav-header { padding: 0; border-bottom: 1px solid var(--cb-pink-light); margin-bottom: 0.5rem; min-height: 65px; } .mobile-nav-header .navbar-brand img { max-width: 220px; min-height: 65px; height: auto; } /* Botó toggle submenú mòbil */ .nav-link-wrap { position: relative; } .nav-link-wrap .nav-link { flex: 1; } .mobile-submenu-toggle { background: none; border: none; color: var(--cb-black); font-size: 0.85rem; padding: 0.25rem 0.5rem; flex-shrink: 0; cursor: pointer; line-height: 1; } /* Icones (cerca, compte, cistella) dins el menú mòbil */ .mobile-menu-icons { padding: 0.5rem 1rem; gap: 0.25rem; } .mobile-menu-icons .icon-btn { color: var(--cb-black) !important; } /* Links del topbar dins el menú mòbil */ .mobile-topbar-links { padding: 1rem 0 0.5rem; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; } .mobile-topbar-links a { color: var(--cb-black); font-size: 13px; text-transform: uppercase; font-weight: 500; text-decoration: none; padding: 0.4rem 0; transition: color 0.15s; } .mobile-topbar-links a:hover { color: var(--cb-red); } .mobile-btn-pro { display: block !important; text-align: center; padding: 0.6rem 1.5rem !important; margin-top: 0.75rem; } /* Topbar i navbar: amplada 100% amb padding fluid en comptes de container limitat */ .topbar .container, .topbar .container-custom, .cb-navbar .container, .cb-navbar .container-custom, .banner-slider .container-custom { max-width: 100%; padding-left: clamp(15px, 5vw, 60px); padding-right: clamp(15px, 5vw, 60px); } /* Logo */ .navbar-brand img { max-width: 220px; min-height: 65px; } /* ------------------------------------------------------- 10. Slider home ------------------------------------------------------- */ .banner-slide, .banner-slide.banner-full { min-height: unset; height: clamp(220px, 42vh, 480px); max-height: clamp(220px, 42vh, 480px); } .banner-content { max-width: 825px; } .banner-slide img { width: 100%; height: 100%; min-height: unset; max-height: clamp(220px, 42vh, 480px) !important; object-fit: cover; object-position: center center; } .banner-overlay { background: linear-gradient(to bottom, rgba(178, 152, 180, 0) 0%, rgba(178, 152, 180, 0.5) 100%); } .banner-kicker { font-size: 40px; font-weight: normal; margin-bottom: 1rem; font-family: var(--font-secondary); line-height: 1.2; letter-spacing: 1.2px; background: none; border-radius: inherit; backdrop-filter: inherit; padding: 0; } /* ------------------------------------------------------- 11. Nav split ------------------------------------------------------- */ /* Split nav: logo centrat amb menú a esquerra i dreta */ .nav-split { min-height: 72px; } .nav-split-side { flex: 1 1 0; /* els dos costats ocupen exactament el mateix espai */ min-width: 0; /* evita overflow quan els items son llargs */ } .nav-split-left { display: flex; justify-content: flex-start; } .nav-split-right { display: flex; justify-content: flex-end; } /* ------------------------------------------------------- 12. Capçalera de secció centrada (.seccio-cap) ------------------------------------------------------- */ .seccio-cap .section-subtitle { font-family: var(--font-default); text-transform: uppercase; font-size: 16px; margin-bottom: 24px; } .seccio-cap .section-title { font-family: var(--font-secondary); font-size: 38px; font-weight: 400; margin-bottom: 24px; } .seccio-cap .section-text { margin-bottom: 50px; } .destacats-cap { max-width: 580px; } /* ------------------------------------------------------- 13. Product card — disseny Clemen Beauty ------------------------------------------------------- */ .product-card { padding: 10px; border-radius: 5px; overflow: visible; display: flex; flex-direction: column; height: 100%; position: relative; } .product-card-link { position: absolute; inset: 0; z-index: 1; } .product-image-wrap { aspect-ratio: 1 / 1; border-radius: 5px; overflow: hidden; position: relative; } .product-actions { z-index: 2; } .product-card-body { padding: 20px 0 0; display: flex; flex-direction: column; flex: 1; position: relative; } .product-card-body > .btn { position: relative; z-index: 2; } .product-card-body .product-price { margin-top: auto; } .product-title { font-family: var(--font-secondary); color: #000000; font-size: 24px; font-weight: 400; } .product-desc { font-family: var(--font-default); font-weight: 300; font-size: 14px; color: var(--color-muted); margin-bottom: 0.75rem; line-height: 1.5; } .product-price, .mini-price { font-family: var(--font-default); font-weight: 200; font-size: 25px; } /* ------------------------------------------------------- 14. Bloc categoria — layout 4 columnes ------------------------------------------------------- */ /* Colors de fons dels cards */ .bloc-cat-card-lila { background: var(--cb-lila); } .bloc-cat-card-green { background: var(--cb-green); } .bloc-cat-card-pink { background: var(--cb-pink); } /* Textos blancs i botó blanc per als cards de color de marca */ .bloc-cat-card-lila .product-title, .bloc-cat-card-green .product-title, .bloc-cat-card-pink .product-title, .bloc-cat-card-lila .product-desc, .bloc-cat-card-green .product-desc, .bloc-cat-card-pink .product-desc, .bloc-cat-card-lila .product-price, .bloc-cat-card-green .product-price, .bloc-cat-card-pink .product-price { color: var(--cb-white); } .bloc-cat-card-lila .btn-cb-pink, .bloc-cat-card-green .btn-cb-pink, .bloc-cat-card-pink .btn-cb-pink { background: var(--cb-white); border-color: var(--cb-white); color: var(--cb-black); } /* Cols 3-4: contenidor dels 2 cards horitzontals, iguala alçada amb col 2 */ .bloc-cat-col-h { display: flex; flex-direction: column; gap: 12px; height: 100%; } .bloc-cat-col-h > article { flex: 1; } /* Card horitzontal: imatge quadrada esquerra + contingut dreta */ .bloc-cat-card-h { display: flex; flex-direction: row; align-items: flex-start; height: 100%; } .bloc-cat-h-img { flex: 0 0 40%; aspect-ratio: 1 / 0.9; overflow: hidden; border-radius: 5px; position: relative; } .bloc-cat-h-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .bloc-cat-card-h > .product-card-body { flex: 1; padding: 0px 0px 0px 10px; align-self: stretch; } /* ------------------------------------------------------- 15. Bloc columnes fills — cards retrat amb overlay ------------------------------------------------------- */ .bloc-col-card { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 20px; text-decoration: none; } .bloc-col-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .bloc-col-card:hover img { transform: scale(1.06); } .bloc-col-overlay { position: absolute; inset: 0; background: rgba(30, 30, 30, 0.15); transition: background 0.4s ease; } .bloc-col-card:hover .bloc-col-overlay { background: rgba(30, 30, 30, 0.35); } .bloc-col-title { position: absolute; bottom: 25px; left: 25px; right: 25px; color: var(--cb-white); font-family: var(--font-secondary); font-size: 25px; font-weight: 400; line-height: 1.2; } /* ------------------------------------------------------- 16. Bloc logos — carousel infinit ------------------------------------------------------- */ .logos-track-wrap { overflow: hidden; } .logos-track { display: flex; width: max-content; animation: logos-scroll 28s linear infinite; } .logos-track:hover { animation-play-state: paused; } @keyframes logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .logos-track-item { flex-shrink: 0; display: flex; align-items: center; padding: 1rem 4.5rem; } .logos-track-item img { height: 100px; width: auto; opacity: 0.85; transition: opacity 0.25s; } .logos-track-item:hover img { opacity: 1; } /* ------------------------------------------------------- 17. Bloc about — 2 columnes full width ------------------------------------------------------- */ .about-wrap { display: flex; gap: 0px; padding: 0px; } .about-content { flex: 0 0 calc(50% - 6px); background: var(--cb-pink); border: 2px solid var(--cb-red); border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 6rem; } .about-content-inner { max-width: 580px; } .about-kicker { font-family: var(--font-default); font-size: 16px; font-weight: 400; text-transform: uppercase; color: var(--cb-red); margin-bottom: 12px; } .about-title { font-family: var(--font-secondary); font-size: 38px; font-weight: 400; color: var(--cb-red); margin-bottom: 1rem; line-height: 1.1; } .about-desc, .about-desc p { color: var(--cb-red); } .about-img { flex: 0 0 calc(50% - 6px); border-radius: 12px; overflow: hidden; position: relative; } .about-img-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .about-img-logo { position: absolute; left: 0; top: 0; height: 100%; width: auto; display: block; } /* ------------------------------------------------------- 18. Bloc noticies — layout 4 columnes ------------------------------------------------------- */ .noticia-card { display: flex; flex-direction: column; border-radius: 5px; overflow: hidden; } .noticia-img { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 5px; flex-shrink: 0; } .noticia-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .noticia-body { padding: 14px; background: var(--cb-pink-light); border-radius: 5px; flex: 1; display: flex; flex-direction: column; } .noticia-title { font-family: var(--font-secondary); font-size: 22px; font-weight: 400; color: var(--cb-black); margin-bottom: 0.5rem; } .noticia-desc, .noticia-desc p { font-size: 14px; color: var(--color-muted); line-height: 1.5; } .noticia-body .btn { margin-top: auto; text-transform: uppercase; font-weight: 400; padding: 0.5rem 1.75rem; } /* ------------------------------------------------------- 18b. Blog llistat — hero amb background ------------------------------------------------------- */ .blog-llistat-hero { position: relative; min-height: 340px; display: flex; align-items: center; background-color: var(--color-soft); background-size: cover; background-position: center; } .blog-llistat-hero__overlay { position: absolute; inset: 0; /* background: rgba(0, 0, 0, 0.45); */ } .blog-llistat-hero__content { position: relative; z-index: 1; padding-top: var(--section-space); padding-bottom: var(--section-space); } .blog-llistat-hero__title { font-family: var(--font-secondary); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 400; color: var(--color-white); margin-bottom: 3rem; } .blog-llistat-hero__desc { font-size: 1.05rem; color: rgba(255, 255, 255, 0.85); max-width: 600px; line-height: 1.3; } .blog-llistat-hero__desc + .blog-llistat-hero__desc { margin-top: var(--spacing-md); } .blog-llistat-hero__desc p { margin-bottom: 0; line-height: 1.3; } @media (max-width: 576px) { .blog-llistat-hero { min-height: 240px; } .blog-llistat-hero__title { font-size: 1.8rem; } } /* ------------------------------------------------------- 18c. Single blog — fitxa individual amb hero + caixa ------------------------------------------------------- */ .single-blog-hero { position: relative; min-height: 340px; background-color: var(--color-soft); background-size: cover; background-position: center; } .single-blog-hero__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); } .single-blog-wrap { margin-top: -240px; position: relative; z-index: 2; padding-bottom: var(--section-space); } .single-blog-card { width: 70%; margin: 0 auto; } .single-blog-card__back { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--cb-white); text-decoration: none; font-size: 0.92rem; margin-bottom: 1.5rem; transition: opacity 0.15s; } .single-blog-card__back:hover { color: var(--cb-white); opacity: 0.75; } .single-blog-card__back i { font-size: 0.9em; } .single-blog-card__img { border-radius: 12px; overflow: hidden; margin-bottom: 2rem; } .single-blog-card__img img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .single-blog-card__body { max-width: 100%; } .single-blog-card__title { font-family: var(--font-secondary); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 400; line-height: 1.15; color: var(--cb-black); margin-bottom: 1rem; } .single-blog-card__subtitle { font-size: 1.1rem; color: var(--color-muted); margin-bottom: 1.75rem; line-height: 1.4; } .single-blog-card__lead, .single-blog-card__lead p { font-size: 1.05rem; line-height: 1.6; color: var(--cb-black); margin-bottom: 1.5rem; } .single-blog-card__text, .single-blog-card__text p { font-size: 1rem; line-height: 1.7; color: var(--cb-black); } .single-blog-card__text p { margin-bottom: 1rem; } .single-blog-card__text img { max-width: 100%; height: auto; border-radius: 8px; margin: 1rem 0; } @media (max-width: 992px) { .single-blog-card { width: 90%; } } @media (max-width: 576px) { .single-blog-hero { min-height: 200px; } .single-blog-wrap { margin-top: -160px; } .single-blog-card { width: 100%; } .single-blog-card__img { margin-bottom: 1.5rem; } } /* ------------------------------------------------------- 19. Bloc FAQs — 2 columnes amb accordion ------------------------------------------------------- */ .faq-accordion { border-top: 1px solid var(--cb-red); } .faq-accordion .accordion-item { border-bottom: 1px solid var(--cb-red) !important; background: transparent; } .faq-accordion .accordion-button { font-family: var(--font-default); font-size: 16px; font-weight: 500; color: var(--cb-black); box-shadow: none; } .faq-accordion .accordion-button:not(.collapsed) { color: var(--cb-red); background: transparent; box-shadow: none; } .faq-accordion .accordion-button::after { filter: none; } .faq-accordion .accordion-button:not(.collapsed)::after { filter: none; } /* ------------------------------------------------------- 20. Bloc text imatge red — fons vermell, text rosa ------------------------------------------------------- */ .bloc-red { background: var(--cb-red); } .bloc-red-title { color: var(--cb-pink); font-family: var(--font-secondary); font-size: 38px; font-weight: 400; } .bloc-red-desc { color: var(--cb-pink); max-width: 640px; } .red-bloc-item { background: var(--cb-pink); padding: 15px; border-radius: 12px; display: flex; flex-direction: column; height: 100%; } .red-bloc-num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 58px; border-radius: 999px; border: 2px solid var(--cb-red); font-family: var(--font-secondary); font-size: 35px; font-weight: 400; color: var(--cb-red); margin-bottom: 5rem; flex-shrink: 0; } .red-bloc-title { font-size: 15px; font-weight: 700; color: var(--cb-red); margin-bottom: 6px; display: block; } .red-bloc-text { font-size: 14px; color: var(--cb-red); margin: 0; line-height: 1.5; } /* ------------------------------------------------------- 21. Bloc contacte — 2 columnes full width ------------------------------------------------------- */ .contacte-wrap { display: flex; } .contacte-img { flex: 0 0 50%; overflow: hidden; position: relative; } .contacte-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .contacte-content { flex: 0 0 50%; padding: 6rem; background: rgba(238, 188, 197, 0.15); display: flex; flex-direction: column; justify-content: center; } .contacte-title { font-family: var(--font-secondary); font-size: 38px; font-weight: 400; color: var(--cb-black); margin-bottom: 1rem; line-height: 1.1; } .contacte-desc, .contacte-desc p { color: var(--cb-black); font-size: 15px; line-height: 1.6; } /* ------------------------------------------------------- 22. Pàgina categoria ------------------------------------------------------- */ .cat-banner { width: 100%; max-height: 325px; overflow: hidden; } .cat-banner img { width: 100%; max-height: 325px; object-fit: cover; display: block; } .cat-header-section { padding: 3rem 0 2rem; text-align: center; } .cat-header-section .breadcrumbs { margin-bottom: 4rem; } .cat-header-inner { max-width: 50%; margin: 0 auto; } .cat-page-title { font-family: var(--font-secondary); font-size: 50px; font-weight: 400; color: var(--cb-black); line-height: 1.1; margin-bottom: 1rem; } .cat-page-desc { font-family: var(--font-default); font-size: 15px; color: var(--cb-black); line-height: 1.6; } .cat-products-section { padding: 2.5rem 0 3rem; } /* Espai breadcrumb → contingut a la fitxa de producte */ .product-page .breadcrumbs { margin-bottom: 2rem; } /* Breadcrumb — categoria i fitxa de producte */ .cat-header-section .breadcrumbs, .product-page .breadcrumbs, .cat-header-section .breadcrumbs a, .product-page .breadcrumbs a, .cat-header-section .breadcrumbs span, .product-page .breadcrumbs span { font-family: var(--font-default); font-weight: 500; font-size: 12px; } .cat-header-section .breadcrumbs a, .product-page .breadcrumbs a, .cat-header-section .breadcrumbs a span, .product-page .breadcrumbs a span { color: var(--cb-pink) !important; text-decoration: none !important; } .cat-header-section .breadcrumbs span:not([itemprop]), .product-page .breadcrumbs span:not([itemprop]) { color: var(--cb-pink) !important; } .cat-header-section .breadcrumbs > span[itemprop="name"], .product-page .breadcrumbs > span[itemprop="name"] { color: var(--cb-red) !important; } .cat-seo-text { background: var(--cb-white); padding: 3rem 0; } .cat-seo-text-inner { font-family: var(--font-default); font-size: 14px; font-weight: 400; color: var(--cb-black); line-height: 1.7; } .cat-seo-text-inner p { margin-bottom: 1rem; } .cat-seo-text-inner h2 { font-size: 18px; } /* ------------------------------------------------------- 23. Animacions d'entrada (page load, sense scroll) ------------------------------------------------------- */ @keyframes cb-fade-in-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .cb-appear { animation: cb-fade-in-up 0.65s ease-out both; } .cb-appear-late { animation: cb-fade-in-up 0.65s ease-out 0.2s both; } /* ------------------------------------------------------- 24. Footer ------------------------------------------------------- */ .site-footer { border-top: none; padding: 0; color: var(--cb-black); font-size: 0.95rem; } .footer-white { background: var(--cb-white); padding: 3rem 2rem 0; text-align: center; } .footer-logo-row { margin-bottom: 2rem; } .footer-logo-row a { display: inline-block; } .footer-logo-row img { max-width: 350px; width: auto; height: 55px; display: block; margin: 0 auto; } .footer-contact-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.75rem 2rem; margin-bottom: 2rem; font-size: 15px; } .footer-contact-row a, .footer-contact-row span { color: var(--cb-black); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; } .footer-contact-row a:hover { color: var(--cb-red); } .footer-nav-row { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 1rem 2rem; padding: 1.5rem 0; border-top: 1px solid var(--color-border); } .footer-nav-item { display: flex; flex-direction: column; gap: 0.3rem; } .footer-nav-parent { color: var(--cb-black); text-decoration: none; font-family: var(--font-default); font-size: 13px; font-weight: 600; transition: color 0.15s; } .footer-nav-parent:hover { color: var(--cb-red); } .footer-nav-child { color: var(--cb-black); text-decoration: none; font-family: var(--font-default); font-size: 13px; font-weight: 400; transition: color 0.15s; } .footer-nav-child:hover { color: var(--cb-red); } .footer-bottom { background: var(--cb-red); } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 2rem; } .footer-legals { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; } .footer-legals a { color: var(--cb-pink); text-decoration: none; font-size: 13px; transition: opacity 0.15s; } .footer-legals a:hover { opacity: 0.75; } .footer-rights { color: var(--cb-pink); font-size: 13px; } /* ------------------------------------------------------- 25. Fitxa de producte — overrides Clemen Beauty ------------------------------------------------------- */ /* Imatge: sense border-radius */ .main-image-card { border-radius: 0 !important; } .thumb-btn { border-radius: 4px !important; } /* Títol: Big Caslon 50px */ .product-title-lg { font-family: var(--font-secondary); font-size: 50px; font-weight: 400; line-height: 1.05; letter-spacing: 0; } /* Subtítol i text curt: Zalando Sans */ .product-short-text, .product-desc-text { font-family: var(--font-default); font-size: 14px; line-height: 1.65; color: var(--cb-black); } .product-subtitle-text { font-family: var(--font-default); font-size: 18px; line-height: 1.5; color: var(--cb-black); margin-top: 20px; margin-bottom: 15px; } .product-desc-text p { margin-bottom: 0.75rem; } /* Fila preu + quantitat + compra */ .product-buy-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 2.5rem 0; } .product-buy-price { font-family: var(--font-default); font-size: 30px; font-weight: 200; color: var(--cb-black); white-space: nowrap; } .product-buy-price small { font-size: 14px; font-weight: 400; color: var(--color-muted); text-decoration: line-through; margin-left: 0.4rem; } .product-buy-row .qty-control { flex-shrink: 0; width: 100px; min-width: 0; border-radius: 5px; overflow: hidden; min-height: 0; height: 38px; grid-template-columns: 28px 1fr 28px; } .product-buy-row .qty-control button { font-size: 0.65rem; min-width: 0; } .product-buy-row .qty-control input { font-size: 13px; min-width: 0; } .product-buy-row .btn-cb-primary { height: 38px; padding-top: 0; padding-bottom: 0; padding-left: 1rem; padding-right: 1rem; font-size: 13px; flex: 1; min-width: 140px; white-space: nowrap; background: var(--cb-black); border-color: var(--cb-black); color: var(--cb-white); font-weight: 300; } .product-buy-row .btn-cb-primary:hover { background: var(--cb-red); border-color: var(--cb-red); color: var(--cb-white); } /* Accordion de característiques */ .product-caracs-accordion { margin-top: 1.5rem; } .product-caracs-accordion .accordion-item { border: none; border-bottom: 1px solid var(--cb-red); border-radius: 0 !important; background: var(--cb-white); } .product-caracs-accordion .accordion-button { font-family: var(--font-default); font-size: 13px; font-weight: 600; color: var(--cb-red); background: var(--cb-white); padding: 0.75rem 1rem; box-shadow: none; } .product-caracs-accordion .accordion-button::after { filter: none; } .product-caracs-accordion .accordion-button:not(.collapsed) { color: var(--cb-red); background: var(--cb-red-soft); box-shadow: none; } .product-caracs-accordion .accordion-collapse { background: var(--cb-white); } .product-caracs-accordion .accordion-body { font-family: var(--font-default); font-size: 13px; font-weight: 400; color: var(--cb-black); padding: 0.5rem 1rem 0.75rem; } /* Bloc imatge ambient — full width sota el contingut */ .product-ambient-block { width: 100%; max-height: 600px; overflow: hidden; margin-top: 3rem; } .product-ambient-block img { width: 100%; height: 100%; max-height: 600px; object-fit: cover; display: block; } /* ------------------------------------------------------- 26. Filtres categoria ------------------------------------------------------- */ .filters-sidebar { border-radius: 5px; } .cat-mobile-filter-bar { margin-bottom: 1rem; } .cat-filter-btn { gap: 0.5rem; color: var(--cb-black); border-color: var(--cb-black); } .cat-filter-btn:hover, .cat-filter-btn:focus { background: var(--cb-black); color: var(--cb-white); border-color: var(--cb-black); } @media (max-width: 991.98px) { /* Amagar sidebar desktop — l'offcanvas (position:fixed) queda accessible */ .cat-filters-col .filters-sidebar { display: none; } /* Eliminar padding de la columna per no deixar espai buit */ .cat-filters-col { padding: 0; } } .filters-title { font-family: var(--font-default); text-transform: uppercase; font-size: 16px; font-weight: 500; margin-bottom: 0; } /* ============================================================ MEDIA QUERIES — tots els breakpoints agrupats al final ============================================================ */ /* ------------------------------------------------------- Desktop (min-width: 992px) ------------------------------------------------------- */ @media (min-width: 992px) { /* Navegació: amagar el collapse de Bootstrap i mostrar el split nav */ .cb-navbar .navbar-collapse { display: none !important; } } /* ------------------------------------------------------- Tablet i mòbil (max-width: 991.98px) ------------------------------------------------------- */ @media (max-width: 991.98px) { /* Navegació mòbil */ .main-menu .nav-link { color: var(--cb-black); } .mega-links a, .mega-links a:hover { color: rgba(30, 30, 30, 0.85); font-size: 0.82rem; } .mega-title { color: var(--cb-black); } .mega-menu .row { --bs-gutter-y: 0; --bs-gutter-x: 0; } .mega-menu .mega-highlight { display: none !important; } /* Bloc categoria */ .bloc-cat-col-h { height: auto; } /* Cards sense color de fons (blanc): passen a vertical */ .bloc-cat-card-h { flex-direction: column; } .bloc-cat-h-img { flex: none; width: 100%; aspect-ratio: 1 / 1; } .bloc-cat-card-h > .product-card-body { padding: 20px 0 0; align-self: auto; } /* Cards amb color de fons: mantenen format horitzontal */ .bloc-cat-card-h.bloc-cat-card-green, .bloc-cat-card-h.bloc-cat-card-pink { flex-direction: row; } .bloc-cat-card-h.bloc-cat-card-green .bloc-cat-h-img, .bloc-cat-card-h.bloc-cat-card-pink .bloc-cat-h-img { flex: 0 0 40%; width: auto; aspect-ratio: 1 / 0.9; } .bloc-cat-card-h.bloc-cat-card-green > .product-card-body, .bloc-cat-card-h.bloc-cat-card-pink > .product-card-body { padding: 0 0 0 10px; align-self: stretch; } /* Card lila (vertical → horitzontal) Nota: .product-card i .bloc-cat-card-lila són al MATEIX element
, cal selector compost (sense espai) en lloc de descendent. Especificitat 0,3,0 per guanyar sobre .row .product-item (0,2,0) de ≤767px. */ .row .product-item:has(.bloc-cat-card-lila) { flex: 0 0 auto; width: 100%; } .product-card.bloc-cat-card-lila { flex-direction: row; align-items: flex-start; } .bloc-cat-card-lila .product-image-wrap { flex: 0 0 40%; aspect-ratio: 1 / 0.9; } .bloc-cat-card-lila .product-card-body { flex: 1; padding: 0 0 0 10px; } /* Bloc contacte */ .contacte-wrap { flex-direction: column; } .contacte-img, .contacte-content { flex: none; width: 100%; } .contacte-img { min-height: 300px; } .contacte-content { padding: 40px 24px; } /* Pàgina categoria */ .cat-header-inner { max-width: 80%; } .cat-page-title { font-size: 28px; } /* Fitxa de producte */ .product-title-lg { font-size: 36px; } .product-ambient-block { max-height: 400px; } .product-ambient-block img { max-height: 400px; } /* Galeria fitxa — corregeix especificitat de :has(.thumbs-col) de estils.css Sense aquest override, el layout queda 96px+1fr en mòbil i la imatge principal queda esclafada a la columna de 96px quan hi ha miniatures. */ .gallery-layout:has(.thumbs-col) { grid-template-columns: 1fr; } /* Títols de secció — home */ .banner-kicker { font-size: 28px; } .seccio-cap .section-title { font-size: 28px; } .about-title { font-size: 28px; } .about-content { padding: 3rem 2.5rem; } .contacte-title { font-size: 28px; } .bloc-red-title { font-size: 28px; } /* Cards i elements de text — home */ .bloc-col-title { font-size: 20px; } /* Últim fill imparell: ocupa tot l'ample i es mostra en format apaïsat */ .col:last-child:nth-child(odd) { width: 100%; } .col:last-child:nth-child(odd) .bloc-col-card { aspect-ratio: 5 / 2; } } /* ------------------------------------------------------- Mòbil (max-width: 767.98px) ------------------------------------------------------- */ @media (max-width: 767.98px) { /* Text base */ body { font-size: 14px; } /* Logos track — menys espaiat i imatges més petites */ .logos-track-item { padding: 0.5rem 1.5rem; } .logos-track-item img { height: 55px; } /* Product items — 2 per fila en totes les mides de mòbil Especificitat 0,2,0 per guanyar sobre Bootstrap col width:100% (0,1,0) */ .row .product-item { flex: 0 0 auto; width: 50%; } /* Padding lateral dels containers — mínim 20px */ .container, .container-custom { padding-left: 20px; padding-right: 20px; } /* Bloc about */ .about-wrap { flex-direction: column; padding: 0; gap: 0px; } .about-content, .about-img { flex: none; width: 100%; } .about-content { padding: 2.5rem 1.5rem; } .about-img { min-height: 280px; } /* Footer */ .footer-white { padding: 2rem 20px 0; } .footer-logo-row img { height: 45px; } .footer-contact-row { flex-direction: column; align-items: center; gap: 0.6rem; font-size: 13px; margin-bottom: 1.5rem; } .footer-nav-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; text-align: left; padding: 1.25rem 0; } .footer-nav-item { gap: 0.25rem; } .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1rem 20px; } /* Botons */ .btn-cb-primary, .btn-cb-outline, .btn-cb-outline-inv, .btn-cb-pink, .btn-cb-dark, .btn-light-clean { font-size: 12px; } /* Subtítols / kickers de secció */ .seccio-cap .section-subtitle, .about-kicker { font-size: 12px; margin-bottom: 10px; } /* Títols de secció — home */ .banner-kicker { font-size: 22px; } .seccio-cap .section-title { font-size: 25px; margin-bottom: 20px; } /* Pàgina categoria */ .cat-page-title { font-size: 25px; } .cat-page-desc { font-size: 13px; } .cat-seo-text-inner { font-size: 12px; } .cat-seo-text-inner h2 { font-size: 15px; } .about-title { font-size: 25px; margin-bottom: 20px; } .contacte-title { font-size: 25px; margin-bottom: 20px; } .bloc-red-title { font-size: 25px; margin-bottom: 20px; } /* Cards i elements de text — home */ .bloc-col-title { font-size: 18px; } .noticia-title { font-size: 18px; } /* Product item — mòbil */ .product-title { font-size: 18px; margin-bottom: 4px; } .product-desc { font-size: 12px; margin-bottom: 6px; } .product-price, .mini-price { font-size: 16px; margin-bottom: 8px; } .product-card .btn-cb-pink { font-size: 12px; padding: 0.4rem 0.6rem; } /* Barra de compra fixe al bottom — fitxa de producte */ .product-page { padding-bottom: 90px; } .product-buy-row { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; margin: 0; padding: 12px 20px; background: var(--cb-white); border-top: 1px solid var(--color-border); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); gap: 0.75rem; flex-wrap: nowrap; align-items: center; } .product-buy-price { font-size: 20px; white-space: nowrap; flex-shrink: 0; } .product-buy-row .btn-cb-primary { flex: 1; white-space: nowrap; } /* Botons d'acció (favorit, carret) dins la imatge del producte */ .product-actions .icon-btn { width: 30px; height: 30px; font-size: 12px; } } /* ------------------------------------------------------- Mòbil petit (max-width: 575.98px) ------------------------------------------------------- */ @media (max-width: 575.98px) { /* Pàgina categoria */ .cat-header-inner { max-width: 100%; } /* Fitxa de producte */ .product-title-lg { font-size: 28px; } } /* ------------------------------------------------------- Marca hero (categoria amb plantilla marca) ------------------------------------------------------- */ .marca-hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 80vh; max-height: 80vh; min-height: 480px; overflow: hidden; } .marca-hero-col { position: relative; overflow: hidden; } .marca-hero-text { background: var(--cb-black); color: var(--cb-white); display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); } .marca-hero-text-inner { width: 100%; max-width: 520px; /* padding-left: clamp(24px, 6vw, 80px); */ } .marca-hero-title { color: var(--cb-white); font-family: var(--font-default); font-weight: 300; font-size: 24px; line-height: 1.2; margin: 0 0 15px; } .marca-hero-desc { color: rgba(255, 255, 255, 0.85); font-size: 15px; line-height: 1.2; } .marca-hero-desc * { color: inherit; } .marca-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .marca-hero-logo { position: absolute; top: clamp(24px, 4vh, 56px); left: 50%; transform: translateX(-50%); z-index: 2; width: clamp(140px, 18vw, 240px); pointer-events: none; } .marca-hero-logo img { width: 100%; height: auto; display: block; filter: brightness(0) invert(1); } @media (max-width: 991.98px) { .marca-hero { grid-template-columns: 1fr; height: auto; min-height: 0; } .marca-hero-image { order: 1; height: 60vh; } .marca-hero-text { order: 2; min-height: 50vh; padding: var(--spacing-lg) var(--spacing-md); } .marca-hero-text-inner { max-width: 100%; padding-right: 0; } .marca-hero-logo { top: clamp(16px, 3vh, 32px); width: clamp(110px, 28vw, 180px); } } /* ====================================================== CSS extret d'estils.css per a la plantilla distribuidores.php ====================================================== */ /* --- Base --- */ #content_distribuidors .mobile { display: none; } /* --- Seleckbox (desplegable custom) --- */ .seleckbox { display: block; margin: 0px; text-transform: uppercase; padding-left: 0; } .seleckbox, .seleckbox ul { list-style: none; color: #747474; font-size: 13px; } .seleckbox > li { position: relative; } .seleckbox > li > span { color: #000; background-color: #FFFFFF; position: relative; display: block; line-height: 1; cursor: pointer; transition: all ease .3s; } .seleckbox li i.fa { position: absolute; right: 16px; top: 50%; transition: all ease .3s; } .seleckbox ul { position: absolute; left: 0; display: none; z-index: 10; overflow: auto; padding-left: 0; background-color: #FFFFFF; } .seleckbox ul li { overflow: hidden; padding: 8px 0px; cursor: pointer; border-top: 1px solid #7f7f7f; } .seleckbox ul li:first-child { border-top: none; } .seleckbox ul li label { max-width: 85%; display: inline-block; cursor: pointer; } .seleckbox input[type=checkbox] { float: right; margin-top: 5px; } /* --- Filtre distribuidor --- */ .filtre_distribuidor { margin-bottom: 15px; } .filtre_distribuidor > li > span { padding: 16px 38px 16px 41px; text-align: left; font-family: var(--font-default); font-weight: 700; text-transform: none; font-size: 14px; } .filtre_distribuidor ul { text-align: left; font-family: var(--font-default); font-weight: 300; padding: 5px 14px; left: 0; right: 0; top: 52px; max-height: 232px; overflow: auto; } .filtre_distribuidor i.fa { font-size: 30px; margin-top: -15px; } /* --- Contenidor principal --- */ #content_distribuidors { position: relative; overflow: hidden; height: 100%; min-height: 100vh; background: #000; } /* --- Llista de locals propers --- */ #locals_propers { position: absolute; left: 0; bottom: 0; right: 0; top: 280px; overflow: auto; z-index: 301; background-color: #FDF5F6; } #locals_propers > a { display: block; padding: 10px 0px; border-bottom: 1px solid #CCC; cursor: pointer; } #locals_propers > a:hover, .bloc_local:hover, .bloc_local.active { background-color: var(--cb-red) !important; color: var(--cb-white) !important; } #locals_propers.active { display: block; } #locals_propers h3 { margin-bottom: 15px; font-weight: normal; font-family: 'source_sans_probold'; font-size: 18px; color: #52433b; } #locals_propers.active + #mapa_punts { margin-left: 378px; width: auto !important; } #locals_propers > div { display: table; width: 100%; color: var(--cb-black); font-size: 14px; cursor: pointer; background-color: rgba(238, 188, 197, 0.50); } #locals_propers > div > div { display: table-row; } #locals_propers > div > div > div { display: table-cell; } .tipus_disp { width: 78px; text-align: center; vertical-align: middle; padding-left: 24px; } .tipus_disp img { height: 44px; } .desc_disp { width: 263px; padding: 12px 10px 12px 25px; } .desc_disp span { display: block; font-family: var(--font-default); font-weight: 700; text-transform: uppercase; } .dist_disp { font-family: var(--font-default); font-weight: 700; vertical-align: middle; white-space: nowrap; } #locals_propers > div:nth-child(even) { background-color: rgba(238, 188, 197, 0.20); } /* --- Mapa --- */ #mapa_punts { position: absolute; top: 0px; left: 435px; right: 0; bottom: 0; } /* --- Barra lateral distribuidors --- */ #distribuidors_lat { /*overflow: hidden;*/ background-color: #FDF5F6; color: #666; top: 0px; left: 0; bottom: 0; position: absolute; width: 435px; z-index: 301; } #distribuidors_lat h2 { text-align: center; color: var(--cb-black); text-transform: uppercase; font-size: 19px; letter-spacing: 3px; } #filters_lat { padding: 0px 14px 0px 27px; margin-top: 39px; position: relative; z-index: 302; background-color: #FDF5F6; } #filters_lat select, #filters_lat input.filtre { height: 45px; border: 0; vertical-align: top; width: 100%; margin-bottom: 14px; padding: 16px 38px 16px 41px; font-family: var(--font-default); font-weight: 700; text-transform: none; font-size: 14px; letter-spacing: 1px; } #filters_lat ::-webkit-input-placeholder { color: #000; } #filters_lat :-moz-placeholder { color: #000; opacity: 1; } #filters_lat ::-moz-placeholder { color: #000; opacity: 1; } #filters_lat :-ms-input-placeholder { color: #000; } #filters_lat :placeholder-shown { color: #000; } .boto_filtre { display: inline-block; font-size: 14px; background-color: #F00; color: #FFF; font-family: var(--font-default); font-weight: 700; text-transform: uppercase; line-height: 45px; height: 45px; padding: 0px 22px; min-width: 178px; text-align: center; vertical-align: top; float: right; cursor: pointer; } #content_radi { height: 45px; border: 0; vertical-align: top; margin-bottom: 14px; padding: 0px 15px 0px 41px; font-family: var(--font-default); font-weight: 700; text-transform: none; font-size: 14px; letter-spacing: 1px; background-color: #FFF; color: #000; float: left; width: 206px; padding-top: 11px; } #content_radi input { width: 35px; font-family: var(--font-default); font-weight: 700; text-transform: none; font-size: 14px; vertical-align: 0px; border: 0; height: 26px; border-bottom: 1px solid #000; margin: 0; padding: 0; text-align: center; } #boto_distribuidors { display: none; } #info_local { position: absolute; left: -400px; width: 340px; z-index: 300; background-color: var(--cb-red); box-shadow: 4px 0 18px rgba(0,0,0,0.12); border-radius: var(--radius-md); padding: 28px 24px; color: var(--color-white); font-family: var(--font-default); font-size: 14px; line-height: 1.35; transition: left .3s ease; top: 200px; } #info_local.active { left: calc(435px + 12px); } #info_local h4 { font-family: var(--font-default); font-weight: 700; font-size: 21px; margin-bottom: 15px; line-height: 1.25; color: var(--cb-pink); } #info_local table td { padding: 0px 5px 15px 5px; } #info_local .icon-cell { width: 32px; text-align: center; font-size: 20px; color: var(--cb-pink); } .btn-reservar-cita { display: inline-block; background: var(--cb-pink); color: var(--cb-red); font-family: var(--font-default); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; padding: 10px 20px; border-radius: var(--radius-sm); text-decoration: none; transition: background 0.2s, color 0.2s; margin-top: 4px; } .btn-reservar-cita:hover { background: var(--cb-white); color: var(--cb-red); } /* --- Popup (magnific popup) --- */ .white-popup { position: relative; background: #FFF; padding: 20px; max-width: 500px; width: auto; max-height: 700px; overflow: auto; margin: 20px auto; font-size: 14px; } /* ====================================================== @media screen and (max-width: 1010px) ====================================================== */ @media screen and (max-width: 1010px) { #content_distribuidors { height: calc(100vh - 54px); height: calc(100svh - 54px); position: relative; } #mapa_punts { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* Botó fix al fons de la pantalla */ #boto_distribuidors { display: flex; align-items: center; justify-content: center; gap: 10px; position: fixed; bottom: 0; left: 0; right: 0; height: 54px; z-index: 1000; background-color: var(--cb-red); color: var(--cb-white); text-transform: uppercase; font-size: 15px; letter-spacing: 2px; font-family: var(--font-default); font-weight: 700; cursor: pointer; border-top: 2px solid var(--cb-white); } #boto_distribuidors i.fr { display: none; } /* Panel lliscant des de baix */ #distribuidors_lat { position: fixed; bottom: 54px; left: 0; right: 0; width: 100%; height: 0; overflow: hidden; z-index: 999; transition: height .3s ease; border-top: none; top: auto; } #distribuidors_lat.active { height: 65vh; overflow-y: auto; } #distribuidors_lat h2 { text-align: left; } /* Info local en mobile */ #info_local { position: fixed !important; bottom: 54px !important; top: auto !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1001 !important; padding: 16px !important; border-radius: var(--radius-md) var(--radius-md) 0 0 !important; font-size: 13px !important; background-color: rgba(238, 37, 36, 0.88) !important; backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .2s ease; } #info_local.active { opacity: 1 !important; pointer-events: auto; } #info_local h4 { font-size: 17px; } #info_local table td { padding: 0 5px 8px 5px; } /* Botó tancar */ .close_distribuidors { color: var(--cb-pink); font-size: 14px; line-height: 0.5; padding: 0 16px; margin-top: 14px; text-align: right; position: sticky; top: 0; right: 0; z-index: 500; } .close_distribuidors span { font-size: 32px; vertical-align: -6px; } .desc_disp { width: auto; } #locals_propers { top: 240px; border-top: none; } #filters_lat { padding: 0 14px; margin-top: 12px; } #content_radi { width: 100%; } .nomobile { display: none !important; } .mobile { display: block; } }