/* Pintores Hermanos Soler — arquitectura de luz mediterránea. Superficies marfil, carbón y cobalt blue; Coral Soler como gesto de energía. Editorial asimétrico, textura sutil, bordes precisos y motion corto. Las tipografías se cargan desde (no con @import) para no bloquear el render. */ /* ------------------------------------------------------------------ * * 1. Tokens * ------------------------------------------------------------------ */ :root { --ivory: #F4F0E8; --paper: #FBF9F5; --ink: #181817; --muted: #67655F; --blue: #2D43C5; --coral: #F06B55; --coral-hi: #FF836D; --line: rgba(24, 24, 23, .18); --line-soft: rgba(24, 24, 23, .1); --radius: .15rem; --ease: cubic-bezier(.23, 1, .32, 1); --sans: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif; --display: 'Space Grotesk', 'Manrope', system-ui, sans-serif; --pad-x: 9vw; } /* ------------------------------------------------------------------ * * 2. Base * ------------------------------------------------------------------ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, p, figure, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } h1, h2, h3 { font-family: var(--display); text-wrap: balance; } button, a { font: inherit; } button { border: 0; background: none; color: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } img, picture, svg { max-width: 100%; } picture { display: contents; } :where(button, a, summary):focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: var(--radius); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--ivory); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transform: translateY(-160%); transition: transform .2s var(--ease); } .skip-link:focus-visible { transform: translateY(0); } .site-shell { overflow-x: clip; background: var(--ivory); } /* ------------------------------------------------------------------ * * 3. Elementos compartidos * ------------------------------------------------------------------ */ .eyebrow, .section-tag { display: flex; align-items: center; gap: 9px; font-size: 10px; text-transform: uppercase; letter-spacing: .17em; font-weight: 800; color: var(--muted); } .eyebrow-line { width: 29px; height: 2px; background: var(--coral); flex: none; } .button { display: inline-flex; align-items: center; gap: 12px; padding: 17px 22px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; font-size: 10px; border-radius: var(--radius); transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); } .button:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(24, 24, 23, .55); } .button:active { transform: scale(.97); } .button span { transition: transform .2s var(--ease); } .button:hover span { transform: translate(3px, -3px); } .button-coral { background: var(--coral); color: var(--ink); } .button-coral:hover { background: var(--coral-hi); } .button-dark { background: var(--ink); color: var(--ivory); } .button-dark:hover { background: var(--blue); } .text-link { display: inline-flex; gap: 10px; align-items: center; text-transform: uppercase; font-size: 10px; letter-spacing: .13em; font-weight: 800; padding-bottom: 4px; background-image: linear-gradient(var(--coral), var(--coral)); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s var(--ease); } .text-link:hover { background-size: 100% 1px; } .text-link span { font-size: 17px; transition: transform .2s var(--ease); } .text-link:hover span { transform: translateY(3px); } /* ------------------------------------------------------------------ * * 4. Cabecera * ------------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 30; height: 82px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(244, 240, 232, .82); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); transition: height .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); } .site-header.is-stuck { height: 68px; background: rgba(244, 240, 232, .94); box-shadow: 0 10px 30px -22px rgba(24, 24, 23, .8); } .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { width: 39px; height: 39px; object-fit: contain; } .brand-name { font-family: var(--display); text-transform: uppercase; font-weight: 700; font-size: 14px; line-height: .85; letter-spacing: -.04em; } .brand-name em, .footer-brand em { color: var(--coral); font-style: normal; } .main-nav { display: flex; gap: 30px; margin-left: 70px; } .main-nav a { position: relative; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; color: var(--muted); transition: color .2s var(--ease); } .main-nav a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: var(--coral); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); } .main-nav a:hover { color: var(--ink); } .main-nav a:hover::after { transform: scaleX(1); } .header-cta { display: flex; align-items: center; gap: 9px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; border-bottom: 1px solid var(--ink); padding-bottom: 5px; transition: color .2s var(--ease), border-color .2s var(--ease); } .header-cta span { transition: transform .2s var(--ease); } .header-cta:hover { color: var(--coral); border-color: var(--coral); } .header-cta:hover span { transform: translate(3px, -3px); } .menu-toggle { display: none; width: 34px; height: 34px; flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px; } .menu-bar { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .25s var(--ease), width .25s var(--ease), opacity .2s; } .menu-bar:last-child { width: 15px; } .menu-toggle[aria-expanded="true"] .menu-bar:first-child { transform: translateY(4px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-bar:last-child { width: 22px; transform: translateY(-4px) rotate(-45deg); } /* ------------------------------------------------------------------ * * 5. Hero * ------------------------------------------------------------------ */ .hero { display: grid; grid-template-columns: 48% 52%; min-height: 675px; } .hero-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 96px 3vw 66px var(--pad-x); } h1 { font-size: clamp(52px, 6.6vw, 108px); line-height: .86; letter-spacing: -.09em; margin: 40px 0 30px; font-weight: 600; } h1 span, h2 span { color: var(--blue); } .h1-kicker { display: block; margin-top: 22px; max-width: 24ch; font-family: var(--sans); font-style: normal; font-size: 12px; font-weight: 800; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .hero-lead { max-width: 370px; color: var(--muted); line-height: 1.7; font-size: 14px; } .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 27px; margin-top: 37px; } .hero-note { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 56px; } .hero-note strong { color: var(--coral); font-family: var(--display); font-size: 34px; letter-spacing: -.08em; line-height: 1; } .hero-note span { font-size: 10px; text-transform: uppercase; letter-spacing: .11em; line-height: 1.4; color: var(--muted); } .hero-visual { position: relative; min-height: 675px; background: var(--blue); overflow: hidden; } .hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; animation: heroReveal 1.1s var(--ease) both; } .hero-visual::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(to top, rgba(24, 24, 23, .55), transparent); pointer-events: none; } @keyframes heroReveal { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } } .hero-caption { position: absolute; z-index: 2; bottom: 30px; left: 31px; right: 31px; display: flex; justify-content: space-between; gap: 20px; color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; line-height: 1.45; } .paint-chip { display: block; width: 65px; height: 65px; position: absolute; top: 42px; border-radius: 50%; border: 8px solid var(--ivory); z-index: 3; } .chip-coral { right: 52px; background: var(--coral); animation: chipDrop .8s .25s var(--ease) both; } .chip-blue { right: 100px; top: 77px; background: var(--blue); animation: chipDrop .8s .4s var(--ease) both; } @keyframes chipDrop { from { opacity: 0; transform: translateY(-22px) scale(.8); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------------ * * 6. Banda de manifiesto * ------------------------------------------------------------------ */ .statement-band { background: var(--blue); color: var(--ivory); min-height: 225px; padding: 48px var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: 30px; position: relative; overflow: hidden; } .statement-band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px); background-size: 22px 22px; opacity: .5; pointer-events: none; } .statement-band > * { position: relative; } .statement-band .section-tag { color: rgba(244, 240, 232, .7); align-self: flex-start; } .statement-text { font-family: var(--display); font-size: clamp(29px, 4vw, 58px); line-height: .98; letter-spacing: -.065em; margin-left: 8%; } .statement-text strong { color: var(--coral); font-weight: 500; } .statement-stamp { flex: none; width: 95px; height: 95px; border: 1px solid rgba(244, 240, 232, .45); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; transform: rotate(10deg); } .statement-stamp span { font-family: var(--display); font-size: 20px; color: var(--coral); } .statement-stamp small { text-transform: uppercase; font-size: 8px; letter-spacing: .1em; line-height: 1.4; } /* ------------------------------------------------------------------ * * 7. Servicios * ------------------------------------------------------------------ */ .services-section { display: grid; grid-template-columns: 32% 68%; padding: 115px var(--pad-x) 123px; background: var(--paper); } .section-intro h2, .projects-heading h2, .coverage-section h2, .faq-intro h2 { font-size: clamp(48px, 6.5vw, 95px); line-height: .87; letter-spacing: -.09em; font-weight: 600; margin: 32px 0 28px; } .section-intro h2 i, .projects-heading h2 i, .faq-intro h2 i, .contact-section h2 i { color: var(--coral); font-style: normal; } .section-intro p, .faq-intro p { max-width: 265px; color: var(--muted); font-size: 13px; line-height: 1.7; } .services-list { margin-top: 12px; border-top: 1px solid var(--line); } .service-row { position: relative; min-height: 118px; display: grid; grid-template-columns: 40px 52px 1fr 25px; align-items: center; gap: 19px; padding: 22px 0; border-bottom: 1px solid var(--line); transition: padding .28s var(--ease), background .28s var(--ease); } .service-row::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: var(--coral); transform: scaleY(0); transition: transform .3s var(--ease); } .service-row:hover { background: var(--ivory); padding-left: 18px; } .service-row:hover::before { transform: scaleY(1); } .service-number { align-self: start; font: 500 11px var(--display); color: var(--coral); } .service-icon { color: var(--blue); font-size: 20px; transition: transform .3s var(--ease); } .service-row:hover .service-icon { transform: rotate(90deg); } .service-row h3 { font-size: 22px; letter-spacing: -.045em; font-weight: 600; line-height: 1.15; } .service-row p { margin-top: 8px; max-width: 460px; color: var(--muted); font-size: 12.5px; line-height: 1.6; } .service-arrow { color: var(--coral); transition: transform .2s var(--ease); } .service-row:hover .service-arrow { transform: translate(3px, -3px); } /* ------------------------------------------------------------------ * * 8. Método * ------------------------------------------------------------------ */ .feature-section { display: grid; grid-template-columns: 50% 50%; background: var(--coral); min-height: 620px; } .feature-image { min-height: 620px; position: relative; padding: 56px 8vw 56px var(--pad-x); overflow: hidden; } .feature-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); } .feature-image:hover img { transform: scale(1.04); } .image-label { position: absolute; left: var(--pad-x); bottom: 28px; color: #fff; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); } .feature-copy { padding: 108px 10vw 80px 8vw; } .feature-copy .section-tag { color: rgba(24, 24, 23, .62); } .feature-copy h2 { font-size: clamp(46px, 5.6vw, 83px); line-height: .86; letter-spacing: -.09em; margin: 35px 0 30px; } .feature-copy h2 span { color: var(--ivory); } .feature-copy > p { max-width: 420px; line-height: 1.7; font-size: 14px; } .quality-list { border-top: 1px solid rgba(24, 24, 23, .25); margin: 35px 0 34px; max-width: 440px; } .quality-list li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(24, 24, 23, .25); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } .quality-list li::before { content: "✓"; color: var(--blue); font-size: 13px; line-height: 1; } /* ------------------------------------------------------------------ * * 9. Proyectos * ------------------------------------------------------------------ */ .projects-section { padding: 120px var(--pad-x) 130px; background: var(--paper); } .projects-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 58px; } .projects-heading p { max-width: 245px; color: var(--muted); font-size: 13px; line-height: 1.7; padding-bottom: 11px; } .project-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 22px; align-items: end; } .project-grid figure { margin: 0; } .project-grid a, .project-grid .frame { display: block; overflow: hidden; } .project-grid img { width: 100%; display: block; object-fit: cover; transition: transform .8s var(--ease); } .project-large { overflow: hidden; } .project-large img { height: 450px; } .project-small { margin-bottom: 52px !important; } .project-small img { height: 295px; } .project-grid figure:hover img { transform: scale(1.045); } .project-grid figcaption { display: flex; align-items: center; gap: 13px; padding-top: 14px; font-size: 10px; text-transform: uppercase; letter-spacing: .11em; } .project-grid figcaption span { color: var(--coral); } .project-grid .caption-arrow { margin-left: auto; color: var(--blue); transition: transform .25s var(--ease); } .project-grid figure:hover .caption-arrow { transform: translate(3px, -3px); } /* Recorte de la imagen dentro de la figura sin romper el layout */ .project-large picture, .project-small picture { display: contents; } /* ------------------------------------------------------------------ * * 10. Zonas de trabajo * ------------------------------------------------------------------ */ .coverage-section { background: var(--ink); color: var(--ivory); padding: 90px var(--pad-x) 102px; display: grid; grid-template-columns: 16% 40% 44%; align-items: center; } .coverage-number { font-family: var(--display); font-weight: 600; font-size: clamp(64px, 8vw, 115px); letter-spacing: -.12em; color: var(--coral); line-height: 1; } .coverage-section .section-tag { color: #aaa9a3; } .coverage-section h2 { margin: 27px 0; font-size: clamp(44px, 5.2vw, 76px); } .coverage-section h2 span { color: var(--coral); } .coverage-section p { color: #aaa9a3; font-size: 13px; line-height: 1.7; max-width: 290px; } .areas { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #42423e; margin-left: 20%; } .areas li { border-bottom: 1px solid #42423e; padding: 18px 0; color: #d8d5ca; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; transition: color .2s var(--ease), padding-left .25s var(--ease); } .areas li:hover { color: var(--coral); padding-left: 8px; } /* ------------------------------------------------------------------ * * 11. Preguntas frecuentes * ------------------------------------------------------------------ */ .faq-section { display: grid; grid-template-columns: 32% 68%; padding: 110px var(--pad-x) 118px; background: var(--ivory); } .faq-intro h2 { font-size: clamp(40px, 4.4vw, 64px); } .faq-list { border-top: 1px solid var(--line); margin-top: 12px; } .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; list-style: none; font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -.03em; transition: color .2s var(--ease), padding-left .25s var(--ease); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--blue); padding-left: 8px; } .faq-sign { position: relative; flex: none; width: 14px; height: 14px; } .faq-sign::before, .faq-sign::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; background: var(--coral); transition: transform .3s var(--ease); } .faq-sign::after { transform: rotate(90deg); } .faq-item[open] .faq-sign::after { transform: rotate(0); } .faq-item > p { max-width: 620px; padding: 0 0 26px; color: var(--muted); font-size: 13.5px; line-height: 1.75; animation: faqOpen .35s var(--ease); } @keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------------ * * 12. Contacto y pie * ------------------------------------------------------------------ */ .contact-section { background: var(--paper); padding: 84px var(--pad-x) 88px; } .contact-top { display: flex; justify-content: space-between; gap: 20px; } .contact-index { font-size: 10px; color: var(--muted); letter-spacing: .12em; } .contact-section h2 { font-size: clamp(56px, 10vw, 152px); line-height: .8; letter-spacing: -.1em; margin: 60px 0 68px; } .contact-bottom { display: flex; align-items: end; justify-content: space-between; gap: 40px; border-top: 1px solid var(--line); padding-top: 25px; } .contact-bottom p { max-width: 320px; font-size: 13px; line-height: 1.7; color: var(--muted); } .contact-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; } .site-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 88px; padding: 22px var(--pad-x); border-top: 1px solid var(--line); font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; line-height: 1.7; } .site-footer a { transition: color .2s var(--ease); } .site-footer a:hover { color: var(--coral); } .footer-brand { display: flex; align-items: center; gap: 9px; font: 700 12px var(--display); color: var(--ink); text-transform: uppercase; flex: none; } .footer-brand .brand-mark { width: 28px; height: 28px; } /* ------------------------------------------------------------------ * * 13. Botón flotante de WhatsApp * ------------------------------------------------------------------ */ .whatsapp-fab { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--ivory); box-shadow: 0 14px 32px -12px rgba(24, 24, 23, .75); transform: translateY(90px); opacity: 0; transition: transform .4s var(--ease), opacity .3s var(--ease), background .25s var(--ease); } .whatsapp-fab.is-visible { transform: translateY(0); opacity: 1; } .whatsapp-fab:hover { background: var(--coral); color: var(--ink); } /* ------------------------------------------------------------------ * * 14. Aparición al hacer scroll * ------------------------------------------------------------------ */ .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js .reveal.is-visible { opacity: 1; transform: none; } /* ------------------------------------------------------------------ * * 15. Responsive * ------------------------------------------------------------------ */ @media (max-width: 1100px) { .main-nav { margin-left: 40px; gap: 22px; } .coverage-section { grid-template-columns: 16% 40% 44%; } .areas { margin-left: 10%; } } @media (max-width: 900px) { :root { --pad-x: 6vw; } .main-nav { margin-left: 0; gap: 16px; } .hero { grid-template-columns: 52% 48%; } .feature-copy { padding-right: 6vw; } .faq-section, .services-section { grid-template-columns: 1fr; } .services-section .section-intro, .faq-intro { margin-bottom: 40px; } .section-intro p, .faq-intro p { max-width: 420px; } } @media (max-width: 700px) { :root { --pad-x: 9vw; } html { scroll-padding-top: 82px; } .site-header { height: 70px; padding: 0 6vw; } .site-header.is-stuck { height: 62px; } .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 22px 6vw 26px; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; gap: 19px; box-shadow: 0 20px 30px -24px rgba(24, 24, 23, .8); } .main-nav.is-open { display: flex; animation: faqOpen .3s var(--ease); } .main-nav a { font-size: 13px; } .header-cta { display: none; } .menu-toggle { display: flex; } .hero { display: flex; flex-direction: column; } .hero-copy { min-height: 520px; padding: 70px 9vw 55px; } h1 { margin: 34px 0 26px; } .h1-kicker { font-size: 11px; } .hero-note { padding-top: 46px; } .hero-visual { min-height: 340px; height: 60vw; } .statement-band { padding: 42px 9vw; display: block; min-height: 240px; } .statement-text { margin: 43px 0 0; } .statement-stamp { position: absolute; right: 8vw; top: 31px; width: 73px; height: 73px; } .statement-stamp span { font-size: 15px; } .statement-stamp small { font-size: 7px; } .services-section { display: block; padding-top: 78px; padding-bottom: 80px; } .section-intro p { max-width: 330px; margin-bottom: 43px; } .service-row { grid-template-columns: 28px 34px 1fr 18px; gap: 11px; min-height: 130px; } .service-row h3 { font-size: 17px; } .service-row p { font-size: 11.5px; } .feature-section { display: flex; flex-direction: column; } .feature-image { min-height: 340px; padding: 35px 9vw; } .feature-copy { padding: 70px 9vw 80px; } .projects-section { padding-top: 78px; padding-bottom: 85px; } .projects-heading { display: block; margin-bottom: 40px; } .projects-heading p { margin-top: 25px; } .project-grid { display: block; } .project-large img { height: 310px; } .project-small { margin: 40px 0 0 !important; } .project-small img { height: 240px; } .coverage-section { display: block; padding-top: 72px; } .coverage-number { font-size: 82px; display: block; margin-bottom: 24px; } .areas { margin: 47px 0 0; } .areas li { padding: 15px 0; } .faq-section { display: block; padding-top: 78px; padding-bottom: 84px; } .faq-intro p { margin-bottom: 40px; } .faq-item summary { font-size: 15px; gap: 16px; } .faq-item > p { font-size: 13px; } .contact-section { padding-top: 67px; } .contact-section h2 { margin: 50px 0 55px; } .contact-bottom { display: block; } .contact-bottom p { margin-bottom: 28px; } .contact-actions { gap: 20px; } .site-footer { min-height: 120px; padding: 26px 9vw 92px; align-items: flex-start; flex-direction: column; gap: 12px; } .whatsapp-fab { right: 16px; bottom: 16px; width: 50px; height: 50px; } } /* ------------------------------------------------------------------ * * 16. Preferencias del usuario * ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .js .reveal { opacity: 1; transform: none; } .whatsapp-fab { transform: none; opacity: 1; } } @media print { .site-header, .whatsapp-fab, .skip-link, .hero-visual::after { display: none !important; } body { background: #fff; color: #000; } .statement-band, .coverage-section, .feature-section { background: #fff !important; color: #000 !important; } .faq-item > p { display: block !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9px; } }