diff --git a/index.html b/index.html index db9661c3..b0796fa8 100644 --- a/index.html +++ b/index.html @@ -1170,6 +1170,158 @@ .btn-primary, .btn-secondary { width: 100%; justify-content: center; } .showcase-gallery { grid-template-columns: 1fr; } } + + /* ===== HOSTING SECTION ===== */ + .hosting-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + margin-top: 40px; + } + .hosting-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 28px 24px; + display: flex; + flex-direction: column; + text-decoration: none; + color: inherit; + transition: border-color 0.2s, background 0.2s, transform 0.15s; + } + .hosting-card:hover { + border-color: var(--accent); + background: var(--bg-card-hover); + transform: translateY(-2px); + } + .hosting-card.featured { + border-color: var(--accent); + position: relative; + overflow: hidden; + } + .hosting-card.featured::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 2px; + background: linear-gradient(90deg, var(--accent), var(--accent-dim)); + } + .hosting-card.featured:hover { + background: var(--bg-card-hover); + transform: translateY(-2px); + } + .hosting-badge { + display: inline-flex; + align-items: center; + gap: 5px; + background: rgba(240, 165, 0, 0.12); + color: var(--accent); + border: 1px solid rgba(240, 165, 0, 0.25); + border-radius: 20px; + padding: 3px 10px; + font-size: 0.71rem; + font-weight: 600; + letter-spacing: 0.03em; + text-transform: uppercase; + margin-bottom: 14px; + width: fit-content; + } + .hosting-card-icon { + font-size: 1.75rem; + margin-bottom: 10px; + line-height: 1; + } + .hosting-card-title { + font-size: 1.1rem; + font-weight: 700; + color: var(--text-primary); + margin: 0 0 4px 0; + } + .hosting-card-price { + font-size: 0.9rem; + color: var(--accent); + font-weight: 600; + margin-bottom: 12px; + } + .hosting-card-desc { + font-size: 0.87rem; + color: var(--text-secondary); + line-height: 1.6; + margin-bottom: 16px; + } + .hosting-card-features { + list-style: none; + padding: 0; + margin: 0 0 20px 0; + display: flex; + flex-direction: column; + gap: 7px; + flex: 1; + } + .hosting-card-features li { + font-size: 0.82rem; + color: var(--text-secondary); + display: flex; + align-items: flex-start; + gap: 7px; + line-height: 1.45; + } + .hosting-card-features li::before { + content: '✓'; + color: var(--green); + font-weight: 700; + flex-shrink: 0; + margin-top: 1px; + } + .hosting-card-cta { + display: inline-flex; + align-items: center; + gap: 5px; + font-size: 0.83rem; + font-weight: 600; + color: var(--accent); + text-decoration: none; + margin-top: auto; + } + .hosting-card-cta:hover { text-decoration: underline; } + .hosting-specs { + margin-top: 32px; + padding: 18px 24px; + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + display: flex; + align-items: flex-start; + gap: 14px; + } + .hosting-specs-icon { + font-size: 1.2rem; + flex-shrink: 0; + margin-top: 2px; + } + .hosting-specs-body { flex: 1; } + .hosting-specs-title { + font-size: 0.84rem; + font-weight: 700; + color: var(--text-primary); + margin-bottom: 8px; + } + .hosting-specs-list { + display: flex; + flex-wrap: wrap; + gap: 5px 28px; + list-style: none; + padding: 0; + margin: 0; + } + .hosting-specs-list li { + font-size: 0.81rem; + color: var(--text-secondary); + } + .hosting-specs-list li strong { color: var(--text-primary); } + @media (max-width: 900px) { + .hosting-grid { grid-template-columns: 1fr; } + }
@@ -1188,6 +1340,7 @@Where to run it
+Hermes is self-hosted by design — it runs on hardware you control. Here are the most practical ways to get it running, from zero-setup managed hosting to a bare VPS.
+ +Managed Hermes hosting — live in 60 seconds with no VPS configuration. The only provider purpose-built for Hermes, with full terminal access, visual file browser, and live browser view on every plan.
+Full control at roughly the same cost. Hetzner CX22 is the recommended pick: 4 GB RAM, 2 vCPU, 40 GB SSD, 20 TB bandwidth. Add Coolify for one-click deploys from GitHub with no manual Docker work.
+Git-push deploys with no server management. Good if you want to skip infrastructure entirely. Railway, Render, and Fly.io all support Node.js and Python with automatic SSL and domains.
+