From dd789141616257f3d969d0b27d8dafbdd1512b3e Mon Sep 17 00:00:00 2001 From: Azmat Ali Date: Thu, 26 Mar 2026 15:52:12 +0530 Subject: [PATCH] initial commit --- .gitignore | 5 + base.css | 130 +++ components/about/about-b.css | 177 ++++ components/about/about-c.css | 166 ++++ components/about/about.css | 190 ++++ components/contact/contact-b.css | 168 ++++ components/contact/contact-c.css | 260 ++++++ components/contact/contact.css | 286 ++++++ components/cta/cta-b.css | 157 ++++ components/cta/cta-c.css | 159 ++++ components/cta/cta.css | 132 +++ components/faq/faq-b.css | 117 +++ components/faq/faq-c.css | 130 +++ components/faq/faq.css | 162 ++++ components/features/features-b.css | 159 ++++ components/features/features-c.css | 132 +++ components/features/features.css | 149 ++++ components/footer/footer-b.css | 124 +++ components/footer/footer-c.css | 90 ++ components/footer/footer.css | 160 ++++ components/header/header-b.css | 161 ++++ components/header/header-c.css | 151 ++++ components/header/header.css | 168 ++++ components/hero/hero-b.css | 195 +++++ components/hero/hero-c.css | 244 ++++++ components/hero/hero.css | 286 ++++++ components/testimonials/testimonials-b.css | 160 ++++ components/testimonials/testimonials-c.css | 153 ++++ components/testimonials/testimonials.css | 159 ++++ index.html | 955 +++++++++++++++++++++ layout-b.html | 375 ++++++++ layout-c.html | 362 ++++++++ layout.js | 113 +++ themes/theme-linen.css | 63 ++ themes/theme-midnight.css | 63 ++ themes/theme-neon.css | 172 ++++ themes/theme-petal.css | 150 ++++ 37 files changed, 6983 insertions(+) create mode 100644 .gitignore create mode 100644 base.css create mode 100644 components/about/about-b.css create mode 100644 components/about/about-c.css create mode 100644 components/about/about.css create mode 100644 components/contact/contact-b.css create mode 100644 components/contact/contact-c.css create mode 100644 components/contact/contact.css create mode 100644 components/cta/cta-b.css create mode 100644 components/cta/cta-c.css create mode 100644 components/cta/cta.css create mode 100644 components/faq/faq-b.css create mode 100644 components/faq/faq-c.css create mode 100644 components/faq/faq.css create mode 100644 components/features/features-b.css create mode 100644 components/features/features-c.css create mode 100644 components/features/features.css create mode 100644 components/footer/footer-b.css create mode 100644 components/footer/footer-c.css create mode 100644 components/footer/footer.css create mode 100644 components/header/header-b.css create mode 100644 components/header/header-c.css create mode 100644 components/header/header.css create mode 100644 components/hero/hero-b.css create mode 100644 components/hero/hero-c.css create mode 100644 components/hero/hero.css create mode 100644 components/testimonials/testimonials-b.css create mode 100644 components/testimonials/testimonials-c.css create mode 100644 components/testimonials/testimonials.css create mode 100644 index.html create mode 100644 layout-b.html create mode 100644 layout-c.html create mode 100644 layout.js create mode 100644 themes/theme-linen.css create mode 100644 themes/theme-midnight.css create mode 100644 themes/theme-neon.css create mode 100644 themes/theme-petal.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..784f48b --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +# Local Netlify folder +./node_modules +.netlify +.env + diff --git a/base.css b/base.css new file mode 100644 index 0000000..0331911 --- /dev/null +++ b/base.css @@ -0,0 +1,130 @@ +/* ============================================================ + BASE.CSS — Reset + shared layout utilities + All colors/fonts come from theme variables, never hardcoded + ============================================================ */ + +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; + font-size: 16px; +} + +body { + font-family: var(--font-body); + background-color: var(--color-bg); + color: var(--color-text); + line-height: 1.6; + transition: background-color 0.4s ease, color 0.4s ease; + overflow-x: hidden; +} + +img { + max-width: 100%; + display: block; +} + +a { + color: inherit; + text-decoration: none; +} + +ul { + list-style: none; +} + +/* ── Shared layout ─────────────────────────────────── */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 1.5rem; +} + +/* ── Shared button styles ──────────────────────────── */ +.btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1.75rem; + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: 0.95rem; + font-weight: 600; + cursor: pointer; + border: 2px solid transparent; + transition: all 0.25s ease; + letter-spacing: 0.01em; + white-space: nowrap; +} + +.btn-primary { + background-color: var(--color-primary); + color: var(--color-btn-text); + border-color: var(--color-primary); +} + +.btn-primary:hover { + background-color: var(--color-primary-hover); + border-color: var(--color-primary-hover); + transform: translateY(-1px); + box-shadow: 0 6px 20px var(--color-shadow); +} + +.btn-outline { + background-color: transparent; + color: var(--color-primary); + border-color: var(--color-primary); +} + +.btn-outline:hover { + background-color: var(--color-primary); + color: var(--color-btn-text); + transform: translateY(-1px); +} + +/* ── Shared section spacing ────────────────────────── */ +.section { + padding: 5rem 0; +} + +.section-alt { + background-color: var(--color-surface); +} + +/* ── Shared typography ─────────────────────────────── */ +.section-label { + display: inline-block; + font-size: 0.78rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--color-primary); + margin-bottom: 0.75rem; +} + +.section-title { + font-family: var(--font-heading); + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 800; + line-height: 1.15; + color: var(--color-heading); + margin-bottom: 1rem; +} + +.section-subtitle { + font-size: 1.1rem; + color: var(--color-text-muted); + max-width: 560px; + line-height: 1.7; +} + +/* ── Divider ───────────────────────────────────────── */ +hr.divider { + border: none; + border-top: 1px solid var(--color-border); + margin: 0; +} diff --git a/components/about/about-b.css b/components/about/about-b.css new file mode 100644 index 0000000..a83ab44 --- /dev/null +++ b/components/about/about-b.css @@ -0,0 +1,177 @@ +/* ============================================================ + ABOUT — LAYOUT B + Full-width centered text block. Stats row inline below. + No split — content breathes with generous whitespace. + ============================================================ */ + +.about-b { + padding: 6rem 0; + background-color: var(--color-bg); + transition: background-color 0.4s ease; +} + +/* ── Top: centered text block ──────────────────────────── */ +.about-b-text { + max-width: 680px; + margin: 0 auto 4rem; + text-align: center; +} + +.about-b-text .section-title { + margin-bottom: 1rem; +} + +.about-b-body { + font-size: 1rem; + color: var(--color-text-muted); + line-height: 1.85; + margin-bottom: 1rem; +} + +.about-b-body + .about-b-body { margin-bottom: 2rem; } + +.about-b-actions { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + flex-wrap: wrap; +} + +/* ── Stats bar ─────────────────────────────────────────── */ +.about-b-stats { + display: grid; + grid-template-columns: repeat(4, 1fr); + border: 1px solid var(--color-border); + border-radius: var(--radius-xl); + overflow: hidden; + margin-bottom: 4rem; + transition: border-color 0.3s ease; +} + +.about-b-stat { + padding: 2rem 1.5rem; + text-align: center; + border-right: 1px solid var(--color-border); + transition: background-color 0.3s ease; + position: relative; +} + +.about-b-stat:last-child { border-right: none; } + +.about-b-stat::after { + content: ''; + position: absolute; + bottom: 0; left: 0; right: 0; + height: 3px; + background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); + transform: scaleX(0); + transition: transform 0.3s ease; +} + +.about-b-stat:hover { background-color: var(--color-surface); } +.about-b-stat:hover::after { transform: scaleX(1); } + +.about-b-stat-number { + font-family: var(--font-heading); + font-size: 2.4rem; + font-weight: 900; + color: var(--color-primary); + line-height: 1; + margin-bottom: 0.4rem; +} + +.about-b-stat-label { + font-size: 0.78rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--color-text-muted); + margin-bottom: 0.3rem; +} + +.about-b-stat-desc { + font-size: 0.8rem; + color: var(--color-text-muted); + line-height: 1.5; +} + +/* ── Tags row ──────────────────────────────────────────── */ +.about-b-tags { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + justify-content: center; + margin-bottom: 3rem; +} + +.about-b-tag { + display: inline-block; + padding: 0.35rem 0.9rem; + border-radius: var(--radius-md); + border: 1px solid var(--color-border); + font-size: 0.8rem; + font-weight: 600; + color: var(--color-text-muted); + background-color: var(--color-surface); + transition: all 0.2s ease; +} + +.about-b-tag:hover { + border-color: var(--color-primary); + color: var(--color-primary); + background-color: var(--color-primary-soft); +} + +/* ── Team strip ────────────────────────────────────────── */ +.about-b-team { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; +} + +.about-b-team-avatars { + display: flex; +} + +.about-b-team-avatars span { + width: 40px; height: 40px; + border-radius: 50%; + border: 2px solid var(--color-bg); + background-color: var(--color-surface-2); + display: flex; align-items: center; justify-content: center; + font-size: 0.72rem; font-weight: 700; + color: var(--color-text); + margin-right: -10px; +} + +.about-b-team-avatars span:last-child { + background-color: var(--color-primary); + color: var(--color-btn-text); + font-size: 0.65rem; +} + +.about-b-team-text { + padding-left: 18px; + font-size: 0.875rem; + color: var(--color-text-muted); +} + +.about-b-team-text strong { + color: var(--color-heading); + font-weight: 700; +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 700px) { + .about-b-stats { grid-template-columns: 1fr 1fr; } + .about-b-stat:nth-child(2) { border-right: none; } + .about-b-stat:nth-child(3), + .about-b-stat:nth-child(4) { border-top: 1px solid var(--color-border); } +} + +@media (max-width: 480px) { + .about-b-stats { grid-template-columns: 1fr; } + .about-b-stat { border-right: none; border-bottom: 1px solid var(--color-border); } +} diff --git a/components/about/about-c.css b/components/about/about-c.css new file mode 100644 index 0000000..a1fc709 --- /dev/null +++ b/components/about/about-c.css @@ -0,0 +1,166 @@ +/* ============================================================ + ABOUT — LAYOUT C + Reversed 40/60 split: decorative image panel left, + rich text content right. Bold visual weight on left. + ============================================================ */ + +.about-c { + padding: 6rem 0; + background-color: var(--color-surface); + transition: background-color 0.4s ease; +} + +.about-c-inner { + display: grid; + grid-template-columns: 2fr 3fr; + gap: 5rem; + align-items: center; +} + +/* ── Left: image panel ─────────────────────────────────── */ +.about-c-visual { + position: relative; +} + +.about-c-img-placeholder { + aspect-ratio: 4/5; + background-color: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: var(--radius-xl); + overflow: hidden; + position: relative; + display: flex; + align-items: center; + justify-content: center; + transition: border-color 0.3s ease; +} + +.about-c-img-placeholder::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, var(--color-primary-soft) 0%, transparent 60%); +} + +.about-c-img-label { + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--color-text-muted); + position: relative; + z-index: 1; + text-align: center; +} + +/* Floating accent card on image */ +.about-c-img-card { + position: absolute; + bottom: 1.5rem; + right: -1.5rem; + background-color: var(--color-primary); + color: var(--color-btn-text); + border-radius: var(--radius-lg); + padding: 1rem 1.25rem; + font-size: 0.82rem; + font-weight: 700; + box-shadow: 0 8px 24px var(--color-shadow); + z-index: 2; + line-height: 1.4; +} + +.about-c-img-card-num { + font-family: var(--font-heading); + font-size: 1.6rem; + font-weight: 900; + display: block; + line-height: 1; + margin-bottom: 0.2rem; +} + +/* ── Right: content ────────────────────────────────────── */ +.about-c-content {} + +.about-c-content .section-title { margin-bottom: 1rem; } + +.about-c-body { + font-size: 0.95rem; + color: var(--color-text-muted); + line-height: 1.85; + margin-bottom: 1rem; +} + +.about-c-body + .about-c-body { margin-bottom: 2rem; } + +/* ── Inline stats ──────────────────────────────────────── */ +.about-c-stats { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + margin-bottom: 2rem; +} + +.about-c-stat { + padding: 1.25rem; + background-color: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: var(--radius-md); + transition: border-color 0.3s ease, transform 0.3s ease; +} + +.about-c-stat:hover { + border-color: var(--card-hover-border); + transform: translateY(-2px); +} + +.about-c-stat-num { + font-family: var(--font-heading); + font-size: 1.8rem; + font-weight: 900; + color: var(--color-primary); + line-height: 1; + margin-bottom: 0.3rem; +} + +.about-c-stat-label { + font-size: 0.8rem; + font-weight: 600; + color: var(--color-text-muted); +} + +/* ── Tags ──────────────────────────────────────────────── */ +.about-c-tags { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 2rem; +} + +.about-c-tag { + display: inline-block; + padding: 0.35rem 0.9rem; + border-radius: var(--radius-md); + border: 1px solid var(--color-border); + font-size: 0.8rem; + font-weight: 600; + color: var(--color-text-muted); + background-color: var(--color-surface); + transition: all 0.2s ease; +} + +.about-c-tag:hover { + border-color: var(--color-primary); + color: var(--color-primary); + background-color: var(--color-primary-soft); +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 900px) { + .about-c-inner { + grid-template-columns: 1fr; + gap: 3rem; + } + + .about-c-img-placeholder { aspect-ratio: 16/7; } + .about-c-img-card { right: 1rem; } +} diff --git a/components/about/about.css b/components/about/about.css new file mode 100644 index 0000000..922bb3c --- /dev/null +++ b/components/about/about.css @@ -0,0 +1,190 @@ +/* ============================================================ + ABOUT US COMPONENT + Split layout: left text content, right stat/image block + ============================================================ */ + +.about { + padding: 6rem 0; + background-color: var(--color-bg); + transition: background-color 0.4s ease; +} + +.about-inner { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 5rem; + align-items: center; +} + +/* ── Left: content ─────────────────────────────────────── */ +.about-content .section-subtitle { + margin-bottom: 1.5rem; +} + +.about-body { + font-size: 0.95rem; + color: var(--color-text-muted); + line-height: 1.8; + margin-bottom: 1rem; +} + +.about-body + .about-body { + margin-bottom: 2rem; +} + +.about-tags { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 2rem; +} + +.about-tag { + display: inline-block; + padding: 0.35rem 0.9rem; + border-radius: var(--radius-md); + border: 1px solid var(--color-border); + font-size: 0.8rem; + font-weight: 600; + color: var(--color-text-muted); + background-color: var(--color-surface); + transition: all 0.2s ease; +} + +.about-tag:hover { + border-color: var(--color-primary); + color: var(--color-primary); + background-color: var(--color-primary-soft); +} + +/* ── Right: visual panel ───────────────────────────────── */ +.about-visual { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.about-stat-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} + +.about-stat-card { + background-color: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: var(--radius-lg); + padding: 1.75rem 1.5rem; + position: relative; + overflow: hidden; + transition: border-color 0.3s ease, transform 0.3s ease; +} + +.about-stat-card:hover { + border-color: var(--card-hover-border); + transform: translateY(-2px); +} + +.about-stat-card::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 2px; + background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); + opacity: 0; + transition: opacity 0.3s ease; +} + +.about-stat-card:hover::before { + opacity: 1; +} + +.about-stat-number { + font-family: var(--font-heading); + font-size: 2.2rem; + font-weight: 900; + color: var(--color-primary); + line-height: 1; + margin-bottom: 0.4rem; +} + +.about-stat-label { + font-size: 0.82rem; + font-weight: 600; + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: 0.06em; +} + +.about-stat-desc { + font-size: 0.8rem; + color: var(--color-text-muted); + margin-top: 0.4rem; + line-height: 1.5; +} + +/* ── Team row ──────────────────────────────────────────── */ +.about-team-card { + background-color: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: var(--radius-lg); + padding: 1.5rem; + display: flex; + align-items: center; + gap: 1rem; + transition: border-color 0.3s ease; +} + +.about-team-card:hover { + border-color: var(--card-hover-border); +} + +.about-team-avatars { + display: flex; +} + +.about-team-avatars span { + width: 40px; + height: 40px; + border-radius: 50%; + border: 2px solid var(--color-bg); + background-color: var(--color-surface-2); + display: flex; + align-items: center; + justify-content: center; + font-size: 0.72rem; + font-weight: 700; + color: var(--color-text); + margin-right: -10px; + transition: background-color 0.3s ease; +} + +.about-team-avatars span:last-child { + background-color: var(--color-primary); + color: var(--color-btn-text); + font-size: 0.65rem; +} + +.about-team-info { + padding-left: 14px; +} + +.about-team-title { + font-size: 0.9rem; + font-weight: 700; + color: var(--color-heading); + margin-bottom: 0.2rem; +} + +.about-team-sub { + font-size: 0.8rem; + color: var(--color-text-muted); +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 900px) { + .about-inner { + grid-template-columns: 1fr; + gap: 3rem; + } +} diff --git a/components/contact/contact-b.css b/components/contact/contact-b.css new file mode 100644 index 0000000..05bb0cf --- /dev/null +++ b/components/contact/contact-b.css @@ -0,0 +1,168 @@ +/* ============================================================ + CONTACT — LAYOUT B + Centered single card. No left info column. + Clean, focused, minimal. + ============================================================ */ + +.contact-b { + padding: 6rem 0; + background-color: var(--color-bg); + transition: background-color 0.4s ease; +} + +.contact-b-header { + text-align: center; + max-width: 560px; + margin: 0 auto 3rem; +} + +.contact-b-header .section-subtitle { margin: 0 auto; } + +/* ── Centered card ─────────────────────────────────────── */ +.contact-b-card { + max-width: 680px; + margin: 0 auto; + background-color: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: var(--radius-xl); + padding: 3rem; + box-shadow: var(--color-card-shadow); + transition: all 0.4s ease; +} + +/* ── Form elements (reuse from contact.css patterns) ────── */ +.contact-b-form-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.25rem; + margin-bottom: 1.25rem; +} + +.contact-b-form-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.contact-b-form-group.full-width { grid-column: 1 / -1; } + +.contact-b-label { + font-size: 0.82rem; + font-weight: 600; + color: var(--color-text); +} + +.contact-b-label span { color: var(--color-primary); margin-left: 2px; } + +.contact-b-input, +.contact-b-textarea, +.contact-b-select { + background-color: var(--color-surface); + border: 1.5px solid var(--color-border); + border-radius: var(--radius-md); + padding: 0.7rem 1rem; + font-family: var(--font-body); + font-size: 0.9rem; + color: var(--color-text); + outline: none; + width: 100%; + transition: border-color 0.2s ease, box-shadow 0.2s ease; + appearance: none; +} + +.contact-b-input::placeholder, +.contact-b-textarea::placeholder { color: var(--color-text-muted); opacity: 0.7; } + +.contact-b-input:focus, +.contact-b-textarea:focus, +.contact-b-select:focus { + border-color: var(--color-primary); + box-shadow: 0 0 0 3px var(--color-primary-soft); +} + +.contact-b-textarea { resize: vertical; min-height: 130px; line-height: 1.6; } + +.contact-b-select-wrap { position: relative; } + +.contact-b-select-wrap::after { + content: ''; + position: absolute; + right: 1rem; top: 50%; + transform: translateY(-50%); + width: 0; height: 0; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 5px solid var(--color-text-muted); + pointer-events: none; +} + +/* ── Submit row ────────────────────────────────────────── */ +.contact-b-submit-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + margin-top: 1.75rem; + flex-wrap: wrap; +} + +.contact-b-privacy { + font-size: 0.78rem; + color: var(--color-text-muted); + line-height: 1.5; + max-width: 260px; +} + +.contact-b-privacy a { + color: var(--color-primary); + text-decoration: underline; + text-decoration-color: transparent; + transition: text-decoration-color 0.2s ease; +} + +.contact-b-privacy a:hover { text-decoration-color: var(--color-primary); } + +/* ── Success state ─────────────────────────────────────── */ +.contact-b-success { + display: none; + text-align: center; + padding: 2rem; +} + +.contact-b-success.is-visible { display: block; } + +.contact-b-success-icon { + width: 56px; height: 56px; + border-radius: 50%; + background-color: var(--color-primary-soft); + border: 2px solid var(--color-primary); + display: flex; align-items: center; justify-content: center; + margin: 0 auto 1.25rem; +} + +.contact-b-success-icon svg { + width: 24px; height: 24px; + stroke: var(--color-primary); fill: none; + stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; +} + +.contact-b-success-title { + font-family: var(--font-heading); + font-size: 1.4rem; font-weight: 800; + color: var(--color-heading); + margin-bottom: 0.5rem; +} + +.contact-b-success-text { + font-size: 0.9rem; + color: var(--color-text-muted); + line-height: 1.7; +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 600px) { + .contact-b-card { padding: 1.5rem; } + .contact-b-form-grid { grid-template-columns: 1fr; } + .contact-b-submit-row { flex-direction: column; align-items: stretch; text-align: center; } + .contact-b-privacy { max-width: 100%; } +} diff --git a/components/contact/contact-c.css b/components/contact/contact-c.css new file mode 100644 index 0000000..805d608 --- /dev/null +++ b/components/contact/contact-c.css @@ -0,0 +1,260 @@ +/* ============================================================ + CONTACT — LAYOUT C + 3-column: info left, form center, decorative accent right. + Editorial feel, visually rich. + ============================================================ */ + +.contact-c { + padding: 6rem 0; + background-color: var(--color-bg); + transition: background-color 0.4s ease; +} + +.contact-c-inner { + display: grid; + grid-template-columns: 1fr 2fr 1fr; + gap: 3rem; + align-items: start; +} + +/* ── Left: info ────────────────────────────────────────── */ +.contact-c-info {} + +.contact-c-info .section-label { margin-bottom: 0.5rem; } + +.contact-c-info .section-title { + font-size: 1.6rem; + margin-bottom: 0.75rem; +} + +.contact-c-info .section-subtitle { + font-size: 0.9rem; + margin-bottom: 2rem; +} + +.contact-c-details { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.contact-c-detail-item { + display: flex; + align-items: flex-start; + gap: 0.75rem; +} + +.contact-c-detail-icon { + width: 36px; height: 36px; + flex-shrink: 0; + border-radius: var(--radius-md); + background-color: var(--color-primary-soft); + display: flex; align-items: center; justify-content: center; + transition: background-color 0.3s ease; +} + +.contact-c-detail-icon svg { + width: 16px; height: 16px; + stroke: var(--color-primary); fill: none; + stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; + transition: stroke 0.3s ease; +} + +.contact-c-detail-item:hover .contact-c-detail-icon { background-color: var(--color-primary); } +.contact-c-detail-item:hover .contact-c-detail-icon svg { stroke: var(--color-btn-text); } + +.contact-c-detail-label { + font-size: 0.7rem; font-weight: 700; + letter-spacing: 0.08em; text-transform: uppercase; + color: var(--color-text-muted); margin-bottom: 0.15rem; +} + +.contact-c-detail-value { + font-size: 0.88rem; font-weight: 500; + color: var(--color-heading); +} + +/* ── Center: form ──────────────────────────────────────── */ +.contact-c-form-wrap { + background-color: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: var(--radius-xl); + padding: 2rem; + box-shadow: var(--color-card-shadow); +} + +.contact-c-form-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + margin-bottom: 1rem; +} + +.contact-c-form-group { + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.contact-c-form-group.full-width { grid-column: 1 / -1; } + +.contact-c-label { + font-size: 0.78rem; font-weight: 600; + color: var(--color-text); +} + +.contact-c-label span { color: var(--color-primary); margin-left: 2px; } + +.contact-c-input, +.contact-c-textarea, +.contact-c-select { + background-color: var(--color-surface); + border: 1.5px solid var(--color-border); + border-radius: var(--radius-md); + padding: 0.65rem 0.875rem; + font-family: var(--font-body); + font-size: 0.875rem; + color: var(--color-text); + outline: none; + width: 100%; + transition: border-color 0.2s ease, box-shadow 0.2s ease; + appearance: none; +} + +.contact-c-input::placeholder, +.contact-c-textarea::placeholder { color: var(--color-text-muted); opacity: 0.7; } + +.contact-c-input:focus, +.contact-c-textarea:focus, +.contact-c-select:focus { + border-color: var(--color-primary); + box-shadow: 0 0 0 3px var(--color-primary-soft); +} + +.contact-c-textarea { resize: vertical; min-height: 110px; line-height: 1.6; } + +.contact-c-select-wrap { position: relative; } +.contact-c-select-wrap::after { + content: ''; + position: absolute; right: 0.875rem; top: 50%; + transform: translateY(-50%); + width: 0; height: 0; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 5px solid var(--color-text-muted); + pointer-events: none; +} + +.contact-c-submit-row { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 1rem; + margin-top: 1.25rem; +} + +/* ── Success ───────────────────────────────────────────── */ +.contact-c-success { + display: none; + text-align: center; + padding: 1.5rem; +} + +.contact-c-success.is-visible { display: block; } + +.contact-c-success-icon { + width: 48px; height: 48px; + border-radius: 50%; + background-color: var(--color-primary-soft); + border: 2px solid var(--color-primary); + display: flex; align-items: center; justify-content: center; + margin: 0 auto 1rem; +} + +.contact-c-success-icon svg { + width: 20px; height: 20px; + stroke: var(--color-primary); fill: none; + stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; +} + +.contact-c-success-title { + font-family: var(--font-heading); + font-size: 1.2rem; font-weight: 800; + color: var(--color-heading); margin-bottom: 0.4rem; +} + +.contact-c-success-text { + font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.7; +} + +/* ── Right: decorative accent panel ───────────────────── */ +.contact-c-accent { + background-color: var(--color-primary); + border-radius: var(--radius-xl); + padding: 2rem; + display: flex; + flex-direction: column; + gap: 1.5rem; + position: sticky; + top: 5rem; +} + +.contact-c-accent-title { + font-family: var(--font-heading); + font-size: 1.1rem; font-weight: 800; + color: var(--color-btn-text); + line-height: 1.3; +} + +.contact-c-accent-list { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.contact-c-accent-item { + display: flex; + align-items: flex-start; + gap: 0.6rem; + font-size: 0.82rem; + color: var(--color-btn-text); + opacity: 0.85; + line-height: 1.5; +} + +.contact-c-accent-item svg { + width: 14px; height: 14px; + stroke: var(--color-btn-text); fill: none; + stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; + flex-shrink: 0; margin-top: 2px; +} + +.contact-c-accent-divider { + height: 1px; + background-color: rgba(255,255,255,0.2); +} + +.contact-c-accent-response { + font-size: 0.8rem; + color: var(--color-btn-text); + opacity: 0.7; + line-height: 1.6; +} + +.contact-c-accent-response strong { + opacity: 1; + display: block; + font-size: 0.85rem; + margin-bottom: 0.2rem; +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 1024px) { + .contact-c-inner { grid-template-columns: 1fr 2fr; } + .contact-c-accent { display: none; } +} + +@media (max-width: 700px) { + .contact-c-inner { grid-template-columns: 1fr; } + .contact-c-form-grid { grid-template-columns: 1fr; } +} diff --git a/components/contact/contact.css b/components/contact/contact.css new file mode 100644 index 0000000..5237bde --- /dev/null +++ b/components/contact/contact.css @@ -0,0 +1,286 @@ +/* ============================================================ + CONTACT FORM COMPONENT + Split layout: left info panel, right form card + ============================================================ */ + +.contact { + padding: 6rem 0; + background-color: var(--color-surface); + transition: background-color 0.4s ease; +} + +.contact-inner { + display: grid; + grid-template-columns: 1fr 1.6fr; + gap: 5rem; + align-items: start; +} + +/* ── Left: info ────────────────────────────────────────── */ +.contact-info .section-title { + margin-bottom: 1rem; +} + +.contact-info .section-subtitle { + margin-bottom: 2.5rem; +} + +.contact-details { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.contact-detail-item { + display: flex; + align-items: flex-start; + gap: 1rem; +} + +.contact-detail-icon { + width: 40px; + height: 40px; + flex-shrink: 0; + border-radius: var(--radius-md); + background-color: var(--color-primary-soft); + display: flex; + align-items: center; + justify-content: center; + transition: background-color 0.3s ease; +} + +.contact-detail-icon svg { + width: 18px; + height: 18px; + stroke: var(--color-primary); + fill: none; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + transition: stroke 0.3s ease; +} + +.contact-detail-item:hover .contact-detail-icon { + background-color: var(--color-primary); +} + +.contact-detail-item:hover .contact-detail-icon svg { + stroke: var(--color-btn-text); +} + +.contact-detail-label { + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--color-text-muted); + margin-bottom: 0.2rem; +} + +.contact-detail-value { + font-size: 0.92rem; + color: var(--color-heading); + font-weight: 500; +} + +/* ── Right: form card ──────────────────────────────────── */ +.contact-form-card { + background-color: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: var(--radius-xl); + padding: 2.5rem; + box-shadow: var(--color-card-shadow); + transition: all 0.4s ease; +} + +/* ── Form elements ─────────────────────────────────────── */ +.form-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.25rem; + margin-bottom: 1.25rem; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.form-group.full-width { + grid-column: 1 / -1; +} + +.form-label { + font-size: 0.82rem; + font-weight: 600; + color: var(--color-text); + letter-spacing: 0.01em; +} + +.form-label span { + color: var(--color-primary); + margin-left: 2px; +} + +.form-input, +.form-textarea, +.form-select { + background-color: var(--color-surface); + border: 1.5px solid var(--color-border); + border-radius: var(--radius-md); + padding: 0.7rem 1rem; + font-family: var(--font-body); + font-size: 0.9rem; + color: var(--color-text); + outline: none; + transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease; + width: 100%; + appearance: none; + -webkit-appearance: none; +} + +.form-input::placeholder, +.form-textarea::placeholder { + color: var(--color-text-muted); + opacity: 0.7; +} + +.form-input:focus, +.form-textarea:focus, +.form-select:focus { + border-color: var(--color-primary); + box-shadow: 0 0 0 3px var(--color-primary-soft); +} + +.form-textarea { + resize: vertical; + min-height: 130px; + line-height: 1.6; +} + +/* Select arrow */ +.form-select-wrap { + position: relative; +} + +.form-select-wrap::after { + content: ''; + position: absolute; + right: 1rem; + top: 50%; + transform: translateY(-50%); + width: 0; + height: 0; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 5px solid var(--color-text-muted); + pointer-events: none; +} + +/* ── Submit row ────────────────────────────────────────── */ +.form-submit-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + margin-top: 1.75rem; + flex-wrap: wrap; +} + +.form-privacy { + font-size: 0.78rem; + color: var(--color-text-muted); + line-height: 1.5; + max-width: 260px; +} + +.form-privacy a { + color: var(--color-primary); + text-decoration: underline; + text-decoration-color: transparent; + transition: text-decoration-color 0.2s ease; +} + +.form-privacy a:hover { + text-decoration-color: var(--color-primary); +} + +.form-submit-row .btn { + flex-shrink: 0; +} + +/* ── Success state ─────────────────────────────────────── */ +.form-success { + display: none; + text-align: center; + padding: 2rem; +} + +.form-success.is-visible { + display: block; +} + +.form-success-icon { + width: 56px; + height: 56px; + border-radius: 50%; + background-color: var(--color-primary-soft); + border: 2px solid var(--color-primary); + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.25rem; +} + +.form-success-icon svg { + width: 24px; + height: 24px; + stroke: var(--color-primary); + fill: none; + stroke-width: 2.5; + stroke-linecap: round; + stroke-linejoin: round; +} + +.form-success-title { + font-family: var(--font-heading); + font-size: 1.4rem; + font-weight: 800; + color: var(--color-heading); + margin-bottom: 0.5rem; +} + +.form-success-text { + font-size: 0.9rem; + color: var(--color-text-muted); + line-height: 1.7; +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 900px) { + .contact-inner { + grid-template-columns: 1fr; + gap: 3rem; + } +} + +@media (max-width: 540px) { + .form-grid { + grid-template-columns: 1fr; + } + + .contact-form-card { + padding: 1.5rem; + } + + .form-submit-row { + flex-direction: column; + align-items: stretch; + text-align: center; + } + + .form-privacy { + max-width: 100%; + } +} diff --git a/components/cta/cta-b.css b/components/cta/cta-b.css new file mode 100644 index 0000000..bc97949 --- /dev/null +++ b/components/cta/cta-b.css @@ -0,0 +1,157 @@ +/* ============================================================ + CTA — LAYOUT B + Split: left text + trust items, right email capture card. + More functional, conversion-focused. + ============================================================ */ + +.cta-b { + padding: 6rem 0; + background-color: var(--cta-bg); + background-image: var(--cta-gradient); + position: relative; + overflow: hidden; + transition: background-color 0.4s ease; +} + +.cta-b::before { + content: ''; + position: absolute; + width: 600px; height: 600px; + border-radius: 50%; + background: radial-gradient(circle, var(--color-primary-soft) 0%, transparent 70%); + top: -300px; left: -150px; + opacity: 0.4; + pointer-events: none; +} + +.cta-b-inner { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 5rem; + align-items: center; + position: relative; + z-index: 1; +} + +/* ── Left: text ────────────────────────────────────────── */ +.cta-b-content {} + +.cta-b-label { + display: inline-flex; + align-items: center; + gap: 0.4rem; + font-size: 0.78rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--color-primary); + margin-bottom: 1rem; +} + +.cta-b-title { + font-family: var(--font-heading); + font-size: clamp(1.8rem, 3.5vw, 2.8rem); + font-weight: 900; + color: var(--color-heading); + line-height: 1.12; + letter-spacing: -0.025em; + margin-bottom: 1.25rem; +} + +.cta-b-title em { font-style: normal; color: var(--color-primary); } + +.cta-b-subtitle { + font-size: 1rem; + color: var(--color-text-muted); + line-height: 1.75; + margin-bottom: 2rem; +} + +.cta-b-trust { + display: flex; + flex-direction: column; + gap: 0.6rem; +} + +.cta-b-trust-item { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.85rem; + color: var(--color-text-muted); + font-weight: 500; +} + +.cta-b-trust-item svg { + width: 14px; height: 14px; + stroke: var(--color-primary); fill: none; + stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; + flex-shrink: 0; +} + +/* ── Right: capture card ───────────────────────────────── */ +.cta-b-card { + background-color: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: var(--radius-xl); + padding: 2.5rem; + box-shadow: var(--color-card-shadow), var(--color-glow); + transition: border-color 0.3s ease; +} + +.cta-b-card-title { + font-family: var(--font-heading); + font-size: 1.25rem; + font-weight: 800; + color: var(--color-heading); + margin-bottom: 0.4rem; +} + +.cta-b-card-sub { + font-size: 0.88rem; + color: var(--color-text-muted); + margin-bottom: 1.75rem; + line-height: 1.6; +} + +.cta-b-form { + display: flex; + flex-direction: column; + gap: 0.85rem; + margin-bottom: 1rem; +} + +.cta-b-input { + background-color: var(--color-surface); + border: 1.5px solid var(--color-border); + border-radius: var(--radius-md); + padding: 0.75rem 1rem; + font-family: var(--font-body); + font-size: 0.9rem; + color: var(--color-text); + outline: none; + width: 100%; + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.cta-b-input::placeholder { color: var(--color-text-muted); opacity: 0.7; } + +.cta-b-input:focus { + border-color: var(--color-primary); + box-shadow: 0 0 0 3px var(--color-primary-soft); +} + +.cta-b-card .btn { width: 100%; justify-content: center; } + +.cta-b-note { + font-size: 0.75rem; + color: var(--color-text-muted); + text-align: center; + margin-top: 0.75rem; + line-height: 1.5; +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 860px) { + .cta-b-inner { grid-template-columns: 1fr; gap: 3rem; } +} diff --git a/components/cta/cta-c.css b/components/cta/cta-c.css new file mode 100644 index 0000000..99501c6 --- /dev/null +++ b/components/cta/cta-c.css @@ -0,0 +1,159 @@ +/* ============================================================ + CTA — LAYOUT C + Full-bleed panel. Large decorative BG word. Bold & loud. + Uses the primary color as background for max contrast. + ============================================================ */ + +.cta-c { + padding: 7rem 0; + background-color: var(--color-primary); + position: relative; + overflow: hidden; + transition: background-color 0.4s ease; +} + +/* ── Large decorative word ─────────────────────────────── */ +.cta-c::before { + content: 'START'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-family: var(--font-heading); + font-size: clamp(10rem, 22vw, 20rem); + font-weight: 900; + color: var(--color-btn-text); + opacity: 0.05; + letter-spacing: -0.05em; + white-space: nowrap; + pointer-events: none; + user-select: none; + line-height: 1; +} + +.cta-c-inner { + text-align: center; + max-width: 680px; + margin: 0 auto; + position: relative; + z-index: 1; +} + +.cta-c-label { + display: inline-flex; + align-items: center; + gap: 0.4rem; + font-size: 0.78rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--color-btn-text); + opacity: 0.7; + margin-bottom: 1.25rem; +} + +.cta-c-title { + font-family: var(--font-heading); + font-size: clamp(2.4rem, 5vw, 4rem); + font-weight: 900; + color: var(--color-btn-text); + line-height: 1.08; + letter-spacing: -0.03em; + margin-bottom: 1.25rem; +} + +.cta-c-subtitle { + font-size: 1.05rem; + color: var(--color-btn-text); + opacity: 0.8; + line-height: 1.75; + margin-bottom: 2.5rem; +} + +/* ── Inverted buttons ──────────────────────────────────── */ +.cta-c-actions { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + flex-wrap: wrap; + margin-bottom: 2rem; +} + +.cta-c .btn-solid { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1.75rem; + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: 0.95rem; + font-weight: 600; + cursor: pointer; + border: 2px solid var(--color-btn-text); + background-color: var(--color-btn-text); + color: var(--color-primary); + transition: all 0.25s ease; + text-decoration: none; +} + +.cta-c .btn-solid:hover { + background-color: transparent; + color: var(--color-btn-text); + transform: translateY(-1px); +} + +.cta-c .btn-ghost { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1.75rem; + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: 0.95rem; + font-weight: 600; + cursor: pointer; + border: 2px solid rgba(255,255,255,0.4); + background-color: transparent; + color: var(--color-btn-text); + transition: all 0.25s ease; + text-decoration: none; +} + +.cta-c .btn-ghost:hover { + border-color: var(--color-btn-text); + background-color: rgba(255,255,255,0.1); + transform: translateY(-1px); +} + +/* ── Trust row ─────────────────────────────────────────── */ +.cta-c-trust { + display: flex; + align-items: center; + justify-content: center; + gap: 1.5rem; + flex-wrap: wrap; +} + +.cta-c-trust-item { + display: flex; + align-items: center; + gap: 0.4rem; + font-size: 0.82rem; + color: var(--color-btn-text); + opacity: 0.75; + font-weight: 500; +} + +.cta-c-trust-item svg { + width: 14px; height: 14px; + stroke: var(--color-btn-text); fill: none; + stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; +} + +.cta-c-divider { + width: 4px; height: 4px; + border-radius: 50%; + background-color: var(--color-btn-text); + opacity: 0.3; +} diff --git a/components/cta/cta.css b/components/cta/cta.css new file mode 100644 index 0000000..cfc4bad --- /dev/null +++ b/components/cta/cta.css @@ -0,0 +1,132 @@ +/* ============================================================ + CTA COMPONENT + Centered call-to-action section with background treatment + ============================================================ */ + +.cta-section { + padding: 6rem 0; + background-color: var(--cta-bg); + background-image: var(--cta-gradient); + position: relative; + overflow: hidden; + transition: background-color 0.4s ease; +} + +/* ── Background decoration ─────────────────────────────── */ +.cta-section::before, +.cta-section::after { + content: ''; + position: absolute; + border-radius: 50%; + pointer-events: none; +} + +.cta-section::before { + width: 500px; height: 500px; + background: radial-gradient(circle, var(--color-primary-soft) 0%, transparent 70%); + top: -200px; left: -100px; + opacity: 0.5; +} + +.cta-section::after { + width: 400px; height: 400px; + background: radial-gradient(circle, var(--color-accent-soft) 0%, transparent 70%); + bottom: -150px; right: -50px; + opacity: 0.5; +} + +.cta-inner { + text-align: center; + max-width: 680px; + margin: 0 auto; + position: relative; + z-index: 1; +} + +/* ── Label ─────────────────────────────────────────────── */ +.cta-label { + display: inline-flex; + align-items: center; + gap: 0.5rem; + font-size: 0.78rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--color-primary); + margin-bottom: 1rem; +} + +/* ── Headline ──────────────────────────────────────────── */ +.cta-title { + font-family: var(--font-heading); + font-size: clamp(2rem, 4.5vw, 3.2rem); + font-weight: 900; + color: var(--color-heading); + line-height: 1.12; + letter-spacing: -0.025em; + margin-bottom: 1.25rem; +} + +.cta-title em { + font-style: normal; + color: var(--color-primary); +} + +.cta-subtitle { + font-size: 1.05rem; + color: var(--color-text-muted); + line-height: 1.75; + margin-bottom: 2.5rem; + max-width: 500px; + margin-left: auto; + margin-right: auto; +} + +/* ── Actions ───────────────────────────────────────────── */ +.cta-actions { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + flex-wrap: wrap; + margin-bottom: 2rem; +} + +/* ── Trust line ────────────────────────────────────────── */ +.cta-trust { + display: flex; + align-items: center; + justify-content: center; + gap: 1.5rem; + flex-wrap: wrap; +} + +.cta-trust-item { + display: flex; + align-items: center; + gap: 0.4rem; + font-size: 0.82rem; + color: var(--color-text-muted); + font-weight: 500; +} + +.cta-trust-item svg { + width: 14px; height: 14px; + stroke: var(--color-primary); + fill: none; + stroke-width: 2.5; + stroke-linecap: round; + stroke-linejoin: round; +} + +.cta-divider { + width: 4px; height: 4px; + border-radius: 50%; + background-color: var(--color-border); +} + +@media (max-width: 480px) { + .cta-divider { + display: none; + } +} diff --git a/components/faq/faq-b.css b/components/faq/faq-b.css new file mode 100644 index 0000000..fbae501 --- /dev/null +++ b/components/faq/faq-b.css @@ -0,0 +1,117 @@ +/* ============================================================ + FAQ — LAYOUT B + Full-width centered accordion. No sidebar heading. + Heading centered above the list. Clean and open. + ============================================================ */ + +.faq-b { + padding: 6rem 0; + background-color: var(--color-bg); + transition: background-color 0.4s ease; +} + +.faq-b-header { + text-align: center; + max-width: 600px; + margin: 0 auto 4rem; +} + +.faq-b-header .section-subtitle { margin: 0 auto; } + +.faq-b-contact-nudge { + font-size: 0.88rem; + color: var(--color-text-muted); + line-height: 1.6; + margin-top: 1rem; +} + +.faq-b-contact-nudge a { + color: var(--color-primary); + font-weight: 600; + text-decoration: underline; + text-decoration-color: transparent; + transition: text-decoration-color 0.2s ease; +} + +.faq-b-contact-nudge a:hover { + text-decoration-color: var(--color-primary); +} + +/* ── Accordion list ────────────────────────────────────── */ +.faq-b-list { + max-width: 760px; + margin: 0 auto; + border-top: 1px solid var(--color-border); +} + +.faq-b-item { + border-bottom: 1px solid var(--color-border); + transition: border-color 0.3s ease; +} + +.faq-b-item.is-open { border-bottom-color: var(--color-primary); } + +.faq-b-question { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 1.5rem 0; + cursor: pointer; + background: none; + border: none; + width: 100%; + text-align: left; + user-select: none; +} + +.faq-b-question-text { + font-family: var(--font-heading); + font-size: 1.05rem; + font-weight: 700; + color: var(--color-heading); + line-height: 1.4; + transition: color 0.2s ease; +} + +.faq-b-item.is-open .faq-b-question-text { color: var(--color-primary); } + +.faq-b-icon { + flex-shrink: 0; + width: 28px; height: 28px; + border-radius: 50%; + border: 1.5px solid var(--color-border); + display: flex; align-items: center; justify-content: center; + transition: all 0.3s ease; + background-color: var(--color-surface); +} + +.faq-b-item.is-open .faq-b-icon { + background-color: var(--color-primary); + border-color: var(--color-primary); + transform: rotate(45deg); +} + +.faq-b-icon svg { + width: 12px; height: 12px; + stroke: var(--color-text-muted); fill: none; + stroke-width: 2.5; stroke-linecap: round; + transition: stroke 0.3s ease; +} + +.faq-b-item.is-open .faq-b-icon svg { stroke: var(--color-btn-text); } + +.faq-b-answer { + max-height: 0; + overflow: hidden; + transition: max-height 0.4s ease; +} + +.faq-b-item.is-open .faq-b-answer { max-height: 300px; } + +.faq-b-answer-inner { + padding-bottom: 1.5rem; + font-size: 0.93rem; + color: var(--color-text-muted); + line-height: 1.8; +} diff --git a/components/faq/faq-c.css b/components/faq/faq-c.css new file mode 100644 index 0000000..808f995 --- /dev/null +++ b/components/faq/faq-c.css @@ -0,0 +1,130 @@ +/* ============================================================ + FAQ — LAYOUT C + Two-column accordion grid. Questions split into two columns. + Each column has its own independent accordion behavior. + ============================================================ */ + +.faq-c { + padding: 6rem 0; + background-color: var(--color-surface); + transition: background-color 0.4s ease; +} + +.faq-c-header { + text-align: center; + max-width: 600px; + margin: 0 auto 4rem; +} + +.faq-c-header .section-subtitle { margin: 0 auto; } + +.faq-c-contact-nudge { + font-size: 0.88rem; + color: var(--color-text-muted); + line-height: 1.6; + margin-top: 1rem; +} + +.faq-c-contact-nudge a { + color: var(--color-primary); + font-weight: 600; + text-decoration: underline; + text-decoration-color: transparent; + transition: text-decoration-color 0.2s ease; +} + +.faq-c-contact-nudge a:hover { + text-decoration-color: var(--color-primary); +} + +/* ── Two-col grid ──────────────────────────────────────── */ +.faq-c-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0 4rem; + align-items: start; +} + +/* ── Column ────────────────────────────────────────────── */ +.faq-c-col { + border-top: 1px solid var(--color-border); +} + +/* ── Item ──────────────────────────────────────────────── */ +.faq-c-item { + border-bottom: 1px solid var(--color-border); + transition: border-color 0.3s ease; +} + +.faq-c-item.is-open { border-bottom-color: var(--color-primary); } + +.faq-c-question { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 1.35rem 0; + cursor: pointer; + background: none; + border: none; + width: 100%; + text-align: left; + user-select: none; +} + +.faq-c-question-text { + font-family: var(--font-heading); + font-size: 0.98rem; + font-weight: 700; + color: var(--color-heading); + line-height: 1.4; + transition: color 0.2s ease; +} + +.faq-c-item.is-open .faq-c-question-text { color: var(--color-primary); } + +.faq-c-icon { + flex-shrink: 0; + width: 24px; height: 24px; + border-radius: 50%; + border: 1.5px solid var(--color-border); + display: flex; align-items: center; justify-content: center; + transition: all 0.3s ease; + background-color: var(--card-bg); +} + +.faq-c-item.is-open .faq-c-icon { + background-color: var(--color-primary); + border-color: var(--color-primary); + transform: rotate(45deg); +} + +.faq-c-icon svg { + width: 10px; height: 10px; + stroke: var(--color-text-muted); fill: none; + stroke-width: 2.5; stroke-linecap: round; + transition: stroke 0.3s ease; +} + +.faq-c-item.is-open .faq-c-icon svg { stroke: var(--color-btn-text); } + +.faq-c-answer { + max-height: 0; + overflow: hidden; + transition: max-height 0.4s ease; +} + +.faq-c-item.is-open .faq-c-answer { max-height: 300px; } + +.faq-c-answer-inner { + padding-bottom: 1.35rem; + font-size: 0.88rem; + color: var(--color-text-muted); + line-height: 1.8; +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 768px) { + .faq-c-grid { grid-template-columns: 1fr; gap: 0; } + .faq-c-col:last-child { border-top: none; } +} diff --git a/components/faq/faq.css b/components/faq/faq.css new file mode 100644 index 0000000..e6152d1 --- /dev/null +++ b/components/faq/faq.css @@ -0,0 +1,162 @@ +/* ============================================================ + FAQ COMPONENT + Accordion-style questions with smooth expand/collapse + ============================================================ */ + +.faq { + padding: 6rem 0; + background-color: var(--color-surface); + transition: background-color 0.4s ease; +} + +.faq-inner { + display: grid; + grid-template-columns: 1fr 2fr; + gap: 5rem; + align-items: start; +} + +/* ── Left: heading ─────────────────────────────────────── */ +.faq-heading { + position: sticky; + top: 5rem; +} + +.faq-heading .section-title { + margin-bottom: 1rem; +} + +.faq-heading .section-subtitle { + margin-bottom: 2rem; +} + +.faq-contact-nudge { + font-size: 0.88rem; + color: var(--color-text-muted); + line-height: 1.6; +} + +.faq-contact-nudge a { + color: var(--color-primary); + font-weight: 600; + text-decoration: underline; + text-decoration-color: transparent; + transition: text-decoration-color 0.2s ease; +} + +.faq-contact-nudge a:hover { + text-decoration-color: var(--color-primary); +} + +/* ── Right: accordion list ─────────────────────────────── */ +.faq-list { + display: flex; + flex-direction: column; + gap: 0; + border-top: 1px solid var(--color-border); +} + +/* ── Individual item ───────────────────────────────────── */ +.faq-item { + border-bottom: 1px solid var(--color-border); + transition: border-color 0.3s ease; +} + +.faq-item.is-open { + border-bottom-color: var(--color-primary); +} + +.faq-question { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 1.5rem 0; + cursor: pointer; + user-select: none; + list-style: none; + background: none; + border: none; + width: 100%; + text-align: left; +} + +.faq-question::-webkit-details-marker { + display: none; +} + +.faq-question-text { + font-family: var(--font-heading); + font-size: 1.05rem; + font-weight: 700; + color: var(--color-heading); + line-height: 1.4; + transition: color 0.2s ease; +} + +.faq-item.is-open .faq-question-text { + color: var(--color-primary); +} + +.faq-icon { + flex-shrink: 0; + width: 28px; + height: 28px; + border-radius: 50%; + border: 1.5px solid var(--color-border); + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + background-color: var(--color-surface); +} + +.faq-item.is-open .faq-icon { + background-color: var(--color-primary); + border-color: var(--color-primary); + transform: rotate(45deg); +} + +.faq-icon svg { + width: 12px; + height: 12px; + stroke: var(--color-text-muted); + fill: none; + stroke-width: 2.5; + stroke-linecap: round; + transition: stroke 0.3s ease; +} + +.faq-item.is-open .faq-icon svg { + stroke: var(--color-btn-text); +} + +/* ── Answer panel ──────────────────────────────────────── */ +.faq-answer { + max-height: 0; + overflow: hidden; + transition: max-height 0.4s ease, padding 0.3s ease; +} + +.faq-item.is-open .faq-answer { + max-height: 300px; +} + +.faq-answer-inner { + padding-bottom: 1.5rem; + font-size: 0.93rem; + color: var(--color-text-muted); + line-height: 1.8; +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 860px) { + .faq-inner { + grid-template-columns: 1fr; + gap: 2.5rem; + } + + .faq-heading { + position: static; + } +} diff --git a/components/features/features-b.css b/components/features/features-b.css new file mode 100644 index 0000000..1104858 --- /dev/null +++ b/components/features/features-b.css @@ -0,0 +1,159 @@ +/* ============================================================ + FEATURES — LAYOUT B + Alternating rows: icon + title + text on left, visual on right. + Even rows flip. More spacious, editorial feel. + ============================================================ */ + +.features-b { + padding: 6rem 0; + background-color: var(--color-surface); + transition: background-color 0.4s ease; +} + +.features-b-header { + text-align: center; + margin-bottom: 5rem; +} + +.features-b-header .section-subtitle { margin: 0 auto; } + +/* ── Each row ──────────────────────────────────────────── */ +.features-b-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; + padding: 3.5rem 0; + border-top: 1px solid var(--color-border); +} + +.features-b-row:last-child { border-bottom: 1px solid var(--color-border); } + +/* Flip even rows */ +.features-b-row:nth-child(even) .features-b-text { order: 2; } +.features-b-row:nth-child(even) .features-b-visual { order: 1; } + +/* ── Text side ─────────────────────────────────────────── */ +.features-b-text {} + +.features-b-icon { + width: 52px; height: 52px; + background-color: var(--color-primary-soft); + border-radius: var(--radius-md); + display: flex; align-items: center; justify-content: center; + margin-bottom: 1.25rem; + transition: background-color 0.3s ease; +} + +.features-b-icon svg { + width: 24px; height: 24px; + stroke: var(--color-primary); fill: none; + stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; + transition: stroke 0.3s ease; +} + +.features-b-row:hover .features-b-icon { + background-color: var(--color-primary); +} + +.features-b-row:hover .features-b-icon svg { + stroke: var(--color-btn-text); +} + +.features-b-title { + font-family: var(--font-heading); + font-size: 1.6rem; + font-weight: 800; + color: var(--color-heading); + margin-bottom: 0.75rem; + line-height: 1.2; + letter-spacing: -0.02em; +} + +.features-b-desc { + font-size: 0.95rem; + color: var(--color-text-muted); + line-height: 1.8; + margin-bottom: 1.25rem; + max-width: 420px; +} + +.features-b-link { + display: inline-flex; + align-items: center; + gap: 0.4rem; + font-size: 0.875rem; + font-weight: 600; + color: var(--color-primary); + transition: gap 0.2s ease; +} + +.features-b-link:hover { gap: 0.65rem; } + +.features-b-link svg { + width: 14px; height: 14px; + stroke: currentColor; fill: none; + stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; +} + +/* ── Visual side: accent block with sub-points ─────────── */ +.features-b-visual { + background-color: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: var(--radius-xl); + padding: 2rem; + display: flex; + flex-direction: column; + gap: 1rem; + transition: border-color 0.3s ease; +} + +.features-b-row:hover .features-b-visual { + border-color: var(--card-hover-border); +} + +.features-b-point { + display: flex; + align-items: flex-start; + gap: 0.75rem; + padding: 0.75rem; + border-radius: var(--radius-md); + background-color: var(--color-surface); + border: 1px solid var(--color-border); + transition: border-color 0.2s ease; +} + +.features-b-point:hover { border-color: var(--color-primary); } + +.features-b-point-dot { + width: 8px; height: 8px; + border-radius: 50%; + background-color: var(--color-primary); + flex-shrink: 0; + margin-top: 6px; +} + +.features-b-point-text { + font-size: 0.875rem; + color: var(--color-text); + line-height: 1.6; +} + +.features-b-point-text strong { + color: var(--color-heading); + font-weight: 700; + display: block; + margin-bottom: 0.1rem; + font-size: 0.85rem; +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 800px) { + .features-b-row { + grid-template-columns: 1fr; + gap: 2rem; + } + + .features-b-row:nth-child(even) .features-b-text, + .features-b-row:nth-child(even) .features-b-visual { order: unset; } +} diff --git a/components/features/features-c.css b/components/features/features-c.css new file mode 100644 index 0000000..6fb3fd3 --- /dev/null +++ b/components/features/features-c.css @@ -0,0 +1,132 @@ +/* ============================================================ + FEATURES — LAYOUT C + Single column, oversized numbered list. Bold & editorial. + Each item spans full width with a large number accent. + ============================================================ */ + +.features-c { + padding: 6rem 0; + background-color: var(--color-bg); + transition: background-color 0.4s ease; +} + +.features-c-header { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + align-items: end; + margin-bottom: 4rem; + padding-bottom: 3rem; + border-bottom: 1px solid var(--color-border); +} + +.features-c-header .section-subtitle { margin: 0; } + +/* ── List ──────────────────────────────────────────────── */ +.features-c-list { + display: flex; + flex-direction: column; + gap: 0; +} + +/* ── Each item ─────────────────────────────────────────── */ +.features-c-item { + display: grid; + grid-template-columns: 80px 1fr auto; + gap: 2rem; + align-items: center; + padding: 2rem 0; + border-bottom: 1px solid var(--color-border); + cursor: default; + transition: padding 0.3s ease; + position: relative; +} + +.features-c-item::before { + content: ''; + position: absolute; + left: -1.5rem; top: 0; bottom: 0; + width: 3px; + background-color: var(--color-primary); + transform: scaleY(0); + transition: transform 0.3s ease; + transform-origin: bottom; +} + +.features-c-item:hover::before { transform: scaleY(1); } +.features-c-item:hover { padding-left: 0.5rem; } + +/* ── Number ────────────────────────────────────────────── */ +.features-c-number { + font-family: var(--font-heading); + font-size: 3rem; + font-weight: 900; + color: var(--color-primary); + opacity: 0.25; + line-height: 1; + transition: opacity 0.3s ease; + user-select: none; +} + +.features-c-item:hover .features-c-number { opacity: 1; } + +/* ── Content ───────────────────────────────────────────── */ +.features-c-content {} + +.features-c-title { + font-family: var(--font-heading); + font-size: 1.25rem; + font-weight: 800; + color: var(--color-heading); + margin-bottom: 0.4rem; + transition: color 0.2s ease; +} + +.features-c-item:hover .features-c-title { color: var(--color-primary); } + +.features-c-desc { + font-size: 0.9rem; + color: var(--color-text-muted); + line-height: 1.7; + max-width: 560px; +} + +/* ── Right: icon ───────────────────────────────────────── */ +.features-c-icon { + width: 48px; height: 48px; + border-radius: var(--radius-md); + background-color: var(--color-surface); + border: 1px solid var(--color-border); + display: flex; align-items: center; justify-content: center; + flex-shrink: 0; + transition: all 0.3s ease; +} + +.features-c-icon svg { + width: 22px; height: 22px; + stroke: var(--color-text-muted); fill: none; + stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; + transition: stroke 0.3s ease; +} + +.features-c-item:hover .features-c-icon { + background-color: var(--color-primary); + border-color: var(--color-primary); +} + +.features-c-item:hover .features-c-icon svg { + stroke: var(--color-btn-text); +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 768px) { + .features-c-header { grid-template-columns: 1fr; } + + .features-c-item { + grid-template-columns: 50px 1fr; + gap: 1.25rem; + } + + .features-c-icon { display: none; } + .features-c-number { font-size: 2rem; } +} diff --git a/components/features/features.css b/components/features/features.css new file mode 100644 index 0000000..5e91597 --- /dev/null +++ b/components/features/features.css @@ -0,0 +1,149 @@ +/* ============================================================ + FEATURES COMPONENT + 3-column feature grid with icon, title, description + ============================================================ */ + +.features { + padding: 6rem 0; + background-color: var(--color-surface); + transition: background-color 0.4s ease; +} + +.features-header { + text-align: center; + margin-bottom: 4rem; +} + +.features-header .section-subtitle { + margin: 0 auto; +} + +/* ── Grid ──────────────────────────────────────────────── */ +.features-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; +} + +/* ── Card ──────────────────────────────────────────────── */ +.feature-card { + background-color: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: var(--radius-lg); + padding: 2rem; + position: relative; + overflow: hidden; + transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; + cursor: default; +} + +.feature-card::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); + transform: scaleX(0); + transform-origin: left; + transition: transform 0.35s ease; +} + +.feature-card:hover { + border-color: var(--card-hover-border); + transform: translateY(-4px); + box-shadow: var(--color-card-shadow); +} + +.feature-card:hover::after { + transform: scaleX(1); +} + +/* ── Icon ──────────────────────────────────────────────── */ +.feature-icon { + width: 48px; + height: 48px; + background-color: var(--color-primary-soft); + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.25rem; + transition: background-color 0.3s ease; +} + +.feature-icon svg { + width: 22px; + height: 22px; + color: var(--color-primary); + stroke: var(--color-primary); + fill: none; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + transition: color 0.3s ease, stroke 0.3s ease; +} + +.feature-card:hover .feature-icon { + background-color: var(--color-primary); +} + +.feature-card:hover .feature-icon svg { + color: var(--color-btn-text); + stroke: var(--color-btn-text); +} + +/* ── Text ──────────────────────────────────────────────── */ +.feature-title { + font-family: var(--font-heading); + font-size: 1.15rem; + font-weight: 700; + color: var(--color-heading); + margin-bottom: 0.6rem; + transition: color 0.3s ease; +} + +.feature-desc { + font-size: 0.92rem; + color: var(--color-text-muted); + line-height: 1.7; + transition: color 0.3s ease; +} + +.feature-link { + display: inline-flex; + align-items: center; + gap: 0.35rem; + margin-top: 1rem; + font-size: 0.85rem; + font-weight: 600; + color: var(--color-primary); + transition: gap 0.2s ease, color 0.2s ease; +} + +.feature-link:hover { + gap: 0.6rem; +} + +.feature-link svg { + width: 14px; height: 14px; + stroke: currentColor; + fill: none; + stroke-width: 2.5; + stroke-linecap: round; + stroke-linejoin: round; +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 900px) { + .features-grid { + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 580px) { + .features-grid { + grid-template-columns: 1fr; + } +} diff --git a/components/footer/footer-b.css b/components/footer/footer-b.css new file mode 100644 index 0000000..3117c7f --- /dev/null +++ b/components/footer/footer-b.css @@ -0,0 +1,124 @@ +/* ============================================================ + FOOTER — LAYOUT B + Two rows: top = centered nav links, bottom = brand + copy. + Airy, minimal, centered everything. + ============================================================ */ + +.footer-b { + background-color: var(--footer-bg); + padding: 3.5rem 0 0; + transition: background-color 0.4s ease; +} + +/* ── Top row: nav columns centered ────────────────────── */ +.footer-b-nav { + display: flex; + justify-content: center; + gap: 5rem; + padding-bottom: 3rem; + border-bottom: 1px solid var(--color-border); + flex-wrap: wrap; +} + +.footer-b-col {} + +.footer-b-col-title { + font-family: var(--font-heading); + font-size: 0.78rem; font-weight: 700; + letter-spacing: 0.1em; text-transform: uppercase; + color: var(--color-heading); + margin-bottom: 1rem; +} + +[data-theme="midnight"] .footer-b .footer-b-col-title, +[data-theme="neon"] .footer-b .footer-b-col-title { color: #f0f6ff; } +[data-theme="linen"] .footer-b .footer-b-col-title { color: #faf7f2; } +[data-theme="petal"] .footer-b .footer-b-col-title { color: #fdf8ff; } + +.footer-b-links { + display: flex; + flex-direction: column; + gap: 0.6rem; +} + +.footer-b-links a { + font-size: 0.88rem; + color: var(--footer-text); + transition: color 0.2s ease; +} + +.footer-b-links a:hover { color: var(--color-primary); } + +/* ── Bottom row: brand center ──────────────────────────── */ +.footer-b-bottom { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.25rem; + padding: 2.5rem 0; + text-align: center; + border-top: 1px solid var(--color-border); +} + +.footer-b-logo { + display: flex; + align-items: center; + gap: 0.6rem; + font-family: var(--font-heading); + font-size: 1.2rem; font-weight: 800; + color: var(--color-heading); + letter-spacing: -0.02em; + transition: color 0.3s ease; +} + +[data-theme="midnight"] .footer-b .footer-b-logo, +[data-theme="neon"] .footer-b .footer-b-logo { color: #f0f6ff; } +[data-theme="linen"] .footer-b .footer-b-logo { color: #faf7f2; } +[data-theme="petal"] .footer-b .footer-b-logo { color: #fdf8ff; } + +.footer-b-logo .logo-mark { + width: 28px; height: 28px; + background-color: var(--color-primary); + border-radius: var(--radius-sm); + display: flex; align-items: center; justify-content: center; + font-size: 0.85rem; font-weight: 900; + color: var(--color-btn-text); +} + +.footer-b-tagline { + font-size: 0.85rem; + color: var(--footer-text); + max-width: 340px; + line-height: 1.6; +} + +.footer-b-social { + display: flex; + gap: 0.75rem; +} + +.footer-b-social a { + width: 34px; height: 34px; + border-radius: var(--radius-sm); + border: 1px solid var(--color-border); + display: flex; align-items: center; justify-content: center; + color: var(--footer-text); + transition: all 0.2s ease; +} + +.footer-b-social a:hover { + border-color: var(--color-primary); + color: var(--color-primary); + background-color: var(--color-primary-soft); +} + +.footer-b-social a svg { + width: 14px; height: 14px; + stroke: currentColor; fill: none; + stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; +} + +.footer-b-copy { + font-size: 0.8rem; + color: var(--footer-text); +} diff --git a/components/footer/footer-c.css b/components/footer/footer-c.css new file mode 100644 index 0000000..c88ead6 --- /dev/null +++ b/components/footer/footer-c.css @@ -0,0 +1,90 @@ +/* ============================================================ + FOOTER — LAYOUT C + Ultra-minimal: single full-width bar. + Logo left, nav links center, copy right. One line. + ============================================================ */ + +.footer-c { + background-color: var(--footer-bg); + border-top: 1px solid var(--color-border); + transition: background-color 0.4s ease; +} + +.footer-c-bar { + display: flex; + align-items: center; + justify-content: space-between; + height: 64px; + gap: 2rem; +} + +/* ── Logo ──────────────────────────────────────────────── */ +.footer-c-logo { + display: flex; + align-items: center; + gap: 0.5rem; + font-family: var(--font-heading); + font-size: 1.1rem; font-weight: 800; + letter-spacing: -0.02em; + flex-shrink: 0; + transition: color 0.3s ease; +} + +[data-theme="midnight"] .footer-c .footer-c-logo, +[data-theme="neon"] .footer-c .footer-c-logo { color: #f0f6ff; } +[data-theme="linen"] .footer-c .footer-c-logo { color: #faf7f2; } +[data-theme="petal"] .footer-c .footer-c-logo { color: #fdf8ff; } + +.footer-c-logo:hover { color: var(--color-primary) !important; } + +.footer-c-logo .logo-mark { + width: 26px; height: 26px; + background-color: var(--color-primary); + border-radius: var(--radius-sm); + display: flex; align-items: center; justify-content: center; + font-size: 0.78rem; font-weight: 900; + color: var(--color-btn-text); +} + +/* ── Center nav ────────────────────────────────────────── */ +.footer-c-nav { + display: flex; + align-items: center; + gap: 1.75rem; + flex: 1; + justify-content: center; +} + +.footer-c-nav a { + font-size: 0.82rem; font-weight: 500; + color: var(--footer-text); + transition: color 0.2s ease; + white-space: nowrap; +} + +.footer-c-nav a:hover { color: var(--color-primary); } + +/* ── Right: copy ───────────────────────────────────────── */ +.footer-c-copy { + font-size: 0.78rem; + color: var(--footer-text); + flex-shrink: 0; + white-space: nowrap; +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 768px) { + .footer-c-bar { + flex-direction: column; + height: auto; + padding: 1.5rem 0; + gap: 1rem; + text-align: center; + } + + .footer-c-nav { + flex-wrap: wrap; + gap: 1rem; + justify-content: center; + } +} diff --git a/components/footer/footer.css b/components/footer/footer.css new file mode 100644 index 0000000..1d517a6 --- /dev/null +++ b/components/footer/footer.css @@ -0,0 +1,160 @@ +/* ============================================================ + FOOTER COMPONENT + 4-column link grid + bottom bar with copyright + ============================================================ */ + +.site-footer { + background-color: var(--footer-bg); + padding: 4rem 0 0; + transition: background-color 0.4s ease; +} + +/* ── Main grid ─────────────────────────────────────────── */ +.footer-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + gap: 3rem; + padding-bottom: 3rem; + border-bottom: 1px solid var(--color-border); +} + +/* ── Brand column ──────────────────────────────────────── */ +.footer-brand .header-logo { + margin-bottom: 1rem; + color: var(--color-heading); +} + +[data-theme="midnight"] .site-footer .header-logo { + color: #f0f6ff; +} + +[data-theme="linen"] .site-footer .header-logo { + color: #faf7f2; +} + +[data-theme="linen"] .site-footer .logo-mark { + color: #1c1208; +} + +.footer-tagline { + font-size: 0.9rem; + color: var(--footer-text); + line-height: 1.7; + max-width: 240px; + margin-bottom: 1.5rem; +} + +.footer-social { + display: flex; + gap: 0.75rem; +} + +.footer-social a { + width: 36px; height: 36px; + border-radius: var(--radius-sm); + border: 1px solid var(--color-border); + display: flex; + align-items: center; + justify-content: center; + color: var(--footer-text); + transition: all 0.2s ease; +} + +.footer-social a:hover { + border-color: var(--color-primary); + color: var(--color-primary); + background-color: var(--color-primary-soft); +} + +.footer-social a svg { + width: 16px; height: 16px; + stroke: currentColor; + fill: none; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; +} + +/* ── Link columns ──────────────────────────────────────── */ +.footer-col-title { + font-family: var(--font-heading); + font-size: 0.8rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--color-heading); + margin-bottom: 1.25rem; +} + +[data-theme="linen"] .site-footer .footer-col-title { + color: #faf7f2; +} + +[data-theme="midnight"] .site-footer .footer-col-title { + color: #f0f6ff; +} + +.footer-links { + display: flex; + flex-direction: column; + gap: 0.7rem; +} + +.footer-links a { + font-size: 0.9rem; + color: var(--footer-text); + transition: color 0.2s ease; +} + +.footer-links a:hover { + color: var(--color-primary); +} + +/* ── Bottom bar ────────────────────────────────────────── */ +.footer-bottom { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1.5rem 0; + gap: 1rem; + flex-wrap: wrap; +} + +.footer-copy { + font-size: 0.82rem; + color: var(--footer-text); +} + +.footer-bottom-links { + display: flex; + gap: 1.5rem; +} + +.footer-bottom-links a { + font-size: 0.82rem; + color: var(--footer-text); + transition: color 0.2s ease; +} + +.footer-bottom-links a:hover { + color: var(--color-primary); +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 900px) { + .footer-grid { + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 480px) { + .footer-grid { + grid-template-columns: 1fr; + gap: 2rem; + } + + .footer-bottom { + flex-direction: column; + align-items: flex-start; + } +} diff --git a/components/header/header-b.css b/components/header/header-b.css new file mode 100644 index 0000000..d4ad164 --- /dev/null +++ b/components/header/header-b.css @@ -0,0 +1,161 @@ +/* ============================================================ + HEADER — LAYOUT B + Centered: logo centered top, nav centered below it + Full-width underline, no right-side CTA buttons in nav row + ============================================================ */ + +.header-b { + position: sticky; + top: 0; + z-index: 100; + background-color: var(--nav-bg); + border-bottom: 1px solid var(--nav-border); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + transition: background-color 0.4s ease, border-color 0.4s ease; +} + +.header-b-inner { + display: flex; + flex-direction: column; + align-items: center; + padding: 1rem 0 0; + gap: 0; +} + +/* ── Logo row ──────────────────────────────────────────── */ +.header-b-top { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + padding-bottom: 0.85rem; + position: relative; +} + +.header-b-top .header-logo { + font-family: var(--font-heading); + font-size: 1.35rem; + font-weight: 800; + color: var(--color-heading); + display: flex; + align-items: center; + gap: 0.6rem; + letter-spacing: -0.02em; + transition: color 0.3s ease; +} + +.header-b-top .header-logo:hover { color: var(--color-primary); } + +.header-b-top .logo-mark { + width: 32px; height: 32px; + background-color: var(--color-primary); + border-radius: var(--radius-sm); + display: flex; align-items: center; justify-content: center; + font-size: 0.9rem; font-weight: 900; + color: var(--color-btn-text); + flex-shrink: 0; + transition: background-color 0.3s ease; +} + +/* CTA tucked to the right absolutely */ +.header-b-top .header-b-cta { + position: absolute; + right: 1.5rem; + display: flex; + gap: 0.6rem; +} + +.header-b-top .header-b-cta .btn { + padding: 0.5rem 1.1rem; + font-size: 0.85rem; +} + +/* ── Nav row ───────────────────────────────────────────── */ +.header-b-nav { + display: flex; + align-items: center; + justify-content: center; + gap: 0; + border-top: 1px solid var(--color-border); + width: 100%; +} + +.header-b-nav a { + padding: 0.7rem 1.4rem; + font-size: 0.875rem; + font-weight: 500; + color: var(--color-text-muted); + position: relative; + transition: color 0.2s ease; +} + +.header-b-nav a::after { + content: ''; + position: absolute; + bottom: 0; left: 0; right: 0; + height: 2px; + background-color: var(--color-primary); + transform: scaleX(0); + transition: transform 0.2s ease; +} + +.header-b-nav a:hover { color: var(--color-heading); } +.header-b-nav a:hover::after { transform: scaleX(1); } + +/* ── Mobile toggle ─────────────────────────────────────── */ +.header-b-top .mobile-toggle { + display: none; + position: absolute; + right: 1rem; + flex-direction: column; + gap: 5px; + cursor: pointer; + padding: 0.5rem; + border: none; + background: none; +} + +.header-b-top .mobile-toggle span { + display: block; width: 24px; height: 2px; + background-color: var(--color-text); + border-radius: 2px; + transition: all 0.3s ease; +} + +/* ── Mobile menu ───────────────────────────────────────── */ +.mobile-menu { + display: none; + flex-direction: column; + border-top: 1px solid var(--color-border); + padding: 1rem 0; + background-color: var(--nav-bg); + width: 100%; +} + +.mobile-menu a { + padding: 0.75rem 1.5rem; + font-size: 0.95rem; font-weight: 500; + color: var(--color-text); + transition: color 0.2s ease, background-color 0.2s ease; +} + +.mobile-menu a:hover { + color: var(--color-primary); + background-color: var(--color-primary-soft); +} + +.mobile-menu .mobile-menu-actions { + display: flex; gap: 0.75rem; + padding: 1rem 1.5rem 0; + border-top: 1px solid var(--color-border); + margin-top: 0.5rem; +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 768px) { + .header-b-nav, + .header-b-top .header-b-cta { display: none; } + .header-b-top .mobile-toggle { display: flex; } + .mobile-menu.is-open { display: flex; } +} diff --git a/components/header/header-c.css b/components/header/header-c.css new file mode 100644 index 0000000..15c6d6c --- /dev/null +++ b/components/header/header-c.css @@ -0,0 +1,151 @@ +/* ============================================================ + HEADER — LAYOUT C + Ultra-minimal: logo left, single CTA right. + Nav hidden behind a menu button that opens a full-width + dropdown drawer instead of an inline nav bar. + ============================================================ */ + +.header-c { + position: sticky; + top: 0; + z-index: 100; + background-color: var(--nav-bg); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + transition: background-color 0.4s ease; +} + +.header-c-inner { + display: flex; + align-items: center; + justify-content: space-between; + height: 64px; +} + +/* ── Logo ──────────────────────────────────────────────── */ +.header-c-inner .header-logo { + display: flex; + align-items: center; + gap: 0.6rem; + font-family: var(--font-heading); + font-size: 1.3rem; + font-weight: 800; + color: var(--color-heading); + letter-spacing: -0.02em; + transition: color 0.3s ease; +} + +.header-c-inner .header-logo:hover { color: var(--color-primary); } + +.header-c-inner .logo-mark { + width: 32px; height: 32px; + background-color: var(--color-primary); + border-radius: var(--radius-sm); + display: flex; align-items: center; justify-content: center; + font-size: 0.9rem; font-weight: 900; + color: var(--color-btn-text); + flex-shrink: 0; +} + +/* ── Right: CTA + menu trigger ─────────────────────────── */ +.header-c-right { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.header-c-right .btn { + padding: 0.5rem 1.25rem; + font-size: 0.875rem; +} + +/* ── Menu trigger ──────────────────────────────────────── */ +.header-c-menu-btn { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 0.85rem; + border: 1.5px solid var(--color-border); + border-radius: var(--radius-md); + background: none; + cursor: pointer; + font-family: var(--font-body); + font-size: 0.82rem; + font-weight: 600; + color: var(--color-text); + transition: all 0.2s ease; +} + +.header-c-menu-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); +} + +.header-c-menu-btn svg { + width: 16px; height: 16px; + stroke: currentColor; fill: none; + stroke-width: 2; stroke-linecap: round; +} + +/* ── Full-width nav drawer ─────────────────────────────── */ +.header-c-drawer { + display: none; + border-top: 1px solid var(--color-border); + background-color: var(--nav-bg); +} + +.header-c-drawer.is-open { display: block; } + +.header-c-drawer-inner { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 0; + padding: 0; +} + +.header-c-drawer-link { + display: flex; + flex-direction: column; + gap: 0.25rem; + padding: 1.25rem 1.5rem; + border-right: 1px solid var(--color-border); + transition: background-color 0.2s ease; +} + +.header-c-drawer-link:last-child { border-right: none; } + +.header-c-drawer-link:hover { + background-color: var(--color-primary-soft); +} + +.header-c-drawer-link-title { + font-size: 0.9rem; + font-weight: 700; + color: var(--color-heading); + transition: color 0.2s ease; +} + +.header-c-drawer-link:hover .header-c-drawer-link-title { + color: var(--color-primary); +} + +.header-c-drawer-link-desc { + font-size: 0.78rem; + color: var(--color-text-muted); + line-height: 1.5; +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 600px) { + .header-c-right .btn-outline { display: none; } + + .header-c-drawer-inner { + grid-template-columns: 1fr 1fr; + } + + .header-c-drawer-link:nth-child(2) { border-right: none; } + .header-c-drawer-link:nth-child(3), + .header-c-drawer-link:nth-child(4) { + border-top: 1px solid var(--color-border); + } +} diff --git a/components/header/header.css b/components/header/header.css new file mode 100644 index 0000000..e01bd0e --- /dev/null +++ b/components/header/header.css @@ -0,0 +1,168 @@ +/* ============================================================ + HEADER / NAV COMPONENT + Sticky, blurred, responsive navigation bar + ============================================================ */ + +.site-header { + position: sticky; + top: 0; + z-index: 100; + background-color: var(--nav-bg); + border-bottom: 1px solid var(--nav-border); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + transition: background-color 0.4s ease, border-color 0.4s ease; +} + +.header-inner { + display: flex; + align-items: center; + justify-content: space-between; + height: 68px; +} + +/* ── Logo ──────────────────────────────────────────────── */ +.header-logo { + display: flex; + align-items: center; + gap: 0.6rem; + font-family: var(--font-heading); + font-size: 1.3rem; + font-weight: 800; + color: var(--color-heading); + letter-spacing: -0.02em; + transition: color 0.3s ease; +} + +.header-logo:hover { + color: var(--color-primary); +} + +.logo-mark { + width: 32px; + height: 32px; + background-color: var(--color-primary); + border-radius: var(--radius-sm); + display: flex; + align-items: center; + justify-content: center; + font-size: 0.9rem; + font-weight: 900; + color: var(--color-btn-text); + flex-shrink: 0; + transition: background-color 0.3s ease; +} + +/* ── Nav links ─────────────────────────────────────────── */ +.header-nav { + display: flex; + align-items: center; + gap: 2rem; +} + +.header-nav a { + font-size: 0.9rem; + font-weight: 500; + color: var(--color-text-muted); + transition: color 0.2s ease; + position: relative; +} + +.header-nav a::after { + content: ''; + position: absolute; + bottom: -3px; + left: 0; + width: 0; + height: 2px; + background-color: var(--color-primary); + transition: width 0.2s ease; + border-radius: 2px; +} + +.header-nav a:hover { + color: var(--color-heading); +} + +.header-nav a:hover::after { + width: 100%; +} + +/* ── CTA group ─────────────────────────────────────────── */ +.header-actions { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.header-actions .btn { + padding: 0.55rem 1.25rem; + font-size: 0.875rem; +} + +/* ── Mobile toggle ─────────────────────────────────────── */ +.mobile-toggle { + display: none; + flex-direction: column; + gap: 5px; + cursor: pointer; + padding: 0.5rem; + border: none; + background: none; +} + +.mobile-toggle span { + display: block; + width: 24px; + height: 2px; + background-color: var(--color-text); + border-radius: 2px; + transition: all 0.3s ease; +} + +/* ── Mobile menu ───────────────────────────────────────── */ +.mobile-menu { + display: none; + flex-direction: column; + gap: 0; + border-top: 1px solid var(--color-border); + padding: 1rem 0; + background-color: var(--nav-bg); +} + +.mobile-menu a { + padding: 0.75rem 1.5rem; + font-size: 0.95rem; + font-weight: 500; + color: var(--color-text); + transition: color 0.2s ease, background-color 0.2s ease; +} + +.mobile-menu a:hover { + color: var(--color-primary); + background-color: var(--color-primary-soft); +} + +.mobile-menu .mobile-menu-actions { + display: flex; + gap: 0.75rem; + padding: 1rem 1.5rem 0; + border-top: 1px solid var(--color-border); + margin-top: 0.5rem; +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 768px) { + .header-nav, + .header-actions { + display: none; + } + + .mobile-toggle { + display: flex; + } + + .mobile-menu.is-open { + display: flex; + } +} diff --git a/components/hero/hero-b.css b/components/hero/hero-b.css new file mode 100644 index 0000000..0488899 --- /dev/null +++ b/components/hero/hero-b.css @@ -0,0 +1,195 @@ +/* ============================================================ + HERO — LAYOUT B + Centered, full-width headline. No right-side card. + Email capture inline. Trust logos bar below. + ============================================================ */ + +.hero-b { + background-color: var(--hero-bg); + background-image: var(--hero-gradient); + padding: 8rem 0 6rem; + text-align: center; + position: relative; + overflow: hidden; + transition: background-color 0.4s ease; +} + +/* ── Grid lines ────────────────────────────────────────── */ +.hero-b::before { + content: ''; + position: absolute; + inset: 0; + background-image: + linear-gradient(var(--color-border) 1px, transparent 1px), + linear-gradient(90deg, var(--color-border) 1px, transparent 1px); + background-size: 60px 60px; + opacity: 0.2; + pointer-events: none; +} + +.hero-b-inner { + max-width: 780px; + margin: 0 auto; + position: relative; + z-index: 1; +} + +/* ── Badge ─────────────────────────────────────────────── */ +.hero-b-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.4rem 0.9rem; + background-color: var(--color-primary-soft); + border: 1px solid var(--color-primary); + border-radius: 99px; + font-size: 0.8rem; + font-weight: 600; + color: var(--color-primary); + letter-spacing: 0.04em; + margin-bottom: 2rem; +} + +.hero-b-badge-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background-color: var(--color-primary); + animation: pulse-dot 2s ease-in-out infinite; +} + +/* ── Headline ──────────────────────────────────────────── */ +.hero-b-title { + font-family: var(--font-heading); + font-size: clamp(3rem, 6vw, 5rem); + font-weight: 900; + line-height: 1.05; + color: var(--color-heading); + letter-spacing: -0.035em; + margin-bottom: 1.5rem; +} + +.hero-b-title em { + font-style: normal; + color: var(--color-primary); +} + +.hero-b-subtitle { + font-size: 1.15rem; + color: var(--color-text-muted); + line-height: 1.75; + max-width: 560px; + margin: 0 auto 2.5rem; +} + +/* ── Email capture row ─────────────────────────────────── */ +.hero-b-capture { + display: flex; + align-items: center; + gap: 0.75rem; + max-width: 480px; + margin: 0 auto 1.5rem; + background-color: var(--card-bg); + border: 1.5px solid var(--card-border); + border-radius: var(--radius-lg); + padding: 0.4rem 0.4rem 0.4rem 1.1rem; + transition: border-color 0.25s ease, box-shadow 0.25s ease; +} + +.hero-b-capture:focus-within { + border-color: var(--color-primary); + box-shadow: 0 0 0 3px var(--color-primary-soft); +} + +.hero-b-input { + flex: 1; + background: none; + border: none; + outline: none; + font-family: var(--font-body); + font-size: 0.92rem; + color: var(--color-text); + padding: 0.4rem 0; + min-width: 0; +} + +.hero-b-input::placeholder { + color: var(--color-text-muted); +} + +.hero-b-capture .btn { + flex-shrink: 0; + padding: 0.6rem 1.25rem; + font-size: 0.875rem; +} + +.hero-b-note { + font-size: 0.8rem; + color: var(--color-text-muted); + margin-bottom: 3.5rem; +} + +/* ── Stats row ─────────────────────────────────────────── */ +.hero-b-stats { + display: flex; + align-items: center; + justify-content: center; + gap: 0; + border-top: 1px solid var(--color-border); + padding-top: 3rem; + flex-wrap: wrap; +} + +.hero-b-stat { + flex: 1; + min-width: 140px; + padding: 0 2rem; + border-right: 1px solid var(--color-border); +} + +.hero-b-stat:last-child { + border-right: none; +} + +.hero-b-stat-value { + font-family: var(--font-heading); + font-size: 2rem; + font-weight: 900; + color: var(--color-primary); + line-height: 1; + margin-bottom: 0.35rem; +} + +.hero-b-stat-label { + font-size: 0.8rem; + color: var(--color-text-muted); + font-weight: 500; +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 600px) { + .hero-b-capture { + flex-direction: column; + padding: 0.75rem; + border-radius: var(--radius-md); + } + + .hero-b-input { + width: 100%; + text-align: center; + } + + .hero-b-capture .btn { + width: 100%; + justify-content: center; + } + + .hero-b-stats { + gap: 1.5rem; + } + + .hero-b-stat { + border-right: none; + min-width: 100px; + } +} diff --git a/components/hero/hero-c.css b/components/hero/hero-c.css new file mode 100644 index 0000000..1f3e8b1 --- /dev/null +++ b/components/hero/hero-c.css @@ -0,0 +1,244 @@ +/* ============================================================ + HERO — LAYOUT C + Asymmetric 60/40. Left: large headline + feature pill list. + Right: stacked notification-style cards. Bold & editorial. + ============================================================ */ + +.hero-c { + background-color: var(--hero-bg); + background-image: var(--hero-gradient); + padding: 6rem 0 5rem; + position: relative; + overflow: hidden; + transition: background-color 0.4s ease; +} + +/* ── Decorative large bg text ──────────────────────────── */ +.hero-c::after { + content: 'HERO'; + position: absolute; + bottom: -2rem; + right: -1rem; + font-family: var(--font-heading); + font-size: clamp(8rem, 16vw, 14rem); + font-weight: 900; + color: var(--color-primary); + opacity: 0.03; + line-height: 1; + pointer-events: none; + user-select: none; + letter-spacing: -0.05em; +} + +.hero-c-inner { + display: grid; + grid-template-columns: 3fr 2fr; + gap: 4rem; + align-items: center; + position: relative; + z-index: 1; +} + +/* ── Left: content ─────────────────────────────────────── */ +.hero-c-content {} + +.hero-c-eyebrow { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 1.5rem; +} + +.hero-c-eyebrow-line { + width: 32px; + height: 2px; + background-color: var(--color-primary); + border-radius: 2px; +} + +.hero-c-eyebrow-text { + font-size: 0.78rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--color-primary); +} + +.hero-c-title { + font-family: var(--font-heading); + font-size: clamp(2.8rem, 5.5vw, 4.5rem); + font-weight: 900; + line-height: 1.05; + color: var(--color-heading); + letter-spacing: -0.035em; + margin-bottom: 1.5rem; +} + +.hero-c-title em { + font-style: normal; + color: var(--color-primary); +} + +.hero-c-subtitle { + font-size: 1.05rem; + color: var(--color-text-muted); + line-height: 1.75; + max-width: 480px; + margin-bottom: 2.5rem; +} + +/* ── Feature pill list ─────────────────────────────────── */ +.hero-c-features { + display: flex; + flex-direction: column; + gap: 0.6rem; + margin-bottom: 2.5rem; +} + +.hero-c-feature { + display: flex; + align-items: center; + gap: 0.75rem; + font-size: 0.92rem; + color: var(--color-text); + font-weight: 500; +} + +.hero-c-feature-check { + width: 20px; + height: 20px; + border-radius: 50%; + background-color: var(--color-primary-soft); + border: 1.5px solid var(--color-primary); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + transition: background-color 0.3s ease; +} + +.hero-c-feature-check svg { + width: 10px; + height: 10px; + stroke: var(--color-primary); + fill: none; + stroke-width: 3; + stroke-linecap: round; + stroke-linejoin: round; + transition: stroke 0.3s ease; +} + +.hero-c-feature:hover .hero-c-feature-check { + background-color: var(--color-primary); +} + +.hero-c-feature:hover .hero-c-feature-check svg { + stroke: var(--color-btn-text); +} + +/* ── Actions ───────────────────────────────────────────── */ +.hero-c-actions { + display: flex; + align-items: center; + gap: 1rem; + flex-wrap: wrap; +} + +/* ── Right: notification cards stack ──────────────────── */ +.hero-c-visual { + display: flex; + flex-direction: column; + gap: 0.85rem; + position: relative; +} + +.hero-c-notif { + background-color: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: var(--radius-lg); + padding: 1rem 1.25rem; + display: flex; + align-items: flex-start; + gap: 0.85rem; + transition: border-color 0.3s ease, transform 0.3s ease; + position: relative; + overflow: hidden; +} + +.hero-c-notif::before { + content: ''; + position: absolute; + left: 0; top: 0; bottom: 0; + width: 3px; + background-color: var(--color-primary); + opacity: 0; + transition: opacity 0.3s ease; +} + +.hero-c-notif:hover { + border-color: var(--card-hover-border); + transform: translateX(4px); +} + +.hero-c-notif:hover::before { + opacity: 1; +} + +/* Offset cards for depth */ +.hero-c-notif:nth-child(2) { margin-left: 1.5rem; } +.hero-c-notif:nth-child(3) { margin-left: 0.75rem; } +.hero-c-notif:nth-child(4) { margin-left: 2rem; } + +.hero-c-notif-icon { + width: 36px; + height: 36px; + border-radius: var(--radius-md); + background-color: var(--color-primary-soft); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + font-size: 1rem; + transition: background-color 0.3s ease; +} + +.hero-c-notif:hover .hero-c-notif-icon { + background-color: var(--color-primary); +} + +.hero-c-notif-body {} + +.hero-c-notif-title { + font-size: 0.85rem; + font-weight: 700; + color: var(--color-heading); + margin-bottom: 0.15rem; +} + +.hero-c-notif-text { + font-size: 0.78rem; + color: var(--color-text-muted); + line-height: 1.5; +} + +.hero-c-notif-time { + font-size: 0.7rem; + color: var(--color-text-muted); + margin-left: auto; + flex-shrink: 0; + padding-top: 2px; +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 900px) { + .hero-c-inner { + grid-template-columns: 1fr; + gap: 3rem; + } + + .hero-c-notif:nth-child(2), + .hero-c-notif:nth-child(3), + .hero-c-notif:nth-child(4) { + margin-left: 0; + } +} diff --git a/components/hero/hero.css b/components/hero/hero.css new file mode 100644 index 0000000..19dc97e --- /dev/null +++ b/components/hero/hero.css @@ -0,0 +1,286 @@ +/* ============================================================ + HERO COMPONENT + Full-width split hero with headline, sub, CTA, and badge + ============================================================ */ + +.hero { + background-color: var(--hero-bg); + background-image: var(--hero-gradient); + padding: 7rem 0 6rem; + position: relative; + overflow: hidden; + transition: background-color 0.4s ease; +} + +/* ── Decorative grid lines ─────────────────────────────── */ +.hero::before { + content: ''; + position: absolute; + inset: 0; + background-image: + linear-gradient(var(--color-border) 1px, transparent 1px), + linear-gradient(90deg, var(--color-border) 1px, transparent 1px); + background-size: 60px 60px; + opacity: 0.25; + pointer-events: none; +} + +.hero-inner { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; + position: relative; + z-index: 1; +} + +/* ── Left: content ─────────────────────────────────────── */ +.hero-content { + max-width: 560px; +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.4rem 0.9rem; + background-color: var(--color-primary-soft); + border: 1px solid var(--color-primary); + border-radius: 99px; + font-size: 0.8rem; + font-weight: 600; + color: var(--color-primary); + letter-spacing: 0.04em; + margin-bottom: 1.75rem; + transition: all 0.3s ease; +} + +.hero-badge-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background-color: var(--color-primary); + animation: pulse-dot 2s ease-in-out infinite; +} + +@keyframes pulse-dot { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.5; transform: scale(0.8); } +} + +.hero-title { + font-family: var(--font-heading); + font-size: clamp(2.6rem, 5vw, 3.8rem); + font-weight: 900; + line-height: 1.08; + color: var(--color-heading); + letter-spacing: -0.03em; + margin-bottom: 1.25rem; +} + +.hero-title em { + font-style: normal; + color: var(--color-primary); +} + +.hero-subtitle { + font-size: 1.15rem; + color: var(--color-text-muted); + line-height: 1.75; + margin-bottom: 2.25rem; + max-width: 480px; +} + +.hero-actions { + display: flex; + align-items: center; + gap: 1rem; + flex-wrap: wrap; + margin-bottom: 2.5rem; +} + +.hero-social-proof { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.hero-avatars { + display: flex; +} + +.hero-avatars span { + display: flex; + align-items: center; + justify-content: center; + width: 34px; + height: 34px; + border-radius: 50%; + border: 2px solid var(--color-bg); + background-color: var(--color-surface-2); + font-size: 0.7rem; + font-weight: 700; + color: var(--color-text); + margin-right: -10px; + transition: background-color 0.3s ease, border-color 0.3s ease; +} + +.hero-proof-text { + font-size: 0.85rem; + color: var(--color-text-muted); + padding-left: 18px; +} + +.hero-proof-text strong { + color: var(--color-heading); + font-weight: 700; +} + +/* ── Right: visual card ────────────────────────────────── */ +.hero-visual { + position: relative; +} + +.hero-card { + background-color: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: var(--radius-xl); + padding: 2rem; + box-shadow: var(--color-card-shadow), var(--color-glow); + transition: all 0.4s ease; + position: relative; + overflow: hidden; +} + +.hero-card::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 2px; + background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); + opacity: 0.8; +} + +.hero-card-header { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 1.5rem; +} + +.hero-card-dot { + width: 10px; height: 10px; border-radius: 50%; +} + +.hero-card-dot:nth-child(1) { background: #ff5f57; } +.hero-card-dot:nth-child(2) { background: #ffbd2e; } +.hero-card-dot:nth-child(3) { background: #28ca41; } + +.hero-stat-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + margin-bottom: 1.5rem; +} + +.hero-stat { + background-color: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: 1rem; + transition: all 0.3s ease; +} + +.hero-stat-value { + font-family: var(--font-heading); + font-size: 1.6rem; + font-weight: 900; + color: var(--color-primary); + line-height: 1; + margin-bottom: 0.3rem; +} + +.hero-stat-label { + font-size: 0.78rem; + color: var(--color-text-muted); + font-weight: 500; +} + +.hero-chart-bar { + display: flex; + align-items: flex-end; + gap: 6px; + height: 80px; +} + +.hero-chart-bar span { + flex: 1; + background-color: var(--color-primary-soft); + border-radius: var(--radius-sm) var(--radius-sm) 0 0; + transition: background-color 0.3s ease; + position: relative; + overflow: hidden; +} + +.hero-chart-bar span::after { + content: ''; + position: absolute; + bottom: 0; left: 0; right: 0; + background-color: var(--color-primary); + border-radius: inherit; + transition: height 0.8s ease; +} + +.hero-chart-bar span:nth-child(1)::after { height: 40%; } +.hero-chart-bar span:nth-child(2)::after { height: 65%; } +.hero-chart-bar span:nth-child(3)::after { height: 50%; } +.hero-chart-bar span:nth-child(4)::after { height: 80%; } +.hero-chart-bar span:nth-child(5)::after { height: 60%; } +.hero-chart-bar span:nth-child(6)::after { height: 90%; } +.hero-chart-bar span:nth-child(7)::after { height: 75%; } + +/* ── Floating badge ──────────────────────────────────── */ +.hero-float-badge { + position: absolute; + bottom: -1rem; + right: -1rem; + background-color: var(--color-primary); + color: var(--color-btn-text); + border-radius: var(--radius-lg); + padding: 0.75rem 1.25rem; + font-size: 0.8rem; + font-weight: 700; + box-shadow: 0 8px 24px var(--color-shadow); + animation: float-badge 4s ease-in-out infinite; +} + +@keyframes float-badge { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-6px); } +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 900px) { + .hero-inner { + grid-template-columns: 1fr; + gap: 3rem; + text-align: center; + } + + .hero-content { + max-width: 100%; + } + + .hero-actions { + justify-content: center; + } + + .hero-social-proof { + justify-content: center; + } + + .hero-subtitle { + margin-left: auto; + margin-right: auto; + } +} diff --git a/components/testimonials/testimonials-b.css b/components/testimonials/testimonials-b.css new file mode 100644 index 0000000..2097318 --- /dev/null +++ b/components/testimonials/testimonials-b.css @@ -0,0 +1,160 @@ +/* ============================================================ + TESTIMONIALS — LAYOUT B + One large featured quote center-stage. + Author selector row below — click to cycle testimonials. + ============================================================ */ + +.testimonials-b { + padding: 6rem 0; + background-color: var(--color-surface); + transition: background-color 0.4s ease; +} + +.testimonials-b-header { + text-align: center; + margin-bottom: 4rem; +} + +.testimonials-b-header .section-subtitle { margin: 0 auto; } + +/* ── Big quote card ────────────────────────────────────── */ +.testimonials-b-stage { + max-width: 820px; + margin: 0 auto 3rem; + background-color: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: var(--radius-xl); + padding: 3.5rem; + text-align: center; + position: relative; + overflow: hidden; + transition: border-color 0.3s ease; + box-shadow: var(--color-card-shadow); +} + +.testimonials-b-stage::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 3px; + background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); +} + +.testimonials-b-quote-mark { + font-family: var(--font-heading); + font-size: 5rem; + line-height: 0.6; + color: var(--color-primary); + opacity: 0.2; + margin-bottom: 1.5rem; + display: block; +} + +/* Testimonial slides */ +.testimonials-b-slide { + display: none; +} + +.testimonials-b-slide.is-active { + display: block; + animation: tb-fade-in 0.4s ease; +} + +@keyframes tb-fade-in { + from { opacity: 0; transform: translateY(8px); } + to { opacity: 1; transform: translateY(0); } +} + +.testimonials-b-text { + font-size: 1.2rem; + color: var(--color-text); + line-height: 1.8; + font-style: italic; + margin-bottom: 2rem; +} + +.testimonials-b-stars { + display: flex; + gap: 3px; + justify-content: center; + margin-bottom: 1.5rem; +} + +.testimonials-b-stars span { color: var(--color-accent); font-size: 1rem; } + +.testimonials-b-author { + display: flex; + align-items: center; + justify-content: center; + gap: 0.85rem; +} + +.testimonials-b-avatar { + width: 44px; height: 44px; + border-radius: 50%; + background-color: var(--color-primary-soft); + border: 2px solid var(--color-primary); + display: flex; align-items: center; justify-content: center; + font-size: 0.8rem; font-weight: 800; + color: var(--color-primary); +} + +.testimonials-b-name { + font-size: 0.92rem; font-weight: 700; + color: var(--color-heading); + margin-bottom: 0.15rem; +} + +.testimonials-b-role { + font-size: 0.8rem; + color: var(--color-text-muted); +} + +/* ── Author selector row ───────────────────────────────── */ +.testimonials-b-selectors { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + flex-wrap: wrap; +} + +.testimonials-b-selector { + display: flex; + align-items: center; + gap: 0.6rem; + padding: 0.6rem 1.1rem; + border-radius: 99px; + border: 1.5px solid var(--color-border); + background: none; + cursor: pointer; + font-family: var(--font-body); + font-size: 0.82rem; + font-weight: 600; + color: var(--color-text-muted); + transition: all 0.2s ease; +} + +.testimonials-b-selector.is-active, +.testimonials-b-selector:hover { + border-color: var(--color-primary); + color: var(--color-primary); + background-color: var(--color-primary-soft); +} + +.testimonials-b-sel-avatar { + width: 24px; height: 24px; + border-radius: 50%; + background-color: var(--color-surface-2); + display: flex; align-items: center; justify-content: center; + font-size: 0.6rem; font-weight: 800; + color: var(--color-text); + flex-shrink: 0; + transition: all 0.2s ease; +} + +.testimonials-b-selector.is-active .testimonials-b-sel-avatar, +.testimonials-b-selector:hover .testimonials-b-sel-avatar { + background-color: var(--color-primary); + color: var(--color-btn-text); +} diff --git a/components/testimonials/testimonials-c.css b/components/testimonials/testimonials-c.css new file mode 100644 index 0000000..c5ed7b3 --- /dev/null +++ b/components/testimonials/testimonials-c.css @@ -0,0 +1,153 @@ +/* ============================================================ + TESTIMONIALS — LAYOUT C + Full-width stacked list. Each testimonial is a wide row + with a large number, quote, and author inline. + ============================================================ */ + +.testimonials-c { + padding: 6rem 0; + background-color: var(--color-bg); + transition: background-color 0.4s ease; +} + +.testimonials-c-header { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + align-items: end; + margin-bottom: 4rem; + padding-bottom: 3rem; + border-bottom: 2px solid var(--color-border); +} + +.testimonials-c-header .section-subtitle { margin: 0; } + +/* ── List ──────────────────────────────────────────────── */ +.testimonials-c-list { + display: flex; + flex-direction: column; + gap: 0; +} + +/* ── Each row ──────────────────────────────────────────── */ +.testimonials-c-item { + display: grid; + grid-template-columns: 60px 1fr auto; + gap: 2.5rem; + align-items: center; + padding: 2.5rem 0; + border-bottom: 1px solid var(--color-border); + cursor: default; + transition: background-color 0.2s ease; + position: relative; +} + +.testimonials-c-item:hover { + padding-left: 1rem; + padding-right: 1rem; + margin-left: -1rem; + margin-right: -1rem; + background-color: var(--color-surface); + border-radius: var(--radius-md); +} + +/* ── Big number ────────────────────────────────────────── */ +.testimonials-c-num { + font-family: var(--font-heading); + font-size: 2.5rem; + font-weight: 900; + color: var(--color-primary); + opacity: 0.2; + line-height: 1; + transition: opacity 0.3s ease; + user-select: none; +} + +.testimonials-c-item:hover .testimonials-c-num { opacity: 1; } + +/* ── Quote ─────────────────────────────────────────────── */ +.testimonials-c-body {} + +.testimonials-c-stars { + display: flex; + gap: 2px; + margin-bottom: 0.6rem; +} + +.testimonials-c-stars span { color: var(--color-accent); font-size: 0.85rem; } + +.testimonials-c-text { + font-size: 0.98rem; + color: var(--color-text); + line-height: 1.75; + font-style: italic; + margin-bottom: 0.75rem; + max-width: 680px; +} + +/* ── Author inline ─────────────────────────────────────── */ +.testimonials-c-author { + display: flex; + align-items: center; + gap: 0.6rem; +} + +.testimonials-c-avatar { + width: 32px; height: 32px; + border-radius: 50%; + background-color: var(--color-primary-soft); + border: 1.5px solid var(--color-primary); + display: flex; align-items: center; justify-content: center; + font-size: 0.65rem; font-weight: 800; + color: var(--color-primary); + flex-shrink: 0; + transition: all 0.2s ease; +} + +.testimonials-c-item:hover .testimonials-c-avatar { + background-color: var(--color-primary); + color: var(--color-btn-text); +} + +.testimonials-c-name { + font-size: 0.85rem; font-weight: 700; + color: var(--color-heading); +} + +.testimonials-c-role { + font-size: 0.78rem; + color: var(--color-text-muted); + margin-left: 0.5rem; +} + +/* ── Right: company badge ──────────────────────────────── */ +.testimonials-c-badge { + padding: 0.35rem 0.85rem; + border: 1px solid var(--color-border); + border-radius: 99px; + font-size: 0.75rem; + font-weight: 600; + color: var(--color-text-muted); + white-space: nowrap; + flex-shrink: 0; + transition: all 0.2s ease; +} + +.testimonials-c-item:hover .testimonials-c-badge { + border-color: var(--color-primary); + color: var(--color-primary); + background-color: var(--color-primary-soft); +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 768px) { + .testimonials-c-header { grid-template-columns: 1fr; } + + .testimonials-c-item { + grid-template-columns: 40px 1fr; + gap: 1.25rem; + } + + .testimonials-c-badge { display: none; } + .testimonials-c-num { font-size: 1.8rem; } +} diff --git a/components/testimonials/testimonials.css b/components/testimonials/testimonials.css new file mode 100644 index 0000000..87823bd --- /dev/null +++ b/components/testimonials/testimonials.css @@ -0,0 +1,159 @@ +/* ============================================================ + TESTIMONIALS COMPONENT + 3-column card grid with quote, avatar, name, role + ============================================================ */ + +.testimonials { + padding: 6rem 0; + background-color: var(--color-bg); + transition: background-color 0.4s ease; +} + +.testimonials-header { + text-align: center; + margin-bottom: 4rem; +} + +.testimonials-header .section-subtitle { + margin: 0 auto; +} + +/* ── Grid ──────────────────────────────────────────────── */ +.testimonials-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + align-items: start; +} + +/* ── Card ──────────────────────────────────────────────── */ +.testimonial-card { + background-color: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: var(--radius-lg); + padding: 2rem; + display: flex; + flex-direction: column; + gap: 1.25rem; + position: relative; + transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; +} + +.testimonial-card:hover { + border-color: var(--card-hover-border); + transform: translateY(-3px); + box-shadow: var(--color-card-shadow); +} + +/* Offset second card slightly for visual interest */ +.testimonials-grid .testimonial-card:nth-child(2) { + margin-top: 1.5rem; +} + +/* ── Stars ─────────────────────────────────────────────── */ +.testimonial-stars { + display: flex; + gap: 3px; +} + +.testimonial-stars span { + color: var(--color-accent); + font-size: 0.9rem; +} + +/* ── Quote mark ────────────────────────────────────────── */ +.testimonial-quote-mark { + font-family: var(--font-heading); + font-size: 4rem; + line-height: 0.5; + color: var(--color-primary); + opacity: 0.3; + user-select: none; +} + +/* ── Text ──────────────────────────────────────────────── */ +.testimonial-text { + font-size: 0.93rem; + color: var(--color-text); + line-height: 1.8; + flex: 1; +} + +/* ── Divider ───────────────────────────────────────────── */ +.testimonial-divider { + height: 1px; + background-color: var(--color-border); + transition: background-color 0.3s ease; +} + +/* ── Author ────────────────────────────────────────────── */ +.testimonial-author { + display: flex; + align-items: center; + gap: 0.85rem; +} + +.testimonial-avatar { + width: 42px; + height: 42px; + border-radius: 50%; + background-color: var(--color-primary-soft); + border: 2px solid var(--color-primary); + display: flex; + align-items: center; + justify-content: center; + font-size: 0.78rem; + font-weight: 800; + color: var(--color-primary); + flex-shrink: 0; + transition: all 0.3s ease; +} + +.testimonial-card:hover .testimonial-avatar { + background-color: var(--color-primary); + color: var(--color-btn-text); +} + +.testimonial-name { + font-size: 0.9rem; + font-weight: 700; + color: var(--color-heading); + margin-bottom: 0.15rem; +} + +.testimonial-role { + font-size: 0.78rem; + color: var(--color-text-muted); +} + +/* ── Featured card (middle) ────────────────────────────── */ +.testimonial-card.is-featured { + border-color: var(--color-primary); + background: linear-gradient(160deg, var(--color-primary-soft) 0%, var(--card-bg) 50%); +} + +.testimonial-card.is-featured::before { + content: 'Featured'; + position: absolute; + top: -1px; + right: 1.5rem; + background-color: var(--color-primary); + color: var(--color-btn-text); + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + padding: 0.25rem 0.7rem; + border-radius: 0 0 var(--radius-sm) var(--radius-sm); +} + +/* ── Responsive ─────────────────────────────────────────── */ +@media (max-width: 900px) { + .testimonials-grid { + grid-template-columns: 1fr; + } + + .testimonials-grid .testimonial-card:nth-child(2) { + margin-top: 0; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..6cb65e9 --- /dev/null +++ b/index.html @@ -0,0 +1,955 @@ + + + + + + Landing System — Theme Demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + + +
+ Sign in + Get started +
+ + +
+
+ + + +
+ +
+ + + +
+
+
+ + +
+
+ + Now in public beta +
+ +

