Created
February 10, 2026 13:15
-
-
Save akaihola/f51d2afc36db0006f75fe77df7ae28c7 to your computer and use it in GitHub Desktop.
Coleaders website 2026 — MVP mockup
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 radikaalisti 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: 1200px; | |
| --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.6rem); } | |
| 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; } | |
| /* ============ HAND-DRAWN UNDERLINE / DECO ============ */ | |
| .accent-underline { | |
| position: relative; | |
| display: inline; | |
| } | |
| .accent-underline::after { | |
| content: ''; | |
| position: absolute; | |
| left: -4%; | |
| bottom: -6px; | |
| width: 108%; | |
| height: 12px; | |
| background: var(--coral-light); | |
| opacity: 0.4; | |
| border-radius: 50%; | |
| transform: rotate(-1deg); | |
| z-index: -1; | |
| } | |
| /* ============ 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-secondary { | |
| composes: btn-cta; | |
| padding: 10px 24px; | |
| background: var(--teal); | |
| } | |
| .btn-secondary:hover { background: var(--teal-light); box-shadow: 0 4px 16px rgba(27,122,110,0.3); } | |
| /* 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 SECTION ============ */ | |
| .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: italic; | |
| color: var(--coral-deep); | |
| } | |
| .hero-text .subtitle { | |
| font-size: 1.2rem; | |
| color: var(--text-light); | |
| margin-bottom: var(--space-lg); | |
| max-width: 50ch; | |
| } | |
| .hero-ctas { display: flex; gap: var(--space-sm); flex-wrap: wrap; } | |
| .hero-visual { | |
| position: relative; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .hero-illustration { | |
| width: 100%; | |
| max-width: 420px; | |
| } | |
| /* SVG hand-drawn illustration */ | |
| .illo-people { filter: drop-shadow(0 8px 24px rgba(0,0,0,0.08)); } | |
| @media (max-width: 768px) { | |
| .hero-inner { grid-template-columns: 1fr; text-align: center; } | |
| .hero-text .subtitle { margin-left: auto; margin-right: auto; } | |
| .hero-ctas { justify-content: center; } | |
| .hero-visual { order: -1; } | |
| .hero-illustration { max-width: 280px; } | |
| } | |
| /* ============ VISION SECTION ============ */ | |
| .vision { | |
| padding: var(--space-2xl) 0; | |
| background: var(--cream); | |
| position: relative; | |
| } | |
| .vision-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-xl); | |
| align-items: center; | |
| } | |
| .vision-text h2 { margin-bottom: var(--space-md); } | |
| .vision-text p { color: var(--text-light); margin-bottom: var(--space-sm); font-size: 1.05rem; } | |
| .vision-text blockquote { | |
| margin-top: var(--space-md); | |
| padding-left: var(--space-md); | |
| border-left: 4px solid var(--coral); | |
| font-family: var(--font-display); | |
| font-style: italic; | |
| font-size: 1.15rem; | |
| color: var(--dark); | |
| } | |
| .vision-cards { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-sm); | |
| } | |
| .vision-card { | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-md); | |
| border: 1px solid rgba(0,0,0,0.05); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .vision-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.06); } | |
| .vision-card .icon { | |
| width: 48px; height: 48px; | |
| background: var(--coral-bg); | |
| border-radius: 12px; | |
| display: flex; align-items: center; justify-content: center; | |
| margin-bottom: var(--space-sm); | |
| font-size: 1.5rem; | |
| } | |
| .vision-card:nth-child(even) .icon { background: var(--teal-bg); } | |
| .vision-card h4 { margin-bottom: 6px; } | |
| .vision-card p { font-size: 0.9rem; color: var(--text-light); } | |
| @media (max-width: 768px) { | |
| .vision-grid { grid-template-columns: 1fr; } | |
| .vision-cards { grid-template-columns: 1fr 1fr; } | |
| } | |
| /* ============ COMMUNITY / JÄSENYHTEISÖ ============ */ | |
| .community { | |
| padding: var(--space-2xl) 0; | |
| background: var(--teal-bg); | |
| position: relative; | |
| } | |
| .community::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)); | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: var(--space-xl); | |
| } | |
| .section-header h2 { margin-bottom: var(--space-sm); } | |
| .section-header p { color: var(--text-light); font-size: 1.1rem; max-width: 55ch; margin: 0 auto; } | |
| .section-tag { | |
| display: inline-block; | |
| font-family: var(--font-body); | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| letter-spacing: 1.5px; | |
| text-transform: uppercase; | |
| color: var(--teal); | |
| margin-bottom: var(--space-xs); | |
| } | |
| .community-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-lg); | |
| } | |
| .community-left p { | |
| font-size: 1.05rem; | |
| color: var(--text-light); | |
| margin-bottom: var(--space-md); | |
| } | |
| .stat-row { | |
| display: flex; | |
| gap: var(--space-md); | |
| margin: var(--space-lg) 0; | |
| } | |
| .stat { | |
| text-align: center; | |
| } | |
| .stat .number { | |
| font-family: var(--font-display); | |
| font-size: 2.4rem; | |
| font-weight: 700; | |
| color: var(--teal); | |
| line-height: 1; | |
| } | |
| .stat .label { | |
| font-size: 0.85rem; | |
| color: var(--text-light); | |
| margin-top: 4px; | |
| } | |
| /* Testimonials */ | |
| .testimonial-card { | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-md) 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); | |
| } | |
| .testimonial-card::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; | |
| } | |
| .testimonial-card p { | |
| font-style: italic; | |
| font-size: 1.05rem; | |
| margin-bottom: var(--space-sm); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .testimonial-author { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| } | |
| .testimonial-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; | |
| } | |
| .testimonial-name { font-weight: 600; font-size: 0.95rem; } | |
| .testimonial-role { font-size: 0.85rem; color: var(--text-light); } | |
| /* Member circles */ | |
| .member-circles { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--space-sm); | |
| margin-top: var(--space-lg); | |
| justify-content: center; | |
| } | |
| .member-circle { | |
| width: 64px; height: 64px; | |
| 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.9rem; | |
| color: var(--white); | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| transition: transform 0.3s; | |
| cursor: default; | |
| } | |
| .member-circle:hover { transform: scale(1.15); } | |
| .member-circle:nth-child(6n+1) { background: var(--coral); } | |
| .member-circle:nth-child(6n+2) { background: var(--teal); } | |
| .member-circle:nth-child(6n+3) { background: var(--coral-deep); } | |
| .member-circle:nth-child(6n+4) { background: var(--teal-light); } | |
| .member-circle:nth-child(6n+5) { background: var(--dark-mid); } | |
| .member-circle:nth-child(6n+6) { background: var(--coral-light); } | |
| @media (max-width: 768px) { | |
| .community-content { grid-template-columns: 1fr; } | |
| .stat-row { justify-content: center; } | |
| } | |
| /* ============ ACADEMY / AKATEMIA ============ */ | |
| .academy { | |
| padding: var(--space-2xl) 0; | |
| background: var(--cream); | |
| } | |
| .academy-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: var(--space-md); | |
| margin-bottom: var(--space-lg); | |
| } | |
| .academy-card { | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-lg) var(--space-md); | |
| text-align: center; | |
| border: 1px solid rgba(0,0,0,0.05); | |
| transition: all 0.3s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .academy-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 4px; | |
| background: var(--coral); | |
| transform: scaleX(0); | |
| transition: transform 0.3s; | |
| } | |
| .academy-card:nth-child(2)::before { background: var(--teal); } | |
| .academy-card:nth-child(3)::before { background: var(--dark); } | |
| .academy-card:hover::before { transform: scaleX(1); } | |
| .academy-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); } | |
| .academy-icon { | |
| width: 72px; height: 72px; | |
| margin: 0 auto var(--space-md); | |
| border-radius: 50%; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 2rem; | |
| } | |
| .academy-card:nth-child(1) .academy-icon { background: var(--coral-bg); } | |
| .academy-card:nth-child(2) .academy-icon { background: var(--teal-bg); } | |
| .academy-card:nth-child(3) .academy-icon { background: var(--cream-dark); } | |
| .academy-card h3 { margin-bottom: var(--space-xs); } | |
| .academy-card p { font-size: 0.95rem; color: var(--text-light); margin: 0 auto; } | |
| .academy-card ul { | |
| text-align: left; | |
| margin-top: var(--space-sm); | |
| padding-left: var(--space-sm); | |
| } | |
| .academy-card li { | |
| font-size: 0.9rem; | |
| color: var(--text-light); | |
| padding: 4px 0; | |
| position: relative; | |
| padding-left: 16px; | |
| } | |
| .academy-card li::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; top: 12px; | |
| width: 6px; height: 6px; | |
| border-radius: 50%; | |
| background: var(--coral-light); | |
| } | |
| .academy-card:nth-child(2) li::before { background: var(--teal-light); } | |
| /* Coaches row */ | |
| .coaches { | |
| margin-top: var(--space-lg); | |
| } | |
| .coaches h3 { | |
| text-align: center; | |
| margin-bottom: var(--space-md); | |
| } | |
| .coaches-row { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--space-md); | |
| flex-wrap: wrap; | |
| } | |
| .coach { | |
| text-align: center; | |
| width: 120px; | |
| } | |
| .coach-avatar { | |
| width: 80px; height: 80px; | |
| border-radius: 50%; | |
| margin: 0 auto var(--space-xs); | |
| display: flex; align-items: center; justify-content: center; | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| font-size: 1.2rem; | |
| color: var(--white); | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| } | |
| .coach-name { font-weight: 600; font-size: 0.85rem; } | |
| .coach-title { font-size: 0.78rem; color: var(--text-light); } | |
| @media (max-width: 768px) { | |
| .academy-grid { grid-template-columns: 1fr; } | |
| } | |
| /* ============ CONTENT / SISÄLLÖT ============ */ | |
| .content-section { | |
| padding: var(--space-2xl) 0; | |
| background: var(--coral-bg); | |
| } | |
| .content-tabs { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--space-xs); | |
| margin-bottom: var(--space-lg); | |
| flex-wrap: wrap; | |
| } | |
| .content-tab { | |
| padding: 8px 20px; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| background: transparent; | |
| border: 2px solid rgba(0,0,0,0.1); | |
| color: var(--text); | |
| transition: all 0.2s; | |
| font-family: var(--font-body); | |
| } | |
| .content-tab:hover, .content-tab.active { | |
| background: var(--coral); | |
| color: var(--white); | |
| border-color: var(--coral); | |
| } | |
| .content-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: var(--space-md); | |
| } | |
| .content-card { | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| transition: all 0.3s; | |
| border: 1px solid rgba(0,0,0,0.04); | |
| } | |
| .content-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); } | |
| .content-card-img { | |
| height: 180px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 3rem; | |
| position: relative; | |
| } | |
| .content-card:nth-child(1) .content-card-img { background: linear-gradient(135deg, var(--teal-bg), var(--teal-light)); color: var(--white); } | |
| .content-card:nth-child(2) .content-card-img { background: linear-gradient(135deg, var(--coral-bg), var(--coral)); color: var(--white); } | |
| .content-card:nth-child(3) .content-card-img { background: linear-gradient(135deg, var(--cream-dark), var(--dark-mid)); color: var(--white); } | |
| .content-card:nth-child(4) .content-card-img { background: linear-gradient(135deg, var(--teal-light), var(--teal)); color: var(--white); } | |
| .content-card-type { | |
| position: absolute; | |
| top: 12px; left: 12px; | |
| background: rgba(255,255,255,0.9); | |
| padding: 4px 12px; | |
| border-radius: 50px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .content-card-body { padding: var(--space-md); } | |
| .content-card-body h4 { margin-bottom: 6px; } | |
| .content-card-body p { font-size: 0.9rem; color: var(--text-light); } | |
| .content-card-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-top: var(--space-sm); | |
| padding-top: var(--space-sm); | |
| border-top: 1px solid rgba(0,0,0,0.06); | |
| font-size: 0.82rem; | |
| color: var(--text-light); | |
| } | |
| .newsletter-bar { | |
| margin-top: var(--space-lg); | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-lg); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-lg); | |
| border: 1px solid rgba(0,0,0,0.04); | |
| } | |
| .newsletter-bar h3 { white-space: nowrap; } | |
| .newsletter-bar p { font-size: 0.95rem; color: var(--text-light); flex: 1; } | |
| .newsletter-form { | |
| display: flex; | |
| gap: var(--space-xs); | |
| flex-shrink: 0; | |
| } | |
| .newsletter-form input { | |
| padding: 10px 16px; | |
| border: 2px solid rgba(0,0,0,0.1); | |
| border-radius: 50px; | |
| font-family: var(--font-body); | |
| font-size: 0.95rem; | |
| outline: none; | |
| width: 240px; | |
| transition: border-color 0.2s; | |
| } | |
| .newsletter-form input:focus { border-color: var(--coral); } | |
| .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: 768px) { | |
| .newsletter-bar { flex-direction: column; text-align: center; } | |
| .newsletter-form { flex-direction: column; width: 100%; } | |
| .newsletter-form input { width: 100%; } | |
| } | |
| /* ============ ABOUT / TIETOJA ============ */ | |
| .about { | |
| padding: var(--space-2xl) 0; | |
| background: var(--cream); | |
| } | |
| .about-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-xl); | |
| } | |
| .about-contact h3 { margin-bottom: var(--space-md); } | |
| .contact-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-sm); | |
| } | |
| .contact-form input, | |
| .contact-form textarea { | |
| padding: 12px 16px; | |
| border: 2px solid rgba(0,0,0,0.08); | |
| border-radius: var(--radius); | |
| font-family: var(--font-body); | |
| font-size: 0.95rem; | |
| background: var(--white); | |
| outline: none; | |
| transition: border-color 0.2s; | |
| } | |
| .contact-form input:focus, | |
| .contact-form textarea:focus { border-color: var(--teal); } | |
| .contact-form textarea { resize: vertical; min-height: 100px; } | |
| .about-info h3 { margin-bottom: var(--space-md); } | |
| .ecosystem-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-sm); | |
| margin-bottom: var(--space-lg); | |
| } | |
| .eco-tag { | |
| padding: 10px 16px; | |
| background: var(--white); | |
| border-radius: var(--radius); | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| border: 1px solid rgba(0,0,0,0.06); | |
| text-align: center; | |
| transition: all 0.2s; | |
| } | |
| .eco-tag:hover { background: var(--teal-bg); border-color: var(--teal-light); } | |
| .company-info { | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-md); | |
| border: 1px solid rgba(0,0,0,0.05); | |
| } | |
| .company-info h4 { margin-bottom: var(--space-xs); color: var(--teal); } | |
| .company-info p { font-size: 0.9rem; color: var(--text-light); } | |
| .media-links { | |
| margin-top: var(--space-md); | |
| display: flex; | |
| gap: var(--space-sm); | |
| flex-wrap: wrap; | |
| } | |
| .media-link { | |
| padding: 8px 16px; | |
| border: 1px solid var(--teal); | |
| border-radius: 50px; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| color: var(--teal); | |
| transition: all 0.2s; | |
| } | |
| .media-link:hover { background: var(--teal); color: var(--white); } | |
| @media (max-width: 768px) { | |
| .about-grid { grid-template-columns: 1fr; } | |
| } | |
| /* ============ CTA BANNER ============ */ | |
| .cta-banner { | |
| background: var(--dark); | |
| color: var(--white); | |
| padding: var(--space-xl) 0; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cta-banner::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%; | |
| } | |
| .cta-banner::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%; | |
| } | |
| .cta-banner h2 { color: var(--white); margin-bottom: var(--space-sm); position: relative; z-index: 1; } | |
| .cta-banner p { color: rgba(255,255,255,0.7); margin: 0 auto var(--space-lg); position: relative; z-index: 1; } | |
| .cta-banner .cta-buttons { display: flex; justify-content: center; gap: var(--space-sm); flex-wrap: wrap; position: relative; z-index: 1; } | |
| /* ============ FOOTER ============ */ | |
| .footer { | |
| background: var(--dark); | |
| color: rgba(255,255,255,0.6); | |
| padding: var(--space-lg) 0 var(--space-md); | |
| border-top: 1px solid rgba(255,255,255,0.06); | |
| } | |
| .footer-inner { | |
| display: grid; | |
| grid-template-columns: 1.5fr 1fr 1fr 1fr; | |
| gap: var(--space-lg); | |
| } | |
| .footer-brand .nav-logo { margin-bottom: var(--space-sm); } | |
| .footer-brand p { font-size: 0.9rem; max-width: 30ch; } | |
| .footer h4 { | |
| color: var(--white); | |
| font-family: var(--font-body); | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-bottom: var(--space-sm); | |
| } | |
| .footer ul li { margin-bottom: 8px; } | |
| .footer a { | |
| font-size: 0.9rem; | |
| transition: color 0.2s; | |
| } | |
| .footer 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.08); | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.82rem; | |
| } | |
| @media (max-width: 768px) { | |
| .footer-inner { grid-template-columns: 1fr 1fr; } | |
| } | |
| /* ============ 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 children */ | |
| .stagger > * { transition-delay: calc(var(--i, 0) * 0.1s); } | |
| /* Floating animation for hero illustration */ | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-12px); } | |
| } | |
| .float { animation: float 5s ease-in-out infinite; } | |
| /* Subtle grain overlay */ | |
| 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> | |
| <!-- ============ 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="#community">Jäsenyhteisö</a> | |
| <a href="#academy">Akatemia</a> | |
| <a href="#content">Sisällöt</a> | |
| <a href="#about">Tietoja</a> | |
| <span class="nav-lang">🇬🇧 EN</span> | |
| <a href="#join" class="btn-cta">Hae mukaan</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> | |
| <!-- ============ HERO ============ --> | |
| <section class="hero" id="home"> | |
| <div class="container hero-inner"> | |
| <div class="hero-text fade-up"> | |
| <h1>Työelämä voi olla <em>radikaalisti</em> parempi.<br>Muutos on jo käynnissä.</h1> | |
| <p class="subtitle">Coleaders on yhteisö uteliaille johtajille, jotka muuttavat työelämää — työpaikka kerrallaan. Lempeitä töytäisyjä kohti radikaalia muutosta.</p> | |
| <div class="hero-ctas"> | |
| <a href="#join" class="btn-cta">Hae jäseneksi →</a> | |
| <a href="#vision" class="btn-cta btn-secondary">Tutustu visioon</a> | |
| </div> | |
| </div> | |
| <div class="hero-visual fade-up"> | |
| <svg class="hero-illustration float illo-people" viewBox="0 0 400 380" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- Hand-drawn style illustration: two people collaborating --> | |
| <!-- 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"/> | |
| <!-- Arm reaching out --> | |
| <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"/> | |
| <!-- Person 1 legs --> | |
| <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"/> | |
| <!-- Arm reaching out --> | |
| <path d="M245 225 Q225 205 220 195" stroke="#FDEEE4" stroke-width="8" stroke-linecap="round"/> | |
| <!-- Person 2 legs --> | |
| <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"/> | |
| <!-- Connection 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"/> | |
| <!-- Decorative elements --> | |
| <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"/> | |
| <path d="M80 300 Q90 290 100 300" stroke="#D4724E" stroke-width="1.5" fill="none" opacity="0.3" stroke-linecap="round"/> | |
| <path d="M310 280 Q320 270 330 280" stroke="#2A9D8F" stroke-width="1.5" fill="none" opacity="0.3" stroke-linecap="round"/> | |
| </svg> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ============ TYÖELÄMÄVISIO ============ --> | |
| <section class="vision" id="vision"> | |
| <div class="container"> | |
| <div class="vision-grid"> | |
| <div class="vision-text fade-up"> | |
| <span class="section-tag">Työelämävisio</span> | |
| <h2>Suunnan muutos — <span class="accent-underline">työpaikka kerrallaan</span></h2> | |
| <p>Nykyistä tapaa tehdä töitä ei tarvitse ottaa annettuna. Vakiintuneiden toimintatapojen muuttaminen vaatii sinnikkyyttä ja pieniä, päättäväisiä tekoja — ei yhtä nerosta ratkaisua.</p> | |
| <p>Uudenlaisia toimintatapoja kokeillaan jo monessa organisaatiossa. Systeeminen muutos syntyy työpaikkojen kautta, kun yhä useampi johtaja uskaltaa kyseenalaistaa totutut tavat.</p> | |
| <blockquote>Lempeitä töytäisyjä kohti radikaalia muutosta — ajattelun vallankumous, toimintatapoja unohtamatta.</blockquote> | |
| </div> | |
| <div class="vision-cards fade-up stagger"> | |
| <div class="vision-card" style="--i:0"> | |
| <div class="icon">🔄</div> | |
| <h4>Hajautettu johtaminen</h4> | |
| <p>Johtaminen ei ole yhden ihmisen varassa — se on jaettua ja yhteisöllistä.</p> | |
| </div> | |
| <div class="vision-card" style="--i:1"> | |
| <div class="icon">🌱</div> | |
| <h4>Mikromuutokset</h4> | |
| <p>Pienet tai isommat teot päättäväisesti, koska uskoo suunnan olevan oikea.</p> | |
| </div> | |
| <div class="vision-card" style="--i:2"> | |
| <div class="icon">🤝</div> | |
| <h4>Yhdessä eteenpäin</h4> | |
| <p>Ei ole vain yhtä ratkaisua — vaan monta yhdessä löydettyä tietä.</p> | |
| </div> | |
| <div class="vision-card" style="--i:3"> | |
| <div class="icon">🔬</div> | |
| <h4>Tutkimuspohja</h4> | |
| <p>Akateeminen tutkimus ja omat katsaukset tukevat toimintaamme.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ============ JÄSENYHTEISÖ ============ --> | |
| <section class="community" id="community"> | |
| <div class="container"> | |
| <div class="section-header fade-up"> | |
| <span class="section-tag">Jäsenyhteisö</span> | |
| <h2>Yhteisö uteliaille johtajille</h2> | |
| <p>Rahoittajia, työpaikkoja, yrityksiä, julkishallintoa, tutkijoita, opiskelijoita ja yhteiskuntavaikuttajia — kaikki samassa ekosysteemissä.</p> | |
| </div> | |
| <div class="community-content"> | |
| <div class="community-left fade-up"> | |
| <p>Coleaders kokoaa yhteen johtajia, jotka haluavat tehdä yhdessä parempaa työelämää. Täällä on vertaisia ja auttajia, ei elitististä pönötystä — ja moni on sanonut, että tänne on helppo tulla.</p> | |
| <div class="stat-row"> | |
| <div class="stat"> | |
| <div class="number">150+</div> | |
| <div class="label">Jäsentä</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="number">80+</div> | |
| <div class="label">Organisaatiota</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="number">50+</div> | |
| <div class="label">Tapahtumaa/v</div> | |
| </div> | |
| </div> | |
| <p>Täällä on jotain uutta, jota et vielä tiedä tai osaa. Avoimia ja läpinäkyviä — ei eksklusiivinen salakerho.</p> | |
| <a href="#join" class="btn-cta" style="margin-top:var(--space-md)">Hae jäseneksi →</a> | |
| </div> | |
| <div class="community-right fade-up"> | |
| <div class="testimonial-card" style="margin-bottom:var(--space-md)"> | |
| <p>Yhteisö, jossa on johtajia, jotka haluavat tehdä yhdessä parempaa. Porukka koittaa ottaa selvää miten tämä onnistuisi.</p> | |
| <div class="testimonial-author"> | |
| <div class="testimonial-avatar">JT</div> | |
| <div> | |
| <div class="testimonial-name">Jukka Tuominen</div> | |
| <div class="testimonial-role">OP</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card"> | |
| <p>Tunnistin oman johtamiseni ja organisaationi tästä ajattelusta. Kun te kasvatte, miten tämä tulee säilymään — ei voi olla johtajan varassa.</p> | |
| <div class="testimonial-author"> | |
| <div class="testimonial-avatar">TF</div> | |
| <div> | |
| <div class="testimonial-name">Tomas Forsbäck</div> | |
| <div class="testimonial-role">Readpeak</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Member circles --> | |
| <div class="member-circles fade-up"> | |
| <div class="member-circle" title="Jukka Tuominen / OP">JT</div> | |
| <div class="member-circle" title="Mikko Malila / Vantti">MM</div> | |
| <div class="member-circle" title="Laura Norris / Helsinki">LN</div> | |
| <div class="member-circle" title="Veera Kinnunen / Bängeri">VK</div> | |
| <div class="member-circle" title="Katri Hyrsky / Konepajan lukio">KH</div> | |
| <div class="member-circle" title="Juho Makkonen / Sharetribe">JM</div> | |
| <div class="member-circle" title="Tomas Forsbäck / Readpeak">TF</div> | |
| <div class="member-circle" title="Mikko Aro / Demos">MA</div> | |
| <div class="member-circle" title="S-P Kalliokoski / Kouvola">SK</div> | |
| <div class="member-circle" title="Juha Borenius / Thinger">JB</div> | |
| <div class="member-circle" title="Jussi Korhonen / Taitopilvi">JK</div> | |
| <div class="member-circle" title="Mikael Lönnroth / Morgon">ML</div> | |
| <div class="member-circle" title="Karoliina Luoto / Withmore">KL</div> | |
| <div class="member-circle" title="Anna Sorko / Bondauttaja">AS</div> | |
| <div class="member-circle" title="Jori Mäkkeli / Aalto">JM</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ============ AKATEMIA ============ --> | |
| <section class="academy" id="academy"> | |
| <div class="container"> | |
| <div class="section-header fade-up"> | |
| <span class="section-tag">Akatemia</span> | |
| <h2>Monta tapaa oppia ja kehittyä</h2> | |
| <p>Taustasta huolimatta kaikille jotain — tutkijat, kokeneet syväosaajat ja vertaisoppiminen yhteisössä.</p> | |
| </div> | |
| <div class="academy-grid fade-up stagger"> | |
| <div class="academy-card" style="--i:0"> | |
| <div class="academy-icon">🎓</div> | |
| <h3>Avoimet koulutukset</h3> | |
| <p>Koulutuksia ja valmennuksia yhteisjohtajuudesta ja uusista toimintatavoista.</p> | |
| <ul> | |
| <li>Coleadership Discovery</li> | |
| <li>Coleadership Summit</li> | |
| <li>Coleadership Business</li> | |
| <li>Maailmanparantajat-ohjelma</li> | |
| </ul> | |
| </div> | |
| <div class="academy-card" style="--i:1"> | |
| <div class="academy-icon">🏢</div> | |
| <h3>Räätälöidyt valmennukset</h3> | |
| <p>Organisaatiokohtaista konsultointia ja valmennusta muutoksen tueksi.</p> | |
| <ul> | |
| <li>Yrityskohtainen konsultointi</li> | |
| <li>Johtoryhmävalmennus</li> | |
| <li>Muutosohjelmat</li> | |
| <li>Sparraus ja tuki</li> | |
| </ul> | |
| </div> | |
| <div class="academy-card" style="--i:2"> | |
| <div class="academy-icon">📚</div> | |
| <h3>Omatoimiopiskelu</h3> | |
| <p>Verkkokursseja, kirjoja ja sisältöjä omaan tahtiin oppimiseen.</p> | |
| <ul> | |
| <li>Verkkokurssit</li> | |
| <li>Opas yhteisjohtajuuteen</li> | |
| <li>Kirjoja ja tutkimuksia</li> | |
| <li>Linkkikokoelma</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="coaches fade-up"> | |
| <h3>Valmentajat ja vertaismentorit</h3> | |
| <div class="coaches-row"> | |
| <div class="coach"> | |
| <div class="coach-avatar" style="background:var(--teal)">V1</div> | |
| <div class="coach-name">Valmentaja</div> | |
| <div class="coach-title">Coleadership Coach</div> | |
| </div> | |
| <div class="coach"> | |
| <div class="coach-avatar" style="background:var(--coral)">V2</div> | |
| <div class="coach-name">Valmentaja</div> | |
| <div class="coach-title">Coleadership Coach</div> | |
| </div> | |
| <div class="coach"> | |
| <div class="coach-avatar" style="background:var(--teal-light)">V3</div> | |
| <div class="coach-name">Valmentaja</div> | |
| <div class="coach-title">Vertaismentori</div> | |
| </div> | |
| <div class="coach"> | |
| <div class="coach-avatar" style="background:var(--coral-deep)">V4</div> | |
| <div class="coach-name">Valmentaja</div> | |
| <div class="coach-title">Vertaismentori</div> | |
| </div> | |
| <div class="coach"> | |
| <div class="coach-avatar" style="background:var(--dark-mid)">V5</div> | |
| <div class="coach-name">Valmentaja</div> | |
| <div class="coach-title">Coleadership Coach</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ============ SISÄLLÖT ============ --> | |
| <section class="content-section" id="content"> | |
| <div class="container"> | |
| <div class="section-header fade-up"> | |
| <span class="section-tag">Sisällöt</span> | |
| <h2>Näkemyksiä ja inspiraatiota</h2> | |
| <p>Poimintoja parhaista sisällöistä — tapahtumista, podcasteista, blogeista ja videoista.</p> | |
| </div> | |
| <div class="content-tabs fade-up"> | |
| <button class="content-tab active" data-filter="all">Kaikki</button> | |
| <button class="content-tab" data-filter="event">Tapahtumat</button> | |
| <button class="content-tab" data-filter="podcast">Podcastit</button> | |
| <button class="content-tab" data-filter="blog">Blogi</button> | |
| <button class="content-tab" data-filter="video">Videot</button> | |
| </div> | |
| <div class="content-grid fade-up stagger"> | |
| <div class="content-card" data-type="event" style="--i:0"> | |
| <div class="content-card-img"> | |
| <span class="content-card-type">Tapahtuma</span> | |
| 🎤 | |
| </div> | |
| <div class="content-card-body"> | |
| <h4>Coleadership Summit 2026</h4> | |
| <p>Vuoden suurin yhteisjohtajuustapahtuma. Puhujia, työpajoja ja verkostoitumista.</p> | |
| <div class="content-card-meta"> | |
| <span>📅 Tulossa pian</span> | |
| <a href="#" style="color:var(--coral);font-weight:600">Ilmoittaudu →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="content-card" data-type="podcast" style="--i:1"> | |
| <div class="content-card-img"> | |
| <span class="content-card-type">Podcast</span> | |
| 🎧 | |
| </div> | |
| <div class="content-card-body"> | |
| <h4>Voices of Coleaders</h4> | |
| <p>Jäsentemme tarinoita ja oivalluksia johtajuuden muutoksesta arjessa.</p> | |
| <div class="content-card-meta"> | |
| <span>🎙 Uusin jakso</span> | |
| <a href="#" style="color:var(--coral);font-weight:600">Kuuntele →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="content-card" data-type="blog" style="--i:2"> | |
| <div class="content-card-img"> | |
| <span class="content-card-type">Blogi</span> | |
| ✍️ | |
| </div> | |
| <div class="content-card-body"> | |
| <h4>Hajautettu johtaminen käytännössä</h4> | |
| <p>Miten jaettu johtaminen toimii arjessa? Esimerkkejä yhteisön organisaatioista.</p> | |
| <div class="content-card-meta"> | |
| <span>📖 5 min lukuaika</span> | |
| <a href="#" style="color:var(--coral);font-weight:600">Lue →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="content-card" data-type="video" style="--i:3"> | |
| <div class="content-card-img"> | |
| <span class="content-card-type">Tallenne</span> | |
| 🎬 | |
| </div> | |
| <div class="content-card-body"> | |
| <h4>Tapahtumatallenne: Työelämän tulevaisuus</h4> | |
| <p>Viimeisimmän tapahtumamme tallenne — keskustelua muutoksen suunnasta.</p> | |
| <div class="content-card-meta"> | |
| <span>▶ 45 min</span> | |
| <a href="#" style="color:var(--coral);font-weight:600">Katso →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Newsletter --> | |
| <div class="newsletter-bar fade-up"> | |
| <h3>📬 Pysy mukana</h3> | |
| <p>Tilaa uutiskirje ja saat poimintoja parhaista sisällöistä ja tulevista tapahtumista. Halutessasi saat myös oppaan yhteisjohtajuuteen.</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> | |
| </section> | |
| <!-- ============ TIETOJA ============ --> | |
| <section class="about" id="about"> | |
| <div class="container"> | |
| <div class="section-header fade-up"> | |
| <span class="section-tag">Tietoja</span> | |
| <h2>Ota yhteyttä ja tutustu</h2> | |
| </div> | |
| <div class="about-grid"> | |
| <div class="about-contact fade-up"> | |
| <h3>Ota yhteyttä</h3> | |
| <form class="contact-form" onsubmit="event.preventDefault(); alert('Kiitos viestistäsi!')"> | |
| <input type="text" placeholder="Nimesi" required> | |
| <input type="email" placeholder="Sähköpostisi" required> | |
| <textarea placeholder="Viestisi — kerro mitä mietit!"></textarea> | |
| <button type="submit" class="btn-cta" style="align-self:flex-start">Lähetä viesti →</button> | |
| </form> | |
| </div> | |
| <div class="about-info fade-up"> | |
| <h3>Ekosysteemi</h3> | |
| <div class="ecosystem-grid"> | |
| <div class="eco-tag">🏢 Yrityksiä</div> | |
| <div class="eco-tag">🏛 Julkishallinto</div> | |
| <div class="eco-tag">🔬 Tutkijoita</div> | |
| <div class="eco-tag">🎓 Opiskelijoita</div> | |
| <div class="eco-tag">💰 Rahoittajia</div> | |
| <div class="eco-tag">🌍 Vaikuttajia</div> | |
| </div> | |
| <div class="company-info"> | |
| <h4>Coleadership Community Oy</h4> | |
| <p>Yhteiskunnallinen yritys, joka muuttaa työelämää yhteisjohtajuuden kautta. Avoin hallintomalli, jaettu omistajuus.</p> | |
| </div> | |
| <div class="media-links"> | |
| <a href="#" class="media-link">📎 Media brief</a> | |
| <a href="#" class="media-link">🖼 Logot</a> | |
| <a href="#" class="media-link">📰 Mediakontaktit</a> | |
| <a href="#" class="media-link">📄 Governance</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ============ CTA BANNER ============ --> | |
| <section class="cta-banner" id="join"> | |
| <div class="container"> | |
| <h2>Tehdäänkö yhdessä hyvää työtä?<br>Niin hyvää kuin voitais?</h2> | |
| <p>Tämä yhteisö on niille, jotka haluavat muuttaa työelämää aidosti — ei vain puhua siitä.</p> | |
| <div class="cta-buttons"> | |
| <a href="#" class="btn-cta">Hae jäseneksi →</a> | |
| <a href="#" class="btn-cta btn-secondary">Tilaa opas</a> | |
| </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>Lempeitä töytäisyjä kohti radikaalia muutosta. Työelämä muuttuu työpaikka kerrallaan.</p> | |
| </div> | |
| <div> | |
| <h4>Yhteisö</h4> | |
| <ul> | |
| <li><a href="#community">Jäsenyhteisö</a></li> | |
| <li><a href="#community">Jäsenet</a></li> | |
| <li><a href="#join">Hae jäseneksi</a></li> | |
| <li><a href="#">Playbook</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4>Oppi</h4> | |
| <ul> | |
| <li><a href="#academy">Koulutukset</a></li> | |
| <li><a href="#academy">Valmennus</a></li> | |
| <li><a href="#academy">Verkkokurssit</a></li> | |
| <li><a href="#content">Podcast</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> | |
| <li><a href="#">Tietosuoja</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <span>© 2026 Coleadership Community Oy</span> | |
| <span>Yhteiskunnallinen yritys</span> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- ============ JAVASCRIPT ============ --> | |
| <script> | |
| // Nav scroll effect | |
| const nav = document.getElementById('nav'); | |
| window.addEventListener('scroll', () => { | |
| nav.classList.toggle('scrolled', window.scrollY > 20); | |
| }); | |
| // Mobile menu toggle | |
| 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-triggered fade-up animations | |
| 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)); | |
| // Content filter tabs | |
| document.querySelectorAll('.content-tab').forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| document.querySelectorAll('.content-tab').forEach(t => t.classList.remove('active')); | |
| tab.classList.add('active'); | |
| const filter = tab.dataset.filter; | |
| document.querySelectorAll('.content-card').forEach(card => { | |
| if (filter === 'all' || card.dataset.type === filter) { | |
| card.style.display = ''; | |
| card.style.animation = 'fadeIn 0.4s ease forwards'; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| }); | |
| // Add fadeIn keyframe dynamically | |
| const style = document.createElement('style'); | |
| style.textContent = `@keyframes fadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }`; | |
| document.head.appendChild(style); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment