{"id":93,"date":"2026-08-11T19:52:44","date_gmt":"2026-08-11T19:52:44","guid":{"rendered":"https:\/\/thepineapplesweets.com\/?page_id=93"},"modified":"2026-08-20T18:45:57","modified_gmt":"2026-08-20T18:45:57","slug":"flavours","status":"publish","type":"page","link":"https:\/\/thepineapplesweets.com\/?page_id=93","title":{"rendered":"Flavours"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nFlavours \u2014 The Pineapple Sweets & Co.<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@500;600&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n \/* Paleta Oficial *\/\n --cream: #FFFDF6; --gold: #C29B47; --gold-deep: #7A5817; --navy: #2B4C5E;\n --pink: #F7C1C8; --yellow: #FCE196; --mint: #BCE3D2; --sky: #B7D2E8;\n --gray: #4A4946; \n \n --pink-strong: #F192A6; --yellow-strong: #F9D05A; --mint-strong: #8CD9B9; --sky-strong: #85BDE6;\n --retro-pink: #FF107A; --retro-cyan: #00F0FF; --retro-purple: #8A2BE2; --retro-yellow: #FFEA00;\n\n --serif: 'Playfair Display', Georgia, serif;\n --sans: 'DM Sans', system-ui, sans-serif;\n --mono: 'DM Mono', monospace;\n }\n\n \/* ============ ANIQUILADOR DE FRANJAS DE THEMES DE WORDPRESS ============ *\/\n header#masthead, header.site-header, header.ast-site-header, .elementor-page-title, .page-header { display: none !important; }\n #content, #main, .site-content, .site-main, #primary, .elementor-section-wrap { padding-top: 0 !important; margin-top: 0 !important; }\n * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent !important; }\n\n \/* ============ CURSOR Y FONDO ============ *\/\n html, body { \n background: var(--cream) !important; color: var(--navy); font-family: var(--sans); \n -webkit-font-smoothing: antialiased; width: 100% !important; margin: 0 !important; padding: 0 !important;\n cursor: url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp'), auto !important;\n }\n\n a, div.mobile-menu-btn, button, .filter-btn, .card, .ps-order-btn {\n cursor: url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp'), pointer !important;\n }\n\n \/* ============ TRUCO BREAKOUT ============ *\/\n .ps-fullscreen-breakout {\n width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;\n background: var(--cream); position: relative !important; overflow: visible; \n }\n\n .wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px; width: 100%; }\n\n \/* ============ HEADER FIXED CON GLOW 4 LADOS ============ *\/\n header { \n position: fixed !important; top: 0 !important; left: 0 !important; z-index: 999999 !important; \n background: rgba(255, 255, 255, 0.96) !important; border: 1px solid rgba(194,155,71,.3) !important; \n animation: headerGlow 3s ease-in-out infinite alternate !important; width: 100vw !important; \n }\n\n @keyframes headerGlow {\n 0% { box-shadow: 0 0 10px rgba(194, 155, 71, 0.05), inset 0 0 10px rgba(194, 155, 71, 0.05); }\n 100% { box-shadow: 0 0 25px rgba(194, 155, 71, 0.25), inset 0 0 20px rgba(194, 155, 71, 0.25); border-color: rgba(194, 155, 71, 0.6); }\n }\n\n .nav { display: flex; align-items: center; justify-content: space-between; height: 160px; max-width: 1200px; margin: 0 auto; padding: 0 48px; }\n .logo-slot { display: flex; align-items: center; gap: 24px; height: 100%; }\n .logo-slot img { height: 155px !important; width: auto !important; max-height: none !important; max-width: none !important; object-fit: contain; display: block; }\n .nav-right { display: flex; align-items: center; gap: 40px; }\n .nav-links { display: flex; align-items: center; gap: 40px; }\n .nav-links a { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--navy); text-decoration: none; letter-spacing: 0.5px; position: relative; transition: color 0.2s; }\n .nav-links a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--gold); transition: width 0.25s ease; }\n .nav-links a:hover::after { width: 100%; }\n\n \/* ============ MEN\u00da HAMBURGUESA COMO DIV ============ *\/\n div.mobile-menu-btn {\n display: none; background: transparent !important; border: none !important; box-shadow: none !important;\n flex-direction: column; justify-content: space-around; width: 44px; height: 44px; padding: 10px; z-index: 101;\n border-radius: 6px; transition: background 0.2s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n div.mobile-menu-btn:active { background: rgba(194, 155, 71, 0.15) !important; }\n div.mobile-menu-btn span { display: block; width: 100%; height: 2px; background-color: var(--navy) !important; transition: opacity 0.3s ease; }\n\n div.mobile-menu-btn.open {\n transform: rotate(360deg);\n background-image: url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp') !important;\n background-size: 30px 30px !important; background-position: center !important; background-repeat: no-repeat !important;\n }\n div.mobile-menu-btn.open span { opacity: 0 !important; }\n\n \/* ============ BOT\u00d3N DE ORDEN HEADER ============ *\/\n .ps-order-btn {\n --ps-cream: #FFFDF6; --ps-gold: #C29B47; --ps-navy: #2B4C5E;\n font-family: 'DM Sans', system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; \n color: var(--ps-cream) !important; background: var(--ps-navy) !important; padding: 14px 30px; border-radius: 3px; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(194,155,71,0.5); transition: gap 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;\n }\n .ps-order-btn::after { display: none !important; }\n .ps-order-btn .ps-arrow { transition: transform 0.3s ease; }\n .ps-order-btn:hover { background: #FFFFFF !important; color: var(--ps-navy) !important; box-shadow: inset 0 0 0 1px var(--ps-navy) !important; gap: 14px; }\n .ps-order-btn:hover .ps-arrow { transform: translateX(2px); }\n .mobile-only-link { display: none; }\n\n \/* ============ ANIMACIONES DE FONDOS ============ *\/\n .wash-blob { position: absolute; filter: blur(50px); will-change: transform, border-radius; opacity: 0.85; }\n .b-pink-top { width: 620px; height: 560px; background: var(--retro-pink); top: -80px; left: -60px; animation: fluff1 20s ease-in-out infinite alternate; }\n .b-yellow-top { width: 560px; height: 500px; background: var(--retro-yellow); top: 120px; left: 34%; animation: fluff2 24s ease-in-out infinite alternate; }\n .b-mint-top { width: 520px; height: 480px; background: var(--retro-cyan); top: 200px; left: 12%; animation: fluff3 22s ease-in-out infinite alternate; }\n .b-sky-top { width: 640px; height: 580px; background: var(--retro-purple); top: -40px; right: -80px; animation: fluff4 26s ease-in-out infinite alternate; }\n\n .fb-pink { width: 500px; height: 460px; background: var(--pink-strong); top: -20px; left: -10%; animation: ffluff1 16s ease-in-out infinite alternate; }\n .fb-yellow { width: 460px; height: 410px; background: var(--yellow-strong); top: 50px; left: 35%; animation: ffluff2 18s ease-in-out infinite alternate; }\n .fb-mint { width: 440px; height: 400px; background: var(--mint-strong); top: 100px; left: 15%; animation: ffluff3 20s ease-in-out infinite alternate; }\n .fb-sky { width: 520px; height: 470px; background: var(--sky-strong); top: -20px; right: 10%; animation: ffluff4 22s ease-in-out infinite alternate; }\n\n @keyframes fluff1 { 0% { transform: translate(0,0) scale(1); border-radius: 40% 60% 70% 30% \/ 40% 50% 60% 50%; } 50% { transform: translate(120px,80px) scale(1.1); border-radius: 60% 40% 30% 70% \/ 50% 60% 40% 60%; } 100% { transform: translate(40px,-40px) scale(0.95); border-radius: 40% 60% 70% 30% \/ 40% 50% 60% 50%; } }\n @keyframes fluff2 { 0% { transform: translate(0,0) scale(1); border-radius: 50% 50% 50% 50% \/ 50% 50% 50% 50%; } 50% { transform: translate(-100px,100px) scale(1.15); border-radius: 30% 70% 70% 30% \/ 30% 30% 70% 70%; } 100% { transform: translate(20px,50px) scale(1); border-radius: 50% 50% 50% 50% \/ 50% 50% 50% 50%; } }\n @keyframes fluff3 { 0% { transform: translate(0,0) scale(1); border-radius: 30% 70% 50% 50% \/ 50% 50% 70% 30%; } 50% { transform: translate(140px,-60px) scale(1.1); border-radius: 50% 50% 30% 70% \/ 60% 40% 40% 60%; } 100% { transform: translate(-40px,20px) scale(0.9); border-radius: 30% 70% 50% 50% \/ 50% 50% 70% 30%; } }\n @keyframes fluff4 { 0% { transform: translate(0,0) scale(1); border-radius: 60% 40% 40% 60% \/ 40% 60% 60% 40%; } 50% { transform: translate(-800px, 320px) scale(1.4) rotate(-25deg); border-radius: 40% 60% 70% 30% \/ 70% 30% 50% 50%; } 100% { transform: translate(250px, -200px) scale(1.15) rotate(15deg); border-radius: 60% 40% 40% 60% \/ 40% 60% 60% 40%; } }\n\n @keyframes ffluff1 { 0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 40% 60% 70% 30% \/ 40% 50% 60% 50%; } 50% { transform: translate(750px, 220px) scale(1.5) rotate(25deg); border-radius: 60% 40% 30% 70% \/ 50% 60% 40% 60%; } 100% { transform: translate(-80px, -120px) scale(0.95) rotate(-15deg); border-radius: 40% 60% 70% 30% \/ 40% 50% 60% 50%; } }\n @keyframes ffluff2 { 0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 50% 50% 50% 50% \/ 50% 50% 50% 50%; } 50% { transform: translate(-650px, 280px) scale(1.6) rotate(-30deg); border-radius: 30% 70% 70% 30% \/ 30% 30% 70% 70%; } 100% { transform: translate(20px, -90px) scale(1.05) rotate(20deg); border-radius: 50% 50% 50% 50% \/ 50% 50% 50% 50%; } }\n @keyframes ffluff3 { 0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 30% 70% 50% 50% \/ 50% 50% 70% 30%; } 50% { transform: translate(850px, -180px) scale(1.7) rotate(45deg); border-radius: 50% 50% 30% 70% \/ 60% 40% 40% 60%; } 100% { transform: translate(-200px, 160px) scale(0.9) rotate(-20deg); border-radius: 30% 70% 50% 50% \/ 50% 50% 70% 30%; } }\n @keyframes ffluff4 { 0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 60% 40% 40% 60% \/ 40% 60% 60% 40%; } 50% { transform: translate(-800px, 320px) scale(1.4) rotate(-25deg); border-radius: 40% 60% 70% 30% \/ 70% 30% 50% 50%; } 100% { transform: translate(250px, -200px) scale(1.15) rotate(15deg); border-radius: 60% 40% 40% 60% \/ 40% 60% 60% 40%; } }\n\n \/* ---------- PAGE INTRO ---------- *\/\n .intro { position: relative; text-align: center; padding: 240px 0 80px; border-bottom: 2px solid var(--gold); width: 100vw; margin-left: calc(-50vw + 50%); overflow: hidden; isolation: isolate; }\n .intro-canvas { position: absolute; inset: 0; z-index: -2; overflow: hidden !important; }\n .intro-veil { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(255,253,246,0.3) 0%, rgba(255,253,246,0.7) 100%); pointer-events: none; }\n .intro-inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; padding: 0 24px; }\n .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 18px; }\n .intro h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(48px, 7vw, 84px); line-height: 1.1; letter-spacing: 1.5px; margin-bottom: 22px; color: var(--navy); }\n .intro p { font-size: 16px; line-height: 1.7; color: var(--navy); opacity: 0.85; max-width: 500px; margin: 0 auto; }\n\n \/* ---------- FILTER BAR ---------- *\/\n .filter-bar { position: sticky; top: 160px; z-index: 50; background: rgba(255,253,246,.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(194,155,71,.18); width: 100vw; margin-left: calc(-50vw + 50%); }\n .filters { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 22px 24px 18px; max-width: 1200px; margin: 0 auto; }\n .filter-btn { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--navy) !important; background: transparent !important; border: 1px solid rgba(194,155,71,0.4) !important; border-radius: 40px; padding: 10px 24px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }\n .filter-btn:hover, .filter-btn.active { background: var(--navy) !important; color: var(--cream) !important; border-color: var(--navy) !important; }\n .count-note { font-family: var(--mono); font-size: 10px; letter-spacing: .5px; color: var(--gray); opacity: .7; padding-bottom: 10px; text-align: center; }\n\n \/* ---------- GRID + FLIP CARDS 3D BLINDADO SAFARI ---------- *\/\n .grid-wrap { padding: 52px 0 60px; width: 100vw; margin-left: calc(-50vw + 50%); }\n .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px; max-width: 1200px; margin: 0 auto; padding: 0 48px; }\n \n .card { \n aspect-ratio: 3\/4; \n perspective: 1200px; -webkit-perspective: 1200px; \n transition: opacity .35s, transform .35s; \n }\n .card.hide { display: none; }\n .card.enter { animation: cardin .45s ease both; }\n @keyframes cardin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }\n \n .flip { \n position: relative; width: 100%; height: 100%; \n transform-style: preserve-3d; -webkit-transform-style: preserve-3d; \n transition: transform .6s cubic-bezier(.4,.15,.2,1); \n }\n \n @media (hover: hover) {\n .card:hover .flip { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }\n .card:hover .face { box-shadow: 0 18px 34px rgba(43,76,94,.14); }\n }\n\n .card.is-flipped .flip { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }\n .card.is-flipped .face { box-shadow: 0 18px 34px rgba(43,76,94,.14); }\n \n .face { \n position: absolute; inset: 0; \n backface-visibility: hidden; -webkit-backface-visibility: hidden; \n transform: translateZ(0); -webkit-transform: translateZ(0);\n border-radius: 12px; overflow: hidden; background: #fff; \n box-shadow: 0 8px 20px rgba(43,76,94,.08); display: flex; flex-direction: column; \n transition: box-shadow 0.3s ease;\n }\n\n \/* FRONT *\/\n .front { display: flex; flex-direction: column; }\n .swatch { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; background-color: var(--cream); }\n .front-foot { padding: 16px 18px 18px; border-top: 1px solid rgba(194,155,71,.16); background: #fff; }\n .fname { font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.1; color: var(--navy); }\n .ftag { font-family: var(--mono); font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-deep); margin-top: 7px; }\n .flip-hint { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,253,246,.85); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--navy); z-index: 10;}\n\n \/* BACK *\/\n .back { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); color: var(--navy); }\n .back::before { content: ''; position: absolute; inset: 0; background: rgba(255, 253, 246, 0.88); backdrop-filter: blur(12px); z-index: 0; }\n .back-content { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; justify-content: space-between; padding: 22px 20px; }\n .back-name { font-family: var(--serif); font-weight: 700; font-size: 21px; margin-bottom: 12px; color: var(--navy); }\n .back-name::after { content: ''; display: block; width: 26px; height: 2px; background: var(--gold); margin-top: 10px; }\n .back-desc { font-size: 13.5px; line-height: 1.6; color: var(--navy); flex: 1; font-weight: 500; opacity: 0.95; overflow-y: auto; scrollbar-width: none; }\n .back-desc::-webkit-scrollbar { display: none; }\n \n .min-order-note { font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gold-deep); margin: 15px 0 20px; padding-top: 15px; border-top: 1px solid rgba(194,155,71,0.2); display: flex; align-items: center; gap: 8px; font-weight: 600; flex-shrink: 0; }\n .min-order-note::before { content: ''; display: block; width: 16px; height: 16px; flex-shrink: 0; background-image: url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp'); background-size: contain; background-repeat: no-repeat; }\n \n .add-btn { display: block; text-align: center; text-decoration: none; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--cream); background: var(--navy); border: none; padding: 11px; width: 100%; transition: opacity .2s, background .2s; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); cursor: pointer; flex-shrink: 0; }\n .add-btn:hover { background: var(--gold-deep); }\n\n \/* ============ FOOTER ANIMADO ============ *\/\n footer { position: relative; background: var(--cream); isolation: isolate; min-height: 500px; display: flex; flex-direction: column; width: 100vw; margin-left: calc(-50vw + 50%); }\n .footer-bar { display: flex; height: 5px; position: relative; z-index: 20; width: 100%; }\n .footer-bar span { flex: 1; }\n .machine-factory { position: absolute; bottom: 52px; right: 5%; width: 320px; height: 400px; z-index: 10; }\n .machine-img { width: 100%; height: auto; position: relative; z-index: 10; filter: drop-shadow(0 20px 30px rgba(43,76,94,0.15)); }\n .footer-canvas { position: absolute; inset: 0; z-index: -2; overflow: hidden !important; }\n .footer-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(255,253,246,0.8) 0%, rgba(255,253,246,0.3) 60%, rgba(255,253,246,0) 100%); pointer-events: none; }\n .footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 70px 48px 32px; position: relative; z-index: 15; align-items: start; }\n .footer-col-title { height: 24px; margin-bottom: 20px; display: flex; align-items: center; }\n .footer-col-title h3 { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-deep); line-height: 1; }\n .footer-brand-img { max-height: 45px; width: auto; object-fit: contain; object-position: left center; display: block; margin: 0; }\n .footer-inner a, .footer-inner p:not(.footer-brand-text) { display: block; color: var(--navy); text-decoration: none; font-size: 14px; line-height: 1.9; opacity: 0.9; margin: 0; }\n .footer-inner a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }\n .footer-brand-text { font-size: 14px; line-height: 1.8; color: var(--navy); opacity: 0.85; max-width: 320px; margin: 0; }\n .footer-legal { border-top: 1px solid rgba(194,155,71,0.2); width: 100%; max-width: 1200px; padding: 16px 48px; margin: auto auto 0 auto; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.7; color: var(--navy); position: relative; z-index: 20; }\n\n \/* ============ VISTA M\u00d3VIL ============ *\/\n @media(max-width: 860px) {\n .wash-blob, .f-wash-blob { animation: none !important; transform: none !important; }\n\n .wrap, .nav, .footer-inner, .footer-legal { padding-left: 24px !important; padding-right: 24px !important; }\n \n .nav { height: 140px; } \n .logo-slot img { height: 135px !important; }\n .nav-right { gap: 15px; }\n \n div.mobile-menu-btn { display: flex !important; }\n .ps-order-btn { display: none !important; }\n\n .nav-links { display: none; position: absolute; top: 140px; left: 0; width: 100vw; margin-left: calc(-50vw + 50%); background: #FFFFFF; flex-direction: column; padding: 24px; box-shadow: 0 10px 20px rgba(43,76,94,0.1); gap: 20px; text-align: center; }\n .nav-links.active { display: flex; }\n .mobile-only-link { display: block !important; color: var(--gold) !important; font-weight: 700 !important; }\n\n .filter-bar { top: 140px; }\n .hero, .intro { min-height: 560px; padding-top: 200px; }\n\n \/* REJILLA A 2 COLUMNAS Y CORRECCI\u00d3N DE ALTURA EN M\u00d3VIL *\/\n .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding-left: 20px !important; padding-right: 20px !important; }\n .card { aspect-ratio: 2 \/ 3; } \n \n .front-foot { padding: 12px; }\n .fname { font-size: 15px; }\n .ftag { font-size: 8px; }\n \n .back-content { padding: 12px 10px; }\n .back-name { font-size: 14px; margin-bottom: 4px; }\n .back-name::after { margin-top: 6px; }\n .back-desc { font-size: 10.5px; line-height: 1.35; overflow-y: auto; scrollbar-width: none; }\n .back-desc::-webkit-scrollbar { display: none; }\n .min-order-note { font-size: 8px; margin: 8px 0 10px; padding-top: 8px; flex-shrink: 0; }\n .min-order-note::before { width: 12px; height: 12px; }\n .add-btn { font-size: 9px; padding: 10px 4px; flex-shrink: 0; } \n\n footer { min-height: 600px; }\n .footer-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 60px; padding-bottom: 20px; }\n .machine-factory { position: relative; right: auto; bottom: auto; transform: none; margin: 0 auto 40px auto; width: 280px; height: auto; }\n .footer-legal { flex-direction: column; gap: 8px; text-align: center; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"ps-fullscreen-breakout\">\n\n <header>\n <div class=\"wrap\">\n <nav class=\"nav\">\n <div class=\"logo-slot\">\n <a href=\"\/\"><img decoding=\"async\" src=\"http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-7-2026-at-08_03_19-AM-1.webp\" alt=\"The Pineapple Sweets & Co. Logo\"><\/a>\n <\/div>\n <div class=\"nav-right\">\n <div class=\"nav-links\" id=\"navLinks\">\n <a href=\"\/\">Home<\/a>\n <a href=\"\/?page_id=93\">Flavours<\/a>\n <a href=\"\/#corporate\">Corporate Favours<\/a>\n <a href=\"\/#story\">Our Story<\/a>\n <a href=\"\/?page_id=178\" class=\"mobile-only-link\">Order Online →<\/a>\n <\/div>\n \n <a href=\"\/?page_id=178\" class=\"ps-order-btn\">Order <span class=\"ps-arrow\" aria-hidden=\"true\">→<\/span><\/a>\n \n <div class=\"mobile-menu-btn\" id=\"mobileMenuBtn\">\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <\/div>\n <\/div>\n <\/nav>\n <\/div>\n <\/header>\n\n <section class=\"intro\" id=\"flavours\">\n <div class=\"intro-canvas\">\n <div class=\"wash-blob b-pink-top\"><\/div>\n <div class=\"wash-blob b-sky-top\"><\/div>\n <div class=\"wash-blob b-yellow-top\"><\/div>\n <div class=\"wash-blob b-mint-top\"><\/div>\n <\/div>\n <div class=\"intro-veil\"><\/div>\n\n <div class=\"intro-inner\">\n <div class=\"eyebrow\">Our flavours \u00b7 spun fresh<\/div>\n <h1>The flavour library<\/h1>\n <p>Some you already know and love, others born from our own recipes. Every batch hand-spun in Halifax. Hover over a flavour to read more.<\/p>\n <\/div>\n <\/section>\n\n <div class=\"filter-bar\">\n <div class=\"filters\" id=\"filters\">\n <button class=\"filter-btn active\" data-filter=\"all\">All<\/button>\n <button class=\"filter-btn\" data-filter=\"fruit\">Fruity<\/button>\n <button class=\"filter-btn\" data-filter=\"creamy\">Creamy<\/button>\n <button class=\"filter-btn\" data-filter=\"retro\">Retro Soda<\/button>\n <button class=\"filter-btn\" data-filter=\"original\">House Originals<\/button>\n <\/div>\n <div class=\"count-note\" id=\"countNote\"><\/div>\n <\/div>\n\n <div class=\"grid-wrap\">\n <div class=\"grid\" id=\"grid\"><\/div>\n <\/div>\n\n <footer>\n <div class=\"footer-bar\">\n <span style=\"background:var(--pink)\"><\/span>\n <span style=\"background:var(--yellow)\"><\/span>\n <span style=\"background:var(--mint)\"><\/span>\n <span style=\"background:var(--sky)\"><\/span>\n <\/div>\n \n <div class=\"footer-canvas\">\n <div class=\"wash-blob fb-pink\"><\/div>\n <div class=\"wash-blob fb-sky\"><\/div>\n <div class=\"wash-blob fb-yellow\"><\/div>\n <div class=\"wash-blob fb-mint\"><\/div>\n <\/div>\n\n <div class=\"footer-veil\"><\/div>\n\n <div class=\"footer-inner\">\n <div>\n <div class=\"footer-col-title\">\n <img decoding=\"async\" src=\"http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-7-2026-at-08_16_18-PM.webp\" class=\"footer-brand-img\" alt=\"The Pineapple Sweets & Co.\">\n <\/div>\n <p class=\"footer-brand-text\">Small-batch cotton candy with original recipes you won't find anywhere else. Made for gifting, perfect for the everyday.<\/p>\n <\/div>\n <div>\n <div class=\"footer-col-title\"><h3>Contact<\/h3><\/div>\n <a href=\"mailto:grace@thepineapplesweets.com\">grace@thepineapplesweets.com<\/a>\n <a href=\"tel:+19024142177\">+1 (902) 414-2177<\/a>\n <p>Made in Halifax, NS<\/p>\n <\/div>\n <div>\n <div class=\"footer-col-title\"><h3>Explore<\/h3><\/div>\n <a href=\"\/?page_id=93\">Flavours<\/a>\n <a href=\"\/#corporate\">Corporate Favours<\/a>\n <a href=\"\/#story\">Our Story<\/a>\n <a href=\"\/?page_id=178\">Order online<\/a>\n <\/div>\n <div><\/div>\n <\/div>\n \n <div class=\"machine-factory\">\n <!-- Archivero Vintage Ligero -->\n <img decoding=\"async\" src=\"http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-11-2026-at-03_02_01-PM.webp\" alt=\"Vintage Filing Cabinet\" class=\"machine-img\">\n <\/div>\n\n <div class=\"footer-legal\">\n <span>© 2026 The Pineapple Sweets & Co.<\/span>\n <span>Artisanal cotton candy · Halifax · NS<\/span>\n <\/div>\n <\/footer>\n\n<\/div>\n\n<script>\nfunction initPineappleFlavours() {\n const menuBtn = document.getElementById('mobileMenuBtn');\n const navLinks = document.getElementById('navLinks');\n if (menuBtn && navLinks) {\n menuBtn.addEventListener('click', function() {\n navLinks.classList.toggle('active');\n this.classList.toggle('open');\n });\n }\n\n const IMG_MOON_MIST = \"url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-12-2026-at-05_47_24-PM-1.png')\";\n const IMG_BLUE_RASP = \"url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-11-2026-at-04_46_33-PM-1-1.png')\";\n const IMG_GRAPE = \"url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-13-2026-at-12_15_29-PM-1.png')\";\n const IMG_ROOT_BEER = \"url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-11-2026-at-07_12_39-PM-1.png')\";\n const IMG_BANANA = \"url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-11-2026-at-05_48_29-PM-1.png')\";\n const IMG_STRAW_LEM = \"url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-11-2026-at-05_07_37-PM-1-1.png')\";\n const IMG_ORANGE_CREAM = \"url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-11-2026-at-05_24_45-PM-1.png')\";\n const IMG_GREEN_APPLE = \"url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-11-2026-at-05_35_43-PM-1.png')\";\n const IMG_FLUFFY_RAINBOW = \"url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-12-2026-at-05_47_18-PM-1.png')\";\n const IMG_PINK_VANILLA_CAKE = \"url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-11-2026-at-05_57_06-PM-1.png')\";\n const IMG_PEACHMELLOW = \"url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-11-2026-at-05_45_40-PM-1-1.png')\";\n const IMG_BUBBLE = \"url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-11-2026-at-05_13_13-PM-1.png')\";\n\n const FLAVOURS = [\n {name:\"Moon Mist\", cat:[\"original\"], bg: IMG_MOON_MIST, tag:\"House Original\",\n desc:\"The Maritime classic \u2014 grape, banana and bubblegum, swirled. Grow up here and you already know this one. Our nod to Nova Scotia, spun fresh.\",\n only32: true},\n {name:\"Blue Raspberry\", cat:[\"retro\",\"fruit\"], bg: IMG_BLUE_RASP, tag:\"Retro\",\n desc:\"Loud, blue, unbothered about it. Tart-sweet with a boardwalk-arcade edge. A modern favourite that earns its colour.\"},\n {name:\"Grape\", cat:[\"fruit\",\"retro\"], bg: IMG_GRAPE, tag:\"Fruity\",\n desc:\"Deep, jammy, purple through and through. The soda-fountain flavour, grown up a notch. Familiar in the best way.\"},\n {name:\"Root Beer\", cat:[\"retro\"], bg: IMG_ROOT_BEER, tag:\"Retro\",\n desc:\"The soda-shop original, spun into sugar. Sarsaparilla warmth, a creamy finish. Unexpected \u2014 and quietly the one people reorder.\"},\n {name:\"Banana\", cat:[\"fruit\"], bg: IMG_BANANA, tag:\"Fruity\",\n desc:\"Soft, mellow, gently old-fashioned. The banana candy from the corner store, spun lighter and finer. Comfort, no frills.\"},\n {name:\"Strawberry Lemonade\", cat:[\"fruit\"], bg: IMG_STRAW_LEM, tag:\"Fruity\",\n desc:\"Ripe strawberry brightened with a tart lemonade twist. The perfect balance of sweet and sharp, handled with restraint.\"},\n {name:\"Orange Cream\", cat:[\"creamy\"], bg: IMG_ORANGE_CREAM, tag:\"Creamy\",\n desc:\"The creamsicle from the ice-cream truck, reimagined. Bright citrus folded into soft vanilla. One bite and you're eight again.\"},\n {name:\"Green Apple\", cat:[\"fruit\"], bg: IMG_GREEN_APPLE, tag:\"Fruity\",\n desc:\"Sharp, green, wide awake. A tart snap that cuts clean through the sweet. For anyone who likes an edge.\"},\n {name:\"Fluffy Rainbow\", cat:[\"original\"], bg: IMG_FLUFFY_RAINBOW, tag:\"House Original\",\n desc:\"Every flavour at once, layered in colour. A little of everything, spun into one ribbon. The undecided pick \u2014 and the most photographed.\",\n only32: true},\n {name:\"Pink Vanilla Cake\", cat:[\"creamy\"], bg: IMG_PINK_VANILLA_CAKE, tag:\"Creamy\",\n desc:\"Vanilla cake with a rosy, buttercream lean. Softer than birthday cake, more everyday. A slice, minus the plate.\"},\n {name:\"Peachmellow\", cat:[\"creamy\",\"original\"], bg: IMG_PEACHMELLOW, tag:\"House Original\",\n desc:\"Ripe peach folded into toasted marshmallow. Sweet, faintly smoky, unusually grown-up. One of our own \u2014 nowhere else has it.\"},\n {name:\"Bubble Gum\", cat:[], bg: IMG_BUBBLE, tag:\"Retro\",\n desc:\"The flavour everyone remembers, minus the childishness. Classic pink gum, spun light and clean. Pure nostalgia, no apologies.\"}\n ];\n\n const grid = document.getElementById('grid');\n if (!grid) return;\n\n FLAVOURS.forEach((f,i)=>{\n const card = document.createElement('div');\n card.className = 'card enter';\n card.dataset.cat = f.cat.join(' ');\n card.style.animationDelay = (i*0.03)+'s';\n \n card.innerHTML = `\n <div class=\"flip\">\n <div class=\"face front\">\n <div class=\"flip-hint\">\u21bb<\/div>\n <div class=\"swatch\" style=\"background:${f.bg}; background-size: cover; background-position: center; background-color: var(--cream);\">\n <\/div>\n <div class=\"front-foot\">\n <div class=\"fname\">${f.name}<\/div>\n <div class=\"ftag\">${f.tag}<\/div>\n <\/div>\n <\/div>\n \n <div class=\"face back\" style=\"background:${f.bg}; background-size: cover; background-position: center; background-color: var(--cream);\">\n <div class=\"back-content\">\n <div>\n <div class=\"back-name\">${f.name}<\/div>\n <div class=\"back-desc\">${f.desc}<\/div>\n <div class=\"min-order-note\">\n <span>Spun fresh to share (12 tubs min.${f.only32 ? ' · <span style=\"color: var(--navy); font-weight: 700;\">32oz only<\/span>' : ''})<\/span>\n <\/div>\n <\/div>\n <a href=\"\/?page_id=178\" class=\"add-btn\">Order now →<\/a>\n <\/div>\n <\/div>\n <\/div>`;\n \n grid.appendChild(card);\n\n card.addEventListener('click', function(e) {\n if (e.target.closest('.add-btn')) return;\n if (window.matchMedia(\"(hover: none)\").matches || window.innerWidth <= 860) {\n document.querySelectorAll('.card.is-flipped').forEach(otherCard => {\n if (otherCard !== card) otherCard.classList.remove('is-flipped');\n });\n card.classList.toggle('is-flipped');\n }\n });\n });\n\n const filters = document.getElementById('filters');\n const note = document.getElementById('countNote');\n\n function applyFilter(val){\n let shown = 0;\n document.querySelectorAll('.card').forEach(c => {\n const match = val === 'all' || c.dataset.cat.split(' ').includes(val);\n c.classList.toggle('hide', !match);\n if(match){\n shown++;\n c.classList.remove('enter');\n void c.offsetWidth;\n c.classList.add('enter');\n }\n });\n if (note) note.textContent = `Showing ${shown} of ${FLAVOURS.length} flavours`;\n }\n\n if (filters) {\n const filterBtns = filters.querySelectorAll('.filter-btn');\n \n filterBtns.forEach(btn => {\n btn.addEventListener('click', () => { \n filterBtns.forEach(x => x.classList.remove('active'));\n btn.classList.add('active');\n applyFilter(btn.dataset.filter);\n });\n });\n }\n\n applyFilter('all');\n}\n\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initPineappleFlavours);\n} else {\n initPineappleFlavours();\n}\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Flavours \u2014 The Pineapple Sweets & Co. Home Flavours Corporate Favours Our Story Order Online → Order → Our flavours \u00b7 spun fresh The flavour library Some you already know and love, others born from our own recipes. Every batch hand-spun in Halifax. Hover over a flavour to read more. All Fruity Creamy Retro Soda […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-93","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thepineapplesweets.com\/index.php?rest_route=\/wp\/v2\/pages\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thepineapplesweets.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thepineapplesweets.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thepineapplesweets.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thepineapplesweets.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=93"}],"version-history":[{"count":5,"href":"https:\/\/thepineapplesweets.com\/index.php?rest_route=\/wp\/v2\/pages\/93\/revisions"}],"predecessor-version":[{"id":293,"href":"https:\/\/thepineapplesweets.com\/index.php?rest_route=\/wp\/v2\/pages\/93\/revisions\/293"}],"wp:attachment":[{"href":"https:\/\/thepineapplesweets.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}