+ Your headline
+ goes right here
+ like this +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim. +

+ +
+ + Primary action + + + Secondary action +
+ +
+
+ AB + CD + EF + GH +
+

2,400+ users already signed up

+
+
+ + +
+
+
+ + + +
+ +
+
+
98.7%
+
Uptime
+
+
+
4.2ms
+
Response
+
+
+
12k
+
Daily users
+
+
+
+34%
+
Growth
+
+
+ +
+ + +
+
+ +
✦ Ships in minutes
+
+ +
+
+
+ + + +
+
+ +
+ Features +

Everything you need
to build great products

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +

+
+ +
+ + +
+
+ +
+

Feature Title One

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua enim. +

+ + Learn more + + +
+ + +
+
+ +
+

Feature Title Two

+

+ Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi + ut aliquip ex ea commodo consequat duis aute irure dolor. +

+ + Learn more + + +
+ + +
+
+ +
+

Feature Title Three

+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat. +

+ + Learn more + + +
+ + +
+
+ +
+

Feature Title Four

+

+ Excepteur sint occaecat cupidatat non proident sunt in culpa qui + officia deserunt mollit anim id est laborum consectetur adipiscing. +

+ + Learn more + + +
+ + +
+
+ +
+

Feature Title Five

+

+ Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat duis aute irure dolor in reprehenderit voluptate velit. +

