diff --git a/index.html b/index.html index 4a68d56..ade6e06 100644 --- a/index.html +++ b/index.html @@ -52,8 +52,29 @@ + + +
+

Digital Experiences,
Perfectly Brewed.

diff --git a/styles.css b/styles.css index a194f81..f795aa5 100644 --- a/styles.css +++ b/styles.css @@ -1,44 +1,54 @@ :root { - /* Palette - Coffee Theme */ - --color-coffee-dark: #3b2f2f; /* Dark Roast - Replaces Charcoal */ + /* Palette - Coffee Theme Enhanced */ + --color-coffee-dark: #2c211d; /* Espresso */ --color-coffee-medium: #6F4E37; /* Medium Roast */ - --color-cream: #F5E8C7; /* Light Roast/Foam */ - --color-gold: #D4A574; /* Caramel/Gold Accent */ - --color-teal: #1D7874; /* Deep Teal Accent - Optimized for contrast */ - --color-orange: #E76F51; /* Warm Orange/Terracotta */ + --color-cream: #F5E8C7; /* Latte Foam */ + --color-gold: #D4A574; /* Caramel */ + --color-teal: #1D7874; /* Oxidized Copper */ + --color-orange: #E76F51; /* Terracotta */ + + /* Gradients */ + --gradient-hero: linear-gradient(135deg, var(--color-coffee-dark) 0%, var(--color-coffee-medium) 100%); + --gradient-gold: linear-gradient(45deg, var(--color-gold), #e8c39e); + --gradient-teal: linear-gradient(45deg, var(--color-teal), #2a9d8f); /* Semantic Colors - Light Mode Default */ - --bg-body: var(--color-cream); + --bg-body: #FDFBF7; --text-body: var(--color-coffee-dark); - --bg-surface: color-mix(in srgb, var(--color-cream), white 40%); - --color-primary: var(--color-teal); /* Replaces Electric Blue */ + --bg-surface-rgb: 255, 255, 255; + --bg-surface: rgba(var(--bg-surface-rgb), 0.7); + --color-primary: var(--color-teal); --color-secondary: var(--color-gold); - --border-subtle: color-mix(in srgb, var(--color-coffee-medium), transparent 85%); - --shadow-soft: 0 4px 20px -2px color-mix(in srgb, var(--color-coffee-dark), transparent 90%); + --border-subtle: rgba(111, 78, 55, 0.15); + --shadow-soft: 0 10px 30px -5px rgba(44, 33, 29, 0.08); + --shadow-glass: 0 8px 32px 0 rgba(44, 33, 29, 0.1); /* Section Backgrounds */ - --bg-section-alt: color-mix(in srgb, var(--color-coffee-medium), transparent 95%); + --bg-section-alt: rgba(111, 78, 55, 0.03); /* Typography */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; + --font-display: 'Inter', system-ui, sans-serif; /* Could swap for a Serif if linked */ /* BS Overrides */ --bs-body-bg: var(--bg-body); --bs-body-color: var(--text-body); --bs-primary: var(--color-primary); - --bs-primary-rgb: 42, 157, 143; /* RGB of Teal */ + --bs-primary-rgb: 42, 157, 143; } @media (prefers-color-scheme: dark) { :root { /* Semantic Colors - Dark Mode */ - --bg-body: var(--color-coffee-dark); - --text-body: var(--color-cream); - --bg-surface: color-mix(in srgb, var(--color-coffee-dark), black 20%); - --border-subtle: color-mix(in srgb, var(--color-cream), transparent 85%); - --shadow-soft: 0 4px 20px -2px black; - --bg-section-alt: color-mix(in srgb, var(--color-coffee-dark), white 5%); + --bg-body: #1a1412; + --text-body: #F5E8C7; + --bg-surface-rgb: 30, 24, 22; + --bg-surface: rgba(var(--bg-surface-rgb), 0.6); + --border-subtle: rgba(245, 232, 199, 0.1); + --shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.5); + --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.4); + --bg-section-alt: rgba(255, 255, 255, 0.02); /* BS Overrides */ --bs-body-bg: var(--bg-body); @@ -51,12 +61,87 @@ body { font-family: var(--font-sans); background-color: var(--bg-body); + /* Subtle Grain Texture */ + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); color: var(--text-body); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color 0.3s ease, color 0.3s ease; + overflow-x: hidden; /* Prevent horizontal scroll from floating elements */ } +/* ===== DECORATIVE LAYERS ===== */ +.decorative-layer { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 0; + overflow: hidden; +} + +.floating-bean { + position: absolute; + opacity: 0.03; + color: var(--color-coffee-dark); + animation: float-bean 20s infinite linear; +} + +@media (prefers-color-scheme: dark) { + .floating-bean { + color: var(--color-cream); + opacity: 0.05; + } +} + +.bean-1 { width: 100px; top: 10%; left: 5%; animation-duration: 25s; } +.bean-2 { width: 150px; top: 60%; right: -5%; animation-duration: 35s; animation-direction: reverse; } +.bean-3 { width: 80px; top: 80%; left: 15%; animation-duration: 30s; animation-delay: -5s; } + +@keyframes float-bean { + 0% { transform: translate(0, 0) rotate(0deg); } + 33% { transform: translate(30px, -50px) rotate(120deg); } + 66% { transform: translate(-20px, 50px) rotate(240deg); } + 100% { transform: translate(0, 0) rotate(360deg); } +} + +/* Steam Animation */ +.steam-container { + position: absolute; + top: 40%; /* Adjust based on Hero layout */ + left: 50%; + transform: translateX(-50%); + width: 200px; + height: 200px; + z-index: 0; + pointer-events: none; + opacity: 0.3; +} + +.steam-particle { + position: absolute; + width: 40px; + height: 40px; + background: radial-gradient(circle, var(--color-coffee-medium) 0%, transparent 70%); + border-radius: 50%; + opacity: 0; + filter: blur(8px); + animation: rise 4s infinite ease-in; +} + +.steam-particle:nth-child(1) { left: 40%; animation-delay: 0s; } +.steam-particle:nth-child(2) { left: 60%; animation-delay: 1.5s; width: 30px; height: 30px; } +.steam-particle:nth-child(3) { left: 50%; animation-delay: 3s; width: 50px; height: 50px; } + +@keyframes rise { + 0% { transform: translateY(0) scale(1); opacity: 0; } + 50% { opacity: 0.4; } + 100% { transform: translateY(-100px) scale(2); opacity: 0; } +} + + a { color: var(--color-primary); text-decoration: none; @@ -73,39 +158,46 @@ a { /* Typography Enhancements */ h1, h2, h3, h4, h5, h6 { font-weight: 800; - letter-spacing: -0.03em; + letter-spacing: -0.04em; /* Tighter */ color: currentColor; margin-bottom: 1rem; + font-family: var(--font-display); } h1 { - font-size: clamp(2.5rem, 5vw, 4rem); - line-height: 1.1; + font-size: clamp(3rem, 6vw, 5rem); + line-height: 1.05; + text-shadow: 2px 2px 0 rgba(0,0,0,0.05); } h2 { - font-size: clamp(2rem, 4vw, 2.75rem); - margin-bottom: 3rem; - padding-bottom: 1rem; + font-size: clamp(2.5rem, 5vw, 3.5rem); + margin-bottom: 4rem; + padding-bottom: 1.5rem; position: relative; display: inline-block; border-bottom: none; + background: var(--gradient-hero); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; } h2::after { content: ''; position: absolute; bottom: 0; - left: 0; + left: 50%; + transform: translateX(-50%); width: 60px; - height: 4px; - background: var(--color-secondary); - border-radius: 2px; - transition: width 0.3s ease; + height: 6px; + background: var(--color-gold); + border-radius: 4px; + transition: width 0.4s ease; } section:hover h2::after { - width: 100%; + width: 120px; } /* Sections */ @@ -116,12 +208,13 @@ section { .section-alt { background-color: var(--bg-section-alt); - border-top: 1px solid var(--border-subtle); - border-bottom: 1px solid var(--border-subtle); + /* Remove borders for seamless look, rely on background change */ + border-top: none; + border-bottom: none; } .section-padding { - padding-block: clamp(4rem, 8vw, 6rem); + padding-block: clamp(6rem, 10vw, 8rem); /* More breathing room */ } /* Header/Hero Section */ @@ -135,36 +228,42 @@ section { position: relative; padding: 2rem 1rem; z-index: 1; + overflow: hidden; } .hero-content { - max-width: 900px; + max-width: 1000px; margin: 0 auto; + position: relative; + z-index: 2; } .hero-title { - font-size: clamp(3rem, 8vw, 5.5rem); - line-height: 1.1; - margin-bottom: 1.5rem; - background: linear-gradient(135deg, var(--color-coffee-dark) 0%, var(--color-coffee-medium) 100%); + font-size: clamp(3.5rem, 10vw, 7rem); + line-height: 1; + margin-bottom: 2rem; + background: var(--gradient-hero); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; + letter-spacing: -0.05em; + filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1)); } .hero-subtitle { - font-size: clamp(1.25rem, 3vw, 1.75rem); - margin-bottom: 2.5rem; + font-size: clamp(1.25rem, 3vw, 2rem); + margin-bottom: 3rem; color: var(--color-coffee-dark); font-weight: 500; min-height: 1.5em; opacity: 0.9; + letter-spacing: -0.01em; } @media (prefers-color-scheme: dark) { .hero-title { - background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-gold) 100%); + background: linear-gradient(135deg, #fff 0%, var(--color-gold) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; @@ -173,15 +272,24 @@ section { .hero-subtitle { color: var(--color-cream); } + + h2 { + background: linear-gradient(135deg, #fff 0%, var(--color-gold) 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + } } /* Cards (Services & Portfolio) */ .card { background-color: var(--bg-surface); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-subtle); - border-radius: 12px; + border-radius: 16px; /* Increased radius */ overflow: hidden; - transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease; + transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); height: 100%; /* Scroll Animation Entry */ @@ -192,35 +300,41 @@ section { animation-range: entry 10% cover 20%; &:hover { - transform: translateY(-4px) scale(1.01); - box-shadow: var(--shadow-soft); - border-color: var(--color-secondary); + transform: translateY(-8px) scale(1.02); + box-shadow: var(--shadow-glass); + border-color: var(--color-gold); /* Gold Accent */ + background-color: color-mix(in srgb, var(--bg-surface), var(--color-cream) 10%); } .card-img-top { aspect-ratio: 16/9; object-fit: cover; - transition: transform 0.5s ease; + transition: transform 0.6s ease; + filter: sepia(20%) contrast(1.1); /* Subtle coffee tint */ } &:hover .card-img-top { - transform: scale(1.05); + transform: scale(1.08); + filter: sepia(0%) contrast(1.2); } .card-body { - padding: 1.5rem; + padding: 2rem; display: flex; flex-direction: column; h5.card-title { - font-size: 1.25rem; + font-size: 1.5rem; /* Larger */ margin-bottom: 0.75rem; + font-family: var(--font-display); + letter-spacing: -0.02em; } p.card-text { - font-size: 0.95rem; + font-size: 1rem; opacity: 0.9; flex-grow: 1; + line-height: 1.7; } } } @@ -232,13 +346,18 @@ section { .list-group-item { background-color: var(--bg-surface); + backdrop-filter: blur(8px); border-color: var(--border-subtle); font-weight: 500; - transition: background-color 0.2s; + transition: all 0.3s ease; + border-radius: 8px; + margin-bottom: 0.5rem; &:hover { - background-color: color-mix(in srgb, var(--color-primary), transparent 95%); - border-left: 4px solid var(--color-secondary); + background-color: color-mix(in srgb, var(--color-primary), transparent 90%); + border-left: 6px solid var(--color-secondary); + transform: translateX(5px); + box-shadow: 0 4px 15px rgba(0,0,0,0.05); } } } @@ -264,51 +383,73 @@ footer { /* Tech Stack Cards */ .tech-card { - padding: 2rem 1.5rem; - border-radius: 12px; + padding: 2.5rem 1.5rem; + border-radius: 20px; background-color: var(--bg-surface); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); border: 1px solid var(--border-subtle); text-align: center; height: 100%; - transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; + transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Elastic Bounce */ + position: relative; + overflow: hidden; + z-index: 1; +} + +.tech-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: var(--gradient-teal); + transform: scaleX(0); + transition: transform 0.4s ease; } .tech-card:hover { - transform: translateY(-5px); - box-shadow: 0 10px 30px -5px color-mix(in srgb, var(--color-primary), transparent 85%); - border-color: var(--color-secondary); + transform: translateY(-8px); + box-shadow: 0 15px 40px -10px rgba(29, 120, 116, 0.15); + border-color: var(--color-teal); +} + +.tech-card:hover::before { + transform: scaleX(1); } /* Portfolio Badges */ .badge-coffee { display: inline-flex; align-items: center; - gap: 0.35rem; - padding: 0.4em 0.8em; - font-size: 0.7rem; - font-weight: 700; + gap: 0.5rem; + padding: 0.5em 1em; + font-size: 0.75rem; + font-weight: 800; text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.08em; color: var(--color-coffee-dark); - background-color: var(--bg-section-alt); + background-color: rgba(255, 255, 255, 0.5); border: 1px solid var(--border-subtle); border-radius: 50px; - transition: all 0.3s ease; + transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: default; + backdrop-filter: blur(4px); } .badge-coffee svg { - width: 12px; - height: 12px; + width: 14px; + height: 14px; stroke-width: 2.5; - opacity: 0.8; } .badge-coffee:hover { - background-color: var(--color-coffee-medium); - color: var(--color-cream); - border-color: var(--color-coffee-medium); - transform: translateY(-1px); + background: var(--gradient-gold); + color: var(--color-coffee-dark); + border-color: transparent; + transform: translateY(-2px) scale(1.05); + box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3); } @media (prefers-color-scheme: dark) { @@ -319,54 +460,59 @@ footer { } .badge-coffee:hover { - background-color: var(--color-secondary); + background: var(--gradient-gold); color: var(--color-coffee-dark); - border-color: var(--color-secondary); + border-color: transparent; } } .tech-icon-wrapper { - width: 64px; - height: 64px; + width: 80px; /* Larger */ + height: 80px; border-radius: 50%; - background-color: var(--bg-section-alt); - color: var(--color-primary); + background: linear-gradient(135deg, rgba(29, 120, 116, 0.1), rgba(29, 120, 116, 0.05)); + color: var(--color-teal); display: inline-flex; align-items: center; justify-content: center; - margin-bottom: 1.25rem; - transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); + margin-bottom: 1.5rem; + transition: all 0.5s ease; + border: 1px solid transparent; } .tech-card:hover .tech-icon-wrapper { - background-color: var(--color-primary); + background: var(--gradient-teal); color: white; - transform: scale(1.1) rotate(5deg); + transform: scale(1.1) rotate(10deg); + box-shadow: 0 10px 20px rgba(29, 120, 116, 0.3); } .tech-name { - font-weight: 700; - font-size: 1.1rem; + font-weight: 800; + font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--text-body); + font-family: var(--font-display); } .tech-desc { - font-size: 0.9rem; + font-size: 0.95rem; opacity: 0.8; margin: 0; - line-height: 1.4; + line-height: 1.5; } /* Process Section */ .process-card { - background-color: var(--bg-body); /* Contrast against section-alt */ + background-color: var(--bg-surface); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border-subtle); - border-radius: 12px; - padding: 2rem; + border-radius: 16px; + padding: 2.5rem; height: 100%; position: relative; - transition: transform 0.3s ease, box-shadow 0.3s ease; + transition: all 0.4s ease; z-index: 1; overflow: hidden; } @@ -451,22 +597,116 @@ footer { /* Utility Overrides for Bootstrap Buttons to match theme */ .btn-primary { - background-color: var(--color-primary); - border-color: var(--color-primary); + background: var(--gradient-teal); + border: none; color: white; - font-weight: 700; + font-weight: 800; text-transform: uppercase; - font-size: 0.85rem; - letter-spacing: 0.05em; - padding: 0.6em 1.2em; + font-size: 0.9rem; + letter-spacing: 0.08em; + padding: 0.8em 2em; border-radius: 50px; - - &:hover, &:focus, &:active { - background-color: color-mix(in srgb, var(--color-primary), black 10%) !important; - border-color: color-mix(in srgb, var(--color-primary), black 10%) !important; + position: relative; + overflow: hidden; + transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); + box-shadow: 0 4px 15px rgba(29, 120, 116, 0.3); + z-index: 1; +} + +.btn-primary::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(45deg, var(--color-coffee-dark), var(--color-teal)); + opacity: 0; + z-index: -1; + transition: opacity 0.3s ease; +} + +.btn-primary:hover, .btn-primary:focus, .btn-primary:active { + transform: translateY(-3px) scale(1.02); + box-shadow: 0 8px 25px rgba(29, 120, 116, 0.5); + color: white !important; +} + +.btn-primary:hover::before { + opacity: 1; +} + +/* Custom Coffee Outline Button */ +.btn-outline-coffee { + color: var(--text-body); + border: 2px solid var(--color-coffee-dark); + background: transparent; + font-weight: 800; + text-transform: uppercase; + font-size: 0.9rem; + letter-spacing: 0.08em; + padding: 0.7em 2em; + border-radius: 50px; + transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.btn-outline-coffee:hover, +.btn-outline-coffee:focus { + background: var(--gradient-hero); + color: var(--color-cream); + border-color: transparent; + transform: translateY(-3px) scale(1.02); + box-shadow: 0 8px 25px rgba(59, 47, 47, 0.3); +} + +@media (prefers-color-scheme: dark) { + .btn-outline-coffee { + color: var(--color-cream); + border-color: var(--color-cream); } } +.btn-group-custom { + display: flex; + gap: 1.5rem; + justify-content: center; + flex-wrap: wrap; + margin-bottom: 3rem; +} + +/* Footer */ +footer { + background: linear-gradient(to top, #1a1412, #2c211d) !important; + color: var(--color-cream) !important; + padding: 5rem 0 3rem; + margin-top: 8rem; + position: relative; + border-top: none; +} + +footer::before { + content: ''; + position: absolute; + top: -50px; + left: 0; + width: 100%; + height: 50px; + background: linear-gradient(to top, #2c211d, transparent); + pointer-events: none; +} + +footer a { + color: var(--color-cream); + opacity: 0.7; + transition: opacity 0.3s; +} + +footer a:hover { + opacity: 1; + color: var(--color-gold); + text-shadow: 0 0 10px rgba(212, 165, 116, 0.5); +} + /* ===== SCROLL PROGRESS BAR ===== */ .scroll-progress { position: fixed;