initial commit
This commit is contained in:
Azmat Ali
@@ -0,0 +1,5 @@
|
||||
# Local Netlify folder
|
||||
./node_modules
|
||||
.netlify
|
||||
.env
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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); }
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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%; }
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
+955
@@ -0,0 +1,955 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="midnight">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Landing System — Theme Demo</title>
|
||||
|
||||
<!-- Google Fonts: both themes -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800;900&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@700;800;900&family=Source+Sans+3:wght@400;500;600;700&family=Space+Grotesk:wght@700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&family=Cormorant+Garamond:wght@600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||
|
||||
<!-- Base + themes -->
|
||||
<link rel="stylesheet" href="base.css" />
|
||||
<link rel="stylesheet" href="themes/theme-midnight.css" />
|
||||
<link rel="stylesheet" href="themes/theme-linen.css" />
|
||||
<link rel="stylesheet" href="themes/theme-neon.css" />
|
||||
<link rel="stylesheet" href="themes/theme-petal.css" />
|
||||
|
||||
<!-- Components -->
|
||||
<link rel="stylesheet" href="components/header/header.css" />
|
||||
<link rel="stylesheet" href="components/hero/hero.css" />
|
||||
<link rel="stylesheet" href="components/features/features.css" />
|
||||
<link rel="stylesheet" href="components/cta/cta.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer.css" />
|
||||
<link rel="stylesheet" href="components/about/about.css" />
|
||||
<link rel="stylesheet" href="components/faq/faq.css" />
|
||||
<link rel="stylesheet" href="components/testimonials/testimonials.css" />
|
||||
<link rel="stylesheet" href="components/contact/contact.css" />
|
||||
|
||||
<style>
|
||||
/* ── Switcher panel ──────────────────────────────────── */
|
||||
.switcher-panel {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.switcher-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.switcher-group-label {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.switcher-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.5rem 0.9rem;
|
||||
border-radius: 99px;
|
||||
border: 1.5px solid var(--color-border);
|
||||
background-color: var(--color-surface);
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-body);
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: var(--color-card-shadow);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.switcher-pill:hover,
|
||||
.switcher-pill.active {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
background-color: var(--color-primary-soft);
|
||||
}
|
||||
|
||||
.switcher-pill.active { pointer-events: none; }
|
||||
|
||||
.theme-dot {
|
||||
width: 9px; height: 9px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.layout-letter {
|
||||
width: 16px; height: 16px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--color-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 800;
|
||||
color: var(--color-text-muted);
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.switcher-pill.active .layout-letter,
|
||||
.switcher-pill:hover .layout-letter {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-btn-text);
|
||||
}
|
||||
|
||||
.theme-pill[data-t="midnight"] .theme-dot { background: #00d4ff; }
|
||||
.theme-pill[data-t="linen"] .theme-dot { background: #c2410c; }
|
||||
.theme-pill[data-t="neon"] .theme-dot { background: #aaff00; }
|
||||
.theme-pill[data-t="petal"] .theme-dot { background: linear-gradient(135deg, #9b5de5, #f72585); }
|
||||
|
||||
/* ── Page-load animation ─────────────────────────────── */
|
||||
@keyframes fade-up {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.hero-content > * {
|
||||
opacity: 0;
|
||||
animation: fade-up 0.6s ease forwards;
|
||||
}
|
||||
.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.hero-content > *:nth-child(2) { animation-delay: 0.2s; }
|
||||
.hero-content > *:nth-child(3) { animation-delay: 0.3s; }
|
||||
.hero-content > *:nth-child(4) { animation-delay: 0.4s; }
|
||||
.hero-content > *:nth-child(5) { animation-delay: 0.5s; }
|
||||
|
||||
.hero-visual {
|
||||
opacity: 0;
|
||||
animation: fade-up 0.7s ease 0.35s forwards;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════
|
||||
HEADER
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<div class="header-inner">
|
||||
<a href="#" class="header-logo">
|
||||
<div class="logo-mark">U</div>
|
||||
UI Kit
|
||||
</a>
|
||||
|
||||
<nav class="header-nav">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#pricing">Pricing</a>
|
||||
<a href="#about">About</a>
|
||||
<a href="#blog">Blog</a>
|
||||
</nav>
|
||||
|
||||
<div class="header-actions">
|
||||
<a href="#" class="btn btn-outline">Sign in</a>
|
||||
<a href="#" class="btn btn-primary">Get started</a>
|
||||
</div>
|
||||
|
||||
<button class="mobile-toggle" id="mobileToggle" aria-label="Toggle menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu -->
|
||||
<div class="mobile-menu" id="mobileMenu">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#pricing">Pricing</a>
|
||||
<a href="#about">About</a>
|
||||
<a href="#blog">Blog</a>
|
||||
<div class="mobile-menu-actions">
|
||||
<a href="#" class="btn btn-outline">Sign in</a>
|
||||
<a href="#" class="btn btn-primary">Get started</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<hr class="divider" />
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════════
|
||||
HERO
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-inner">
|
||||
|
||||
<!-- Left: content -->
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">
|
||||
<span class="hero-badge-dot"></span>
|
||||
Now in public beta
|
||||
</div>
|
||||
|
||||
<h1 class="hero-title">
|
||||
Your headline<br />
|
||||
goes right <em>here</em><br />
|
||||
like this
|
||||
</h1>
|
||||
|
||||
<p class="hero-subtitle">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
|
||||
</p>
|
||||
|
||||
<div class="hero-actions">
|
||||
<a href="#" class="btn btn-primary">
|
||||
Primary action
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline">Secondary action</a>
|
||||
</div>
|
||||
|
||||
<div class="hero-social-proof">
|
||||
<div class="hero-avatars">
|
||||
<span>AB</span>
|
||||
<span>CD</span>
|
||||
<span>EF</span>
|
||||
<span>GH</span>
|
||||
</div>
|
||||
<p class="hero-proof-text"><strong>2,400+</strong> users already signed up</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: visual -->
|
||||
<div class="hero-visual">
|
||||
<div class="hero-card">
|
||||
<div class="hero-card-header">
|
||||
<span class="hero-card-dot"></span>
|
||||
<span class="hero-card-dot"></span>
|
||||
<span class="hero-card-dot"></span>
|
||||
</div>
|
||||
|
||||
<div class="hero-stat-grid">
|
||||
<div class="hero-stat">
|
||||
<div class="hero-stat-value">98.7%</div>
|
||||
<div class="hero-stat-label">Uptime</div>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<div class="hero-stat-value">4.2ms</div>
|
||||
<div class="hero-stat-label">Response</div>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<div class="hero-stat-value">12k</div>
|
||||
<div class="hero-stat-label">Daily users</div>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<div class="hero-stat-value">+34%</div>
|
||||
<div class="hero-stat-label">Growth</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-chart-bar">
|
||||
<span></span><span></span><span></span>
|
||||
<span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-float-badge">✦ Ships in minutes</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════════
|
||||
FEATURES
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<section class="features" id="features">
|
||||
<div class="container">
|
||||
|
||||
<div class="features-header">
|
||||
<span class="section-label">Features</span>
|
||||
<h2 class="section-title">Everything you need<br />to build great products</h2>
|
||||
<p class="section-subtitle">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
|
||||
<!-- 1 -->
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Feature Title One</h3>
|
||||
<p class="feature-desc">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua enim.
|
||||
</p>
|
||||
<a href="#" class="feature-link">
|
||||
Learn more
|
||||
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 2 -->
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Feature Title Two</h3>
|
||||
<p class="feature-desc">
|
||||
Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi
|
||||
ut aliquip ex ea commodo consequat duis aute irure dolor.
|
||||
</p>
|
||||
<a href="#" class="feature-link">
|
||||
Learn more
|
||||
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 3 -->
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Feature Title Three</h3>
|
||||
<p class="feature-desc">
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat.
|
||||
</p>
|
||||
<a href="#" class="feature-link">
|
||||
Learn more
|
||||
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 4 -->
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Feature Title Four</h3>
|
||||
<p class="feature-desc">
|
||||
Excepteur sint occaecat cupidatat non proident sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum consectetur adipiscing.
|
||||
</p>
|
||||
<a href="#" class="feature-link">
|
||||
Learn more
|
||||
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 5 -->
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Feature Title Five</h3>
|
||||
<p class="feature-desc">
|
||||
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat duis aute irure dolor in reprehenderit voluptate velit.
|
||||
</p>
|
||||
<a href="#" class="feature-link">
|
||||
Learn more
|
||||
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 6 -->
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Feature Title Six</h3>
|
||||
<p class="feature-desc">
|
||||
Voluptate velit esse cillum dolore eu fugiat nulla pariatur sint
|
||||
occaecat cupidatat non proident sunt in culpa qui officia deserunt.
|
||||
</p>
|
||||
<a href="#" class="feature-link">
|
||||
Learn more
|
||||
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════════
|
||||
ABOUT US
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<section class="about" id="about">
|
||||
<div class="container">
|
||||
<div class="about-inner">
|
||||
|
||||
<!-- Left: content -->
|
||||
<div class="about-content">
|
||||
<span class="section-label">About Us</span>
|
||||
<h2 class="section-title">We're building the future of the web</h2>
|
||||
<p class="about-body">
|
||||
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.
|
||||
</p>
|
||||
<p class="about-body">
|
||||
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.
|
||||
</p>
|
||||
<div class="about-tags">
|
||||
<span class="about-tag">Design Systems</span>
|
||||
<span class="about-tag">Open Source</span>
|
||||
<span class="about-tag">Developer Tools</span>
|
||||
<span class="about-tag">UI Components</span>
|
||||
<span class="about-tag">Accessibility</span>
|
||||
</div>
|
||||
<a href="#" class="btn btn-primary">Meet the team</a>
|
||||
</div>
|
||||
|
||||
<!-- Right: stats -->
|
||||
<div class="about-visual">
|
||||
<div class="about-stat-row">
|
||||
<div class="about-stat-card">
|
||||
<div class="about-stat-number">8+</div>
|
||||
<div class="about-stat-label">Years active</div>
|
||||
<div class="about-stat-desc">Lorem ipsum dolor sit amet consectetur.</div>
|
||||
</div>
|
||||
<div class="about-stat-card">
|
||||
<div class="about-stat-number">120k</div>
|
||||
<div class="about-stat-label">Users worldwide</div>
|
||||
<div class="about-stat-desc">Adipiscing elit sed do eiusmod tempor.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-stat-row">
|
||||
<div class="about-stat-card">
|
||||
<div class="about-stat-number">340+</div>
|
||||
<div class="about-stat-label">Components</div>
|
||||
<div class="about-stat-desc">Incididunt ut labore et dolore magna.</div>
|
||||
</div>
|
||||
<div class="about-stat-card">
|
||||
<div class="about-stat-number">99%</div>
|
||||
<div class="about-stat-label">Satisfaction</div>
|
||||
<div class="about-stat-desc">Quis nostrud exercitation ullamco.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-team-card">
|
||||
<div class="about-team-avatars">
|
||||
<span>AJ</span>
|
||||
<span>BK</span>
|
||||
<span>CL</span>
|
||||
<span>DM</span>
|
||||
<span>+24</span>
|
||||
</div>
|
||||
<div class="about-team-info">
|
||||
<div class="about-team-title">A team of 28 across 12 countries</div>
|
||||
<div class="about-team-sub">Remote-first since day one</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════════
|
||||
TESTIMONIALS
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<section class="testimonials" id="testimonials">
|
||||
<div class="container">
|
||||
<div class="testimonials-header">
|
||||
<span class="section-label">Testimonials</span>
|
||||
<h2 class="section-title">What our users are saying</h2>
|
||||
<p class="section-subtitle">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="testimonials-grid">
|
||||
|
||||
<!-- Card 1 -->
|
||||
<div class="testimonial-card">
|
||||
<div class="testimonial-stars">
|
||||
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
|
||||
</div>
|
||||
<div class="testimonial-quote-mark">"</div>
|
||||
<p class="testimonial-text">
|
||||
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.
|
||||
</p>
|
||||
<div class="testimonial-divider"></div>
|
||||
<div class="testimonial-author">
|
||||
<div class="testimonial-avatar">AJ</div>
|
||||
<div>
|
||||
<div class="testimonial-name">Alex Johnson</div>
|
||||
<div class="testimonial-role">Product Designer, Acme Co.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 (featured) -->
|
||||
<div class="testimonial-card is-featured">
|
||||
<div class="testimonial-stars">
|
||||
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
|
||||
</div>
|
||||
<div class="testimonial-quote-mark">"</div>
|
||||
<p class="testimonial-text">
|
||||
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.
|
||||
</p>
|
||||
<div class="testimonial-divider"></div>
|
||||
<div class="testimonial-author">
|
||||
<div class="testimonial-avatar">BK</div>
|
||||
<div>
|
||||
<div class="testimonial-name">Blake Kim</div>
|
||||
<div class="testimonial-role">Engineering Lead, Startup Inc.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="testimonial-card">
|
||||
<div class="testimonial-stars">
|
||||
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
|
||||
</div>
|
||||
<div class="testimonial-quote-mark">"</div>
|
||||
<p class="testimonial-text">
|
||||
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.
|
||||
</p>
|
||||
<div class="testimonial-divider"></div>
|
||||
<div class="testimonial-author">
|
||||
<div class="testimonial-avatar">CL</div>
|
||||
<div>
|
||||
<div class="testimonial-name">Casey Lee</div>
|
||||
<div class="testimonial-role">Founder, Lorem Studio</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════════
|
||||
FAQ
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<section class="faq" id="faq">
|
||||
<div class="container">
|
||||
<div class="faq-inner">
|
||||
|
||||
<!-- Left: heading -->
|
||||
<div class="faq-heading">
|
||||
<span class="section-label">FAQ</span>
|
||||
<h2 class="section-title">Frequently asked questions</h2>
|
||||
<p class="section-subtitle">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod
|
||||
tempor incididunt ut labore et dolore.
|
||||
</p>
|
||||
<p class="faq-contact-nudge">
|
||||
Still have questions? <a href="#contact">Get in touch</a> and we'll
|
||||
get back to you within 24 hours.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Right: accordion -->
|
||||
<div class="faq-list">
|
||||
|
||||
<div class="faq-item is-open">
|
||||
<button class="faq-question">
|
||||
<span class="faq-question-text">What is this product and who is it for?</span>
|
||||
<span class="faq-icon">
|
||||
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-inner">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question">
|
||||
<span class="faq-question-text">How do I get started after signing up?</span>
|
||||
<span class="faq-icon">
|
||||
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-inner">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question">
|
||||
<span class="faq-question-text">Is there a free plan available?</span>
|
||||
<span class="faq-icon">
|
||||
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-inner">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question">
|
||||
<span class="faq-question-text">Can I cancel my subscription at any time?</span>
|
||||
<span class="faq-icon">
|
||||
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-inner">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question">
|
||||
<span class="faq-question-text">Do you offer support for enterprise teams?</span>
|
||||
<span class="faq-icon">
|
||||
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-inner">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question">
|
||||
<span class="faq-question-text">How is my data stored and kept secure?</span>
|
||||
<span class="faq-icon">
|
||||
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-inner">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════════
|
||||
CONTACT
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<section class="contact" id="contact">
|
||||
<div class="container">
|
||||
<div class="contact-inner">
|
||||
|
||||
<!-- Left: info -->
|
||||
<div class="contact-info">
|
||||
<span class="section-label">Contact Us</span>
|
||||
<h2 class="section-title">Get in touch with our team</h2>
|
||||
<p class="section-subtitle">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
|
||||
<div class="contact-details">
|
||||
<div class="contact-detail-item">
|
||||
<div class="contact-detail-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="contact-detail-label">Email</div>
|
||||
<div class="contact-detail-value"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="036b666f6f6c43667b626e736f662d606c6e">[email protected]</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-detail-item">
|
||||
<div class="contact-detail-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.88a16 16 0 0 0 6 6l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21.73 16.92z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="contact-detail-label">Phone</div>
|
||||
<div class="contact-detail-value">+1 (555) 000-0000</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-detail-item">
|
||||
<div class="contact-detail-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="contact-detail-label">Office</div>
|
||||
<div class="contact-detail-value">123 Example Street, City, Country</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: form -->
|
||||
<div class="contact-form-card">
|
||||
<form id="contactForm">
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label">First name <span>*</span></label>
|
||||
<input type="text" class="form-input" placeholder="John" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Last name <span>*</span></label>
|
||||
<input type="text" class="form-input" placeholder="Doe" required />
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<label class="form-label">Email address <span>*</span></label>
|
||||
<input type="email" class="form-input" placeholder="john@example.com" required />
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<label class="form-label">Subject</label>
|
||||
<div class="form-select-wrap">
|
||||
<select class="form-input form-select">
|
||||
<option value="">Select a topic</option>
|
||||
<option>General enquiry</option>
|
||||
<option>Sales</option>
|
||||
<option>Support</option>
|
||||
<option>Partnership</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<label class="form-label">Message <span>*</span></label>
|
||||
<textarea class="form-textarea" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit..." required></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-submit-row">
|
||||
<p class="form-privacy">
|
||||
By submitting you agree to our <a href="#">Privacy Policy</a> and <a href="#">Terms of Service</a>.
|
||||
</p>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Send message
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="form-success" id="formSuccess">
|
||||
<div class="form-success-icon">
|
||||
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
<div class="form-success-title">Message sent!</div>
|
||||
<p class="form-success-text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. We'll be in
|
||||
touch within 24 hours.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-inner">
|
||||
<span class="cta-label">
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||
Get started today
|
||||
</span>
|
||||
|
||||
<h2 class="cta-title">
|
||||
Ready to get<br /><em>started</em> right now?
|
||||
</h2>
|
||||
|
||||
<p class="cta-subtitle">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua enim ad minim.
|
||||
</p>
|
||||
|
||||
<div class="cta-actions">
|
||||
<a href="#" class="btn btn-primary">
|
||||
Primary action
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline">Secondary action</a>
|
||||
</div>
|
||||
|
||||
<div class="cta-trust">
|
||||
<span class="cta-trust-item">
|
||||
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
Free 14-day trial
|
||||
</span>
|
||||
<span class="cta-divider"></span>
|
||||
<span class="cta-trust-item">
|
||||
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
Cancel anytime
|
||||
</span>
|
||||
<span class="cta-divider"></span>
|
||||
<span class="cta-trust-item">
|
||||
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
No credit card needed
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════════
|
||||
FOOTER
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
|
||||
<!-- Brand -->
|
||||
<div class="footer-brand">
|
||||
<a href="#" class="header-logo">
|
||||
<div class="logo-mark">U</div>
|
||||
UI Kit
|
||||
</a>
|
||||
<p class="footer-tagline">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do
|
||||
eiusmod tempor incididunt ut labore et dolore.
|
||||
</p>
|
||||
<div class="footer-social">
|
||||
<a href="#" aria-label="Twitter/X">
|
||||
<svg viewBox="0 0 24 24"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53A4.48 4.48 0 0 0 22.43.36a9 9 0 0 1-2.83 1.08A4.48 4.48 0 0 0 16.11 0c-2.47 0-4.47 2-4.47 4.47 0 .35.04.7.11 1.03A12.69 12.69 0 0 1 1.64.89a4.48 4.48 0 0 0 1.38 5.97A4.41 4.41 0 0 1 1 6.35v.06c0 2.17 1.54 3.97 3.58 4.38a4.51 4.51 0 0 1-2.02.08c.57 1.78 2.22 3.08 4.18 3.12A8.99 8.99 0 0 1 0 15.54 12.67 12.67 0 0 0 6.86 17.5c8.24 0 12.75-6.83 12.75-12.75l-.01-.58A9.07 9.07 0 0 0 22 2l.03.03z"/></svg>
|
||||
</a>
|
||||
<a href="#" aria-label="GitHub">
|
||||
<svg viewBox="0 0 24 24"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
|
||||
</a>
|
||||
<a href="#" aria-label="LinkedIn">
|
||||
<svg viewBox="0 0 24 24"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product -->
|
||||
<div class="footer-col">
|
||||
<h4 class="footer-col-title">Product</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">Features</a></li>
|
||||
<li><a href="#">Pricing</a></li>
|
||||
<li><a href="#">Changelog</a></li>
|
||||
<li><a href="#">Roadmap</a></li>
|
||||
<li><a href="#">Status</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Company -->
|
||||
<div class="footer-col">
|
||||
<h4 class="footer-col-title">Company</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
<li><a href="#">Press</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Resources -->
|
||||
<div class="footer-col">
|
||||
<h4 class="footer-col-title">Resources</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">API Reference</a></li>
|
||||
<li><a href="#">Guides</a></li>
|
||||
<li><a href="#">Community</a></li>
|
||||
<li><a href="#">Support</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Bottom bar -->
|
||||
<div class="footer-bottom">
|
||||
<p class="footer-copy">© 2025 UI Kit Demo. All rights reserved.</p>
|
||||
<nav class="footer-bottom-links">
|
||||
<a href="#">Privacy</a>
|
||||
<a href="#">Terms</a>
|
||||
<a href="#">Cookies</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- ═══ SWITCHER PANEL ═══ -->
|
||||
<div class="switcher-panel">
|
||||
|
||||
<div class="switcher-group">
|
||||
<span class="switcher-group-label">Layout</span>
|
||||
<button class="switcher-pill layout-pill active" data-l="a">
|
||||
<span class="layout-letter">A</span>
|
||||
Split
|
||||
</button>
|
||||
<button class="switcher-pill layout-pill" data-l="b">
|
||||
<span class="layout-letter">B</span>
|
||||
Centered
|
||||
</button>
|
||||
<button class="switcher-pill layout-pill" data-l="c">
|
||||
<span class="layout-letter">C</span>
|
||||
Asymmetric
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="switcher-group">
|
||||
<span class="switcher-group-label">Theme</span>
|
||||
<button class="switcher-pill theme-pill" data-t="midnight">
|
||||
<span class="theme-dot"></span>Midnight
|
||||
</button>
|
||||
<button class="switcher-pill theme-pill" data-t="linen">
|
||||
<span class="theme-dot"></span>Linen
|
||||
</button>
|
||||
<button class="switcher-pill theme-pill" data-t="neon">
|
||||
<span class="theme-dot"></span>Neon
|
||||
</button>
|
||||
<button class="switcher-pill theme-pill" data-t="petal">
|
||||
<span class="theme-dot"></span>Petal
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="layout.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+375
@@ -0,0 +1,375 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="midnight">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>UI Kit Demo — Layout B</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800;900&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@700;800;900&family=Source+Sans+3:wght@400;500;600;700&family=Space+Grotesk:wght@700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&family=Cormorant+Garamond:wght@600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="base.css" />
|
||||
<link rel="stylesheet" href="themes/theme-midnight.css" />
|
||||
<link rel="stylesheet" href="themes/theme-linen.css" />
|
||||
<link rel="stylesheet" href="themes/theme-neon.css" />
|
||||
<link rel="stylesheet" href="themes/theme-petal.css" />
|
||||
<link rel="stylesheet" href="components/header/header-b.css" />
|
||||
<link rel="stylesheet" href="components/hero/hero-b.css" />
|
||||
<link rel="stylesheet" href="components/features/features-b.css" />
|
||||
<link rel="stylesheet" href="components/about/about-b.css" />
|
||||
<link rel="stylesheet" href="components/testimonials/testimonials-b.css" />
|
||||
<link rel="stylesheet" href="components/faq/faq-b.css" />
|
||||
<link rel="stylesheet" href="components/cta/cta-b.css" />
|
||||
<link rel="stylesheet" href="components/contact/contact-b.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer-b.css" />
|
||||
<style>
|
||||
.switcher-panel{position:fixed;bottom:2rem;right:2rem;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:1.25rem}
|
||||
.switcher-group{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem}
|
||||
.switcher-group-label{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)}
|
||||
.switcher-pill{display:flex;align-items:center;gap:.6rem;padding:.5rem .9rem;border-radius:99px;border:1.5px solid var(--color-border);background-color:var(--color-surface);cursor:pointer;font-size:.8rem;font-weight:600;color:var(--color-text);font-family:var(--font-body);transition:all .2s ease;box-shadow:var(--color-card-shadow);white-space:nowrap}
|
||||
.switcher-pill:hover,.switcher-pill.active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-soft)}
|
||||
.switcher-pill.active{pointer-events:none}
|
||||
.theme-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
|
||||
.layout-letter{width:16px;height:16px;border-radius:3px;background-color:var(--color-border);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;color:var(--color-text-muted);flex-shrink:0;transition:all .2s ease}
|
||||
.switcher-pill.active .layout-letter,.switcher-pill:hover .layout-letter{background-color:var(--color-primary);color:var(--color-btn-text)}
|
||||
.theme-pill[data-t="midnight"] .theme-dot{background:#00d4ff}
|
||||
.theme-pill[data-t="linen"] .theme-dot{background:#c2410c}
|
||||
.theme-pill[data-t="neon"] .theme-dot{background:#aaff00}
|
||||
.theme-pill[data-t="petal"] .theme-dot{background:linear-gradient(135deg,#9b5de5,#f72585)}
|
||||
@keyframes fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
|
||||
.hero-b-inner>*{opacity:0;animation:fade-up .6s ease forwards}
|
||||
.hero-b-inner>*:nth-child(1){animation-delay:.1s}.hero-b-inner>*:nth-child(2){animation-delay:.2s}
|
||||
.hero-b-inner>*:nth-child(3){animation-delay:.3s}.hero-b-inner>*:nth-child(4){animation-delay:.4s}
|
||||
.hero-b-inner>*:nth-child(5){animation-delay:.5s}.hero-b-inner>*:nth-child(6){animation-delay:.6s}
|
||||
</style>
|
||||
<script src="layout.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- HEADER B -->
|
||||
<header class="header-b">
|
||||
<div class="container">
|
||||
<div class="header-b-inner">
|
||||
<div class="header-b-top">
|
||||
<a href="#" class="header-logo"><div class="logo-mark">U</div>UI Kit</a>
|
||||
<div class="header-b-cta">
|
||||
<a href="#" class="btn btn-outline">Sign in</a>
|
||||
<a href="#" class="btn btn-primary">Get started</a>
|
||||
</div>
|
||||
<button class="mobile-toggle" id="mobileToggle" aria-label="Toggle menu"><span></span><span></span><span></span></button>
|
||||
</div>
|
||||
<nav class="header-b-nav">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#about">About</a>
|
||||
<a href="#testimonials">Testimonials</a>
|
||||
<a href="#faq">FAQ</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu" id="mobileMenu">
|
||||
<a href="#features">Features</a><a href="#about">About</a>
|
||||
<a href="#testimonials">Testimonials</a><a href="#faq">FAQ</a><a href="#contact">Contact</a>
|
||||
<div class="mobile-menu-actions">
|
||||
<a href="#" class="btn btn-outline">Sign in</a>
|
||||
<a href="#" class="btn btn-primary">Get started</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<hr class="divider" />
|
||||
|
||||
<!-- HERO B -->
|
||||
<section class="hero-b">
|
||||
<div class="container">
|
||||
<div class="hero-b-inner">
|
||||
<div class="hero-b-badge"><span class="hero-b-badge-dot"></span>Now in public beta</div>
|
||||
<h1 class="hero-b-title">Your headline<br />goes <em>right here</em><br />centered</h1>
|
||||
<p class="hero-b-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.</p>
|
||||
<div class="hero-b-capture">
|
||||
<input class="hero-b-input" type="email" placeholder="Enter your email address" />
|
||||
<a href="#" class="btn btn-primary">Get started</a>
|
||||
</div>
|
||||
<p class="hero-b-note">Free 14-day trial · No credit card needed · Cancel anytime</p>
|
||||
<div class="hero-b-stats">
|
||||
<div class="hero-b-stat"><div class="hero-b-stat-value">98.7%</div><div class="hero-b-stat-label">Uptime</div></div>
|
||||
<div class="hero-b-stat"><div class="hero-b-stat-value">12k</div><div class="hero-b-stat-label">Daily users</div></div>
|
||||
<div class="hero-b-stat"><div class="hero-b-stat-value">4.2ms</div><div class="hero-b-stat-label">Response time</div></div>
|
||||
<div class="hero-b-stat"><div class="hero-b-stat-value">+34%</div><div class="hero-b-stat-label">Growth</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FEATURES B -->
|
||||
<section class="features-b" id="features">
|
||||
<div class="container">
|
||||
<div class="features-b-header">
|
||||
<span class="section-label">Features</span>
|
||||
<h2 class="section-title">Everything you need<br />to build great products</h2>
|
||||
<p class="section-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="features-b-row">
|
||||
<div class="features-b-text">
|
||||
<div class="features-b-icon"><svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg></div>
|
||||
<h3 class="features-b-title">Feature Title One</h3>
|
||||
<p class="features-b-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam.</p>
|
||||
<a href="#" class="features-b-link">Learn more <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
<div class="features-b-visual">
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Alpha</strong>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p></div>
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Beta</strong>Sed do eiusmod tempor incididunt ut labore et dolore.</p></div>
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Gamma</strong>Ut enim ad minim veniam quis nostrud exercitation.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-b-row">
|
||||
<div class="features-b-text">
|
||||
<div class="features-b-icon"><svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></div>
|
||||
<h3 class="features-b-title">Feature Title Two</h3>
|
||||
<p class="features-b-desc">Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor reprehenderit.</p>
|
||||
<a href="#" class="features-b-link">Learn more <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
<div class="features-b-visual">
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Delta</strong>Duis aute irure dolor in reprehenderit in voluptate.</p></div>
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Epsilon</strong>Excepteur sint occaecat cupidatat non proident sunt.</p></div>
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Zeta</strong>In culpa qui officia deserunt mollit anim id est.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-b-row">
|
||||
<div class="features-b-text">
|
||||
<div class="features-b-icon"><svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
|
||||
<h3 class="features-b-title">Feature Title Three</h3>
|
||||
<p class="features-b-desc">Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing.</p>
|
||||
<a href="#" class="features-b-link">Learn more <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
<div class="features-b-visual">
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Eta</strong>Quis nostrud exercitation ullamco laboris nisi aliquip.</p></div>
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Theta</strong>Commodo consequat duis aute irure dolor reprehenderit.</p></div>
|
||||
<div class="features-b-point"><span class="features-b-point-dot"></span><p class="features-b-point-text"><strong>Sub-point Iota</strong>Voluptate velit esse cillum dolore eu fugiat nulla.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ABOUT B -->
|
||||
<section class="about-b" id="about">
|
||||
<div class="container">
|
||||
<div class="about-b-text">
|
||||
<span class="section-label">About Us</span>
|
||||
<h2 class="section-title">We're building the future of the web</h2>
|
||||
<p class="about-b-body">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.</p>
|
||||
<p class="about-b-body">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.</p>
|
||||
<div class="about-b-actions">
|
||||
<a href="#" class="btn btn-primary">Meet the team</a>
|
||||
<a href="#" class="btn btn-outline">Read our story</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-b-stats">
|
||||
<div class="about-b-stat"><div class="about-b-stat-number">8+</div><div class="about-b-stat-label">Years active</div><div class="about-b-stat-desc">Lorem ipsum dolor sit amet.</div></div>
|
||||
<div class="about-b-stat"><div class="about-b-stat-number">120k</div><div class="about-b-stat-label">Users worldwide</div><div class="about-b-stat-desc">Adipiscing elit sed do eiusmod.</div></div>
|
||||
<div class="about-b-stat"><div class="about-b-stat-number">340+</div><div class="about-b-stat-label">Components</div><div class="about-b-stat-desc">Incididunt ut labore et dolore.</div></div>
|
||||
<div class="about-b-stat"><div class="about-b-stat-number">99%</div><div class="about-b-stat-label">Satisfaction</div><div class="about-b-stat-desc">Quis nostrud exercitation.</div></div>
|
||||
</div>
|
||||
<div class="about-b-tags">
|
||||
<span class="about-b-tag">Design Systems</span><span class="about-b-tag">Open Source</span>
|
||||
<span class="about-b-tag">Developer Tools</span><span class="about-b-tag">UI Components</span>
|
||||
<span class="about-b-tag">Accessibility</span>
|
||||
</div>
|
||||
<div class="about-b-team">
|
||||
<div class="about-b-team-avatars"><span>AJ</span><span>BK</span><span>CL</span><span>DM</span><span>+24</span></div>
|
||||
<p class="about-b-team-text"><strong>A team of 28</strong> across 12 countries — remote-first since day one</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TESTIMONIALS B -->
|
||||
<section class="testimonials-b" id="testimonials">
|
||||
<div class="container">
|
||||
<div class="testimonials-b-header">
|
||||
<span class="section-label">Testimonials</span>
|
||||
<h2 class="section-title">What our users are saying</h2>
|
||||
<p class="section-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="testimonials-b-stage">
|
||||
<span class="testimonials-b-quote-mark">"</span>
|
||||
<div class="testimonials-b-slide is-active" data-index="0">
|
||||
<div class="testimonials-b-stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
|
||||
<p class="testimonials-b-text">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.</p>
|
||||
<div class="testimonials-b-author"><div class="testimonials-b-avatar">AJ</div><div><div class="testimonials-b-name">Alex Johnson</div><div class="testimonials-b-role">Product Designer, Acme Co.</div></div></div>
|
||||
</div>
|
||||
<div class="testimonials-b-slide" data-index="1">
|
||||
<div class="testimonials-b-stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
|
||||
<p class="testimonials-b-text">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.</p>
|
||||
<div class="testimonials-b-author"><div class="testimonials-b-avatar">BK</div><div><div class="testimonials-b-name">Blake Kim</div><div class="testimonials-b-role">Engineering Lead, Startup Inc.</div></div></div>
|
||||
</div>
|
||||
<div class="testimonials-b-slide" data-index="2">
|
||||
<div class="testimonials-b-stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
|
||||
<p class="testimonials-b-text">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.</p>
|
||||
<div class="testimonials-b-author"><div class="testimonials-b-avatar">CL</div><div><div class="testimonials-b-name">Casey Lee</div><div class="testimonials-b-role">Founder, Lorem Studio</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonials-b-selectors">
|
||||
<button class="testimonials-b-selector is-active" data-slide="0"><span class="testimonials-b-sel-avatar">AJ</span>Alex Johnson</button>
|
||||
<button class="testimonials-b-selector" data-slide="1"><span class="testimonials-b-sel-avatar">BK</span>Blake Kim</button>
|
||||
<button class="testimonials-b-selector" data-slide="2"><span class="testimonials-b-sel-avatar">CL</span>Casey Lee</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ B -->
|
||||
<section class="faq-b" id="faq">
|
||||
<div class="container">
|
||||
<div class="faq-b-header">
|
||||
<span class="section-label">FAQ</span>
|
||||
<h2 class="section-title">Frequently asked questions</h2>
|
||||
<p class="section-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore.</p>
|
||||
<p class="faq-b-contact-nudge">Still have questions? <a href="#contact">Get in touch</a> and we'll get back to you within 24 hours.</p>
|
||||
</div>
|
||||
<div class="faq-b-list">
|
||||
<div class="faq-b-item is-open">
|
||||
<button class="faq-b-question"><span class="faq-b-question-text">What is this product and who is it for?</span><span class="faq-b-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-b-answer"><div class="faq-b-answer-inner">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.</div></div>
|
||||
</div>
|
||||
<div class="faq-b-item">
|
||||
<button class="faq-b-question"><span class="faq-b-question-text">How do I get started after signing up?</span><span class="faq-b-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-b-answer"><div class="faq-b-answer-inner">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.</div></div>
|
||||
</div>
|
||||
<div class="faq-b-item">
|
||||
<button class="faq-b-question"><span class="faq-b-question-text">Is there a free plan available?</span><span class="faq-b-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-b-answer"><div class="faq-b-answer-inner">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.</div></div>
|
||||
</div>
|
||||
<div class="faq-b-item">
|
||||
<button class="faq-b-question"><span class="faq-b-question-text">Can I cancel my subscription at any time?</span><span class="faq-b-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-b-answer"><div class="faq-b-answer-inner">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.</div></div>
|
||||
</div>
|
||||
<div class="faq-b-item">
|
||||
<button class="faq-b-question"><span class="faq-b-question-text">Do you offer support for enterprise teams?</span><span class="faq-b-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-b-answer"><div class="faq-b-answer-inner">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.</div></div>
|
||||
</div>
|
||||
<div class="faq-b-item">
|
||||
<button class="faq-b-question"><span class="faq-b-question-text">How is my data stored and kept secure?</span><span class="faq-b-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-b-answer"><div class="faq-b-answer-inner">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.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT B -->
|
||||
<section class="contact-b" id="contact">
|
||||
<div class="container">
|
||||
<div class="contact-b-header">
|
||||
<span class="section-label">Contact Us</span>
|
||||
<h2 class="section-title">Get in touch with our team</h2>
|
||||
<p class="section-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="contact-b-card">
|
||||
<form id="contactFormB">
|
||||
<div class="contact-b-form-grid">
|
||||
<div class="contact-b-form-group"><label class="contact-b-label">First name <span>*</span></label><input type="text" class="contact-b-input" placeholder="John" required /></div>
|
||||
<div class="contact-b-form-group"><label class="contact-b-label">Last name <span>*</span></label><input type="text" class="contact-b-input" placeholder="Doe" required /></div>
|
||||
<div class="contact-b-form-group full-width"><label class="contact-b-label">Email address <span>*</span></label><input type="email" class="contact-b-input" placeholder="john@example.com" required /></div>
|
||||
<div class="contact-b-form-group full-width"><label class="contact-b-label">Subject</label><div class="contact-b-select-wrap"><select class="contact-b-input contact-b-select"><option value="">Select a topic</option><option>General enquiry</option><option>Sales</option><option>Support</option><option>Partnership</option></select></div></div>
|
||||
<div class="contact-b-form-group full-width"><label class="contact-b-label">Message <span>*</span></label><textarea class="contact-b-textarea" placeholder="Lorem ipsum dolor sit amet..." required></textarea></div>
|
||||
</div>
|
||||
<div class="contact-b-submit-row">
|
||||
<p class="contact-b-privacy">By submitting you agree to our <a href="#">Privacy Policy</a> and <a href="#">Terms of Service</a>.</p>
|
||||
<button type="submit" class="btn btn-primary">Send message <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg></button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="contact-b-success" id="formSuccessB">
|
||||
<div class="contact-b-success-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<div class="contact-b-success-title">Message sent!</div>
|
||||
<p class="contact-b-success-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. We'll be in touch within 24 hours.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA B -->
|
||||
<section class="cta-b">
|
||||
<div class="container">
|
||||
<div class="cta-b-inner">
|
||||
<div class="cta-b-content">
|
||||
<span class="cta-b-label"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>Get started today</span>
|
||||
<h2 class="cta-b-title">Ready to get<br /><em>started</em> right now?</h2>
|
||||
<p class="cta-b-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim.</p>
|
||||
<div class="cta-b-trust">
|
||||
<div class="cta-b-trust-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Free 14-day trial</div>
|
||||
<div class="cta-b-trust-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Cancel anytime</div>
|
||||
<div class="cta-b-trust-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>No credit card needed</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta-b-card">
|
||||
<div class="cta-b-card-title">Start your free trial</div>
|
||||
<p class="cta-b-card-sub">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.</p>
|
||||
<div class="cta-b-form">
|
||||
<input type="text" class="cta-b-input" placeholder="Your full name" />
|
||||
<input type="email" class="cta-b-input" placeholder="Your email address" />
|
||||
</div>
|
||||
<a href="#" class="btn btn-primary">Create free account <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
|
||||
<p class="cta-b-note">Free 14-day trial · No credit card required</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER B -->
|
||||
<footer class="footer-b">
|
||||
<div class="container">
|
||||
<div class="footer-b-nav">
|
||||
<div class="footer-b-col"><h4 class="footer-b-col-title">Product</h4><ul class="footer-b-links"><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li><li><a href="#">Changelog</a></li><li><a href="#">Roadmap</a></li><li><a href="#">Status</a></li></ul></div>
|
||||
<div class="footer-b-col"><h4 class="footer-b-col-title">Company</h4><ul class="footer-b-links"><li><a href="#">About</a></li><li><a href="#">Blog</a></li><li><a href="#">Careers</a></li><li><a href="#">Press</a></li><li><a href="#">Contact</a></li></ul></div>
|
||||
<div class="footer-b-col"><h4 class="footer-b-col-title">Resources</h4><ul class="footer-b-links"><li><a href="#">Documentation</a></li><li><a href="#">API Reference</a></li><li><a href="#">Guides</a></li><li><a href="#">Community</a></li><li><a href="#">Support</a></li></ul></div>
|
||||
</div>
|
||||
<div class="footer-b-bottom">
|
||||
<a href="#" class="footer-b-logo"><div class="logo-mark">U</div>UI Kit</a>
|
||||
<p class="footer-b-tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore.</p>
|
||||
<div class="footer-b-social">
|
||||
<a href="#" aria-label="Twitter"><svg viewBox="0 0 24 24"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53A4.48 4.48 0 0 0 22.43.36a9 9 0 0 1-2.83 1.08A4.48 4.48 0 0 0 16.11 0c-2.47 0-4.47 2-4.47 4.47 0 .35.04.7.11 1.03A12.69 12.69 0 0 1 1.64.89a4.48 4.48 0 0 0 1.38 5.97A4.41 4.41 0 0 1 1 6.35v.06c0 2.17 1.54 3.97 3.58 4.38a4.51 4.51 0 0 1-2.02.08c.57 1.78 2.22 3.08 4.18 3.12A8.99 8.99 0 0 1 0 15.54 12.67 12.67 0 0 0 6.86 17.5c8.24 0 12.75-6.83 12.75-12.75l-.01-.58A9.07 9.07 0 0 0 22 2l.03.03z"/></svg></a>
|
||||
<a href="#" aria-label="GitHub"><svg viewBox="0 0 24 24"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg></a>
|
||||
<a href="#" aria-label="LinkedIn"><svg viewBox="0 0 24 24"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></a>
|
||||
</div>
|
||||
<p class="footer-b-copy">© 2025 UI Kit Demo. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- SWITCHER -->
|
||||
<div class="switcher-panel">
|
||||
<div class="switcher-group">
|
||||
<span class="switcher-group-label">Layout</span>
|
||||
<button class="switcher-pill layout-pill" data-l="a"><span class="layout-letter">A</span>Split</button>
|
||||
<button class="switcher-pill layout-pill active" data-l="b"><span class="layout-letter">B</span>Centered</button>
|
||||
<button class="switcher-pill layout-pill" data-l="c"><span class="layout-letter">C</span>Asymmetric</button>
|
||||
</div>
|
||||
<div class="switcher-group">
|
||||
<span class="switcher-group-label">Theme</span>
|
||||
<button class="switcher-pill theme-pill" data-t="midnight"><span class="theme-dot"></span>Midnight</button>
|
||||
<button class="switcher-pill theme-pill" data-t="linen"><span class="theme-dot"></span>Linen</button>
|
||||
<button class="switcher-pill theme-pill" data-t="neon"><span class="theme-dot"></span>Neon</button>
|
||||
<button class="switcher-pill theme-pill" data-t="petal"><span class="theme-dot"></span>Petal</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.testimonials-b-selector').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const idx = btn.dataset.slide;
|
||||
document.querySelectorAll('.testimonials-b-slide').forEach(s => s.classList.remove('is-active'));
|
||||
document.querySelectorAll('.testimonials-b-selector').forEach(b => b.classList.remove('is-active'));
|
||||
document.querySelector('.testimonials-b-slide[data-index="'+idx+'"]').classList.add('is-active');
|
||||
btn.classList.add('is-active');
|
||||
});
|
||||
});
|
||||
document.querySelectorAll('.faq-b-question').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const item = btn.closest('.faq-b-item');
|
||||
const isOpen = item.classList.contains('is-open');
|
||||
document.querySelectorAll('.faq-b-item').forEach(i => i.classList.remove('is-open'));
|
||||
if (!isOpen) item.classList.add('is-open');
|
||||
});
|
||||
});
|
||||
const formB = document.getElementById('contactFormB');
|
||||
const successB = document.getElementById('formSuccessB');
|
||||
if (formB) { formB.addEventListener('submit', e => { e.preventDefault(); formB.style.display='none'; successB.classList.add('is-visible'); }); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+362
@@ -0,0 +1,362 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="midnight">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>UI Kit Demo — Layout C</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800;900&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@700;800;900&family=Source+Sans+3:wght@400;500;600;700&family=Space+Grotesk:wght@700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&family=Cormorant+Garamond:wght@600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="base.css" />
|
||||
<link rel="stylesheet" href="themes/theme-midnight.css" />
|
||||
<link rel="stylesheet" href="themes/theme-linen.css" />
|
||||
<link rel="stylesheet" href="themes/theme-neon.css" />
|
||||
<link rel="stylesheet" href="themes/theme-petal.css" />
|
||||
<link rel="stylesheet" href="components/header/header-c.css" />
|
||||
<link rel="stylesheet" href="components/hero/hero-c.css" />
|
||||
<link rel="stylesheet" href="components/features/features-c.css" />
|
||||
<link rel="stylesheet" href="components/about/about-c.css" />
|
||||
<link rel="stylesheet" href="components/testimonials/testimonials-c.css" />
|
||||
<link rel="stylesheet" href="components/faq/faq-c.css" />
|
||||
<link rel="stylesheet" href="components/cta/cta-c.css" />
|
||||
<link rel="stylesheet" href="components/contact/contact-c.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer-c.css" />
|
||||
<style>
|
||||
.switcher-panel{position:fixed;bottom:2rem;right:2rem;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:1.25rem}
|
||||
.switcher-group{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem}
|
||||
.switcher-group-label{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)}
|
||||
.switcher-pill{display:flex;align-items:center;gap:.6rem;padding:.5rem .9rem;border-radius:99px;border:1.5px solid var(--color-border);background-color:var(--color-surface);cursor:pointer;font-size:.8rem;font-weight:600;color:var(--color-text);font-family:var(--font-body);transition:all .2s ease;box-shadow:var(--color-card-shadow);white-space:nowrap}
|
||||
.switcher-pill:hover,.switcher-pill.active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-soft)}
|
||||
.switcher-pill.active{pointer-events:none}
|
||||
.theme-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
|
||||
.layout-letter{width:16px;height:16px;border-radius:3px;background-color:var(--color-border);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;color:var(--color-text-muted);flex-shrink:0;transition:all .2s ease}
|
||||
.switcher-pill.active .layout-letter,.switcher-pill:hover .layout-letter{background-color:var(--color-primary);color:var(--color-btn-text)}
|
||||
.theme-pill[data-t="midnight"] .theme-dot{background:#00d4ff}
|
||||
.theme-pill[data-t="linen"] .theme-dot{background:#c2410c}
|
||||
.theme-pill[data-t="neon"] .theme-dot{background:#aaff00}
|
||||
.theme-pill[data-t="petal"] .theme-dot{background:linear-gradient(135deg,#9b5de5,#f72585)}
|
||||
@keyframes fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
|
||||
.hero-c-content>*{opacity:0;animation:fade-up .6s ease forwards}
|
||||
.hero-c-content>*:nth-child(1){animation-delay:.1s}.hero-c-content>*:nth-child(2){animation-delay:.2s}
|
||||
.hero-c-content>*:nth-child(3){animation-delay:.3s}.hero-c-content>*:nth-child(4){animation-delay:.4s}
|
||||
.hero-c-content>*:nth-child(5){animation-delay:.5s}
|
||||
.hero-c-visual{opacity:0;animation:fade-up .7s ease .3s forwards}
|
||||
</style>
|
||||
<script src="layout.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- HEADER C -->
|
||||
<header class="header-c">
|
||||
<div class="container">
|
||||
<div class="header-c-inner">
|
||||
<a href="#" class="header-logo"><div class="logo-mark">U</div>UI Kit</a>
|
||||
<div class="header-c-right">
|
||||
<a href="#" class="btn btn-outline">Sign in</a>
|
||||
<a href="#" class="btn btn-primary">Get started</a>
|
||||
<button class="header-c-menu-btn" id="headerCMenuBtn">
|
||||
<svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
||||
Menu
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-c-drawer" id="headerCDrawer">
|
||||
<div class="container">
|
||||
<div class="header-c-drawer-inner">
|
||||
<a href="#features" class="header-c-drawer-link"><span class="header-c-drawer-link-title">Features</span><span class="header-c-drawer-link-desc">Lorem ipsum dolor sit amet consectetur.</span></a>
|
||||
<a href="#about" class="header-c-drawer-link"><span class="header-c-drawer-link-title">About</span><span class="header-c-drawer-link-desc">Adipiscing elit sed do eiusmod tempor.</span></a>
|
||||
<a href="#testimonials" class="header-c-drawer-link"><span class="header-c-drawer-link-title">Testimonials</span><span class="header-c-drawer-link-desc">Incididunt ut labore et dolore magna.</span></a>
|
||||
<a href="#contact" class="header-c-drawer-link"><span class="header-c-drawer-link-title">Contact</span><span class="header-c-drawer-link-desc">Quis nostrud exercitation ullamco.</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<hr class="divider" />
|
||||
|
||||
<!-- HERO C -->
|
||||
<section class="hero-c">
|
||||
<div class="container">
|
||||
<div class="hero-c-inner">
|
||||
<div class="hero-c-content">
|
||||
<div class="hero-c-eyebrow"><span class="hero-c-eyebrow-line"></span><span class="hero-c-eyebrow-text">Now in public beta</span></div>
|
||||
<h1 class="hero-c-title">Your headline<br />goes <em>right here</em><br />asymmetric</h1>
|
||||
<p class="hero-c-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.</p>
|
||||
<div class="hero-c-features">
|
||||
<div class="hero-c-feature"><span class="hero-c-feature-check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Feature one — lorem ipsum dolor sit amet</div>
|
||||
<div class="hero-c-feature"><span class="hero-c-feature-check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Feature two — consectetur adipiscing elit</div>
|
||||
<div class="hero-c-feature"><span class="hero-c-feature-check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Feature three — sed do eiusmod tempor</div>
|
||||
<div class="hero-c-feature"><span class="hero-c-feature-check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Feature four — incididunt ut labore et dolore</div>
|
||||
</div>
|
||||
<div class="hero-c-actions">
|
||||
<a href="#" class="btn btn-primary">Primary action <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
|
||||
<a href="#" class="btn btn-outline">Secondary action</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-c-visual">
|
||||
<div class="hero-c-notif"><div class="hero-c-notif-icon">🚀</div><div class="hero-c-notif-body"><div class="hero-c-notif-title">Deployment successful</div><div class="hero-c-notif-text">Lorem ipsum dolor sit amet consectetur.</div></div><span class="hero-c-notif-time">2m ago</span></div>
|
||||
<div class="hero-c-notif"><div class="hero-c-notif-icon">📈</div><div class="hero-c-notif-body"><div class="hero-c-notif-title">Traffic up 34% this week</div><div class="hero-c-notif-text">Adipiscing elit sed do eiusmod tempor.</div></div><span class="hero-c-notif-time">1h ago</span></div>
|
||||
<div class="hero-c-notif"><div class="hero-c-notif-icon">✅</div><div class="hero-c-notif-body"><div class="hero-c-notif-title">All systems operational</div><div class="hero-c-notif-text">Incididunt ut labore et dolore magna.</div></div><span class="hero-c-notif-time">3h ago</span></div>
|
||||
<div class="hero-c-notif"><div class="hero-c-notif-icon">👥</div><div class="hero-c-notif-body"><div class="hero-c-notif-title">2,400 users onboarded</div><div class="hero-c-notif-text">Quis nostrud exercitation ullamco.</div></div><span class="hero-c-notif-time">Yesterday</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FEATURES C -->
|
||||
<section class="features-c" id="features">
|
||||
<div class="container">
|
||||
<div class="features-c-header">
|
||||
<div><span class="section-label">Features</span><h2 class="section-title">Everything you need<br />to build great products</h2></div>
|
||||
<p class="section-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="features-c-list">
|
||||
<div class="features-c-item"><span class="features-c-number">01</span><div class="features-c-content"><h3 class="features-c-title">Feature Title One</h3><p class="features-c-desc">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.</p></div><div class="features-c-icon"><svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg></div></div>
|
||||
<div class="features-c-item"><span class="features-c-number">02</span><div class="features-c-content"><h3 class="features-c-title">Feature Title Two</h3><p class="features-c-desc">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.</p></div><div class="features-c-icon"><svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></div></div>
|
||||
<div class="features-c-item"><span class="features-c-number">03</span><div class="features-c-content"><h3 class="features-c-title">Feature Title Three</h3><p class="features-c-desc">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.</p></div><div class="features-c-icon"><svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div></div>
|
||||
<div class="features-c-item"><span class="features-c-number">04</span><div class="features-c-content"><h3 class="features-c-title">Feature Title Four</h3><p class="features-c-desc">Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet consectetur adipiscing.</p></div><div class="features-c-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg></div></div>
|
||||
<div class="features-c-item"><span class="features-c-number">05</span><div class="features-c-content"><h3 class="features-c-title">Feature Title Five</h3><p class="features-c-desc">Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p></div><div class="features-c-icon"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></div></div>
|
||||
<div class="features-c-item"><span class="features-c-number">06</span><div class="features-c-content"><h3 class="features-c-title">Feature Title Six</h3><p class="features-c-desc">Voluptate velit esse cillum dolore eu fugiat nulla pariatur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim est laborum.</p></div><div class="features-c-icon"><svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ABOUT C -->
|
||||
<section class="about-c" id="about">
|
||||
<div class="container">
|
||||
<div class="about-c-inner">
|
||||
<div class="about-c-visual">
|
||||
<div class="about-c-img-placeholder">
|
||||
<span class="about-c-img-label">Image placeholder<br />4:5 ratio</span>
|
||||
</div>
|
||||
<div class="about-c-img-card"><span class="about-c-img-card-num">28</span>Team members</div>
|
||||
</div>
|
||||
<div class="about-c-content">
|
||||
<span class="section-label">About Us</span>
|
||||
<h2 class="section-title">We're building the future of the web</h2>
|
||||
<p class="about-c-body">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.</p>
|
||||
<p class="about-c-body">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.</p>
|
||||
<div class="about-c-stats">
|
||||
<div class="about-c-stat"><div class="about-c-stat-num">8+</div><div class="about-c-stat-label">Years active</div></div>
|
||||
<div class="about-c-stat"><div class="about-c-stat-num">120k</div><div class="about-c-stat-label">Users worldwide</div></div>
|
||||
<div class="about-c-stat"><div class="about-c-stat-num">340+</div><div class="about-c-stat-label">Components</div></div>
|
||||
<div class="about-c-stat"><div class="about-c-stat-num">99%</div><div class="about-c-stat-label">Satisfaction</div></div>
|
||||
</div>
|
||||
<div class="about-c-tags">
|
||||
<span class="about-c-tag">Design Systems</span><span class="about-c-tag">Open Source</span>
|
||||
<span class="about-c-tag">Developer Tools</span><span class="about-c-tag">UI Components</span>
|
||||
<span class="about-c-tag">Accessibility</span>
|
||||
</div>
|
||||
<a href="#" class="btn btn-primary">Meet the team</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TESTIMONIALS C -->
|
||||
<section class="testimonials-c" id="testimonials">
|
||||
<div class="container">
|
||||
<div class="testimonials-c-header">
|
||||
<div><span class="section-label">Testimonials</span><h2 class="section-title">What our users are saying</h2></div>
|
||||
<p class="section-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="testimonials-c-list">
|
||||
<div class="testimonials-c-item">
|
||||
<span class="testimonials-c-num">01</span>
|
||||
<div class="testimonials-c-body">
|
||||
<div class="testimonials-c-stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
|
||||
<p class="testimonials-c-text">"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."</p>
|
||||
<div class="testimonials-c-author"><div class="testimonials-c-avatar">AJ</div><span class="testimonials-c-name">Alex Johnson</span><span class="testimonials-c-role">Product Designer, Acme Co.</span></div>
|
||||
</div>
|
||||
<span class="testimonials-c-badge">Acme Co.</span>
|
||||
</div>
|
||||
<div class="testimonials-c-item">
|
||||
<span class="testimonials-c-num">02</span>
|
||||
<div class="testimonials-c-body">
|
||||
<div class="testimonials-c-stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
|
||||
<p class="testimonials-c-text">"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."</p>
|
||||
<div class="testimonials-c-author"><div class="testimonials-c-avatar">BK</div><span class="testimonials-c-name">Blake Kim</span><span class="testimonials-c-role">Engineering Lead, Startup Inc.</span></div>
|
||||
</div>
|
||||
<span class="testimonials-c-badge">Startup Inc.</span>
|
||||
</div>
|
||||
<div class="testimonials-c-item">
|
||||
<span class="testimonials-c-num">03</span>
|
||||
<div class="testimonials-c-body">
|
||||
<div class="testimonials-c-stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
|
||||
<p class="testimonials-c-text">"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."</p>
|
||||
<div class="testimonials-c-author"><div class="testimonials-c-avatar">CL</div><span class="testimonials-c-name">Casey Lee</span><span class="testimonials-c-role">Founder, Lorem Studio</span></div>
|
||||
</div>
|
||||
<span class="testimonials-c-badge">Lorem Studio</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ C -->
|
||||
<section class="faq-c" id="faq">
|
||||
<div class="container">
|
||||
<div class="faq-c-header">
|
||||
<span class="section-label">FAQ</span>
|
||||
<h2 class="section-title">Frequently asked questions</h2>
|
||||
<p class="section-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore.</p>
|
||||
<p class="faq-c-contact-nudge">Still have questions? <a href="#contact">Get in touch</a> and we'll respond within 24 hours.</p>
|
||||
</div>
|
||||
<div class="faq-c-grid">
|
||||
<div class="faq-c-col">
|
||||
<div class="faq-c-item is-open">
|
||||
<button class="faq-c-question"><span class="faq-c-question-text">What is this product and who is it for?</span><span class="faq-c-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-c-answer"><div class="faq-c-answer-inner">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.</div></div>
|
||||
</div>
|
||||
<div class="faq-c-item">
|
||||
<button class="faq-c-question"><span class="faq-c-question-text">How do I get started after signing up?</span><span class="faq-c-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-c-answer"><div class="faq-c-answer-inner">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.</div></div>
|
||||
</div>
|
||||
<div class="faq-c-item">
|
||||
<button class="faq-c-question"><span class="faq-c-question-text">Is there a free plan available?</span><span class="faq-c-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-c-answer"><div class="faq-c-answer-inner">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.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-c-col">
|
||||
<div class="faq-c-item">
|
||||
<button class="faq-c-question"><span class="faq-c-question-text">Can I cancel my subscription at any time?</span><span class="faq-c-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-c-answer"><div class="faq-c-answer-inner">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit voluptate.</div></div>
|
||||
</div>
|
||||
<div class="faq-c-item">
|
||||
<button class="faq-c-question"><span class="faq-c-question-text">Do you offer support for enterprise teams?</span><span class="faq-c-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-c-answer"><div class="faq-c-answer-inner">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.</div></div>
|
||||
</div>
|
||||
<div class="faq-c-item">
|
||||
<button class="faq-c-question"><span class="faq-c-question-text">How is my data stored and kept secure?</span><span class="faq-c-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span></button>
|
||||
<div class="faq-c-answer"><div class="faq-c-answer-inner">Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT C -->
|
||||
<section class="contact-c" id="contact">
|
||||
<div class="container">
|
||||
<div class="contact-c-inner">
|
||||
<div class="contact-c-info">
|
||||
<span class="section-label">Contact Us</span>
|
||||
<h2 class="section-title">Get in touch with our team</h2>
|
||||
<p class="section-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<div class="contact-c-details">
|
||||
<div class="contact-c-detail-item"><div class="contact-c-detail-icon"><svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></div><div><div class="contact-c-detail-label">Email</div><div class="contact-c-detail-value">hello@example.com</div></div></div>
|
||||
<div class="contact-c-detail-item"><div class="contact-c-detail-icon"><svg viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.88a16 16 0 0 0 6 6l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21.73 16.92z"/></svg></div><div><div class="contact-c-detail-label">Phone</div><div class="contact-c-detail-value">+1 (555) 000-0000</div></div></div>
|
||||
<div class="contact-c-detail-item"><div class="contact-c-detail-icon"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div><div><div class="contact-c-detail-label">Office</div><div class="contact-c-detail-value">123 Example Street, City</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-c-form-wrap">
|
||||
<form id="contactFormC">
|
||||
<div class="contact-c-form-grid">
|
||||
<div class="contact-c-form-group"><label class="contact-c-label">First name <span>*</span></label><input type="text" class="contact-c-input" placeholder="John" required /></div>
|
||||
<div class="contact-c-form-group"><label class="contact-c-label">Last name <span>*</span></label><input type="text" class="contact-c-input" placeholder="Doe" required /></div>
|
||||
<div class="contact-c-form-group full-width"><label class="contact-c-label">Email address <span>*</span></label><input type="email" class="contact-c-input" placeholder="john@example.com" required /></div>
|
||||
<div class="contact-c-form-group full-width"><label class="contact-c-label">Subject</label><div class="contact-c-select-wrap"><select class="contact-c-input contact-c-select"><option value="">Select a topic</option><option>General enquiry</option><option>Sales</option><option>Support</option><option>Partnership</option></select></div></div>
|
||||
<div class="contact-c-form-group full-width"><label class="contact-c-label">Message <span>*</span></label><textarea class="contact-c-textarea" placeholder="Lorem ipsum dolor sit amet..." required></textarea></div>
|
||||
</div>
|
||||
<div class="contact-c-submit-row">
|
||||
<button type="submit" class="btn btn-primary">Send message <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg></button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="contact-c-success" id="formSuccessC">
|
||||
<div class="contact-c-success-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<div class="contact-c-success-title">Message sent!</div>
|
||||
<p class="contact-c-success-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. We'll be in touch within 24 hours.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-c-accent">
|
||||
<div class="contact-c-accent-title">Why reach out to us?</div>
|
||||
<div class="contact-c-accent-list">
|
||||
<div class="contact-c-accent-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Lorem ipsum dolor sit amet consectetur.</div>
|
||||
<div class="contact-c-accent-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Adipiscing elit sed do eiusmod tempor.</div>
|
||||
<div class="contact-c-accent-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Incididunt ut labore et dolore magna.</div>
|
||||
<div class="contact-c-accent-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Quis nostrud exercitation ullamco nisi.</div>
|
||||
</div>
|
||||
<div class="contact-c-accent-divider"></div>
|
||||
<div class="contact-c-accent-response"><strong>Response time</strong>We typically reply within 24 hours on business days.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA C -->
|
||||
<section class="cta-c">
|
||||
<div class="container">
|
||||
<div class="cta-c-inner">
|
||||
<span class="cta-c-label"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>Get started today</span>
|
||||
<h2 class="cta-c-title">Ready to get<br />started right now?</h2>
|
||||
<p class="cta-c-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam.</p>
|
||||
<div class="cta-c-actions">
|
||||
<a href="#" class="btn-solid">Primary action <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
|
||||
<a href="#" class="btn-ghost">Secondary action</a>
|
||||
</div>
|
||||
<div class="cta-c-trust">
|
||||
<span class="cta-c-trust-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Free 14-day trial</span>
|
||||
<span class="cta-c-divider"></span>
|
||||
<span class="cta-c-trust-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Cancel anytime</span>
|
||||
<span class="cta-c-divider"></span>
|
||||
<span class="cta-c-trust-item"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>No credit card needed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER C -->
|
||||
<footer class="footer-c">
|
||||
<div class="container">
|
||||
<div class="footer-c-bar">
|
||||
<a href="#" class="footer-c-logo"><div class="logo-mark">U</div>UI Kit</a>
|
||||
<nav class="footer-c-nav">
|
||||
<a href="#">Features</a><a href="#">Pricing</a><a href="#">About</a>
|
||||
<a href="#">Blog</a><a href="#">Privacy</a><a href="#">Terms</a>
|
||||
</nav>
|
||||
<p class="footer-c-copy">© 2025 UI Kit Demo. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- SWITCHER -->
|
||||
<div class="switcher-panel">
|
||||
<div class="switcher-group">
|
||||
<span class="switcher-group-label">Layout</span>
|
||||
<button class="switcher-pill layout-pill" data-l="a"><span class="layout-letter">A</span>Split</button>
|
||||
<button class="switcher-pill layout-pill" data-l="b"><span class="layout-letter">B</span>Centered</button>
|
||||
<button class="switcher-pill layout-pill active" data-l="c"><span class="layout-letter">C</span>Asymmetric</button>
|
||||
</div>
|
||||
<div class="switcher-group">
|
||||
<span class="switcher-group-label">Theme</span>
|
||||
<button class="switcher-pill theme-pill" data-t="midnight"><span class="theme-dot"></span>Midnight</button>
|
||||
<button class="switcher-pill theme-pill" data-t="linen"><span class="theme-dot"></span>Linen</button>
|
||||
<button class="switcher-pill theme-pill" data-t="neon"><span class="theme-dot"></span>Neon</button>
|
||||
<button class="switcher-pill theme-pill" data-t="petal"><span class="theme-dot"></span>Petal</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Header C drawer
|
||||
const menuBtn = document.getElementById('headerCMenuBtn');
|
||||
const drawer = document.getElementById('headerCDrawer');
|
||||
if (menuBtn) { menuBtn.addEventListener('click', () => drawer.classList.toggle('is-open')); }
|
||||
|
||||
// FAQ C accordion (per-column independent)
|
||||
document.querySelectorAll('.faq-c-col').forEach(col => {
|
||||
col.querySelectorAll('.faq-c-question').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const item = btn.closest('.faq-c-item');
|
||||
const isOpen = item.classList.contains('is-open');
|
||||
col.querySelectorAll('.faq-c-item').forEach(i => i.classList.remove('is-open'));
|
||||
if (!isOpen) item.classList.add('is-open');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Contact C form
|
||||
const formC = document.getElementById('contactFormC');
|
||||
const successC = document.getElementById('formSuccessC');
|
||||
if (formC) { formC.addEventListener('submit', e => { e.preventDefault(); formC.style.display='none'; successC.classList.add('is-visible'); }); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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'; });
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user