+ + Learn more + + +
+ + +
+
+ +
+

Feature Title Six

+

+ Voluptate velit esse cillum dolore eu fugiat nulla pariatur sint + occaecat cupidatat non proident sunt in culpa qui officia deserunt. +

+ + Learn more + + +
+ +
+
+
+ + + +
+
+
+ + +
+ About Us +

We're building the future of the web

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. +

+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore + eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt + in culpa qui officia deserunt mollit anim id est laborum. +

+
+ Design Systems + Open Source + Developer Tools + UI Components + Accessibility +
+ Meet the team +
+ + +
+
+
+
8+
+
Years active
+
Lorem ipsum dolor sit amet consectetur.
+
+
+
120k
+
Users worldwide
+
Adipiscing elit sed do eiusmod tempor.
+
+
+
+
+
340+
+
Components
+
Incididunt ut labore et dolore magna.
+
+
+
99%
+
Satisfaction
+
Quis nostrud exercitation ullamco.
+
+
+
+
+ AJ + BK + CL + DM + +24 +
+
+
A team of 28 across 12 countries
+
Remote-first since day one
+
+
+
+ +
+
+
+ + + +
+
+
+ Testimonials +

What our users are saying

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +

+
+ +
+ + +
+
+ ★★★★★ +
+
"
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam + quis nostrud exercitation ullamco laboris. +

