/* style.css */
/* -------------------------------------------------------------------------
1. CSS Variables
------------------------------------------------------------------------- */
:root {
/* Color Palette (Neutral with Brutalist/Biomorphic Touch) */
--color-background-light: #f4f4f5; /* Light Gray */
--color-background-medium: #e4e4e7; /* Medium Gray - for alt sections */
--color-background-dark: #18181b; /* Dark Gray / Near Black */
--color-text-primary: #27272a; /* Dark Gray for text */
--color-text-secondary: #52525b; /* Lighter Gray for secondary text */
--color-text-light: #ffffff; /* White text */
--color-text-accent: #0891b2; /* Cyan - Accent */
--color-primary: #0891b2; /* Cyan - Main accent, can be bold for brutalism */
--color-primary-darker: #0e7490; /* Darker Cyan for hover/active */
--color-accent: #f59e0b; /* Amber - Secondary accent */
--color-accent-darker: #d97706; /* Darker Amber */
--color-border: #a1a1aa; /* Border color for brutalist elements */
--color-border-light: #d4d4d8;
/* Gradients (Subtle Biomorphic) */
--gradient-subtle: linear-gradient(135deg, rgba(244, 244, 245, 0.1) 0%, rgba(228, 228, 231, 0.05) 100%);
--gradient-overlay: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
--gradient-hero-overlay: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6));
/* Fonts */
--font-primary: 'Roboto', sans-serif;
--font-secondary: 'Lato', sans-serif;
/* Spacing & Sizing */
--spacing-unit: 8px;
--header-height: 70px; /* Approximate header height */
/* Borders & Shadows */
--border-radius-subtle: 4px; /* Subtle biomorphic touch */
--border-radius-medium: 8px;
--box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.05);
--box-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
--box-shadow-brutalist: 4px 4px 0px var(--color-text-primary); /* Brutalist shadow */
}
/* -------------------------------------------------------------------------
2. Base Styles & Reset
------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px; /* Base font size */
}
body {
font-family: var(--font-secondary);
line-height: 1.65;
background-color: var(--color-background-light);
color: var(--color-text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden; /* Prevent horizontal scroll */
}
/* -------------------------------------------------------------------------
3. Typography
------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-primary);
font-weight: 700;
line-height: 1.3;
color: var(--color-text-primary);
margin-bottom: calc(var(--spacing-unit) * 2);
text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}
h1 { font-size: 2.8rem; margin-bottom: calc(var(--spacing-unit) * 3); } /* ~44.8px */
h2 { font-size: 2.2rem; } /* ~35.2px */
h3 { font-size: 1.6rem; } /* ~25.6px */
h4 { font-size: 1.25rem; } /* ~20px */
p {
margin-bottom: calc(var(--spacing-unit) * 2);
color: var(--color-text-secondary);
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover, a:focus {
color: var(--color-primary-darker);
text-decoration: underline;
}
ul, ol {
list-style-position: inside;
padding-left: calc(var(--spacing-unit) * 2);
margin-bottom: calc(var(--spacing-unit) * 2);
}
li {
margin-bottom: var(--spacing-unit);
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* -------------------------------------------------------------------------
4. Layout & Container
------------------------------------------------------------------------- */
.main-container {
width: 100%;
overflow-x: hidden; /* Ensure no horizontal scroll */
}
.container {
width: 90%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: calc(var(--spacing-unit) * 2);
padding-right: calc(var(--spacing-unit) * 2);
}
.text-center {
text-align: center;
}
/* -------------------------------------------------------------------------
5. Header & Navigation
------------------------------------------------------------------------- */
.site-header {
background-color: rgba(255, 255, 255, 0.9); /* Slight transparency for modern feel */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--color-border-light);
padding: var(--spacing-unit) 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
height: var(--header-height);
display: flex;
align-items: center;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.logo {
font-family: var(--font-primary);
font-size: 1.8rem; /* ~28.8px */
font-weight: 700;
color: var(--color-text-primary);
text-decoration: none;
}
.logo .logo-accent {
color: var(--color-primary);
}
.logo:hover, .logo:focus {
text-decoration: none;
opacity: 0.9;
}
.main-navigation ul {
list-style: none;
display: flex;
padding-left: 0;
margin-bottom: 0;
}
.main-navigation li {
margin-left: calc(var(--spacing-unit) * 3);
margin-bottom: 0;
}
.main-navigation a {
font-family: var(--font-secondary);
font-weight: 700;
color: var(--color-text-secondary);
text-decoration: none;
padding: calc(var(--spacing-unit)) calc(var(--spacing-unit) * 1.5);
border-radius: var(--border-radius-subtle);
transition: color 0.3s ease, background-color 0.3s ease;
}
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation li.active a { /* Add .active class with JS for current page */
color: var(--color-primary);
background-color: rgba(var(--color-primary-rgb, 8, 145, 178), 0.1); /* Assuming --color-primary-rgb is defined or convert hex to rgb */
}
.menu-toggle {
display: none; /* Hidden on desktop */
background: none;
border: none;
cursor: pointer;
padding: var(--spacing-unit);
}
.hamburger-icon {
display: block;
width: 25px;
height: 3px;
background-color: var(--color-text-primary);
position: relative;
transition: background-color 0.3s ease;
}
.hamburger-icon::before,
.hamburger-icon::after {
content: '';
display: block;
width: 100%;
height: 3px;
background-color: var(--color-text-primary);
position: absolute;
left: 0;
transition: transform 0.3s ease, top 0.3s ease;
}
.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { top: 8px; }
/* Active state for hamburger menu */
.menu-toggle[aria-expanded="true"] .hamburger-icon {
background-color: transparent; /* Middle line disappears */
}
.menu-toggle[aria-expanded="true"] .hamburger-icon::before {
transform: rotate(45deg);
top: 0;
}
.menu-toggle[aria-expanded="true"] .hamburger-icon::after {
transform: rotate(-45deg);
top: 0;
}
/* -------------------------------------------------------------------------
6. Section Styling (General)
------------------------------------------------------------------------- */
.section-padding {
padding-top: calc(var(--spacing-unit) * 8);
padding-bottom: calc(var(--spacing-unit) * 8);
}
/* Ensure content starts below fixed header on specific pages */
.privacy-policy-section, .terms-service-section, .about-us-section, #contact-page {
padding-top: calc(var(--header-height) + var(--spacing-unit) * 5); /* Header height + some extra space */
}
.section-title {
text-align: center;
margin-bottom: calc(var(--spacing-unit) * 5);
color: var(--color-text-primary);
position: relative; /* For potential pseudo-element underlines */
}
.section-title::after { /* Subtle brutalist underline */
content: '';
display: block;
width: 60px;
height: 3px;
background-color: var(--color-primary);
margin: var(--spacing-unit) auto 0;
}
.section-description {
text-align: center;
max-width: 700px;
margin-left: auto;
margin-right: auto;
margin-bottom: calc(var(--spacing-unit) * 4);
color: var(--color-text-secondary);
font-size: 1.1rem; /* ~17.6px */
}
.alt-bg {
background-color: var(--color-background-medium);
border-top: 1px solid var(--color-border-light);
border-bottom: 1px solid var(--color-border-light);
}
.parallax-bg {
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
color: var(--color-text-light); /* Default text color for parallax sections */
}
.parallax-bg .section-title,
.parallax-bg .section-description {
color: var(--color-text-light);
text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
.parallax-bg .section-title::after {
background-color: var(--color-accent); /* Different underline color for contrast */
}
.section-overlay, .hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-overlay);
z-index: 1;
}
.hero-overlay {
background: var(--gradient-hero-overlay);
}
.parallax-bg > .container { /* Ensure content is above overlay */
position: relative;
z-index: 2;
}
/* -------------------------------------------------------------------------
7. Global Button Styles
------------------------------------------------------------------------- */
.cta-button,
button,
input[type="submit"],
input[type="button"],
.modal-trigger, /* For buttons that trigger modals */
.external-link { /* For links styled as buttons */
display: inline-block;
font-family: var(--font-primary);
font-weight: 700;
font-size: 1rem; /* ~16px */
text-align: center;
text-decoration: none;
color: var(--color-text-light);
background-color: var(--color-primary);
padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3.5);
border: 2px solid var(--color-primary); /* Brutalist border */
border-radius: var(--border-radius-subtle); /* Subtle biomorphic curve */
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--box-shadow-brutalist); /* Brutalist shadow */
position: relative;
top: 0;
left: 0;
}
.cta-button:hover, .cta-button:focus,
button:hover, button:focus,
input[type="submit"]:hover, input[type="submit"]:focus,
input[type="button"]:hover, input[type="button"]:focus,
.modal-trigger:hover, .modal-trigger:focus,
.external-link:hover, .external-link:focus {
background-color: var(--color-primary-darker);
border-color: var(--color-primary-darker);
color: var(--color-text-light);
text-decoration: none;
box-shadow: 2px 2px 0px var(--color-text-primary); /* Slightly adjusted hover shadow */
top: 2px; /* Brutalist press effect */
left: 2px; /* Brutalist press effect */
}
/* Secondary button style (example) */
.button-secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
box-shadow: 4px 4px 0px var(--color-primary);
}
.button-secondary:hover, .button-secondary:focus {
background-color: rgba(var(--color-primary-rgb, 8, 145, 178), 0.1);
color: var(--color-primary-darker);
border-color: var(--color-primary-darker);
box-shadow: 2px 2px 0px var(--color-primary-darker);
}
/* 'Read more' style for links/buttons within cards or articles */
.read-more-link { /* Apply this class to <a> or <button> */
font-size: 0.9rem;
padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
background-color: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
box-shadow: none;
}
.read-more-link:hover, .read-more-link:focus {
background-color: var(--color-primary);
color: var(--color-text-light);
border-color: var(--color-primary);
top: 0;
left: 0;
box-shadow: 2px 2px 0px var(--color-primary-darker);
}
/* -------------------------------------------------------------------------
8. Hero Section (#hero)
------------------------------------------------------------------------- */
.hero-section {
min-height: 85vh; /* Use vh for responsive height, not fixed px */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-text-light);
position: relative; /* For overlay */
}
.hero-content {
position: relative; /* Above overlay */
z-index: 2;
max-width: 800px;
}
.hero-content h1 {
font-size: 3.5rem; /* ~56px */
margin-bottom: calc(var(--spacing-unit) * 2);
color: var(--color-text-light); /* Explicitly white as per requirement */
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
.hero-content h1::after {
display: none; /* No underline for hero title */
}
.hero-content p {
font-size: 1.3rem; /* ~20.8px */
margin-bottom: calc(var(--spacing-unit) * 4);
color: var(--color-text-light); /* Explicitly white as per requirement */
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.hero-section .cta-button {
font-size: 1.1rem;
padding: calc(var(--spacing-unit) * 1.8) calc(var(--spacing-unit) * 4);
background-color: var(--color-accent);
border-color: var(--color-accent);
box-shadow: 4px 4px 0px var(--color-accent-darker);
}
.hero-section .cta-button:hover, .hero-section .cta-button:focus {
background-color: var(--color-accent-darker);
border-color: var(--color-accent-darker);
box-shadow: 2px 2px 0px var(--color-accent-darker);
}
/* -------------------------------------------------------------------------
9. Cards (General .card)
------------------------------------------------------------------------- */
.card {
background-color: var(--color-text-light);
border: 1px solid var(--color-border-light);
border-radius: var(--border-radius-medium); /* Biomorphic touch */
box-shadow: var(--box-shadow-medium);
overflow: hidden; /* Ensures content respects border-radius */
display: flex;
flex-direction: column;
/* align-items: center; -- This would center all content blocks, content specific alignment below */
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-align: left; /* Default text alignment, can be overridden */
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.card-image, .image-container { /* .image-container is often used in HTML */
width: 100%;
height: 220px; /* Fixed height for image containers in cards */
overflow: hidden;
background-color: var(--color-background-medium); /* Placeholder bg */
}
.card-image img, .image-container img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensures image covers the container without distortion */
display: block; /* Removes extra space below image */
transition: transform 0.4s ease;
}
.card:hover .card-image img, .card:hover .image-container img {
transform: scale(1.05); /* Subtle zoom on hover */
}
.card-content {
padding: calc(var(--spacing-unit) * 2.5);
flex-grow: 1; /* Allows content to fill space if cards are in a flex row and have different heights */
display: flex;
flex-direction: column;
}
.card-content h3 {
margin-top: 0;
margin-bottom: var(--spacing-unit);
color: var(--color-text-primary);
}
.card-content p {
font-size: 0.95rem; /* ~15.2px */
color: var(--color-text-secondary);
flex-grow: 1; /* Pushes button to bottom if card content varies */
margin-bottom: calc(var(--spacing-unit) * 2);
}
.card-content .modal-trigger, .card-content .external-link {
margin-top: auto; /* Pushes button to the bottom of card-content */
align-self: flex-start; /* Aligns button to the left */
}
/* For cards that should have centered content, like simple icon cards */
.card.text-center .card-content {
text-align: center;
align-items: center; /* Center block elements like buttons */
}
.card.text-center .card-content .modal-trigger,
.card.text-center .card-content .external-link {
align-self: center;
}
/* Grid layouts for card sections */
.features-grid, .projects-grid, .blog-grid, .media-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: calc(var(--spacing-unit) * 3);
}
.resources-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: calc(var(--spacing-unit) * 2.5);
}
.resource-item.card { /* Simpler card style for resources */
box-shadow: var(--box-shadow-light);
border-left: 4px solid var(--color-primary);
}
.resource-item.card .card-content {
padding: calc(var(--spacing-unit) * 2);
}
.resource-item.card h4 {
font-size: 1.1rem;
margin-bottom: var(--spacing-unit);
}
.resource-item.card p {
font-size: 0.9rem;
margin-bottom: var(--spacing-unit);
}
.resource-source {
font-size: 0.8rem;
color: var(--color-text-secondary);
font-style: italic;
display: block;
margin-top: var(--spacing-unit);
}
/* Blog specific */
.blog-post .post-meta {
font-size: 0.85rem;
color: var(--color-text-secondary);
margin-bottom: var(--spacing-unit);
font-style: italic;
}
/* -------------------------------------------------------------------------
10. Research Section Carousel
------------------------------------------------------------------------- */
.research-carousel-container {
position: relative;
max-width: 1000px; /* Adjust as needed */
margin: 0 auto;
overflow: hidden; /* Important for carousel functionality */
}
.content-carousel {
display: flex; /* Items will be side-by-side */
transition: transform 0.5s ease-in-out; /* For sliding effect */
}
.carousel-item {
min-width: 33.33%; /* Show 3 items by default, adjust for more/less */
flex-shrink: 0; /* Prevent items from shrinking */
padding: 0 calc(var(--spacing-unit)); /* Spacing between items */
/* Ensure carousel items (cards) are styled correctly */
}
.carousel-item.card {
margin-bottom: 0; /* Override default card margin if any */
}
.carousel-control {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0,0,0,0.5);
color: var(--color-text-light);
border: none;
padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
cursor: pointer;
z-index: 10;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 1.5rem;
line-height: 1;
transition: background-color 0.3s ease;
}
.carousel-control:hover {
background-color: rgba(0,0,0,0.8);
}
.carousel-control.prev { left: var(--spacing-unit); }
.carousel-control.next { right: var(--spacing-unit); }
/* -------------------------------------------------------------------------
11. Careers Section
------------------------------------------------------------------------- */
.job-openings {
background-color: rgba(255,255,255, 0.15); /* Light glassmorphism on parallax */
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
padding: calc(var(--spacing-unit) * 3);
border-radius: var(--border-radius-medium);
max-width: 700px;
margin: calc(var(--spacing-unit) * 3) auto 0;
text-align: center;
}
.job-openings h4 {
color: var(--color-text-light);
margin-bottom: calc(var(--spacing-unit) * 2);
}
.job-openings ul {
list-style: none;
padding-left: 0;
margin-bottom: calc(var(--spacing-unit) * 3);
}
.job-openings li {
color: var(--color-text-light);
padding: var(--spacing-unit) 0;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.job-openings li:last-child {
border-bottom: none;
}
.job-openings .cta-button {
background-color: var(--color-accent);
border-color: var(--color-accent);
box-shadow: 4px 4px 0px var(--color-accent-darker);
}
.job-openings .cta-button:hover {
background-color: var(--color-accent-darker);
border-color: var(--color-accent-darker);
box-shadow: 2px 2px 0px var(--color-accent-darker);
}
/* -------------------------------------------------------------------------
12. Contact Section & Form
------------------------------------------------------------------------- */
.contact-form-container {
background-color: var(--color-text-light);
padding: calc(var(--spacing-unit) * 4);
border-radius: var(--border-radius-medium);
box-shadow: var(--box-shadow-medium);
max-width: 700px;
margin: 0 auto calc(var(--spacing-unit) * 4);
}
.contact-form .form-group {
margin-bottom: calc(var(--spacing-unit) * 2.5);
}
.contact-form label {
display: block;
font-weight: 700;
margin-bottom: var(--spacing-unit);
color: var(--color-text-primary);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
width: 100%;
padding: calc(var(--spacing-unit) * 1.5);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-subtle);
font-family: var(--font-secondary);
font-size: 1rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 8, 145, 178), 0.3);
}
.contact-form textarea {
min-height: 120px;
resize: vertical;
}
.contact-form .submit-button {
width: 100%;
padding: calc(var(--spacing-unit) * 1.8) calc(var(--spacing-unit) * 3);
}
/* Toggle Switch */
.toggle-label {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
font-weight: normal;
}
.toggle-label span:first-child {
margin-right: var(--spacing-unit);
}
.toggle-switch {
position: relative;
display: inline-block;
width: 50px;
height: 28px;
appearance: none;
-webkit-appearance: none;
background-color: var(--color-border-light);
border-radius: 34px;
transition: background-color 0.3s;
}
.toggle-switch::before {
content: "";
position: absolute;
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s;
}
.toggle-switch:checked {
background-color: var(--color-primary);
}
.toggle-switch:checked::before {
transform: translateX(22px);
}
.contact-details {
text-align: center;
}
.contact-details h3 {
margin-bottom: calc(var(--spacing-unit) * 2);
}
.contact-details p {
margin-bottom: var(--spacing-unit);
}
/* contact.html specific layout */
.contact-content-wrapper {
display: grid;
grid-template-columns: 1fr;
gap: calc(var(--spacing-unit) * 5);
align-items: start; /* Align items to the start of their grid area */
}
@media (min-width: 992px) {
.contact-content-wrapper {
grid-template-columns: 1.5fr 1fr; /* Form takes more space */
}
}
.contact-form-container .form-title,
.contact-info-container .info-title {
font-size: 1.8rem;
margin-bottom: calc(var(--spacing-unit) * 3);
text-align: left;
}
.contact-info-container .info-title {
text-align: center;
}
.contact-info-container .contact-details {
background-color: var(--color-background-medium);
padding: calc(var(--spacing-unit) * 3);
border-radius: var(--border-radius-medium);
text-align: left;
}
.contact-detail-item {
display: flex;
align-items: flex-start;
margin-bottom: calc(var(--spacing-unit) * 2.5);
}
.contact-icon {
width: 40px; /* Fixed width */
height: 40px; /* Fixed height */
margin-right: calc(var(--spacing-unit) * 2);
flex-shrink: 0;
filter: grayscale(50%) opacity(0.7);
}
.contact-detail-item div h3 {
font-size: 1.1rem;
margin-bottom: calc(var(--spacing-unit) * 0.5);
color: var(--color-text-primary);
}
.contact-detail-item div p {
margin-bottom: calc(var(--spacing-unit) * 0.5);
font-size: 0.95rem;
color: var(--color-text-secondary);
}
/* -------------------------------------------------------------------------
13. Modals
------------------------------------------------------------------------- */
.modal {
display: none; /* Hidden by default, JS toggles this */
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.6); /* Dark overlay */
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.modal-content {
background-color: var(--color-text-light);
margin: 10vh auto; /* 10% from top and centered */
padding: calc(var(--spacing-unit) * 4);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-medium); /* Biomorphic touch */
width: 80%;
max-width: 700px;
box-shadow: var(--box-shadow-medium);
position: relative;
animation: animate__fadeInUp 0.5s; /* From Animate.css */
}
.modal-content h3 {
margin-top: 0;
margin-bottom: calc(var(--spacing-unit) * 2);
color: var(--color-text-primary);
}
.modal-content p {
margin-bottom: calc(var(--spacing-unit) * 1.5);
font-size: 1rem;
line-height: 1.7;
}
.close-button {
color: var(--color-text-secondary);
position: absolute;
top: calc(var(--spacing-unit) * 1.5);
right: calc(var(--spacing-unit) * 2.5);
font-size: 2rem; /* ~32px */
font-weight: bold;
line-height: 1;
}
.close-button:hover,
.close-button:focus {
color: var(--color-text-primary);
text-decoration: none;
cursor: pointer;
}
/* -------------------------------------------------------------------------
14. Footer
------------------------------------------------------------------------- */
.site-footer {
background-color: var(--color-background-dark);
color: var(--color-text-light);
padding: calc(var(--spacing-unit) * 5) 0;
border-top: 3px solid var(--color-primary); /* Brutalist accent */
}
.footer-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: calc(var(--spacing-unit) * 4);
}
.footer-container h4 {
font-family: var(--font-primary);
font-size: 1.2rem; /* ~19.2px */
color: var(--color-text-light);
margin-bottom: calc(var(--spacing-unit) * 2);
text-transform: uppercase;
letter-spacing: 1px;
}
.footer-container h4::after { /* No global after on footer titles */
display: none;
}
.footer-nav ul, .footer-social ul {
list-style: none;
padding-left: 0;
}
.footer-nav li a, .footer-social li a {
color: #a0aec0; /* Lighter gray for footer links */
text-decoration: none;
display: inline-block;
padding: calc(var(--spacing-unit) * 0.5) 0;
transition: color 0.3s ease, padding-left 0.3s ease;
}
.footer-nav li a:hover, .footer-nav li a:focus,
.footer-social li a:hover, .footer-social li a:focus {
color: var(--color-text-light);
padding-left: var(--spacing-unit); /* Indent on hover */
text-decoration: none;
}
.footer-social li a { /* Specific styling for text-based social links */
font-weight: bold;
}
.footer-social li a::before { /* Optional: add a small pseudo-element if desired */
/* content: '→ '; */
/* margin-right: var(--spacing-unit); */
/* color: var(--color-primary); */
}
.footer-copyright {
grid-column: 1 / -1; /* Span full width if on its own line */
text-align: center;
margin-top: calc(var(--spacing-unit) * 3);
padding-top: calc(var(--spacing-unit) * 2);
border-top: 1px solid #4a5568; /* Darker border */
}
.footer-copyright p {
margin-bottom: calc(var(--spacing-unit) * 0.5);
font-size: 0.9rem;
color: #a0aec0;
}
.footer-copyright .logo-accent {
color: var(--color-primary);
}
/* -------------------------------------------------------------------------
15. Specific Page Styles (success.html, privacy.html, terms.html)
------------------------------------------------------------------------- */
.success-message-section {
min-height: calc(100vh - var(--header-height) - var(--footer-height, 200px)); /* Adjust footer-height approx */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding-top: var(--header-height); /* Account for fixed header */
}
.success-icon img {
width: 80px; /* Adjust size as needed */
height: 80px;
margin-bottom: calc(var(--spacing-unit) * 2);
}
.success-message-section .section-title {
font-size: 2.5rem;
}
.success-message-section .section-title::after {
display: none;
}
.success-message-section .cta-button {
margin-top: calc(var(--spacing-unit) * 3);
}
/* Privacy & Terms page content */
.policy-content h2, .terms-content h2 {
font-size: 1.8rem;
margin-top: calc(var(--spacing-unit) * 4);
margin-bottom: calc(var(--spacing-unit) * 1.5);
border-bottom: 2px solid var(--color-border-light);
padding-bottom: var(--spacing-unit);
}
.policy-content h2:first-of-type, .terms-content h2:first-of-type {
margin-top: 0;
}
.policy-content p, .terms-content p,
.policy-content ul, .terms-content ul {
font-size: 1rem;
line-height: 1.7;
color: var(--color-text-secondary);
}
.policy-content ul, .terms-content ul {
margin-left: calc(var(--spacing-unit) * 2);
}
/* -------------------------------------------------------------------------
16. Responsive Design
------------------------------------------------------------------------- */
@media (max-width: 991px) {
.menu-toggle {
display: block; /* Show burger menu */
z-index: 1001; /* Above nav */
}
.main-navigation {
position: absolute;
top: 0; /* Align with header top */
left: 0;
width: 100%;
height: 100vh; /* Full viewport height */
background-color: rgba(255, 255, 255, 0.98); /* Slightly more opaque for readability */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
padding-top: calc(var(--header-height) + var(--spacing-unit) * 4); /* Space for header */
overflow-y: auto; /* Scroll if content overflows */
}
.main-navigation.active {
transform: translateX(0);
}
.main-navigation ul {
flex-direction: column;
align-items: center;
width: 100%;
}
.main-navigation li {
margin-left: 0;
width: 100%;
text-align: center;
}
.main-navigation a {
display: block;
padding: calc(var(--spacing-unit) * 2) var(--spacing-unit);
font-size: 1.2rem;
border-bottom: 1px solid var(--color-border-light);
}
.main-navigation li:last-child a {
border-bottom: none;
}
.hero-content h1 { font-size: 2.5rem; }
.hero-content p { font-size: 1.1rem; }
.section-title { font-size: 1.8rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
}
@media (max-width: 767px) {
.features-grid, .projects-grid, .blog-grid, .media-grid, .resources-list {
grid-template-columns: 1fr; /* Stack cards on smaller screens */
}
.carousel-item {
min-width: 50%; /* Show 2 items on tablets */
}
.footer-container {
grid-template-columns: 1fr; /* Stack footer sections */
text-align: center;
}
.footer-nav ul, .footer-social ul {
justify-content: center;
}
.footer-nav li a:hover, .footer-social li a:hover {
padding-left: 0; /* Disable indent on mobile for centered text */
}
.contact-content-wrapper {
grid-template-columns: 1fr;
}
.contact-info-container .info-title {
text-align: center; /* Was left before */
}
}
@media (max-width: 480px) {
html { font-size: 15px; } /* Slightly smaller base font */
.hero-content h1 { font-size: 2rem; }
.hero-content p { font-size: 1rem; }
.carousel-item {
min-width: 100%; /* Show 1 item on mobile */
}
.modal-content {
width: 90%;
margin: 5vh auto;
padding: calc(var(--spacing-unit) * 2.5);
}
}
/* -------------------------------------------------------------------------
17. Utility Classes
------------------------------------------------------------------------- */
.sr-only { /* Screen-reader only */
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Cookie Consent Popup Style (as provided in HTML, basic) */
#cookieConsentPopup p {
color: #fff; /* Ensure text is readable on dark background */
margin-bottom: 10px !important; /* Override general p margin if needed */
}
#cookieConsentPopup #acceptCookieButton {
box-shadow: none; /* Remove brutalist shadow for this specific button */
/* Ensure it uses global button styles, but can override specifics */
background-color: var(--color-primary); /* Match theme */
border-color: var(--color-primary);
}
#cookieConsentPopup #acceptCookieButton:hover {
background-color: var(--color-primary-darker);
border-color: var(--color-primary-darker);
top: 0; left: 0; /* No press effect for this one */
}