forked from Goutam/lynkeduppro-crm
tanweer919
a459fefb7f
Copies the goutam-pages landing (React marketing home + /page/1..19 + assets) into /public and adds beforeFiles rewrites so '/' serves the marketing home and '/1'..'/19' + '/thanks' serve the static pages — reproducing the landing's vercel.json clean URLs. /portal/* (login/register) is untouched.
1727 lines
78 KiB
HTML
1727 lines
78 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>LynkedUp Pro - The OS for Modern Roofing Crews</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg: #ffffff;
|
|
--bg-soft: #f8fafc;
|
|
--bg-tint: #f1f5f9;
|
|
--line: #e2e8f0;
|
|
--line-soft: #eef2f7;
|
|
--ink: #0b1220;
|
|
--ink-2: #1e293b;
|
|
--muted: #64748b;
|
|
--muted-2: #94a3b8;
|
|
|
|
--blue: #0284c7;
|
|
--blue-2: #0ea5e9;
|
|
--blue-ink: #0c4a6e;
|
|
--mint: #10b981;
|
|
--mint-ink: #047857;
|
|
--amber: #f59e0b;
|
|
--amber-2: #f97316;
|
|
--amber-ink: #b45309;
|
|
|
|
--shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
|
|
--shadow-md: 0 6px 18px -8px rgba(15,23,42,.10), 0 2px 6px -2px rgba(15,23,42,.05);
|
|
--shadow-lg: 0 30px 60px -30px rgba(15,23,42,.20), 0 18px 36px -18px rgba(15,23,42,.10);
|
|
--shadow-xl: 0 50px 100px -40px rgba(2,132,199,.25), 0 30px 60px -30px rgba(15,23,42,.20);
|
|
|
|
--r-sm: 8px;
|
|
--r-md: 12px;
|
|
--r-lg: 18px;
|
|
--r-xl: 24px;
|
|
--r-2xl: 32px;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; padding: 0; }
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
|
|
color: var(--ink);
|
|
background: var(--bg);
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
font-feature-settings: "ss01", "cv11";
|
|
overflow-x: hidden;
|
|
}
|
|
.mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: "ss02"; }
|
|
|
|
/* ============== Page background ============== */
|
|
.page-bg {
|
|
position: fixed; inset: 0; z-index: -1; pointer-events: none;
|
|
background: var(--bg);
|
|
}
|
|
.page-bg::before, .page-bg::after {
|
|
content:""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55;
|
|
}
|
|
.page-bg::before {
|
|
width: 720px; height: 720px; left: -180px; top: -220px;
|
|
background: radial-gradient(circle, rgba(14,165,233,.35), rgba(14,165,233,0) 70%);
|
|
}
|
|
.page-bg::after {
|
|
width: 640px; height: 640px; right: -160px; top: 120px;
|
|
background: radial-gradient(circle, rgba(249,115,22,.22), rgba(249,115,22,0) 70%);
|
|
}
|
|
.grid-overlay {
|
|
position: fixed; inset: 0; z-index: -1; pointer-events: none;
|
|
background-image:
|
|
linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
|
|
background-size: 56px 56px;
|
|
mask-image: radial-gradient(ellipse 1100px 700px at 50% 0%, black 30%, transparent 80%);
|
|
}
|
|
|
|
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
|
|
|
|
/* ============== Nav ============== */
|
|
.nav {
|
|
position: sticky; top: 0; z-index: 50;
|
|
backdrop-filter: blur(14px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(14px) saturate(140%);
|
|
background: rgba(255,255,255,.72);
|
|
border-bottom: 1px solid rgba(226,232,240,.7);
|
|
}
|
|
.nav-inner {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
height: 72px;
|
|
}
|
|
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; font-size: 18px; }
|
|
.brand-mark {
|
|
width: 32px; height: 32px; border-radius: 9px;
|
|
background: linear-gradient(135deg, var(--blue) 0%, #0369a1 100%);
|
|
display: grid; place-items: center; color: #fff;
|
|
box-shadow: 0 6px 16px -6px rgba(2,132,199,.6), inset 0 1px 0 rgba(255,255,255,.4);
|
|
}
|
|
.nav-links { display: flex; gap: 36px; }
|
|
.nav-links a {
|
|
color: var(--ink-2); text-decoration: none; font-size: 14.5px; font-weight: 500;
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
}
|
|
.nav-links a:hover { color: var(--blue); }
|
|
.nav-cta { display: flex; align-items: center; gap: 12px; }
|
|
|
|
/* ============== Buttons ============== */
|
|
.btn {
|
|
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
|
font-family: inherit; font-weight: 600; font-size: 14.5px; line-height: 1;
|
|
padding: 12px 18px; border-radius: 10px; border: 1px solid transparent;
|
|
cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s;
|
|
text-decoration: none; white-space: nowrap;
|
|
}
|
|
.btn:hover { transform: translateY(-1px); }
|
|
.btn-ghost { color: var(--ink-2); background: transparent; border-color: var(--line); }
|
|
.btn-ghost:hover { background: var(--bg-soft); }
|
|
.btn-primary {
|
|
color: #fff;
|
|
background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
|
|
box-shadow: 0 8px 18px -8px rgba(2,132,199,.55), inset 0 1px 0 rgba(255,255,255,.25);
|
|
}
|
|
.btn-primary:hover { box-shadow: 0 14px 26px -10px rgba(2,132,199,.7), inset 0 1px 0 rgba(255,255,255,.3); }
|
|
.btn-amber {
|
|
color: #fff;
|
|
background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 60%, #ea8a00 100%);
|
|
box-shadow: 0 10px 22px -10px rgba(245,158,11,.7), inset 0 1px 0 rgba(255,255,255,.35);
|
|
}
|
|
.btn-amber:hover { box-shadow: 0 16px 30px -12px rgba(245,158,11,.85), inset 0 1px 0 rgba(255,255,255,.4); }
|
|
.btn-lg { padding: 16px 22px; font-size: 15px; border-radius: 12px; }
|
|
|
|
/* ============== Hero ============== */
|
|
.hero { padding: 72px 0 100px; }
|
|
.hero-grid {
|
|
display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center;
|
|
}
|
|
.ltd-badge {
|
|
display: inline-flex; align-items: center; gap: 10px;
|
|
padding: 8px 8px 8px 14px; border-radius: 999px;
|
|
background: rgba(255,251,235,.85);
|
|
border: 1px solid rgba(245,158,11,.35);
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: 0 4px 14px -6px rgba(245,158,11,.35), inset 0 1px 0 rgba(255,255,255,.6);
|
|
font-size: 13px; font-weight: 600; color: var(--amber-ink);
|
|
letter-spacing: .01em;
|
|
}
|
|
.ltd-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(245,158,11,.18); animation: pulse 2.2s infinite; }
|
|
.ltd-badge .pill {
|
|
background: linear-gradient(180deg, #fbbf24, #f59e0b);
|
|
color: #fff; font-weight: 700; font-size: 11px;
|
|
padding: 4px 10px; border-radius: 999px; letter-spacing: .04em;
|
|
}
|
|
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(245,158,11,.18); } 50% { box-shadow: 0 0 0 8px rgba(245,158,11,.08); } }
|
|
|
|
.hero h1 {
|
|
font-size: 64px; line-height: 1.02; letter-spacing: -.035em; font-weight: 800;
|
|
margin: 22px 0 20px; color: var(--ink);
|
|
text-wrap: balance;
|
|
}
|
|
.hero h1 .accent {
|
|
background: linear-gradient(180deg, #0ea5e9 0%, #0369a1 100%);
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
}
|
|
.hero h1 .underline {
|
|
position: relative; display: inline-block;
|
|
}
|
|
.hero h1 .underline::after {
|
|
content:""; position: absolute; left: 0; right: 0; bottom: -2px; height: 10px;
|
|
background: linear-gradient(90deg, rgba(245,158,11,.0), rgba(245,158,11,.35), rgba(245,158,11,.0));
|
|
border-radius: 8px; z-index: -1;
|
|
}
|
|
.hero p.lede {
|
|
font-size: 18.5px; line-height: 1.55; color: var(--muted);
|
|
max-width: 560px; margin: 0 0 30px;
|
|
}
|
|
.hero-ctas { display: flex; gap: 12px; align-items: center; }
|
|
.hero-meta {
|
|
display: flex; align-items: center; gap: 22px; margin-top: 28px;
|
|
color: var(--muted); font-size: 13.5px;
|
|
}
|
|
.hero-meta .check { display: inline-flex; align-items: center; gap: 6px; }
|
|
.hero-meta .check svg { color: var(--mint); }
|
|
.avatars { display: flex; align-items: center; }
|
|
.avatars .a {
|
|
width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff;
|
|
margin-left: -8px; background-size: cover; background-position: center;
|
|
box-shadow: 0 2px 4px rgba(15,23,42,.1);
|
|
}
|
|
.avatars .a:first-child { margin-left: 0; }
|
|
.a1 { background: linear-gradient(135deg, #fde68a, #f59e0b); }
|
|
.a2 { background: linear-gradient(135deg, #bae6fd, #0284c7); }
|
|
.a3 { background: linear-gradient(135deg, #bbf7d0, #10b981); }
|
|
.a4 { background: linear-gradient(135deg, #fbcfe8, #ec4899); }
|
|
.stars { color: var(--amber); font-size: 13px; letter-spacing: 1px; }
|
|
|
|
/* ============== Hero mockup ============== */
|
|
.mock-stage {
|
|
position: relative;
|
|
perspective: 1800px;
|
|
}
|
|
.laptop {
|
|
position: relative; width: 100%;
|
|
filter: drop-shadow(0 40px 60px rgba(15,23,42,.18)) drop-shadow(0 20px 30px rgba(2,132,199,.12));
|
|
}
|
|
.laptop-lid {
|
|
position: relative; border-radius: 14px 14px 4px 4px;
|
|
background: linear-gradient(180deg, #e5e7eb 0%, #d1d5db 100%);
|
|
padding: 10px 10px 0;
|
|
border: 1px solid #cbd5e1;
|
|
border-bottom: none;
|
|
}
|
|
.laptop-screen {
|
|
position: relative;
|
|
aspect-ratio: 16 / 10;
|
|
background: #ffffff;
|
|
border-radius: 6px 6px 0 0;
|
|
overflow: hidden;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
.laptop-base {
|
|
height: 14px;
|
|
background: linear-gradient(180deg, #d1d5db 0%, #9ca3af 100%);
|
|
border-radius: 0 0 16px 16px;
|
|
position: relative;
|
|
width: 108%;
|
|
margin-left: -4%;
|
|
}
|
|
.laptop-base::after {
|
|
content:""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
|
|
width: 80px; height: 6px; background: #94a3b8; border-radius: 0 0 6px 6px;
|
|
}
|
|
|
|
/* Browser chrome inside the laptop screen */
|
|
.browser-chrome {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 9px 14px;
|
|
background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
|
|
border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
.browser-chrome .tl { display: flex; gap: 6px; }
|
|
.browser-chrome .tl span { width: 10px; height: 10px; border-radius: 50%; }
|
|
.browser-chrome .tl span:nth-child(1) { background: #fb7185; }
|
|
.browser-chrome .tl span:nth-child(2) { background: #fbbf24; }
|
|
.browser-chrome .tl span:nth-child(3) { background: #34d399; }
|
|
.browser-chrome .url {
|
|
flex: 1; height: 22px; background: #fff; border: 1px solid var(--line);
|
|
border-radius: 6px; padding: 0 10px; display: flex; align-items: center;
|
|
font-size: 11px; color: var(--muted); gap: 6px;
|
|
}
|
|
.browser-chrome .url svg { color: var(--mint); }
|
|
|
|
/* App canvas inside browser */
|
|
.app-canvas {
|
|
position: relative; height: 100%;
|
|
background:
|
|
radial-gradient(ellipse 600px 400px at 20% 10%, rgba(14,165,233,.06), transparent 60%),
|
|
radial-gradient(ellipse 500px 380px at 90% 90%, rgba(245,158,11,.05), transparent 60%),
|
|
#fbfdff;
|
|
display: flex;
|
|
}
|
|
.app-side {
|
|
width: 52px; padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 10px;
|
|
border-right: 1px solid var(--line-soft);
|
|
background: #fff;
|
|
}
|
|
.app-side .logo {
|
|
width: 28px; height: 28px; border-radius: 8px;
|
|
background: linear-gradient(135deg, var(--blue), #0369a1); color: #fff;
|
|
display: grid; place-items: center; font-weight: 800; font-size: 12px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.app-side .ic {
|
|
width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
|
|
color: var(--muted-2); cursor: pointer;
|
|
}
|
|
.app-side .ic.active { background: rgba(2,132,199,.10); color: var(--blue); }
|
|
|
|
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
|
|
.app-topbar {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 10px 16px; border-bottom: 1px solid var(--line-soft);
|
|
background: rgba(255,255,255,.6); backdrop-filter: blur(6px);
|
|
}
|
|
.app-topbar .crumb {
|
|
display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted);
|
|
}
|
|
.app-topbar .crumb b { color: var(--ink-2); font-weight: 700; }
|
|
.app-topbar .toolset { display: flex; gap: 6px; }
|
|
.app-topbar .tool {
|
|
height: 22px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px;
|
|
background: #fff; font-size: 10px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px;
|
|
}
|
|
.app-topbar .tool.live { color: var(--mint-ink); background: #ecfdf5; border-color: #a7f3d0; }
|
|
.app-topbar .tool.live .d { width: 6px; height: 6px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
|
|
|
|
.canvas-area {
|
|
position: relative; flex: 1; min-height: 0;
|
|
background:
|
|
linear-gradient(rgba(2,132,199,.06) 1px, transparent 1px) 0 0 / 28px 28px,
|
|
linear-gradient(90deg, rgba(2,132,199,.06) 1px, transparent 1px) 0 0 / 28px 28px,
|
|
linear-gradient(180deg, #fbfeff 0%, #f1f8fd 100%);
|
|
}
|
|
|
|
.roof-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
|
|
|
|
/* Floating UI chips over the canvas */
|
|
.chip {
|
|
position: absolute;
|
|
background: rgba(255,255,255,.78);
|
|
border: 1px solid rgba(226,232,240,.8);
|
|
backdrop-filter: blur(12px) saturate(160%);
|
|
-webkit-backdrop-filter: blur(12px) saturate(160%);
|
|
border-radius: 10px;
|
|
box-shadow: 0 14px 30px -16px rgba(15,23,42,.2), 0 2px 6px rgba(15,23,42,.05);
|
|
padding: 10px 12px;
|
|
font-size: 11px;
|
|
}
|
|
.chip .row { display: flex; align-items: center; gap: 8px; }
|
|
.chip .lab { color: var(--muted); font-size: 10px; font-weight: 500; }
|
|
.chip .val { color: var(--ink); font-weight: 700; font-size: 12.5px; }
|
|
|
|
.chip-area {
|
|
top: 18px; left: 18px;
|
|
}
|
|
.chip-pitch {
|
|
top: 18px; right: 18px;
|
|
}
|
|
.chip-lidar {
|
|
bottom: 110px; left: 26px;
|
|
display: flex; align-items: center; gap: 8px; padding: 8px 12px;
|
|
}
|
|
.chip-lidar .pulse {
|
|
width: 8px; height: 8px; border-radius: 50%; background: var(--blue-2);
|
|
box-shadow: 0 0 0 4px rgba(14,165,233,.2);
|
|
animation: pulse 1.6s infinite;
|
|
}
|
|
.chip-est {
|
|
bottom: 22px; right: 22px; padding: 12px 14px;
|
|
min-width: 180px;
|
|
}
|
|
.chip-est .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
|
|
.chip-est .price { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
|
|
.chip-est .delta { font-size: 11px; color: var(--mint-ink); background: #ecfdf5; padding: 2px 6px; border-radius: 999px; font-weight: 600; }
|
|
.chip-est .bar { height: 4px; background: var(--bg-tint); border-radius: 999px; overflow: hidden; }
|
|
.chip-est .bar > i { display: block; height: 100%; width: 72%; background: linear-gradient(90deg, var(--blue-2), var(--blue)); border-radius: 999px; }
|
|
.chip-est .foot { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 6px; }
|
|
|
|
/* Phone mockup */
|
|
.phone {
|
|
position: absolute; right: -36px; bottom: -56px;
|
|
width: 200px; aspect-ratio: 9/19;
|
|
border-radius: 28px;
|
|
background: linear-gradient(180deg, #1e293b, #0f172a);
|
|
padding: 8px;
|
|
box-shadow: 0 40px 80px -30px rgba(15,23,42,.5), 0 20px 40px -20px rgba(2,132,199,.3);
|
|
transform: rotate(4deg);
|
|
border: 1px solid #334155;
|
|
}
|
|
.phone .notch {
|
|
position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
|
|
width: 60px; height: 16px; background: #000; border-radius: 999px; z-index: 2;
|
|
}
|
|
.phone-screen {
|
|
width: 100%; height: 100%; border-radius: 22px; overflow: hidden;
|
|
background: #ffffff;
|
|
position: relative;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.phone-status {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
padding: 8px 16px 6px; font-size: 9px; font-weight: 700;
|
|
}
|
|
.phone-head {
|
|
padding: 4px 14px 12px; border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
.phone-head .hi { font-size: 10px; color: var(--muted); }
|
|
.phone-head .name { font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; margin-top: 2px; }
|
|
.phone-body { flex: 1; padding: 10px 12px; overflow: hidden; }
|
|
.phone-card {
|
|
background: #f8fafc; border: 1px solid var(--line-soft);
|
|
border-radius: 10px; padding: 8px 10px; margin-bottom: 8px;
|
|
}
|
|
.phone-card.amber { background: linear-gradient(180deg, #fffbeb, #fef3c7); border-color: rgba(245,158,11,.3); }
|
|
.phone-card .t { font-size: 8.5px; color: var(--muted); font-weight: 600; }
|
|
.phone-card .v { font-size: 11px; font-weight: 700; color: var(--ink); margin-top: 1px; }
|
|
.phone-card .row { display: flex; justify-content: space-between; align-items: center; }
|
|
.phone-tab {
|
|
display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
|
|
padding: 6px 10px 8px; border-top: 1px solid var(--line-soft); background: #fff;
|
|
}
|
|
.phone-tab .t {
|
|
display: grid; place-items: center; gap: 2px;
|
|
color: var(--muted-2); font-size: 8px;
|
|
}
|
|
.phone-tab .t.on { color: var(--blue); }
|
|
|
|
/* ============== Logos strip ============== */
|
|
.logos {
|
|
border-top: 1px solid var(--line-soft);
|
|
border-bottom: 1px solid var(--line-soft);
|
|
background: rgba(248,250,252,.5);
|
|
}
|
|
.logos-inner {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 26px 0; gap: 24px;
|
|
}
|
|
.logos-label {
|
|
color: var(--muted); font-size: 12px; font-weight: 600;
|
|
letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
|
|
}
|
|
.logos-row { display: flex; gap: 48px; align-items: center; flex: 1; justify-content: flex-end; }
|
|
.logos-row span {
|
|
color: #94a3b8; font-weight: 700; font-size: 17px; letter-spacing: -.01em;
|
|
opacity: .8; font-family: 'Plus Jakarta Sans';
|
|
}
|
|
.logos-row .lg-1 { font-style: italic; font-weight: 800; font-family: 'JetBrains Mono'; }
|
|
.logos-row .lg-3 { letter-spacing: .3em; font-weight: 600; font-size: 13px; }
|
|
.logos-row .lg-5 { font-weight: 800; }
|
|
|
|
/* ============== Section heading ============== */
|
|
.eyebrow {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
background: rgba(255,255,255,.7);
|
|
border: 1px solid var(--line);
|
|
backdrop-filter: blur(8px);
|
|
padding: 6px 12px 6px 8px; border-radius: 999px;
|
|
color: var(--blue-ink); font-size: 12px; font-weight: 600; letter-spacing: .04em;
|
|
}
|
|
.eyebrow .e-dot {
|
|
width: 18px; height: 18px; border-radius: 50%;
|
|
background: linear-gradient(135deg, #bae6fd, var(--blue));
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
|
|
}
|
|
.sec-h {
|
|
font-size: 44px; line-height: 1.08; letter-spacing: -.03em; font-weight: 800;
|
|
margin: 18px 0 14px; max-width: 720px; text-wrap: balance;
|
|
}
|
|
.sec-sub {
|
|
font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 620px;
|
|
}
|
|
.sec-head-center { text-align: center; margin: 0 auto; }
|
|
.sec-head-center .sec-h, .sec-head-center .sec-sub { margin-left: auto; margin-right: auto; }
|
|
|
|
/* ============== Ecosystem grid ============== */
|
|
.sec-ecosystem { padding: 110px 0; }
|
|
.feature-grid {
|
|
margin-top: 56px;
|
|
display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
|
|
}
|
|
.feature-card {
|
|
background: rgba(255,255,255,.65);
|
|
border: 1px solid rgba(226,232,240,.8);
|
|
backdrop-filter: blur(12px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(12px) saturate(150%);
|
|
border-radius: var(--r-xl);
|
|
padding: 28px;
|
|
position: relative; overflow: hidden;
|
|
transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
|
|
box-shadow: 0 1px 2px rgba(15,23,42,.04);
|
|
}
|
|
.feature-card::before {
|
|
content:""; position: absolute; inset: 0; border-radius: inherit;
|
|
background: linear-gradient(140deg, rgba(255,255,255,.6) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
}
|
|
.feature-card:hover {
|
|
transform: translateY(-4px);
|
|
border-color: rgba(14,165,233,.35);
|
|
box-shadow: 0 30px 60px -30px rgba(2,132,199,.25), 0 12px 24px -12px rgba(15,23,42,.08);
|
|
}
|
|
.feature-icon {
|
|
width: 52px; height: 52px; border-radius: 14px;
|
|
display: grid; place-items: center;
|
|
background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
|
|
border: 1px solid #e0f2fe;
|
|
color: var(--blue);
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(2,132,199,.08);
|
|
margin-bottom: 22px;
|
|
}
|
|
.feature-card h3 {
|
|
font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px;
|
|
}
|
|
.feature-card p {
|
|
font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 18px;
|
|
}
|
|
.feature-tag {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
font-size: 11.5px; font-weight: 600; color: var(--blue-ink);
|
|
background: rgba(186,230,253,.4); padding: 4px 10px; border-radius: 999px;
|
|
border: 1px solid rgba(14,165,233,.18);
|
|
}
|
|
.feature-tag.mint { color: var(--mint-ink); background: rgba(167,243,208,.35); border-color: rgba(16,185,129,.2); }
|
|
.feature-tag.amber { color: var(--amber-ink); background: rgba(254,243,199,.6); border-color: rgba(245,158,11,.25); }
|
|
|
|
/* ============== Calendar walkthrough ============== */
|
|
.sec-calendar { padding: 60px 0 110px; }
|
|
.cal-grid {
|
|
margin-top: 56px;
|
|
display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px;
|
|
align-items: center;
|
|
}
|
|
.cal-points { display: flex; flex-direction: column; gap: 26px; margin-top: 28px; }
|
|
.cal-point { display: flex; gap: 14px; }
|
|
.cal-point .pi {
|
|
flex: none; width: 38px; height: 38px; border-radius: 10px;
|
|
display: grid; place-items: center;
|
|
background: rgba(2,132,199,.08); color: var(--blue);
|
|
border: 1px solid rgba(2,132,199,.15);
|
|
}
|
|
.cal-point .pi.mint { background: rgba(16,185,129,.08); color: var(--mint-ink); border-color: rgba(16,185,129,.18); }
|
|
.cal-point .pi.amber { background: rgba(245,158,11,.1); color: var(--amber-ink); border-color: rgba(245,158,11,.22); }
|
|
.cal-point h4 { font-size: 15px; font-weight: 700; margin: 0 0 4px; color: var(--ink); letter-spacing: -.01em; }
|
|
.cal-point p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.55; }
|
|
|
|
.cal-app {
|
|
position: relative;
|
|
background: #ffffff;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-2xl);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
.cal-app-head {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
padding: 18px 22px; border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
.cal-app-head .month { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
|
|
.cal-app-head .month span { color: var(--muted); font-weight: 500; }
|
|
.cal-app-head .controls { display: flex; gap: 6px; align-items: center; }
|
|
.cal-app-head .seg {
|
|
display: flex; background: var(--bg-soft); border: 1px solid var(--line-soft);
|
|
border-radius: 8px; padding: 3px;
|
|
}
|
|
.cal-app-head .seg button {
|
|
background: transparent; border: 0; padding: 5px 10px; border-radius: 6px;
|
|
font-size: 11.5px; color: var(--muted); cursor: pointer; font-family: inherit; font-weight: 600;
|
|
}
|
|
.cal-app-head .seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15,23,42,.06); }
|
|
.cal-app-head .nav-btn {
|
|
width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line);
|
|
background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--ink-2);
|
|
}
|
|
.cal-week {
|
|
display: grid; grid-template-columns: 60px repeat(5, 1fr);
|
|
border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
.cal-week .wh {
|
|
padding: 12px 10px 10px; text-align: center; font-size: 11px; color: var(--muted);
|
|
font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
|
|
border-left: 1px solid var(--line-soft);
|
|
}
|
|
.cal-week .wh:first-child { border-left: 0; }
|
|
.cal-week .wh.today { color: var(--blue); }
|
|
.cal-week .wh b { display: block; color: var(--ink); font-size: 18px; font-weight: 700; margin-top: 4px; letter-spacing: -.01em; }
|
|
.cal-week .wh.today b { color: var(--blue); }
|
|
|
|
.cal-body {
|
|
position: relative; height: 420px; overflow: hidden;
|
|
display: grid; grid-template-columns: 60px repeat(5,1fr);
|
|
background:
|
|
linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0/ 100% 60px;
|
|
}
|
|
.cal-time {
|
|
padding-right: 8px; position: relative;
|
|
}
|
|
.cal-time .t {
|
|
height: 60px; font-size: 10px; color: var(--muted);
|
|
text-align: right; padding: 4px 8px 0 0;
|
|
}
|
|
.cal-col {
|
|
border-left: 1px solid var(--line-soft); position: relative;
|
|
}
|
|
.cal-evt {
|
|
position: absolute; left: 6px; right: 6px;
|
|
border-radius: 8px; padding: 7px 9px;
|
|
font-size: 11px; line-height: 1.3;
|
|
box-shadow: 0 2px 6px rgba(15,23,42,.06);
|
|
border-left: 3px solid var(--blue);
|
|
background: rgba(14,165,233,.08);
|
|
color: var(--blue-ink);
|
|
}
|
|
.cal-evt.mint { border-left-color: var(--mint); background: rgba(16,185,129,.08); color: var(--mint-ink); }
|
|
.cal-evt.amber { border-left-color: var(--amber); background: rgba(245,158,11,.1); color: var(--amber-ink); }
|
|
.cal-evt.slate { border-left-color: #64748b; background: rgba(100,116,139,.08); color: #334155; }
|
|
.cal-evt .t { font-weight: 700; font-size: 11.5px; }
|
|
.cal-evt .s { font-size: 10px; opacity: .85; margin-top: 2px; }
|
|
.cal-now {
|
|
position: absolute; left: 60px; right: 0;
|
|
border-top: 1.5px dashed var(--amber-2);
|
|
display: flex; align-items: center;
|
|
pointer-events: none;
|
|
}
|
|
.cal-now::before {
|
|
content:""; position: absolute; left: -5px; top: -5px;
|
|
width: 10px; height: 10px; border-radius: 50%;
|
|
background: var(--amber-2);
|
|
box-shadow: 0 0 0 4px rgba(249,115,22,.2);
|
|
}
|
|
.cal-now .nlabel {
|
|
background: var(--amber-2); color: #fff; font-size: 9.5px; font-weight: 700;
|
|
padding: 2px 6px; border-radius: 4px; margin-left: -56px; margin-top: -10px;
|
|
font-family: 'JetBrains Mono';
|
|
}
|
|
|
|
/* Suggested actions popover */
|
|
.sa-pop {
|
|
position: absolute; right: 28px; top: 110px;
|
|
width: 320px;
|
|
background: rgba(255,255,255,.92);
|
|
border: 1px solid rgba(226,232,240,.9);
|
|
backdrop-filter: blur(16px) saturate(160%);
|
|
-webkit-backdrop-filter: blur(16px) saturate(160%);
|
|
border-radius: 16px;
|
|
box-shadow: 0 30px 60px -20px rgba(15,23,42,.22), 0 12px 24px -12px rgba(2,132,199,.18);
|
|
padding: 16px;
|
|
z-index: 5;
|
|
}
|
|
.sa-pop::before {
|
|
content:""; position: absolute; left: -6px; top: 28px;
|
|
width: 12px; height: 12px; background: inherit; transform: rotate(45deg);
|
|
border-left: 1px solid rgba(226,232,240,.9);
|
|
border-bottom: 1px solid rgba(226,232,240,.9);
|
|
}
|
|
.sa-pop .sa-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
|
.sa-pop .ai-mark {
|
|
width: 30px; height: 30px; border-radius: 10px;
|
|
background: linear-gradient(135deg, #0ea5e9, #6366f1);
|
|
display: grid; place-items: center; color: #fff;
|
|
box-shadow: 0 4px 12px -4px rgba(99,102,241,.5);
|
|
}
|
|
.sa-pop .sa-head .ti { font-size: 13px; font-weight: 700; }
|
|
.sa-pop .sa-head .ti span { display: block; font-size: 10.5px; color: var(--muted); font-weight: 500; margin-top: 1px; }
|
|
.sa-pop .sa-head .close { margin-left: auto; color: var(--muted-2); cursor: pointer; }
|
|
.sa-pop p.body {
|
|
font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 12px;
|
|
}
|
|
.sa-pop p.body b { color: var(--ink); }
|
|
.sa-pop p.body .hl { background: rgba(245,158,11,.15); color: var(--amber-ink); padding: 1px 5px; border-radius: 4px; font-weight: 600; }
|
|
.sa-actions { display: flex; gap: 8px; }
|
|
.sa-actions .sa-btn {
|
|
flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
|
|
background: #fff; font-size: 11.5px; font-weight: 600; color: var(--ink-2); cursor: pointer;
|
|
font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
|
|
}
|
|
.sa-actions .sa-btn.primary {
|
|
background: linear-gradient(180deg, #0ea5e9, #0284c7); color: #fff; border-color: transparent;
|
|
box-shadow: 0 4px 12px -4px rgba(2,132,199,.5);
|
|
}
|
|
|
|
/* ============== Pricing ============== */
|
|
.sec-pricing {
|
|
padding: 60px 0 130px;
|
|
background: linear-gradient(180deg, transparent 0%, rgba(248,250,252,.6) 30%, rgba(248,250,252,.6) 100%);
|
|
position: relative;
|
|
}
|
|
.price-grid {
|
|
margin-top: 64px;
|
|
display: grid; grid-template-columns: 1fr 1fr 1.1fr;
|
|
gap: 0; max-width: 1180px; margin-left: auto; margin-right: auto;
|
|
align-items: stretch;
|
|
border: 1px solid var(--line);
|
|
border-radius: 24px; overflow: visible;
|
|
background: #ffffff;
|
|
box-shadow: var(--shadow-md);
|
|
position: relative;
|
|
}
|
|
.pcard {
|
|
padding: 36px 32px; display: flex; flex-direction: column;
|
|
border-right: 1px solid var(--line-soft);
|
|
position: relative;
|
|
}
|
|
.pcard:last-child { border-right: 0; }
|
|
.pcard h4 { font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 10px; }
|
|
.pcard .sub { font-size: 13.5px; color: var(--muted); margin: 0 0 22px; line-height: 1.5; min-height: 38px; }
|
|
.pcard .price {
|
|
display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
|
|
}
|
|
.pcard .price .amt { font-size: 48px; font-weight: 800; letter-spacing: -.035em; color: var(--ink); }
|
|
.pcard .price .per { font-size: 14px; color: var(--muted); }
|
|
.pcard .price-meta { font-size: 12.5px; color: var(--muted); margin-bottom: 24px; }
|
|
.pcard .price.cross .amt {
|
|
color: var(--muted-2);
|
|
text-decoration: line-through;
|
|
text-decoration-color: rgba(239,68,68,.7);
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
.pcard .pbtn { width: 100%; }
|
|
.pcard ul { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 11px; }
|
|
.pcard ul li { font-size: 13.5px; color: var(--ink-2); display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
|
|
.pcard ul li .ck { flex: none; margin-top: 2px; }
|
|
.pcard ul li .ck.mint { color: var(--mint); }
|
|
.pcard ul li .ck.muted { color: var(--muted-2); }
|
|
.pcard ul li.dim { color: var(--muted); }
|
|
|
|
.pcard.ltd {
|
|
background:
|
|
radial-gradient(ellipse 360px 220px at 50% 0%, rgba(245,158,11,.12), transparent 70%),
|
|
linear-gradient(180deg, #fffdf7 0%, #ffffff 60%);
|
|
border: 2px solid var(--amber);
|
|
border-radius: 24px;
|
|
margin: -10px -1px;
|
|
box-shadow: 0 30px 60px -28px rgba(245,158,11,.4), 0 18px 36px -20px rgba(15,23,42,.1);
|
|
z-index: 2;
|
|
}
|
|
.pcard.ltd .ribbon {
|
|
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
|
|
background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 60%, #ea8a00 100%);
|
|
color: #fff; font-weight: 700; font-size: 12px;
|
|
padding: 7px 14px; border-radius: 999px;
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
box-shadow: 0 8px 18px -6px rgba(245,158,11,.6);
|
|
letter-spacing: .03em;
|
|
white-space: nowrap;
|
|
}
|
|
.pcard.ltd h4 { color: var(--amber-ink); }
|
|
.pcard.ltd .price .amt {
|
|
background: linear-gradient(180deg, #f59e0b, #ea8a00);
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
}
|
|
.pcard.ltd .ck.mint { color: var(--amber); }
|
|
.ltd-save {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
background: rgba(254,243,199,.7); color: var(--amber-ink);
|
|
border: 1px solid rgba(245,158,11,.3);
|
|
padding: 4px 10px; border-radius: 999px;
|
|
font-size: 11.5px; font-weight: 700;
|
|
margin-bottom: 14px; align-self: flex-start;
|
|
}
|
|
|
|
.vs-stamp {
|
|
position: absolute; top: 50%; transform: translateY(-50%);
|
|
background: #fff;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
width: 42px; height: 42px;
|
|
display: grid; place-items: center;
|
|
font-weight: 800; font-size: 11px; color: var(--muted);
|
|
z-index: 3;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
/* AppSumo style row */
|
|
.ltd-trust {
|
|
margin-top: 40px;
|
|
display: flex; align-items: center; justify-content: center; gap: 26px;
|
|
flex-wrap: wrap;
|
|
color: var(--muted); font-size: 13px;
|
|
}
|
|
.ltd-trust .it { display: flex; align-items: center; gap: 8px; }
|
|
.ltd-trust .it svg { color: var(--mint); }
|
|
|
|
/* ============== Final CTA ============== */
|
|
.final-cta {
|
|
padding: 100px 0;
|
|
}
|
|
.final-cta-card {
|
|
position: relative; overflow: hidden;
|
|
border-radius: 28px;
|
|
background:
|
|
radial-gradient(ellipse 700px 360px at 90% 90%, rgba(245,158,11,.16), transparent 60%),
|
|
radial-gradient(ellipse 800px 460px at 5% 0%, rgba(14,165,233,.14), transparent 60%),
|
|
linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
border: 1px solid var(--line);
|
|
padding: 70px 80px;
|
|
box-shadow: var(--shadow-lg);
|
|
display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 40px;
|
|
}
|
|
.final-cta-card h2 {
|
|
font-size: 44px; line-height: 1.05; letter-spacing: -.03em; font-weight: 800;
|
|
margin: 14px 0 18px;
|
|
text-wrap: balance;
|
|
}
|
|
.final-cta-card p {
|
|
font-size: 17px; line-height: 1.55; color: var(--muted); margin: 0 0 28px;
|
|
}
|
|
.countdown {
|
|
background: rgba(255,255,255,.65); backdrop-filter: blur(14px);
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px; padding: 22px;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
.countdown .cdh {
|
|
font-size: 12px; font-weight: 700; color: var(--amber-ink); letter-spacing: .08em; text-transform: uppercase;
|
|
display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
|
|
}
|
|
.countdown .cdh .d { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(245,158,11,.2); }
|
|
.countdown .cd-grid {
|
|
display: grid; grid-template-columns: repeat(4,1fr); gap: 8px;
|
|
}
|
|
.countdown .cd-cell {
|
|
background: linear-gradient(180deg, #fff, #fffbf2);
|
|
border: 1px solid rgba(245,158,11,.2);
|
|
border-radius: 12px;
|
|
padding: 14px 8px; text-align: center;
|
|
}
|
|
.countdown .cd-cell .n {
|
|
font-family: 'JetBrains Mono'; font-size: 26px; font-weight: 700;
|
|
color: var(--ink); letter-spacing: -.02em;
|
|
}
|
|
.countdown .cd-cell .l { font-size: 10px; color: var(--muted); margin-top: 4px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
|
|
|
|
/* ============== Footer ============== */
|
|
footer {
|
|
border-top: 1px solid var(--line-soft);
|
|
padding: 50px 0 36px;
|
|
}
|
|
.foot {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
color: var(--muted); font-size: 13px;
|
|
}
|
|
.foot .links { display: flex; gap: 28px; }
|
|
.foot a { color: var(--muted); text-decoration: none; }
|
|
.foot a:hover { color: var(--ink-2); }
|
|
|
|
/* tweaks panel */
|
|
#tweaks-root { position: fixed; bottom: 20px; right: 20px; z-index: 1000; }
|
|
|
|
/* ============================================================
|
|
============== RESPONSIVE - desktop-first overrides ===========
|
|
Breakpoints:
|
|
• lg ≤ 1199px : laptop
|
|
• md ≤ 1023px : tablet
|
|
• sm ≤ 767px : mobile
|
|
• xs ≤ 479px : small mobile
|
|
============================================================ */
|
|
img, svg, video { max-width: 100%; height: auto; }
|
|
|
|
/* ---------- ≤1199px (small laptop) ---------- */
|
|
@media (max-width: 1199px) {
|
|
.wrap { padding: 0 24px; }
|
|
.hero { padding: 56px 0 80px; }
|
|
.hero-grid { gap: 40px; }
|
|
.hero h1 { font-size: 56px; }
|
|
.sec-h { font-size: 38px; }
|
|
.final-cta-card { padding: 56px 48px; }
|
|
.final-cta-card h2 { font-size: 38px; }
|
|
.price-grid { max-width: 100%; }
|
|
.feature-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.cal-grid { gap: 32px; }
|
|
.sa-pop { width: 280px; right: 16px; top: 90px; }
|
|
}
|
|
|
|
/* ---------- ≤1023px (tablet) ---------- */
|
|
@media (max-width: 1023px) {
|
|
.nav-inner { height: 64px; }
|
|
.nav-links { display: none; }
|
|
|
|
/* Hero - collapse to single column, mockup below */
|
|
.hero { padding: 48px 0 64px; }
|
|
.hero-grid { grid-template-columns: 1fr; gap: 48px; text-align: center; }
|
|
.hero h1 { font-size: 48px; margin: 18px auto 18px; }
|
|
.hero p.lede { margin-left: auto; margin-right: auto; font-size: 17px; }
|
|
.hero-ctas { justify-content: center; flex-wrap: wrap; }
|
|
.hero-meta { justify-content: center; flex-wrap: wrap; gap: 16px 20px; }
|
|
|
|
/* Laptop mockup - cap size; phone tucks below instead of overhanging */
|
|
.mock-stage { max-width: 560px; margin: 0 auto; padding-bottom: 60px; }
|
|
.phone { right: -8px; bottom: -40px; width: 160px; transform: rotate(2deg); }
|
|
|
|
/* Logos */
|
|
.logos-inner { flex-direction: column; padding: 22px 0; gap: 14px; }
|
|
.logos-row { justify-content: center; flex-wrap: wrap; gap: 18px 28px; }
|
|
.logos-row span { font-size: 14px; white-space: nowrap; }
|
|
|
|
/* Section spacing/typography */
|
|
.sec-ecosystem { padding: 72px 0; }
|
|
.sec-calendar { padding: 40px 0 72px; }
|
|
.sec-pricing { padding: 48px 0 80px; }
|
|
.final-cta { padding: 64px 0; }
|
|
.sec-h { font-size: 34px; }
|
|
.sec-sub { font-size: 15.5px; }
|
|
|
|
/* Ecosystem grid stays 2-col, tighten */
|
|
.feature-grid { gap: 16px; margin-top: 40px; }
|
|
.feature-card { padding: 22px; }
|
|
|
|
/* Calendar - stack, full width app */
|
|
.cal-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
|
|
.cal-app-head { padding: 14px 16px; flex-wrap: wrap; gap: 10px; }
|
|
.cal-week { grid-template-columns: 48px repeat(5, 1fr); }
|
|
.cal-body { grid-template-columns: 48px repeat(5, 1fr); height: 360px; }
|
|
.cal-now { left: 48px; }
|
|
.sa-pop { position: static; width: auto; max-width: 100%; box-shadow: var(--shadow-md); }
|
|
.sa-pop::before { display: none; }
|
|
|
|
/* Pricing 3-col → 2-col, reset center card offset */
|
|
.price-grid { grid-template-columns: 1fr 1fr; border-radius: 20px; margin-top: 48px; }
|
|
.pcard { padding: 28px 24px; border-right: 1px solid var(--line-soft); }
|
|
.pcard:nth-child(2n) { border-right: 0; }
|
|
.pcard.ltd { margin: 0; border-radius: 20px; grid-column: 1 / -1; }
|
|
.vs-stamp { display: none; }
|
|
|
|
/* Final CTA */
|
|
.final-cta-card { grid-template-columns: 1fr; gap: 28px; padding: 48px 36px; }
|
|
.final-cta-card h2 { font-size: 32px; margin: 10px 0 14px; }
|
|
.countdown { padding: 18px; }
|
|
|
|
/* Footer */
|
|
.foot { flex-direction: column; gap: 14px; text-align: center; }
|
|
.foot .links { flex-wrap: wrap; justify-content: center; gap: 14px 22px; }
|
|
}
|
|
|
|
/* ---------- ≤767px (mobile) ---------- */
|
|
@media (max-width: 767px) {
|
|
.wrap { padding: 0 18px; }
|
|
|
|
/* Nav */
|
|
.nav-inner { height: 56px; }
|
|
.brand { font-size: 16px; }
|
|
.brand-mark { width: 28px; height: 28px; }
|
|
.nav-cta .btn-ghost { display: none; }
|
|
.nav-cta .btn { padding: 9px 14px; font-size: 13px; }
|
|
|
|
/* Hero */
|
|
.hero { padding: 32px 0 48px; }
|
|
.ltd-badge { font-size: 11.5px; padding: 7px 7px 7px 12px; gap: 8px; flex-wrap: wrap; justify-content: center; }
|
|
.ltd-badge .pill { font-size: 10px; padding: 3px 8px; }
|
|
.hero h1 { font-size: 34px; line-height: 1.08; margin: 18px auto 14px; }
|
|
.hero p.lede { font-size: 15.5px; margin-bottom: 22px; }
|
|
.hero-ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
|
|
.hero-ctas .btn { width: 100%; }
|
|
.btn-lg { padding: 14px 18px; font-size: 14px; }
|
|
.hero-meta { font-size: 12.5px; margin-top: 20px; gap: 10px 18px; }
|
|
|
|
/* Laptop & phone - drop the phone overlay on mobile to avoid overflow */
|
|
.mock-stage { padding-bottom: 0; }
|
|
.phone { display: none; }
|
|
.browser-chrome { padding: 6px 10px; }
|
|
.browser-chrome .url { font-size: 10px; height: 18px; }
|
|
.app-side { width: 40px; }
|
|
.chip { padding: 7px 9px; font-size: 10px; }
|
|
.chip .val { font-size: 11px; }
|
|
.chip-est { min-width: 0; padding: 9px 10px; }
|
|
.chip-est .price { font-size: 15px; }
|
|
|
|
/* Section paddings/typography */
|
|
.sec-ecosystem { padding: 52px 0; }
|
|
.sec-calendar { padding: 24px 0 52px; }
|
|
.sec-pricing { padding: 32px 0 56px; }
|
|
.final-cta { padding: 44px 0; }
|
|
.sec-h { font-size: 26px; margin: 14px 0 12px; }
|
|
.sec-sub { font-size: 14.5px; }
|
|
|
|
/* Ecosystem → 1 col */
|
|
.feature-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
|
|
.feature-card { padding: 22px 20px; }
|
|
.feature-icon { width: 44px; height: 44px; margin-bottom: 16px; }
|
|
.feature-card h3 { font-size: 18px; }
|
|
|
|
/* Calendar - condense */
|
|
.cal-app-head { padding: 12px 14px; }
|
|
.cal-app-head .month { font-size: 15px; }
|
|
.cal-week { grid-template-columns: 40px repeat(5, 1fr); }
|
|
.cal-week .wh { padding: 8px 4px 8px; font-size: 10px; }
|
|
.cal-week .wh b { font-size: 14px; }
|
|
.cal-body { grid-template-columns: 40px repeat(5, 1fr); height: 300px; }
|
|
.cal-now { left: 40px; }
|
|
.cal-time .t { font-size: 9px; }
|
|
.cal-evt { padding: 5px 6px; font-size: 10px; }
|
|
.sa-pop { padding: 14px; }
|
|
|
|
/* Pricing → 1 col stack */
|
|
.price-grid { grid-template-columns: 1fr; border-radius: 18px; }
|
|
.pcard { padding: 26px 22px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
|
|
.pcard:last-child { border-bottom: 0; }
|
|
.pcard .price .amt { font-size: 40px; }
|
|
.pcard.ltd { border-radius: 18px; }
|
|
.ltd-trust { gap: 14px 22px; font-size: 12.5px; margin-top: 28px; }
|
|
|
|
/* Final CTA */
|
|
.final-cta-card { padding: 36px 22px; border-radius: 22px; }
|
|
.final-cta-card h2 { font-size: 26px; }
|
|
.final-cta-card p { font-size: 15px; }
|
|
.countdown .cd-grid { gap: 6px; }
|
|
.countdown .cd-cell { padding: 12px 4px; }
|
|
.countdown .cd-cell .n { font-size: 22px; }
|
|
|
|
/* Footer */
|
|
footer { padding: 36px 0 24px; }
|
|
}
|
|
|
|
/* ---------- ≤479px (small mobile) ---------- */
|
|
@media (max-width: 479px) {
|
|
.hero h1 { font-size: 28px; }
|
|
.sec-h { font-size: 22px; }
|
|
.hero-meta { flex-direction: column; gap: 8px; align-items: center; }
|
|
.feature-card h3 { font-size: 17px; }
|
|
.countdown .cd-cell .n { font-size: 18px; }
|
|
.countdown .cd-cell .l { font-size: 9px; }
|
|
.pcard .price .amt { font-size: 36px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page-bg"></div>
|
|
<div class="grid-overlay"></div>
|
|
|
|
<!-- ============================ NAV ============================ -->
|
|
<nav class="nav">
|
|
<div class="wrap nav-inner">
|
|
<a class="brand" href="https://book.lynkeduppro.com/"><img src="/uploads/lynkedup-logo.png" alt="LynkedUp Pro" class="brand-logo-img" style="height:34px;width:auto;display:block;object-fit:contain"></a>
|
|
<div class="nav-links">
|
|
<a href="#features">Features</a>
|
|
<a href="#calendar">Calendar AI</a>
|
|
<a href="#pricing">Pricing</a>
|
|
</div>
|
|
<div class="nav-cta">
|
|
<a href="https://launch.lynkeduppro.com/" class="btn btn-amber">Watch a demo</a>
|
|
<a href="#pricing" class="btn btn-amber">
|
|
Get the Founders Lifetime Deal
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ============================ HERO ============================ -->
|
|
<section class="hero">
|
|
<div class="wrap hero-grid">
|
|
<div class="hero-copy">
|
|
<span class="ltd-badge">
|
|
<span class="dot"></span>
|
|
Limited Founders Lifetime Deal - only a few licenses left
|
|
</span>
|
|
<h1>
|
|
The all-in-one <span class="accent">operating system</span> for modern <span class="underline">roofing crews</span>.
|
|
</h1>
|
|
<p class="lede">
|
|
LynkedUp Pro unifies estimates, dispatch, LiDAR roof measurements, invoicing, and crew chat, so your contractors stop juggling six tools and start closing 41% more jobs. It's your assistant that never sleeps or takes a day off.
|
|
</p>
|
|
<div class="hero-ctas">
|
|
<a href="#pricing" class="btn btn-amber btn-lg">
|
|
Claim Founders Lifetime Access - $2000
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
|
</a>
|
|
</div>
|
|
<div class="hero-meta">
|
|
|
|
<div>
|
|
<div style="font-size:12px; color: var(--muted); margin-top:2px;">4.9★ · 248 reviews</div>
|
|
</div>
|
|
<div class="check">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
|
|
Founders pricing locked in
|
|
</div>
|
|
<div class="check">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
|
|
No subscription, ever
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mockup -->
|
|
<div class="mock-stage"><img src="/page/assets/dashboard.png" alt="LynkedUp Pro dashboard" style="width:100%;max-width:640px;display:block;border-radius:14px;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 90px -30px rgba(0,0,0,.7);"/></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================ LOGOS ============================ -->
|
|
<section class="logos">
|
|
<div class="wrap logos-inner">
|
|
<div class="logos-label">Trusted by 3,000 roofing and exterior pros</div>
|
|
<div class="logos-row">
|
|
<span class="lg-1">RidgeWorks</span>
|
|
<span class="lg-2">PEAK&SLOPE</span>
|
|
<span class="lg-3">A R T E S A N O</span>
|
|
<span class="lg-4">Stonefield Co.</span>
|
|
<span class="lg-5">NORTHRIDGE</span>
|
|
<span class="lg-1">Skyhaus⌃</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================ ECOSYSTEM ============================ -->
|
|
<section class="sec-ecosystem" id="features">
|
|
<div class="wrap">
|
|
<div class="sec-head-center" style="text-align:center;">
|
|
<span class="eyebrow"><span class="e-dot"></span>One ecosystem. Six native modules.</span>
|
|
<h2 class="sec-h">Everything your crew needs, finally under one roof.</h2>
|
|
<p class="sec-sub">Stop paying for AccuLynx, JobNimbus, QuickBooks, Calendly, Slack, and a measurement add-on. LynkedUp Pro replaces all of them, with deeper integration and no per-seat tax.</p>
|
|
</div>
|
|
|
|
<div class="feature-grid">
|
|
<!-- 1 -->
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="4" width="18" height="18" rx="2"/>
|
|
<path d="M16 2v4M8 2v4M3 10h18"/>
|
|
<path d="M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Intelligent Calendar</h3>
|
|
<p>Auto-dispatch crews based on travel time, weather windows, and material readiness. The schedule books itself.</p>
|
|
<span class="feature-tag">AI-routed</span>
|
|
</div>
|
|
|
|
<!-- 2 -->
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="8.5" cy="7" r="4"/>
|
|
<path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Pipeline CRM</h3>
|
|
<p>Every door-knock, callback, and contract in one timeline. Kanban + map view + SMS, built for roofers, not lawyers.</p>
|
|
<span class="feature-tag mint">+41% close rate</span>
|
|
<span style="position:absolute; right:14px; bottom:12px; font-size:12px; color:var(--muted-2);">*</span>
|
|
</div>
|
|
|
|
<!-- 3 -->
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
|
<path d="M14 2v6h6"/>
|
|
<path d="M9 13h6M9 17h4"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Smart Invoicing</h3>
|
|
<p>Stripe and ACH close the loop, straight to QuickBooks. Send a deposit request from the truck, get paid before the tarps are off.</p>
|
|
<span class="feature-tag">Stripe · ACH · Affirm</span>
|
|
</div>
|
|
|
|
<!-- 4 -->
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
|
<path d="M3 9h18M9 21V9"/>
|
|
<path d="m12 14 2 2 4-4"/>
|
|
</svg>
|
|
</div>
|
|
<h3>LiDAR Estimates</h3>
|
|
<p>Point your phone at the roof. We return precise pitch, area, and material take-off in 30 seconds. No drones, no climbing.</p>
|
|
<span class="feature-tag">±0.4 in accuracy</span>
|
|
<span style="position:absolute; right:14px; bottom:12px; font-size:12px; color:var(--muted-2);">*</span>
|
|
</div>
|
|
|
|
<!-- 5 -->
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
|
<path d="M8 9h8M8 13h5"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Crew Chat & Files</h3>
|
|
<p>Photos, contracts, change orders, all attached to the job, not lost in a group text. Works offline at the site.</p>
|
|
<span class="feature-tag mint">Offline-first</span>
|
|
</div>
|
|
|
|
<!-- 6 -->
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M3 3v18h18"/>
|
|
<path d="m7 14 4-4 4 4 5-5"/>
|
|
<path d="M16 9h4v4"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Owner's Box</h3>
|
|
<p>Job-level margin, crew utilization, and supplier waste, surfaced as one number you can actually act on.</p>
|
|
<span class="feature-tag amber">Owner dashboard</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================ CALENDAR WALKTHROUGH ============================ -->
|
|
<section class="sec-calendar" id="calendar">
|
|
<div class="wrap">
|
|
<div class="cal-grid">
|
|
<div>
|
|
<span class="eyebrow"><span class="e-dot" style="background:linear-gradient(135deg,#fde68a,#f59e0b)"></span>Module · Intelligent Calendar</span>
|
|
<h2 class="sec-h">A calendar that reschedules itself before you even notice.</h2>
|
|
<p class="sec-sub">LynkedUp watches weather, traffic, crew load, and material arrival in real time, then suggests one-tap fixes so a 7:32 AM thunderstorm doesn't blow up your whole Tuesday.</p>
|
|
|
|
<div class="cal-points">
|
|
<div class="cal-point">
|
|
<div class="pi">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
|
|
</div>
|
|
<div>
|
|
<h4>Weather-aware dispatch</h4>
|
|
<p>Pulls hyperlocal forecasts every 15 minutes and flags jobs at risk before rain hits the deck.</p>
|
|
</div>
|
|
</div>
|
|
<div class="cal-point">
|
|
<div class="pi mint">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
</div>
|
|
<div>
|
|
<h4>Travel-optimized routing</h4>
|
|
<p>Cuts dead-mileage by ~22% by clustering nearby estimates and matching the closest available crew.</p>
|
|
</div>
|
|
</div>
|
|
<div class="cal-point">
|
|
<div class="pi amber">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 2 7l10 5 10-5z"/><path d="m2 17 10 5 10-5"/><path d="m2 12 10 5 10-5"/></svg>
|
|
</div>
|
|
<div>
|
|
<h4>Material readiness sync</h4>
|
|
<p>If the shingles are still at ABC Supply, the job politely refuses to schedule. No more wasted trucks.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calendar UI -->
|
|
<div class="cal-app">
|
|
<div class="cal-app-head">
|
|
<div class="month">November 2026 <span>· Week 47</span></div>
|
|
<div class="controls">
|
|
<div class="seg">
|
|
<button>Day</button>
|
|
<button class="on">Week</button>
|
|
<button>Month</button>
|
|
</div>
|
|
<button class="nav-btn">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="m15 18-6-6 6-6"/></svg>
|
|
</button>
|
|
<button class="nav-btn">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="m9 18 6-6-6-6"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cal-week">
|
|
<div class="wh"></div>
|
|
<div class="wh">Mon<b>17</b></div>
|
|
<div class="wh today">Tue<b>18</b></div>
|
|
<div class="wh">Wed<b>19</b></div>
|
|
<div class="wh">Thu<b>20</b></div>
|
|
<div class="wh">Fri<b>21</b></div>
|
|
</div>
|
|
|
|
<div class="cal-body">
|
|
<div class="cal-time">
|
|
<div class="t">7 AM</div>
|
|
<div class="t">8 AM</div>
|
|
<div class="t">9 AM</div>
|
|
<div class="t">10 AM</div>
|
|
<div class="t">11 AM</div>
|
|
<div class="t">12 PM</div>
|
|
<div class="t">1 PM</div>
|
|
</div>
|
|
|
|
<div class="cal-col">
|
|
<div class="cal-evt mint" style="top:30px; height:88px;">
|
|
<div class="t">Reynolds - Tear-off</div>
|
|
<div class="s">Crew A · 7:30-9:30</div>
|
|
</div>
|
|
<div class="cal-evt" style="top:150px; height:55px;">
|
|
<div class="t">Materials drop</div>
|
|
<div class="s">ABC Supply</div>
|
|
</div>
|
|
<div class="cal-evt amber" style="top:240px; height:72px;">
|
|
<div class="t">Vasquez estimate</div>
|
|
<div class="s">11:00 · 18 min away</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cal-col">
|
|
<div class="cal-evt amber" style="top:18px; height:72px;">
|
|
<div class="t">Patel - Inspection</div>
|
|
<div class="s">7:30 · LiDAR ready</div>
|
|
</div>
|
|
<div class="cal-evt" style="top:110px; height:52px;">
|
|
<div class="t">Kim - Estimate</div>
|
|
<div class="s">10:00 · 22 min</div>
|
|
</div>
|
|
<div class="cal-evt mint" style="top:200px; height:140px;">
|
|
<div class="t">Anderson - Install</div>
|
|
<div class="s">Diego R. · 10:30-1:00</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cal-col">
|
|
<div class="cal-evt" style="top:65px; height:80px;">
|
|
<div class="t">Reynolds - Underlayment</div>
|
|
<div class="s">Crew A · cont.</div>
|
|
</div>
|
|
<div class="cal-evt slate" style="top:165px; height:48px;">
|
|
<div class="t">Lunch break</div>
|
|
<div class="s">All crews</div>
|
|
</div>
|
|
<div class="cal-evt" style="top:230px; height:90px;">
|
|
<div class="t">Bennett - Shingle</div>
|
|
<div class="s">Crew C</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cal-col">
|
|
<div class="cal-evt amber" style="top:35px; height:60px;">
|
|
<div class="t">Storm assessment</div>
|
|
<div class="s">3 leads queued</div>
|
|
</div>
|
|
<div class="cal-evt" style="top:125px; height:75px;">
|
|
<div class="t">McKenna estimate</div>
|
|
<div class="s">9:30 · drone</div>
|
|
</div>
|
|
<div class="cal-evt mint" style="top:220px; height:90px;">
|
|
<div class="t">Anderson - Cleanup</div>
|
|
<div class="s">Diego R.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cal-col">
|
|
<div class="cal-evt" style="top:50px; height:90px;">
|
|
<div class="t">Office: payroll</div>
|
|
<div class="s">Admin</div>
|
|
</div>
|
|
<div class="cal-evt mint" style="top:155px; height:170px;">
|
|
<div class="t">Whitfield - Full re-roof</div>
|
|
<div class="s">All crews · 9:30-1:00</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- now line -->
|
|
<div class="cal-now" style="top:96px;">
|
|
<span class="nlabel">8:35</span>
|
|
</div>
|
|
|
|
<!-- Suggested actions popover (anchored to Tue Patel event area) -->
|
|
<div class="sa-pop">
|
|
<div class="sa-head">
|
|
<div class="ai-mark">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z"/></svg>
|
|
</div>
|
|
<div class="ti">
|
|
Suggested actions
|
|
<span>LynkedUp AI · just now</span>
|
|
</div>
|
|
<div class="close">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 6 6 18M6 6l12 12"/></svg>
|
|
</div>
|
|
</div>
|
|
<p class="body">
|
|
<b>Traffic is moderate</b> on I-70 between Patel and Kim, adding ~14 min. Shift Kim's estimate to <span class="hl">9:45 AM</span> and route Crew A through Cherry Creek to save <b>22 min</b> of dead-mileage.
|
|
</p>
|
|
<div class="sa-actions">
|
|
<button class="sa-btn">Dismiss</button>
|
|
<button class="sa-btn primary">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
|
|
Apply changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================ PRICING ============================ -->
|
|
<!-- ============================ PRICING ============================ -->
|
|
<section class="roofing-offer-section" id="pricing">
|
|
<div class="container">
|
|
|
|
<!-- TOP HEADING -->
|
|
<div class="text-center roofing-heading mb-5">
|
|
<span class="offer-badge">🔥 Limited Founder Offer</span>
|
|
<h2>Own Your Roofing CRM. Pay Once.</h2>
|
|
<p>Stop paying monthly for multiple disconnected tools. Get founders lifetime access
|
|
to LynkedUpPro and scale your roofing business with one intelligent platform.</p>
|
|
</div>
|
|
|
|
<!-- MAIN GRID -->
|
|
<div class="row g-4 align-items-stretch">
|
|
|
|
<!-- LEFT CARD -->
|
|
<div class="col-lg-6">
|
|
<div class="lifetime-card h-100">
|
|
<div class="popular-tag">MOST POPULAR</div>
|
|
<h3>Founders Lifetime Access</h3>
|
|
<p class="small-text">One payment. Unlimited operational control.</p>
|
|
<div class="price-box">
|
|
<h2>$2000<sup style="font-size:18px;font-weight:600;color:#8d8d8d;vertical-align:super;">**</sup></h2>
|
|
<span>PAY ONCE • USE FOREVER</span>
|
|
</div>
|
|
<ul class="feature-list">
|
|
<li>Complete Roofing CRM</li>
|
|
<li>Lead Management System</li>
|
|
<li>Canvassing & Field Tracking</li>
|
|
<li>Insurance Workflow</li>
|
|
<li>Proposal & Inspection Tools</li>
|
|
<li>Team Management Dashboard</li>
|
|
<li>Unlimited Projects</li>
|
|
<li>Future Feature Updates</li>
|
|
<li>Priority Support</li>
|
|
</ul>
|
|
<a href="https://book.lynkeduppro.com/" class="deal-btn">Claim Founders Lifetime Deal</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT CARD -->
|
|
<div class="col-lg-6">
|
|
<div class="roofing-info-card h-100">
|
|
<span class="mini-badge">Why Roofers Choose LynkedUpPro</span>
|
|
<h3>Replace 5 Different Tools With One Roofing OS</h3>
|
|
<p class="info-para">Most roofing companies spend thousands yearly on disconnected
|
|
CRMs, canvassing apps, spreadsheets, proposal software, and field coordination tools.</p>
|
|
<div class="info-box">
|
|
<h5>More Revenue Visibility</h5>
|
|
<p>Track leads, conversions, and team performance from one dashboard.</p>
|
|
</div>
|
|
<div class="info-box">
|
|
<h5>Less Operational Chaos</h5>
|
|
<p>Eliminate scattered communication and disconnected workflows.</p>
|
|
</div>
|
|
<div class="info-box">
|
|
<h5>Built for Roofing Teams</h5>
|
|
<p>Purpose-built for storm restoration, canvassing, insurance, and roofing operations.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- TERMS (native <details> accordion - no JS needed) -->
|
|
<div class="terms-wrapper mt-4">
|
|
<details class="custom-accordion-item">
|
|
<summary class="accordion-button">Deal Terms & Conditions</summary>
|
|
<div class="accordion-body">
|
|
<div class="deal-terms-legal" style="font-size:12px;line-height:1.65;color:#444">
|
|
<p style="margin:0 0 10px">All claims, results, performance statements, platform capabilities, and customer references are provided for informational and promotional purposes only. Claims may be based on a combination of internal testing, platform development data, field-tested data, and feedback from founding users. Individual results may vary based on company size, user adoption, data quality, market conditions, workflow setup, and other business-specific factors.</p>
|
|
<p style="margin:0 0 10px">Some user names, company names, examples, or identifying details may have been changed, modified, or withheld to protect user privacy, confidential business information, proprietary workflows, and trade secrets.</p>
|
|
<p style="margin:0 0 10px">The Lifetime Founders License applies to one user license and one individual user account unless otherwise stated in writing. The Founders License includes access to core CRM features and the platform features made available under the applicable license terms. The Lifetime Founders License does not guarantee access to every future product, premium module, third-party integration, usage-based service, or separately priced feature.</p>
|
|
<p style="margin:0 0 10px">SMS usage, data usage, storage, GPU processing, AI compute, automation volume, messaging volume, third-party API costs, and other usage-based services may incur additional monthly charges. These charges may be billed separately based on actual usage, service level, selected features, or third-party provider costs.</p>
|
|
<p style="margin:0 0 10px">Advanced or specialized features, including but not limited to Campaign-X, LiDAR scans, digital twin technology, AI-generated content, 3D property scans, mapping tools, premium automation, and other enhanced modules, may require additional fees, setup costs, subscriptions, or usage-based billing.</p>
|
|
<p style="margin:0">Features, pricing, availability, and platform capabilities are subject to change. No statement shall be interpreted as a guarantee of revenue, cost savings, insurance savings, operational results, business growth, or specific customer outcomes. Use of the platform is subject to the final written agreement, subscription terms, billing terms, and applicable service terms provided by Lynked Up Technologies.</p>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<div class="roofing-cta-box mt-5 text-center">
|
|
<h2>Roofing Moves Fast. Your CRM Should Too.</h2>
|
|
<p>Join the next generation of roofing companies scaling with automation,
|
|
field intelligence, and operational visibility.</p>
|
|
<div class="cta-btn-group">
|
|
<a href="https://book.lynkeduppro.com/" class="start-btn">Start Founders Lifetime Access</a>
|
|
<a href="https://www.lynkeduppro.com/contact" class="sales-btn">Book a demo</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
/* ===== Roofing Offer / Pricing - compact, self-contained ===== */
|
|
.roofing-offer-section{
|
|
padding:64px 0;
|
|
background:
|
|
radial-gradient(circle at top left, #8c4a13 0%, transparent 35%),
|
|
radial-gradient(circle at bottom right, #1597e5 0%, transparent 35%),
|
|
#1a120d;
|
|
overflow:hidden; position:relative;
|
|
}
|
|
.roofing-offer-section .container{max-width:1120px;margin:0 auto;padding:0 20px;}
|
|
.roofing-offer-section .row{display:flex;flex-wrap:wrap;margin:0 -12px;}
|
|
.roofing-offer-section .row.g-4{margin:-12px;}
|
|
.roofing-offer-section .row.g-4 > [class*="col-"]{padding:12px;}
|
|
.roofing-offer-section .col-lg-6{flex:0 0 50%;max-width:50%;padding:0 12px;}
|
|
.roofing-offer-section .align-items-stretch{align-items:stretch;}
|
|
.roofing-offer-section .h-100{height:100%;}
|
|
.roofing-offer-section .text-center{text-align:center;}
|
|
.roofing-offer-section .mb-5{margin-bottom:36px;}
|
|
.roofing-offer-section .mt-4{margin-top:20px;}
|
|
.roofing-offer-section .mt-5{margin-top:36px;}
|
|
.roofing-offer-section .roofing-heading h2{font-size:38px;font-weight:800;line-height:1.15;color:#fff;margin-top:14px;}
|
|
.roofing-offer-section .roofing-heading p{color:#d7d7d7;max-width:620px;margin:12px auto 0;font-size:15px;line-height:1.55;}
|
|
.roofing-offer-section .offer-badge{display:inline-block;padding:6px 14px;border-radius:40px;background:rgba(255,255,255,0.08);color:#fff;font-size:12px;font-weight:600;}
|
|
.roofing-offer-section .lifetime-card{position:relative;background:linear-gradient(180deg,#12121b,#0d0d14);border-radius:20px;padding:28px;border:1px solid rgba(255,255,255,0.08);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.35);}
|
|
.roofing-offer-section .popular-tag{position:absolute;top:16px;right:-45px;background:linear-gradient(90deg,#ff8b1e,#53c7ff);color:#fff;font-size:10px;font-weight:700;padding:6px 50px;transform:rotate(40deg);}
|
|
.roofing-offer-section .lifetime-card h3{color:#fff;font-size:22px;font-weight:700;margin:0;}
|
|
.roofing-offer-section .small-text{color:#b7b7b7;font-size:13.5px;margin:4px 0 18px;}
|
|
.roofing-offer-section .price-box h2{color:#fff;font-size:48px;font-weight:800;line-height:1;margin-bottom:4px;}
|
|
.roofing-offer-section .price-box span{color:#8d8d8d;font-size:12px;letter-spacing:1px;}
|
|
.roofing-offer-section .feature-list{padding:0;margin:24px 0;list-style:none;}
|
|
.roofing-offer-section .feature-list li{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.05);border-radius:11px;padding:10px 14px;margin-bottom:9px;color:#fff;font-size:13.5px;position:relative;padding-left:42px;}
|
|
.roofing-offer-section .feature-list li::before{content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:11px;}
|
|
.roofing-offer-section .deal-btn{display:inline-block;padding:12px 24px;border-radius:12px;text-decoration:none;color:#fff;font-size:14px;font-weight:700;background:linear-gradient(90deg,#ff9321,#4dc5ff);box-shadow:0 10px 25px rgba(0,0,0,0.3);}
|
|
.roofing-offer-section .roofing-info-card{border-radius:20px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03)),linear-gradient(180deg,#d6892d,#0d99f1);backdrop-filter:blur(10px);color:#fff;}
|
|
.roofing-offer-section .mini-badge{display:inline-block;background:rgba(255,255,255,0.2);padding:6px 14px;border-radius:40px;font-size:12px;font-weight:600;margin-bottom:16px;}
|
|
.roofing-offer-section .roofing-info-card h3{font-size:26px;font-weight:800;line-height:1.2;margin-bottom:16px;}
|
|
.roofing-offer-section .info-para{color:rgba(255,255,255,0.85);font-size:14px;line-height:1.55;margin-bottom:20px;}
|
|
.roofing-offer-section .info-box{background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;margin-bottom:12px;backdrop-filter:blur(8px);}
|
|
.roofing-offer-section .info-box h5{font-size:16px;font-weight:700;margin:0 0 5px;}
|
|
.roofing-offer-section .info-box p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.9);}
|
|
.roofing-offer-section .terms-wrapper .custom-accordion-item{background:#fff;border-radius:14px;overflow:hidden;border:none;}
|
|
.roofing-offer-section summary.accordion-button{list-style:none;cursor:pointer;background:#fff;padding:16px 20px;font-size:15px;font-weight:700;color:#111;display:flex;justify-content:space-between;align-items:center;}
|
|
.roofing-offer-section summary.accordion-button::-webkit-details-marker{display:none;}
|
|
.roofing-offer-section .accordion-body{background:#fff;padding:8px 20px 20px;}
|
|
.roofing-offer-section .accordion-body ul{margin:0;padding-left:20px;}
|
|
.roofing-offer-section .accordion-body li{margin-bottom:10px;color:#444;font-size:13.5px;}
|
|
.roofing-offer-section .deal-terms-list{list-style:none;padding-left:0;margin:0;}
|
|
.roofing-offer-section .deal-terms-list li{margin-bottom:10px;color:#444;font-size:13.5px;line-height:1.5;}
|
|
.roofing-offer-section .roofing-cta-box{padding:44px 32px;border-radius:22px;background:linear-gradient(90deg,rgba(255,140,0,0.25),rgba(20,150,255,0.22));backdrop-filter:blur(10px);}
|
|
.roofing-offer-section .roofing-cta-box h2{color:#fff;font-size:32px;font-weight:800;line-height:1.2;margin-bottom:12px;}
|
|
.roofing-offer-section .roofing-cta-box p{color:#d7d7d7;max-width:620px;margin:auto;font-size:15px;line-height:1.55;}
|
|
.roofing-offer-section .cta-btn-group{margin-top:26px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
|
|
.roofing-offer-section .start-btn,.roofing-offer-section .sales-btn{padding:12px 24px;border-radius:12px;text-decoration:none;font-size:14px;font-weight:700;transition:0.3s;}
|
|
.roofing-offer-section .start-btn{background:linear-gradient(90deg,#ff9321,#4dc5ff);color:#fff;}
|
|
.roofing-offer-section .sales-btn{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.1);}
|
|
.roofing-offer-section .start-btn:hover,.roofing-offer-section .sales-btn:hover{transform:translateY(-3px);}
|
|
@media (max-width:991px){
|
|
.roofing-offer-section .col-lg-6{flex:0 0 100%;max-width:100%;}
|
|
.roofing-offer-section .roofing-heading h2{font-size:32px;}
|
|
.roofing-offer-section .roofing-cta-box h2{font-size:28px;}
|
|
.roofing-offer-section .price-box h2{font-size:44px;}
|
|
}
|
|
@media (max-width:767px){
|
|
.roofing-offer-section{padding:48px 0;}
|
|
.roofing-offer-section .roofing-heading h2{font-size:27px;}
|
|
.roofing-offer-section .roofing-info-card h3{font-size:23px;}
|
|
.roofing-offer-section .roofing-cta-box h2{font-size:24px;}
|
|
.roofing-offer-section .lifetime-card,
|
|
.roofing-offer-section .roofing-info-card,
|
|
.roofing-offer-section .roofing-cta-box{padding:22px;}
|
|
.roofing-offer-section .price-box h2{font-size:40px;}
|
|
}
|
|
</style>
|
|
|
|
|
|
<!-- ============================ FINAL CTA ============================ -->
|
|
<section class="final-cta">
|
|
<div class="wrap">
|
|
<div class="final-cta-card">
|
|
<div>
|
|
<span class="ltd-badge">
|
|
<span class="dot"></span>
|
|
Founders Lifetime Deal closes in
|
|
</span>
|
|
<h2>The last roofing CRM you'll ever buy.</h2>
|
|
<p>Join 3,000+ contractors who've ditched their monthly stack. One payment, one platform, one less thing to think about every billing cycle.</p>
|
|
<div class="hero-ctas">
|
|
<a href="#pricing" class="btn btn-amber btn-lg">
|
|
Claim Founders Lifetime Deal - $2000
|
|
</a>
|
|
<a href="https://book.lynkeduppro.com/" class="btn btn-ghost btn-lg">Book a demo</a>
|
|
</div>
|
|
</div>
|
|
<div class="countdown">
|
|
<div class="cdh"><span class="d"></span>Deal ends Friday 11:59 PM PT</div>
|
|
<div class="cd-grid">
|
|
<div class="cd-cell"><div class="n" id="cd-d">03</div><div class="l">Days</div></div>
|
|
<div class="cd-cell"><div class="n" id="cd-h">14</div><div class="l">Hours</div></div>
|
|
<div class="cd-cell"><div class="n" id="cd-m">27</div><div class="l">Mins</div></div>
|
|
<div class="cd-cell"><div class="n" id="cd-s">42</div><div class="l">Secs</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- FLOATING LIFETIME DEAL BUTTON -->
|
|
<a href="#pricing" id="floatingDealBtn">
|
|
🔥 Founders Lifetime Deal - $2000
|
|
</a>
|
|
|
|
<style>
|
|
#floatingDealBtn {
|
|
position: fixed;
|
|
right: 24px;
|
|
bottom: 24px;
|
|
background: linear-gradient(135deg,#0ea5e9,#2563eb);
|
|
color: white;
|
|
padding: 16px 24px;
|
|
border-radius: 999px;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
box-shadow: 0 10px 30px rgba(14,165,233,0.35);
|
|
z-index: 9999;
|
|
transition: all 0.3s ease;
|
|
animation: floatPulse 2s infinite;
|
|
}
|
|
|
|
#floatingDealBtn:hover {
|
|
transform: translateY(-4px) scale(1.03);
|
|
box-shadow: 0 16px 40px rgba(14,165,233,0.45);
|
|
}
|
|
|
|
@keyframes floatPulse {
|
|
0% {
|
|
transform: translateY(0px);
|
|
}
|
|
50% {
|
|
transform: translateY(-6px);
|
|
}
|
|
100% {
|
|
transform: translateY(0px);
|
|
}
|
|
}
|
|
|
|
@media(max-width:768px) {
|
|
#floatingDealBtn {
|
|
right: 16px;
|
|
bottom: 16px;
|
|
padding: 14px 18px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
</style>
|
|
<footer>
|
|
<div class="wrap foot">
|
|
<div>© 2026 LynkedUp Inc · Built for roofers, by ex-roofers.</div>
|
|
</div>
|
|
<div class="wrap" style="margin-top:18px; color:var(--muted-2); font-size:11px; line-height:1.5;">
|
|
<p style="margin:0;">* Figures shown are illustrative and reflect beta-period targets; individual results vary.</p>
|
|
<p style="margin:4px 0 0;">** Founders Lifetime Deal is a one-time payment; limited founding-member availability.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<div id="tweaks-root"></div>
|
|
|
|
<script>
|
|
// Live countdown
|
|
(function(){
|
|
const s = document.getElementById('cd-s');
|
|
const m = document.getElementById('cd-m');
|
|
let secs = 42, mins = 27;
|
|
setInterval(() => {
|
|
secs--;
|
|
if (secs < 0) { secs = 59; mins--; if (mins < 0) mins = 59; }
|
|
s.textContent = String(secs).padStart(2,'0');
|
|
m.textContent = String(mins).padStart(2,'0');
|
|
}, 1000);
|
|
})();
|
|
|
|
// Tweaks panel - accent color, glass blur strength
|
|
(function(){
|
|
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
|
|
"accentBlue": "#0284c7",
|
|
"accentAmber": "#ef4444",
|
|
"glassBlur": 2,
|
|
"showGrid": true
|
|
}/*EDITMODE-END*/;
|
|
|
|
let state = { ...TWEAK_DEFAULTS };
|
|
let active = false;
|
|
const root = document.getElementById('tweaks-root');
|
|
|
|
function applyState() {
|
|
document.documentElement.style.setProperty('--blue', state.accentBlue);
|
|
document.documentElement.style.setProperty('--amber', state.accentAmber);
|
|
// glass blur
|
|
document.querySelectorAll('.feature-card, .chip, .sa-pop, .nav, .ltd-badge').forEach(el => {
|
|
el.style.backdropFilter = `blur(${state.glassBlur}px) saturate(150%)`;
|
|
el.style.webkitBackdropFilter = `blur(${state.glassBlur}px) saturate(150%)`;
|
|
});
|
|
document.querySelector('.grid-overlay').style.display = state.showGrid ? '' : 'none';
|
|
}
|
|
applyState();
|
|
|
|
function render() {
|
|
if (!active) { root.innerHTML = ''; return; }
|
|
root.innerHTML = `
|
|
<div style="width:280px; background:rgba(255,255,255,.95); backdrop-filter:blur(20px); border:1px solid #e2e8f0; border-radius:16px; box-shadow:0 30px 60px -20px rgba(15,23,42,.25); padding:16px; font-family:'Plus Jakarta Sans';">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;">
|
|
<strong style="font-size:14px; letter-spacing:-.01em;">Tweaks</strong>
|
|
<button id="tw-close" style="border:0; background:transparent; cursor:pointer; color:#64748b;">✕</button>
|
|
</div>
|
|
|
|
<div style="font-size:11px; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;">Primary blue</div>
|
|
<div style="display:flex; gap:6px; margin-bottom:14px;">
|
|
${['#0284c7','#2563eb','#7c3aed','#0f766e'].map(c => `<button data-blue="${c}" style="flex:1; height:30px; border-radius:8px; border:2px solid ${state.accentBlue===c?'#0f172a':'transparent'}; background:${c}; cursor:pointer;"></button>`).join('')}
|
|
</div>
|
|
|
|
<div style="font-size:11px; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;">LTD accent</div>
|
|
<div style="display:flex; gap:6px; margin-bottom:14px;">
|
|
${['#f59e0b','#ef4444','#ec4899','#84cc16'].map(c => `<button data-amber="${c}" style="flex:1; height:30px; border-radius:8px; border:2px solid ${state.accentAmber===c?'#0f172a':'transparent'}; background:${c}; cursor:pointer;"></button>`).join('')}
|
|
</div>
|
|
|
|
<div style="font-size:11px; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;">Glass blur · ${state.glassBlur}px</div>
|
|
<input type="range" min="0" max="24" value="${state.glassBlur}" id="tw-blur" style="width:100%; margin-bottom:14px;">
|
|
|
|
<label style="display:flex; align-items:center; gap:8px; font-size:13px; color:#1e293b; cursor:pointer;">
|
|
<input type="checkbox" id="tw-grid" ${state.showGrid?'checked':''}/>
|
|
Show background grid
|
|
</label>
|
|
</div>
|
|
`;
|
|
root.querySelector('#tw-close').onclick = () => {
|
|
active = false; render();
|
|
window.parent.postMessage({type:'__edit_mode_dismissed'}, '*');
|
|
};
|
|
root.querySelectorAll('[data-blue]').forEach(b => b.onclick = () => {
|
|
state.accentBlue = b.dataset.blue; applyState(); render();
|
|
window.parent.postMessage({type:'__edit_mode_set_keys', edits:{accentBlue: state.accentBlue}}, '*');
|
|
});
|
|
root.querySelectorAll('[data-amber]').forEach(b => b.onclick = () => {
|
|
state.accentAmber = b.dataset.amber; applyState(); render();
|
|
window.parent.postMessage({type:'__edit_mode_set_keys', edits:{accentAmber: state.accentAmber}}, '*');
|
|
});
|
|
root.querySelector('#tw-blur').oninput = (e) => {
|
|
state.glassBlur = parseInt(e.target.value); applyState(); render();
|
|
window.parent.postMessage({type:'__edit_mode_set_keys', edits:{glassBlur: state.glassBlur}}, '*');
|
|
};
|
|
root.querySelector('#tw-grid').onchange = (e) => {
|
|
state.showGrid = e.target.checked; applyState(); render();
|
|
window.parent.postMessage({type:'__edit_mode_set_keys', edits:{showGrid: state.showGrid}}, '*');
|
|
};
|
|
}
|
|
|
|
window.addEventListener('message', (e) => {
|
|
if (e.data?.type === '__activate_edit_mode') { active = true; render(); }
|
|
if (e.data?.type === '__deactivate_edit_mode') { active = false; render(); }
|
|
});
|
|
window.parent.postMessage({type:'__edit_mode_available'}, '*');
|
|
})();
|
|
</script>
|
|
|
|
<!-- Hosted checkout (Stripe) for the "Claim Founders Lifetime Deal" button -->
|
|
<script src="/square-checkout.js"></script>
|
|
|
|
</body>
|
|
</html>
|