+
+
+
AJ
+
+
Alex Johnson
+
Product Designer, Acme Co.
+
+
+
+ + +
+
+ ★★★★★ +
+
"
+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore + eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident sunt + in culpa qui officia deserunt mollit anim id est. +

+
+
+
BK
+
+
Blake Kim
+
Engineering Lead, Startup Inc.
+
+
+
+ + +
+
+ ★★★★★ +
+
"
+

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit + voluptate velit esse cillum dolore eu fugiat. +

+
+
+
CL
+
+
Casey Lee
+
Founder, Lorem Studio
+
+
+
+ +
+
+
+ + + +
+
+
+ + +
+ FAQ +

Frequently asked questions

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod + tempor incididunt ut labore et dolore. +

+

+ Still have questions? Get in touch and we'll + get back to you within 24 hours. +

+
+ + +
+ +
+ +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+
+ +
+ +
+
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore + eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt + in culpa qui officia deserunt mollit anim id est laborum. +
+
+
+ +
+ +
+
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet consectetur + adipiscing elit sed do eiusmod tempor incididunt labore et dolore. +
+
+
+ +
+ +
+
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit + in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
+
+
+ +
+ +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam + quis nostrud exercitation ullamco laboris nisi ut aliquip commodo. +
+
+
+ +
+ +
+
+ Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat. +
+
+
+ +
+
+
+
+ + + +
+
+
+ + +
+ Contact Us +

