Created
February 10, 2026 13:27
-
-
Save akaihola/93602e673e75e93f4bb4cee88510e345 to your computer and use it in GitHub Desktop.
Coleaders website 2026 v2 — focused MVP (one visitor, one next step)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="fi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Coleaders — Työelämä voi olla parempi</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Source+Sans+3:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet"> | |
| <style> | |
| /* ============ RESET & VARIABLES ============ */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --coral: #D4724E; | |
| --coral-light: #E8946F; | |
| --coral-bg: #FDEEE4; | |
| --coral-deep: #C25A38; | |
| --teal: #1B7A6E; | |
| --teal-light: #2A9D8F; | |
| --teal-bg: #E0F2EF; | |
| --cream: #FFF8F0; | |
| --cream-dark: #F5EBE0; | |
| --dark: #2C2A35; | |
| --dark-mid: #3D3A48; | |
| --text: #2C2A35; | |
| --text-light: #6B6778; | |
| --white: #FFFFFF; | |
| --font-display: 'Fraunces', Georgia, serif; | |
| --font-body: 'Source Sans 3', 'Segoe UI', sans-serif; | |
| --space-xs: 0.5rem; | |
| --space-sm: 1rem; | |
| --space-md: 1.5rem; | |
| --space-lg: 3rem; | |
| --space-xl: 5rem; | |
| --space-2xl: 8rem; | |
| --max-w: 1080px; | |
| --radius: 12px; | |
| --radius-lg: 20px; | |
| } | |
| html { scroll-behavior: smooth; font-size: 16px; } | |
| body { | |
| font-family: var(--font-body); | |
| color: var(--text); | |
| background: var(--cream); | |
| line-height: 1.65; | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| img { max-width: 100%; display: block; } | |
| a { color: inherit; text-decoration: none; } | |
| ul { list-style: none; } | |
| .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-md); } | |
| h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; font-weight: 600; } | |
| h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); } | |
| h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); } | |
| h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); } | |
| h4 { font-size: 1.1rem; } | |
| p { max-width: 65ch; } | |
| /* ============ NAVIGATION ============ */ | |
| .nav { | |
| position: fixed; | |
| top: 0; left: 0; right: 0; | |
| z-index: 100; | |
| background: rgba(255,248,240,0.92); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid rgba(0,0,0,0.06); | |
| transition: box-shadow 0.3s; | |
| } | |
| .nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.08); } | |
| .nav-inner { | |
| max-width: var(--max-w); | |
| margin: 0 auto; | |
| padding: 0 var(--space-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| height: 68px; | |
| } | |
| .nav-logo { | |
| font-family: var(--font-display); | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--teal); | |
| letter-spacing: -0.5px; | |
| } | |
| .nav-logo span { color: var(--coral); } | |
| .nav-links { display: flex; align-items: center; gap: var(--space-md); } | |
| .nav-links a { | |
| font-size: 0.95rem; | |
| font-weight: 500; | |
| color: var(--text); | |
| transition: color 0.2s; | |
| position: relative; | |
| } | |
| .nav-links a:hover { color: var(--teal); } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -4px; left: 0; | |
| width: 0; height: 2px; | |
| background: var(--coral); | |
| transition: width 0.3s; | |
| border-radius: 2px; | |
| } | |
| .nav-links a:hover::after { width: 100%; } | |
| .nav-lang { | |
| font-size: 0.85rem; | |
| padding: 4px 10px; | |
| border: 1px solid var(--text-light); | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .nav-lang:hover { background: var(--text); color: var(--white); } | |
| .btn-cta { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 24px; | |
| background: var(--coral); | |
| color: var(--white); | |
| font-family: var(--font-body); | |
| font-weight: 600; | |
| font-size: 0.95rem; | |
| border: none; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| text-decoration: none; | |
| } | |
| .btn-cta:hover { background: var(--coral-deep); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(212,114,78,0.35); } | |
| .btn-teal { | |
| padding: 10px 24px; | |
| background: var(--teal); | |
| color: var(--white); | |
| font-family: var(--font-body); | |
| font-weight: 600; | |
| font-size: 0.95rem; | |
| border: none; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| text-decoration: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-teal:hover { background: var(--teal-light); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(27,122,110,0.3); } | |
| .btn-outline { | |
| padding: 10px 24px; | |
| background: transparent; | |
| color: var(--teal); | |
| font-family: var(--font-body); | |
| font-weight: 600; | |
| font-size: 0.95rem; | |
| border: 2px solid var(--teal); | |
| border-radius: 50px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| text-decoration: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-outline:hover { background: var(--teal); color: var(--white); } | |
| /* Mobile menu */ | |
| .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } | |
| .nav-toggle svg { width: 26px; height: 26px; stroke: var(--text); } | |
| @media (max-width: 860px) { | |
| .nav-links { display: none; } | |
| .nav-links.open { | |
| display: flex; | |
| flex-direction: column; | |
| position: absolute; | |
| top: 68px; left: 0; right: 0; | |
| background: var(--cream); | |
| padding: var(--space-md); | |
| gap: var(--space-sm); | |
| border-bottom: 1px solid rgba(0,0,0,0.1); | |
| box-shadow: 0 8px 24px rgba(0,0,0,0.08); | |
| } | |
| .nav-toggle { display: block; } | |
| } | |
| /* ============ HERO ============ */ | |
| .hero { | |
| padding-top: 120px; | |
| padding-bottom: var(--space-xl); | |
| background: var(--coral-bg); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: -80px; right: -120px; | |
| width: 500px; height: 500px; | |
| background: radial-gradient(circle, rgba(212,114,78,0.12) 0%, transparent 70%); | |
| border-radius: 50%; | |
| } | |
| .hero::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -60px; left: -80px; | |
| width: 350px; height: 350px; | |
| background: radial-gradient(circle, rgba(27,122,110,0.08) 0%, transparent 70%); | |
| border-radius: 50%; | |
| } | |
| .hero-inner { | |
| display: grid; | |
| grid-template-columns: 1.1fr 0.9fr; | |
| gap: var(--space-lg); | |
| align-items: center; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero-text h1 { | |
| margin-bottom: var(--space-md); | |
| color: var(--dark); | |
| } | |
| .hero-text h1 em { | |
| font-style: normal; | |
| color: var(--coral-deep); | |
| } | |
| .hero-text .subtitle { | |
| font-size: 1.15rem; | |
| color: var(--text-light); | |
| margin-bottom: var(--space-sm); | |
| max-width: 48ch; | |
| line-height: 1.7; | |
| } | |
| .hero-text .subtitle-small { | |
| font-size: 0.95rem; | |
| color: var(--text-light); | |
| opacity: 0.8; | |
| } | |
| .hero-visual { | |
| position: relative; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .hero-illustration { width: 100%; max-width: 400px; } | |
| @media (max-width: 768px) { | |
| .hero-inner { grid-template-columns: 1fr; text-align: center; } | |
| .hero-text .subtitle { margin-left: auto; margin-right: auto; } | |
| .hero-visual { order: -1; } | |
| .hero-illustration { max-width: 260px; } | |
| } | |
| /* ============ SECTION 2: "MITÄ TÄÄLLÄ OIKEASTI TAPAHTUU" ============ */ | |
| .what-is { | |
| padding: var(--space-xl) 0; | |
| background: var(--cream); | |
| } | |
| .what-is-inner { | |
| text-align: center; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| .what-is h2 { | |
| margin-bottom: var(--space-lg); | |
| } | |
| .what-is-points { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-md); | |
| text-align: left; | |
| max-width: 580px; | |
| margin: 0 auto; | |
| } | |
| .what-is-point { | |
| display: flex; | |
| gap: var(--space-sm); | |
| align-items: flex-start; | |
| } | |
| .what-is-point .bullet { | |
| width: 36px; height: 36px; | |
| min-width: 36px; | |
| border-radius: 50%; | |
| background: var(--teal-bg); | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 1.1rem; | |
| margin-top: 2px; | |
| } | |
| .what-is-point p { | |
| font-size: 1.05rem; | |
| color: var(--text); | |
| } | |
| .what-is-point p strong { | |
| color: var(--dark); | |
| } | |
| /* ============ SECTION 3: HAARUKOINTI ============ */ | |
| .paths { | |
| padding: var(--space-2xl) 0 var(--space-xl); | |
| background: var(--cream); | |
| } | |
| .paths-header { | |
| text-align: center; | |
| margin-bottom: var(--space-xl); | |
| } | |
| .paths-header h2 { margin-bottom: var(--space-xs); } | |
| .paths-header p { color: var(--text-light); font-size: 1.05rem; max-width: 50ch; margin: 0 auto; } | |
| .paths-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-md); | |
| } | |
| .path-card { | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-lg) var(--space-md); | |
| border: 1px solid rgba(0,0,0,0.05); | |
| transition: all 0.4s; | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .path-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 4px; | |
| transition: transform 0.3s; | |
| transform: scaleX(0); | |
| } | |
| .path-card:hover::before { transform: scaleX(1); } | |
| .path-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); } | |
| .path-card:nth-child(1)::before { background: var(--teal); } | |
| .path-card:nth-child(2)::before { background: var(--coral); } | |
| .path-card:nth-child(3)::before { background: var(--dark); } | |
| .path-card:nth-child(4)::before { background: var(--coral-light); } | |
| .path-icon { | |
| width: 56px; height: 56px; | |
| border-radius: 50%; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 1.6rem; | |
| margin-bottom: var(--space-md); | |
| } | |
| .path-card:nth-child(1) .path-icon { background: var(--teal-bg); } | |
| .path-card:nth-child(2) .path-icon { background: var(--coral-bg); } | |
| .path-card:nth-child(3) .path-icon { background: var(--cream-dark); } | |
| .path-card:nth-child(4) .path-icon { background: var(--teal-bg); } | |
| .path-card .feeling { | |
| font-family: var(--font-display); | |
| font-style: italic; | |
| font-size: 1.1rem; | |
| color: var(--dark); | |
| margin-bottom: var(--space-sm); | |
| line-height: 1.4; | |
| } | |
| .path-card .description { | |
| font-size: 0.95rem; | |
| color: var(--text-light); | |
| margin-bottom: var(--space-md); | |
| flex: 1; | |
| } | |
| .path-card .path-link { | |
| font-weight: 600; | |
| font-size: 0.95rem; | |
| color: var(--teal); | |
| transition: color 0.2s; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .path-card:nth-child(2) .path-link { color: var(--coral); } | |
| .path-card .path-link:hover { gap: 10px; } | |
| .path-card .path-link .arrow { | |
| transition: transform 0.2s; | |
| display: inline-block; | |
| } | |
| .path-card .path-link:hover .arrow { transform: translateX(3px); } | |
| @media (max-width: 700px) { | |
| .paths-grid { grid-template-columns: 1fr; } | |
| } | |
| /* ============ SECTION 4: SOSIAALINEN TODISTE ============ */ | |
| .proof { | |
| padding: var(--space-xl) 0; | |
| background: var(--teal-bg); | |
| position: relative; | |
| } | |
| .proof::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 4px; | |
| background: linear-gradient(90deg, var(--teal), var(--teal-light), var(--coral-light), var(--coral)); | |
| } | |
| .proof-inner { | |
| text-align: center; | |
| max-width: 750px; | |
| margin: 0 auto; | |
| } | |
| .proof-inner > p { | |
| font-size: 1.1rem; | |
| color: var(--text); | |
| margin: 0 auto var(--space-lg); | |
| max-width: 60ch; | |
| } | |
| .proof-quote { | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-lg); | |
| position: relative; | |
| border: 1px solid rgba(0,0,0,0.04); | |
| box-shadow: 0 2px 12px rgba(0,0,0,0.04); | |
| margin-bottom: var(--space-lg); | |
| text-align: left; | |
| } | |
| .proof-quote::before { | |
| content: '\201C'; | |
| font-family: var(--font-display); | |
| font-size: 4rem; | |
| color: var(--coral-light); | |
| opacity: 0.5; | |
| position: absolute; | |
| top: 8px; left: 20px; | |
| line-height: 1; | |
| } | |
| .proof-quote p { | |
| font-style: italic; | |
| font-size: 1.15rem; | |
| margin-bottom: var(--space-sm); | |
| position: relative; | |
| z-index: 1; | |
| max-width: none; | |
| line-height: 1.7; | |
| } | |
| .proof-quote .author { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| } | |
| .proof-quote .avatar { | |
| width: 48px; height: 48px; | |
| border-radius: 50%; | |
| background: var(--coral-bg); | |
| border: 2px solid var(--coral-light); | |
| display: flex; align-items: center; justify-content: center; | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| color: var(--coral); | |
| font-size: 1.1rem; | |
| flex-shrink: 0; | |
| } | |
| .proof-quote .name { font-weight: 600; font-size: 0.95rem; } | |
| .proof-quote .role { font-size: 0.85rem; color: var(--text-light); } | |
| .proof-people { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--space-sm); | |
| flex-wrap: wrap; | |
| margin-bottom: var(--space-xs); | |
| } | |
| .proof-person { | |
| text-align: center; | |
| width: 100px; | |
| } | |
| .proof-person .circle { | |
| width: 56px; height: 56px; | |
| border-radius: 50%; | |
| border: 3px solid var(--white); | |
| display: flex; align-items: center; justify-content: center; | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| font-size: 0.85rem; | |
| color: var(--white); | |
| margin: 0 auto 6px; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| transition: transform 0.3s; | |
| } | |
| .proof-person .circle:hover { transform: scale(1.1); } | |
| .proof-person:nth-child(5n+1) .circle { background: var(--coral); } | |
| .proof-person:nth-child(5n+2) .circle { background: var(--teal); } | |
| .proof-person:nth-child(5n+3) .circle { background: var(--coral-deep); } | |
| .proof-person:nth-child(5n+4) .circle { background: var(--teal-light); } | |
| .proof-person:nth-child(5n+5) .circle { background: var(--dark-mid); } | |
| .proof-person .p-name { font-size: 0.78rem; font-weight: 600; } | |
| .proof-person .p-org { font-size: 0.72rem; color: var(--text-light); } | |
| /* ============ SECTION 5: WHAT YOU GET ============ */ | |
| .benefits { | |
| padding: var(--space-xl) 0; | |
| background: var(--cream); | |
| } | |
| .benefits-inner { | |
| max-width: 680px; | |
| margin: 0 auto; | |
| text-align: center; | |
| } | |
| .benefits-inner h2 { margin-bottom: var(--space-lg); } | |
| .benefit-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-md); | |
| text-align: left; | |
| } | |
| .benefit-item { | |
| display: flex; | |
| gap: var(--space-sm); | |
| align-items: flex-start; | |
| } | |
| .benefit-item .check { | |
| width: 32px; height: 32px; | |
| min-width: 32px; | |
| border-radius: 50%; | |
| background: var(--coral-bg); | |
| display: flex; align-items: center; justify-content: center; | |
| color: var(--coral); | |
| font-weight: 700; | |
| font-size: 1rem; | |
| margin-top: 2px; | |
| } | |
| .benefit-item p { | |
| font-size: 1.05rem; | |
| } | |
| .benefit-item p strong { | |
| color: var(--dark); | |
| } | |
| /* ============ SECTION 6: SOFT CTA ============ */ | |
| .soft-cta { | |
| padding: var(--space-xl) 0; | |
| background: var(--dark); | |
| color: var(--white); | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .soft-cta::before { | |
| content: ''; | |
| position: absolute; | |
| top: -100px; right: -100px; | |
| width: 400px; height: 400px; | |
| background: radial-gradient(circle, rgba(212,114,78,0.15) 0%, transparent 70%); | |
| border-radius: 50%; | |
| } | |
| .soft-cta::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -80px; left: -80px; | |
| width: 300px; height: 300px; | |
| background: radial-gradient(circle, rgba(42,157,143,0.12) 0%, transparent 70%); | |
| border-radius: 50%; | |
| } | |
| .soft-cta-inner { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .soft-cta h2 { color: var(--white); margin-bottom: var(--space-md); } | |
| .soft-cta p { | |
| color: rgba(255,255,255,0.65); | |
| margin: 0 auto var(--space-lg); | |
| font-size: 1rem; | |
| } | |
| /* Newsletter */ | |
| .newsletter-inline { | |
| margin-top: var(--space-lg); | |
| padding-top: var(--space-md); | |
| border-top: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .newsletter-inline .nl-label { | |
| font-size: 0.9rem; | |
| color: rgba(255,255,255,0.5); | |
| margin-bottom: var(--space-sm); | |
| } | |
| .newsletter-form { | |
| display: flex; | |
| gap: var(--space-xs); | |
| justify-content: center; | |
| } | |
| .newsletter-form input { | |
| padding: 10px 16px; | |
| border: 2px solid rgba(255,255,255,0.15); | |
| border-radius: 50px; | |
| font-family: var(--font-body); | |
| font-size: 0.95rem; | |
| outline: none; | |
| width: 260px; | |
| background: rgba(255,255,255,0.08); | |
| color: var(--white); | |
| transition: border-color 0.2s; | |
| } | |
| .newsletter-form input::placeholder { color: rgba(255,255,255,0.35); } | |
| .newsletter-form input:focus { border-color: var(--coral-light); } | |
| .newsletter-form button { | |
| padding: 10px 24px; | |
| background: var(--coral); | |
| color: var(--white); | |
| border: none; | |
| border-radius: 50px; | |
| font-family: var(--font-body); | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| } | |
| .newsletter-form button:hover { background: var(--coral-deep); } | |
| @media (max-width: 500px) { | |
| .newsletter-form { flex-direction: column; align-items: center; } | |
| .newsletter-form input { width: 100%; } | |
| } | |
| /* ============ FOOTER ============ */ | |
| .footer { | |
| background: var(--dark); | |
| color: rgba(255,255,255,0.5); | |
| padding: var(--space-lg) 0 var(--space-md); | |
| border-top: 1px solid rgba(255,255,255,0.06); | |
| } | |
| .footer-inner { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| flex-wrap: wrap; | |
| gap: var(--space-lg); | |
| } | |
| .footer-brand .nav-logo { margin-bottom: var(--space-xs); } | |
| .footer-brand p { font-size: 0.85rem; max-width: 28ch; } | |
| .footer-links { | |
| display: flex; | |
| gap: var(--space-xl); | |
| } | |
| .footer-links h4 { | |
| color: var(--white); | |
| font-family: var(--font-body); | |
| font-weight: 600; | |
| font-size: 0.82rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-bottom: var(--space-xs); | |
| } | |
| .footer-links ul li { margin-bottom: 6px; } | |
| .footer-links a { | |
| font-size: 0.85rem; | |
| transition: color 0.2s; | |
| } | |
| .footer-links a:hover { color: var(--white); } | |
| .footer-bottom { | |
| margin-top: var(--space-lg); | |
| padding-top: var(--space-sm); | |
| border-top: 1px solid rgba(255,255,255,0.06); | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.78rem; | |
| } | |
| @media (max-width: 600px) { | |
| .footer-inner { flex-direction: column; } | |
| .footer-links { gap: var(--space-lg); } | |
| } | |
| /* ============ ANIMATIONS ============ */ | |
| .fade-up { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: opacity 0.7s ease, transform 0.7s ease; | |
| } | |
| .fade-up.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .stagger > * { transition-delay: calc(var(--i, 0) * 0.12s); } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-12px); } | |
| } | |
| .float { animation: float 5s ease-in-out infinite; } | |
| /* Subtle grain */ | |
| body::after { | |
| content: ''; | |
| position: fixed; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| pointer-events: none; | |
| z-index: 9999; | |
| opacity: 0.025; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); | |
| background-repeat: repeat; | |
| background-size: 256px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ======== 0. NAVIGATION ======== --> | |
| <nav class="nav" id="nav"> | |
| <div class="nav-inner"> | |
| <a href="#" class="nav-logo">co<span>leaders</span></a> | |
| <div class="nav-links" id="navLinks"> | |
| <a href="#paths">Aloita tästä</a> | |
| <a href="#community">Yhteisö</a> | |
| <a href="#content">Sisällöt</a> | |
| <a href="#about">Tietoja</a> | |
| <span class="nav-lang">EN</span> | |
| <a href="#community" class="btn-teal">Tutustu yhteisöön</a> | |
| </div> | |
| <button class="nav-toggle" id="navToggle" aria-label="Menu"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round"> | |
| <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> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- ======== 1. HERO: TUNNISTAMINEN ======== --> | |
| <section class="hero" id="home"> | |
| <div class="container hero-inner"> | |
| <div class="hero-text fade-up"> | |
| <h1>Työelämä voi olla parempi.<br><em>Mutta se ei muutu yksin.</em></h1> | |
| <p class="subtitle">Moni johtaja haluaa jakaa vastuuta, keventää hierarkiaa ja tehdä työstä inhimillisempää — mutta jää helposti yksin kokeilujensa kanssa.</p> | |
| <p class="subtitle-small">Coleaders kokoaa yhteen ihmiset, jotka haluavat viedä muutosta eteenpäin käytännössä — kukin omasta lähtökohdastaan.</p> | |
| </div> | |
| <div class="hero-visual fade-up"> | |
| <svg class="hero-illustration float" viewBox="0 0 400 380" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- Person 1 --> | |
| <ellipse cx="140" cy="340" rx="90" ry="14" fill="#D4724E" opacity="0.1"/> | |
| <path d="M115 280 C115 240, 125 200, 140 180 C155 200, 165 240, 165 280 Z" fill="#2A9D8F" stroke="#1B7A6E" stroke-width="2" stroke-linecap="round"/> | |
| <circle cx="140" cy="160" r="30" fill="#FDEEE4" stroke="#D4724E" stroke-width="2.5"/> | |
| <path d="M128 155 Q140 170 152 155" stroke="#D4724E" stroke-width="2" fill="none" stroke-linecap="round"/> | |
| <circle cx="132" cy="152" r="2.5" fill="#2C2A35"/> | |
| <circle cx="148" cy="152" r="2.5" fill="#2C2A35"/> | |
| <path d="M122 140 Q140 128 158 140" stroke="#2C2A35" stroke-width="3" fill="none" stroke-linecap="round"/> | |
| <path d="M165 220 Q190 200 220 195" stroke="#FDEEE4" stroke-width="8" stroke-linecap="round"/> | |
| <circle cx="222" cy="195" r="6" fill="#FDEEE4" stroke="#D4724E" stroke-width="1.5"/> | |
| <path d="M130 280 L122 340" stroke="#2C2A35" stroke-width="4" stroke-linecap="round"/> | |
| <path d="M150 280 L158 340" stroke="#2C2A35" stroke-width="4" stroke-linecap="round"/> | |
| <!-- Person 2 --> | |
| <ellipse cx="270" cy="340" rx="90" ry="14" fill="#1B7A6E" opacity="0.1"/> | |
| <path d="M245 285 C245 245, 255 205, 270 185 C285 205, 295 245, 295 285 Z" fill="#D4724E" stroke="#C25A38" stroke-width="2" stroke-linecap="round"/> | |
| <circle cx="270" cy="165" r="30" fill="#FDEEE4" stroke="#D4724E" stroke-width="2.5"/> | |
| <path d="M258 160 Q270 175 282 160" stroke="#D4724E" stroke-width="2" fill="none" stroke-linecap="round"/> | |
| <circle cx="262" cy="157" r="2.5" fill="#2C2A35"/> | |
| <circle cx="278" cy="157" r="2.5" fill="#2C2A35"/> | |
| <path d="M255 148 Q270 136 285 148" stroke="#2C2A35" stroke-width="3" fill="none" stroke-linecap="round"/> | |
| <path d="M245 225 Q225 205 220 195" stroke="#FDEEE4" stroke-width="8" stroke-linecap="round"/> | |
| <path d="M260 285 L252 340" stroke="#2C2A35" stroke-width="4" stroke-linecap="round"/> | |
| <path d="M280 285 L288 340" stroke="#2C2A35" stroke-width="4" stroke-linecap="round"/> | |
| <!-- Spark --> | |
| <circle cx="221" cy="185" r="4" fill="#D4724E" opacity="0.6"/> | |
| <circle cx="215" cy="178" r="2.5" fill="#2A9D8F" opacity="0.5"/> | |
| <circle cx="228" cy="179" r="3" fill="#E8946F" opacity="0.5"/> | |
| <!-- Deco --> | |
| <path d="M60 120 Q70 100 80 120" stroke="#D4724E" stroke-width="2" fill="none" opacity="0.4" stroke-linecap="round"/> | |
| <path d="M320 100 L330 90 L340 100" stroke="#2A9D8F" stroke-width="2" fill="none" opacity="0.4" stroke-linecap="round"/> | |
| <circle cx="350" cy="140" r="5" fill="#D4724E" opacity="0.2"/> | |
| <circle cx="55" cy="200" r="4" fill="#2A9D8F" opacity="0.2"/> | |
| </svg> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ======== 2. MITÄ TÄÄLLÄ OIKEASTI TAPAHTUU ======== --> | |
| <section class="what-is"> | |
| <div class="container"> | |
| <div class="what-is-inner fade-up"> | |
| <h2>Mitä täällä oikeasti tapahtuu?</h2> | |
| <div class="what-is-points"> | |
| <div class="what-is-point"> | |
| <div class="bullet">🤝</div> | |
| <p><strong>Vertaisyhteisö</strong> ihmisille, jotka vievät johtamisen muutosta käytäntöön — eivät vain puhu siitä.</p> | |
| </div> | |
| <div class="what-is-point"> | |
| <div class="bullet">💬</div> | |
| <p><strong>Paikka jakaa</strong> kokemuksia, epäonnistumisia ja oivalluksia ilman pönötystä.</p> | |
| </div> | |
| <div class="what-is-point"> | |
| <div class="bullet">🧭</div> | |
| <p><strong>Tuki</strong>, joka auttaa ottamaan seuraavan pienen mutta merkityksellisen askeleen — et jää yksin kokeilujesi kanssa.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ======== 3. HAARUKOINTI: "MIKÄ SINUA TOI TÄNNE?" ======== --> | |
| <section class="paths" id="paths"> | |
| <div class="container"> | |
| <div class="paths-header fade-up"> | |
| <h2>Mikä sinua toi tänne?</h2> | |
| <p>Valitse se, mikä resonoi — ja löydä sinulle luontevin seuraava askel.</p> | |
| </div> | |
| <div class="paths-grid fade-up stagger"> | |
| <!-- Path 1: Yksinäisyys --> | |
| <div class="path-card" style="--i:0"> | |
| <div class="path-icon">🧭</div> | |
| <div class="feeling">"Koen olevani yksin muutoksen kanssa"</div> | |
| <div class="description">Haluat viedä johtamista ja toimintatapoja eteenpäin, mutta kaipaat vertaisia ja muiden kokemuksia tueksesi.</div> | |
| <a href="#community" class="path-link">Tutustu yhteisöön <span class="arrow">→</span></a> | |
| </div> | |
| <!-- Path 2: Sisällöt --> | |
| <div class="path-card" style="--i:1"> | |
| <div class="path-icon">💡</div> | |
| <div class="feeling">"Haluan ajateltavaa ja esimerkkejä"</div> | |
| <div class="description">Etsit näkökulmia, tutkimusta ja tarinoita siitä, miten työelämää uudistetaan käytännössä.</div> | |
| <a href="#content" class="path-link">Lue ja kuuntele <span class="arrow">→</span></a> | |
| </div> | |
| <!-- Path 3: Organisaatiotuki --> | |
| <div class="path-card" style="--i:2"> | |
| <div class="path-icon">🛠</div> | |
| <div class="feeling">"Tarvitsen tukea organisaatiolleni"</div> | |
| <div class="description">Etsit koulutusta, valmennusta tai sparria työyhteisön tai johtoryhmän kehittämiseen.</div> | |
| <a href="#about" class="path-link">Tutustu koulutuksiin ja palveluihin <span class="arrow">→</span></a> | |
| </div> | |
| <!-- Path 4: Ei vielä varma --> | |
| <div class="path-card" style="--i:3"> | |
| <div class="path-icon">🌱</div> | |
| <div class="feeling">"En ole vielä varma"</div> | |
| <div class="description">Jokin tässä herättää uteliaisuutesi, mutta haluat ensin ymmärtää mistä on kyse.</div> | |
| <a href="#subscribe" class="path-link">Tilaa opas tai liity postituslistalle <span class="arrow">→</span></a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ======== 4. SOSIAALINEN TODISTE ======== --> | |
| <section class="proof" id="community"> | |
| <div class="container"> | |
| <div class="proof-inner fade-up"> | |
| <p>Coleaders on yhteisö, jossa eri taustoista tulevat ihmiset oppivat toisiltaan ja vievät muutosta eteenpäin omissa organisaatioissaan. Sisällöt, koulutukset ja palvelut syntyvät yhteisön kokemuksesta.</p> | |
| <div class="proof-quote"> | |
| <p>Tajusin, etten ole ainoa, joka kamppailee näiden kysymysten kanssa. Täällä saa jakaa keskeneräisiäkin ajatuksia ilman, että pitää esittää valmiimpaa kuin on.</p> | |
| <div class="author"> | |
| <div class="avatar">SK</div> | |
| <div> | |
| <div class="name">Sami-Pekka Kalliokoski</div> | |
| <div class="role">Kouvolan kaupunki</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="proof-people"> | |
| <div class="proof-person"> | |
| <div class="circle">MM</div> | |
| <div class="p-name">Mikko Malila</div> | |
| <div class="p-org">Vantti Oy</div> | |
| </div> | |
| <div class="proof-person"> | |
| <div class="circle">LN</div> | |
| <div class="p-name">Laura Norris</div> | |
| <div class="p-org">Helsinki</div> | |
| </div> | |
| <div class="proof-person"> | |
| <div class="circle">VK</div> | |
| <div class="p-name">Veera Kinnunen</div> | |
| <div class="p-org">Bängeri</div> | |
| </div> | |
| <div class="proof-person"> | |
| <div class="circle">JK</div> | |
| <div class="p-name">Jussi Korhonen</div> | |
| <div class="p-org">Taitopilvi</div> | |
| </div> | |
| <div class="proof-person"> | |
| <div class="circle">JB</div> | |
| <div class="p-name">Juha Borenius</div> | |
| <div class="p-org">Thinger</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ======== 5. MITÄ MINÄ SAAN TÄSTÄ ======== --> | |
| <section class="benefits"> | |
| <div class="container"> | |
| <div class="benefits-inner fade-up"> | |
| <h2>Mitä jäsenenä saat?</h2> | |
| <div class="benefit-list"> | |
| <div class="benefit-item"> | |
| <div class="check">✓</div> | |
| <p><strong>Vertaisia</strong>, joiden kanssa voit peilata omaa tilannettasi — rehellisesti ja luottamuksellisesti.</p> | |
| </div> | |
| <div class="benefit-item"> | |
| <div class="check">✓</div> | |
| <p><strong>Konkreettisia esimerkkejä</strong> siitä, mitä muut ovat kokeilleet ja miten se on toiminut.</p> | |
| </div> | |
| <div class="benefit-item"> | |
| <div class="check">✓</div> | |
| <p><strong>Selkeyden siihen, mitä seuraavaksi kokeilla</strong> omassa organisaatiossasi — ilman painetta tietää kaikki valmiiksi.</p> | |
| </div> | |
| <div class="benefit-item"> | |
| <div class="check">✓</div> | |
| <p><strong>Tukea silloin, kun muutos tuntuu hitaalta</strong> tai yksinäiseltä — et jää yksin kokeilujesi kanssa.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ======== 6. PEHMEÄ CTA + UUTISKIRJE ======== --> | |
| <section class="soft-cta" id="subscribe"> | |
| <div class="container"> | |
| <div class="soft-cta-inner fade-up"> | |
| <h2>Jos koet, että et halua tehdä muutosta yksin — yhteisö on hyvä paikka aloittaa.</h2> | |
| <p>Et sitoudu mihinkään. Saat rauhassa katsoa, onko tämä sinua varten.</p> | |
| <a href="#community" class="btn-cta">Tutustu yhteisöön →</a> | |
| <div class="newsletter-inline"> | |
| <p class="nl-label">Tai aloita kevyesti — tilaa opas ja uutiskirje:</p> | |
| <form class="newsletter-form" onsubmit="event.preventDefault(); this.querySelector('button').textContent='Kiitos! ✓'"> | |
| <input type="email" placeholder="Sähköpostiosoitteesi" required> | |
| <button type="submit">Tilaa</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ======== FOOTER ======== --> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <div class="footer-inner"> | |
| <div class="footer-brand"> | |
| <div class="nav-logo">co<span>leaders</span></div> | |
| <p>Muutos tapahtuu työpaikka kerrallaan.</p> | |
| </div> | |
| <div class="footer-links"> | |
| <div> | |
| <h4>Tutustu</h4> | |
| <ul> | |
| <li><a href="#community">Yhteisö</a></li> | |
| <li><a href="#content">Sisällöt</a></li> | |
| <li><a href="#about">Koulutukset</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4>Tietoja</h4> | |
| <ul> | |
| <li><a href="#about">Ota yhteyttä</a></li> | |
| <li><a href="#">Medialle</a></li> | |
| <li><a href="#">Yritys</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <span>© 2026 Coleadership Community Oy — yhteiskunnallinen yritys</span> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- ======== JS ======== --> | |
| <script> | |
| // Nav scroll | |
| const nav = document.getElementById('nav'); | |
| window.addEventListener('scroll', () => { | |
| nav.classList.toggle('scrolled', window.scrollY > 20); | |
| }); | |
| // Mobile menu | |
| const navToggle = document.getElementById('navToggle'); | |
| const navLinks = document.getElementById('navLinks'); | |
| navToggle.addEventListener('click', () => navLinks.classList.toggle('open')); | |
| navLinks.querySelectorAll('a').forEach(a => { | |
| a.addEventListener('click', () => navLinks.classList.remove('open')); | |
| }); | |
| // Scroll reveal | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) entry.target.classList.add('visible'); | |
| }); | |
| }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' }); | |
| document.querySelectorAll('.fade-up').forEach(el => observer.observe(el)); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment