/* Small Batch Maps - Artisanal Cartography meets Modern Web */
/* =============================================================================
Phosphor Icons Setup
============================================================================= */
/* General Phosphor icon styling */
.ph {
display: inline-block;
font-style: normal;
font-weight: 400;
line-height: 1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Phosphor icons in benefit cards */
.benefit-icon .ph {
font-size: 2.5rem;
color: var(--terracotta);
transition: all var(--transition-normal);
}
/* Phosphor icons in metric cards */
.metric-icon .ph {
font-size: 2rem;
color: var(--terracotta);
transition: all var(--transition-normal);
}
/* Phosphor icon hover effects */
.benefit-card:hover .benefit-icon .ph {
transform: scale(1.1);
animation: mapPinBounce 0.6s ease-out;
}
.project-item:hover .project-icon .ph {
animation: mapPinBounce 0.6s ease-out;
filter: drop-shadow(0 4px 8px rgba(205, 92, 64, 0.2));
}
.metric-item:hover .metric-icon .ph {
transform: scale(1.1);
animation: mapPinBounce 0.6s ease-out;
}
/* =============================================================================
CSS Reset & Base Styles
============================================================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
height: 100%;
}
body {
font-family: 'Inter', sans-serif;
color: #2C5F5D;
background-color: #F5F2E8;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100%;
position: relative;
}
/* =============================================================================
CSS Variables (Brand Colors)
============================================================================= */
:root {
--terracotta: #CD5C40;
--sage: #7A8B7A;
--cream: #F5F2E8;
--teal: #2C5F5D;
--warm-white: #FEFCF8;
--font-playfair: 'Playfair Display', serif;
--font-inter: 'Inter', sans-serif;
--font-jetbrains: 'JetBrains Mono', monospace;
--container-max-width: 1200px;
--section-padding: 5rem 0;
--header-height: 80px;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--transition-fast: 0.15s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
}
/* =============================================================================
Typography
============================================================================= */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-playfair);
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}
p {
margin-bottom: 1rem;
line-height: 1.6;
}
/* =============================================================================
Inline Links (within paragraphs)
============================================================================= */
p a,
.content a,
.text-content a {
color: var(--terracotta);
text-decoration: none;
font-weight: 600;
position: relative;
transition: all var(--transition-normal);
border-bottom: 1px solid transparent;
padding-bottom: 1px;
}
/* Subtle underline effect */
p a::after,
.content a::after,
.text-content a::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--terracotta) 0%, var(--sage) 100%);
transition: width var(--transition-normal);
border-radius: 1px;
}
p a:hover,
.content a:hover,
.text-content a:hover {
color: rgba(205, 92, 64, 0.8);
transform: translateY(-1px);
}
p a:hover::after,
.content a:hover::after,
.text-content a:hover::after {
width: 100%;
}
/* Focus state for accessibility */
p a:focus,
.content a:focus,
.text-content a:focus {
outline: 2px solid var(--terracotta);
outline-offset: 3px;
border-radius: 2px;
}
/* Active state with map pin bounce */
p a:active,
.content a:active,
.text-content a:active {
animation: mapPinBounce 0.3s ease-out;
}
/* Special styling for email and phone links */
p a[href^="mailto:"],
p a[href^="tel:"],
.content a[href^="mailto:"],
.content a[href^="tel:"] {
font-family: var(--font-jetbrains);
font-size: 0.95em;
letter-spacing: 0.3px;
}
/* External link indicator (optional) */
p a[href^="http"]:not([href*="smallbatchmaps"])::before,
.content a[href^="http"]:not([href*="smallbatchmaps"])::before,
.text-content a[href^="http"]:not([href*="smallbatchmaps"])::before {
content: '↗';
font-size: 0.8em;
margin-right: 0.25em;
opacity: 0.7;
transition: opacity var(--transition-normal);
}
p a[href^="http"]:not([href*="smallbatchmaps"]):hover::before,
.content a[href^="http"]:not([href*="smallbatchmaps"]):hover::before,
.text-content a[href^="http"]:not([href*="smallbatchmaps"]):hover::before {
opacity: 1;
}
/* =============================================================================
Utility Classes
============================================================================= */
/* =============================================================================
Layout & Spacing Utilities
============================================================================= */
.container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 1rem;
}
.section-spacing { padding: var(--section-padding); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
/* Margin utilities */
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }
/* Visibility utilities */
.hidden {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Skip link for accessibility */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: var(--teal);
color: var(--warm-white);
padding: 8px;
text-decoration: none;
border-radius: 4px;
font-weight: 600;
z-index: 1001;
transition: top var(--transition-fast);
}
.skip-link:focus {
top: 6px;
}
/* =============================================================================
Header & Navigation
============================================================================= */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background-color: rgba(254, 252, 248, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(122, 139, 122, 0.2);
height: var(--header-height);
transition: all var(--transition-normal);
}
.header.scrolled {
background-color: rgba(254, 252, 248, 0.98);
box-shadow: var(--shadow-md);
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 1rem;
}
.logo-link {
font-family: var(--font-playfair);
font-weight: 700;
font-size: 1.5rem;
color: var(--teal);
text-decoration: none;
transition: color var(--transition-normal);
opacity: 0;
transition: opacity var(--transition-slow);
}
.logo-link.visible {
opacity: 1;
}
.logo-link:hover {
color: var(--terracotta);
}
.logo-image {
height: 5rem;
vertical-align: middle;
}
.logo-image.visible {
opacity: 1;
}
.nav-desktop {
display: none;
list-style: none;
gap: 2rem;
}
.nav-link {
color: var(--teal);
text-decoration: none;
font-weight: 500;
transition: color var(--transition-normal);
position: relative;
}
.nav-link:hover,
.nav-link:focus {
color: var(--terracotta);
}
.nav-link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background-color: var(--terracotta);
transition: width var(--transition-normal);
}
.nav-link:hover::after {
width: 100%;
}
.nav-link.active {
color: var(--terracotta);
}
.nav-link.active::after {
width: 100%;
}
/* Mobile Menu */
.mobile-menu-btn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
background: none;
border: none;
cursor: pointer;
z-index: 1001;
}
.hamburger {
display: flex;
flex-direction: column;
gap: 4px;
}
.hamburger span {
width: 24px;
height: 2px;
background-color: var(--teal);
transition: all var(--transition-normal);
transform-origin: center;
}
.hamburger.active span:first-child {
transform: rotate(45deg) translate(6px, 6px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:last-child {
transform: rotate(-45deg) translate(6px, -6px);
}
.mobile-menu {
background-color: var(--warm-white);
border-top: 1px solid rgba(122, 139, 122, 0.2);
}
.mobile-nav-list {
list-style: none;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Desktop Navigation */
@media (min-width: 768px) {
.nav-desktop {
display: flex;
}
.mobile-menu-btn {
display: none;
}
}
/* =============================================================================
Hero Section
============================================================================= */
.hero {
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding-top: var(--header-height);
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('images/map-2.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(245, 242, 232, 0.25) 0%, rgba(254, 252, 248, 0.25) 100%);
}
/* Add topographic line overlay */
.hero-bg::after {
content: '';
position: absolute;
top: 0;
left: -100px;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 45%, rgba(122, 139, 122, 0.08) 50%, transparent 55%),
linear-gradient(-45deg, transparent 45%, rgba(122, 139, 122, 0.05) 50%, transparent 55%);
z-index: 2;
animation: topographicFlow 20s infinite linear;
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 10;
text-align: center;
max-width: 1100px;
padding: 3rem 4.5rem;
background: linear-gradient(135deg, rgba(245, 242, 232, 0.88) 0%, rgba(254, 252, 248, 0.88) 100%);
border-radius: .8rem;
backdrop-filter: blur(2px);
}
.hero-title-container {
display: flex;
align-items: center;
justify-content: center;
gap: 5rem;
margin-bottom: 0;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
margin-top: 1.25rem;
}
.hero-logo {
height: 16rem;
width: auto;
transition: opacity var(--transition-slow);
flex-shrink: 0;
}
.hero-logo.visible {
opacity: 1;
}
.hero-text-content {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
flex: 1;
max-width: 650px;
gap: 0.5rem;
margin-left: 1rem;
}
.hero-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-family: var(--font-playfair);
font-weight: 700;
color: var(--teal);
margin-bottom: 1.25rem;
opacity: 0;
line-height: 1.15;
letter-spacing: -0.01em;
}
.hero-subtitle {
font-size: clamp(1.25rem, 4vw, 1.75rem);
color: var(--sage);
font-weight: 400;
margin-bottom: 3rem;
opacity: 0;
line-height: 1.5;
letter-spacing: 0.01em;
}
.compass-rose {
position: absolute;
bottom: 2.5rem;
right: 2.5rem;
width: 80px;
height: 80px;
background: radial-gradient(circle, rgba(205, 92, 64, 0.3) 0%, transparent 70%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: compassRotate 30s linear infinite;
opacity: 0.3;
transition: opacity var(--transition-normal), transform var(--transition-normal);
cursor: pointer;
}
.compass-rose:hover {
opacity: 0.6;
transform: scale(1.1);
}
.compass-rose::before {
content: '✦';
font-size: 1.5rem;
color: var(--terracotta);
animation: compassNeedle 4s ease-in-out infinite;
}
@keyframes compassRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (max-width: 768px) {
.hero-bg::before {
background-size: 400px 400px, 300px 300px, 200px 200px;
}
.hero-content {
padding: 2.5rem 2rem;
max-width: 95%;
}
.hero-title-container {
flex-direction: column;
gap: 2.5rem;
text-align: center;
margin-top: 0.5rem;
}
.hero-logo {
height: 10rem;
}
.hero-text-content {
align-items: center;
text-align: center;
max-width: 100%;
gap: 0.75rem;
margin-left: 0;
}
.hero-subtitle {
margin-bottom: 2.5rem;
}
.hero-content .cta-button {
padding: 1rem 2rem;
font-size: 1rem;
}
.compass-rose {
width: 60px;
height: 60px;
bottom: 1.5rem;
right: 1.5rem;
}
.compass-rose::before {
font-size: 1.125rem;
}
}
/* =============================================================================
CTA Button
============================================================================= */
.hero-content .cta-button {
background-color: var(--terracotta);
color: var(--warm-white);
padding: 1.125rem 2.25rem;
border-radius: 0.6rem;
font-weight: 600;
font-size: 1.125rem;
border: none;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all var(--transition-normal);
box-shadow: 0 6px 20px rgba(44, 95, 93, 0.15), 0 2px 6px rgba(44, 95, 93, 0.1);
position: relative;
margin-top: 0.5rem;
}
.hero-content .cta-button::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%, rgba(0, 0, 0, 0.05) 100%);
border-radius: 0.6rem;
z-index: -1;
}
.cta-button {
background-color: var(--terracotta);
color: var(--warm-white);
padding: 1rem 2rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 1.125rem;
border: none;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all var(--transition-normal);
box-shadow: var(--shadow-lg);
}
.hero-content .cta-button:hover,
.hero-content .cta-button:focus {
background-color: rgba(205, 92, 64, 0.9);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(44, 95, 93, 0.2), 0 4px 10px rgba(44, 95, 93, 0.15);
}
.hero-content .cta-button:active {
animation: mapPinBounce 0.4s ease-out;
}
.cta-button:hover,
.cta-button:focus {
background-color: rgba(205, 92, 64, 0.9);
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
.cta-button-full {
width: 100%;
}
.cta-button-prominent {
background: linear-gradient(135deg, var(--terracotta) 0%, #E06B47 100%);
box-shadow: 0 8px 20px rgba(205, 92, 64, 0.4);
font-weight: 700;
font-size: 1.25rem;
padding: 1.25rem 2rem;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.cta-button-prominent:hover,
.cta-button-prominent:focus {
background: linear-gradient(135deg, #E06B47 0%, var(--terracotta) 100%);
box-shadow: 0 12px 28px rgba(205, 92, 64, 0.5);
transform: translateY(-3px);
}
/* =============================================================================
Animations
============================================================================= */
.animate-fade-in {
animation: fadeIn 1s ease-out forwards;
}
.animate-fade-in-delay {
animation: fadeIn 1s ease-out 0.3s forwards;
}
.animate-fade-in-delay-2 {
animation: fadeIn 1s ease-out 0.6s forwards;
}
.animate-fade-in-delay-3 {
animation: fadeIn 1s ease-out 0.9s forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease-out;
}
.fade-in-up.visible {
opacity: 1;
transform: translateY(0);
}
/* =============================================================================
Cartographic Micro-Interactions & Animations
============================================================================= */
/* Topographic line animation */
@keyframes topographicFlow {
0% {
transform: translateX(-100px) translateY(-20px);
opacity: 0.05;
}
50% {
opacity: 0.1;
}
100% {
transform: translateX(100px) translateY(20px);
opacity: 0.05;
}
}
/* Compass needle subtle movement */
@keyframes compassNeedle {
0% { transform: rotate(0deg); }
25% { transform: rotate(2deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-2deg); }
100% { transform: rotate(0deg); }
}
/* Map pin bounce for interactive elements */
@keyframes mapPinBounce {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-8px) scale(1.05); }
}
/* Contour line pulse for background elements */
@keyframes contourPulse {
0%, 100% {
opacity: 0.1;
transform: scale(1);
}
50% {
opacity: 0.2;
transform: scale(1.02);
}
}
/* Service card elevation effect */
@keyframes cardElevate {
0% {
transform: translateY(0) rotateX(0) rotateY(0);
box-shadow: var(--shadow-md);
}
100% {
transform: translateY(-8px) rotateX(2deg) rotateY(2deg);
box-shadow: var(--shadow-xl);
}
}
/* Cartographic line drawing animation */
@keyframes drawLine {
0% {
stroke-dasharray: 0 100;
opacity: 0.3;
}
100% {
stroke-dasharray: 100 0;
opacity: 0.8;
}
}
/* =============================================================================
Geospatial Data Science Section (New Design)
============================================================================= */
.geospatial-section {
padding: 6rem 0;
background: linear-gradient(135deg, var(--warm-white) 0%, var(--cream) 100%);
}
/* Section Header */
.geo-header {
/* text-align: center; */
margin-bottom: 4rem;
/* max-width: 800px; */
/* margin-left: auto;
margin-right: auto; */
}
.geo-title {
font-size: clamp(2.5rem, 6vw, 3.5rem);
font-family: var(--font-playfair);
font-weight: 700;
color: var(--teal);
margin-bottom: 1.5rem;
line-height: 1.1;
letter-spacing: -0.02em;
}
.geo-intro {
/* font-size: 1.375rem; */
color: var(--sage);
line-height: 1.6;
font-weight: 400;
width: 100%;
text-align: left;
}
/* Workflow Section */
.workflow-section {
margin-bottom: 5rem;
}
.workflow-title {
font-size: 2rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
text-align: center;
margin-bottom: 3rem;
}
.workflow-pipeline {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.workflow-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
padding: 2rem 1.25rem 1.5rem 1.25rem;
background: rgba(255, 255, 255, 0.7);
border-radius: 1rem;
border: 1px solid rgba(122, 139, 122, 0.15);
transition: all var(--transition-normal);
backdrop-filter: blur(10px);
position: relative;
flex: 1;
align-self: flex-start;
overflow: hidden;
}
.workflow-step::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(122, 139, 122, 0.05) 0%, transparent 70%);
animation: contourPulse 8s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.workflow-step > * {
position: relative;
z-index: 1;
}
.workflow-step:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
background: rgba(255, 255, 255, 0.95);
}
.workflow-step h4 {
font-size: 1.125rem;
font-weight: 700;
color: var(--teal);
margin-bottom: 0.75rem;
font-family: var(--font-playfair);
line-height: 1.3;
min-height: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.workflow-step p {
font-size: 0.875rem;
color: var(--sage);
margin: 0;
line-height: 1.4;
font-weight: 500;
}
/* Mobile Workflow Adjustments */
@media (max-width: 768px) {
.workflow-pipeline {
flex-direction: column;
gap: 1.5rem;
align-items: center;
}
.workflow-step {
width: 100%;
max-width: 300px;
min-width: auto;
}
.workflow-step h4 {
font-size: 1rem;
min-height: 2.5rem;
}
}
/* Enhanced hover effects */
.workflow-step:hover .workflow-icon .icon {
transform: scale(1.1) rotate(5deg);
transition: transform 0.3s ease;
}
/* Responsive workflow improvements */
@media (max-width: 1024px) {
.workflow-pipeline {
max-width: 900px;
}
.workflow-step {
min-width: 120px;
padding: 1.25rem 0.75rem;
}
.workflow-step h4 {
font-size: 0.9rem;
}
.workflow-step p {
font-size: 0.8rem;
}
}
/* Capabilities Section */
.capabilities-section {
margin-bottom: 5rem;
}
.capabilities-title {
font-size: 2rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
text-align: center;
margin-bottom: 3rem;
}
.capabilities-visual {
display: flex;
justify-content: center;
align-items: center;
margin: 2rem 0;
}
.capabilities-diagram {
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: var(--shadow-md);
transition: all var(--transition-normal);
}
.capabilities-diagram:hover {
transform: scale(1.02);
box-shadow: var(--shadow-lg);
}
@media (max-width: 768px) {
.capabilities-diagram {
border-radius: 8px;
}
}
.capabilities-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
max-width: 1000px;
margin: 0 auto;
}
@media (min-width: 768px) {
.capabilities-grid {
grid-template-columns: 1fr 1fr;
}
}
.capability-column {
display: flex;
flex-direction: column;
gap: 2rem;
}
.capability-item {
padding: 0;
border: none;
background: none;
}
.capability-item h4 {
font-size: 1.375rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
margin-bottom: 0.75rem;
line-height: 1.3;
}
.capability-item p {
font-size: 1rem;
color: var(--sage);
line-height: 1.7;
margin: 0;
}
/* Case Studies Section */
.case-studies-section {
margin-bottom: 5rem;
}
.case-studies-title {
font-size: 2rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
text-align: center;
margin-bottom: 3rem;
}
.case-studies-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
max-width: 1000px;
margin: 0 auto;
}
@media (min-width: 768px) {
.case-studies-grid {
grid-template-columns: 1fr 1fr;
}
}
.case-study {
background: var(--warm-white);
border-radius: 1rem;
padding: 2rem;
border: 1px solid rgba(122, 139, 122, 0.15);
transition: all var(--transition-normal);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
.case-study:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.case-study::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.5s ease;
}
.case-study:hover::before {
left: 100%;
}
.case-study-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.case-study h4 {
font-size: 1.375rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
margin-bottom: 1rem;
}
.case-study-description {
font-size: 1rem;
color: var(--sage);
line-height: 1.6;
margin-bottom: 0.75rem;
}
.case-study-result {
font-size: 0.95rem;
color: var(--terracotta);
font-weight: 600;
margin-bottom: 1.5rem;
}
.case-study-visual {
margin-top: 1.5rem;
}
.placeholder-visual {
background: linear-gradient(135deg, rgba(122, 139, 122, 0.1) 0%, rgba(205, 92, 64, 0.1) 100%);
border: 2px dashed rgba(122, 139, 122, 0.3);
border-radius: 0.5rem;
padding: 2rem;
text-align: center;
color: var(--sage);
font-style: italic;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
/* Applications Section */
.applications-section {
margin-bottom: 4rem;
}
.applications-title {
font-size: 2rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
text-align: center;
margin-bottom: 3rem;
}
.applications-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
max-width: 700px;
margin: 0 auto;
}
@media (min-width: 640px) {
.applications-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) {
.applications-grid {
grid-template-columns: repeat(5, 1fr);
}
}
.application-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1.5rem 1rem;
background: var(--warm-white);
border-radius: 0.75rem;
border: 1px solid rgba(122, 139, 122, 0.15);
transition: all var(--transition-normal);
gap: 0.75rem;
position: relative;
cursor: pointer;
}
.application-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
background: rgba(255, 255, 255, 0.9);
}
.application-item::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(205, 92, 64, 0.2) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.4s ease;
z-index: -1;
}
.application-item:hover::after {
width: 100px;
height: 100px;
}
.application-icon {
font-size: 2rem;
}
.application-item span {
font-size: 0.95rem;
font-weight: 500;
color: var(--teal);
line-height: 1.3;
}
/* CTA Section */
.geo-cta-section {
text-align: center;
padding-top: 2rem;
}
.geo-cta-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
max-width: 400px;
margin: 0 auto;
}
@media (min-width: 480px) {
.geo-cta-buttons {
flex-direction: row;
justify-content: center;
gap: 1.5rem;
}
}
.cta-primary {
background: linear-gradient(135deg, var(--terracotta) 0%, #E06B47 100%);
color: var(--warm-white);
border: none;
padding: 1rem 2rem;
border-radius: 0.75rem;
font-weight: 600;
font-size: 1.125rem;
cursor: pointer;
transition: all var(--transition-normal);
box-shadow: var(--shadow-md);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 140px;
}
.cta-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
background: linear-gradient(135deg, #E06B47 0%, var(--terracotta) 100%);
}
.cta-secondary {
background: transparent;
color: var(--teal);
border: 2px solid var(--teal);
padding: 1rem 2rem;
border-radius: 0.75rem;
font-weight: 600;
font-size: 1.125rem;
cursor: pointer;
transition: all var(--transition-normal);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 140px;
}
.cta-secondary:hover {
background: var(--teal);
color: var(--warm-white);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* =============================================================================
Services Section (Legacy - kept for other services if needed)
============================================================================= */
.services {
padding: var(--section-padding);
background-color: var(--warm-white);
}
.section-title {
font-size: clamp(2.5rem, 6vw, 3rem);
font-family: var(--font-playfair);
font-weight: 700;
text-align: center;
color: var(--teal);
margin-bottom: 3rem;
}
.section-subtitle {
font-size: 1.25rem;
color: var(--sage);
text-align: center;
margin-bottom: 3rem;
font-weight: 400;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.services-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
@media (min-width: 768px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.services-grid {
grid-template-columns: repeat(3, 1fr);
}
.service-card-wide {
grid-column: span 2;
}
.service-card-wide:last-child {
grid-column: span 1;
}
}
.service-card {
background-color: var(--cream);
border-radius: 0.5rem;
padding: 1.5rem;
border: 1px solid rgba(122, 139, 122, 0.2);
transition: all var(--transition-normal);
cursor: pointer;
position: relative;
transform-style: preserve-3d;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(122, 139, 122, 0.05), transparent);
transition: left 0.6s ease;
pointer-events: none;
z-index: 1;
}
.service-card:hover {
transform: translateY(-8px) rotateX(2deg) rotateY(2deg);
box-shadow: var(--shadow-xl);
}
.service-card:hover::before {
left: 100%;
}
.service-card:hover .learn-more-btn {
border-bottom-color: var(--terracotta);
}
.service-icon {
margin-bottom: 1rem;
position: relative;
z-index: 2;
}
.icon {
width: 3rem;
height: 3rem;
color: var(--terracotta);
transition: all var(--transition-normal);
filter: drop-shadow(0 2px 4px rgba(205, 92, 64, 0.1));
stroke-width: 1.5;
}
/* Phosphor icons in service cards */
.service-icon .ph {
font-size: 3rem;
color: var(--terracotta);
transition: all var(--transition-normal);
filter: drop-shadow(0 2px 4px rgba(205, 92, 64, 0.1));
}
.service-card:hover .icon {
animation: mapPinBounce 0.6s ease-out;
transform: scale(1.1);
filter: drop-shadow(0 4px 8px rgba(205, 92, 64, 0.2));
stroke-width: 2;
}
.service-card:hover .service-icon .ph {
animation: mapPinBounce 0.6s ease-out;
transform: scale(1.1);
filter: drop-shadow(0 4px 8px rgba(205, 92, 64, 0.2));
}
.workflow-icon {
margin-bottom: 1rem;
}
.workflow-icon .ph {
font-size: 2.5rem;
color: var(--terracotta);
transition: all var(--transition-normal);
}
.service-title {
font-size: 1.5rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
margin-bottom: 0.75rem;
}
.service-description {
color: var(--sage);
margin-bottom: 1rem;
line-height: 1.6;
}
.learn-more-btn {
background: none;
border: none;
color: var(--terracotta);
font-weight: 600;
cursor: pointer;
text-decoration: none;
border-bottom: 2px solid transparent;
padding-bottom: 2px;
transition: all var(--transition-normal);
}
.learn-more-btn:hover,
.learn-more-btn:focus {
color: rgba(205, 92, 64, 0.8);
border-bottom-color: var(--terracotta);
}
/* =============================================================================
About Section
============================================================================= */
.about {
padding: var(--section-padding);
background-color: var(--cream);
}
.about-wrapper {
max-width: 1000px;
margin: 0 auto;
}
.about-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}
@media (min-width: 768px) {
.about-grid {
grid-template-columns: 1fr 1fr;
}
}
.about-logo-image {
width: 100%;
max-width: 400px;
height: auto;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
transition: transform var(--transition-normal);
margin: 0 auto;
display: block;
}
.about-logo-image:hover {
transform: scale(1.05);
}
.about-subtitle {
font-size: 1.5rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
margin-bottom: 1rem;
}
.about-text {
color: var(--sage);
margin-bottom: 1.5rem;
line-height: 1.7;
}
.about-text:last-child {
margin-bottom: 0;
}
/* =============================================================================
Contact Section
============================================================================= */
.contact {
padding: var(--section-padding);
background-color: var(--cream);
}
.contact-wrapper {
max-width: 1000px;
margin: 0 auto;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
@media (min-width: 768px) {
.contact-grid {
grid-template-columns: 1fr 2fr;
}
}
.contact-subtitle {
font-size: 1.5rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
margin-bottom: 1.5rem;
}
.form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-label {
font-size: 0.875rem;
font-weight: 500;
color: var(--teal);
margin-bottom: 0.5rem;
}
.form-input {
width: 100%;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
border: 1px solid rgba(122, 139, 122, 0.3);
background-color: var(--warm-white);
font-family: var(--font-inter);
transition: all var(--transition-normal);
}
.form-input:focus {
outline: none;
border-color: var(--terracotta);
box-shadow: 0 0 0 3px rgba(205, 92, 64, 0.1);
}
.form-input::placeholder {
color: var(--sage);
}
textarea.form-input {
resize: vertical;
min-height: 100px;
}
/* Form validation styles */
.field-error {
color: var(--terracotta);
font-size: 0.875rem;
margin-top: 0.25rem;
min-height: 1.25rem;
display: block;
}
.field-help {
color: rgba(44, 95, 93, 0.7);
font-size: 0.875rem;
margin-top: 0.25rem;
}
.form-input.error {
border-color: var(--terracotta);
box-shadow: 0 0 0 2px rgba(205, 92, 64, 0.2);
}
.form-input.success {
border-color: var(--sage);
box-shadow: 0 0 0 2px rgba(122, 139, 122, 0.2);
}
.form-input.error:focus {
border-color: var(--terracotta);
box-shadow: 0 0 0 3px rgba(205, 92, 64, 0.3);
}
.form-input.success:focus {
border-color: var(--sage);
box-shadow: 0 0 0 3px rgba(122, 139, 122, 0.3);
}
/* Button loading state */
.button-loading {
display: none;
}
.cta-button.loading .button-text {
display: none;
}
.cta-button.loading .button-loading {
display: inline;
}
.cta-button.loading {
cursor: not-allowed;
opacity: 0.7;
}
.form-note {
font-size: 0.875rem;
color: var(--sage);
margin-top: 1rem;
}
/* Contact Info */
.contact-info-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* Contact Logo */
.contact-logo {
display: flex;
justify-content: flex-start;
margin-top: 1rem;
margin-bottom: 1rem;
padding: 1rem;
}
.contact-logo-image {
width: 100%;
max-width: 280px;
height: auto;
filter: drop-shadow(0 4px 16px rgba(44, 95, 93, 0.15));
transition: all var(--transition-normal);
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.8);
padding: 1rem;
border: 1px solid rgba(122, 139, 122, 0.1);
}
.contact-logo-image:hover {
transform: scale(1.02);
filter: drop-shadow(0 6px 20px rgba(44, 95, 93, 0.2));
background: rgba(255, 255, 255, 0.95);
}
.social-links {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.social-link {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--sage);
text-decoration: none;
padding: 0.75rem;
border-radius: 0.5rem;
transition: all var(--transition-normal);
}
.social-link:hover {
color: var(--terracotta);
background-color: rgba(122, 139, 122, 0.1);
}
.social-icon {
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
}
.consultation-info {
background-color: var(--cream);
padding: 1.5rem;
border-radius: 0.5rem;
}
.consultation-title {
font-weight: 600;
color: var(--teal);
margin-bottom: 0.75rem;
}
.consultation-steps {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.consultation-step {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.875rem;
color: var(--sage);
}
.step-number {
font-family: var(--font-mono);
font-size: 0.75rem;
background-color: var(--terracotta);
color: var(--warm-white);
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
flex-shrink: 0;
margin-top: 0.125rem;
}
/* =============================================================================
Footer
============================================================================= */
.footer {
background-color: var(--teal);
color: var(--warm-white);
padding: 2rem 0;
text-align: center;
}
.footer-text {
font-size: 0.875rem;
margin: 0;
}
/* =============================================================================
Form Loading States & Notifications
============================================================================= */
.loading {
opacity: 0.5;
pointer-events: none;
position: relative;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid transparent;
border-top: 2px solid var(--terracotta);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.notification {
position: fixed;
top: 5rem;
right: 1rem;
z-index: 1000;
max-width: 24rem;
padding: 1rem;
border-radius: 0.5rem;
box-shadow: var(--shadow-lg);
transform: translateX(100%);
transition: transform var(--transition-normal);
display: flex;
align-items: flex-start;
gap: 0.75rem;
background-color: var(--warm-white);
border: 1px solid rgba(122, 139, 122, 0.2);
}
.notification.show {
transform: translateX(0);
}
.notification.success {
border-left: 4px solid #10b981;
}
.notification.error {
border-left: 4px solid #ef4444;
}
.notification.info {
border-left: 4px solid #3b82f6;
}
.notification-icon {
flex-shrink: 0;
font-weight: bold;
font-size: 1.125rem;
}
.notification.success .notification-icon::before {
content: '✓';
color: #10b981;
}
.notification.error .notification-icon::before {
content: '✗';
color: #ef4444;
}
.notification.info .notification-icon::before {
content: 'ℹ';
color: #3b82f6;
}
.notification-message {
flex: 1;
font-size: 0.875rem;
color: var(--teal);
line-height: 1.4;
}
.notification-close {
background: none;
border: none;
cursor: pointer;
font-size: 1.25rem;
color: var(--sage);
flex-shrink: 0;
padding: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: color var(--transition-normal);
}
.notification-close:hover {
color: var(--terracotta);
}
/* =============================================================================
Scroll Behavior & Section Spacing
============================================================================= */
section {
scroll-margin-top: var(--header-height);
}
/* =============================================================================
Custom Scrollbar
============================================================================= */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--cream);
}
::-webkit-scrollbar-thumb {
background: var(--sage);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--terracotta);
}
/* =============================================================================
Focus States for Accessibility
============================================================================= */
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
outline: 2px solid var(--terracotta);
outline-offset: 2px;
}
/* =============================================================================
Print Styles
============================================================================= */
@media print {
.hero-bg,
.compass-rose,
.header,
.footer {
display: none !important;
}
section {
page-break-inside: avoid;
}
.hero {
min-height: auto;
padding: 2rem 0;
}
.workflow-pipeline {
flex-direction: column;
gap: 1rem;
}
.workflow-step {
width: 100%;
max-width: 280px;
}
.geo-cta-section {
display: none;
}
}
/* =============================================================================
Responsive Adjustments
============================================================================= */
@media (max-width: 640px) {
:root {
--section-padding: 3rem 0;
}
.container {
padding: 0 0.75rem;
}
.services-grid,
.about-grid,
.contact-grid {
gap: 1.5rem;
}
}
@media (min-width: 1200px) {
.container {
padding: 0 2rem;
}
}
/* =============================================================================
Service Expansion Section
============================================================================= */
.service-expansion {
margin-top: 3rem;
background-color: var(--warm-white);
border-radius: 1rem;
border: 1px solid rgba(122, 139, 122, 0.2);
box-shadow: var(--shadow-lg);
overflow-x: hidden;
overflow-y: visible;
transition: all var(--transition-slow);
transform-origin: top;
max-height: 0;
opacity: 0;
}
.service-expansion.show {
max-height: 2000px;
opacity: 1;
animation: expandSection 0.5s ease-out;
overflow: visible;
}
@keyframes expandSection {
from {
opacity: 0;
transform: translateY(-20px);
max-height: 0;
}
to {
opacity: 1;
transform: translateY(0);
max-height: 2000px;
}
}
.service-expansion-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem;
border-bottom: 1px solid rgba(122, 139, 122, 0.2);
background-color: rgba(122, 139, 122, 0.05);
}
.expansion-title {
font-size: 1.75rem;
font-family: var(--font-playfair);
font-weight: 700;
color: var(--teal);
margin: 0;
}
.close-expansion-btn {
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
transition: all var(--transition-normal);
color: var(--sage);
display: flex;
align-items: center;
justify-content: center;
}
.close-expansion-btn:hover {
background-color: rgba(205, 92, 64, 0.1);
color: var(--terracotta);
transform: rotate(90deg);
}
.close-icon {
width: 24px;
height: 24px;
}
.expansion-content {
padding: 2rem;
}
.service-details-expanded {
display: flex;
flex-direction: column;
gap: 2rem;
}
.service-overview {
text-align: center;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(122, 139, 122, 0.1);
}
.service-intro {
/* font-size: 1.125rem; */
line-height: 1.7;
color: var(--sage);
max-width: 800px;
margin: 0 auto;
}
.service-capabilities {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.capability-title,
.applications-title {
font-size: 1.5rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
margin-bottom: 1rem;
text-align: center;
}
.capabilities-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) {
.capabilities-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.capability-item {
background-color: rgba(122, 139, 122, 0.05);
padding: 1.5rem;
border-radius: 0.75rem;
border-left: 4px solid var(--terracotta);
}
.capability-item h5 {
font-size: 1.125rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
margin-bottom: 0.75rem;
}
.capability-item p {
color: var(--sage);
line-height: 1.6;
margin: 0;
}
.service-applications {
background-color: rgba(245, 242, 232, 0.8);
padding: 2rem;
border-radius: 0.75rem;
border: 1px solid rgba(122, 139, 122, 0.1);
}
.applications-list {
list-style: none;
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
@media (min-width: 768px) {
.applications-list {
grid-template-columns: repeat(2, 1fr);
}
}
.applications-list li {
position: relative;
padding-left: 1.5rem;
color: var(--sage);
line-height: 1.6;
}
.applications-list li::before {
content: '';
position: absolute;
left: 0;
top: 0.6rem;
width: 8px;
height: 8px;
background-color: var(--terracotta);
border-radius: 50%;
}
/* Service Example */
.service-example {
margin: 2rem 0;
padding: 1rem 1.5rem;
background: var(--warm-white);
border-radius: 8px;
border-left: 4px solid var(--terracotta);
}
.example-title {
color: var(--deep-teal);
margin-bottom: 1rem;
font-size: 1.1rem;
font-weight: 600;
}
.example-description {
margin-bottom: 1rem;
line-height: 1.6;
color: var(--sage);
}
.example-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.feature-tag {
background: var(--sage);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 4px;
font-size: 0.875rem;
font-weight: 500;
}
.example-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--terracotta);
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
.example-link:hover {
color: var(--deep-teal);
}
/* Case Study Layout with Image (only for service-example context) */
.service-example .case-study-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.case-study-text {
/* Text content on the left */
}
.case-study-visual {
display: flex;
justify-content: center;
align-items: center;
}
.case-study-image {
width: 100%;
max-width: 400px;
height: auto;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.case-study-image:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
/* Mobile responsiveness for case study */
@media (max-width: 768px) {
.service-example .case-study-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.case-study-visual {
order: -1; /* Show image first on mobile */
}
.service-example {
padding: 0.75rem 1rem;
}
.case-study-image {
max-width: 300px;
}
}
/* Geospatial Expansion Styles (scoped within service expansion) */
.geospatial-expansion {
display: flex;
flex-direction: column;
gap: 3rem;
}
.geospatial-expansion .geo-header {
/* text-align: center; */
margin-bottom: 0;
}
.geospatial-expansion .geo-intro {
/* font-size: 1.25rem; */
color: var(--sage);
line-height: 1.6;
font-weight: 400;
width: 100%;
text-align: left;
}
/* Workflow within expansion */
.geospatial-expansion .workflow-section {
margin-bottom: 0;
}
.geospatial-expansion .workflow-title {
font-size: 1.75rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
text-align: center;
margin-bottom: 2rem;
}
.geospatial-expansion .workflow-pipeline {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1rem;
max-width: 100%;
margin: 0 auto;
}
.geospatial-expansion .workflow-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-width: 120px;
max-width: 140px;
padding: 1.25rem 0.75rem;
background: rgba(255, 255, 255, 0.7);
border-radius: 0.75rem;
border: 1px solid rgba(122, 139, 122, 0.15);
transition: all var(--transition-normal);
backdrop-filter: blur(10px);
}
.geospatial-expansion .workflow-step:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
background: rgba(255, 255, 255, 0.9);
}
.geospatial-expansion .workflow-icon {
margin-bottom: 0.75rem;
}
.geospatial-expansion .workflow-icon .icon {
width: 2.5rem;
height: 2.5rem;
color: var(--terracotta);
}
.geospatial-expansion .workflow-step h4 {
font-size: 0.9rem;
font-weight: 600;
color: var(--teal);
margin-bottom: 0.5rem;
font-family: var(--font-inter);
}
.geospatial-expansion .workflow-step p {
font-size: 0.8rem;
color: var(--sage);
margin: 0;
line-height: 1.4;
}
.geospatial-expansion .workflow-arrow {
font-size: 1.25rem;
color: var(--terracotta);
font-weight: bold;
flex-shrink: 0;
opacity: 0.7;
}
/* Mobile workflow adjustments within expansion */
@media (max-width: 768px) {
.geospatial-expansion .workflow-pipeline {
flex-direction: column;
gap: 0.75rem;
}
.geospatial-expansion .workflow-arrow {
transform: rotate(90deg);
font-size: 1rem;
}
.geospatial-expansion .workflow-step {
width: 100%;
max-width: 250px;
}
}
/* Capabilities within expansion */
.geospatial-expansion .capabilities-section {
margin-bottom: 0;
}
.geospatial-expansion .capabilities-title {
font-size: 1.75rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
text-align: center;
margin-bottom: 2rem;
}
.geospatial-expansion .capability-column {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.geospatial-expansion .capability-item {
padding: 0;
border: none;
background: none;
border-left: none;
}
.geospatial-expansion .capability-item h4 {
font-size: 1.25rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
margin-bottom: 0.75rem;
line-height: 1.3;
}
.geospatial-expansion .capability-item p {
font-size: 1rem;
color: var(--sage);
line-height: 1.7;
margin: 0;
}
/* Case studies within expansion */
.geospatial-expansion .case-studies-section {
margin-bottom: 0;
}
.geospatial-expansion .case-studies-title {
font-size: 1.75rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
text-align: center;
margin-bottom: 2rem;
}
.geospatial-expansion .case-studies-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
max-width: 100%;
margin: 0;
}
@media (min-width: 768px) {
.geospatial-expansion .case-studies-grid {
grid-template-columns: 1fr 1fr;
}
}
.geospatial-expansion .case-study {
background: var(--cream);
border-radius: 0.75rem;
padding: 1.5rem;
border: 1px solid rgba(122, 139, 122, 0.15);
transition: all var(--transition-normal);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
.geospatial-expansion .case-study:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.geospatial-expansion .case-study-icon {
font-size: 2rem;
margin-bottom: 1rem;
}
.geospatial-expansion .case-study h4 {
font-size: 1.25rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
margin-bottom: 1rem;
}
.geospatial-expansion .case-study-description {
font-size: 0.95rem;
color: var(--sage);
line-height: 1.6;
margin-bottom: 0.75rem;
}
.geospatial-expansion .case-study-result {
font-size: 0.9rem;
color: var(--terracotta);
font-weight: 600;
margin-bottom: 1rem;
}
.geospatial-expansion .case-study-visual {
margin-top: 1rem;
}
.geospatial-expansion .placeholder-visual {
background: linear-gradient(135deg, rgba(122, 139, 122, 0.1) 0%, rgba(205, 92, 64, 0.1) 100%);
border: 2px dashed rgba(122, 139, 122, 0.3);
border-radius: 0.5rem;
padding: 1.5rem;
text-align: center;
color: var(--sage);
font-style: italic;
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
}
/* Applications within expansion */
.geospatial-expansion .applications-section {
margin-bottom: 0;
}
.geospatial-expansion .applications-title {
font-size: 1.75rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
text-align: center;
margin-bottom: 2rem;
}
.geospatial-expansion .applications-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
max-width: 600px;
margin: 0 auto;
}
@media (min-width: 640px) {
.geospatial-expansion .applications-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.geospatial-expansion .application-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1rem 0.75rem;
background: var(--warm-white);
border-radius: 0.5rem;
border: 1px solid rgba(122, 139, 122, 0.15);
transition: all var(--transition-normal);
gap: 0.5rem;
position: relative;
}
.geospatial-expansion .application-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
background: rgba(255, 255, 255, 0.9);
}
.geospatial-expansion .application-icon {
font-size: 1.75rem;
}
.geospatial-expansion .application-item span {
font-size: 0.85rem;
font-weight: 500;
color: var(--teal);
line-height: 1.3;
}
/* CTA within expansion */
.geospatial-expansion .geo-cta-section {
text-align: center;
padding-top: 1rem;
margin-bottom: 0;
}
.geospatial-expansion .geo-cta-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
max-width: 350px;
margin: 0 auto;
}
@media (min-width: 480px) {
.geospatial-expansion .geo-cta-buttons {
flex-direction: row;
justify-content: center;
gap: 1.25rem;
}
}
.geospatial-expansion .cta-primary {
background: linear-gradient(135deg, var(--terracotta) 0%, #E06B47 100%);
color: var(--warm-white);
border: none;
padding: 0.875rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all var(--transition-normal);
box-shadow: var(--shadow-md);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 120px;
}
.geospatial-expansion .cta-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
background: linear-gradient(135deg, #E06B47 0%, var(--terracotta) 100%);
}
.geospatial-expansion .cta-secondary {
background: transparent;
color: var(--teal);
border: 2px solid var(--teal);
padding: 0.875rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all var(--transition-normal);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 120px;
}
.geospatial-expansion .cta-secondary:hover {
background: var(--teal);
color: var(--warm-white);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* =============================================================================
Web Cartography Expansion Section (Creative Timeline Layout)
============================================================================= */
.cartography-expansion {
position: relative;
display: flex;
flex-direction: column;
gap: 3rem;
overflow: hidden;
}
#carto-workflow-image {
flex: 0 0 auto;
max-width: 40%;
height: auto;
margin: 0;
order: 2;
margin-left: auto;
}
/* Topographic Background */
.topo-background {
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background-image:
radial-gradient(circle at 20% 30%, rgba(122, 139, 122, 0.06) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(205, 92, 64, 0.04) 0%, transparent 50%),
linear-gradient(45deg, transparent 40%, rgba(122, 139, 122, 0.03) 50%, transparent 60%),
linear-gradient(-45deg, transparent 40%, rgba(122, 139, 122, 0.03) 50%, transparent 60%);
pointer-events: none;
z-index: 0;
animation: topoShift 30s ease-in-out infinite;
}
@keyframes topoShift {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
opacity: 0.6;
}
50% {
transform: translate(10px, -5px) rotate(1deg);
opacity: 0.8;
}
}
/* Section Header */
.carto-header {
position: relative;
z-index: 1;
margin-bottom: 2rem;
display: flex;
align-items: flex-start;
gap: 2rem;
}
.carto-left-content {
flex: 1;
}
.carto-intro {
/* font-size: 1.25rem; */
color: var(--sage);
line-height: 1.6;
font-weight: 400;
/* max-width: 800px; */
/* margin: 0 auto; */
}
/* Hero Feature Card */
.hero-feature-container {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
margin-bottom: 2rem;
}
.trail-connector {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 4px;
background: linear-gradient(90deg,
transparent 0%,
rgba(205, 92, 64, 0.3) 20%,
rgba(205, 92, 64, 0.6) 50%,
rgba(205, 92, 64, 0.3) 80%,
transparent 100%);
transform: translate(-50%, -50%);
border-radius: 2px;
animation: trailPulse 3s ease-in-out infinite;
}
@keyframes trailPulse {
0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scaleX(0.8); }
50% { opacity: 0.8; transform: translate(-50%, -50%) scaleX(1.2); }
}
.capability-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(254, 252, 248, 0.9) 100%);
border-radius: 1.25rem;
padding: 2.5rem;
border: 1px solid rgba(122, 139, 122, 0.15);
box-shadow:
0 8px 32px rgba(44, 95, 93, 0.08),
0 4px 16px rgba(44, 95, 93, 0.04);
transition: all var(--transition-normal);
position: relative;
backdrop-filter: blur(10px);
overflow: hidden;
cursor: pointer;
transform-style: preserve-3d;
}
.capability-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.6),
transparent);
transition: left 0.6s ease;
z-index: 1;
}
.capability-card:hover::before {
left: 100%;
}
.capability-card:hover {
transform: translateY(-8px) rotateX(2deg) rotateY(2deg);
box-shadow:
0 16px 48px rgba(44, 95, 93, 0.12),
0 8px 24px rgba(44, 95, 93, 0.08);
}
.card-elevation {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg,
rgba(205, 92, 64, 0.1) 0%,
transparent 50%,
rgba(122, 139, 122, 0.05) 100%);
border-radius: 1.25rem;
z-index: -1;
opacity: 0;
transition: opacity var(--transition-normal);
}
.capability-card:hover .card-elevation {
opacity: 1;
}
/* Hero Card Specific Styles */
.hero-card {
max-width: 600px;
text-align: center;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(254, 252, 248, 0.95) 100%);
border: 2px solid rgba(205, 92, 64, 0.2);
transform: perspective(1000px) rotateY(-2deg);
}
.hero-card:hover {
transform: perspective(1000px) rotateY(0deg) translateY(-12px);
border-color: rgba(205, 92, 64, 0.4);
}
.hero-icon {
margin-bottom: 1.5rem;
}
.hero-icon .icon {
width: 4rem;
height: 4rem;
color: var(--terracotta);
filter: drop-shadow(0 4px 12px rgba(205, 92, 64, 0.2));
animation: compassSpin 8s linear infinite;
}
@keyframes compassSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.hero-card:hover .hero-icon .icon {
animation-duration: 2s;
transform: scale(1.1);
}
.capability-icon {
margin-bottom: 1.5rem;
position: relative;
z-index: 2;
}
.capability-icon .icon {
width: 3rem;
height: 3rem;
color: var(--terracotta);
transition: all var(--transition-normal);
filter: drop-shadow(0 2px 8px rgba(205, 92, 64, 0.15));
}
.capability-card:hover .capability-icon .icon {
transform: scale(1.15) rotate(5deg);
filter: drop-shadow(0 4px 12px rgba(205, 92, 64, 0.25));
}
.capability-title {
font-size: 1.5rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
margin-bottom: 1rem;
position: relative;
z-index: 2;
}
.hero-card .capability-title {
font-size: 2rem;
margin-bottom: 1.5rem;
}
.capability-description {
color: var(--sage);
line-height: 1.7;
font-size: 1rem;
margin-bottom: 1.5rem;
position: relative;
z-index: 2;
}
.hero-card .capability-description {
font-size: 1.125rem;
margin-bottom: 2rem;
}
/* Feature Badges */
.feature-badges {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
position: relative;
z-index: 2;
}
.badge {
background: linear-gradient(135deg, var(--terracotta) 0%, #E06B47 100%);
color: var(--warm-white);
padding: 0.5rem 1rem;
border-radius: 2rem;
font-size: 0.875rem;
font-weight: 500;
box-shadow: 0 2px 8px rgba(205, 92, 64, 0.3);
transition: all var(--transition-normal);
}
.badge:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(205, 92, 64, 0.4);
}
/* Timeline Container */
.timeline-container {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 3rem;
max-width: 900px;
margin: 0 auto;
}
.timeline-item {
display: flex;
align-items: center;
position: relative;
}
.timeline-item.left {
flex-direction: row;
}
.timeline-item.right {
flex-direction: row-reverse;
}
.timeline-item.left .capability-card {
margin-right: 4rem;
transform: perspective(1000px) rotateY(2deg);
}
.timeline-item.right .capability-card {
margin-left: 4rem;
transform: perspective(1000px) rotateY(-2deg);
}
.timeline-item:hover .capability-card {
transform: perspective(1000px) rotateY(0deg) translateY(-8px);
}
/* Timeline Connectors */
.timeline-connector {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 2;
}
.connector-node {
width: 16px;
height: 16px;
background: linear-gradient(135deg, var(--terracotta) 0%, #E06B47 100%);
border-radius: 50%;
box-shadow:
0 0 0 4px rgba(255, 255, 255, 0.9),
0 0 0 8px rgba(205, 92, 64, 0.2),
0 4px 12px rgba(205, 92, 64, 0.3);
transition: all var(--transition-normal);
}
.connector-line {
width: 2px;
height: 60px;
background: linear-gradient(180deg,
rgba(205, 92, 64, 0.6) 0%,
rgba(205, 92, 64, 0.3) 50%,
rgba(205, 92, 64, 0.6) 100%);
border-radius: 1px;
margin-top: 1rem;
}
.timeline-item:last-child .connector-line {
display: none;
}
/* Applications Showcase */
.applications-showcase {
position: relative;
z-index: 1;
text-align: center;
}
.applications-title {
font-size: 1.75rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
margin-bottom: 2rem;
}
.applications-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
max-width: 600px;
margin: 0 auto;
}
@media (min-width: 640px) {
.applications-cards {
grid-template-columns: repeat(3, 1fr);
}
}
.app-card {
background: rgba(255, 255, 255, 0.8);
border-radius: 1rem;
padding: 1.5rem 1rem;
border: 1px solid rgba(122, 139, 122, 0.15);
transition: all var(--transition-normal);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
backdrop-filter: blur(5px);
position: relative;
overflow: hidden;
}
.app-card::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(205, 92, 64, 0.1) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.4s ease;
}
.app-card:hover::before {
width: 150px;
height: 150px;
}
.app-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(44, 95, 93, 0.12);
background: rgba(255, 255, 255, 0.95);
}
.app-icon {
font-size: 2rem;
transition: all var(--transition-normal);
position: relative;
z-index: 1;
}
.app-card:hover .app-icon {
transform: scale(1.1);
}
.app-card span {
font-size: 0.9rem;
font-weight: 500;
color: var(--teal);
text-align: center;
line-height: 1.3;
position: relative;
z-index: 1;
}
.student-projects {
float: right;
width: 33.33%;
margin-left: 1rem;
}
.student-projects a {
color: var(--orange);
text-decoration: none;
transition: color 0.3s ease;
}
.student-projects a:hover {
color: darken(var(--orange), 10%);
text-decoration: underline;
}
/* Technical Stack Section */
.tech-stack-section {
margin-top: 3rem;
padding: 2rem;
/* background: linear-gradient(135deg, rgba(245, 242, 232, 0.8) 0%, rgba(254, 252, 248, 0.9) 100%); */
border-radius: 12px;
border: 1px solid rgba(125, 139, 122, 0.2);
box-shadow: var(--shadow-sm);
}
.tech-stack-title {
font-family: var(--font-playfair);
font-size: 1.75rem;
font-weight: 700;
color: var(--teal);
margin-bottom: 1.5rem;
text-align: center;
}
.tech-categories {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (min-width: 768px) {
.tech-categories {
flex-direction: row;
justify-content: space-between;
}
}
.tech-category {
flex: 1;
text-align: center;
}
.tech-category-title {
font-family: var(--font-inter);
font-size: 1rem;
font-weight: 600;
color: var(--teal);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.tech-category-title .ph {
font-size: 1.25rem;
color: var(--terracotta);
}
.tech-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.tech-tag {
display: inline-block;
background: var(--warm-white);
color: var(--teal);
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
border: 1px solid rgba(125, 139, 122, 0.3);
transition: all var(--transition-normal);
cursor: default;
}
.tech-tag:hover {
background: var(--terracotta);
color: var(--warm-white);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(205, 92, 64, 0.2);
}
/* CTA Section */
.carto-cta-section {
position: relative;
z-index: 1;
text-align: center;
margin-top: 2rem;
}
.carto-cta-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
max-width: 400px;
margin: 0 auto;
}
@media (min-width: 480px) {
.carto-cta-buttons {
flex-direction: row;
justify-content: center;
gap: 1.5rem;
}
}
/* Mobile Adjustments */
@media (max-width: 768px) {
.cartography-expansion {
gap: 2rem;
}
.hero-card {
max-width: 100%;
padding: 2rem;
transform: none;
}
.hero-card:hover {
transform: translateY(-8px);
}
.timeline-container {
gap: 2rem;
}
.timeline-item.left,
.timeline-item.right {
flex-direction: column;
text-align: center;
}
.timeline-item.left .capability-card,
.timeline-item.right .capability-card {
margin: 0;
transform: none;
max-width: 100%;
}
.timeline-connector {
position: relative;
left: auto;
top: auto;
transform: none;
margin: 1rem 0;
}
.connector-line {
height: 30px;
}
.applications-cards {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.app-card {
padding: 1rem 0.75rem;
}
.carto-cta-buttons {
flex-direction: column;
gap: 1rem;
}
}
/* Mobile responsiveness for expansion section */
@media (max-width: 768px) {
.service-expansion-header {
padding: 1.5rem;
}
.expansion-title {
font-size: 1.5rem;
}
.expansion-content {
padding: 1.5rem;
}
.geospatial-expansion {
gap: 2rem;
}
}
/* =============================================================================
AI-Assisted Workflows Expansion Styles
============================================================================= */
.case-study-highlight {
background: linear-gradient(135deg, var(--cream) 0%, rgba(245, 242, 232, 0.3) 100%);
border: 1px solid rgba(122, 139, 122, 0.2);
border-radius: 1rem;
padding: 2rem;
margin: 2rem 0;
position: relative;
overflow: hidden;
}
.case-study-highlight::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--terracotta), var(--sage));
border-radius: 1rem 1rem 0 0;
}
.case-study-title {
font-family: var(--font-playfair);
font-size: 1.5rem;
font-weight: 600;
color: var(--teal);
margin-bottom: 1rem;
line-height: 1.3;
}
.case-study-description {
color: var(--sage);
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 1.05rem;
}
.case-study-metrics {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-top: 1.5rem;
}
@media (min-width: 640px) {
.case-study-metrics {
grid-template-columns: repeat(4, 1fr);
}
}
.metric-item {
text-align: center;
padding: 1rem;
background: rgba(255, 255, 255, 0.7);
border-radius: 0.75rem;
border: 1px solid rgba(122, 139, 122, 0.1);
transition: all var(--transition-normal);
}
.metric-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.9);
}
.metric-number {
display: block;
font-family: var(--font-jetbrains);
font-size: 1.75rem;
font-weight: 600;
color: var(--terracotta);
line-height: 1;
margin-bottom: 0.25rem;
}
.metric-label {
display: block;
font-size: 0.85rem;
color: var(--sage);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Featured Case Study */
.featured-case-study {
background: linear-gradient(135deg, var(--cream) 0%, rgba(245, 242, 232, 0.6) 100%);
border: 1px solid rgba(122, 139, 122, 0.15);
border-radius: 1.25rem;
padding: 2.5rem;
margin-top: 3rem;
position: relative;
overflow: hidden;
}
.featured-case-study::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;charset=UTF-8,') repeat;
opacity: 1;
}
.featured-content {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: center;
}
@media (min-width: 768px) {
.featured-content {
grid-template-columns: 1.2fr 0.8fr;
gap: 3rem;
}
}
.featured-text {
order: 1;
}
.featured-visual {
order: 2;
}
@media (min-width: 768px) {
.featured-text {
order: 1;
}
.featured-visual {
order: 2;
}
}
.featured-label {
display: inline-block;
background: linear-gradient(135deg, var(--terracotta), rgba(205, 92, 64, 0.8));
color: var(--warm-white);
padding: 0.375rem 0.875rem;
border-radius: 2rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1rem;
box-shadow: 0 2px 8px rgba(205, 92, 64, 0.2);
}
.featured-title {
font-family: var(--font-playfair);
font-size: 1.75rem;
font-weight: 600;
color: var(--teal);
margin-bottom: 1rem;
line-height: 1.3;
}
.featured-description {
color: var(--sage);
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 1rem;
}
.featured-highlights {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 2rem;
}
.highlight-item {
background: rgba(44, 95, 93, 0.08);
color: var(--teal);
padding: 0.5rem 0.875rem;
border-radius: 1.5rem;
font-size: 0.875rem;
font-weight: 500;
border: 1px solid rgba(44, 95, 93, 0.15);
}
.featured-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, var(--teal), rgba(44, 95, 93, 0.9));
color: var(--warm-white);
padding: 0.875rem 1.5rem;
border-radius: 0.75rem;
font-weight: 600;
text-decoration: none;
transition: all var(--transition-normal);
box-shadow: 0 4px 16px rgba(44, 95, 93, 0.2);
}
.featured-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(44, 95, 93, 0.3);
background: linear-gradient(135deg, rgba(44, 95, 93, 1), var(--teal));
}
.featured-cta:focus {
outline: 2px solid var(--terracotta);
outline-offset: 2px;
}
/* Code Preview */
.code-preview {
background: #1a1a1a;
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
max-width: 280px;
margin: 0 auto;
}
.code-header {
background: #2d2d2d;
padding: 0.75rem 1rem;
display: flex;
gap: 0.5rem;
align-items: center;
}
.code-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.code-dot.red {
background: #ff5f56;
}
.code-dot.yellow {
background: #ffbd2e;
}
.code-dot.green {
background: #27ca3f;
}
.code-content {
padding: 1rem;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.75rem;
line-height: 1.5;
overflow-x: auto;
}
.code-comment {
color: #6a9955;
}
.code-keyword {
color: #569cd6;
}
.code-function {
color: #dcdcaa;
}
.code-param {
color: #9cdcfe;
}
.code-string {
color: #ce9178;
}
.code-operator {
color: #d4d4d4;
}
.code-output {
color: #4ec9b0;
}
/* Mobile adjustments for AI workflows */
@media (max-width: 768px) {
.case-study-highlight {
padding: 1.5rem;
margin: 1.5rem 0;
}
.case-study-title {
font-size: 1.3rem;
}
.case-study-metrics {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.metric-number {
font-size: 1.5rem;
}
.metric-label {
font-size: 0.8rem;
}
.featured-case-study {
padding: 2rem;
margin-top: 2rem;
}
.featured-content {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.featured-title {
font-size: 1.5rem;
}
.featured-highlights {
margin-bottom: 1.5rem;
}
.highlight-item {
font-size: 0.8rem;
padding: 0.375rem 0.75rem;
}
.code-preview {
max-width: 100%;
}
}
/* =============================================================================
Projects Section
============================================================================= */
.projects {
padding: var(--section-padding);
background-color: var(--warm-white);
}
.projects-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
@media (min-width: 640px) {
.projects-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.projects-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.project-item {
background-color: var(--warm-white);
border-radius: 1rem;
padding: 2rem;
border: 1px solid rgba(122, 139, 122, 0.2);
transition: all var(--transition-normal);
cursor: pointer;
text-align: center;
position: relative;
overflow: hidden;
transform-style: preserve-3d;
}
.project-item:hover {
transform: translateY(-6px) rotateX(1deg) rotateY(1deg);
box-shadow: var(--shadow-lg);
background-color: rgba(255, 255, 255, 0.95);
}
.project-item:focus {
outline: 2px solid var(--terracotta);
outline-offset: 2px;
}
.project-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.5s ease;
}
.project-item:hover::before {
left: 100%;
}
.project-icon {
width: 3rem;
height: 3rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
color: var(--terracotta);
transition: all var(--transition-normal);
filter: drop-shadow(0 2px 4px rgba(205, 92, 64, 0.1));
}
.project-icon svg {
width: 100%;
height: 100%;
stroke-width: 1.5;
}
.project-icon .ph {
font-size: 3rem;
color: var(--terracotta);
transition: all var(--transition-normal);
}
.project-item:hover .project-icon {
animation: mapPinBounce 0.6s ease-out;
filter: drop-shadow(0 4px 8px rgba(205, 92, 64, 0.2));
}
.project-item:hover .project-icon svg {
stroke-width: 2;
}
.project-title {
font-size: 1.5rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
margin-bottom: 1rem;
line-height: 1.3;
}
.project-description {
color: var(--sage);
line-height: 1.6;
margin: 0;
font-size: 1rem;
}
/* =============================================================================
Case Study Page Styles
============================================================================= */
.case-study-body {
background-color: var(--cream);
min-height: 100vh;
}
.case-study-nav {
background: var(--warm-white);
padding: 2rem 0;
border-bottom: 1px solid rgba(122, 139, 122, 0.2);
position: sticky;
top: 80px;
z-index: 100;
}
.nav-links {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.nav-links a {
color: var(--sage);
text-decoration: none;
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
transition: all var(--transition-normal);
border: 1px solid transparent;
}
.nav-links a:hover {
background: var(--cream);
color: var(--teal);
border-color: rgba(122, 139, 122, 0.3);
}
.nav-links a.active {
background: var(--teal);
color: var(--warm-white);
}
.case-study-content {
max-width: 900px;
margin: 0 auto;
padding: 4rem 2rem;
}
.part-section {
background: var(--warm-white);
border-radius: 1rem;
padding: 3rem;
margin-bottom: 3rem;
border: 1px solid rgba(122, 139, 122, 0.1);
box-shadow: var(--shadow-md);
}
.part-header {
border-bottom: 2px solid var(--cream);
padding-bottom: 1.5rem;
margin-bottom: 2rem;
}
.part-number {
font-family: var(--font-jetbrains);
font-size: 0.9rem;
color: var(--terracotta);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.5rem;
}
.part-title {
font-family: var(--font-playfair);
font-size: 2rem;
font-weight: 600;
color: var(--teal);
margin-bottom: 1rem;
line-height: 1.3;
}
.part-content h3 {
font-family: var(--font-playfair);
font-size: 1.4rem;
color: var(--teal);
margin: 2rem 0 1rem;
}
.part-content h4 {
font-size: 1.2rem;
color: var(--sage);
margin: 1.5rem 0 0.75rem;
font-weight: 600;
}
.part-content p {
color: var(--sage);
line-height: 1.7;
margin-bottom: 1.25rem;
}
.part-content blockquote {
background: var(--cream);
border-left: 4px solid var(--terracotta);
padding: 1.5rem;
margin: 2rem 0;
border-radius: 0 0.5rem 0.5rem 0;
font-style: italic;
}
.part-content ul, .part-content ol {
margin: 1.5rem 0;
padding-left: 2rem;
}
.part-content li {
color: var(--sage);
line-height: 1.6;
margin-bottom: 0.75rem;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.metric-card {
background: var(--cream);
padding: 1.5rem;
border-radius: 0.75rem;
text-align: center;
border: 1px solid rgba(122, 139, 122, 0.2);
}
.metric-value {
font-family: var(--font-jetbrains);
font-size: 2rem;
font-weight: 600;
color: var(--terracotta);
display: block;
margin-bottom: 0.5rem;
}
.metric-desc {
color: var(--sage);
font-size: 0.9rem;
font-weight: 500;
}
.back-to-main {
text-align: center;
margin: 3rem 0;
}
/* Case Study Mobile Responsive */
@media (max-width: 768px) {
.case-study-title {
font-size: 2rem;
}
.case-study-subtitle {
font-size: 1.1rem;
}
.nav-links {
gap: 1rem;
}
.case-study-content {
padding: 2rem 1rem;
}
.part-section {
padding: 2rem;
}
.part-title {
font-size: 1.5rem;
}
/* Contact Logo Mobile Adjustments */
.contact-logo {
padding: 0.5rem;
margin-top: 1rem;
margin-bottom: 1.5rem;
justify-content: flex-start;
}
.contact-logo-image {
max-width: 220px;
padding: 0.75rem;
}
.contact-grid {
gap: 2rem;
}
.contact-info-content {
gap: 1.25rem;
}
}
/* =============================================================================
AI-Assisted Workflows Expansion Styles
============================================================================= */
.ai-workflows-expansion {
position: relative;
display: flex;
flex-direction: column;
gap: 3rem;
}
/* AI Section Header */
.ai-header {
margin-bottom: 2rem;
}
.ai-intro {
/* font-size: 1.25rem; */
color: var(--sage);
line-height: 1.6;
font-weight: 400;
width: 100%;
text-align: left;
}
/* Benefits Showcase */
.benefits-showcase {
margin-bottom: 3rem;
position: relative;
}
.benefits-title {
font-size: 1.75rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
text-align: center;
margin-bottom: 3rem;
}
.benefits-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
position: relative;
}
/* Connecting lines for workflow progression */
.benefits-grid::before {
content: '';
position: absolute;
top: 50%;
left: 10%;
right: 10%;
height: 2px;
background: linear-gradient(90deg,
var(--teal) 0%,
rgba(44, 95, 93, 0.6) 25%,
rgba(44, 95, 93, 0.4) 50%,
rgba(44, 95, 93, 0.6) 75%,
var(--teal) 100%);
border-radius: 1px;
opacity: 0;
transition: opacity 0.6s ease;
z-index: 0;
}
@media (min-width: 640px) {
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.benefits-grid::before {
opacity: 0.3;
}
}
@media (min-width: 1024px) {
.benefits-grid {
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.benefits-grid::before {
opacity: 0.5;
top: 40%;
}
}
.benefit-card {
background: rgba(255, 255, 255, 0.7);
border-radius: 1rem;
padding: 2rem 1.5rem;
border: 1px solid rgba(122, 139, 122, 0.1);
box-shadow: 0 2px 8px rgba(44, 95, 93, 0.06);
transition: all 0.3s ease;
text-align: center;
position: relative;
overflow: hidden;
backdrop-filter: blur(4px);
z-index: 1;
}
.benefit-card::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(44, 95, 93, 0.04) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.4s ease;
z-index: 0;
}
.benefit-card:hover::before {
width: 150px;
height: 150px;
}
.benefit-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 16px rgba(44, 95, 93, 0.12);
background: rgba(255, 255, 255, 0.9);
}
.benefit-icon {
width: 2.5rem;
height: 2.5rem;
margin-bottom: 1.25rem;
transition: all 0.3s ease;
position: relative;
z-index: 3;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.benefit-icon svg {
width: 100%;
height: 100%;
stroke-width: 1.5;
}
.benefit-card:hover .benefit-icon {
transform: scale(1.1);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.benefit-card:hover .benefit-icon svg {
stroke-width: 2;
}
.benefit-card h5 {
font-size: 1.125rem;
font-family: var(--font-playfair);
font-weight: 600;
color: var(--teal);
margin-bottom: 0.875rem;
position: relative;
z-index: 3;
line-height: 1.3;
}
.benefit-card p {
color: var(--sage);
line-height: 1.6;
font-size: 0.95rem;
margin: 0;
position: relative;
z-index: 3;
font-weight: 400;
}
/* Subtle differentiation for each benefit card */
.benefit-card:nth-child(1) .benefit-icon {
color: var(--terracotta);
}
.benefit-card:nth-child(2) .benefit-icon {
color: var(--teal);
}
.benefit-card:nth-child(3) .benefit-icon {
color: var(--sage);
}
.benefit-card:nth-child(4) .benefit-icon {
color: var(--terracotta);
}
/* Mobile adjustments for AI workflows */
@media (max-width: 768px) {
.ai-workflows-expansion {
gap: 2rem;
}
.ai-intro {
/* font-size: 1.125rem; */
}
.benefits-title {
font-size: 1.5rem;
margin-bottom: 2rem;
}
.benefits-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.benefits-grid::before {
display: none;
}
.benefit-card {
padding: 1.5rem 1.25rem;
}
.benefit-icon {
width: 2.25rem;
height: 2.25rem;
margin-bottom: 1rem;
}
.benefit-card h5 {
font-size: 1rem;
}
}
/* =============================================================================
Tooltip Styles
============================================================================= */
.tooltip-wrapper {
position: relative;
display: inline-block;
cursor: help;
overflow: visible;
}
/* Ensure parent containers don't clip the tooltip */
.ai-workflows-expansion .ai-header,
.ai-workflows-expansion .ai-intro {
overflow: visible;
}
.tooltip {
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background: var(--teal);
color: var(--warm-white);
padding: 0.75rem 1rem;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
width: 480px !important;
max-width: none !important;
text-align: center;
opacity: 0;
visibility: hidden;
transition: all var(--transition-normal);
z-index: 9999;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
font-family: var(--font-inter);
}
/* Tooltip arrow */
.tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--teal);
border-bottom: none;
}
/* Show tooltip on hover */
.tooltip-wrapper:hover .tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-4px);
}
/* Hover effect for the trigger text */
.tooltip-wrapper:hover strong {
color: var(--terracotta);
transition: color var(--transition-normal);
}
/* Responsive tooltip positioning */
@media (max-width: 768px) {
.tooltip {
font-size: 0.8rem;
padding: 0.5rem 0.75rem;
width: 350px !important;
max-width: none !important;
text-align: center;
}
.tooltip::after {
border-width: 5px;
}
}
/* =============================================================================
Career Experience Section - Enhanced Typography & Hierarchy
============================================================================= */
.experience {
padding: var(--section-padding) 0;
line-height: 1.7;
}
.section-header {
margin-bottom: 4rem;
text-align: center;
}
.experience-timeline {
max-width: 900px;
margin: 0 auto;
display: grid;
gap: 5rem;
}
.experience-entry {
position: relative;
display: grid;
gap: 2.5rem;
padding: 0 0 4rem 0;
}
.experience-entry:not(:last-child) {
border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}
.experience-entry:not(:last-child)::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.15), transparent);
}
/* Enhanced Header Typography with Accordion Functionality */
.entry-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
cursor: pointer;
padding: 1rem;
border-radius: 8px;
transition: all 0.2s ease;
user-select: none;
}
.entry-header:hover {
background: rgba(0, 0, 0, 0.02);
}
.entry-header:focus {
outline: 2px solid rgba(59, 130, 246, 0.5);
outline-offset: 2px;
}
.header-content {
flex: 1;
display: grid;
gap: 1rem;
}
.organization {
font-size: 2rem;
font-weight: 700;
color: var(--color-text);
margin: 0;
font-family: var(--font-playfair);
line-height: 1.2;
letter-spacing: -0.02em;
}
.role-summary {
font-size: 1.25rem;
color: rgba(0, 0, 0, 0.7);
margin: 0;
font-style: italic;
font-weight: 400;
line-height: 1.4;
}
.period-role {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 1rem;
font-size: 1rem;
margin-top: 0.5rem;
}
.role {
font-weight: 600;
color: rgba(0, 0, 0, 0.8);
}
.period {
font-weight: 400;
color: rgba(0, 0, 0, 0.6);
font-variant-numeric: tabular-nums;
}
/* Expand Icon */
.expand-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
border-radius: 50%;
background: rgba(0, 0, 0, 0.02);
}
.entry-header:hover .expand-icon {
color: rgba(0, 0, 0, 0.7);
background: rgba(0, 0, 0, 0.05);
}
.expand-icon svg {
transition: transform 0.3s ease;
}
.entry-header[aria-expanded="true"] .expand-icon svg {
transform: rotate(180deg);
}
/* Content Organization with Side-by-Side Layout */
.entry-content {
display: grid;
gap: 2rem;
}
.focus-areas {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
font-size: 0.9rem;
font-weight: 500;
color: rgba(0, 0, 0, 0.65);
}
.focus-areas span {
position: relative;
padding: 0.25rem 0.75rem;
background: rgba(0, 0, 0, 0.04);
border-radius: 4px;
transition: background-color 0.2s ease;
}
.focus-areas span:hover {
background: rgba(0, 0, 0, 0.08);
}
/* Accomplishments and Stats Side-by-Side Layout */
.accomplishments {
display: grid;
gap: 1.25rem;
grid-column: 1;
}
.accomplishments p {
margin: 0;
line-height: 1.65;
font-size: 1.05rem;
position: relative;
padding-left: 1.5rem;
}
.accomplishments p::before {
content: '';
position: absolute;
left: 0;
top: 0.6rem;
width: 4px;
height: 4px;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
}
.accomplishments p strong {
color: rgba(0, 0, 0, 0.9);
font-weight: 600;
}
/* Responsibilities vs Achievements Color Coding */
.accomplishments p:nth-child(odd) {
color: rgba(0, 0, 0, 0.8);
}
.accomplishments p:nth-child(even) {
color: rgba(0, 0, 0, 0.75);
}
.accomplishments p:nth-child(odd)::before {
background: rgba(59, 130, 246, 0.6); /* Achievement marker - blue */
}
.accomplishments p:nth-child(even)::before {
background: rgba(16, 185, 129, 0.6); /* Responsibility marker - green */
}
/* Vertical Stats Section - Positioned to the Right */
.key-stats {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 0;
padding: 0;
grid-column: 2;
align-self: start;
min-width: 200px;
}
.stat-pair {
display: grid;
gap: 0.5rem;
text-align: center;
padding: 1rem;
background: rgba(0, 0, 0, 0.02);
border-radius: 6px;
transition: background-color 0.2s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.stat-pair:hover {
background: rgba(0, 0, 0, 0.04);
}
.stat-pair dt {
font-size: 0.8rem;
color: rgba(0, 0, 0, 0.6);
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 500;
margin: 0;
}
.stat-pair dd {
font-size: 1.125rem;
font-weight: 700;
color: rgba(0, 0, 0, 0.9);
margin: 0;
font-variant-numeric: tabular-nums;
}
/* Create the side-by-side layout */
.entry-content {
display: grid;
grid-template-columns: 1fr auto;
gap: 3rem;
align-items: start;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0 1rem;
}
.entry-content.expanded {
max-height: 2000px;
opacity: 1;
padding: 1rem;
margin-top: 1rem;
}
/* Responsive Design */
@media (max-width: 1024px) {
.entry-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.key-stats {
grid-column: 1;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
min-width: auto;
}
.stat-pair {
flex: 1;
min-width: 150px;
}
}
@media (max-width: 768px) {
.experience-timeline {
max-width: none;
gap: 3.5rem;
}
.experience-entry {
gap: 2rem;
padding-bottom: 3rem;
}
.entry-header {
padding: 0.75rem;
gap: 0.75rem;
}
.expand-icon {
width: 28px;
height: 28px;
}
.organization {
font-size: 1.6rem;
}
.role-summary {
font-size: 1.1rem;
}
.period-role {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.focus-areas {
flex-direction: column;
gap: 0.5rem;
}
.accomplishments p {
font-size: 1rem;
padding-left: 1.25rem;
}
.key-stats {
flex-direction: column;
gap: 0.75rem;
}
.stat-pair {
text-align: left;
padding: 0.75rem;
}
}
@media (max-width: 480px) {
.entry-header {
padding: 0.5rem;
gap: 0.5rem;
}
.expand-icon {
width: 24px;
height: 24px;
}
.organization {
font-size: 1.4rem;
}
.role-summary {
font-size: 1rem;
}
.accomplishments p {
font-size: 0.95rem;
line-height: 1.6;
}
.key-stats {
gap: 0.5rem;
}
.stat-pair {
padding: 0.625rem;
}
}
/* =============================================================================
New Experience Section Styles
============================================================================= */
/* Skills Categories */
.skills-categories {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-top: 1rem;
}
@media (min-width: 768px) {
.skills-categories {
grid-template-columns: repeat(3, 1fr);
}
}
.skill-category {
background: rgba(122, 139, 122, 0.05);
border-radius: 8px;
padding: 1.5rem;
border: 1px solid rgba(122, 139, 122, 0.1);
}
.category-title {
color: var(--teal);
font-size: 1rem;
font-weight: 600;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.category-title .ph {
font-size: 1.125rem;
color: var(--terracotta);
}
.skill-category .skills-list {
gap: 0.5rem;
justify-content: flex-start;
}
/* Metric Details */
.metric-details {
font-size: 0.8rem;
color: var(--sage);
opacity: 0.8;
margin-top: 0.25rem;
line-height: 1.4;
}
/* Mid-Section CTA */
.experience-mid-cta {
background: linear-gradient(135deg, var(--teal) 0%, var(--sage) 100%);
border-radius: 12px;
padding: 2.5rem;
margin: 3rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.experience-mid-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
}
.mid-cta-content {
position: relative;
z-index: 2;
}
.mid-cta-title {
color: var(--warm-white);
font-family: var(--font-playfair);
font-size: 1.75rem;
font-weight: 600;
margin-bottom: 1rem;
}
.mid-cta-description {
color: rgba(255, 255, 255, 0.9);
font-size: 1.125rem;
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.experience-mid-cta .cta-button {
background: var(--warm-white);
color: var(--teal);
border: 2px solid var(--warm-white);
}
.experience-mid-cta .cta-button:hover {
background: transparent;
color: var(--warm-white);
}
/* Case Study Icons */
.case-study-icon {
width: 3rem;
height: 3rem;
background: linear-gradient(135deg, var(--terracotta), var(--sage));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
flex-shrink: 0;
}
.case-study-icon .ph {
font-size: 1.5rem;
color: var(--warm-white);
}
.case-study-item {
display: flex;
flex-direction: column;
background: var(--warm-white);
border-radius: 12px;
padding: 2rem;
border: 1px solid rgba(122, 139, 122, 0.1);
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
/* Expand/Collapse Functionality */
.expand-btn {
background: linear-gradient(135deg, var(--cream) 0%, rgba(122, 139, 122, 0.1) 100%);
border: 1px solid rgba(122, 139, 122, 0.2);
border-radius: 6px;
padding: 0.75rem 1rem;
color: var(--teal);
font-weight: 500;
cursor: pointer;
transition: all var(--transition-normal);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: 1.5rem 0;
width: 100%;
}
.expand-btn:hover {
background: linear-gradient(135deg, rgba(122, 139, 122, 0.1) 0%, var(--cream) 100%);
border-color: var(--terracotta);
color: var(--terracotta);
}
.expand-icon {
transition: transform var(--transition-normal);
}
.expand-btn[aria-expanded="true"] .expand-icon {
transform: rotate(180deg);
}
/* Progressive Disclosure Animation */
.curriculum-highlights {
overflow: hidden;
transition: all var(--transition-normal);
}
.curriculum-highlights.hidden {
max-height: 0;
opacity: 0;
margin: 0;
padding: 0;
}
.curriculum-highlights:not(.hidden) {
max-height: 1000px;
opacity: 1;
margin-top: 1.5rem;
}
/* Experience Tagline */
.experience-tagline {
color: var(--sage);
font-size: 1.125rem;
line-height: 1.6;
margin-top: 1.5rem; /* Increased from 1rem */
margin-bottom: 2rem; /* Added bottom margin */
font-style: italic;
}
/* Philosophy Pullquote */
.philosophy-pullquote {
background: linear-gradient(135deg, rgba(122, 139, 122, 0.1) 0%, rgba(205, 92, 64, 0.05) 100%);
border-left: 4px solid var(--terracotta);
padding: 2rem;
margin: 3rem 0; /* Increased from 2rem */
border-radius: 0 8px 8px 0;
position: relative;
box-shadow: var(--shadow-sm);
}
.philosophy-pullquote::before {
content: '"';
font-family: var(--font-playfair);
font-size: 3rem;
color: var(--terracotta);
position: absolute;
top: 0.5rem;
left: 1rem;
opacity: 0.3;
}
.philosophy-pullquote p {
font-family: var(--font-playfair);
font-size: 1.25rem;
font-weight: 600;
color: var(--teal);
margin: 0;
padding-left: 1rem;
line-height: 1.4;
}
/* Key Metrics Section */
.key-metrics {
background: var(--warm-white);
border-radius: 12px;
padding: 2.5rem; /* Increased from 2rem */
margin: 3rem 0; /* Increased spacing */
border: 1px solid rgba(122, 139, 122, 0.1);
box-shadow: var(--shadow-sm);
}
.metrics-title {
font-family: var(--font-playfair);
font-size: 1.75rem;
color: var(--teal);
margin-bottom: 2rem;
text-align: center;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Increased min width */
gap: 2rem; /* Increased from 1.5rem */
margin-bottom: 2.5rem; /* Increased */
}
@media (min-width: 768px) {
.metrics-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.metric-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: white;
border-radius: 8px;
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
border: 1px solid rgba(122, 139, 122, 0.1);
}
.metric-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--terracotta);
}
.metric-icon {
flex-shrink: 0;
width: 3rem;
height: 3rem;
background: linear-gradient(135deg, var(--terracotta), var(--sage));
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.metric-icon svg {
width: 1.5rem;
height: 1.5rem;
}
.metric-content {
flex: 1;
}
.metric-number {
font-family: var(--font-playfair);
font-size: 2rem;
font-weight: 700;
color: var(--terracotta);
line-height: 1;
margin-bottom: 0.25rem;
}
.metric-label {
font-size: 0.9rem;
color: var(--teal);
line-height: 1.3;
opacity: 0.9;
}
/* Technical Skills */
.technical-skills {
margin-top: 3rem; /* Increased from 2rem */
padding-top: 2rem;
border-top: 2px solid var(--cream); /* Added visual separator */
}
.skills-title {
font-family: var(--font-playfair);
font-size: 1.25rem;
color: var(--teal);
margin-bottom: 1rem;
text-align: center;
}
.skills-list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem; /* Increased from 0.5rem */
margin-top: 1rem;
}
.skill-tag {
background: linear-gradient(135deg, var(--cream) 0%, rgba(122, 139, 122, 0.1) 100%);
color: var(--sage);
padding: 0.5rem 1rem; /* Increased padding */
border-radius: 6px; /* Slightly larger radius */
font-size: 0.9rem; /* Slightly larger */
font-weight: 500;
border: 1px solid rgba(122, 139, 122, 0.2);
transition: all var(--transition-normal);
}
.skill-tag:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
filter: brightness(1.1);
}
/* Case Studies Grid */
.case-studies-intro {
color: var(--teal);
font-size: 1.125rem;
line-height: 1.6;
margin-bottom: 2rem;
}
.case-studies-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) {
.case-studies-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.case-study-item {
background: var(--warm-white);
border-radius: 12px;
padding: 2rem;
border: 1px solid rgba(122, 139, 122, 0.15);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.case-study-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--terracotta), var(--sage));
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-normal);
}
.case-study-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.case-study-item:hover::before {
transform: scaleX(1);
}
.case-study-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
gap: 1rem;
}
.case-study-title {
font-family: var(--font-playfair);
font-size: 1.25rem;
color: var(--teal);
margin: 0;
flex: 1;
}
.case-study-tag {
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.case-study-tag.climate {
background-color: rgba(52, 152, 219, 0.1);
color: #3498db;
}
.case-study-tag.environment {
background-color: rgba(46, 204, 113, 0.1);
color: #2ecc71;
}
.case-study-tag.urban {
background-color: rgba(155, 89, 182, 0.1);
color: #9b59b6;
}
.case-study-tag.infrastructure {
background-color: rgba(230, 126, 34, 0.1);
color: #e67e22;
}
.case-study-description {
color: var(--teal);
line-height: 1.6;
margin-bottom: 1.5rem;
opacity: 0.9;
}
.case-study-description em {
color: var(--terracotta);
font-weight: 600;
}
.case-study-link {
color: var(--terracotta);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all var(--transition-normal);
}
.case-study-link:hover {
color: var(--sage);
transform: translateX(2px);
}
/* Curriculum Highlights */
.curriculum-summary {
color: var(--teal);
line-height: 1.6;
}
.curriculum-highlights {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
@media (min-width: 768px) {
.curriculum-highlights {
grid-template-columns: repeat(3, 1fr);
}
}
.curriculum-track {
background: var(--warm-white);
padding: 1.5rem;
border-radius: 8px;
border: 1px solid rgba(122, 139, 122, 0.15);
transition: all var(--transition-normal);
}
.curriculum-track:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--terracotta);
}
.curriculum-track h4 {
font-family: var(--font-playfair);
color: var(--terracotta);
margin-bottom: 0.75rem;
font-size: 1.125rem;
}
.curriculum-track p {
color: var(--teal);
line-height: 1.5;
margin: 0;
opacity: 0.9;
}
/* Work Principles (updated from philosophy-principles) */
.work-principles {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) {
.work-principles {
grid-template-columns: repeat(3, 1fr);
}
}
/* Experience CTA */
.experience-cta {
background: linear-gradient(135deg, var(--teal) 0%, var(--sage) 100%);
border-radius: 16px;
padding: 3rem 2rem;
margin: 4rem 0 2rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.experience-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.3;
}
.cta-content {
position: relative;
z-index: 1;
}
.cta-title {
font-family: var(--font-playfair);
font-size: 2rem;
color: white;
margin-bottom: 1rem;
font-weight: 700;
}
.cta-description {
color: rgba(255, 255, 255, 0.9);
font-size: 1.125rem;
line-height: 1.6;
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.cta-buttons .cta-button {
min-width: 160px;
}
.cta-buttons .cta-primary {
background: var(--terracotta);
color: white;
border: 2px solid var(--terracotta);
}
.cta-buttons .cta-primary:hover {
background: white;
color: var(--terracotta);
transform: translateY(-2px);
}
.cta-buttons .cta-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.cta-buttons .cta-secondary:hover {
background: white;
color: var(--teal);
transform: translateY(-2px);
}
/* Mobile Responsive for New Elements */
@media (max-width: 768px) {
.experience-tagline {
font-size: 1rem;
text-align: center;
}
.philosophy-pullquote {
padding: 1.5rem;
margin: 1.5rem 0;
}
.philosophy-pullquote p {
font-size: 1.125rem;
padding-left: 0.5rem;
}
.key-metrics {
padding: 2rem 1.5rem;
margin: 2rem 0;
}
.metrics-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.metric-item {
padding: 1.25rem;
flex-direction: column;
text-align: center;
gap: 0.75rem;
}
.metric-number {
font-size: 1.75rem;
}
.curriculum-highlights {
grid-template-columns: 1fr;
}
.case-studies-grid {
grid-template-columns: 1fr;
}
.case-study-header {
flex-direction: column;
align-items: flex-start;
}
.case-study-tag {
align-self: flex-start;
}
.skills-list {
justify-content: flex-start;
}
.work-principles {
grid-template-columns: 1fr;
}
.experience-cta {
padding: 2rem 1.5rem;
margin: 3rem 0 1rem 0;
}
.cta-title {
font-size: 1.5rem;
}
.cta-description {
font-size: 1rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-buttons .cta-button {
width: 100%;
max-width: 280px;
}
/* Mobile styles for new elements */
.skills-categories {
grid-template-columns: 1fr;
gap: 1rem;
}
.skill-category {
padding: 1rem;
}
.category-title {
font-size: 0.9rem;
}
.experience-mid-cta {
padding: 2rem 1rem;
margin: 2rem 0;
}
.mid-cta-title {
font-size: 1.5rem;
}
.mid-cta-description {
font-size: 1rem;
}
.case-study-icon {
width: 2.5rem;
height: 2.5rem;
margin-bottom: 0.75rem;
}
.case-study-icon .ph {
font-size: 1.25rem;
}
.expand-btn {
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
}
.metric-details {
font-size: 0.75rem;
}
}
/* Contact Invitation Styling */
.contact-invitation {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
text-align: left;
}
.invitation-text {
color: var(--teal);
line-height: 1.6;
}
.invitation-text p {
margin-bottom: 0.75rem;
}
.invitation-text p:last-child {
margin-bottom: 0;
font-style: italic;
color: var(--sage);
}
/* Subtle Social Links - Now above image */
.social-links-subtle {
display: flex;
gap: 1rem;
justify-content: flex-start;
margin: 1rem 0;
order: 2;
}
.social-link-subtle {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: var(--sage);
transition: color 0.3s ease;
text-decoration: none;
opacity: 0.8;
}
.social-link-subtle:hover {
color: var(--terracotta);
opacity: 1;
}
.social-icon-small {
width: 28px;
height: 28px;
}
/* Craftsman's Seal - Now larger and left-aligned */
.craftsman-seal {
margin: 1rem 0;
opacity: 0.9;
transition: all 0.4s ease;
align-self: flex-start;
order: 3;
}
.craftsman-seal:hover {
opacity: 1;
transform: rotate(1deg);
}
.seal-image {
width: 400px;
height: 400px;
object-fit: contain;
filter: grayscale(0.1) drop-shadow(0 8px 32px rgba(44, 95, 93, 0.2));
transition: all 0.4s ease;
border-radius: 1.25rem;
background: rgba(255, 255, 255, 0.7);
padding: 1.5rem;
border: 2px solid rgba(122, 139, 122, 0.15);
}
.seal-image:hover {
transform: scale(1.02) rotate(-1deg);
filter: grayscale(0) drop-shadow(0 12px 48px rgba(44, 95, 93, 0.3));
background: rgba(255, 255, 255, 0.9);
border-color: rgba(122, 139, 122, 0.3);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.craftsman-seal {
margin: 1rem 0;
align-self: center;
}
.seal-image {
width: 280px;
height: 280px;
}
.invitation-text {
font-size: 0.95rem;
}
.contact-invitation {
align-items: center;
text-align: center;
}
.social-links-subtle {
justify-content: center;
}
.social-link-subtle {
width: 44px;
height: 44px;
}
.social-icon-small {
width: 24px;
height: 24px;
}
}
/* =============================================================================
Redesigned Experience Section - Client-Centric Styles
============================================================================= */
/* Key Stats Bar */
.key-stats-bar {
display: flex;
justify-content: center;
align-items: center;
gap: 3rem;
margin: 3rem 0 4rem 0;
padding: 2rem;
background: linear-gradient(135deg, rgba(205, 92, 64, 0.05) 0%, rgba(122, 139, 122, 0.05) 100%);
border-radius: 12px;
border: 1px solid rgba(122, 139, 122, 0.1);
}
.stat-item {
text-align: center;
transition: transform var(--transition-normal);
}
.stat-item:hover {
transform: translateY(-2px);
}
.stat-number {
font-size: 3rem;
font-weight: 700;
color: var(--terracotta);
font-family: var(--font-playfair);
line-height: 1;
margin-bottom: 0.5rem;
display: block;
}
.stat-label {
font-size: 0.875rem;
color: var(--teal);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.9;
}
/* Expertise Grid - Two Column Layout */
.expertise-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
margin-bottom: 4rem;
}
@media (min-width: 1024px) {
.expertise-grid {
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
}
.expertise-column {
background: var(--cream);
padding: 2.5rem;
border-radius: 12px;
border: 1px solid rgba(122, 139, 122, 0.1);
transition: all var(--transition-normal);
}
.expertise-column:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: rgba(122, 139, 122, 0.2);
}
.expertise-column-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--teal);
margin-bottom: 1.5rem;
font-family: var(--font-playfair);
position: relative;
padding-bottom: 0.5rem;
}
.expertise-column-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background: var(--terracotta);
}
.expertise-intro {
font-size: 1.125rem;
line-height: 1.6;
color: var(--teal);
margin-bottom: 2rem;
font-weight: 400;
}
/* Service Offerings */
.service-offerings {
display: flex;
flex-direction: column;
gap: 1rem;
}
.offering-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem;
background: var(--warm-white);
border-radius: 8px;
transition: all var(--transition-normal);
border: 1px solid rgba(122, 139, 122, 0.05);
}
.offering-item:hover {
background: rgba(205, 92, 64, 0.05);
transform: translateX(5px);
border-color: rgba(205, 92, 64, 0.1);
}
.offering-icon {
font-size: 1.5rem;
flex-shrink: 0;
transition: transform var(--transition-normal);
}
.offering-item:hover .offering-icon {
transform: scale(1.1);
}
.offering-text {
font-size: 1rem;
font-weight: 500;
color: var(--teal);
line-height: 1.4;
}
/* Foundation Column Styling */
.foundation-text {
font-size: 1rem;
line-height: 1.6;
color: var(--teal);
margin-bottom: 1.5rem;
}
.foundation-highlight {
background: rgba(205, 92, 64, 0.05);
padding: 1.5rem;
border-radius: 8px;
border-left: 4px solid var(--terracotta);
font-size: 1rem;
color: var(--teal);
font-style: italic;
margin-top: 1.5rem;
}
.foundation-highlight strong {
color: var(--terracotta);
font-weight: 600;
}
/* Mobile Responsive for New Elements */
@media (max-width: 768px) {
.key-stats-bar {
flex-direction: column;
gap: 2rem;
margin: 2rem 0 3rem 0;
padding: 1.5rem;
}
.stat-number {
font-size: 2.5rem;
}
.expertise-grid {
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 3rem;
}
.expertise-column {
padding: 2rem;
}
.expertise-column-title {
font-size: 1.25rem;
}
.expertise-intro {
font-size: 1rem;
}
.offering-item {
padding: 1rem;
}
.foundation-highlight {
padding: 1.25rem;
}
}
/* Cartography workflow diagram styling */
.carto-workflow-diagram {
float: right;
width: 40%;
margin: 0 0 2rem 0;
background: var(--cream);
border-radius: 12px;
padding: 2rem;
box-shadow: var(--shadow-md);
transition: all var(--transition-normal);
text-align: center;
border: 1px solid rgba(122, 139, 122, 0.1);
}
.carto-workflow-diagram:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.workflow-main-title {
font-family: var(--font-playfair);
font-size: 1.5rem;
font-weight: 700;
color: var(--teal);
margin-bottom: 0.5rem;
line-height: 1.2;
letter-spacing: 1px;
}
.workflow-subtitle {
font-style: italic;
color: var(--sage);
font-size: 0.875rem;
margin-bottom: 2rem;
line-height: 1.3;
}
.workflow-steps {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.workflow-step {
text-align: center;
position: relative;
}
/* .workflow-step:not(:last-child)::after {
content: '|';
position: absolute;
bottom: -0.75rem;
left: 50%;
transform: translateX(-50%);
color: var(--sage);
font-weight: bold;
} */
.step-title {
font-family: var(--font-inter);
font-size: 0.875rem;
font-weight: 600;
color: var(--teal);
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.2;
}
.step-description {
font-size: 0.75rem;
color: var(--sage);
line-height: 1.3;
margin: 0;
font-style: italic;
}
/* Left column content that respects floating workflow diagram */
.carto-intro {
margin-bottom: 2rem;
}
/* PHM Logo styling */
.phm-logo {
max-width: 96%;
height: auto;
margin: 1rem 0;
border-radius: 8px;
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
}
.phm-logo:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Tech stack styling is handled by the existing .tech-stack-section rules */
@media (max-width: 768px) {
.carto-header {
display: block;
}
#carto-workflow-image {
display: block;
max-width: 100%;
margin: 0 auto 1.5rem;
}
.carto-left-content {
margin-right: 0;
padding-right: 0;
}
.workflow-main-title {
font-size: 1.25rem;
}
.workflow-subtitle {
font-size: 0.8rem;
}
}
/* AI-Assisted Workflows Two-Column Layout */
.ai-content-grid {
display: flex;
flex-direction: row;
gap: 3rem;
align-items: flex-start;
margin-bottom: 2rem;
}
.ai-left-content {
flex: 1 1 60%;
min-width: 0;
}
.ai-right-content {
flex: 1 1 35%;
min-width: 220px;
background: #f8f6f1;
border-radius: 10px;
padding: 2rem 1.5rem;
box-shadow: 0 2px 8px rgba(44,95,93,0.04);
}
.llm-applications-title {
font-family: var(--font-playfair);
font-size: 1.1rem;
margin-bottom: 1rem;
color: var(--teal);
}
.llm-applications-list {
list-style: disc inside;
color: var(--teal);
font-size: 1rem;
padding-left: 1rem;
}
.llm-applications-list li {
margin-bottom: 0.75rem;
}
@media (max-width: 900px) {
.ai-content-grid {
flex-direction: column;
gap: 1.5rem;
}
.ai-right-content {
padding: 1.25rem 1rem;
}
}