Get in touch with our team

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +

+ +
+
+
+ +
+
+
Email
+
[email protected]
+
+
+
+
+ +
+
+
Phone
+
+1 (555) 000-0000
+
+
+
+
+ +
+
+
Office
+
123 Example Street, City, Country
+
+
+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+
+
+ + +
+
+
+

+ By submitting you agree to our Privacy Policy and Terms of Service. +

+ +
+
+
+
+ +
+
Message sent!
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. We'll be in + touch within 24 hours. +

+
+
+ +
+
+
+ + + +
+
+
+ + + Get started today + + +

+ Ready to get
started right now? +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua enim ad minim. +

+ +
+ + Primary action + + + Secondary action +
+ +
+ + + Free 14-day trial + + + + + Cancel anytime + + + + + No credit card needed + +
+
+
+
+ + + + + + + +
+ +
+ Layout + + + +
+ +
+ Theme + + + + +
+ +
+ + + + diff --git a/layout-b.html b/layout-b.html new file mode 100644 index 0000000..a8b3dfd --- /dev/null +++ b/layout-b.html @@ -0,0 +1,375 @@ + + + + + + UI Kit Demo — Layout B + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ +
+ Sign in + Get started +
+ +
+ +
+
+ +
+
+ + +
+
+
+
Now in public beta
+

