/* ============================================================= VERTEX — Multipurpose HTML Theme Shared design system. Each homepage sets --accent / --accent-2 (and optionally .dark on ) to reskin the whole page. ============================================================= */ :root { --accent: #6d5efc; --accent-2: #00c2ff; --grad: linear-gradient(135deg, var(--accent), var(--accent-2)); --bg: #ffffff; --bg-alt: #f6f7fb; --fg: #131629; --muted: #626784; --card: #ffffff; --border: #e7e9f2; --radius: 16px; --shadow-sm: 0 4px 18px rgba(20, 22, 45, .06); --shadow: 0 18px 50px rgba(20, 22, 45, .10); --shadow-lg: 0 30px 70px rgba(20, 22, 45, .14); --f-head: 'Space Grotesk', sans-serif; --f-body: 'Inter', sans-serif; --maxw: 1180px; } /* dark variant */ body.dark { --bg: #0a0c16; --bg-alt: #10131f; --fg: #eef0fb; --muted: #9aa0bd; --card: rgba(255,255,255,.04); --border: rgba(255,255,255,.09); --shadow-sm: 0 4px 18px rgba(0,0,0,.4); --shadow: 0 18px 50px rgba(0,0,0,.5); --shadow-lg: 0 30px 70px rgba(0,0,0,.55); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--f-body); background: var(--bg); color: var(--fg); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1,h2,h3,h4,h5 { font-family: var(--f-head); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } section { position: relative; } .container { width: min(var(--maxw), 92%); margin: 0 auto; } .grad-text { background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .center { text-align: center; } .muted { color: var(--muted); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 12px; font-family: var(--f-body); font-weight: 600; font-size: 15px; cursor: pointer; border: 1px solid transparent; transition: transform .2s, box-shadow .2s, background .2s, color .2s; white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 8px 26px rgba(109,94,252,.32); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(109,94,252,.45); } .btn-outline { border-color: var(--border); color: var(--fg); background: transparent; } .btn-outline:hover { border-color: var(--accent); color: var(--accent); } .btn-solid { background: var(--fg); color: var(--bg); } .btn-solid:hover { transform: translateY(-2px); } .btn-lg { padding: 16px 34px; font-size: 16px; } .btn-sm { padding: 9px 18px; font-size: 14px; border-radius: 10px; } /* ---------- chips / badges ---------- */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 100px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); letter-spacing: .02em; } .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .pill { display:inline-block; padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 700; background: var(--bg-alt); color: var(--muted); } /* ---------- navbar ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--f-head); font-weight: 700; font-size: 21px; } .brand .mark { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #fff; font-size: 19px; box-shadow: 0 6px 18px rgba(109,94,252,.4); } .nav-links { display: flex; gap: 30px; } .nav-links a { color: var(--muted); font-size: 15px; font-weight: 500; transition: color .2s; } .nav-links a:hover { color: var(--fg); } .nav-actions { display: flex; align-items: center; gap: 12px; } .nav-toggle { display: none; background: none; border: none; font-size: 26px; color: var(--fg); cursor: pointer; } @media (max-width: 900px) { .nav-links { position: absolute; top: 74px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border); flex-direction: column; padding: 18px 6%; gap: 16px; display: none; } .nav-links.open { display: flex; } .nav-toggle { display: block; } .nav-actions .btn:not(.nav-toggle) { display: none; } } /* ---------- hero ---------- */ .hero { padding: 96px 0 84px; } .hero-center { text-align: center; } .hero h1 { font-size: clamp(38px, 6vw, 68px); margin-bottom: 22px; } .hero p.lead { font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: 620px; margin-bottom: 34px; } .hero-center p.lead { margin-left: auto; margin-right: auto; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } .hero-center .hero-cta { justify-content: center; } .hero-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; } @media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; gap: 40px; } } /* decorative background */ .bg-glow::before { content:''; position:absolute; inset:0; z-index:-1; background: radial-gradient(600px 340px at 15% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%), radial-gradient(560px 360px at 90% 10%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 62%); } .bg-alt { background: var(--bg-alt); } /* visual placeholder (buyer swaps for real image) */ .visual { border-radius: 22px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); position: relative; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; } .visual::after { content:''; position:absolute; inset:0; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 45%), radial-gradient(circle at 75% 70%, rgba(255,255,255,.18), transparent 42%); } .visual.tall { aspect-ratio: 3/4; } .visual.wide { aspect-ratio: 16/9; } .visual .vlabel { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-family: var(--f-head); font-weight:700; font-size: 20px; opacity:.85; z-index:1; text-align:center; padding: 20px; } .imgph { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 16px; aspect-ratio: 4/3; display:grid; place-items:center; color: var(--muted); font-size: 14px; overflow:hidden; } /* ---------- section heading ---------- */ .section { padding: 90px 0; } .section-head { max-width: 620px; margin: 0 auto 56px; text-align: center; } .section-head h2 { font-size: clamp(28px, 4vw, 42px); margin: 14px 0 14px; } .section-head p { color: var(--muted); font-size: 17px; } /* ---------- grids ---------- */ .grid { display: grid; gap: 24px; } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } } /* ---------- cards ---------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s, border-color .25s; } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .card .ico { width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); display: grid; place-items: center; font-size: 24px; margin-bottom: 18px; } .card h3 { font-size: 19px; margin-bottom: 9px; } .card p { color: var(--muted); font-size: 15px; } /* feature row w/ number */ .step { counter-increment: step; } .step .num { font-family: var(--f-head); font-weight: 700; font-size: 15px; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; display: grid; place-items: center; margin-bottom: 16px; } /* ---------- stats ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } @media (max-width: 620px) { .stats { grid-template-columns: repeat(2,1fr); } } .stat .n { font-family: var(--f-head); font-weight: 700; font-size: clamp(32px, 4vw, 46px); } .stat .l { color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; } /* ---------- testimonials ---------- */ .quote { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); } .quote p { font-size: 16px; margin-bottom: 20px; } .quote .who { display: flex; align-items: center; gap: 12px; } .avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #fff; font-weight: 700; font-family: var(--f-head); } .quote .who b { display: block; font-size: 15px; } .quote .who span { color: var(--muted); font-size: 13px; } .stars { color: #ffb020; font-size: 15px; margin-bottom: 14px; } /* ---------- pricing ---------- */ .price-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; position: relative; } .price-card.hot { border-color: var(--accent); box-shadow: var(--shadow); transform: scale(1.03); } @media (max-width: 620px){ .price-card.hot { transform:none; } } .price-card .tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 16px; border-radius: 100px; text-transform: uppercase; letter-spacing: .04em; } .price-card h3 { font-size: 20px; } .price-card .amt { font-family: var(--f-head); font-weight: 700; font-size: 44px; margin: 16px 0 4px; } .price-card .amt span { font-size: 15px; color: var(--muted); font-family: var(--f-body); font-weight: 400; } .price-card ul { list-style: none; margin: 22px 0 28px; flex: 1; } .price-card li { padding: 8px 0; font-size: 14.5px; color: var(--muted); display: flex; gap: 10px; } .price-card li::before { content: '✓'; color: var(--accent); font-weight: 700; } /* ---------- gallery ---------- */ .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 700px){ .gallery { grid-template-columns: repeat(2,1fr);} } .gallery .visual { aspect-ratio: 1; box-shadow: var(--shadow-sm); } /* ---------- CTA band ---------- */ .cta { border-radius: 26px; padding: 66px 40px; text-align: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; position: relative; overflow: hidden; } .cta::after { content:''; position:absolute; inset:0; background: radial-gradient(500px 200px at 50% 0%, rgba(255,255,255,.22), transparent 70%); } .cta h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; position: relative; } .cta p { opacity: .9; margin-bottom: 28px; position: relative; } .cta .btn-solid { background: #fff; color: var(--fg); position: relative; } /* ---------- forms ---------- */ .input { width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 15px; outline: none; transition: border-color .2s, box-shadow .2s; } .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .field { margin-bottom: 16px; } .field label { display:block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; } /* ---------- footer ---------- */ footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 60px 0 30px; } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 40px; } @media (max-width: 800px){ .foot-grid { grid-template-columns: 1fr 1fr; } } .foot-grid h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 15px; } .foot-grid a { display: block; color: var(--muted); font-size: 14.5px; padding: 5px 0; transition: color .2s; } .foot-grid a:hover { color: var(--accent); } .foot-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; } /* ---------- reveal ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; } /* utilities */ .mt-s{margin-top:14px}.mt{margin-top:24px}.mt-l{margin-top:40px} .flex{display:flex}.between{justify-content:space-between}.items{align-items:center}.wrap{flex-wrap:wrap}.gap{gap:14px} .rounded{border-radius:var(--radius)} /* ---------- theme toggle button (Premium) ---------- */ .theme-toggle { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--fg); font-size: 17px; cursor: pointer; display: grid; place-items: center; transition: border-color .2s, transform .2s; } .theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); } /* ---------- pricing billing-cycle toggle ---------- */ .cycles { display: inline-flex; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 100px; padding: 5px; gap: 4px; margin: 0 auto 44px; } .cycles button { border: none; background: transparent; color: var(--muted); font-family: var(--f-body); font-weight: 600; font-size: 14px; padding: 9px 20px; border-radius: 100px; cursor: pointer; transition: all .2s; } .cycles button.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; } .cycles .save { font-size: 11px; opacity: .85; } /* ---------- comparison table ---------- */ .compare { width: 100%; border-collapse: collapse; font-size: 14.5px; } .compare th, .compare td { padding: 15px 18px; border-bottom: 1px solid var(--border); text-align: center; } .compare th:first-child, .compare td:first-child { text-align: left; color: var(--muted); } .compare thead th { font-family: var(--f-head); font-size: 16px; } .compare .yes { color: #16a34a; font-weight: 700; } .compare .no { color: var(--muted); opacity: .5; } /* premium hover lift on cards already present; add subtle image zoom */ .visual img, .imgph img { transition: transform .5s ease; } .card:hover .visual img { transform: scale(1.04); }