Spaces:
Running
Running
| /* Modern Professional Color Palette */ | |
| :root { | |
| --primary: #1A365D; /* Deep Navy */ | |
| --primary-light: #2C5282; /* Lighter Navy */ | |
| --secondary: #B7791F; /* Muted Gold */ | |
| --accent: #4A5568; /* Slate Gray */ | |
| --light: #F7FAFC; /* Off White */ | |
| --dark: #1A202C; /* Near Black */ | |
| --text: #2D3748; /* Dark Gray */ | |
| --text-light: #718096; /* Medium Gray */ | |
| --bg: #FFFFFF; /* Pure White */ | |
| --bg-alt: #F8F9FA; /* Light Gray BG */ | |
| } | |
| /* Reset and base styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Open+Sans:wght@300;400;600&display=swap'); | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| line-height: 1.8; | |
| color: var(--text); | |
| background-color: var(--bg); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Cormorant Garamond', serif; | |
| font-weight: 600; | |
| line-height: 1.3; | |
| margin-bottom: 1rem; | |
| color: var(--primary); | |
| } | |
| p { | |
| margin-bottom: 1.5rem; | |
| font-size: 1.1em; | |
| color: var(--text); | |
| } | |
| /* Base container styles - Mobile First (320px+) */ | |
| .container { | |
| width: 100%; | |
| margin: 0 auto; | |
| padding: 0 15px; | |
| } | |
| /* Base typography */ | |
| html { | |
| font-size: 14px; | |
| } | |
| h1 { | |
| font-size: 1.7rem; | |
| line-height: 1.2; | |
| } | |
| h2 { | |
| font-size: 1.5rem; | |
| line-height: 1.25; | |
| } | |
| h3 { | |
| font-size: 1.3rem; | |
| line-height: 1.3; | |
| } | |
| h4 { | |
| font-size: 1.1rem; | |
| line-height: 1.35; | |
| } | |
| p, li, a, button, input, textarea, select { | |
| font-size: 1rem; | |
| line-height: 1.6; | |
| } | |
| /* 400px and below: General small screen optimizations */ | |
| @media (max-width: 400px) { | |
| html { | |
| font-size: 13.5px; | |
| } | |
| .container { | |
| padding: 0 12px; | |
| } | |
| h1 { | |
| font-size: 1.6rem; | |
| margin-bottom: 0.8rem; | |
| } | |
| h2 { | |
| font-size: 1.4rem; | |
| margin-bottom: 0.8rem; | |
| } | |
| p { | |
| margin-bottom: 1.2rem; | |
| } | |
| /* Adjust header for small screens */ | |
| .header .container { | |
| padding: 8px 12px; | |
| } | |
| .logo h1 { | |
| font-size: 1.2rem; | |
| } | |
| /* Make buttons more touch-friendly */ | |
| button, .btn, input[type="button"], input[type="submit"] { | |
| padding: 8px 16px; | |
| min-height: 42px; | |
| } | |
| } | |
| /* 360px and below: Further refinements for very small screens */ | |
| @media (max-width: 360px) { | |
| html { | |
| font-size: 13px; | |
| } | |
| .container { | |
| padding: 0 10px; | |
| } | |
| h1 { | |
| font-size: 1.5rem; | |
| } | |
| h2 { | |
| font-size: 1.3rem; | |
| } | |
| /* Adjust spacing for very small screens */ | |
| section { | |
| padding: 24px 0; | |
| } | |
| /* Make form elements more compact */ | |
| input, textarea, select { | |
| padding: 8px 12px; | |
| } | |
| /* Further reduce header size */ | |
| .header .container { | |
| padding: 6px 10px; | |
| } | |
| .logo h1 { | |
| font-size: 1.1rem; | |
| } | |
| /* Adjust navigation for very small screens */ | |
| .nav-mobile-links a { | |
| font-size: 1rem; | |
| padding: 8px 0; | |
| } | |
| } | |
| /* Images and media */ | |
| img, video, iframe { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| /* Buttons and interactive elements */ | |
| button, .btn, input[type="button"], input[type="submit"] { | |
| min-height: 44px; | |
| min-width: 44px; | |
| } | |
| /* Large phones (480px and up) */ | |
| @media (min-width: 480px) { | |
| .container { | |
| padding: 0 20px; | |
| } | |
| html { | |
| font-size: 15px; | |
| } | |
| h1 { font-size: 2rem; } | |
| h2 { font-size: 1.8rem; } | |
| h3 { font-size: 1.5rem; } | |
| h4 { font-size: 1.3rem; } | |
| } | |
| /* Tablets portrait (768px and up) */ | |
| @media (min-width: 768px) { | |
| .container { | |
| max-width: 720px; | |
| padding: 0 20px; | |
| } | |
| html { | |
| font-size: 15.5px; | |
| } | |
| h1 { font-size: 2.2rem; } | |
| h2 { font-size: 2rem; } | |
| h3 { font-size: 1.7rem; } | |
| h4 { font-size: 1.4rem; } | |
| } | |
| /* Tablets landscape / Small laptops (1024px and up) */ | |
| @media (min-width: 1024px) { | |
| .container { | |
| max-width: 960px; | |
| } | |
| html { | |
| font-size: 16px; | |
| } | |
| h1 { font-size: 2.5rem; } | |
| h2 { font-size: 2.2rem; } | |
| h3 { font-size: 1.9rem; } | |
| h4 { font-size: 1.5rem; } | |
| } | |
| /* Desktop (1200px and up) */ | |
| @media (min-width: 1200px) { | |
| .container { | |
| max-width: 1140px; | |
| } | |
| h1 { font-size: 2.8rem; } | |
| h2 { font-size: 2.4rem; } | |
| h3 { font-size: 2rem; } | |
| h4 { font-size: 1.6rem; } | |
| } | |
| /* Large desktop (1440px and up) */ | |
| @media (min-width: 1440px) { | |
| .container { | |
| max-width: 1320px; | |
| } | |
| html { | |
| font-size: 16.5px; | |
| } | |
| h1 { font-size: 3rem; } | |
| h2 { font-size: 2.6rem; } | |
| } | |
| /* Ultra-wide screens (1920px and up) */ | |
| @media (min-width: 1920px) { | |
| .container { | |
| max-width: 1600px; | |
| } | |
| html { | |
| font-size: 17px; | |
| } | |
| h1 { font-size: 3.2rem; } | |
| h2 { font-size: 2.8rem; } | |
| } | |
| /* Header Styles */ | |
| .header { | |
| background: rgba(255, 255, 255, 0.98); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| box-shadow: 0 2px 15px rgba(26, 54, 93, 0.1); | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| width: 100%; | |
| z-index: 1000; | |
| transition: all 0.3s ease-in-out; | |
| } | |
| .header.scrolled { | |
| padding: 5px 0; | |
| box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .header .container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 15px 20px; | |
| width: 100%; | |
| max-width: 100%; | |
| } | |
| /* Logo Styles */ | |
| .logo h1 { | |
| color: var(--primary); | |
| font-size: 24px; | |
| font-weight: bold; | |
| margin: 0; | |
| text-shadow: 1px 1px 2px rgba(26, 54, 93, 0.2); | |
| font-family: 'Georgia', serif; | |
| letter-spacing: 1px; | |
| } | |
| /* Desktop Navigation */ | |
| .nav-desktop { | |
| display: flex; | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| gap: 20px; | |
| margin: 0; | |
| padding: 0; | |
| align-items: center; | |
| } | |
| .nav-links a { | |
| color: var(--primary); | |
| text-decoration: none; | |
| font-weight: 500; | |
| padding: 8px 16px; | |
| border-radius: 4px; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| font-family: 'Georgia', serif; | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 2px; | |
| bottom: 4px; | |
| left: 0; | |
| background-color: var(--secondary); | |
| transform: scaleX(0); | |
| transform-origin: bottom right; | |
| transition: transform 0.3s ease-out; | |
| } | |
| .nav-links a:hover { | |
| color: var(--secondary); | |
| background-color: rgba(183, 121, 31, 0.1); | |
| } | |
| .nav-links a:hover::after { | |
| transform: scaleX(1); | |
| transform-origin: bottom left; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| /* CTA Button */ | |
| .btn-primary { | |
| background: var(--primary); | |
| color: white; | |
| border: 2px solid var(--primary); | |
| padding: 14px 32px; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-family: 'Cormorant Garamond', serif; | |
| font-size: 1.1em; | |
| letter-spacing: 0.5px; | |
| position: relative; | |
| overflow: hidden; | |
| z-index: 1; | |
| box-shadow: 0 4px 15px rgba(26, 54, 93, 0.2); | |
| } | |
| .btn-primary::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 0; | |
| height: 100%; | |
| background: var(--secondary); | |
| transition: width 0.3s ease; | |
| z-index: -1; | |
| border-radius: 50px; | |
| } | |
| .btn-primary:hover { | |
| color: white; | |
| transform: translateY(-3px); | |
| box-shadow: 0 7px 20px rgba(26, 54, 93, 0.3); | |
| } | |
| .btn-primary:hover::before { | |
| width: 100%; | |
| } | |
| /* Hamburger Menu */ | |
| .hamburger { | |
| display: none; | |
| flex-direction: column; | |
| cursor: pointer; | |
| padding: 5px; | |
| } | |
| .hamburger span { | |
| width: 25px; | |
| height: 3px; | |
| background: #0e1e4a; | |
| margin: 3px 0; | |
| transition: 0.3s; | |
| border-radius: 2px; | |
| } | |
| .hamburger.active span:nth-child(1) { | |
| transform: rotate(-45deg) translate(-5px, 6px); | |
| } | |
| .hamburger.active span:nth-child(2) { | |
| opacity: 0; | |
| } | |
| .hamburger.active span:nth-child(3) { | |
| transform: rotate(45deg) translate(-5px, -6px); | |
| } | |
| /* Mobile Navigation */ | |
| .nav-mobile { | |
| display: none; | |
| background: linear-gradient(180deg, #F8FAFC 0%, #E2E8F0 100%); | |
| border-top: 2px solid #B8860B; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| box-shadow: 0 5px 15px rgba(30, 58, 138, 0.2); | |
| } | |
| .nav-mobile.active { | |
| display: block; | |
| } | |
| .nav-mobile-links { | |
| list-style: none; | |
| padding: 20px; | |
| } | |
| .nav-mobile-links li { | |
| margin: 15px 0; | |
| } | |
| .nav-mobile-links a { | |
| text-decoration: none; | |
| color: #334155; | |
| font-weight: 500; | |
| font-size: 18px; | |
| display: block; | |
| padding: 10px 0; | |
| font-family: 'Georgia', serif; | |
| transition: color 0.3s ease; | |
| } | |
| .nav-mobile-links a:hover { | |
| color: #0e1e4a; | |
| } | |
| .nav-mobile-links .mobile-btn { | |
| margin: 20px auto 0; | |
| width: 100%; | |
| color: #FFFFFF; | |
| text-align: center; | |
| background: var(--primary); | |
| border: 2px solid var(--primary); | |
| padding: 12px 24px; | |
| border-radius: 30px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| display: block; | |
| transition: all 0.3s ease; | |
| } | |
| .nav-mobile-links .mobile-btn:hover { | |
| background: transparent; | |
| color: var(--primary); | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| min-height: 90vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| padding: 120px 20px 100px; | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); | |
| position: relative; | |
| overflow: hidden; | |
| color: white; | |
| } | |
| .hero h2 { | |
| font-size: 4.5rem; | |
| margin-bottom: 1.5rem; | |
| color: #FFFFFF; | |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); | |
| opacity: 0; | |
| transform: translateY(20px); | |
| animation: fadeInUp 0.8s ease-out 0.3s forwards; | |
| font-weight: 600; | |
| } | |
| .hero p { | |
| font-size: 1.8rem; | |
| color: #FFFFFF; | |
| max-width: 700px; | |
| margin: 0 auto 3rem; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| animation: fadeInUp 0.8s ease-out 0.5s forwards; | |
| font-weight: 400; | |
| line-height: 1.6; | |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); | |
| } | |
| .hero h2 { | |
| font-size: 4.5rem; | |
| margin-bottom: 1.5rem; | |
| color: #FFFFFF; | |
| font-family: 'Cormorant Garamond', serif; | |
| font-weight: 600; | |
| line-height: 1.2; | |
| text-shadow: 2px 2px 4px rgba(30, 58, 138, 0.1); | |
| } | |
| .hero p { | |
| font-size: 1.8rem; | |
| color: #FFFFFF; | |
| max-width: 700px; | |
| margin: 0 auto 3rem; | |
| font-family: 'Open Sans', sans-serif; | |
| font-weight: 300; | |
| line-height: 1.6; | |
| text-shadow: 2px 2px 4px rgba(30, 58, 138, 0.1); | |
| } | |
| @keyframes fadeInUp { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: | |
| radial-gradient(circle at 20% 30%, rgba(184, 134, 11, 0.1) 0%, transparent 30%), | |
| radial-gradient(circle at 80% 70%, rgba(184, 134, 11, 0.1) 0%, transparent 30%), | |
| url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M30,50 C30,30 70,30 70,50 C70,70 30,70 30,50 Z" fill="none" stroke="%23B8860B" stroke-width="0.5" opacity="0.1"/></svg>') center/contain repeat; | |
| opacity: 0.5; | |
| z-index: 0; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="academic" patternUnits="userSpaceOnUse" width="20" height="20"><circle cx="10" cy="10" r="1" fill="%23B8860B" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23academic)"/></svg>'); | |
| opacity: 0.3; | |
| } | |
| .hero h2, | |
| .hero p { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* Responsive Design */ | |
| /* Large Tablets and Small Laptops */ | |
| @media (max-width: 1024px) { | |
| .container { | |
| padding: 0 30px; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| } | |
| h2 { | |
| font-size: 2rem; | |
| } | |
| } | |
| /* Tablets */ | |
| @media (max-width: 768px) { | |
| /* Hide desktop navigation and show hamburger */ | |
| .nav-desktop, | |
| .cta-button { | |
| display: none; | |
| } | |
| .hamburger { | |
| display: flex; | |
| } | |
| /* Adjust logo size for mobile */ | |
| .logo h1 { | |
| font-size: 20px; | |
| } | |
| /* Hero adjustments for mobile */ | |
| .hero h2 { | |
| font-size: 32px; | |
| } | |
| .hero p { | |
| font-size: 16px; | |
| } | |
| } | |
| /* Small Tablets and Large Phones */ | |
| @media (max-width: 600px) { | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| h2 { | |
| font-size: 1.75rem; | |
| } | |
| p { | |
| font-size: 1rem; | |
| } | |
| } | |
| /* Mobile Phones */ | |
| @media (max-width: 480px) { | |
| .header .container { | |
| padding: 10px 12px; | |
| } | |
| .logo h1 { | |
| font-size: 20px; | |
| } | |
| .hero { | |
| padding: 40px 15px; | |
| } | |
| .hero h2 { | |
| font-size: 28px; | |
| } | |
| } | |
| /* About Section */ | |
| .about { | |
| padding: 80px 0; | |
| background-color: #FEFDFB; /* Match body background */ | |
| } | |
| .about-grid { | |
| display: grid; | |
| grid-template-columns: 1.2fr 1fr; | |
| gap: 60px; | |
| align-items: center; | |
| padding: 40px 0; | |
| } | |
| .about-content { | |
| animation: fadeInLeft 0.8s ease-out; | |
| } | |
| .about-image { | |
| position: relative; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: 0 20px 40px rgba(14, 30, 74, 0.15); | |
| transform: rotate(-2deg); | |
| transition: transform 0.4s ease; | |
| animation: fadeInRight 0.8s ease-out; | |
| } | |
| .about-image:hover { | |
| transform: rotate(0) scale(1.02); | |
| } | |
| .about-image img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| transition: transform 0.5s ease; | |
| } | |
| .about-image:hover img { | |
| transform: scale(1.05); | |
| } | |
| @keyframes fadeInLeft { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes fadeInRight { | |
| from { | |
| opacity: 0; | |
| transform: translateX(30px) rotate(-2deg); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0) rotate(-2deg); | |
| } | |
| } | |
| .about-content h2 { | |
| color: #0e1e4a; | |
| font-family: 'Georgia', serif; | |
| font-size: 36px; | |
| margin-bottom: 30px; | |
| text-shadow: 1px 1px 2px rgba(184, 134, 11, 0.3); | |
| } | |
| .about-content p { | |
| color: #334155; | |
| font-family: 'Georgia', serif; | |
| font-size: 16px; | |
| line-height: 1.8; | |
| margin-bottom: 20px; | |
| } | |
| .about-content p:last-of-type { | |
| margin-bottom: 30px; | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: #0e1e4a; | |
| border: 2px solid #0e1e4a; | |
| padding: 12px 30px; | |
| border-radius: 6px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-family: 'Georgia', serif; | |
| font-size: 16px; | |
| } | |
| .btn-secondary:hover { | |
| background: #0e1e4a; | |
| color: #F8FAFC; | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 12px rgba(14, 30, 74, 0.3); | |
| } | |
| .about-image { | |
| text-align: center; | |
| } | |
| .about-image img { | |
| max-width: 100%; | |
| height: auto; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 30px rgba(30, 58, 138, 0.3); | |
| border: 3px solid #B8860B; | |
| } | |
| /* Responsive About Section */ | |
| @media (max-width: 768px) { | |
| .about { | |
| padding: 60px 0; | |
| } | |
| .about-grid { | |
| grid-template-columns: 1fr; | |
| gap: 40px; | |
| text-align: center; | |
| } | |
| .about-content h2 { | |
| font-size: 28px; | |
| } | |
| .about-content p { | |
| text-align: left; | |
| } | |
| } | |
| /* Quote Section */ | |
| .quote-section { | |
| padding: 80px 0; | |
| background-color: #F1F5F9; /* Use a light grey-blue to separate from About section */ | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .quote-section::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="academic-pattern" patternUnits="userSpaceOnUse" width="30" height="30"><circle cx="15" cy="15" r="1.5" fill="%23B8860B" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23academic-pattern)"/></svg>'); | |
| opacity: 0.3; | |
| } | |
| .quote-content { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| text-align: center; | |
| padding: 40px 20px; | |
| } | |
| .quote-mark { | |
| font-family: 'Georgia', serif; | |
| font-size: 120px; | |
| color: #B8860B; | |
| line-height: 1; | |
| opacity: 0.8; | |
| text-shadow: 2px 2px 4px rgba(14, 30, 74, 0.3); | |
| } | |
| .quote-mark.opening { | |
| position: absolute; | |
| top: -20px; | |
| left: -10px; | |
| } | |
| .quote-mark.closing { | |
| position: absolute; | |
| bottom: -60px; | |
| right: -10px; | |
| } | |
| blockquote { | |
| font-family: 'Georgia', serif; | |
| font-size: 28px; | |
| line-height: 1.6; | |
| color: #0e1e4a; | |
| font-style: italic; | |
| margin: 0; | |
| padding: 60px 80px; | |
| text-shadow: 1px 1px 2px rgba(30, 58, 138, 0.5); | |
| position: relative; | |
| border: none; | |
| } | |
| blockquote::before, | |
| blockquote::after { | |
| content: ''; | |
| position: absolute; | |
| width: 80px; | |
| height: 3px; | |
| background: linear-gradient(90deg, transparent, #B8860B, transparent); | |
| } | |
| blockquote::before { | |
| top: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| blockquote::after { | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| /* Responsive Quote Section */ | |
| @media (max-width: 768px) { | |
| .quote-section { | |
| padding: 60px 0; | |
| } | |
| .quote-content { | |
| padding: 20px 15px; | |
| } | |
| .quote-mark { | |
| font-size: 80px; | |
| } | |
| .quote-mark.opening { | |
| top: -10px; | |
| left: 5px; | |
| } | |
| .quote-mark.closing { | |
| bottom: -40px; | |
| right: 5px; | |
| } | |
| blockquote { | |
| font-size: 22px; | |
| padding: 40px 50px; | |
| } | |
| blockquote::before, | |
| blockquote::after { | |
| width: 60px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| blockquote { | |
| font-size: 18px; | |
| padding: 30px 20px; | |
| } | |
| .quote-mark { | |
| font-size: 60px; | |
| } | |
| } | |
| /* Background & Credentials Section */ | |
| .credentials { | |
| padding: 80px 0; | |
| background-color: #FEFDFB; | |
| } | |
| .credentials-title { | |
| text-align: center; | |
| color: #0e1e4a; | |
| font-family: 'Georgia', serif; | |
| font-size: 42px; | |
| margin-bottom: 60px; | |
| text-shadow: 2px 2px 4px rgba(184, 134, 11, 0.3); | |
| } | |
| .credentials-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 40px; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .credential-card { | |
| background: #FFFFFF; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: 0 8px 25px rgba(30, 58, 138, 0.15); /* Use a blue-based shadow for consistency */ | |
| border: 2px solid #E2E8F0; /* Softer default border */ | |
| transition: all 0.3s ease; | |
| display: flex; | |
| min-height: 200px; | |
| } | |
| .credential-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 12px 30px rgba(30, 58, 138, 0.2); | |
| border-color: #B8860B; /* Use consistent gold for accent */ | |
| } | |
| .card-image { | |
| flex: 0 0 40%; | |
| overflow: hidden; | |
| } | |
| .card-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.3s ease; | |
| } | |
| .credential-card:hover .card-image img { | |
| transform: scale(1.05); | |
| } | |
| .card-content { | |
| flex: 1; | |
| padding: 25px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .card-content h3 { | |
| color: #0e1e4a; | |
| font-family: 'Georgia', serif; | |
| font-size: 18px; | |
| font-weight: bold; | |
| margin-bottom: 8px; | |
| line-height: 1.3; | |
| } | |
| .card-content .degree { | |
| color: #475569; | |
| font-family: 'Georgia', serif; | |
| font-size: 14px; | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| line-height: 1.4; | |
| } | |
| .card-content .location { | |
| color: #64748B; | |
| font-family: 'Georgia', serif; | |
| font-size: 13px; | |
| font-style: italic; | |
| } | |
| /* Responsive Credentials Section */ | |
| @media (max-width: 768px) { | |
| .credentials { | |
| padding: 60px 0; | |
| } | |
| .credentials-title { | |
| font-size: 32px; | |
| margin-bottom: 40px; | |
| } | |
| .credentials-grid { | |
| grid-template-columns: 1fr; | |
| gap: 30px; | |
| padding: 0 20px; | |
| } | |
| .credential-card { | |
| flex-direction: column; | |
| min-height: auto; | |
| } | |
| .card-image { | |
| flex: 0 0 150px; | |
| } | |
| .card-content { | |
| padding: 20px; | |
| } | |
| .card-content h3 { | |
| font-size: 16px; | |
| } | |
| } | |
| /* Professional Contributions Section */ | |
| .contributions { | |
| padding: 80px 0; | |
| background-color: #F1F5F9; | |
| } | |
| .contributions-title { | |
| text-align: center; | |
| color: #0e1e4a; | |
| font-family: 'Georgia', serif; | |
| font-size: 42px; | |
| margin-bottom: 60px; | |
| text-shadow: 2px 2px 4px rgba(184, 134, 11, 0.3); | |
| } | |
| .contributions-list { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .contribution-item { | |
| display: flex; | |
| align-items: flex-start; | |
| background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%); | |
| padding: 30px; | |
| margin-bottom: 25px; | |
| border-radius: 12px; | |
| box-shadow: 0 8px 25px rgba(30, 58, 138, 0.15); | |
| border: 2px solid #B8860B; | |
| transition: all 0.3s ease; | |
| } | |
| .contribution-item:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 12px 30px rgba(30, 58, 138, 0.25); | |
| border-color: #0e1e4a; /* Use navy for hover border */ | |
| } | |
| .contribution-icon { | |
| flex: 0 0 60px; | |
| margin-right: 20px; | |
| padding: 10px; | |
| background: #FFFFFF; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3); | |
| } | |
| .contribution-icon svg { | |
| /* The stroke is set to currentColor in the HTML for easier styling */ | |
| color: #B8860B; | |
| } | |
| .contribution-content { | |
| flex: 1; | |
| } | |
| .contribution-content h3 { | |
| color: #0e1e4a; | |
| font-family: 'Georgia', serif; | |
| font-size: 20px; | |
| font-weight: bold; | |
| margin-bottom: 8px; | |
| line-height: 1.3; | |
| } | |
| .contribution-content p { | |
| color: #475569; | |
| font-family: 'Georgia', serif; | |
| font-size: 16px; | |
| line-height: 1.5; | |
| margin: 0; | |
| } | |
| /* Responsive Contributions Section */ | |
| @media (max-width: 768px) { | |
| .contributions { | |
| padding: 60px 0; | |
| } | |
| .contributions-title { | |
| font-size: 32px; | |
| margin-bottom: 40px; | |
| } | |
| .contributions-list { | |
| padding: 0 20px; | |
| } | |
| .contribution-item { | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .contribution-icon { | |
| flex: 0 0 50px; | |
| margin-right: 15px; | |
| } | |
| .contribution-icon svg { | |
| width: 30px; | |
| height: 30px; | |
| } | |
| .contribution-content h3 { | |
| font-size: 18px; | |
| } | |
| .contribution-content p { | |
| font-size: 14px; | |
| } | |
| } | |
| /* Book Spotlight Section */ | |
| .book-spotlight { | |
| padding: 80px 0; | |
| background-color: #FEFDFB; | |
| } | |
| .spotlight-title { | |
| text-align: center; | |
| color: #0e1e4a; | |
| font-family: 'Georgia', serif; | |
| font-size: 42px; | |
| margin-bottom: 60px; | |
| text-shadow: 2px 2px 4px rgba(184, 134, 11, 0.3); | |
| } | |
| .books-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 40px; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .book-card { | |
| background: #FFFFFF; | |
| border-radius: 16px; | |
| overflow: hidden; | |
| box-shadow: 0 10px 30px rgba(30, 58, 138, 0.15); | |
| border: 2px solid #E2E8F0; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .book-card.featured { | |
| border-color: #B8860B; | |
| box-shadow: 0 15px 40px rgba(30, 58, 138, 0.25); | |
| } | |
| .book-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 50px rgba(30, 58, 138, 0.25); | |
| } | |
| .book-card.featured:hover { | |
| box-shadow: 0 25px 60px rgba(30, 58, 138, 0.35); | |
| } | |
| .book-image { | |
| background: linear-gradient(135deg, #0e1e4a 0%, #3730A3 100%); | |
| padding: 0; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .book-card.featured .book-image { | |
| background: linear-gradient(135deg, #0e1e4a 0%, #3730A3 100%); | |
| } | |
| .book-cover-placeholder { | |
| display: inline-block; | |
| padding: 20px; | |
| background: #FFFFFF; | |
| border-radius: 8px; | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .book-card.featured .book-cover-placeholder { | |
| background: #F8FAFC; | |
| } | |
| .book-cover { | |
| width: 100%; | |
| height: 300px; | |
| object-fit: contain; | |
| border-radius: 8px; | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); | |
| transition: transform 0.3s ease; | |
| } | |
| .book-card:hover .book-cover { | |
| transform: scale(1.02); | |
| } | |
| .book-content { | |
| padding: 30px; | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .book-badge { | |
| display: inline-block; | |
| background: #0e1e4a; | |
| color: #FFFFFF; | |
| padding: 6px 12px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-bottom: 15px; | |
| align-self: flex-start; | |
| font-family: 'Georgia', serif; | |
| } | |
| .book-card.featured .book-badge { | |
| background: #B8860B; | |
| } | |
| .book-content h3 { | |
| color: #0e1e4a; | |
| font-family: 'Georgia', serif; | |
| font-size: 24px; | |
| font-weight: bold; | |
| margin-bottom: 8px; | |
| line-height: 1.3; | |
| } | |
| .book-subtitle { | |
| color: #64748B; | |
| font-family: 'Georgia', serif; | |
| font-size: 16px; | |
| font-style: italic; | |
| margin-bottom: 15px; | |
| } | |
| .book-description { | |
| color: #475569; | |
| font-family: 'Georgia', serif; | |
| font-size: 16px; | |
| line-height: 1.6; | |
| margin-bottom: 20px; | |
| flex: 1; | |
| } | |
| .book-details { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 15px; | |
| margin-bottom: 25px; | |
| } | |
| .detail-item { | |
| color: #64748B; | |
| font-family: 'Georgia', serif; | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .book-cta { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: #0e1e4a; /* Use solid navy */ | |
| color: #FFFFFF; | |
| padding: 14px 24px; | |
| border-radius: 8px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-family: 'Georgia', serif; | |
| transition: all 0.3s ease; | |
| align-self: flex-start; | |
| box-shadow: 0 4px 15px rgba(14, 30, 74, 0.3); | |
| } | |
| .book-cta:hover { | |
| background: #1E293B; /* Use medium blue from palette */ | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(30, 58, 138, 0.4); | |
| } | |
| .book-cta.secondary { | |
| background: transparent; | |
| color: #0e1e4a; | |
| border: 2px solid #0e1e4a; | |
| box-shadow: none; | |
| } | |
| .book-cta.secondary:hover { | |
| background: #0e1e4a; | |
| color: #FFFFFF; | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(14, 30, 74, 0.3); | |
| } | |
| /* Responsive Book Spotlight */ | |
| @media (max-width: 768px) { | |
| .book-spotlight { | |
| padding: 60px 0; | |
| } | |
| .spotlight-title { | |
| font-size: 32px; | |
| margin-bottom: 40px; | |
| } | |
| .books-grid { | |
| grid-template-columns: 1fr; | |
| gap: 30px; | |
| padding: 0 20px; | |
| } | |
| .book-card { | |
| flex-direction: column; | |
| } | |
| .book-image { | |
| padding: 30px; | |
| } | |
| .book-content { | |
| padding: 25px; | |
| } | |
| .book-content h3 { | |
| font-size: 20px; | |
| } | |
| .book-description { | |
| font-size: 15px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .books-grid { | |
| padding: 0 15px; | |
| } | |
| .book-content { | |
| padding: 20px; | |
| } | |
| .book-details { | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| } | |
| /* Upcoming Book Projects Section */ | |
| .upcoming-projects { | |
| padding: 80px 0; | |
| background-color: #F1F5F9; | |
| } | |
| .projects-title { | |
| text-align: center; | |
| color: #0e1e4a; | |
| font-family: 'Georgia', serif; | |
| font-size: 42px; | |
| margin-bottom: 60px; | |
| text-shadow: 2px 2px 4px rgba(184, 134, 11, 0.3); | |
| } | |
| .projects-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 40px; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .project-card { | |
| background: #fff; | |
| border-radius: 16px; | |
| box-shadow: 0 10px 30px rgba(30, 58, 138, 0.12); | |
| padding: 32px 24px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| transition: box-shadow 0.3s, transform 0.3s; | |
| } | |
| .project-card:hover { | |
| box-shadow: 0 20px 50px rgba(30, 58, 138, 0.18); | |
| transform: translateY(-4px); | |
| } | |
| .project-badge { | |
| background: #B8860B; | |
| color: #fff; | |
| padding: 6px 14px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| margin-bottom: 14px; | |
| font-family: 'Georgia', serif; | |
| } | |
| .project-card .project-badge { | |
| background: #334155; /* Use slate blue from palette */ | |
| } | |
| .project-card:nth-child(3) .project-badge { | |
| background: #B8860B; | |
| } | |
| .project-card h3 { | |
| color: #0e1e4a; | |
| font-size: 22px; | |
| font-family: 'Georgia', serif; | |
| margin-bottom: 8px; | |
| font-weight: bold; | |
| } | |
| .project-details { | |
| color: #64748B; | |
| font-size: 14px; | |
| margin-bottom: 16px; | |
| font-family: 'Georgia', serif; | |
| } | |
| .project-description { | |
| color: #475569; | |
| font-size: 15px; | |
| line-height: 1.6; | |
| font-family: 'Georgia', serif; | |
| } | |
| @media (max-width: 900px) { | |
| .projects-grid { | |
| grid-template-columns: 1fr; | |
| gap: 30px; | |
| } | |
| .project-card { | |
| margin: 0 auto; | |
| max-width: 90%; | |
| } | |
| .project-card { | |
| padding: 24px 12px; | |
| } | |
| } | |
| /* Small Tablets */ | |
| @media (max-width: 600px) { | |
| .projects-title { | |
| font-size: 24px; | |
| margin-bottom: 24px; | |
| } | |
| .project-card { | |
| padding: 20px; | |
| } | |
| .project-title { | |
| font-size: 1.25rem; | |
| } | |
| .project-description { | |
| font-size: 0.9rem; | |
| } | |
| .slider-arrow { | |
| width: 32px; | |
| height: 32px; | |
| font-size: 18px; | |
| } | |
| .slider-track { | |
| max-width: 100%; | |
| } | |
| .project-card { | |
| min-width: 90vw; | |
| max-width: 90vw; | |
| margin: 0 4px; | |
| padding: 18px 6px; | |
| } | |
| } | |
| /* Personal Philosophy Section */ | |
| .personal-philosophy { | |
| padding: 80px 0; | |
| background-color: #FEFDFB; /* Use main cream white background */ | |
| } | |
| .philosophy-title { | |
| text-align: center; | |
| color: #0e1e4a; | |
| font-family: 'Georgia', serif; | |
| font-size: 38px; | |
| margin-bottom: 40px; | |
| text-shadow: 2px 2px 4px rgba(184, 134, 11, 0.2); | |
| } | |
| .philosophy-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| text-align: center; | |
| } | |
| .philosophy-content blockquote { | |
| font-family: 'Georgia', serif; | |
| font-size: 24px; | |
| color: #475569; | |
| font-style: italic; | |
| margin-bottom: 30px; | |
| background: #F1F5F9; | |
| border-left: 5px solid #B8860B; | |
| padding: 20px 30px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 15px rgba(30, 58, 138, 0.08); | |
| } | |
| .philosophy-content p { | |
| color: #334155; | |
| font-size: 17px; | |
| line-height: 1.7; | |
| font-family: 'Georgia', serif; | |
| } | |
| /* Contact/Follow Section */ | |
| .contact-follow { | |
| padding: 80px 0; | |
| background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%); | |
| } | |
| .contact-title { | |
| text-align: center; | |
| color: #0e1e4a; | |
| font-family: 'Georgia', serif; | |
| font-size: 38px; | |
| margin-bottom: 40px; | |
| text-shadow: 2px 2px 4px rgba(184, 134, 11, 0.2); | |
| } | |
| .contact-content { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| text-align: center; | |
| } | |
| .contact-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 30px 0 0 0; | |
| } | |
| .contact-list li { | |
| margin-bottom: 18px; | |
| } | |
| .contact-link { | |
| color: #0e1e4a; | |
| font-size: 18px; | |
| text-decoration: none; | |
| font-family: 'Georgia', serif; | |
| transition: color 0.2s; | |
| } | |
| .contact-link:hover { | |
| color: #B8860B; | |
| text-decoration: underline; | |
| } | |
| /* Footer Styles */ | |
| .site-footer { | |
| background: #0e1e4a; | |
| padding: 40px 0 0 0; | |
| font-family: 'Georgia', serif; | |
| color: #fff; | |
| box-shadow: 0 -2px 15px rgba(30, 58, 138, 0.08); | |
| } | |
| .footer-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px 20px 20px; | |
| } | |
| .footer-left { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .footer-logo { | |
| font-size: 24px; | |
| font-weight: bold; | |
| color: #ffffff; | |
| text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.15); | |
| letter-spacing: 1px; | |
| } | |
| .footer-center { | |
| flex: 2; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .footer-links { | |
| display: flex; | |
| gap: 32px; | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .footer-links a { | |
| color: #fff; | |
| text-decoration: none; | |
| font-size: 18px; | |
| font-weight: 500; | |
| transition: color 0.2s; | |
| } | |
| .footer-links a:hover { | |
| color: #B8860B; | |
| } | |
| .footer-right { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-end; | |
| gap: 10px; | |
| } | |
| .footer-social { | |
| display: flex; | |
| gap: 18px; | |
| margin-bottom: 8px; | |
| } | |
| .footer-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #ffffff; | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| background: #1E293B; /* Use medium blue for icon background */ | |
| color: #B8860B; /* Set icon color via color property */ | |
| box-shadow: 0 2px 8px rgba(30, 58, 138, 0.08); | |
| transition: all 0.2s; | |
| } | |
| .footer-icon:hover { | |
| background: #B8860B; | |
| color: #FEFDFB; /* On hover, icon becomes cream white */ | |
| } | |
| /* Stroke is now controlled by the parent's color property */ | |
| .footer-email a { | |
| color: #fff; | |
| font-size: 16px; | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .footer-email a:hover { | |
| color: #B8860B; | |
| text-decoration: underline; | |
| } | |
| .footer-copyright { | |
| text-align: center; | |
| background: #0e1e4a; | |
| color: #fff; | |
| font-size: 15px; | |
| padding: 18px 0 10px 0; | |
| margin-top: 18px; | |
| border-top: 1px solid #B8860B; | |
| } | |
| /* Footer Responsive */ | |
| @media (max-width: 900px) { | |
| .footer-container { | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| padding: 40px 20px; | |
| } | |
| .footer-section { | |
| margin-bottom: 30px; | |
| width: 100%; | |
| padding: 0 15px; | |
| } | |
| .footer-section:last-child { | |
| margin-bottom: 0; | |
| } | |
| .footer-links { | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 15px; | |
| } | |
| .footer-links a { | |
| margin: 0 10px 10px 0; | |
| } | |
| .footer-copyright { | |
| padding: 15px 10px; | |
| font-size: 14px; | |
| } | |
| .footer-left, | |
| .footer-center, | |
| .footer-right { | |
| align-items: center; | |
| justify-content: center; | |
| width: 100%; | |
| padding: 0 10px 20px; | |
| } | |
| } | |
| /* Extra Small Phones (6.5-inch and below) */ | |
| @media (max-width: 400px) { | |
| /* Base adjustments */ | |
| html { | |
| font-size: 14px; | |
| } | |
| .container { | |
| padding: 0 12px; | |
| } | |
| h1 { | |
| font-size: 1.8rem; | |
| line-height: 1.2; | |
| } | |
| h2 { | |
| font-size: 1.6rem; | |
| line-height: 1.25; | |
| } | |
| p, li, a { | |
| font-size: 1rem; | |
| line-height: 1.6; | |
| } | |
| /* Header adjustments */ | |
| .header .container { | |
| padding: 10px 12px; | |
| } | |
| .logo h1 { | |
| font-size: 1.3rem; | |
| } | |
| /* Hero section */ | |
| .hero h1 { | |
| font-size: 2rem; | |
| margin-bottom: 15px; | |
| } | |
| .hero p { | |
| font-size: 1rem; | |
| margin-bottom: 20px; | |
| } | |
| /* Buttons */ | |
| .btn-primary { | |
| padding: 10px 20px; | |
| font-size: 1rem; | |
| min-width: 140px; | |
| } | |
| /* Navigation */ | |
| .nav-mobile-links { | |
| padding: 20px 15px; | |
| } | |
| .nav-mobile-links a { | |
| font-size: 1.1rem; | |
| padding: 10px 0; | |
| } | |
| /* Sections */ | |
| section { | |
| padding: 40px 0; | |
| } | |
| /* Cards and grids */ | |
| .project-card, | |
| .book-card, | |
| .credential-card { | |
| padding: 20px 15px; | |
| margin: 0 0 20px 0; | |
| } | |
| /* Footer */ | |
| .footer { | |
| padding: 30px 0 0; | |
| } | |
| .footer-container { | |
| padding: 30px 15px; | |
| } | |
| .footer-section { | |
| margin-bottom: 25px; | |
| } | |
| .footer-links { | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .footer-links a { | |
| margin: 5px 0; | |
| display: block; | |
| width: 100%; | |
| text-align: center; | |
| } | |
| .footer-copyright { | |
| font-size: 0.85rem; | |
| padding: 15px 10px; | |
| margin-top: 15px; | |
| } | |
| } | |
| /* Extra adjustments for very small screens (below 360px) */ | |
| @media (max-width: 360px) { | |
| /* Even smaller text for very small screens */ | |
| html { | |
| font-size: 13px; | |
| } | |
| .container { | |
| padding: 0 8px; | |
| } | |
| h1 { | |
| font-size: 1.6rem; | |
| } | |
| h2 { | |
| font-size: 1.4rem; | |
| } | |
| .btn-primary { | |
| padding: 8px 16px; | |
| font-size: 0.95rem; | |
| } | |
| /* Adjust section padding */ | |
| section { | |
| padding: 30px 0; | |
| } | |
| /* Tighter spacing for cards */ | |
| .project-card, | |
| .book-card, | |
| .credential-card { | |
| padding: 15px 10px; | |
| margin: 0 0 15px 0; | |
| } | |
| /* Adjust footer for very small screens */ | |
| .footer-container { | |
| padding: 20px 10px; | |
| } | |
| .footer-section { | |
| margin-bottom: 20px; | |
| padding: 0 3px; | |
| } | |
| .footer-copyright { | |
| font-size: 0.8rem; | |
| padding: 10px 5px; | |
| margin-top: 10px; | |
| } | |
| .footer-left, | |
| .footer-center, | |
| .footer-right { | |
| gap: 24px; | |
| align-items: center; | |
| justify-content: center; | |
| width: 100%; | |
| } | |
| } | |