/* * Shared base for the landing-page variants (variants//): fonts, reset, mobile/desktop * switches and the interactive pieces the claude.ai/design exports draw with inline styles * (buttons, scroll rows, FAQ, sticky bar, video modal). Loaded only on variant screens. */ @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/InstrumentSerif-normal-400.woff2) format("woff2"); } @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/InstrumentSerif-italic-400.woff2) format("woff2"); } @font-face { font-family: "Sofia Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(fonts/SofiaSans-normal-300_800.woff2) format("woff2"); } /* The export's page reset. */ html:has(body.sap-lp-page) { scroll-behavior: smooth; } body.sap-lp-page { margin: 0; background: #fff; color: #1a1a1a; font-family: "Sofia Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; } body.sap-lp-page .wp-site-blocks { padding: 0; } /* Brand values the shared pages (variants/_shared/pages/) draw with; a variant may redefine them. */ .sap-lp { --lp-brand: #223b35; --lp-accent: #4c8686; --lp-ink: #1a1a1a; --lp-muted: #3d4a47; --lp-line: #e4e6e3; --lp-soft: #f5f5f3; --lp-link: #007ea7; --lp-serif: "Instrument Serif", serif; } .sap-lp, .sap-lp *, .sap-lp *::before, .sap-lp *::after { box-sizing: border-box; } .sap-lp a { color: #007ea7; } .sap-lp a:hover { color: #223b35; } .sap-lp button { font-family: inherit; } .sap-lp img { max-width: none; } .sap-lp [data-row] { scrollbar-width: none; } .sap-lp [data-row]::-webkit-scrollbar { display: none; } /* Mobile-only / desktop-only blocks: the design switches at 1024 px. !important beats the inline display. */ @media (max-width: 1023.98px) { .sap-lp .lp-d { display: none !important; } } @media (min-width: 1024px) { .sap-lp .lp-m { display: none !important; } } /* Buttons drawn as links (add to cart). */ .sap-lp a.lp-btn, .sap-lp a.lp-btn-ghost { display: flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .15s ease, transform .1s ease; } .sap-lp a.lp-btn, .sap-lp a.lp-btn:hover, .sap-lp a.lp-btn:visited { color: #fff; } .sap-lp a.lp-btn:hover { background: #16282a !important; } .sap-lp a.lp-btn-ghost, .sap-lp a.lp-btn-ghost:hover, .sap-lp a.lp-btn-ghost:visited { color: #223b35; } .sap-lp a.lp-btn-ghost:hover { background: #f5f5f3 !important; } .sap-lp a.lp-btn:active, .sap-lp a.lp-btn-ghost:active, .sap-lp .lp-press:active { transform: scale(.97); } /* Header buttons and the menu panel (parts/header.php). */ .sap-lp .lp-hbtn { transition: background-color .15s ease; } .sap-lp .lp-hbtn:hover { background: #f5f5f3 !important; } .sap-lp [data-menu] .lp-ico-close, .sap-lp [data-menu][aria-expanded="true"] .lp-ico-open { display: none; } .sap-lp [data-menu][aria-expanded="true"] .lp-ico-close { display: block; } @media (max-width: 479.98px) { .sap-lp .lp-hide-phone { display: none; } } .sap-lp .lp-menu__grid { display: grid; column-gap: 56px; } .sap-lp .lp-menu__links { display: grid; margin: 0; padding: 0; list-style: none; } .sap-lp .lp-menu__links a { transition: color .15s ease; } .sap-lp .lp-menu__links a:hover, .sap-lp .lp-menu__links a[aria-current="page"] { color: #4c8686 !important; } @media (min-width: 1024px) { .sap-lp .lp-menu__grid { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .sap-lp .lp-menu__links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } } /* Row arrows (desktop, and under the row on phones); dimmed at either end of the row. */ .sap-lp .lp-arrow { transition: background-color .15s ease, opacity .15s ease; } .sap-lp .lp-arrow:hover:not(:disabled) { background: #fff9e6 !important; } .sap-lp .lp-arrow:disabled { opacity: .35; cursor: default !important; } /* Reel and video covers. */ .sap-lp .lp-lift { transition: transform .15s ease; } .sap-lp .lp-lift:hover { transform: translateY(-2px); } /* FAQ:
styled as the design's rows; one open at a time (lp.js). */ .sap-lp details.lp-faq > summary { list-style: none; } .sap-lp details.lp-faq > summary::-webkit-details-marker { display: none; } .sap-lp details.lp-faq .lp-ico-minus { display: none; } .sap-lp details.lp-faq[open] .lp-ico-minus { display: block; } .sap-lp details.lp-faq[open] .lp-ico-plus { display: none; } .sap-lp details.lp-formula > summary { list-style: none; } .sap-lp details.lp-formula > summary::-webkit-details-marker { display: none; } /* Sticky buy bar (mobile, after the first screen). */ .sap-lp .lp-sticky { transform: translateY(110%); transition: transform .2s ease; } .sap-lp .lp-sticky.is-on { transform: none; } @media (min-width: 1024px) { .sap-lp .lp-sticky { display: none !important; } } /* WATI's WhatsApp button (20 px from the bottom) and its "¿Necesitas ayuda?" bubble covered the buy bar (69-71 px tall): while the bar shows, both move up 64 px, 13-15 px clear of it. The widths are each design's bar breakpoint (lp2 and lp6 1024, lp3 and lp5 960, lp4 900). Pedro 2026-10-03. On phones they sit there all the time since Pedro 2026-10-15, above Boost's sales popup: that rule is printed for every page by functions.php (#sap-wa-lift). Boost's popup itself (#boost-notifications-wrapper, z-index 999999) covered the buy bar, the phone's main button: while the bar shows, the popup is hidden (lifting it above the bar would stack bar + popup + WhatsApp over a third of the screen). It still shows on the first screen, the cart, the checkout and the other pages (Pedro 2026-10-15). */ .wa-widget-send-button, .wa-chat-bubble { transition: margin-bottom .2s ease; } @media (max-width: 1023.98px) { body:has(.sap-lp2 .lp-sticky.is-on) .wa-widget-send-button, body:has(.sap-lp6 .lp-sticky.is-on) .wa-widget-send-button { margin-bottom: 84px !important; } body:has(.sap-lp2 .lp-sticky.is-on) .wa-chat-bubble, body:has(.sap-lp6 .lp-sticky.is-on) .wa-chat-bubble { margin-bottom: 127px !important; } body:has(.sap-lp2 .lp-sticky.is-on) #boost-notifications-wrapper, body:has(.sap-lp6 .lp-sticky.is-on) #boost-notifications-wrapper { display: none !important; } } @media (max-width: 959.98px) { body:has(.sap-lp3 .lp-sticky.is-on) .wa-widget-send-button, body:has(.sap-lp5 .lp-sticky.is-on) .wa-widget-send-button { margin-bottom: 84px !important; } body:has(.sap-lp3 .lp-sticky.is-on) .wa-chat-bubble, body:has(.sap-lp5 .lp-sticky.is-on) .wa-chat-bubble { margin-bottom: 127px !important; } body:has(.sap-lp3 .lp-sticky.is-on) #boost-notifications-wrapper, body:has(.sap-lp5 .lp-sticky.is-on) #boost-notifications-wrapper { display: none !important; } } @media (max-width: 899.98px) { body:has(.sap-lp4 .lp-sticky.is-on) .wa-widget-send-button { margin-bottom: 84px !important; } body:has(.sap-lp4 .lp-sticky.is-on) .wa-chat-bubble { margin-bottom: 127px !important; } body:has(.sap-lp4 .lp-sticky.is-on) #boost-notifications-wrapper { display: none !important; } } /* Gallery dots: a pill for the current photo. */ .sap-lp .lp-dot { display: block; width: 8px; height: 8px; border-radius: 999px; background: #c9cfcc; transition: width .2s ease, background-color .2s ease; } .sap-lp .is-on > .lp-dot { width: 22px; background: #223b35; } /* Pack chips: a darker border on hover. */ .sap-lp .lp-chip:hover { border-color: #223b35 !important; } /* Video modal (lp.js builds it on click; YouTube or Instagram embed). */ .lp-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(15, 24, 22, .86); display: flex; align-items: center; justify-content: center; padding: 20px; } .lp-modal__box { position: relative; width: 100%; max-width: min(92vw, 520px); display: flex; flex-direction: column; gap: 12px; } .lp-modal__box--wide { max-width: min(92vw, 960px); } .lp-modal__close { align-self: flex-end; width: 44px; height: 44px; border-radius: 999px; border: 0; background: #fff; color: #223b35; display: grid; place-items: center; cursor: pointer; } .lp-modal__frame { position: relative; border-radius: 16px; overflow: hidden; background: #000; } .lp-modal__frame iframe { display: block; width: 100%; border: 0; } .lp-modal__frame--16x9 iframe { aspect-ratio: 16 / 9; } .lp-modal__frame--reel iframe { height: min(78vh, 760px); background: #fff; } /* The admin bar pushes the sticky header down for logged-in users. Up to 600 px the bar scrolls away with the page, so the header sticks at 0 (the menu hangs from the header and follows it). */ body.admin-bar .sap-lp .lp-header { top: 32px !important; } @media (max-width: 782px) { body.admin-bar .sap-lp .lp-header { top: 46px !important; } } @media (max-width: 600px) { body.admin-bar .sap-lp .lp-header { top: 0 !important; } } /* Buying buttons in the Save a Playa teal with white text on lp4, lp5 and lp6 (Pedro 2026-10-15: Amazon's #ffd814, then the sand yellow, then "el verde claro save a playa" on lp6 and finally on lp4 and lp5 too): "Ver producto", "Llévalo a tu carrito", "Continuar al pago", the checkout's pay button... carry .lp-buy. !important beats each design's inline and class colours; the doubled class outranks the designs' own !important hovers (lp4's dark one). White on #4c8686: 4.2:1, on #3f7676 (hover) 5.2:1. */ .sap-lp a.lp-buy.lp-buy, .sap-lp button.lp-buy.lp-buy, .sap-lp a.lp-buy.lp-buy:visited { background: #4c8686 !important; border: 1.5px solid #4c8686 !important; color: #ffffff !important; box-shadow: none !important; } .sap-lp a.lp-buy.lp-buy:hover, .sap-lp button.lp-buy.lp-buy:hover { background: #3f7676 !important; border-color: #3f7676 !important; color: #ffffff !important; } .sap-lp a.lp-buy:focus-visible, .sap-lp button.lp-buy:focus-visible { outline: 2px solid #223b35 !important; outline-offset: 2px; } .sap-lp a.lp-buy svg, .sap-lp button.lp-buy svg { color: #ffffff; stroke: currentColor; } /* The homes' Amazon-style pack cards (parts/pack-cards.php): one column, two from 1024 px (Pedro 2026-10-15). */ .sap-lp .lp-acards { display: grid; gap: 12px; } @media (min-width: 1024px) { .sap-lp .lp-acards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } /* The bank-transfer WhatsApp button (parts/wa-transfer.php, Pedro 2026-10-15): white, outlined in WhatsApp green (#1faa52 = 3:1 on white), WhatsApp's own green on the logo, forest text: a secondary action under the payment options, so the teal "Pagar" stays the main one. !important beats lp5's link colours and lp6's ocean links. */ .sap-lp a.lp-wa, .sap-lp a.lp-wa:visited { display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 52px; margin: 0; padding: 10px 18px; border: 1.5px solid #1faa52 !important; border-radius: 12px; background: #ffffff !important; color: #223b35 !important; font-size: 16px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none !important; transition: background-color .15s, border-color .15s; } .sap-lp a.lp-wa:hover { background: #effbf3 !important; border-color: #178f44 !important; color: #223b35 !important; } .sap-lp a.lp-wa:focus-visible { outline: 2px solid #223b35; outline-offset: 2px; } .sap-lp a.lp-wa svg { flex: 0 0 22px; color: #25d366; } .sap-lp4 a.lp-wa, .sap-lp5 a.lp-wa { border-radius: 999px; } /* lp4 and lp5 buttons are pills; lp6's keep 12 px */