6

{{ section.settings.kicker | escape }}

{{ section.settings.heading | escape }}

{{ section.settings.intro | escape }}

RIPTUAL MATTER PRINTER / 01
RIPTUAL {{ section.settings.receipt_label | escape }}
TRANSACCIÓN#0001 ESTADOCONSCIENTE UNIDAD1 SERVICIO
{% for block in section.blocks %}
{{ block.settings.label | escape }}
{{ block.settings.value | escape }} {{ block.settings.detail | escape }}
{% endfor %}
TOTAL UNA DECISIÓN
CONSCIENTE

NO_AUTOMATION / RIPTUAL_001

PAGADO EN MATERIA NO EN PROMESAS

{{ section.settings.note | escape }}

{% stylesheet %} .rr-section { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); color: #f3eee3; background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.08), transparent 28%), var(--rr-background); overflow: clip; font-family: Arial, Helvetica, sans-serif; } .rr-track { position: relative; height: 310vh; } .rr-sticky { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(250px, 1fr) minmax(340px, 520px) minmax(220px, 1fr); align-items: center; gap: clamp(24px, 4vw, 76px); padding: clamp(24px, 4vw, 64px); isolation: isolate; } .rr-noise { position: absolute; inset: 0; z-index: -1; opacity: 0.12; pointer-events: none; background-image: repeating-radial-gradient(circle at 17% 28%, transparent 0 2px, rgba(255, 255, 255, 0.14) 3px, transparent 4px), repeating-linear-gradient(117deg, transparent 0 21px, rgba(255, 255, 255, 0.025) 22px, transparent 23px); background-size: 120px 120px, 180px 180px; } .rr-index { position: absolute; right: 18px; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%); font-family: "Press Start 2P", "Courier New", monospace; font-size: 8px; letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.24); } .rr-intro { align-self: center; max-width: 560px; } .rr-kicker, .rr-prompt { margin: 0 0 22px; font-family: "Press Start 2P", "Courier New", monospace; font-size: clamp(7px, 0.65vw, 9px); line-height: 1.7; letter-spacing: 0.16em; color: var(--rr-accent); } .rr-intro h2 { max-width: 700px; margin: 0; font-size: clamp(48px, 6.3vw, 112px); line-height: 0.84; letter-spacing: -0.078em; font-weight: 700; text-wrap: balance; } .rr-intro-copy { max-width: 360px; margin: 30px 0 0; font-size: clamp(13px, 1vw, 16px); line-height: 1.55; color: rgba(255, 255, 255, 0.52); } .rr-machine { position: relative; width: 100%; height: min(88vh, 850px); min-height: 620px; align-self: center; perspective: 1100px; } .rr-machine-top { position: absolute; z-index: 5; top: 0; left: 50%; width: min(100%, 490px); height: 94px; transform: translateX(-50%); display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr 1fr; align-items: center; padding: 17px 24px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px 12px 5px 5px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 34%), linear-gradient(180deg, #262626, #080808 72%); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), inset 0 1px rgba(255, 255, 255, 0.15); } .rr-machine-top > span:first-child { grid-row: 1 / 3; align-self: center; font-size: 24px; font-weight: 800; letter-spacing: -0.065em; } .rr-machine-top small { align-self: end; font-family: "Courier New", monospace; font-size: 8px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.36); } .rr-machine-light { width: 8px; height: 8px; border-radius: 50%; align-self: start; justify-self: end; background: var(--rr-accent); box-shadow: 0 0 14px var(--rr-accent); } .rr-slot { position: absolute; z-index: 6; top: 74px; left: 50%; width: 92%; height: 27px; transform: translateX(-50%); padding: 8px 18px; border-radius: 3px 3px 9px 9px; background: linear-gradient(180deg, #050505, #292929); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.68); } .rr-slot span { display: block; width: 100%; height: 4px; border-radius: 50%; background: #000; box-shadow: inset 0 -1px rgba(255, 255, 255, 0.1); } .rr-paper-window { position: absolute; z-index: 3; inset: 92px 7% 0; overflow: hidden; filter: drop-shadow(0 28px 30px rgba(0, 0, 0, 0.42)); } .rr-paper { position: relative; width: 100%; min-height: 750px; padding: 35px clamp(24px, 4vw, 44px) 58px; color: var(--rr-ink); background: var(--rr-paper); transform-origin: 50% 0; will-change: transform; } .rr-paper::before, .rr-paper::after { content: ""; position: absolute; left: 0; width: 100%; height: 9px; background: linear-gradient(135deg, transparent 6px, var(--rr-paper) 0) 0 0 / 12px 12px repeat-x; } .rr-paper::before { top: -8px; transform: rotate(180deg); } .rr-paper::after { bottom: -8px; } .rr-paper-grain { position: absolute; inset: 0; opacity: 0.1; pointer-events: none; background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.08) 4px), repeating-linear-gradient(90deg, transparent 0 16px, rgba(0, 0, 0, 0.04) 17px); mix-blend-mode: multiply; } .rr-receipt-head { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0 13px; align-items: center; text-align: left; } .rr-skull { grid-row: 1 / 3; font-size: 30px; line-height: 1; } .rr-receipt-head strong { font-size: 30px; line-height: 0.9; letter-spacing: -0.07em; } .rr-receipt-head small { margin-top: 5px; font-family: "Courier New", monospace; font-size: 9px; letter-spacing: 0.12em; } .rr-rule { height: 1px; margin: 22px 0; border-top: 1px dashed currentColor; opacity: 0.62; } .rr-rule-double { height: 4px; border-top-style: solid; border-bottom: 1px solid currentColor; } .rr-receipt-meta { display: grid; grid-template-columns: 1fr auto; gap: 5px 16px; font-family: "Courier New", monospace; font-size: 10px; line-height: 1.25; } .rr-receipt-meta b { text-align: right; } .rr-lines { display: grid; gap: 20px; } .rr-line { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; opacity: 0.18; transform: translateY(8px); transition: opacity 260ms ease, transform 260ms ease; } .rr-line.is-visible { opacity: 1; transform: translateY(0); } .rr-line-label { display: flex; min-width: 0; align-items: baseline; gap: 6px; font-family: "Courier New", monospace; font-size: 10px; } .rr-line-label i { min-width: 16px; flex: 1; border-bottom: 1px dotted currentColor; opacity: 0.48; } .rr-line strong { font-family: "Courier New", monospace; font-size: 19px; line-height: 1; } .rr-line small { grid-column: 1 / -1; font-size: 8px; letter-spacing: 0.08em; opacity: 0.5; } .rr-total { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; } .rr-total small { padding-top: 4px; font-family: "Courier New", monospace; font-size: 9px; } .rr-total strong { text-align: right; font-size: clamp(22px, 2.1vw, 34px); line-height: 0.92; letter-spacing: -0.065em; } .rr-barcode { height: 48px; display: flex; align-items: stretch; justify-content: center; gap: 3px; margin: 28px 0 7px; } .rr-barcode i, .rr-barcode b { display: block; background: currentColor; } .rr-barcode i { width: 2px; } .rr-barcode b { width: 5px; } .rr-code { margin: 0; text-align: center; font-family: "Courier New", monospace; font-size: 8px; letter-spacing: 0.17em; } .rr-stamp { width: max-content; max-width: 100%; margin: 31px auto 25px; padding: 9px 14px 7px; transform: rotate(-3deg); border: 3px double var(--rr-accent); color: var(--rr-accent); text-align: center; font-family: "Courier New", monospace; opacity: 0; transition: opacity 300ms ease, transform 300ms ease; } .rr-stamp.is-visible { opacity: 0.88; transform: rotate(-3deg) scale(1); } .rr-stamp span, .rr-stamp small { display: block; } .rr-stamp span { font-size: 15px; font-weight: 700; letter-spacing: 0.05em; } .rr-stamp small { margin-top: 2px; font-size: 9px; letter-spacing: 0.17em; } .rr-note { margin: 0; text-align: center; font-family: "Courier New", monospace; font-size: 8px; line-height: 1.45; opacity: 0.47; } .rr-outro { align-self: end; max-width: 290px; padding-bottom: 5vh; } .rr-counter { display: block; margin-bottom: 20px; font-family: "Courier New", monospace; font-size: 12px; letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.35); } .rr-counter b { color: var(--rr-accent); font-size: 24px; } .rr-outro > p { margin: 0 0 26px; font-size: clamp(22px, 2vw, 36px); line-height: 0.98; letter-spacing: -0.05em; } .rr-prompt { display: block; margin: 0; color: rgba(255, 255, 255, 0.34); } @media (max-width: 1050px) { .rr-sticky { grid-template-columns: minmax(220px, 0.8fr) minmax(330px, 480px); } .rr-outro { position: absolute; right: 38px; bottom: 25px; max-width: 220px; padding: 0; } .rr-outro > p { display: none; } } @media (max-width: 760px) { .rr-track { height: 285vh; } .rr-sticky { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 20px; padding: 24px 16px 0; } .rr-intro { position: relative; z-index: 8; } .rr-kicker { margin-bottom: 12px; } .rr-intro h2 { max-width: 470px; font-size: clamp(42px, 13vw, 76px); } .rr-intro-copy { display: none; } .rr-machine { width: min(100%, 440px); height: calc(100svh - 185px); min-height: 570px; margin: 0 auto; } .rr-machine-top { height: 78px; } .rr-slot { top: 61px; } .rr-paper-window { inset: 78px 5% 0; } .rr-paper { min-height: 720px; padding-inline: 24px; } .rr-outro, .rr-index { display: none; } } @media (max-width: 390px) { .rr-intro h2 { font-size: 40px; } .rr-machine { min-height: 540px; } .rr-paper { min-height: 700px; padding-inline: 20px; } .rr-lines { gap: 17px; } } @media (prefers-reduced-motion: reduce) { .rr-track { height: auto; } .rr-sticky { position: relative; min-height: 980px; } .rr-paper { transform: none !important; } .rr-line, .rr-stamp { opacity: 1; transform: none; transition: none; } } {% endstylesheet %} {% javascript %} (() => { const clamp = (number, min, max) => Math.min(Math.max(number, min), max); const mount = (section) => { if (!section || section.dataset.rrReady === 'true') return; section.dataset.rrReady = 'true'; const track = section.querySelector('.rr-track'); const paper = section.querySelector('.rr-paper'); const lines = Array.from(section.querySelectorAll('[data-rr-line]')); const stamp = section.querySelector('.rr-stamp'); const counter = section.querySelector('[data-rr-counter]'); let ticking = false; const render = () => { ticking = false; const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reducedMotion) { paper.style.transform = 'none'; lines.forEach((line) => line.classList.add('is-visible')); stamp.classList.add('is-visible'); counter.textContent = String(lines.length).padStart(2, '0'); return; } const bounds = track.getBoundingClientRect(); const distance = Math.max(track.offsetHeight - window.innerHeight, 1); const progress = clamp(-bounds.top / distance, 0, 1); const eased = 1 - Math.pow(1 - progress, 3); const hiddenDistance = Math.min(paper.offsetHeight * 0.88, 670); const translate = -hiddenDistance + hiddenDistance * eased; const angle = -1.2 + progress * 1.2; paper.style.transform = `translate3d(0, ${translate}px, 0) rotate(${angle}deg)`; let visibleCount = 0; lines.forEach((line, index) => { const revealAt = 0.18 + index * 0.095; const visible = progress >= revealAt; line.classList.toggle('is-visible', visible); if (visible) visibleCount += 1; }); stamp.classList.toggle('is-visible', progress > 0.78); counter.textContent = String(visibleCount).padStart(2, '0'); }; const requestRender = () => { if (ticking) return; ticking = true; window.requestAnimationFrame(render); }; window.addEventListener('scroll', requestRender, { passive: true }); window.addEventListener('resize', requestRender, { passive: true }); render(); }; const mountAll = (root = document) => { root.querySelectorAll('[data-rr-receipt]').forEach(mount); }; if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => mountAll()); } else { mountAll(); } document.addEventListener('shopify:section:load', (event) => mountAll(event.target)); })(); {% endjavascript %} {% schema %} { "name": "RIPTUAL · Recibo", "tag": "section", "class": "section-riptual-receipt", "settings": [ { "type": "text", "id": "kicker", "label": "Texto superior", "default": "RIPTUAL / FÓRMULA 001" }, { "type": "text", "id": "heading", "label": "Título", "default": "TODA TRANSFORMACIÓN COBRA MATERIA." }, { "type": "textarea", "id": "intro", "label": "Introducción", "default": "No compras una promesa. Decides qué materia entra en tu sistema." }, { "type": "text", "id": "receipt_label", "label": "Nombre del recibo", "default": "RECIBO DE TRANSFORMACIÓN" }, { "type": "textarea", "id": "closing", "label": "Cierre lateral", "default": "LAS PROMESAS NO PAGAN EL COSTO." }, { "type": "textarea", "id": "note", "label": "Nota inferior", "default": "Consulta el envase para conocer la información nutrimental completa." }, { "type": "color", "id": "background", "label": "Fondo", "default": "#080808" }, { "type": "color", "id": "paper", "label": "Papel", "default": "#eee7d7" }, { "type": "color", "id": "ink", "label": "Tinta", "default": "#111111" }, { "type": "color", "id": "accent", "label": "Acento", "default": "#8e1f1f" } ], "blocks": [ { "type": "item", "name": "Dato de fórmula", "settings": [ { "type": "text", "id": "label", "label": "Concepto", "default": "RECONSTRUCCIÓN" }, { "type": "text", "id": "value", "label": "Valor", "default": "22 G" }, { "type": "text", "id": "detail", "label": "Detalle", "default": "PROTEÍNA POR SERVICIO" } ] } ], "max_blocks": 6, "presets": [ { "name": "RIPTUAL · Recibo", "blocks": [ { "type": "item", "settings": { "label": "RECONSTRUCCIÓN", "value": "22 G", "detail": "PROTEÍNA POR SERVICIO" } }, { "type": "item", "settings": { "label": "RECUPERACIÓN", "value": "2.9 G", "detail": "BCAA" } }, { "type": "item", "settings": { "label": "RENDIMIENTO", "value": "900 MG", "detail": "CREATINA MONOHIDRATADA" } }, { "type": "item", "settings": { "label": "COSTO ENERGÉTICO", "value": "123.4", "detail": "KCAL POR SERVICIO" } }, { "type": "item", "settings": { "label": "AZÚCAR AÑADIDA", "value": "0 G", "detail": "POR SERVICIO" } }, { "type": "item", "settings": { "label": "SERVICIOS", "value": "72", "detail": "POR BOLSA" } } ] } ] } {% endschema %}