Files
flowercms_marketing/index.html
T
kfj001 8ec1678210 style(theming): swap purple/dark theme for 'On Air' light vermillion+cyan
Move off the purple/indigo dark theme to a bright, broadcast-appropriate
light theme: warm off-white base (#fff8f5), vermillion primary (#f5333f, an
'ON AIR' nod) with a sky-cyan (#0ea5e9) secondary; red->cyan hero/CTA gradient.

- Re-point :root token family (bg/surface/card/border/text/muted/accent/
  accent-light/accent-dark/cyan/success/gradient).
- Grep-hunt the hardcoded literals the tokens bypass: nav blur bg, hero radial
  glow, badge/icon tints, CTA/feature hover glows, pricing glow, success-mark
  tiles, card/image drop-shadows, hairline borders, compare-table tints.
- Fix one 3->4 space indent regression in .vs-col.live365.
- PRESERVE white-label demo swatches (KMountain navy/orange/cream, Fire FM
  black/volt/orange) and embedded product screenshots as product samples.
- PRESERVE semantic comparison marks (#ef4444 no / #f59e0b warn).

Verified: computed :root tokens resolve to new values at runtime; full-page
render clean with no stray purple/dark chrome and no layout breakage.
2026-08-21 05:54:13 +00:00

1177 lines
39 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlowerCMS — White-Label CMS for Broadcasters</title>
<style>
:root {
/* Theme: "On Air" — bright, high-energy broadcast. Vermillion + sky-cyan. */
--bg: #fff8f5; /* warm off-white, not stark */
--surface: #fff2ea; /* faint coral wash for section bands */
--card: #ffffff;
--border: #f0e2d9;
--text: #1a1410; /* warm near-black */
--muted: #6b6259;
--accent: #f5333f; /* "on air" vermillion */
--accent-light: #ff6b6b;
--accent-dark: #c81c2c;
--cyan: #0ea5e9; /* sky-cyan secondary */
--success: #16a34a; /* "yes/online" green */
--gradient: linear-gradient(135deg, #ff5470 0%, #f5333f 40%, #0ea5e9 100%);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
max-width: 100vw;
}
img { max-width: 100%; height: auto; }
/* NAV */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(255,248,245,0.85);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
padding: 16px 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .logo {
font-size: 1.3rem;
font-weight: 700;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
nav .nav-links { display: flex; gap: 32px; align-items: center; }
nav .nav-links a {
color: var(--muted);
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s;
}
nav .nav-links a:hover { color: var(--text); }
nav .cta {
background: var(--gradient);
color: #fff;
border: none;
padding: 8px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
nav .cta:hover {
transform: translateY(-1px);
box-shadow: 0 4px 20px rgba(245,51,63,0.4);
}
/* HERO */
.hero {
padding: 160px 40px 100px;
text-align: center;
max-width: 900px;
margin: 0 auto;
position: relative;
}
.hero::before {
content: '';
position: absolute;
top: -200px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(245,51,63,0.15) 0%, transparent 70%);
pointer-events: none;
}
.hero .badge {
display: inline-block;
background: rgba(245,51,63,0.1);
border: 1px solid rgba(245,51,63,0.3);
color: var(--accent-light);
padding: 6px 16px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.5px;
margin-bottom: 24px;
}
.hero h1 {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -1px;
margin-bottom: 20px;
}
.hero h1 span {
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p {
font-size: 1.2rem;
color: var(--muted);
max-width: 600px;
margin: 0 auto 40px;
line-height: 1.7;
}
.hero .hero-cta {
display: inline-flex;
gap: 16px;
}
.hero .btn-primary {
background: var(--gradient);
color: #fff;
border: none;
padding: 14px 32px;
border-radius: 10px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.hero .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(245,51,63,0.4);
}
.hero .btn-secondary {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
padding: 14px 32px;
border-radius: 10px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: border-color 0.2s;
}
.hero .btn-secondary:hover { border-color: var(--accent); }
/* HERO IMAGE */
.hero-image {
max-width: 1100px;
margin: 60px auto 0;
padding: 0 40px;
}
.hero-image img {
width: 100%;
border-radius: 16px;
border: 1px solid var(--border);
box-shadow: 0 20px 50px rgba(46,30,20,0.16);
}
/* FEATURES */
.features {
padding: 120px 40px;
max-width: 1200px;
margin: 0 auto;
}
.features .section-label {
text-align: center;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-light);
margin-bottom: 12px;
}
.features h2 {
text-align: center;
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: -0.5px;
}
.features .subtitle {
text-align: center;
color: var(--muted);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto 80px;
}
/* FEATURE ROW */
.feature-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
margin-bottom: 120px;
}
.feature-row.reverse { direction: rtl; }
.feature-row.reverse > * { direction: ltr; }
.feature-text h3 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: -0.3px;
}
.feature-text p {
color: var(--muted);
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 24px;
}
.feature-text ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.feature-text ul li {
display: flex;
align-items: center;
gap: 10px;
color: var(--muted);
font-size: 0.95rem;
}
.feature-text ul li::before {
content: '✓';
color: var(--success);
font-weight: 700;
font-size: 0.85rem;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(22,163,74,0.12);
border-radius: 50%;
flex-shrink: 0;
}
.feature-image {
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border);
box-shadow: 0 10px 40px rgba(46,30,20,0.10);
}
.feature-image img {
width: 100%;
display: block;
}
/* ALL-IN-ONE */
.all-in-one {
padding: 100px 40px;
background: var(--surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.all-in-one .inner {
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
.all-in-one h2 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 16px;
}
.all-in-one .subtitle {
color: var(--muted);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto 60px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.grid-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 32px 28px;
text-align: left;
transition: border-color 0.2s, transform 0.2s;
}
.grid-card:hover {
border-color: var(--accent);
transform: translateY(-3px);
}
.grid-card .icon {
width: 44px;
height: 44px;
background: rgba(245,51,63,0.1);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
margin-bottom: 20px;
}
.grid-card h4 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 8px;
}
.grid-card p {
color: var(--muted);
font-size: 0.9rem;
line-height: 1.6;
}
/* CTA */
.cta-section {
padding: 120px 40px;
text-align: center;
max-width: 700px;
margin: 0 auto;
}
.cta-section h2 {
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 16px;
}
.cta-section p {
color: var(--muted);
font-size: 1.1rem;
margin-bottom: 40px;
}
.cta-section .btn-primary {
background: var(--gradient);
color: #fff;
border: none;
padding: 16px 40px;
border-radius: 12px;
font-weight: 600;
font-size: 1.1rem;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.cta-section .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(245,51,63,0.4);
}
/* FOOTER */
footer {
padding: 40px;
text-align: center;
color: var(--muted);
font-size: 0.82rem;
border-top: 1px solid var(--border);
}
/* WHITE-LABEL SHOWCASE */
.showcase {
padding: 120px 40px;
max-width: 1200px;
margin: 0 auto;
}
.showcase .section-label {
text-align: center;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-light);
margin-bottom: 12px;
}
.showcase h2 {
text-align: center;
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: -0.5px;
}
.showcase .subtitle {
text-align: center;
color: var(--muted);
font-size: 1.1rem;
max-width: 640px;
margin: 0 auto 60px;
line-height: 1.7;
}
.showcase-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-bottom: 60px;
}
.showcase-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
transition: border-color 0.2s, transform 0.2s;
}
.showcase-card:hover {
border-color: var(--accent);
transform: translateY(-3px);
}
.showcase-card img {
width: 100%;
display: block;
}
.showcase-card-body {
padding: 24px 28px 28px;
}
.showcase-card-body h3 {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 6px;
}
.showcase-card-body .tagline {
font-size: 0.85rem;
color: var(--muted);
font-style: italic;
margin-bottom: 16px;
}
.showcase-card-body .palette {
display: flex;
gap: 6px;
margin-bottom: 16px;
}
.showcase-card-body .palette .swatch {
width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid rgba(0,0,0,0.08);
}
.showcase-card-body p {
color: var(--muted);
font-size: 0.92rem;
line-height: 1.65;
}
.showcase-blurb {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 40px 48px;
text-align: center;
}
.showcase-blurb p {
color: var(--muted);
font-size: 1.05rem;
line-height: 1.8;
max-width: 700px;
margin: 0 auto;
}
.showcase-blurb strong {
color: var(--text);
}
/* PRICING */
.pricing {
padding: 120px 40px;
background: var(--surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.pricing .inner {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.pricing .section-label {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-light);
margin-bottom: 12px;
}
.pricing h2 {
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: -0.5px;
}
.pricing .subtitle {
color: var(--muted);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto 60px;
}
.pricing-card {
background: var(--card);
border: 2px solid var(--accent);
border-radius: 16px;
padding: 48px 40px;
margin-bottom: 60px;
box-shadow: 0 0 60px rgba(245,51,63,0.15);
}
.pricing-header {
margin-bottom: 36px;
}
.pricing-amount {
font-size: 3.5rem;
font-weight: 800;
letter-spacing: -2px;
line-height: 1;
margin-bottom: 8px;
}
.pricing-amount .currency {
font-size: 1.8rem;
vertical-align: super;
font-weight: 600;
}
.pricing-amount .period {
font-size: 1.2rem;
font-weight: 500;
color: var(--muted);
letter-spacing: 0;
}
.pricing-desc {
color: var(--muted);
font-size: 1rem;
}
.pricing-features {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 32px;
text-align: left;
margin-bottom: 40px;
}
.pricing-features li {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
color: var(--text);
}
.pricing-features .check {
color: var(--success);
font-weight: 700;
font-size: 0.85rem;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(22,163,74,0.12);
border-radius: 50%;
flex-shrink: 0;
}
.pricing-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.pricing-cta .btn-primary {
background: var(--gradient);
color: #fff;
border: none;
padding: 16px 40px;
border-radius: 12px;
font-weight: 600;
font-size: 1.1rem;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.pricing-cta .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(245,51,63,0.4);
}
.pricing-cta .btn-contact {
color: var(--muted);
font-size: 0.9rem;
text-decoration: none;
transition: color 0.2s;
}
.pricing-cta .btn-contact:hover {
color: var(--accent-light);
}
.pricing-note {
color: var(--muted);
font-size: 0.82rem;
font-style: italic;
}
/* VS COMPARISON TABLE */
.vs-section {
text-align: left;
}
.vs-section h3 {
text-align: center;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 8px;
}
.vs-subtitle {
text-align: center;
color: var(--muted);
font-size: 0.95rem;
margin-bottom: 32px;
}
.vs-table {
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
margin-bottom: 24px;
}
.vs-row {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
border-bottom: 1px solid var(--border);
}
.vs-row:last-child { border-bottom: none; }
.vs-row.header {
background: var(--card);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.vs-feature, .vs-col {
padding: 14px 20px;
font-size: 0.92rem;
display: flex;
align-items: center;
gap: 8px;
}
.vs-feature {
color: var(--muted);
font-weight: 500;
border-right: 1px solid var(--border);
}
.vs-col {
border-right: 1px solid var(--border);
}
.vs-col:last-child { border-right: none; }
.vs-col.live365 {
background: rgba(0,0,0,0.02);
}
.vs-col.flowercms {
background: rgba(245,51,63,0.05);
font-weight: 600;
}
.vs-col.highlight .yes {
color: var(--success);
font-weight: 700;
}
.vs-col .no {
color: #ef4444;
font-weight: 700;
}
.vs-col .warn {
color: #f59e0b;
font-weight: 700;
}
.vs-footer {
text-align: center;
color: var(--muted);
font-size: 0.88rem;
line-height: 1.7;
max-width: 700px;
margin: 0 auto;
}
/* RESPONSIVE */
@media (max-width: 800px) {
.hero h1 { font-size: 2.2rem; }
.feature-row { grid-template-columns: 1fr; gap: 40px; }
.feature-row.reverse { direction: ltr; }
.grid-3 { grid-template-columns: 1fr; }
.showcase-grid { grid-template-columns: 1fr; }
.showcase-blurb { padding: 28px 24px; }
nav { padding: 14px 20px; }
nav .nav-links { display: none; }
.pricing-card { padding: 32px 24px; }
.pricing-features { grid-template-columns: 1fr; }
.pricing-amount { font-size: 2.8rem; }
.vs-row { grid-template-columns: 1fr; }
.vs-feature { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.vs-col { border-right: none; padding: 6px 20px; }
.vs-row.header { display: none; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav>
<div class="logo">FlowerCMS</div>
<div class="nav-links">
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#schedule">Schedule</a>
<a href="#branding">Branding</a>
<a href="#events">Events</a>
<a href="#contact">Contact</a>
<a href="#player">Player</a>
<a href="#studio">Studio</a>
<a href="#streaming">Streaming</a>
<a href="mailto:sales@flowercms.cloud" class="cta">Contact Sales</a>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<div class="badge">All-in-One Broadcast Platform</div>
<h1>Your station, your brand,<br><span>one powerful CMS.</span></h1>
<p>White-label content management for small radio and internet broadcasters. Professional websites, custom branding, and native mobile apps — all from one dashboard.</p>
<div class="hero-cta">
<a href="mailto:sales@flowercms.cloud" class="btn-primary">Contact Sales</a>
<button class="btn-secondary">See Demo</button>
</div>
</section>
<div class="hero-image">
<img src="homepage.jpg" alt="FlowerCMS homepage — KMountain Flower Radio with mountain hero illustration, live stream player, sponsor carousel, and app download badges">
</div>
<!-- WHITE-LABEL SHOWCASE -->
<section class="showcase" id="showcase">
<div class="section-label">White-Label</div>
<h2>One platform. Unlimited brands.</h2>
<p class="subtitle">FlowerCMS is the same platform powering completely different brands — and it can create an arbitrary number of them. Each gets its own colors, imagery, copy, and identity. Your listeners never know they're on the same engine.</p>
<div class="showcase-grid">
<!-- KMTN -->
<div class="showcase-card">
<img src="kmtn_homepage.jpg" alt="KMountain Flower Radio — warm cream and navy blue community radio station homepage">
<div class="showcase-card-body">
<h3>KMountain Flower Radio</h3>
<div class="tagline">Community Radio — Est. 1987</div>
<div class="palette">
<div class="swatch" style="background:#1a3a5c" title="Navy #1a3a5c"></div>
<div class="swatch" style="background:#2a5a8c" title="Blue #2a5a8c"></div>
<div class="swatch" style="background:#e87a2e" title="Orange #e87a2e"></div>
<div class="swatch" style="background:#faf6f0" title="Cream #faf6f0"></div>
<div class="swatch" style="background:#3a3632" title="Charcoal #3a3632"></div>
</div>
<p>Warm, welcoming palette of deep navy and burnt orange. Mountain landscape hero with pine silhouettes. A nonprofit community station that feels like home — heritage-forward, approachable, and rooted in place.</p>
</div>
</div>
<!-- StayLit / Fire FM -->
<div class="showcase-card">
<img src="staylit_homepage.jpg" alt="Fire FM — bold yellow and black urban independent radio station homepage">
<div class="showcase-card-body">
<h3>Fire FM</h3>
<div class="tagline">Hottest Independent Station</div>
<div class="palette">
<div class="swatch" style="background:#0a0a0a" title="Black #0a0a0a"></div>
<div class="swatch" style="background:#c8ff00" title="Volt yellow #c8ff00"></div>
<div class="swatch" style="background:#ff6a00" title="Flame orange #ff6a00"></div>
<div class="swatch" style="background:#1a1a1a" title="Dark gray #1a1a1a"></div>
<div class="swatch" style="background:#ffffff" title="White #ffffff"></div>
</div>
<p>High-contrast black and volt-yellow with a palm-tree skyline. Bold, punchy, and unapologetically urban. An independent station that projects energy, confidence, and a "turn it up" attitude.</p>
</div>
</div>
</div>
<div class="showcase-blurb">
<p><strong>Colors and imagery are your brand's first handshake.</strong> KMountain Flower Radio uses earthy blues, warm oranges, and mountain scenery to signal trust, tradition, and community. Fire FM goes full neon-on-black with a city skyline to shout energy, independence, and nightlife. These are just two examples — the platform can launch as many independent brands as you need, each with its own look, feel, and voice. <strong>Your colors, your photos, your voice — FlowerCMS adapts to you, at any scale.</strong></p>
</div>
</section>
<!-- FEATURES -->
<section class="features" id="features">
<div class="section-label">Features</div>
<h2>Everything you need. Nothing you don't.</h2>
<p class="subtitle">Built specifically for broadcasters who need a professional presence without the complexity.</p>
<!-- SCHEDULE -->
<div class="feature-row" id="schedule">
<div class="feature-text">
<h3>Beautiful Program Schedule</h3>
<p>Auto-generated program listings with hosts, genres, and time slots. Show cards feature custom artwork, descriptions, and one-click play. Your listeners always know what's on — and what's coming next.</p>
<ul>
<li>Day-by-day program cards with artwork</li>
<li>Genre tags & host info</li>
<li>Live now indicator</li>
<li>Color-coded time-slot indicators</li>
<li>Recurring show support</li>
</ul>
</div>
<div class="feature-image">
<img src="schedule.jpg" alt="Program schedule page with show cards for Morning Mountain Mist, Community Roundup, and Bluegrass Trails">
</div>
</div>
<!-- ABOUT / BRANDING -->
<div class="feature-row reverse" id="branding">
<div class="feature-text">
<h3>Rich Station Pages</h3>
<p>Every station gets a full About page with core values, interactive history timeline, and team profiles. Showcase your mission, milestones, and the people behind the mic — all editable from the dashboard.</p>
<ul>
<li>Core values cards</li>
<li>Interactive history timeline</li>
<li>Team member profiles with photos</li>
<li>Custom station artwork & logo</li>
<li>Professional typography</li>
</ul>
</div>
<div class="feature-image">
<img src="about.jpg" alt="About page with station values, history timeline from 1987 to 2008, and team profiles">
</div>
</div>
<!-- EVENTS -->
<div class="feature-row" id="events">
<div class="feature-text">
<h3>Event Management</h3>
<p>Promote live events, fundraisers, and open houses with dates, locations, and descriptions. Each event card includes a "Learn More" link and integrates with your station's branding automatically.</p>
<ul>
<li>Event cards with dates & venues</li>
<li>Rich descriptions & learn-more links</li>
<li>Location & registration support</li>
<li>Auto-syncs with station branding</li>
<li>Community open to all events</li>
</ul>
</div>
<div class="feature-image">
<img src="events.jpg" alt="Events page with Summer Sounds Festival, Annual Fundraiser Gala, Volunteer Open House, and Harvest Moon Broadcast">
</div>
</div>
<!-- CONTACT -->
<div class="feature-row reverse" id="contact">
<div class="feature-text">
<h3>Contact & Engagement</h3>
<p>Built-in contact forms with subject categorization, studio location cards, phone, email, and broadcast frequencies. Everything your listeners need to get in touch — no extra plugins required.</p>
<ul>
<li>Subject-categorized contact form</li>
<li>Studio location & hours</li>
<li>Phone, email & frequency display</li>
<li>Social media integration</li>
<li>Responsive mobile-first layout</li>
</ul>
</div>
<div class="feature-image">
<img src="contact.jpg" alt="Contact page with message form, studio location, phone, email, and broadcast frequencies">
</div>
</div>
<!-- MEDIA PLAYER -->
<div class="feature-row" id="player">
<div class="feature-text">
<h3>Always-On Media Player</h3>
<p>Your live stream lives in the navigation bar — present on every page, never intrusive. Listeners can start listening the moment they land and keep the stream running as they browse your schedule, events, or contact info. No pop-ups, no overlays, no interruptions.</p>
<ul>
<li>Embedded in the navbar — visible on every page</li>
<li>Play/stop toggle with pulsing LIVE indicator</li>
<li>Real-time track metadata from Airtime</li>
<li>Scrolling marquee on mobile, clean ellipsis on desktop</li>
<li>48×48 touch target — thumb-friendly</li>
<li>Stream persists across page navigation</li>
</ul>
</div>
<div class="feature-image">
<img src="navbar.jpg" alt="Top navigation bar showing the KMTN logo, Live Stream media player button, and menu links — always visible on every page">
</div>
</div>
<!-- COLOR THEME SELECTOR -->
<div class="feature-row reverse" id="theme">
<div class="feature-text">
<h3>Smart Color Picker</h3>
<p>Pick your brand colors and let our harmony engine do the rest. Complementary, analogous, triadic — we generate a full, accessible palette automatically. Changes preview in real time and carry through to both your website and mobile app.</p>
<ul>
<li>Color harmony mode selection</li>
<li>Auto-generated light, dark & muted variants</li>
<li>Real-time scheme preview</li>
<li>One-click auto-fix for contrast issues</li>
<li>Propagates to mobile app theme</li>
</ul>
</div>
<div class="feature-image">
<img src="admin_theme.jpg" alt="Admin theme page showing color swatches grid with hex codes, harmony settings, auto-generate variants toggle, and save buttons">
</div>
</div>
<!-- MOBILE BUILD SERVER -->
<div class="feature-row" id="builds">
<div class="feature-text">
<h3>Built-In Mobile Build Server</h3>
<p>FlowerCMS comes with a build server — no third-party CI needed. Configure your app metadata, upload signing certificates, and kick off native Android & iOS builds from the dashboard. Track build history and download artifacts for app store deployment.</p>
<ul>
<li>Android & iOS build targets</li>
<li>Keystore & provisioning profile upload</li>
<li>Version name & build number control</li>
<li>Build history with status tracking</li>
<li>Theme JSON auto-export for app sync</li>
</ul>
</div>
<div class="feature-image">
<img src="admin_mobile_builds.jpg" alt="Admin mobile builds page showing derived defaults, theme export status, build request form with platform selection and file uploads, and build history table">
</div>
</div>
<!-- WHITE-LABEL MOBILE APP -->
<div class="feature-row reverse" id="mobile-app">
<div class="feature-text">
<h3>White-Label Mobile App</h3>
<p>Your station's own branded app on iOS and Android — no generic player, no shared identity. Your logo, your colors, your schedule, your live stream. Listeners get Now Playing metadata, upcoming shows, AirPlay &amp; casting, and a native experience that carries your brand from the radio into their pocket.</p>
<ul>
<li>Station-branded home screen with your identity</li>
<li>Live Studio Feed — Now Playing &amp; Coming Next</li>
<li>On-Air schedule with upcoming shows</li>
<li>Playback controls — play, stop, AirPlay, casting</li>
<li>Auto-synced from your CMS theme &amp; content</li>
</ul>
</div>
<div class="feature-image">
<img src="mobile_1.jpg" alt="Fire FM white-label mobile app on iPhone showing branded header, Live Studio Feed with Now Playing and Coming Next cards, on-air schedule, and bottom playback controls with AirPlay">
</div>
</div>
<!-- SPONSOR CAROUSEL -->
<div class="feature-row" id="carousel">
<div class="feature-text">
<h3>Sponsor Carousel</h3>
<p>A dedicated, dignified space for your underwriters, advertisers, and community supporters. Logos scroll slowly across a clean ribbon of featured partners — and when clicked, each sponsor gets a full-screen takeover modal with their branding, description, and a direct link to their website. Respectful visibility that converts.</p>
<ul>
<li>Slow-scrolling animated logo ribbon</li>
<li>Click-to-expand sponsor takeover modal</li>
<li>Full branding — logo, bio & website link</li>
<li>Admin-managed from the dashboard</li>
<li>Works for nonprofits, local businesses & ads</li>
</ul>
</div>
<div class="feature-image">
<img src="carousel.jpg" alt="Sponsor carousel showing a slow-scrolling ribbon of underwriter logos including Summit Valley Real Estate, Mountain View, Highland, and Pine Street Partners">
</div>
</div>
<div class="feature-row" id="carousel-modal">
<div class="feature-text">
<h3>Sponsor Takeover Modal</h3>
<p>When a listener clicks any sponsor in the ribbon, a polished modal takes over — spotlighting that partner with their logo, a short description, and a prominent "Visit Website" button. It's a premium ad experience that feels native to your station, not like an interruption.</p>
<ul>
<li>Darkened backdrop focuses attention</li>
<li>Sponsor logo, name & elevator pitch</li>
<li>One-tap "Visit Website" call to action</li>
<li>Easy close — no friction for the listener</li>
</ul>
</div>
<div class="feature-image">
<img src="carousel_2.jpg" alt="Sponsor takeover modal showing Summit Valley Farm with logo, description, and Visit Website button over a dimmed station homepage">
</div>
</div>
<!-- LIBRETIME STUDIO -->
<div class="feature-row reverse" id="studio">
<div class="feature-text">
<h3>LibreTime Studio — Included</h3>
<p>Every FlowerCMS account comes with a fully managed, hosted instance of LibreTime — the professional open-source audio studio management platform. Schedule shows, manage playlists, track playouts, and run your station from one powerful web interface. No separate hosting, no setup hassle — it's bundled and managed for free as part of your service.</p>
<ul>
<li>Hosted LibreTime instance — zero setup</li>
<li>Professional playlist & show scheduling</li>
<li>Real-time playout queue management</li>
<li>Track metadata & duration tracking</li>
<li>Multi-user access for hosts & admins</li>
<li>Fully managed — updates, backups & uptime</li>
</ul>
</div>
<div class="feature-image">
<img src="libretime.jpg" alt="LibreTime studio interface showing playlist queue with scheduled tracks, start/end times, durations, and color-coded status for Ben Howard, Phillip Phillips, and Mumford & Sons">
</div>
</div>
<!-- STREAMING -->
<div class="feature-row" id="streaming">
<div class="feature-text">
<h3>Worldwide MP3 Streaming</h3>
<p>We partner with leading streaming audio infrastructure providers to deliver seamless, reliable MP3 audio streaming to your listeners — anywhere in the world. No need to configure your own servers or manage bandwidth. Your stream is included with your monthly fee, backed by enterprise-grade CDN infrastructure that scales with your audience.</p>
<ul>
<li>Seamless MP3 streaming — worldwide reach</li>
<li>Partner-hosted infrastructure — zero config</li>
<li>Auto-scaling CDN for peak listenership</li>
<li>Real-time metadata pushed to players</li>
<li>Low-latency, high-availability uptime</li>
<li>Included in your service fee</li>
</ul>
</div>
<div class="feature-image">
<img src="navbar.jpg" alt="Always-on live stream player embedded in the navigation bar — visible on every page with play/stop toggle and real-time track metadata">
</div>
</div>
<!-- NO ADS BLURB -->
<div class="showcase-blurb" style="margin-top:60px">
<p><strong>Your stream. Your content. Zero ads.</strong> Unlike ad-supported streaming platforms that inject commercials into your broadcast, FlowerCMS delivers your audio exactly as you send it — no interruptions, no third-party ads, no surprises. The only ads your listeners hear are the ones <em>you</em> choose to put there. Your brand stays yours, 24/7.</p>
</div>
</section>
<!-- ALL-IN-ONE -->
<section class="all-in-one">
<div class="inner">
<div class="section-label">All-in-One</div>
<h2>One platform. Every channel.</h2>
<p class="subtitle">Website, branding, and mobile apps — managed from a single admin panel.</p>
<div class="grid-3">
<div class="grid-card">
<div class="icon">🎨</div>
<h4>Website Builder</h4>
<p>Professional, responsive site with live streaming, schedules, events, and contact forms.</p>
</div>
<div class="grid-card">
<div class="icon">🎛️</div>
<h4>Smart Branding</h4>
<p>AI-assisted color harmony engine generates full palettes from just two colors you pick.</p>
</div>
<div class="grid-card">
<div class="icon">📱</div>
<h4>Mobile Apps</h4>
<p>Native Android & iOS apps with casting, AirPlay, Android Auto, and CarPlay built in.</p>
</div>
<div class="grid-card">
<div class="icon">📅</div>
<h4>Schedule Manager</h4>
<p>Drag-and-drop programming with time slots, hosts, genres, and recurring shows.</p>
</div>
<div class="grid-card">
<div class="icon">🎤</div>
<h4>Event System</h4>
<p>Promote live events, fundraisers, and open houses with location and registration.</p>
</div>
<div class="grid-card">
<div class="icon">🏢</div>
<h4>Sponsor Management</h4>
<p>Underwriter carousel on your homepage. Grow your funding with visible sponsor credits.</p>
</div>
<div class="grid-card">
<div class="icon">🎧</div>
<h4>Live Stream Player</h4>
<p>Always-on player in the navbar. Listeners stream while browsing — no pop-ups, no overlays.</p>
</div>
<div class="grid-card">
<div class="icon">🎙️</div>
<h4>LibreTime Studio</h4>
<p>Hosted, managed LibreTime instance included — playlist scheduling, playout queues & show management.</p>
</div>
<div class="grid-card">
<div class="icon">🌍</div>
<h4>Worldwide Streaming</h4>
<p>Partner-hosted MP3 streaming with CDN delivery. Scales with your audience — included in your fee.</p>
</div>
</div>
</div>
</section>
<!-- PRICING -->
<section class="pricing" id="pricing">
<div class="inner">
<div class="section-label">Pricing</div>
<h2>One plan. Everything included.</h2>
<p class="subtitle">No tiers. No listening hour caps. No platform ads. Just professional broadcasting tools at a fair price.</p>
<div class="pricing-card">
<div class="pricing-header">
<div class="pricing-amount">
<span class="currency">$</span>250<span class="period">/mo</span>
</div>
<div class="pricing-desc">Everything your station needs — included.</div>
</div>
<ul class="pricing-features">
<li><span class="check">✓</span> Unlimited listeners & streaming hours</li>
<li><span class="check">✓</span> White-label website — your brand, your domain</li>
<li><span class="check">✓</span> Custom mobile app builder (iOS & Android)</li>
<li><span class="check">✓</span> Hosted LibreTime studio — zero setup</li>
<li><span class="check">✓</span> Worldwide MP3 streaming via CDN</li>
<li><span class="check">✓</span> Event management & sponsor tools</li>
<li><span class="check">✓</span> Smart color picker & theme engine</li>
<li><span class="check">✓</span> Always-on live stream player</li>
<li><span class="check">✓</span> Zero platform ads — your stream stays yours</li>
<li><span class="check">✓</span> Minimal analytics — privacy by design</li>
</ul>
<div class="pricing-cta">
<a href="mailto:sales@flowercms.cloud" class="btn-primary">Contact Sales</a>
<a href="mailto:sales@flowercms.cloud" class="btn-contact">sales@flowercms.cloud</a>
</div>
<p class="pricing-note">You'll need your own Apple Developer ($99/yr) and Google Play ($25 one-time) accounts for app store submission — same as any platform.</p>
</div>
<!-- VS LIVE365 -->
<div class="vs-section">
<h3>How we compare</h3>
<p class="vs-subtitle">Live365's comparable tier (Broadcast 3) charges <strong>$274/mo</strong> for less. Here's the gap:</p>
<div class="vs-table">
<div class="vs-row header">
<div class="vs-feature">Feature</div>
<div class="vs-col live365">Live365 Broadcast 3</div>
<div class="vs-col flowercms">FlowerCMS</div>
</div>
<div class="vs-row">
<div class="vs-feature">Monthly price</div>
<div class="vs-col live365">$274</div>
<div class="vs-col flowercms highlight">$250</div>
</div>
<div class="vs-row">
<div class="vs-feature">Listening hours</div>
<div class="vs-col live365">7,000 TLH + $0.05/overage</div>
<div class="vs-col flowercms highlight">Unlimited</div>
</div>
<div class="vs-row">
<div class="vs-feature">White-label website</div>
<div class="vs-col live365"><span class="no">✗</span> Live365 branded</div>
<div class="vs-col flowercms highlight"><span class="yes">✓</span> Your brand</div>
</div>
<div class="vs-row">
<div class="vs-feature">Custom mobile app</div>
<div class="vs-col live365">Included</div>
<div class="vs-col flowercms highlight">Included</div>
</div>
<div class="vs-row">
<div class="vs-feature">Studio software</div>
<div class="vs-col live365"><span class="no">✗</span> Not included</div>
<div class="vs-col flowercms highlight"><span class="yes">✓</span> LibreTime hosted</div>
</div>
<div class="vs-row">
<div class="vs-feature">Event management</div>
<div class="vs-col live365"><span class="no">✗</span> Not included</div>
<div class="vs-col flowercms highlight"><span class="yes">✓</span> Built-in</div>
</div>
<div class="vs-row">
<div class="vs-feature">Sponsor tools</div>
<div class="vs-col live365"><span class="no">✗</span> Not included</div>
<div class="vs-col flowercms highlight"><span class="yes">✓</span> Carousel + modals</div>
</div>
<div class="vs-row">
<div class="vs-feature">Platform ads on your stream</div>
<div class="vs-col live365"><span class="warn">⚠</span> Optional upsell (50/50 revenue)</div>
<div class="vs-col flowercms highlight"><span class="yes">✓</span> Never — zero platform ads</div>
</div>
<div class="vs-row">
<div class="vs-feature">Analytics & tracking</div>
<div class="vs-col live365">Extensive listener surveillance</div>
<div class="vs-col flowercms highlight">Minimal — privacy-respecting</div>
</div>
</div>
<p class="vs-footer">Live365's "discounted" tier drops to $199/mo only if you accept <strong>their ads on your stream</strong> with 50/50 revenue split. FlowerCMS never inserts platform ads — your broadcast stays yours, period.</p>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section">
<h2>Ready to launch your station?</h2>
<p>No developer required. No design degree needed. Reach out and we'll get you up and running.</p>
<a href="mailto:sales@flowercms.cloud" class="btn-primary">Contact Sales</a>
</section>
<!-- FOOTER -->
<footer>
<p>© 2026 FlowerCMS — Built for broadcasters, by broadcasters.</p>
</footer>
</body>
</html>