diff --git a/public/src/img/DanGrubbLogoTeal.png b/public/src/img/DanGrubbLogoTeal.png new file mode 100644 index 0000000..c954455 Binary files /dev/null and b/public/src/img/DanGrubbLogoTeal.png differ diff --git a/src/pages/index.astro b/src/pages/index.astro index 05c47e6..01fb497 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -15,63 +15,40 @@ import CrushBase from '../layouts/CrushBase.astro';
- -
+ +
+ + + + + + + + +
+ -
- - - - - - - - - - - - - - +
+
+ DanGrubb +
- -

- HINT OF - MENTHOL - • - MORE - MENTHOL -

@@ -81,10 +58,7 @@ import CrushBase from '../layouts/CrushBase.astro'; min-height: 100vh; display: flex; flex-direction: column; - background: - radial-gradient(ellipse at 20% 20%, rgba(0, 139, 139, 0.05) 0%, transparent 50%), - radial-gradient(ellipse at 80% 80%, rgba(32, 178, 170, 0.04) 0%, transparent 50%), - var(--crush-white); + background: var(--crush-white); } /* === TOP BANNER === */ @@ -120,7 +94,6 @@ import CrushBase from '../layouts/CrushBase.astro'; .logo-section { flex: 1; display: flex; - flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; @@ -128,81 +101,68 @@ import CrushBase from '../layouts/CrushBase.astro'; .logo-wrapper { position: relative; - width: clamp(220px, 50vw, 320px); - height: clamp(220px, 50vw, 320px); - margin: 0 auto; + width: 340px; + height: 340px; } - /* Animated splatter background */ - .splatter-bg { + /* Splatter ring — irregular teal marks around circle (like the box) */ + .splatter-ring { position: absolute; - inset: -20px; - background-image: - radial-gradient(circle at 30% 40%, rgba(0, 102, 102, 0.3) 0%, transparent 40%), - radial-gradient(circle at 70% 30%, rgba(0, 139, 139, 0.25) 0%, transparent 35%), - radial-gradient(circle at 50% 70%, rgba(32, 178, 170, 0.2) 0%, transparent 40%), - radial-gradient(circle at 20% 80%, rgba(0, 102, 102, 0.15) 0%, transparent 30%); - border-radius: 50%; - animation: splatterPulse 4s ease-in-out infinite; - filter: blur(20px); + inset: 0; } + .splat { + position: absolute; + border-radius: 50% 40% 60% 45%; + background: var(--crush-teal); + opacity: 0.55; + animation: splatterPulse 5s ease-in-out infinite; + } + + .splat.s1 { width: 60px; height: 80px; top: -10px; left: 20%; transform: rotate(15deg); } + .splat.s2 { width: 70px; height: 50px; top: 5%; right: -5px; transform: rotate(-20deg); } + .splat.s3 { width: 45px; height: 65px; bottom: 10px; right: 5%; transform: rotate(45deg); } + .splat.s4 { width: 55px; height: 40px; bottom: -8px; left: 30%; transform: rotate(-10deg); } + .splat.s5 { width: 50px; height: 70px; top: 15%; left: -10px; transform: rotate(30deg); } + .splat.s6 { width: 40px; height: 55px; top: 50%; right: -12px; transform: rotate(-35deg); } + .splat.s7 { width: 65px; height: 45px; bottom: 15%; left: -8px; transform: rotate(20deg); } + .splat.s8 { width: 35px; height: 60px; top: -5px; right: 25%; transform: rotate(-25deg); } + @keyframes splatterPulse { - 0%, 100% { transform: scale(1); opacity: 1; } - 50% { transform: scale(1.1); opacity: 0.7; } + 0%, 100% { opacity: 0.55; } + 50% { opacity: 0.35; } } - /* The actual circle with the camel/monogram */ - .logo-circle { - position: relative; - width: 100%; - height: 100%; + /* The circle frame — teal border, white interior (like Joe Camel logo) */ + .circle-frame { + position: absolute; + inset: 20px; border-radius: 50%; border: 6px solid var(--crush-teal); - background: - linear-gradient(135deg, #e0f2f2 0%, #b8e0e0 50%, #99d0d0 100%); + background: white; + box-shadow: + 0 0 0 2px rgba(0, 139, 139, 0.1), + 0 12px 40px rgba(0, 139, 139, 0.25); display: flex; align-items: center; justify-content: center; - box-shadow: - 0 20px 60px rgba(0, 139, 139, 0.3), - inset 0 2px 20px rgba(255, 255, 255, 0.5); + overflow: hidden; } - .logo-svg { + .circle-inner { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + padding: 30px; + } + + /* The logo img — white PNG colorized to teal using hue-rotate + invert */ + .logo-img { width: 60%; height: 60%; - filter: drop-shadow(0 4px 12px rgba(0, 102, 102, 0.4)); - } - - /* Menthol subtitle (inspired by the Camel Crush pack) */ - .crush-subtitle { - margin-top: 40px; - display: flex; - align-items: center; - gap: 8px; - flex-wrap: wrap; - justify-content: center; - } - - .crush-label { - font-size: 16px; - font-weight: 700; - color: var(--crush-teal-dark); - letter-spacing: 1px; - } - - .crush-highlight { - font-size: 18px; - font-weight: 700; - color: var(--crush-teal); - background: linear-gradient(180deg, transparent 60%, rgba(0, 139, 139, 0.15) 60%); - } - - .crush-dot { - font-size: 20px; - color: var(--crush-teal); - opacity: 0.6; + object-fit: contain; } /* === BOTTOM NAVIGATION === */ @@ -245,24 +205,15 @@ import CrushBase from '../layouts/CrushBase.astro'; @media (max-width: 768px) { .top-banner { padding: 30px 15px 15px; } .logo-section { padding: 40px 15px; } - .crush-subtitle { margin-top: 30px; } - .nav-item { - font-size: 15px; - padding: 6px 12px; - letter-spacing: 1px; - } + .logo-wrapper { width: 260px; height: 260px; } + .circle-frame { inset: 15px; } + .nav-item { font-size: 15px; padding: 6px 12px; letter-spacing: 1px; } } @media (max-width: 480px) { .brand { font-size: 2.5rem; } - .crush-subtitle { - flex-direction: column; - gap: 4px; - } - .bottom-nav { - flex-direction: column; - gap: 4px; - } + .logo-wrapper { width: 220px; height: 220px; } + .bottom-nav { flex-direction: column; gap: 4px; } .nav-dot { display: none; } }