Your headline
goes right here
centered

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.

+
+ + Get started +
+

Free 14-day trial · No credit card needed · Cancel anytime

+
+
98.7%
Uptime
+
12k
Daily users
+
4.2ms
Response time
+
+34%
Growth
+
+
+
+
+ + +
+
+
+ Features +

Everything you need
to build great products

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+
+
+

Feature Title One

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam.

+ Learn more +
+
+

Sub-point AlphaLorem ipsum dolor sit amet consectetur adipiscing elit.

+

Sub-point BetaSed do eiusmod tempor incididunt ut labore et dolore.

+

Sub-point GammaUt enim ad minim veniam quis nostrud exercitation.

+
+
+
+
+
+

Feature Title Two

+

Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor reprehenderit.

+ Learn more +
+
+

Sub-point DeltaDuis aute irure dolor in reprehenderit in voluptate.

+

Sub-point EpsilonExcepteur sint occaecat cupidatat non proident sunt.

+

Sub-point ZetaIn culpa qui officia deserunt mollit anim id est.

+
+
+
+
+
+

Feature Title Three

+

Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing.

+ Learn more +
+
+

Sub-point EtaQuis nostrud exercitation ullamco laboris nisi aliquip.

+

Sub-point ThetaCommodo consequat duis aute irure dolor reprehenderit.

