@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Outfit:wght@300;400;500;600&display=swap'); :root { /* Default Palette - overrideable by data attributes on from PHP */ --color-primary: #C9893A; /* Amber */ --color-secondary: #1A3A1A; /* Forest Green */ --color-accent: #4f8ef7; /* Gemini Blue */ --color-base: #111111; /* Deep Charcoal */ --color-text: #F0EDE8; /* Off-White */ --color-surface: #1a1a1a; --color-muted: #888888; /* African Palette for Dividers */ --afr-red: #8B1A1A; --afr-gold: #C9893A; --afr-green: #1A4A1A; --afr-orange: #B85C00; --afr-brown: #5C3A1A; --afr-teal: #0A3D3D; --font-heading: 'Cormorant Garamond', serif; --font-body: 'Outfit', sans-serif; --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } /* Base Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--color-base); color: var(--color-text); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Film Grain Effect */ body::after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.03; z-index: 9999; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } /* Typography */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; line-height: 1.1; margin-bottom: 1.5rem; } p { margin-bottom: 1.25rem; font-weight: 300; } a { color: inherit; text-decoration: none; transition: var(--transition); } /* African Geometric Divider */ .section-divider { width: 100%; height: 40px; background-color: var(--color-base); overflow: hidden; } .section-divider svg { width: 100%; height: 100%; display: block; } /* Buttons */ .amber-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 32px; background-color: var(--color-primary); color: var(--color-base); border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; border: none; cursor: pointer; } .amber-btn:hover { background-color: #d89c4a; transform: translateY(-2px); } .ghost-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 32px; border: 1px solid var(--color-primary); color: var(--color-primary); border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; background: transparent; cursor: pointer; } .ghost-btn:hover { background: var(--color-primary); color: var(--color-base); } /* Gemini Stroke Button */ .gemini-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 32px; border-radius: 50px; background: transparent; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; border: 2px solid transparent; position: relative; cursor: pointer; animation: geminiGlow 3s linear infinite; box-shadow: 0 0 16px 2px var(--color-accent); } @keyframes geminiGlow { 0% { border-color: #4f8ef7; box-shadow: 0 0 12px 2px #4f8ef7; } 33% { border-color: #a78bfa; box-shadow: 0 0 12px 2px #a78bfa; } 66% { border-color: #22d3ee; box-shadow: 0 0 12px 2px #22d3ee; } 100% { border-color: #4f8ef7; box-shadow: 0 0 12px 2px #4f8ef7; } } .gemini-btn:hover { background: rgba(255, 255, 255, 0.05); } /* Layout Containers */ .container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; } .section { padding: 100px 0; position: relative; } /* African Cards */ .african-card { position: relative; background-color: var(--color-surface); border-radius: 10px; overflow: hidden; transition: var(--transition); } .african-card::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--color-primary); border-radius: 10px; pointer-events: none; animation: borderCycle 8s linear infinite; } @keyframes borderCycle { 0% { box-shadow: inset 0 0 0 2px var(--afr-red); } 20% { box-shadow: inset 0 0 0 2px var(--afr-gold); } 40% { box-shadow: inset 0 0 0 2px var(--afr-green); } 60% { box-shadow: inset 0 0 0 2px var(--afr-orange); } 80% { box-shadow: inset 0 0 0 2px var(--afr-teal); } 100% { box-shadow: inset 0 0 0 2px var(--afr-red); } } .african-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.4); } /* Hero Styles */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: -1; } .hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(17,17,17,0.7), rgba(17,17,17,0.4)); z-index: 0; } .hero-content { position: relative; z-index: 10; text-align: center; } /* Fade Animations */ .fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s, transform 0.8s; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* Responsive */ @media (max-width: 768px) { .container { padding: 0 1rem; } .section { padding: 60px 0; } h1 { font-size: 2.5rem; } } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--color-base); } ::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; }