first commit
This commit is contained in:
@@ -0,0 +1,829 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Couleurs du logo OKI */
|
||||
--or-oki: #E8A625;
|
||||
--noir-oki: #000000;
|
||||
--vert-oki: #00A854;
|
||||
--rouge-oki: #ED1C4C;
|
||||
--blanc-creme: #F7F7F2;
|
||||
|
||||
/* Couleurs dérivées pour le design */
|
||||
--noir-profond: #1A1A1A;
|
||||
--gris-sombre: #2A2A2A;
|
||||
--or-clair: #F5BD4F;
|
||||
--vert-clair: #00C569;
|
||||
--rouge-clair: #FF2D5F;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: linear-gradient(135deg, var(--noir-oki) 0%, var(--gris-sombre) 100%);
|
||||
color: var(--blanc-creme);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 1000;
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 2px solid var(--or-oki);
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(135deg, var(--or-oki), var(--or-clair));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
filter: drop-shadow(0 0 8px rgba(232, 166, 37, 0.6))
|
||||
drop-shadow(0 0 15px rgba(232, 166, 37, 0.4))
|
||||
drop-shadow(0 0 25px rgba(232, 166, 37, 0.2));
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
|
||||
.logo-with-glow:hover .logo-image {
|
||||
filter: drop-shadow(0 0 12px rgba(232, 166, 37, 0.8))
|
||||
drop-shadow(0 0 20px rgba(232, 166, 37, 0.6))
|
||||
drop-shadow(0 0 35px rgba(232, 166, 37, 0.4));
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: var(--blanc-creme);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: var(--or-oki);
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-toggle span {
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background: var(--or-oki);
|
||||
margin: 3px 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
padding: 8rem 2rem 4rem;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2rem, 6vw, 4rem);
|
||||
font-weight: 900;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.1;
|
||||
animation: fadeInUp 0.8s ease;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
||||
margin-bottom: 1rem;
|
||||
color: var(--or-oki);
|
||||
animation: fadeInUp 0.8s ease 0.1s both;
|
||||
}
|
||||
|
||||
.accent-text {
|
||||
background: linear-gradient(135deg, var(--or-oki), var(--rouge-oki));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.9;
|
||||
max-width: 700px;
|
||||
animation: fadeInUp 0.8s ease 0.2s both;
|
||||
}
|
||||
|
||||
.hero-tags {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInUp 0.8s ease 0.3s both;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(232, 166, 37, 0.2);
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
border: 1px solid var(--or-oki);
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
animation: fadeInUp 0.8s ease 0.4s both;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 1rem 2rem;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--or-oki), var(--or-clair));
|
||||
color: var(--noir-oki);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 30px rgba(232, 166, 37, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--or-oki);
|
||||
border: 2px solid var(--or-oki);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--or-oki);
|
||||
color: var(--noir-oki);
|
||||
}
|
||||
|
||||
/* Network Animation */
|
||||
.network-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.node {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: var(--or-oki);
|
||||
border-radius: 50%;
|
||||
animation: pulse 3s infinite;
|
||||
}
|
||||
|
||||
/* Fediverse Services Section */
|
||||
.fediverse {
|
||||
padding: 4rem 2rem;
|
||||
background: var(--noir-profond);
|
||||
}
|
||||
|
||||
.section-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.fediverse h2 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: rgba(0, 168, 84, 0.1);
|
||||
border: 2px solid var(--vert-oki);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.service-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--vert-oki), var(--or-oki));
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0, 168, 84, 0.3);
|
||||
background: rgba(0, 168, 84, 0.15);
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.service-card h3 {
|
||||
color: var(--or-oki);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.service-platform {
|
||||
color: var(--vert-oki);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.service-description {
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.service-link {
|
||||
color: var(--or-oki);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: gap 0.3s ease;
|
||||
}
|
||||
|
||||
.service-link:hover {
|
||||
gap: 1rem;
|
||||
color: var(--or-clair);
|
||||
}
|
||||
|
||||
/* Web Projects Section */
|
||||
.projects {
|
||||
padding: 4rem 2rem;
|
||||
background: linear-gradient(135deg, var(--noir-profond) 0%, var(--gris-sombre) 100%);
|
||||
}
|
||||
|
||||
.projects h2 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.project-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 20px;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
text-align: center;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: var(--or-oki);
|
||||
box-shadow: 0 20px 40px rgba(232, 166, 37, 0.2);
|
||||
}
|
||||
|
||||
.project-card h3 {
|
||||
color: var(--or-oki);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.project-domain {
|
||||
color: var(--rouge-oki);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.project-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Mission Section */
|
||||
.mission {
|
||||
padding: 4rem 2rem;
|
||||
background: var(--noir-profond);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mission h2 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.mission-text {
|
||||
font-size: 1.3rem;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 3rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.values-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
max-width: 1000px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.value-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 2rem;
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(232, 166, 37, 0.2);
|
||||
}
|
||||
|
||||
.value-card:hover {
|
||||
transform: translateY(-5px);
|
||||
background: rgba(232, 166, 37, 0.1);
|
||||
border-color: var(--or-oki);
|
||||
}
|
||||
|
||||
.value-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.value-card h3 {
|
||||
color: var(--or-oki);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
/* Hosting Services Section */
|
||||
.hosting {
|
||||
padding: 4rem 2rem;
|
||||
background: linear-gradient(135deg, var(--gris-sombre) 0%, var(--noir-profond) 100%);
|
||||
}
|
||||
|
||||
.hosting-banner {
|
||||
background: rgba(232, 166, 37, 0.1);
|
||||
border: 2px solid var(--or-oki);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hosting-banner h3 {
|
||||
color: var(--or-oki);
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hosting-features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.hosting-feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.hosting-feature span {
|
||||
color: var(--vert-oki);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* Partners Section */
|
||||
.partners {
|
||||
padding: 4rem 2rem;
|
||||
background: linear-gradient(135deg, var(--gris-sombre) 0%, var(--noir-profond) 100%);
|
||||
}
|
||||
|
||||
.partners h2 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.partners-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
max-width: 900px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.partner-card {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.partner-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: var(--or-oki);
|
||||
box-shadow: 0 20px 40px rgba(232, 166, 37, 0.2);
|
||||
}
|
||||
|
||||
.partner-logo-container {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 50%;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.partner-logo {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.partner-card h3 {
|
||||
color: var(--or-oki);
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.partner-description {
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.partner-link {
|
||||
color: var(--or-oki);
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: gap 0.3s ease;
|
||||
}
|
||||
|
||||
.partner-card:hover .partner-link {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Support Section */
|
||||
.support {
|
||||
padding: 4rem 2rem;
|
||||
background: var(--noir-profond);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.support h2 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.support-options {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
/* Contact Section */
|
||||
.contact {
|
||||
padding: 3rem 2rem;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-card h3 {
|
||||
color: var(--or-oki);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.contact-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.contact-links a {
|
||||
color: var(--blanc-creme);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.contact-links a:hover {
|
||||
color: var(--or-oki);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
padding: 2rem;
|
||||
background: var(--noir-oki);
|
||||
text-align: center;
|
||||
border-top: 2px solid var(--or-oki);
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Donation Styles */
|
||||
.donation-amount {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
background: rgba(232, 166, 37, 0.2);
|
||||
border: 2px solid var(--or-oki);
|
||||
color: var(--blanc-creme);
|
||||
text-decoration: none;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.donation-amount:hover {
|
||||
background: var(--or-oki);
|
||||
color: var(--noir-oki);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 5px 15px rgba(232, 166, 37, 0.4);
|
||||
}
|
||||
|
||||
.donation-amount.monthly {
|
||||
background: rgba(0, 168, 84, 0.2);
|
||||
border-color: var(--vert-oki);
|
||||
}
|
||||
|
||||
.donation-amount.monthly:hover {
|
||||
background: var(--vert-oki);
|
||||
color: var(--blanc-creme);
|
||||
box-shadow: 0 5px 15px rgba(0, 168, 84, 0.4);
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--or-oki);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* Custom Donation Form */
|
||||
.custom-donation-form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 350px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.custom-amount-input {
|
||||
padding: 0.8rem;
|
||||
border: 2px solid var(--or-oki);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: var(--blanc-creme);
|
||||
border-radius: 10px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.custom-amount-input-monthly {
|
||||
border-color: var(--vert-oki);
|
||||
}
|
||||
|
||||
.currency-symbol {
|
||||
color: var(--blanc-creme);
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.custom-donation-btn {
|
||||
padding: 0.8rem 1.2rem;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.custom-donation-btn-primary {
|
||||
background: var(--or-oki);
|
||||
color: var(--noir-oki);
|
||||
}
|
||||
|
||||
.custom-donation-btn-secondary {
|
||||
background: var(--vert-oki);
|
||||
color: var(--blanc-creme);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.services-grid,
|
||||
.project-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Custom Donation Form Mobile */
|
||||
.custom-donation-form {
|
||||
gap: 0.4rem;
|
||||
padding: 0 0.5rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.custom-amount-input {
|
||||
padding: 0.6rem 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.currency-symbol {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.custom-donation-btn {
|
||||
padding: 0.6rem 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
/* Very small screens */
|
||||
.custom-donation-form {
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.custom-amount-input {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.custom-donation-btn {
|
||||
padding: 0.5rem 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 341 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@@ -0,0 +1,229 @@
|
||||
// Smooth scrolling
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Mobile menu toggle
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
let menuOpen = false;
|
||||
|
||||
menuToggle?.addEventListener('click', () => {
|
||||
menuOpen = !menuOpen;
|
||||
if (menuOpen) {
|
||||
navLinks.style.display = 'flex';
|
||||
navLinks.style.position = 'absolute';
|
||||
navLinks.style.top = '100%';
|
||||
navLinks.style.left = '0';
|
||||
navLinks.style.right = '0';
|
||||
navLinks.style.background = 'rgba(0, 0, 0, 0.98)';
|
||||
navLinks.style.flexDirection = 'column';
|
||||
navLinks.style.padding = '1rem';
|
||||
navLinks.style.borderTop = '2px solid #E8A625';
|
||||
|
||||
// Animate menu toggle
|
||||
menuToggle.children[0].style.transform = 'rotate(45deg) translateY(8px)';
|
||||
menuToggle.children[1].style.opacity = '0';
|
||||
menuToggle.children[2].style.transform = 'rotate(-45deg) translateY(-8px)';
|
||||
} else {
|
||||
navLinks.style.display = 'none';
|
||||
|
||||
// Reset menu toggle
|
||||
menuToggle.children[0].style.transform = '';
|
||||
menuToggle.children[1].style.opacity = '1';
|
||||
menuToggle.children[2].style.transform = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Close mobile menu when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (menuOpen && !menuToggle.contains(e.target) && !navLinks.contains(e.target)) {
|
||||
menuOpen = false;
|
||||
navLinks.style.display = 'none';
|
||||
menuToggle.children[0].style.transform = '';
|
||||
menuToggle.children[1].style.opacity = '1';
|
||||
menuToggle.children[2].style.transform = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Scroll animations
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -100px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.animation = 'fadeInUp 0.8s ease both';
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe all cards
|
||||
document.querySelectorAll('.service-card, .project-card, .value-card').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Navbar scroll effect
|
||||
let lastScroll = 0;
|
||||
const nav = document.querySelector('nav');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
if (currentScroll > 100) {
|
||||
nav.style.background = 'rgba(0, 0, 0, 0.98)';
|
||||
nav.style.boxShadow = '0 2px 20px rgba(232, 166, 37, 0.3)';
|
||||
} else {
|
||||
nav.style.background = 'rgba(0, 0, 0, 0.95)';
|
||||
nav.style.boxShadow = '';
|
||||
}
|
||||
|
||||
// Hide/show navbar on scroll
|
||||
if (currentScroll > lastScroll && currentScroll > 500) {
|
||||
nav.style.transform = 'translateY(-100%)';
|
||||
} else {
|
||||
nav.style.transform = 'translateY(0)';
|
||||
}
|
||||
|
||||
lastScroll = currentScroll;
|
||||
});
|
||||
|
||||
// Network animation enhancement
|
||||
function createNetworkLine() {
|
||||
const nodes = document.querySelectorAll('.node');
|
||||
const networkBg = document.querySelector('.network-bg');
|
||||
|
||||
if (nodes.length > 1 && networkBg) {
|
||||
for (let i = 0; i < nodes.length - 1; i++) {
|
||||
const line = document.createElement('div');
|
||||
line.style.position = 'absolute';
|
||||
line.style.height = '1px';
|
||||
line.style.background = 'linear-gradient(90deg, transparent, #E8A625, transparent)';
|
||||
line.style.opacity = '0.2';
|
||||
line.style.animation = `pulse 4s infinite ${i * 0.5}s`;
|
||||
|
||||
const node1 = nodes[i];
|
||||
const node2 = nodes[i + 1];
|
||||
|
||||
// Calculate line position and angle
|
||||
const x1 = parseFloat(node1.style.left);
|
||||
const y1 = parseFloat(node1.style.top);
|
||||
const x2 = parseFloat(node2.style.left);
|
||||
const y2 = parseFloat(node2.style.top);
|
||||
|
||||
const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
|
||||
const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
|
||||
|
||||
line.style.width = distance + '%';
|
||||
line.style.left = x1 + '%';
|
||||
line.style.top = y1 + '%';
|
||||
line.style.transform = `rotate(${angle}deg)`;
|
||||
line.style.transformOrigin = '0 0';
|
||||
|
||||
networkBg.appendChild(line);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize network lines
|
||||
createNetworkLine();
|
||||
|
||||
// Dynamic typing effect for hero subtitle
|
||||
const subtitle = document.querySelector('.hero-subtitle');
|
||||
if (subtitle) {
|
||||
const text = subtitle.textContent;
|
||||
subtitle.textContent = '';
|
||||
let index = 0;
|
||||
|
||||
function typeWriter() {
|
||||
if (index < text.length) {
|
||||
subtitle.textContent += text.charAt(index);
|
||||
index++;
|
||||
setTimeout(typeWriter, 100);
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(typeWriter, 800);
|
||||
}
|
||||
|
||||
// Add hover effect to project cards with tilt
|
||||
document.querySelectorAll('.project-card, .service-card').forEach(card => {
|
||||
card.addEventListener('mousemove', (e) => {
|
||||
const rect = card.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const centerX = rect.width / 2;
|
||||
const centerY = rect.height / 2;
|
||||
|
||||
const rotateX = (y - centerY) / 20;
|
||||
const rotateY = (centerX - x) / 20;
|
||||
|
||||
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-5px)`;
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', () => {
|
||||
card.style.transform = '';
|
||||
});
|
||||
});
|
||||
|
||||
// Easter egg: Konami code
|
||||
const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
|
||||
let konamiIndex = 0;
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === konamiCode[konamiIndex]) {
|
||||
konamiIndex++;
|
||||
if (konamiIndex === konamiCode.length) {
|
||||
document.body.style.animation = 'pulse 1s';
|
||||
setTimeout(() => {
|
||||
alert('🎮 Félicitations! Vous avez trouvé le code secret! Bienvenue dans la résistance numérique!');
|
||||
document.body.style.animation = '';
|
||||
}, 1000);
|
||||
konamiIndex = 0;
|
||||
}
|
||||
} else {
|
||||
konamiIndex = 0;
|
||||
}
|
||||
});
|
||||
|
||||
// Progressive enhancement: Add loading states
|
||||
// Disabled - not needed for external links
|
||||
// document.querySelectorAll('.service-link, .project-card').forEach(link => {
|
||||
// link.addEventListener('click', function(e) {
|
||||
// if (this.href && this.href !== '#') {
|
||||
// this.style.opacity = '0.6';
|
||||
// this.innerHTML += ' ⌛';
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
|
||||
// Custom donation handler
|
||||
function handleCustomDonation(type) {
|
||||
const input = document.getElementById(type === 'oneTime' ? 'customAmountOneTime' : 'customAmountMonthly');
|
||||
const amount = input.value;
|
||||
|
||||
if (!amount || amount < 1) {
|
||||
alert('Veuillez entrer un montant valide');
|
||||
return;
|
||||
}
|
||||
|
||||
// Redirect to custom amount Stripe URL
|
||||
const stripeUrl = type === 'oneTime'
|
||||
? 'https://don.o-k-i.net/b/6oE2aO94P88X9u8eV4' // Custom one-time donation
|
||||
: 'https://don.o-k-i.net/b/6oE2aO94P88X9u8eV4'; // Uses same link for custom amounts
|
||||
|
||||
window.location.href = stripeUrl;
|
||||
}
|
||||
Reference in New Issue
Block a user