/* Custom styles moved from in index.html */
.btn-outline-light {
color: #fff;
background: #5746e3;
border: none;
transition: color 0.2s, background 0.2s;
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 10px 16px;
}
.btn-outline-light small {
color: #fff;
transition: color 0.2s;
}
.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:focus-visible,
.btn-outline-light:active {
color: #5746e3;
background: #fff;
outline: 3px solid #5746e3;
}
.btn-outline-light:hover small,
.btn-outline-light:focus small,
.btn-outline-light:focus-visible small,
.btn-outline-light:active small {
color: #5746e3;
}
/* ============================================
NAVIGATION ACCESSIBILITY
============================================ */
.navbar-nav .nav-link {
position: relative;
color: #fff !important;
transition: color 0.2s, background-color 0.2s;
min-height: 44px;
display: flex;
align-items: center;
padding: 12px 16px !important;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible,
.navbar-nav .nav-link.active {
color: #5746e3 !important;
background-color: rgba(87, 70, 227, 0.1);
border-radius: 4px;
}
.navbar-nav .nav-link:focus-visible {
outline: 2px solid #5746e3;
outline-offset: 2px;
}
.navbar-nav .nav-link::after {
content: '';
display: block;
width: 100%;
height: 2px;
background: #5746e3;
position: absolute;
left: 0;
bottom: 0;
opacity: 0;
transition: opacity 0.2s;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link:focus-visible::after,
.navbar-nav .nav-link.active::after {
opacity: 1;
}
/* ============================================
HERO SECTION
============================================ */
.hero-section {
min-height: 85vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('../img/webp/abstract12.webp');
background-size: cover;
background-position: center;
opacity: 0.15;
z-index: 0;
}
.hero-content {
position: relative;
z-index: 1;
}
.cta-box {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 2rem;
transition: all 0.3s ease;
}
.cta-box:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
/* ============================================
SECTION TITLES
============================================ */
.section-title {
font-size: 2.5rem;
font-weight: 300;
margin-bottom: 1rem;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, #ffffff 0%, transparent 100%);
}
/* ============================================
CARDS
============================================ */
.podcast-card {
background: #1a1a1a;
border-radius: 16px;
padding: 1.5rem;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.podcast-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
border-color: rgba(255, 255, 255, 0.15);
}
.article-card {
background: #1a1a1a;
border-radius: 20px;
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.05);
height: 100%;
}
.article-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
border-color: rgba(255, 255, 255, 0.15);
}
/* ============================================
LINK FOCUS & HOVER STATES
============================================ */
.link-fancy {
color: #6d5df5;
text-decoration: none;
display: inline-block;
position: relative;
}
.link-fancy:focus-visible {
outline: 3px solid #6d5df5;
outline-offset: 2px;
border-radius: 2px;
}
.link-fancy-light {
color: #fff;
}
.link-fancy-light:focus-visible {
outline: 3px solid #fff;
}
/* ============================================
INTERACTIVE ELEMENT FOCUS STATES
============================================ */
a[href]:focus-visible {
outline: 3px solid #5746e3;
outline-offset: 2px;
}
one[btn-primary-custom]:focus-visible {
outline: 3px solid #5746e3;
outline-offset: 2px;
}
/* ============================================
MOBILE MEDIA QUERY ENHANCEMENTS
============================================ */
@media (max-width: 768px) {
.article-card {
margin-bottom: 1rem;
}
/* Ensure all text is readable on mobile */
html {
font-size: 16px;
}
body {
font-size: 1rem;
}
.article-card img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.3s ease;
}
.article-card:hover img {
transform: scale(1.05);
}
.article-content {
padding: 2rem;
}
/* ============================================
BUTTONS
============================================ */
.btn-primary-custom {
background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
color: #000000;
border: none;
padding: 0.75rem 2rem;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.btn-primary-custom:hover {
background: linear-gradient(135deg, #e0e0e0 0%, #ffffff 100%);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
color: #000000;
}
/* ============================================
NEWSLETTER
============================================ */
.newsletter-signup {
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
border-radius: 30px;
padding: 4rem 2rem;
border: 2px solid rgba(255, 255, 255, 0.1);
}
.substack-embed-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 2rem;
}
.substack-embed-container iframe {
border-radius: 15px;
border: 2px solid rgba(255, 255, 255, 0.1);
}
/* ============================================
ICONS
============================================ */
.feature-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
font-size: 1.5rem;
}
/* ============================================
NAVBAR
============================================ */
.navbar {
background: rgba(0, 0, 0, 0.98) !important;
backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.navbar.scrolled {
background: rgba(0, 0, 0, 0.98) !important;
backdrop-filter: blur(10px);
}
/* Clean hamburger menu - three horizontal lines */
.navbar-toggler {
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.4rem 0.6rem;
background: transparent;
border-radius: 6px;
transition: all 0.3s ease;
}
.navbar-toggler:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.4);
}
.navbar-toggler:focus {
box-shadow: 0 0 0 0.2rem rgba(87, 70, 227, 0.5);
outline: none;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
width: 1.5em;
height: 1.5em;
display: inline-block;
}
/* ============================================
RESPONSIVE / MOBILE
============================================ */
@media (max-width: 768px) {
.section-title {
font-size: 2rem;
}
.hero-section {
min-height: 70vh;
padding-top: 2rem;
}
/* Navbar mobile styles */
.navbar-brand img {
height: 40px !important;
}
.navbar-collapse {
background: rgba(0, 0, 0, 0.98);
padding: 1rem;
margin-top: 1rem;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.navbar-nav {
margin-bottom: 1rem;
}
.navbar-nav .nav-link {
padding: 0.75rem 1rem;
text-align: center;
}
.btn-outline-light {
width: 100%;
margin-top: 0.5rem;
}
}