+

Sub-point IotaVoluptate velit esse cillum dolore eu fugiat nulla.

+
+
+
+
+ + +
+
+
+ About Us +

We're building the future of the web

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ Meet the team + Read our story +
+
+
+
8+
Years active
Lorem ipsum dolor sit amet.
+
120k
Users worldwide
Adipiscing elit sed do eiusmod.
+
340+
Components
Incididunt ut labore et dolore.
+
99%
Satisfaction
Quis nostrud exercitation.
+
+
+ Design SystemsOpen Source + Developer ToolsUI Components + Accessibility +
+
+
AJBKCLDM+24
+

A team of 28 across 12 countries — remote-first since day one

+
+
+
+ + +
+
+
+ Testimonials +

What our users are saying

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+ " +
+
★★★★★
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
AJ
Alex Johnson
Product Designer, Acme Co.
+
+
+
★★★★★
+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum et magna aliqua.

+
BK
Blake Kim
Engineering Lead, Startup Inc.
+
+
+
★★★★★
+

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit voluptate velit esse cillum dolore eu fugiat nulla pariatur et lorem.

+
CL
Casey Lee
Founder, Lorem Studio
+
+
+
+ + + +
+
+
+ + +
+
+
+ FAQ +

Frequently asked questions

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore.

+

Still have questions? Get in touch and we'll get back to you within 24 hours.

+
+
+
+ +
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+
+ +
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+ +
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt labore et dolore.
+
+
+ +
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+
+ +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip commodo.
+
+
+ +
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat.
+
+
+
+
+ + +
+
+
+ Contact Us +

Get in touch with our team

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+
+
+
+
+
+
+
+
+
+

By submitting you agree to our Privacy Policy and Terms of Service.

+ +
+
+
+
+
Message sent!
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. We'll be in touch within 24 hours.

+
+
+
+
+ + +
+
+
+
+ Get started today +

Ready to get
started right now?

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim.

+
+
Free 14-day trial
+
Cancel anytime
+
No credit card needed
+
+
+
+
Start your free trial
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.

+
+ + +
+ Create free account +

Free 14-day trial · No credit card required

+
+
+
+
+ + + + + +
+
+ Layout + + + +
+
+ Theme + + + + +
+
+ + + + diff --git a/layout-c.html b/layout-c.html new file mode 100644 index 0000000..2af1f6d --- /dev/null +++ b/layout-c.html @@ -0,0 +1,362 @@ + + + + + + UI Kit Demo — Layout C + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ +
+ Sign in + Get started + +
+
+
+ +
+
+ + +
+
+
+
+
Now in public beta
+

Your headline
goes right here
asymmetric

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.

+
+
Feature one — lorem ipsum dolor sit amet
+
Feature two — consectetur adipiscing elit
+
Feature three — sed do eiusmod tempor
+
Feature four — incididunt ut labore et dolore
+
+
+ Primary action + Secondary action +
+
+
+
🚀
Deployment successful
Lorem ipsum dolor sit amet consectetur.
2m ago
+
📈
Traffic up 34% this week
Adipiscing elit sed do eiusmod tempor.
1h ago
+
✅
All systems operational
Incididunt ut labore et dolore magna.
3h ago
+
👥
2,400 users onboarded
Quis nostrud exercitation ullamco.
Yesterday
+
+
+
+
+ + +
+
+
+
Features

Everything you need
to build great products

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+
01

Feature Title One

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation.

+
02

Feature Title Two

Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit voluptate velit.

+
03

Feature Title Three

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident sunt in culpa.

+
04

Feature Title Four

Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet consectetur adipiscing.

+
05

Feature Title Five

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

+
06

Feature Title Six

Voluptate velit esse cillum dolore eu fugiat nulla pariatur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim est laborum.

+
+
+
+ + +
+
+
+
+
+ Image placeholder
4:5 ratio +
+
28Team members
+
+
+ About Us +

We're building the future of the web

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa officia deserunt mollit.

+
+
8+
Years active
+
120k
Users worldwide
+
340+
Components
+
99%
Satisfaction
+
+
+ Design SystemsOpen Source + Developer ToolsUI Components + Accessibility +
+ Meet the team +
+
+
+
+ + +
+
+
+
Testimonials

What our users are saying

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+
+ 01 +
+
★★★★★
+

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi."

+
AJ
Alex JohnsonProduct Designer, Acme Co.
+
+ Acme Co. +
+
+ 02 +
+
★★★★★
+

"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt."

+
BK
Blake KimEngineering Lead, Startup Inc.
+
+ Startup Inc. +
+
+ 03 +
+
★★★★★
+

"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit voluptate velit esse cillum dolore."

+
CL
Casey LeeFounder, Lorem Studio
+
+ Lorem Studio +
+
+
+
+ + +
+
+
+ FAQ +

Frequently asked questions

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore.

+

Still have questions? Get in touch and we'll respond within 24 hours.

+
+
+
+
+ +
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation laboris.
+
+
+ +
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
+
+
+ +
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet consectetur adipiscing elit.
+
+
+
+
+ +
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit voluptate.
+
+
+ +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud.
+
+
+ +
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
+
+
+
+
+
+ + +
+
+
+
+ Contact Us +

Get in touch with our team

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
Email
hello@example.com
+
Phone
+1 (555) 000-0000
+
Office
123 Example Street, City
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
Message sent!
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. We'll be in touch within 24 hours.

+
+
+
+
Why reach out to us?
+
+
Lorem ipsum dolor sit amet consectetur.
+
Adipiscing elit sed do eiusmod tempor.
+
Incididunt ut labore et dolore magna.
+
Quis nostrud exercitation ullamco nisi.
+
+
+
Response timeWe typically reply within 24 hours on business days.
+
+
+
+
+ + +
+
+
+ Get started today +

Ready to get
started right now?

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam.

