From 7b0a9ea9cee5539c61a20ace0f045aec95e68712 Mon Sep 17 00:00:00 2001 From: dangrubbb Date: Sat, 30 May 2026 14:04:22 -0400 Subject: [PATCH] feat: use actual logo in circle, remove menthol text --- public/src/img/DanGrubbLogoTeal.png | Bin 0 -> 5121 bytes src/pages/index.astro | 195 +++++++++++----------------- 2 files changed, 73 insertions(+), 122 deletions(-) create mode 100644 public/src/img/DanGrubbLogoTeal.png diff --git a/public/src/img/DanGrubbLogoTeal.png b/public/src/img/DanGrubbLogoTeal.png new file mode 100644 index 0000000000000000000000000000000000000000..c95445586dd710d4ee99c1dd83c81ec19931a167 GIT binary patch literal 5121 zcmZ`+2|SeR_kYJO%ZRdPNuq0;v5qCwjF>Fhw~)aM6UH)Q8L}@~3Pll;B_dmd7Lr|- zvLtJktl8HRD*t!7_x8K@^Z)&3=Dg=T=X}rdzRxpr&cqrTXtNyQJpup#3t9(d3;>Wi z3QVtLhlNF;pGV(&BeL9%m># zaHLcv&1RogpZE4LF73wZsi}5{4~?x>7W5Y9*uDc^zMjUUTkMCaoYpP=o*xtab_M*_ zfgB@D`Uehr`EkYf9g%5oOXI>Un1z__nT_sQwPl{lpHi-0`!us`d&8Oh;DE^dm>dsL zzlC_m{QmTWP}WEl%e#XXVe{K&)5K}UWNDr6Z+!AwJu>5^nbhQ*aQ)jY!VVR~trxkT z-YznN5?+r2I1O~UU)7tVuqqZC8$Wq0^!Z1~g)HWg6x)tVCgR6JcjfjA_+i(WcFL;* zT-RrIAa4vUiuk6c*kU-(1dh*)2aUh_5m+!j3C+pze&Ks~a30(ZAx9l!eE;XU}4FI@2GhZ61fmgc_i1dI?DEpiIF~h!;Zpi&ug&-(T`eP!|6SLj}rk2o=Br@+OdELHQWS zdqLs=kI~<8@Yny$I}7S5FK1I1A9n{KIcd18v^-cRgmjL}ffREx5XkLS&?tYed?0A&ct*uVtPoFB$f77n`FC@LJ&H79Vv z=&55x1ORCf3PJqyHGDxOJqfL^MZZKVz)r)4HGMD-`ZNWYT9S-0enOt!9yq)kR)|FQ z#0vfTVj*tkn_N!d7iRvxa7;OT^Qp1{RNi4CuZl`u|$2F4o zG(NAyRf;dAUWgF1GSIdSe zO1%tYwj)rHAD$s5=J0-(6t70+4k%qTXGF(K_J=ri;bDJes-Beqs9<|jkHV3Xj&|jC z?%1#5{*C1U?W>HF;rxQA6(tU1`1TTDx50CW3*j|pscud84G-cZg!<4}?1pc*xeMM* zZvKFp^uSL#nf2+ST)0ZAIKDB2#fM0rZ!5hSvE-TlZIWXtqb;eT^vm(UXi*w2NIjEI zh=r%0#|c{txf{5rj9MHxv3_-d$dJ7pK;Y8!ndpd5ZyVOmh@QNr=oH;)bY^u)gaKPt zsu%U@c-pts?(Io)v8z7pW)_?1u&)T76K5HUu9?Q!1c)!S*WJu8|EUwxiknE->(M4^ zJ{_A6?mkx~mbe5bZ&q=Kr&#G=%Ie+bql*SQp_<5TDXKcws*s1qcTUkK9sc|-aX6K8*KDW61h4y~ZNT8JZd_w7 zR$_3Z5P4&Uq;kK28$Mw*ts|ZOK3kYY^ps`ApbFZ3kx3CJ6~s%Ft!v8uL$S3mIU#3= zh_99@#pJP&aQe*OC*LV@&Smye_nyj#K^~}hS*_`q%W`SK z(&6cgY-y)z>$2`bv+r74lly#n=*rV|mIC2@HNe|Ys@P*vZQZfJdY zbSQ_nv6$1->b9lHD595oK_Wqly#aV;FHI$ZT-I!2aN1ULiS@h}7SpR4$v3r~j*?BL zbD4#>ZPspkeX`ITVE81)$7aoREvymY%sulNDQ3-XS$#w+i%g!6EHY)29Mt2H$Tw`b z5p&D3DshL(XVz7a-sW>qnrIB4ayhS;a2XGu+|yWGSmjB)0R11ZG58DLy6%ptR;o@5 zXR~nEJZ~+*)@spKyII17h(u72$&|>R#ruqF4sixLy-X3=bc{k9a>S`P`&gy;V7YXo zQ?ywuGo`tbZ2T{&J6(DoUbEM$q7_5SJyO`~kBQ5EV>IHrMQu|8!(NA7NXe&)_cC{& zNr)4_ihCLX7v)9B9&^vuMGzJ$7^C?6WouFcvTspskw`Y?{T)X9DVNJjwW-&-^X&nznv==R!+D zMFtt|@A`C!4jl~4CaDlK7vaLbgR`O6T!)8of;L(2Zk+fqv_?R$J!q$?PESrL3e(9I z@{ODhputMqc&9z85H(@w&^Ib7qf?=pkb8Uyk9OPd~C zOf@h~E`eLxZv9!$bu|_V&{;Y<7S>H9W zcuuzJ&A|sXENg@e>*X(Y&-*X6;G6s2MQ5Dee4_m%4Y(X%I2j-Mh^~dM_-$u{RaypW zMpDrl8*NrM_?YIcM8FH}=495F`Qc@6Bz5gl^t#ipY~QP#w}^39>B@ik()nY9i>_ma zlVLm0k0T!EdsE#u)@t>m5w9NSuf*@w->sCHKd|n+lh$@2Tzf~oXkw!XvtVsJ6u_M$ z`c|rDPG7J1#PvD zmY;r1JM!AqcCB(K>Wg}9Fl%=5*d;3O`<|~uIu}m=4A046R|ayS%x5|0nUH}BUG*oc zChv5gLmu#b2}$Wy6#UK_{+Sw?7`fNkYu8mN!?>y>N*wN0FF%}#^d&BY04PE3QLcGi zWT0qQ{pqS*-T8)`AnQZzBc*NLrzkd#c~|6ta#y{0m7nf>Z_baJpL=)04ZL@exSERK zRMU$;Sd4$tvxOcO*Qr??fL%$Hq-9BR!jP~kj^0?1QF^MP6ih)%4rU5h0voCd3?>1C zf!APU+|s`s+&!G|IP(8?fC|W(gAU@qGm!A^SRx4n{viG{2|@)1HgUy2lb99`P?GRc ze6ap_oXUATiD-!RHUYidumD0*i1J}yRTl$MM}MP`9&R4qCY~5aEC7dQP@zGi&_9gs zo*o1&fkZ@l5O8>BA8!l^??C{hrKPWKz57ybi-)WIaB}9)%*ID zv*OH=@i7<;zP09~mczTRJ6lMvA2(S(G*+DY%sN+@^aXu#bw4P$Jhf}i`-P44|6pIl zBvx*3sb#+z>#CA=ny4Rd)KXq3uO5I*e14M3{=u7ixa&D)LY;f}z2@gFX~L%j@{cdB z9QxxVE2ihNeT6vcqg=czVq>JNSLbrSJz0iRj~>iZ!3XL3O14xPxZ6gB%mQ+A*J_>_ z8P(AF#a(B1yqY9+O>AbZ%0eTmnPrymh8u5p9$%!D;!9Xfqt5md%rG4b+EaWeTlS&b z6gJwqXit#8ORbNd=@K7vpMBHw5dF(JO5#-(0}=b$V`Fl?KU00OQzZv4WwTVBh`Hn2 znLUuPHf{YrC9DJe+FHe?4E-3hCerb3ZiP=Cbvpx)q>YFK{`@?5rHTW3oBfaK! zD;D{PYT1O;{W@51<_FE5vyqH5DD+IESFqAzH+5cp&cOIXdCbA%qWdq?DuO=Har%BL zFcx#qtPGm0@HOP1A&GO0; zgJ=g2{;q9(-un!Jt}d!_y(wB@zqB{W0kPXFTbt24uUeTus*>O8Zm*nFOg>GRZ0G-g zlv~~E$m$ajxih+gDX@(kKLRS?dU(OKZq=Y3o3cldDmOir7B}{XE9T~`>IOFEN1wK5 zU{ez{wvctO5osxV1sQ{yg}~;)&HhFqudT)2t$wG#niHk-Z)+CXv-ghLr4f4kbc@OP z^KV;zSZ*nK{9F{<#AUH+w_UYM4^}Bzh|>1|vfi?7I#E0=g&3!uu(3JY(pvXqYUgrK zeBwsub&I>3(^oo}5;tlrRx=gqL{obn6n7HqMxM{rL2(Km9dq5}yyJqO<^=7m+AeSJ zEY$TKN!;4H(kanJcD1WV^pG!{?aW9dW^HFKs4Xb>kl)o7Z-~pNdN9byER+Vk<`JAb zzMz~qRl2WI_Ct-Vu)cm!cTK?~B<0!0LB)rnS_bZ8ug?BG(`Z7Vayjp2mimw-L7Z$ssTJMLHryZ4fO?pM1qm#+u zzdO92OXc6!5b?B-Y$Opc%Ul(|5%|gB(#hz~{10+Bgc6jP1+?yq7W%-|+)4v3e%_s{ zJBPt)(@bqfkN8aZGH69Ds;!jdY2AKj!V<@n?BA+>8nfYjS46nzmLu8dek8$A?fT59 zPS*3`@3iP%q(U=I^iU(;5sl5MB$b&vG z{bWlZAEhx-<0ox74#YRp<*(cu^CW+}f#D7`r)}2Y#`@nl+Y>SgEsmfI+MfNeT@pJU z9gQi&`Mg5QKsUt$2kVj}K2Jl{$g}6Y-@Ipuc!szSg`$E&ovX#_G2sNm;)@e+7}rDFWxO@RYS+$Lgcz~yNOra@o$Gc7w|&#W{-~ha@Ug9hG?OSJkb?h zrv<6C`{B$4jgI(OL_u@&*qGHr=H%7loTuDIOaqM3Q0y{7(r(I!>z@8FowS_+W5&9S zT}G#Fg>J~^G^R7`hwgZ5#neROn4y2)c{P#^O}uJ)d~hZr71d2E;Np5>f+Qy!u~_cp zIq;?RqwP79M!WOLXT~$dMSe>9QOD;$1J;uyeX>91)MS`zm{cvm-&?U{S*Y)&4AD*p z^l&z0)iy==xz%V~3K=u8bG~P=JfQy~ZwnfD>H^7pVB2ZvN@_ey=S@;iS2@rAy6WS! zpFi^EkOopK;;C$;i$Z)A&Z$?^TMkTrqLw$7P%Q_+UPm0Nx5@^|X*~+4>^Dg0 zB9ZIz(et|(XgB)drsI#FEK@z-KCCtNH){8Kz(kGZE7!EE6cuWco8@7uS2bt@GS2WO zCZ{LGrXCl7_qs96zrK$3--lIwP2+E6E1r&_8(V)-*uOtb4#3kSz#wlOM@4wM-LNk& z>*4#8zJ7z_)mR@X`F|g89sjz6;!~h+mib&ocSa!5#P2kR8J20?C!^g%0A8HS+8C1; zCm1X86G`Nbdw;0vA6e`e#v^&<>ROav;rDds`mB-R>6-%5E*G5tR}WIqJ%j**vNuz2 SiO+xy4?t@fpvunMhyNeoUcEs8 literal 0 HcmV?d00001 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; } }