https://solanica.io/presentations/Recent content in Presentations on SolanicaHugoen-ushttps://solanica.io/presentations/cloud-native-gandhinagar-april-2026/Mon, 01 Jan 0001 00:00:00 +0000https://solanica.io/presentations/cloud-native-gandhinagar-april-2026/<!-- ============================================================ Cloud Native Gandhinagar — April 18, 2026 _meta.t123.html (copied from shared/_meta.t123.html) ============================================================ --> <script> (function () { /* ========================================================= CONFIG ========================================================= */ var META = { title: "Abstracting the Abyss: How to Run Production Data Workloads on Any Kubernetes Cluster — Solanica", slug: "abstracting-the-abyss-cloud-native-gandhinagar-2026", description: "A practical deep-dive into running production databases on Kubernetes — without vendor lock-in. Presented by Sergey Pronin at Cloud Native Gandhinagar, April 2026.", speaker: "Sergey Pronin", event: "Cloud Native Gandhinagar", eventUrl: "https://community.cncf.io/events/details/cncf-cloud-native-gandhinagar-presents-abstracting-the-abyss-with-sergey-pronin-simplifying-data-workloads-on-kubernetes/", date: "2026-04-18", location: "Gandhinagar, India", tags: ["kubernetes", "databases", "cncf", "postgresql", "mysql", "mongodb", "cloud-native"], status: "upcoming", coverImage: "https://solanica.io/og-default.png", pageUrl: "https://solanica.io/presentations/abstracting-the-abyss-cloud-native-gandhinagar-2026" }; /* ========================================================= */ var d = document; function tag(name, attrs) { var key = attrs.property || attrs.name; if (key) { var existing = d.querySelector( 'meta[property="' + key + '"], meta[name="' + key + '"]' ); if (existing) existing.parentNode.removeChild(existing); } var el = d.createElement(name); Object.keys(attrs).forEach(function (k) { el.setAttribute(k, attrs[k]); }); return el; } var head = d.head || d.getElementsByTagName('head')[0]; var titleEl = d.querySelector('title'); if (titleEl) { titleEl.textContent = META.title; } else { var t = d.createElement('title'); t.textContent = META.title; head.appendChild(t); } head.appendChild(tag('meta', { name: 'description', content: META.description })); head.appendChild(tag('meta', { name: 'author', content: META.speaker })); head.appendChild(tag('meta', { name: 'keywords', content: META.tags.join(', ') })); head.appendChild(tag('link', { rel: 'canonical', href: META.pageUrl })); head.appendChild(tag('meta', { property: 'og:type', content: 'website' })); head.appendChild(tag('meta', { property: 'og:title', content: META.title })); head.appendChild(tag('meta', { property: 'og:description', content: META.description })); head.appendChild(tag('meta', { property: 'og:image', content: META.coverImage })); head.appendChild(tag('meta', { property: 'og:url', content: META.pageUrl })); head.appendChild(tag('meta', { property: 'og:site_name', content: 'Solanica' })); head.appendChild(tag('meta', { name: 'twitter:card', content: 'summary_large_image' })); head.appendChild(tag('meta', { name: 'twitter:site', content: '@solanicaio' })); head.appendChild(tag('meta', { name: 'twitter:title', content: META.title })); head.appendChild(tag('meta', { name: 'twitter:description', content: META.description })); head.appendChild(tag('meta', { name: 'twitter:image', content: META.coverImage })); var schema = { "@context": "https://schema.org", "@type": "Event", "name": META.title, "description": META.description, "startDate": META.date, "location": { "@type": "Place", "name": META.event, "address": META.location }, "url": META.eventUrl, "organizer": { "@type": "Organization", "name": META.event, "url": META.eventUrl }, "performer": { "@type": "Person", "name": META.speaker }, "image": META.coverImage, "eventStatus": "https://schema.org/EventScheduled" }; var ldScript = d.createElement('script'); ldScript.type = 'application/ld+json'; ldScript.textContent = JSON.stringify(schema, null, 2); head.appendChild(ldScript); window.__presMETA = META; }()); </script> <!-- ============================================================ Solanica Presentation Engine — _head.t123.html ADD THIS AS THE FIRST BLOCK on every Tilda presentation page. It applies scroll-snap to the page and styles shared by all slides. ============================================================ --> <style> /* ---- Page-level scroll snap ---- */ html { scroll-snap-type: y mandatory; scroll-behavior: smooth; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar { display: none; } body { margin: 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: #0f0f29; } /* ---- Slide base ---- */ .slide { height: 100vh; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } /* ---- Navigation dots (right edge) ---- */ .pres-dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 9999; list-style: none; margin: 0; padding: 0; } .pres-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); cursor: pointer; border: none; padding: 0; outline: none; transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .pres-dot:hover { background: rgba(255, 255, 255, 0.5); } .pres-dot.active { background: #7790de; box-shadow: 0 0 8px rgba(119, 144, 222, 0.6); transform: scale(1.5); } /* ---- Slide counter (bottom-right) ---- */ .pres-counter { position: fixed; bottom: 20px; right: 24px; color: rgba(255, 255, 255, 0.28); font-size: 12px; font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0.1em; z-index: 9999; pointer-events: none; user-select: none; } /* ---- Key hint (bottom-centre, fades out) ---- */ .pres-hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.22); font-size: 11px; font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; z-index: 9999; pointer-events: none; user-select: none; white-space: nowrap; transition: opacity 1.4s ease; } .pres-hint.hidden { opacity: 0; } /* ---- Left-edge back trigger ---- */ .pres-back-trigger { position: fixed; left: 0; top: 0; width: 48px; height: 100vh; z-index: 9998; cursor: pointer; } .pres-back-trigger:hover .pres-back-label { opacity: 1; transform: translateX(0); } .pres-back-label { position: absolute; top: 50%; left: 16px; transform: translateY(-50%) translateX(-8px); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; display: flex; align-items: center; gap: 10px; white-space: nowrap; color: rgba(255, 255, 255, 0.75); font-size: 13px; font-family: 'Inter', system-ui, sans-serif; font-weight: 500; letter-spacing: 0.03em; text-decoration: none; padding: 10px 16px 10px 12px; background: rgba(15, 15, 41, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: auto; } .pres-back-label:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.25); } .pres-back-arrow { font-size: 16px; line-height: 1; flex-shrink: 0; } /* ---- Mobile: desktop hint toast ---- */ .pres-mob-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 99999; background: rgba(15, 15, 41, 0.92); border: 1px solid rgba(119, 144, 222, 0.3); border-radius: 10px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 10px 10px 10px 16px; display: flex; align-items: center; gap: 12px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; color: rgba(200, 212, 228, 0.8); white-space: nowrap; opacity: 1; transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: auto; } .pres-mob-toast.hidden { opacity: 0; transform: translateX(-50%) translateY(-8px); pointer-events: none; } .pres-mob-toast-close { width: 22px; height: 22px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.06); border-radius: 50%; color: rgba(200, 212, 228, 0.55); font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; transition: background 0.2s, color 0.2s; } .pres-mob-toast-close:hover { background: rgba(255, 255, 255, 0.12); color: rgba(200, 212, 228, 0.9); } /* ============================================================ MOBILE — scale-to-fit: preserve desktop layout, shrink it to fit the phone screen. Users pinch-to-zoom for details. ============================================================ */ @media (max-width: 768px) { /* Disable snap — Tilda's header shifts the snap anchor of slide-1 below the viewport edge, causing it to be skipped. Natural scroll is more reliable on touch. */ html { scroll-snap-type: none; } /* Keep slides as fixed-height viewports */ .slide { height: 100svh; scroll-snap-align: none; scroll-snap-stop: normal; } /* Hide keyboard-centric chrome — not useful on touch */ .pres-dots, .pres-counter, .pres-hint, .pres-back-trigger { display: none !important; } /* Scale the content wrapper to fit the viewport width. --pres-mob-scale is set by JS in _foot.t123.html. The wrapper renders at its desktop width (1060px) and is visually scaled down via CSS transform. */ .slide > [class*="-wrap"], .slide > [class*="-outer"] { width: 1060px !important; max-width: none !important; transform: scale(var(--pres-mob-scale, 1)); transform-origin: center center; } } /* ============================================================ PRINT — one slide per page, hide navigation chrome. Use landscape orientation, no margins for best results. ============================================================ */ @media print { html { scroll-snap-type: none; overflow: visible; } body { background: #0a0a1e; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .slide { height: 100vh; width: 100vw; page-break-after: always; break-after: page; page-break-inside: avoid; break-inside: avoid; scroll-snap-align: none; overflow: hidden; } .slide:last-child { page-break-after: auto; break-after: auto; } .pres-dots, .pres-counter, .pres-hint, .pres-back-trigger, .pres-mob-toast { display: none !important; } /* Reveal all step-animated elements — force final state */ .slide * { opacity: 1 !important; transform: none !important; visibility: visible !important; transition: none !important; animation: none !important; } } </style> <!-- ============================================================ Cloud Native Gandhinagar — April 18, 2026 Slide 01: Title ============================================================ --> <style> #cng-slide-01 { background-color: #0f0f29; background-image: radial-gradient(ellipse at 20% 80%, rgba(31, 35, 85, 0.7) 0%, transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(31, 35, 85, 0.5) 0%, transparent 50%), radial-gradient(circle at 50% 50%, #131333 0%, #0a0a1e 100%); } #cng01-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .cng01-wrap { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; width: 100%; position: relative; z-index: 1; max-width: 960px; padding: 56px 40px 48px; box-sizing: border-box; text-align: center; } /* Top: logos */ .cng01-logos { display: flex; align-items: center; justify-content: center; gap: 28px; } .cng01-logo { display: block; height: 44px; width: auto; opacity: 0.92; } .cng01-logo-divider { width: 1px; height: 32px; background: rgba(255, 255, 255, 0.15); flex-shrink: 0; } .cng01-logo-cncf { display: block; height: 36px; width: auto; opacity: 0.80; } /* Centre: title block */ .cng01-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } .cng01-eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #7790de; font-weight: 600; font-family: 'Inter', system-ui, sans-serif; margin: 0 0 32px; } .cng01-title { font-size: 62px; font-weight: 700; color: #ffffff; line-height: 1.08; letter-spacing: -2px; margin: 0 0 36px; font-family: 'Inter', system-ui, sans-serif; max-width: 860px; } .cng01-speaker { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: 'Inter', system-ui, sans-serif; } .cng01-speaker-name { color: #ffffff; font-size: 17px; font-weight: 600; } .cng01-speaker-role { color: #7a8a9e; font-size: 14px; font-weight: 400; } .cng01-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); flex-shrink: 0; } /* Bottom: event meta */ .cng01-footer { display: flex; align-items: center; justify-content: center; gap: 20px; font-family: 'Inter', system-ui, sans-serif; } .cng01-event-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid rgba(119, 144, 222, 0.3); border-radius: 50px; color: #9ab0e0; font-size: 13px; font-weight: 500; background: rgba(119, 144, 222, 0.06); } .cng01-event-dot { width: 6px; height: 6px; border-radius: 50%; background: #7790de; flex-shrink: 0; } .cng01-date { color: rgba(255, 255, 255, 0.28); font-size: 13px; } .cng01-footer-divider { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.1); } .cng01-event-link { color: rgba(255, 255, 255, 0.28) !important; font-size: 13px; text-decoration: none !important; transition: color 0.2s; } .cng01-event-link:hover { color: rgba(255, 255, 255, 0.6) !important; } </style> <div class="slide" id="cng-slide-01"> <canvas id="cng01-canvas"></canvas> <div class="cng01-wrap"> <!-- Logos --> <div class="cng01-logos"> <img class="cng01-logo" src="https://solanica.io/images/pages/tild6161-6333-4631-b266-656534633030__white-horizontal-col.png" alt="Solanica" /> <span class="cng01-logo-divider"></span> <img class="cng01-logo-cncf" src="https://solanica.io/images/pages/tild3762-3430-4866-b537-366239336564__cncf-white.png" alt="CNCF" /> </div> <!-- Title --> <div class="cng01-body"> <p class="cng01-eyebrow">Talk · Cloud Native Gandhinagar</p>https://solanica.io/presentations/in-the-cloud-be-cloud-ready-builddevcon-2026/Mon, 01 Jan 0001 00:00:00 +0000https://solanica.io/presentations/in-the-cloud-be-cloud-ready-builddevcon-2026/<!-- ============================================================ BuildDevCon — April 24, 2026 _meta.t123.html ============================================================ --> <script> (function () { var META = { title: "In the Cloud? Be Cloud-Ready Instead — Solanica", slug: "in-the-cloud-be-cloud-ready-builddevcon-2026", description: "Escaping the Golden Cage: how Kubernetes Operators and OpenEverest replace managed database lock-in with portable, open source infrastructure. Presented by Sergey Pronin at BuildDevCon, April 2026.", speaker: "Sergey Pronin", event: "BuildDevCon", eventUrl: "https://buildevcon.com/events/running-oss-databases-on-aws", date: "2026-04-24", location: "Virtual", tags: ["kubernetes", "databases", "aws", "postgresql", "mysql", "mongodb", "cloud-native", "operators"], status: "upcoming", coverImage: "https://solanica.io/og-default.png", pageUrl: "https://solanica.io/presentations/in-the-cloud-be-cloud-ready-builddevcon-2026" }; window.__presMETA = META; var d = document; function tag(name, attrs) { var key = attrs.property || attrs.name; if (key) { var existing = d.querySelector( 'meta[property="' + key + '"], meta[name="' + key + '"]' ); if (existing) existing.parentNode.removeChild(existing); } var el = d.createElement(name); Object.keys(attrs).forEach(function (k) { el.setAttribute(k, attrs[k]); }); return el; } var head = d.head || d.getElementsByTagName('head')[0]; var titleEl = d.querySelector('title'); if (titleEl) { titleEl.textContent = META.title; } else { var t = d.createElement('title'); t.textContent = META.title; head.appendChild(t); } head.appendChild(tag('meta', { name: 'description', content: META.description })); head.appendChild(tag('meta', { name: 'author', content: META.speaker })); head.appendChild(tag('meta', { name: 'keywords', content: META.tags.join(', ') })); head.appendChild(tag('link', { rel: 'canonical', href: META.pageUrl })); head.appendChild(tag('meta', { property: 'og:type', content: 'website' })); head.appendChild(tag('meta', { property: 'og:title', content: META.title })); head.appendChild(tag('meta', { property: 'og:description', content: META.description })); head.appendChild(tag('meta', { property: 'og:image', content: META.coverImage })); head.appendChild(tag('meta', { property: 'og:url', content: META.pageUrl })); head.appendChild(tag('meta', { property: 'og:site_name', content: 'Solanica' })); head.appendChild(tag('meta', { name: 'twitter:card', content: 'summary_large_image' })); head.appendChild(tag('meta', { name: 'twitter:site', content: '@solanicaio' })); head.appendChild(tag('meta', { name: 'twitter:title', content: META.title })); head.appendChild(tag('meta', { name: 'twitter:description', content: META.description })); head.appendChild(tag('meta', { name: 'twitter:image', content: META.coverImage })); var schema = { "@context": "https://schema.org", "@type": "Event", "name": META.title, "description": META.description, "startDate": META.date, "location": { "@type": "VirtualLocation", "name": META.event, "url": META.eventUrl }, "url": META.eventUrl, "organizer": { "@type": "Organization", "name": META.event, "url": META.eventUrl }, "performer": { "@type": "Person", "name": META.speaker }, "image": META.coverImage }; var ld = d.createElement('script'); ld.type = 'application/ld+json'; ld.textContent = JSON.stringify(schema, null, 2); head.appendChild(ld); }()); </script> <!-- ============================================================ Solanica Presentation Engine — _head.t123.html ADD THIS AS THE FIRST BLOCK on every Tilda presentation page. It applies scroll-snap to the page and styles shared by all slides. ============================================================ --> <style> /* ---- Page-level scroll snap ---- */ html { scroll-snap-type: y mandatory; scroll-behavior: smooth; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar { display: none; } body { margin: 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: #0f0f29; } /* ---- Slide base ---- */ .slide { height: 100vh; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } /* ---- Navigation dots (right edge) ---- */ .pres-dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 9999; list-style: none; margin: 0; padding: 0; } .pres-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); cursor: pointer; border: none; padding: 0; outline: none; transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .pres-dot:hover { background: rgba(255, 255, 255, 0.5); } .pres-dot.active { background: #7790de; box-shadow: 0 0 8px rgba(119, 144, 222, 0.6); transform: scale(1.5); } /* ---- Slide counter (bottom-right) ---- */ .pres-counter { position: fixed; bottom: 20px; right: 24px; color: rgba(255, 255, 255, 0.28); font-size: 12px; font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0.1em; z-index: 9999; pointer-events: none; user-select: none; } /* ---- Key hint (bottom-centre, fades out) ---- */ .pres-hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.22); font-size: 11px; font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; z-index: 9999; pointer-events: none; user-select: none; white-space: nowrap; transition: opacity 1.4s ease; } .pres-hint.hidden { opacity: 0; } /* ---- Left-edge back trigger ---- */ .pres-back-trigger { position: fixed; left: 0; top: 0; width: 48px; height: 100vh; z-index: 9998; cursor: pointer; } .pres-back-trigger:hover .pres-back-label { opacity: 1; transform: translateY(-50%) translateX(0); } .pres-back-label { position: absolute; top: 50%; left: 16px; transform: translateY(-50%) translateX(-8px); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; display: flex; align-items: center; gap: 10px; white-space: nowrap; color: rgba(255, 255, 255, 0.75); font-size: 13px; font-family: 'Inter', system-ui, sans-serif; font-weight: 500; letter-spacing: 0.03em; text-decoration: none; padding: 10px 16px 10px 12px; background: rgba(15, 15, 41, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: auto; } .pres-back-label:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.25); } .pres-back-arrow { font-size: 16px; line-height: 1; flex-shrink: 0; } /* ---- Mobile: desktop hint toast ---- */ .pres-mob-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 99999; background: rgba(15, 15, 41, 0.92); border: 1px solid rgba(119, 144, 222, 0.3); border-radius: 10px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 10px 10px 10px 16px; display: flex; align-items: center; gap: 12px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; color: rgba(200, 212, 228, 0.8); white-space: nowrap; opacity: 1; transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: auto; } .pres-mob-toast.hidden { opacity: 0; transform: translateX(-50%) translateY(-8px); pointer-events: none; } .pres-mob-toast-close { width: 22px; height: 22px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.06); border-radius: 50%; color: rgba(200, 212, 228, 0.55); font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; transition: background 0.2s, color 0.2s; } .pres-mob-toast-close:hover { background: rgba(255, 255, 255, 0.12); color: rgba(200, 212, 228, 0.9); } /* ============================================================ MOBILE — scale-to-fit: preserve desktop layout, shrink it to fit the phone screen. Users pinch-to-zoom for details. ============================================================ */ @media (max-width: 768px) { /* Disable snap — Tilda's header shifts the snap anchor of slide-1 below the viewport edge, causing it to be skipped. Natural scroll is more reliable on touch. */ html { scroll-snap-type: none; } /* Keep slides as fixed-height viewports */ .slide { height: 100svh; scroll-snap-align: none; scroll-snap-stop: normal; } /* Hide keyboard-centric chrome — not useful on touch */ .pres-dots, .pres-counter, .pres-hint, .pres-back-trigger { display: none !important; } /* Scale the content wrapper to fit the viewport width. --pres-mob-scale is set by JS in _foot.t123.html. The wrapper renders at its desktop width (1060px) and is visually scaled down via CSS transform. */ .slide > [class*="-wrap"], .slide > [class*="-outer"] { width: 1060px !important; max-width: none !important; transform: scale(var(--pres-mob-scale, 1)); transform-origin: center center; } } /* ============================================================ PRINT — one slide per page, hide navigation chrome. Use landscape orientation, no margins for best results. ============================================================ */ @media print { html { scroll-snap-type: none; overflow: visible; } body { background: #0a0a1e; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .slide { height: 100vh; width: 100vw; page-break-after: always; break-after: page; page-break-inside: avoid; break-inside: avoid; scroll-snap-align: none; overflow: hidden; } .slide:last-child { page-break-after: auto; break-after: auto; } .pres-dots, .pres-counter, .pres-hint, .pres-back-trigger, .pres-mob-toast { display: none !important; } /* Reveal all step-animated elements — force final state */ .slide * { opacity: 1 !important; transform: none !important; visibility: visible !important; transition: none !important; animation: none !important; } } </style> <!-- ============================================================ BuildDevCon — April 24, 2026 Slide 01: Title ============================================================ --> <style> #bdc-slide-01 { background-color: #0a0a1e; background-image: radial-gradient(ellipse at 20% 80%, rgba(31, 35, 85, 0.75) 0%, transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(31, 35, 85, 0.55) 0%, transparent 50%), radial-gradient(circle at 50% 50%, #131333 0%, #080818 100%); } #bdc01-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .bdc01-wrap { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; width: 100%; position: relative; z-index: 1; max-width: 1280px; padding: 48px 40px 44px; box-sizing: border-box; text-align: center; } .bdc01-logos { display: flex; align-items: center; justify-content: center; gap: 28px; } .bdc01-logo { display: block; height: 54px; width: auto; opacity: 0.92; } .bdc01-logo-divider { width: 1px; height: 34px; background: rgba(255, 255, 255, 0.14); flex-shrink: 0; } .bdc01-event-logo { height: 40px; width: auto; opacity: 0.9; } .bdc01-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } .bdc01-eyebrow { font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: #e8a04c; font-weight: 600; font-family: 'Inter', system-ui, sans-serif; margin: 0 0 28px; } .bdc01-title { font-size: 76px; font-weight: 800; color: #ffffff; line-height: 1.06; letter-spacing: -2.5px; margin: 0 0 22px; font-family: 'Inter', system-ui, sans-serif; max-width: 1100px; } .bdc01-title span { color: #7790de; } .bdc01-subtitle { font-size: 20px; font-weight: 300; color: rgba(220, 228, 240, 0.45); font-family: 'Inter', system-ui, sans-serif; margin: 0 0 40px; letter-spacing: -0.2px; } .bdc01-speaker { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: 'Inter', system-ui, sans-serif; } .bdc01-speaker-name { color: #ffffff; font-size: 22px; font-weight: 600; } .bdc01-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); flex-shrink: 0; } .bdc01-speaker-role { color: #7a8a9e; font-size: 18px; font-weight: 400; } .bdc01-footer { display: flex; align-items: center; justify-content: center; gap: 20px; font-family: 'Inter', system-ui, sans-serif; } .bdc01-event-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border: 1px solid rgba(232, 160, 76, 0.3); border-radius: 50px; color: rgba(232, 160, 76, 0.8); font-size: 15px; font-weight: 500; background: rgba(232, 160, 76, 0.06); } .bdc01-event-dot { width: 6px; height: 6px; border-radius: 50%; background: #e8a04c; flex-shrink: 0; } .bdc01-date { color: rgba(255, 255, 255, 0.28); font-size: 15px; } .bdc01-footer-divider { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.1); } .bdc01-event-link { color: rgba(255, 255, 255, 0.28) !important; font-size: 15px; text-decoration: none !important; transition: color 0.2s; } .bdc01-event-link:hover { color: rgba(255, 255, 255, 0.6) !important; } </style> <div class="slide" id="bdc-slide-01"> <canvas id="bdc01-canvas"></canvas> <div class="bdc01-wrap"> <div class="bdc01-logos"> <img class="bdc01-logo" src="https://solanica.io/images/pages/tild6161-6333-4631-b266-656534633030__white-horizontal-col.png" alt="Solanica" /> <span class="bdc01-logo-divider"></span> <img class="bdc01-event-logo" src="https://solanica.io/images/pages/tild3134-6535-4430-b335-633664396165__builddevcon_logo.png" alt="BuildDevCon" /> </div> <div class="bdc01-body"> <p class="bdc01-eyebrow">Running OSS Databases on AWS · April 24, 2026</p>https://solanica.io/presentations/mysql-cloud-native-builddevcon-2026/Mon, 01 Jan 0001 00:00:00 +0000https://solanica.io/presentations/mysql-cloud-native-builddevcon-2026/<!-- ============================================================ BuildDevCon: MariaDB & MySQL on Kubernetes — June 25, 2026 _meta.t123.html ============================================================ --> <script> (function () { var META = { title: "Age Gap Is Not A Problem — MySQL and Cloud-Native — Solanica", slug: "mysql-cloud-native-builddevcon-2026", description: "MySQL is 30. Kubernetes is 12. Can a database from the dial-up era really feel at home in a cloud-native world? Sergey Pronin, founder of Solanica, walks through what it takes to run MySQL on Kubernetes the right way — operators, storage, failover, and the patterns that actually work in production.", speaker: "Sergey Pronin", event: "BuildDevCon: MariaDB & MySQL on Kubernetes", eventUrl: "https://buildevcon.com/events/mariadb-mysql-on-kubernetes", date: "2026-06-25", location: "Virtual", tags: ["mysql", "mariadb", "kubernetes", "cloud-native", "operators", "databases", "solanica"], status: "upcoming", coverImage: "https://solanica.io/og-default.png", pageUrl: "https://solanica.io/presentations/mysql-cloud-native-builddevcon-2026" }; window.__presMETA = META; var d = document; function tag(name, attrs) { var key = attrs.property || attrs.name; if (key) { var existing = d.querySelector( 'meta[property="' + key + '"], meta[name="' + key + '"]' ); if (existing) existing.parentNode.removeChild(existing); } var el = d.createElement(name); Object.keys(attrs).forEach(function (k) { el.setAttribute(k, attrs[k]); }); return el; } var head = d.head || d.getElementsByTagName('head')[0]; var titleEl = d.querySelector('title'); if (titleEl) { titleEl.textContent = META.title; } else { var t = d.createElement('title'); t.textContent = META.title; head.appendChild(t); } head.appendChild(tag('meta', { name: 'description', content: META.description })); head.appendChild(tag('meta', { name: 'author', content: META.speaker })); head.appendChild(tag('meta', { name: 'keywords', content: META.tags.join(', ') })); head.appendChild(tag('link', { rel: 'canonical', href: META.pageUrl })); head.appendChild(tag('meta', { property: 'og:type', content: 'website' })); head.appendChild(tag('meta', { property: 'og:title', content: META.title })); head.appendChild(tag('meta', { property: 'og:description', content: META.description })); head.appendChild(tag('meta', { property: 'og:image', content: META.coverImage })); head.appendChild(tag('meta', { property: 'og:url', content: META.pageUrl })); head.appendChild(tag('meta', { property: 'og:site_name', content: 'Solanica' })); head.appendChild(tag('meta', { name: 'twitter:card', content: 'summary_large_image' })); head.appendChild(tag('meta', { name: 'twitter:site', content: '@solanicaio' })); head.appendChild(tag('meta', { name: 'twitter:title', content: META.title })); head.appendChild(tag('meta', { name: 'twitter:description', content: META.description })); head.appendChild(tag('meta', { name: 'twitter:image', content: META.coverImage })); var schema = { "@context": "https://schema.org", "@type": "Event", "name": META.title, "description": META.description, "startDate": META.date, "location": { "@type": "VirtualLocation", "name": META.event, "url": META.eventUrl }, "url": META.eventUrl, "organizer": { "@type": "Organization", "name": META.event, "url": META.eventUrl }, "performer": { "@type": "Person", "name": META.speaker }, "image": META.coverImage }; var ld = d.createElement('script'); ld.type = 'application/ld+json'; ld.textContent = JSON.stringify(schema, null, 2); head.appendChild(ld); }()); </script> <!-- ============================================================ Solanica Presentation Engine — _head.t123.html ADD THIS AS THE FIRST BLOCK on every Tilda presentation page. It applies scroll-snap to the page and styles shared by all slides. ============================================================ --> <style> /* ---- Page-level scroll snap ---- */ html { scroll-snap-type: y mandatory; scroll-behavior: smooth; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar { display: none; } body { margin: 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: #0f0f29; } /* ---- Slide base ---- */ .slide { height: 100vh; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } /* ---- Navigation dots (right edge) ---- */ .pres-dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 9999; list-style: none; margin: 0; padding: 0; } .pres-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); cursor: pointer; border: none; padding: 0; outline: none; transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .pres-dot:hover { background: rgba(255, 255, 255, 0.5); } .pres-dot.active { background: #7790de; box-shadow: 0 0 8px rgba(119, 144, 222, 0.6); transform: scale(1.5); } /* ---- Slide counter (bottom-right) ---- */ .pres-counter { position: fixed; bottom: 20px; right: 24px; color: rgba(255, 255, 255, 0.28); font-size: 12px; font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0.1em; z-index: 9999; pointer-events: none; user-select: none; } /* ---- Key hint (bottom-centre, fades out) ---- */ .pres-hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.22); font-size: 11px; font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; z-index: 9999; pointer-events: none; user-select: none; white-space: nowrap; transition: opacity 1.4s ease; } .pres-hint.hidden { opacity: 0; } /* ---- Left-edge back trigger ---- */ .pres-back-trigger { position: fixed; left: 0; top: 0; width: 48px; height: 100vh; z-index: 9998; cursor: pointer; } .pres-back-trigger:hover .pres-back-label { opacity: 1; transform: translateY(-50%) translateX(0); } .pres-back-label { position: absolute; top: 50%; left: 16px; transform: translateY(-50%) translateX(-8px); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; display: flex; align-items: center; gap: 10px; white-space: nowrap; color: rgba(255, 255, 255, 0.75); font-size: 13px; font-family: 'Inter', system-ui, sans-serif; font-weight: 500; letter-spacing: 0.03em; text-decoration: none; padding: 10px 16px 10px 12px; background: rgba(15, 15, 41, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: auto; } .pres-back-label:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.25); } .pres-back-arrow { font-size: 16px; line-height: 1; flex-shrink: 0; } /* ---- Mobile: desktop hint toast ---- */ .pres-mob-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 99999; background: rgba(15, 15, 41, 0.92); border: 1px solid rgba(119, 144, 222, 0.3); border-radius: 10px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 10px 10px 10px 16px; display: flex; align-items: center; gap: 12px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; color: rgba(200, 212, 228, 0.8); white-space: nowrap; opacity: 1; transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: auto; } .pres-mob-toast.hidden { opacity: 0; transform: translateX(-50%) translateY(-8px); pointer-events: none; } .pres-mob-toast-close { width: 22px; height: 22px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.06); border-radius: 50%; color: rgba(200, 212, 228, 0.55); font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; transition: background 0.2s, color 0.2s; } .pres-mob-toast-close:hover { background: rgba(255, 255, 255, 0.12); color: rgba(200, 212, 228, 0.9); } /* ============================================================ MOBILE — scale-to-fit: preserve desktop layout, shrink it to fit the phone screen. Users pinch-to-zoom for details. ============================================================ */ @media (max-width: 768px) { /* Disable snap — Tilda's header shifts the snap anchor of slide-1 below the viewport edge, causing it to be skipped. Natural scroll is more reliable on touch. */ html { scroll-snap-type: none; } /* Keep slides as fixed-height viewports */ .slide { height: 100svh; scroll-snap-align: none; scroll-snap-stop: normal; } /* Hide keyboard-centric chrome — not useful on touch */ .pres-dots, .pres-counter, .pres-hint, .pres-back-trigger { display: none !important; } /* Scale the content wrapper to fit the viewport width. --pres-mob-scale is set by JS in _foot.t123.html. The wrapper renders at its desktop width (1060px) and is visually scaled down via CSS transform. */ .slide > [class*="-wrap"], .slide > [class*="-outer"] { width: 1060px !important; max-width: none !important; transform: scale(var(--pres-mob-scale, 1)); transform-origin: center center; } } /* ============================================================ PRINT — one slide per page, hide navigation chrome. Use landscape orientation, no margins for best results. ============================================================ */ @media print { html { scroll-snap-type: none; overflow: visible; } body { background: #0a0a1e; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .slide { height: 100vh; width: 100vw; page-break-after: always; break-after: page; page-break-inside: avoid; break-inside: avoid; scroll-snap-align: none; overflow: hidden; } .slide:last-child { page-break-after: auto; break-after: auto; } .pres-dots, .pres-counter, .pres-hint, .pres-back-trigger, .pres-mob-toast { display: none !important; } /* Reveal all step-animated elements — force final state */ .slide * { opacity: 1 !important; transform: none !important; visibility: visible !important; transition: none !important; animation: none !important; } } </style> <!-- ============================================================ BuildDevCon: MariaDB & MySQL on Kubernetes — June 25, 2026 Slide 01: Title ============================================================ --> <style> #bmk-slide-01 { background-color: #04121a; background-image: radial-gradient(ellipse at 18% 78%, rgba(0, 117, 143, 0.55) 0%, transparent 55%), radial-gradient(ellipse at 82% 22%, rgba(242, 145, 17, 0.22) 0%, transparent 50%), radial-gradient(circle at 50% 50%, #0a1f2c 0%, #03101a 100%); } #bmk01-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .bmk01-wrap { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; width: 100%; position: relative; z-index: 1; max-width: min(1600px, 96vw); padding: clamp(28px, 4.5vh, 72px) clamp(24px, 3vw, 56px) clamp(24px, 4vh, 60px); box-sizing: border-box; text-align: center; } .bmk01-logos { display: flex; align-items: center; justify-content: center; gap: 28px; } .bmk01-logo { display: block; height: clamp(32px, 5.5vh, 72px); width: auto; opacity: 0.92; } .bmk01-logo-divider { width: 1px; height: clamp(20px, 3.5vh, 46px); background: rgba(255, 255, 255, 0.14); flex-shrink: 0; } .bmk01-event-logo { height: clamp(24px, 4vh, 54px); width: auto; opacity: 0.9; } .bmk01-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } .bmk01-eyebrow { font-size: clamp(10px, 1.1vw, 20px); letter-spacing: 0.22em; text-transform: uppercase; color: #f29111; font-weight: 600; font-family: 'Inter', system-ui, sans-serif; margin: 0 0 clamp(14px, 2.5vh, 36px); } .bmk01-title { font-size: clamp(44px, 6.875vw, 140px); font-weight: 800; color: #ffffff; line-height: 1.02; letter-spacing: -0.034em; margin: 0 0 clamp(14px, 2vh, 32px); font-family: 'Inter', system-ui, sans-serif; max-width: min(1500px, 96vw); } .bmk01-title-old { color: #f29111; font-style: italic; font-weight: 800; } .bmk01-title-new { color: #4dc0d8; } .bmk01-subtitle { font-size: clamp(18px, 2.34vw, 46px); font-weight: 300; color: rgba(220, 235, 245, 0.78); font-family: 'Inter', system-ui, sans-serif; margin: 0 0 clamp(22px, 3.5vh, 56px); letter-spacing: -0.013em; } .bmk01-subtitle .bmk01-mysql { color: #ffffff; font-weight: 500; } .bmk01-subtitle .bmk01-amp { color: rgba(242, 145, 17, 0.7); margin: 0 14px; font-weight: 300; } .bmk01-subtitle .bmk01-k8s { color: #ffffff; font-weight: 500; } .bmk01-speaker { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: 'Inter', system-ui, sans-serif; } .bmk01-speaker-name { color: #ffffff; font-size: clamp(14px, 1.72vw, 32px); font-weight: 600; } .bmk01-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); flex-shrink: 0; } .bmk01-speaker-role { color: #7ea3b3; font-size: clamp(12px, 1.41vw, 26px); font-weight: 400; } .bmk01-footer { display: flex; align-items: center; justify-content: center; gap: 20px; font-family: 'Inter', system-ui, sans-serif; } .bmk01-event-badge { display: inline-flex; align-items: center; gap: 8px; padding: clamp(5px, 0.7vh, 10px) clamp(12px, 1.4vw, 22px); border: 1px solid rgba(242, 145, 17, 0.32); border-radius: 50px; color: rgba(242, 145, 17, 0.85); font-size: clamp(10px, 1.17vw, 22px); font-weight: 500; background: rgba(242, 145, 17, 0.07); } .bmk01-event-dot { width: 6px; height: 6px; border-radius: 50%; background: #f29111; flex-shrink: 0; } .bmk01-date { color: rgba(255, 255, 255, 0.32); font-size: clamp(10px, 1.17vw, 22px); } .bmk01-footer-divider { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.1); } .bmk01-event-link { color: rgba(255, 255, 255, 0.32) !important; font-size: clamp(10px, 1.17vw, 22px); text-decoration: none !important; transition: color 0.2s; } .bmk01-event-link:hover { color: rgba(255, 255, 255, 0.65) !important; } </style> <div class="slide" id="bmk-slide-01"> <canvas id="bmk01-canvas"></canvas> <div class="bmk01-wrap"> <div class="bmk01-logos"> <img class="bmk01-logo" src="https://solanica.io/images/pages/tild6161-6333-4631-b266-656534633030__white-horizontal-col.png" alt="Solanica" /> <span class="bmk01-logo-divider"></span> <img class="bmk01-event-logo" src="https://solanica.io/images/pages/tild3134-6535-4430-b335-633664396165__builddevcon_logo.png" alt="BuildDevCon" /> </div> <div class="bmk01-body"> <h1 class="bmk01-title"> Age Gap Is <span class="bmk01-title-old">Not</span> a Problem </h1> <p class="bmk01-subtitle"> <span class="bmk01-mysql">MySQL</span> <span class="bmk01-amp">×</span> <span class="bmk01-k8s">Cloud-Native</span> </p>https://solanica.io/presentations/about-openeverest/Mon, 01 Jan 0001 00:00:00 +0000https://solanica.io/presentations/about-openeverest/<!-- ============================================================ OpenEverest Overview — Customer Presentation _meta.t123.html ============================================================ --> <script> (function () { var META = { title: "OpenEverest: Open-Source DBaaS on Kubernetes", slug: "about-openeverest", description: "OpenEverest overview: open-source Database-as-a-Service on Kubernetes — run PostgreSQL, MySQL, MongoDB, MariaDB, ClickHouse and more from one control plane. Customer-facing presentation.", speaker: "Sergey Pronin", event: "Customer Presentation", eventUrl: "https://openeverest.io", date: "2026-06-04", location: "Global", tags: ["openeverest", "kubernetes", "dbaas", "cloud-native", "open-source", "postgresql", "mysql", "mongodb", "clickhouse", "mariadb"], status: "draft", coverImage: "https://solanica.io/og-default.png", pageUrl: "https://solanica.io/presentations/about-openeverest" }; window.__presMETA = META; var d = document; function tag(name, attrs) { var key = attrs.property || attrs.name; if (key) { var existing = d.querySelector( 'meta[property="' + key + '"], meta[name="' + key + '"]' ); if (existing) existing.parentNode.removeChild(existing); } var el = d.createElement(name); Object.keys(attrs).forEach(function (k) { el.setAttribute(k, attrs[k]); }); return el; } var head = d.head || d.getElementsByTagName('head')[0]; var titleEl = d.querySelector('title'); if (titleEl) { titleEl.textContent = META.title; } else { var t = d.createElement('title'); t.textContent = META.title; head.appendChild(t); } head.appendChild(tag('meta', { name: 'description', content: META.description })); head.appendChild(tag('meta', { name: 'author', content: META.speaker })); head.appendChild(tag('meta', { name: 'keywords', content: META.tags.join(', ') })); head.appendChild(tag('link', { rel: 'canonical', href: META.pageUrl })); head.appendChild(tag('meta', { property: 'og:type', content: 'website' })); head.appendChild(tag('meta', { property: 'og:title', content: META.title })); head.appendChild(tag('meta', { property: 'og:description', content: META.description })); head.appendChild(tag('meta', { property: 'og:image', content: META.coverImage })); head.appendChild(tag('meta', { property: 'og:url', content: META.pageUrl })); head.appendChild(tag('meta', { property: 'og:site_name', content: 'Solanica' })); head.appendChild(tag('meta', { name: 'twitter:card', content: 'summary_large_image' })); head.appendChild(tag('meta', { name: 'twitter:site', content: '@solanicaio' })); head.appendChild(tag('meta', { name: 'twitter:title', content: META.title })); head.appendChild(tag('meta', { name: 'twitter:description', content: META.description })); head.appendChild(tag('meta', { name: 'twitter:image', content: META.coverImage })); })(); </script> <!-- ============================================================ Solanica Presentation Engine — _head.t123.html ADD THIS AS THE FIRST BLOCK on every Tilda presentation page. It applies scroll-snap to the page and styles shared by all slides. ============================================================ --> <style> /* ---- Page-level scroll snap ---- */ html { scroll-snap-type: y mandatory; scroll-behavior: smooth; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar { display: none; } body { margin: 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: #0f0f29; } /* ---- Slide base ---- */ .slide { height: 100vh; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } /* ---- Navigation dots (right edge) ---- */ .pres-dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 9999; list-style: none; margin: 0; padding: 0; } .pres-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); cursor: pointer; border: none; padding: 0; outline: none; transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .pres-dot:hover { background: rgba(255, 255, 255, 0.5); } .pres-dot.active { background: #7790de; box-shadow: 0 0 8px rgba(119, 144, 222, 0.6); transform: scale(1.5); } /* ---- Slide counter (bottom-right) ---- */ .pres-counter { position: fixed; bottom: 20px; right: 24px; color: rgba(255, 255, 255, 0.28); font-size: 12px; font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0.1em; z-index: 9999; pointer-events: none; user-select: none; } /* ---- Key hint (bottom-centre, fades out) ---- */ .pres-hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.22); font-size: 11px; font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; z-index: 9999; pointer-events: none; user-select: none; white-space: nowrap; transition: opacity 1.4s ease; } .pres-hint.hidden { opacity: 0; } /* ---- Left-edge back trigger ---- */ .pres-back-trigger { position: fixed; left: 0; top: 0; width: 48px; height: 100vh; z-index: 9998; cursor: pointer; } .pres-back-trigger:hover .pres-back-label { opacity: 1; transform: translateY(-50%) translateX(0); } .pres-back-label { position: absolute; top: 50%; left: 16px; transform: translateY(-50%) translateX(-8px); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; display: flex; align-items: center; gap: 10px; white-space: nowrap; color: rgba(255, 255, 255, 0.75); font-size: 13px; font-family: 'Inter', system-ui, sans-serif; font-weight: 500; letter-spacing: 0.03em; text-decoration: none; padding: 10px 16px 10px 12px; background: rgba(15, 15, 41, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: auto; } .pres-back-label:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.25); } .pres-back-arrow { font-size: 16px; line-height: 1; flex-shrink: 0; } /* ---- Mobile: desktop hint toast ---- */ .pres-mob-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 99999; background: rgba(15, 15, 41, 0.92); border: 1px solid rgba(119, 144, 222, 0.3); border-radius: 10px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 10px 10px 10px 16px; display: flex; align-items: center; gap: 12px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; color: rgba(200, 212, 228, 0.8); white-space: nowrap; opacity: 1; transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: auto; } .pres-mob-toast.hidden { opacity: 0; transform: translateX(-50%) translateY(-8px); pointer-events: none; } .pres-mob-toast-close { width: 22px; height: 22px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.06); border-radius: 50%; color: rgba(200, 212, 228, 0.55); font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; transition: background 0.2s, color 0.2s; } .pres-mob-toast-close:hover { background: rgba(255, 255, 255, 0.12); color: rgba(200, 212, 228, 0.9); } /* ============================================================ MOBILE — scale-to-fit: preserve desktop layout, shrink it to fit the phone screen. Users pinch-to-zoom for details. ============================================================ */ @media (max-width: 768px) { /* Disable snap — Tilda's header shifts the snap anchor of slide-1 below the viewport edge, causing it to be skipped. Natural scroll is more reliable on touch. */ html { scroll-snap-type: none; } /* Keep slides as fixed-height viewports */ .slide { height: 100svh; scroll-snap-align: none; scroll-snap-stop: normal; } /* Hide keyboard-centric chrome — not useful on touch */ .pres-dots, .pres-counter, .pres-hint, .pres-back-trigger { display: none !important; } /* Scale the content wrapper to fit the viewport width. --pres-mob-scale is set by JS in _foot.t123.html. The wrapper renders at its desktop width (1060px) and is visually scaled down via CSS transform. */ .slide > [class*="-wrap"], .slide > [class*="-outer"] { width: 1060px !important; max-width: none !important; transform: scale(var(--pres-mob-scale, 1)); transform-origin: center center; } } /* ============================================================ PRINT — one slide per page, hide navigation chrome. Use landscape orientation, no margins for best results. ============================================================ */ @media print { html { scroll-snap-type: none; overflow: visible; } body { background: #0a0a1e; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .slide { height: 100vh; width: 100vw; page-break-after: always; break-after: page; page-break-inside: avoid; break-inside: avoid; scroll-snap-align: none; overflow: hidden; } .slide:last-child { page-break-after: auto; break-after: auto; } .pres-dots, .pres-counter, .pres-hint, .pres-back-trigger, .pres-mob-toast { display: none !important; } /* Reveal all step-animated elements — force final state */ .slide * { opacity: 1 !important; transform: none !important; visibility: visible !important; transition: none !important; animation: none !important; } } </style> <!-- ============================================================ OpenEverest Overview — Customer Presentation Slide 01: Title ============================================================ --> <style> #oe-slide-01 { background-color: #0a0a1e; background-image: radial-gradient(ellipse at 30% 70%, rgba(31, 35, 85, 0.7) 0%, transparent 55%), radial-gradient(ellipse at 70% 30%, rgba(20, 50, 45, 0.5) 0%, transparent 45%), radial-gradient(circle at 50% 50%, #131333 0%, #080818 100%); } .oe01-wrap { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; width: 100%; position: relative; z-index: 1; padding: 48px 72px 44px; box-sizing: border-box; text-align: center; } .oe01-logo { display: block; height: 80px; width: auto; opacity: 0.92; } .oe01-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } .oe01-title { font-size: 80px; font-weight: 800; color: #ffffff; line-height: 1.1; letter-spacing: -3px; margin: 0 0 28px; font-family: 'Inter', system-ui, sans-serif; } .oe01-title span { color: #4ec4a0; } .oe01-subtitle { font-size: 32px; font-weight: 300; color: rgba(220, 228, 240, 0.5); font-family: 'Inter', system-ui, sans-serif; margin: 0 0 48px; letter-spacing: -0.3px; max-width: 900px; line-height: 1.4; } .oe01-badges { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; } .oe01-badge { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 10px; font-size: 18px; font-weight: 600; font-family: 'Inter', system-ui, sans-serif; border: 1px solid rgba(78, 196, 160, 0.25); background: rgba(78, 196, 160, 0.06); color: rgba(200, 212, 228, 0.85); } .oe01-badge svg { flex-shrink: 0; width: 20px; height: 20px; } .oe01-footer { font-size: 17px; color: rgba(200, 212, 228, 0.35); font-family: 'Inter', system-ui, sans-serif; } @media (max-width: 768px) { .oe01-title { font-size: clamp(36px, 10vw, 64px); letter-spacing: -1px; } .oe01-subtitle { font-size: 22px; } .oe01-badges { flex-direction: column; align-items: center; } } </style> <div class="slide" id="oe-slide-01"> <div class="oe01-wrap"> <img class="oe01-logo" src="https://solanica.io/images/pages/tild3732-6631-4933-b335-343432366262__logo-horizontal-full.png" alt="OpenEverest" /> <div class="oe01-body"> <h1 class="oe01-title">Open-Source <span>DBaaS</span> on Kubernetes</h1> <p class="oe01-subtitle">Run production databases anywhere — no vendor lock-in, full Day 2 operations, one control plane.</p>https://solanica.io/presentations/about-solanica-2026/Mon, 01 Jan 0001 00:00:00 +0000https://solanica.io/presentations/about-solanica-2026/<!-- ============================================================ Solanica Overview — Customer Presentation _meta.t123.html ============================================================ --> <script> (function () { var META = { title: "Solanica & OpenEverest — Run Data Workloads Anywhere", slug: "about-solanica-2026", description: "Solanica and OpenEverest: freedom to run production data workloads on any infrastructure without vendor lock-in. Customer-facing overview presentation.", speaker: "Sergey Pronin", event: "Customer Presentation", eventUrl: "https://solanica.io", date: "2026-05-20", location: "Global", tags: ["solanica", "openeverest", "databases", "dbaas", "platform-engineering", "cloud-native"], status: "draft", coverImage: "https://solanica.io/og-default.png", pageUrl: "https://solanica.io/presentations/about-solanica-2026" }; window.__presMETA = META; var d = document; function tag(name, attrs) { var key = attrs.property || attrs.name; if (key) { var existing = d.querySelector( 'meta[property="' + key + '"], meta[name="' + key + '"]' ); if (existing) existing.parentNode.removeChild(existing); } var el = d.createElement(name); Object.keys(attrs).forEach(function (k) { el.setAttribute(k, attrs[k]); }); return el; } var head = d.head || d.getElementsByTagName('head')[0]; var titleEl = d.querySelector('title'); if (titleEl) { titleEl.textContent = META.title; } else { var t = d.createElement('title'); t.textContent = META.title; head.appendChild(t); } head.appendChild(tag('meta', { name: 'description', content: META.description })); head.appendChild(tag('meta', { name: 'author', content: META.speaker })); head.appendChild(tag('meta', { name: 'keywords', content: META.tags.join(', ') })); head.appendChild(tag('link', { rel: 'canonical', href: META.pageUrl })); head.appendChild(tag('meta', { property: 'og:type', content: 'website' })); head.appendChild(tag('meta', { property: 'og:title', content: META.title })); head.appendChild(tag('meta', { property: 'og:description', content: META.description })); head.appendChild(tag('meta', { property: 'og:image', content: META.coverImage })); head.appendChild(tag('meta', { property: 'og:url', content: META.pageUrl })); head.appendChild(tag('meta', { property: 'og:site_name', content: 'Solanica' })); head.appendChild(tag('meta', { name: 'twitter:card', content: 'summary_large_image' })); head.appendChild(tag('meta', { name: 'twitter:site', content: '@solanicaio' })); head.appendChild(tag('meta', { name: 'twitter:title', content: META.title })); head.appendChild(tag('meta', { name: 'twitter:description', content: META.description })); head.appendChild(tag('meta', { name: 'twitter:image', content: META.coverImage })); })(); </script> <!-- ============================================================ Solanica Presentation Engine — _head.t123.html ADD THIS AS THE FIRST BLOCK on every Tilda presentation page. It applies scroll-snap to the page and styles shared by all slides. ============================================================ --> <style> /* ---- Page-level scroll snap ---- */ html { scroll-snap-type: y mandatory; scroll-behavior: smooth; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar { display: none; } body { margin: 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: #0f0f29; } /* ---- Slide base ---- */ .slide { height: 100vh; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } /* ---- Navigation dots (right edge) ---- */ .pres-dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 9999; list-style: none; margin: 0; padding: 0; } .pres-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); cursor: pointer; border: none; padding: 0; outline: none; transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .pres-dot:hover { background: rgba(255, 255, 255, 0.5); } .pres-dot.active { background: #7790de; box-shadow: 0 0 8px rgba(119, 144, 222, 0.6); transform: scale(1.5); } /* ---- Slide counter (bottom-right) ---- */ .pres-counter { position: fixed; bottom: 20px; right: 24px; color: rgba(255, 255, 255, 0.28); font-size: 12px; font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0.1em; z-index: 9999; pointer-events: none; user-select: none; } /* ---- Key hint (bottom-centre, fades out) ---- */ .pres-hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.22); font-size: 11px; font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; z-index: 9999; pointer-events: none; user-select: none; white-space: nowrap; transition: opacity 1.4s ease; } .pres-hint.hidden { opacity: 0; } /* ---- Left-edge back trigger ---- */ .pres-back-trigger { position: fixed; left: 0; top: 0; width: 48px; height: 100vh; z-index: 9998; cursor: pointer; } .pres-back-trigger:hover .pres-back-label { opacity: 1; transform: translateY(-50%) translateX(0); } .pres-back-label { position: absolute; top: 50%; left: 16px; transform: translateY(-50%) translateX(-8px); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; display: flex; align-items: center; gap: 10px; white-space: nowrap; color: rgba(255, 255, 255, 0.75); font-size: 13px; font-family: 'Inter', system-ui, sans-serif; font-weight: 500; letter-spacing: 0.03em; text-decoration: none; padding: 10px 16px 10px 12px; background: rgba(15, 15, 41, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: auto; } .pres-back-label:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.25); } .pres-back-arrow { font-size: 16px; line-height: 1; flex-shrink: 0; } /* ---- Mobile: desktop hint toast ---- */ .pres-mob-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 99999; background: rgba(15, 15, 41, 0.92); border: 1px solid rgba(119, 144, 222, 0.3); border-radius: 10px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 10px 10px 10px 16px; display: flex; align-items: center; gap: 12px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; color: rgba(200, 212, 228, 0.8); white-space: nowrap; opacity: 1; transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: auto; } .pres-mob-toast.hidden { opacity: 0; transform: translateX(-50%) translateY(-8px); pointer-events: none; } .pres-mob-toast-close { width: 22px; height: 22px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.06); border-radius: 50%; color: rgba(200, 212, 228, 0.55); font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; transition: background 0.2s, color 0.2s; } .pres-mob-toast-close:hover { background: rgba(255, 255, 255, 0.12); color: rgba(200, 212, 228, 0.9); } /* ============================================================ MOBILE — scale-to-fit: preserve desktop layout, shrink it to fit the phone screen. Users pinch-to-zoom for details. ============================================================ */ @media (max-width: 768px) { /* Disable snap — Tilda's header shifts the snap anchor of slide-1 below the viewport edge, causing it to be skipped. Natural scroll is more reliable on touch. */ html { scroll-snap-type: none; } /* Keep slides as fixed-height viewports */ .slide { height: 100svh; scroll-snap-align: none; scroll-snap-stop: normal; } /* Hide keyboard-centric chrome — not useful on touch */ .pres-dots, .pres-counter, .pres-hint, .pres-back-trigger { display: none !important; } /* Scale the content wrapper to fit the viewport width. --pres-mob-scale is set by JS in _foot.t123.html. The wrapper renders at its desktop width (1060px) and is visually scaled down via CSS transform. */ .slide > [class*="-wrap"], .slide > [class*="-outer"] { width: 1060px !important; max-width: none !important; transform: scale(var(--pres-mob-scale, 1)); transform-origin: center center; } } /* ============================================================ PRINT — one slide per page, hide navigation chrome. Use landscape orientation, no margins for best results. ============================================================ */ @media print { html { scroll-snap-type: none; overflow: visible; } body { background: #0a0a1e; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .slide { height: 100vh; width: 100vw; page-break-after: always; break-after: page; page-break-inside: avoid; break-inside: avoid; scroll-snap-align: none; overflow: hidden; } .slide:last-child { page-break-after: auto; break-after: auto; } .pres-dots, .pres-counter, .pres-hint, .pres-back-trigger, .pres-mob-toast { display: none !important; } /* Reveal all step-animated elements — force final state */ .slide * { opacity: 1 !important; transform: none !important; visibility: visible !important; transition: none !important; animation: none !important; } } </style> <!-- ============================================================ Solanica Overview — Customer Presentation Slide 01: Title & Core Value Proposition ============================================================ --> <style> #sol-slide-01 { background-color: #0a0a1e; background-image: radial-gradient(ellipse at 20% 80%, rgba(31, 35, 85, 0.75) 0%, transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(31, 35, 85, 0.55) 0%, transparent 50%), radial-gradient(circle at 50% 50%, #131333 0%, #080818 100%); } .sol01-wrap { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; width: 100%; position: relative; z-index: 1; padding: 48px 72px 44px; box-sizing: border-box; text-align: center; } .sol01-logo { display: block; height: 56px; width: auto; opacity: 0.92; } .sol01-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } .sol01-eyebrow { font-size: 18px; letter-spacing: 0.22em; text-transform: uppercase; color: #7790de; font-weight: 600; font-family: 'Inter', system-ui, sans-serif; margin: 0 0 32px; } .sol01-title { font-size: 96px; font-weight: 800; color: #ffffff; line-height: 1.06; letter-spacing: -3px; margin: 0 0 32px; font-family: 'Inter', system-ui, sans-serif; } .sol01-title span { color: #7790de; } .sol01-subtitle { font-size: 30px; font-weight: 300; color: rgba(220, 228, 240, 0.55); font-family: 'Inter', system-ui, sans-serif; margin: 0 0 48px; letter-spacing: -0.3px; max-width: 1000px; line-height: 1.45; } .sol01-pillars { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; } .sol01-pill { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; border-radius: 10px; font-size: 20px; font-weight: 600; font-family: 'Inter', system-ui, sans-serif; border: 1px solid rgba(119, 144, 222, 0.25); background: rgba(119, 144, 222, 0.06); color: rgba(200, 212, 228, 0.85); } .sol01-pill svg { flex-shrink: 0; width: 22px; height: 22px; } .sol01-footer { font-size: 18px; color: rgba(200, 212, 228, 0.4); font-family: 'Inter', system-ui, sans-serif; } @media (max-width: 768px) { .sol01-title { font-size: clamp(42px, 12vw, 72px); letter-spacing: -1px; } .sol01-subtitle { font-size: 22px; } .sol01-pillars { flex-direction: column; align-items: center; } } </style> <div class="slide" id="sol-slide-01"> <div class="sol01-wrap"> <img class="sol01-logo" src="https://solanica.io/images/pages/tild6230-3737-4562-b261-653038343838__white-horizontal.svg" alt="Solanica" /> <div class="sol01-body"> <h1 class="sol01-title">Run Data Workloads <span>Anywhere.</span></h1> <p class="sol01-subtitle">No vendor lock-in. No infrastructure constraints. Full control over your data, on your terms — any cloud, on-prem, edge, or hybrid.</p>