+
+ Primary action + Secondary action +
+
+ Free 14-day trial + + Cancel anytime + + No credit card needed +
+
+
+
+ + + + + +
+
+ Layout + + + +
+
+ Theme + + + + +
+
+ + + + diff --git a/layout.js b/layout.js new file mode 100644 index 0000000..be44923 --- /dev/null +++ b/layout.js @@ -0,0 +1,113 @@ +/* ============================================================ + LAYOUT.JS — shared across all layout pages + Handles: theme switching, layout switching, mobile menu, + FAQ accordion, contact form, scroll animations + ============================================================ */ + +(function () { + + const html = document.documentElement; + + // ── 1. Apply saved theme immediately (before paint) ────── + const savedTheme = localStorage.getItem('demo-theme') || 'midnight'; + html.setAttribute('data-theme', savedTheme); + + // ── 2. Apply saved layout pill active state ────────────── + const savedLayout = localStorage.getItem('demo-layout') || 'a'; + + document.addEventListener('DOMContentLoaded', () => { + + // ── Theme switcher ────────────────────────────────────── + const themePills = document.querySelectorAll('.theme-pill'); + + themePills.forEach(pill => { + if (pill.dataset.t === savedTheme) pill.classList.add('active'); + pill.addEventListener('click', () => applyTheme(pill.dataset.t)); + }); + + function applyTheme(name) { + html.setAttribute('data-theme', name); + localStorage.setItem('demo-theme', name); + themePills.forEach(p => p.classList.toggle('active', p.dataset.t === name)); + } + + // ── Layout switcher ───────────────────────────────────── + const layoutPills = document.querySelectorAll('.layout-pill'); + const LAYOUT_PAGES = { a: 'index.html', b: 'layout-b.html', c: 'layout-c.html' }; + + layoutPills.forEach(pill => { + if (pill.dataset.l === savedLayout) pill.classList.add('active'); + + pill.addEventListener('click', () => { + const target = pill.dataset.l; + if (target === savedLayout) return; // already on this layout + localStorage.setItem('demo-layout', target); + + // Fade out, navigate + document.body.style.transition = 'opacity 0.25s ease'; + document.body.style.opacity = '0'; + setTimeout(() => { + window.location.href = LAYOUT_PAGES[target]; + }, 240); + }); + }); + + // ── Mobile menu toggle ────────────────────────────────── + const mobileToggle = document.getElementById('mobileToggle'); + const mobileMenu = document.getElementById('mobileMenu'); + if (mobileToggle) { + mobileToggle.addEventListener('click', () => { + mobileMenu.classList.toggle('is-open'); + }); + } + + // ── FAQ accordion ─────────────────────────────────────── + document.querySelectorAll('.faq-question').forEach(btn => { + btn.addEventListener('click', () => { + const item = btn.closest('.faq-item'); + const isOpen = item.classList.contains('is-open'); + document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('is-open')); + if (!isOpen) item.classList.add('is-open'); + }); + }); + + // ── Contact form ──────────────────────────────────────── + const contactForm = document.getElementById('contactForm'); + const formSuccess = document.getElementById('formSuccess'); + if (contactForm) { + contactForm.addEventListener('submit', e => { + e.preventDefault(); + contactForm.style.display = 'none'; + formSuccess.classList.add('is-visible'); + }); + } + + // ── Scroll-triggered feature cards ────────────────────── + const featureCards = document.querySelectorAll('.feature-card'); + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + observer.unobserve(entry.target); + } + }); + }, { threshold: 0.12 }); + + featureCards.forEach((card, i) => { + card.style.opacity = '0'; + card.style.transform = 'translateY(24px)'; + card.style.transition = `opacity 0.5s ease ${i * 0.08}s, transform 0.5s ease ${i * 0.08}s, border-color 0.3s ease, box-shadow 0.3s ease`; + observer.observe(card); + }); + + // ── Fade in on load ───────────────────────────────────── + document.body.style.opacity = '0'; + document.body.style.transition = 'opacity 0.3s ease'; + requestAnimationFrame(() => { + requestAnimationFrame(() => { document.body.style.opacity = '1'; }); + }); + + }); + +})(); diff --git a/themes/theme-linen.css b/themes/theme-linen.css new file mode 100644 index 0000000..31e27db --- /dev/null +++ b/themes/theme-linen.css @@ -0,0 +1,63 @@ +/* ============================================================ + THEME: LINEN + Warm, editorial, organic — deep terracotta on cream linen + ============================================================ */ + +[data-theme="linen"] { + /* ── Core palette ──────────────────────────────────────── */ + --color-bg: #faf7f2; + --color-surface: #f2ede4; + --color-surface-2: #ede6d9; + --color-border: #e0d8cc; + --color-border-light: #ede6d9; + + /* ── Brand / Accent ────────────────────────────────────── */ + --color-primary: #c2410c; + --color-primary-hover: #9a340a; + --color-accent: #d97706; + --color-accent-soft: rgba(217, 119, 6, 0.12); + --color-primary-soft: rgba(194, 65, 12, 0.08); + + /* ── Text ──────────────────────────────────────────────── */ + --color-heading: #1c1208; + --color-text: #3d2f1e; + --color-text-muted: #7a6550; + --color-btn-text: #faf7f2; + + /* ── Shadows ───────────────────────────────────────────── */ + --color-shadow: rgba(194, 65, 12, 0.2); + --color-card-shadow: 0 4px 24px rgba(60, 30, 10, 0.08); + --color-glow: 0 0 0 transparent; + + /* ── Typography ────────────────────────────────────────── */ + --font-heading: 'Playfair Display', serif; + --font-body: 'Source Sans 3', sans-serif; + + /* ── Shape ─────────────────────────────────────────────── */ + --radius-sm: 3px; + --radius-md: 6px; + --radius-lg: 12px; + --radius-xl: 20px; + + /* ── Nav specific ──────────────────────────────────────── */ + --nav-bg: rgba(250, 247, 242, 0.95); + --nav-border: rgba(224, 216, 204, 0.9); + + /* ── Hero specific ─────────────────────────────────────── */ + --hero-bg: #faf7f2; + --hero-gradient: radial-gradient(ellipse 70% 50% at 60% 100%, rgba(194,65,12,0.06) 0%, transparent 70%), + radial-gradient(ellipse 40% 40% at 10% 20%, rgba(217,119,6,0.05) 0%, transparent 60%); + + /* ── Feature card ──────────────────────────────────────── */ + --card-bg: #faf7f2; + --card-border: #e0d8cc; + --card-hover-border: #c2410c; + + /* ── CTA section ───────────────────────────────────────── */ + --cta-bg: #f2ede4; + --cta-gradient: linear-gradient(135deg, rgba(194,65,12,0.04) 0%, rgba(217,119,6,0.04) 100%); + + /* ── Footer ────────────────────────────────────────────── */ + --footer-bg: #1c1208; + --footer-text: #9a8570; +} diff --git a/themes/theme-midnight.css b/themes/theme-midnight.css new file mode 100644 index 0000000..469fae2 --- /dev/null +++ b/themes/theme-midnight.css @@ -0,0 +1,63 @@ +/* ============================================================ + THEME: MIDNIGHT + Dark, editorial, sophisticated — electric cyan on deep navy + ============================================================ */ + +[data-theme="midnight"] { + /* ── Core palette ──────────────────────────────────────── */ + --color-bg: #0a0e1a; + --color-surface: #111827; + --color-surface-2: #1a2236; + --color-border: #1e2d47; + --color-border-light: #243452; + + /* ── Brand / Accent ────────────────────────────────────── */ + --color-primary: #00d4ff; + --color-primary-hover: #00b8e0; + --color-accent: #7c3aed; + --color-accent-soft: rgba(124, 58, 237, 0.15); + --color-primary-soft: rgba(0, 212, 255, 0.1); + + /* ── Text ──────────────────────────────────────────────── */ + --color-heading: #f0f6ff; + --color-text: #b8c8e0; + --color-text-muted: #6b82a0; + --color-btn-text: #0a0e1a; + + /* ── Shadows & glows ───────────────────────────────────── */ + --color-shadow: rgba(0, 212, 255, 0.25); + --color-card-shadow: 0 4px 32px rgba(0, 0, 0, 0.5); + --color-glow: 0 0 40px rgba(0, 212, 255, 0.12); + + /* ── Typography ────────────────────────────────────────── */ + --font-heading: 'Syne', sans-serif; + --font-body: 'DM Sans', sans-serif; + + /* ── Shape ─────────────────────────────────────────────── */ + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 16px; + --radius-xl: 24px; + + /* ── Nav specific ──────────────────────────────────────── */ + --nav-bg: rgba(10, 14, 26, 0.92); + --nav-border: rgba(30, 45, 71, 0.8); + + /* ── Hero specific ─────────────────────────────────────── */ + --hero-bg: #0a0e1a; + --hero-gradient: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0,212,255,0.1) 0%, transparent 70%), + radial-gradient(ellipse 50% 40% at 80% 50%, rgba(124,58,237,0.08) 0%, transparent 60%); + + /* ── Feature card ──────────────────────────────────────── */ + --card-bg: #111827; + --card-border: #1e2d47; + --card-hover-border: #00d4ff; + + /* ── CTA section ───────────────────────────────────────── */ + --cta-bg: #111827; + --cta-gradient: linear-gradient(135deg, rgba(0,212,255,0.06) 0%, rgba(124,58,237,0.06) 100%); + + /* ── Footer ────────────────────────────────────────────── */ + --footer-bg: #060a14; + --footer-text: #6b82a0; +} diff --git a/themes/theme-neon.css b/themes/theme-neon.css new file mode 100644 index 0000000..f1f5adf --- /dev/null +++ b/themes/theme-neon.css @@ -0,0 +1,172 @@ +/* ============================================================ + THEME: NEON BRUTALIST + Pure black canvas, electric lime green + hot yellow accents + Raw, loud, unapologetic — zero softness, maximum signal + ============================================================ */ + +[data-theme="neon"] { + /* ── Core palette ──────────────────────────────────────── */ + --color-bg: #000000; + --color-surface: #0d0d0d; + --color-surface-2: #141414; + --color-border: #222222; + --color-border-light: #2e2e2e; + + /* ── Brand / Accent ────────────────────────────────────── */ + --color-primary: #aaff00; + --color-primary-hover: #88dd00; + --color-accent: #ffe600; + --color-accent-soft: rgba(255, 230, 0, 0.1); + --color-primary-soft: rgba(170, 255, 0, 0.08); + + /* ── Text ──────────────────────────────────────────────── */ + --color-heading: #ffffff; + --color-text: #cccccc; + --color-text-muted: #666666; + --color-btn-text: #000000; + + /* ── Shadows & glows ───────────────────────────────────── */ + --color-shadow: rgba(170, 255, 0, 0.35); + --color-card-shadow: 0 0 0 1px #222222; + --color-glow: 0 0 32px rgba(170, 255, 0, 0.15); + + /* ── Typography ────────────────────────────────────────── */ + --font-heading: 'Space Grotesk', sans-serif; + --font-body: 'IBM Plex Mono', monospace; + + /* ── Shape — sharp corners, brutalist ─────────────────── */ + --radius-sm: 0px; + --radius-md: 0px; + --radius-lg: 0px; + --radius-xl: 0px; + + /* ── Nav specific ──────────────────────────────────────── */ + --nav-bg: rgba(0, 0, 0, 0.96); + --nav-border: #aaff00; + + /* ── Hero specific ─────────────────────────────────────── */ + --hero-bg: #000000; + --hero-gradient: radial-gradient(ellipse 60% 50% at 70% 60%, rgba(170,255,0,0.07) 0%, transparent 70%); + + /* ── Feature card ──────────────────────────────────────── */ + --card-bg: #0d0d0d; + --card-border: #222222; + --card-hover-border: #aaff00; + + /* ── CTA section ───────────────────────────────────────── */ + --cta-bg: #0d0d0d; + --cta-gradient: linear-gradient(135deg, rgba(170,255,0,0.04) 0%, rgba(255,230,0,0.03) 100%); + + /* ── Footer ────────────────────────────────────────────── */ + --footer-bg: #000000; + --footer-text: #555555; +} + +/* ── Neon-specific overrides ───────────────────────────── */ + +/* Hard border on nav instead of blur softness */ +[data-theme="neon"] .site-header { + border-bottom-width: 2px; + border-bottom-color: var(--color-primary); +} + +/* Hero badge — sharp pill becomes a bracket tag */ +[data-theme="neon"] .hero-badge { + border-radius: 0; + border-color: var(--color-primary); + font-family: 'IBM Plex Mono', monospace; + font-size: 0.72rem; + letter-spacing: 0.08em; +} + +/* Hero title — massive, tight, all-caps feel */ +[data-theme="neon"] .hero-title { + letter-spacing: -0.04em; + text-transform: uppercase; +} + +/* Buttons — hard shadow offset instead of glow */ +[data-theme="neon"] .btn-primary { + box-shadow: 4px 4px 0px var(--color-primary); + font-family: 'IBM Plex Mono', monospace; + letter-spacing: 0.04em; + text-transform: uppercase; + font-size: 0.82rem; +} + +[data-theme="neon"] .btn-primary:hover { + transform: translate(-2px, -2px); + box-shadow: 6px 6px 0px var(--color-primary); +} + +[data-theme="neon"] .btn-outline { + box-shadow: 4px 4px 0px #333; + font-family: 'IBM Plex Mono', monospace; + letter-spacing: 0.04em; + text-transform: uppercase; + font-size: 0.82rem; +} + +[data-theme="neon"] .btn-outline:hover { + transform: translate(-2px, -2px); + box-shadow: 6px 6px 0px var(--color-primary); +} + +/* Feature cards — hard left border accent */ +[data-theme="neon"] .feature-card { + border-left-width: 3px; + border-left-color: transparent; +} + +[data-theme="neon"] .feature-card:hover { + border-left-color: var(--color-primary); + transform: translateX(4px) translateY(-2px); +} + +[data-theme="neon"] .feature-card::after { + height: 2px; + background: var(--color-primary); +} + +/* Section labels — monospace */ +[data-theme="neon"] .section-label { + font-family: 'IBM Plex Mono', monospace; + font-size: 0.72rem; +} + +/* Hero card top bar — solid neon line */ +[data-theme="neon"] .hero-card::before { + height: 3px; + background: var(--color-primary); + opacity: 1; +} + +/* Float badge — hard offset shadow */ +[data-theme="neon"] .hero-float-badge { + border-radius: 0; + box-shadow: 4px 4px 0 var(--color-primary); + background-color: var(--color-primary); +} + +/* CTA decorative blobs — hide them, keep it raw */ +[data-theme="neon"] .cta-section::before, +[data-theme="neon"] .cta-section::after { + display: none; +} + +/* CTA title — uppercase */ +[data-theme="neon"] .cta-title { + text-transform: uppercase; + letter-spacing: -0.03em; +} + +/* Footer top border — neon line */ +[data-theme="neon"] .site-footer { + border-top: 2px solid var(--color-primary); +} + +/* Logo mark */ +[data-theme="neon"] .logo-mark { + border-radius: 0; + font-family: 'IBM Plex Mono', monospace; +} diff --git a/themes/theme-petal.css b/themes/theme-petal.css new file mode 100644 index 0000000..a984b8b --- /dev/null +++ b/themes/theme-petal.css @@ -0,0 +1,150 @@ +/* ============================================================ + THEME: PETAL + Soft, airy, romantic — lavender and blush on white cloud + Gentle curves, whisper shadows, nothing harsh + ============================================================ */ + + [data-theme="petal"] { + /* ── Core palette ──────────────────────────────────────── */ + --color-bg: #fdf8ff; + --color-surface: #f5effe; + --color-surface-2: #ede0fc; + --color-border: #e8d9f8; + --color-border-light: #f0e6fb; + + /* ── Brand / Accent ────────────────────────────────────── */ + --color-primary: #9b5de5; + --color-primary-hover: #7c3acd; + --color-accent: #f72585; + --color-accent-soft: rgba(247, 37, 133, 0.1); + --color-primary-soft: rgba(155, 93, 229, 0.1); + + /* ── Text ──────────────────────────────────────────────── */ + --color-heading: #2d1b4e; + --color-text: #4a3568; + --color-text-muted: #9b85b8; + --color-btn-text: #ffffff; + + /* ── Shadows ───────────────────────────────────────────── */ + --color-shadow: rgba(155, 93, 229, 0.22); + --color-card-shadow: 0 4px 24px rgba(155, 93, 229, 0.08); + --color-glow: 0 0 0 transparent; + + /* ── Typography ────────────────────────────────────────── */ + --font-heading: 'Cormorant Garamond', serif; + --font-body: 'Nunito', sans-serif; + + /* ── Shape — very round, soft ──────────────────────────── */ + --radius-sm: 8px; + --radius-md: 14px; + --radius-lg: 22px; + --radius-xl: 32px; + + /* ── Nav specific ──────────────────────────────────────── */ + --nav-bg: rgba(253, 248, 255, 0.92); + --nav-border: rgba(232, 217, 248, 0.8); + + /* ── Hero specific ─────────────────────────────────────── */ + --hero-bg: #fdf8ff; + --hero-gradient: radial-gradient(ellipse 80% 60% at 30% 0%, rgba(247,37,133,0.07) 0%, transparent 60%), + radial-gradient(ellipse 60% 50% at 90% 80%, rgba(155,93,229,0.09) 0%, transparent 60%); + + /* ── Feature card ──────────────────────────────────────── */ + --card-bg: #ffffff; + --card-border: #e8d9f8; + --card-hover-border: #9b5de5; + + /* ── CTA section ───────────────────────────────────────── */ + --cta-bg: #f5effe; + --cta-gradient: linear-gradient(135deg, rgba(247,37,133,0.05) 0%, rgba(155,93,229,0.06) 100%); + + /* ── Footer ────────────────────────────────────────────── */ + --footer-bg: #2d1b4e; + --footer-text: #9b85b8; + } + + /* ── Petal-specific overrides ──────────────────────────── */ + + /* Extra rounded nav */ + [data-theme="petal"] .site-header { + border-bottom-color: var(--color-border); + } + + /* Hero badge — pill with blush tint */ + [data-theme="petal"] .hero-badge { + background-color: rgba(247, 37, 133, 0.08); + border-color: rgba(247, 37, 133, 0.3); + color: var(--color-accent); + } + + [data-theme="petal"] .hero-badge-dot { + background-color: var(--color-accent); + } + + /* Buttons — soft shadow, very round */ + [data-theme="petal"] .btn-primary { + background: linear-gradient(135deg, #9b5de5, #f72585); + border-color: transparent; + box-shadow: 0 4px 18px rgba(155, 93, 229, 0.3); + } + + [data-theme="petal"] .btn-primary:hover { + background: linear-gradient(135deg, #7c3acd, #d91f72); + box-shadow: 0 8px 28px rgba(155, 93, 229, 0.4); + } + + /* Feature card — very round, petal shadow */ + [data-theme="petal"] .feature-card { + box-shadow: 0 2px 16px rgba(155, 93, 229, 0.06); + } + + [data-theme="petal"] .feature-card:hover { + box-shadow: 0 8px 32px rgba(155, 93, 229, 0.14); + } + + /* Feature card bottom bar — gradient */ + [data-theme="petal"] .feature-card::after { + background: linear-gradient(90deg, #9b5de5, #f72585); + } + + /* Feature icon hover — gradient bg */ + [data-theme="petal"] .feature-card:hover .feature-icon { + background: linear-gradient(135deg, #9b5de5, #f72585); + } + + /* Hero card gradient top line */ + [data-theme="petal"] .hero-card::before { + background: linear-gradient(90deg, #f72585, #9b5de5); + } + + /* Float badge — accent pink */ + [data-theme="petal"] .hero-float-badge { + background: linear-gradient(135deg, #9b5de5, #f72585); + box-shadow: 0 8px 24px rgba(247, 37, 133, 0.3); + } + + /* CTA title gradient */ + [data-theme="petal"] .cta-title em { + background: linear-gradient(90deg, #9b5de5, #f72585); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + /* Hero em gradient */ + [data-theme="petal"] .hero-title em { + background: linear-gradient(90deg, #9b5de5, #f72585); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + /* Section label — accent */ + [data-theme="petal"] .section-label { + color: var(--color-accent); + } + + /* Footer — deep plum bg already in vars */ + [data-theme="petal"] .site-footer { + border-top: none; + } \ No newline at end of file