#1: Site Colors

👆
Blaze Orange is the brand's default link color

All black (#000) should be replaced by Cod Gray (#111) and that can serve as the default text color

#2: Please kill this everywhere

#3: Use Inter as the default font globally

It's available as as google font https://fonts.google.com/specimen/Inter or from the source https://rsms.me/inter/ (free and open source)

#4: Remove the back-to-top arrow, globally.

#5: LinkedIn icon

svg (and webp for fallback)

<svg id="b" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g id="c"><path d="M37.14,0H2.85C1.28,0,0,1.29,0,2.88v34.23c0,1.59,1.28,2.88,2.85,2.88h34.29c1.57,0,2.86-1.29,2.86-2.88V2.88C40,1.29,38.71,0,37.14,0ZM12.09,34.29h-5.93V15.2h5.94v19.09h0ZM9.12,12.59c-1.9,0-3.44-1.54-3.44-3.44s1.54-3.44,3.44-3.44,3.44,1.54,3.44,3.44-1.54,3.44-3.44,3.44ZM34.31,34.29h-5.93v-9.29c0-2.21-.04-5.06-3.08-5.06s-3.56,2.41-3.56,4.9v9.45h-5.93V15.2h5.69v2.61h.08c.79-1.5,2.73-3.08,5.62-3.08,6,0,7.12,3.96,7.12,9.1v10.46Z" fill="#111" stroke-width="0"/></g></svg>

#6: Menu icon

Now 5 shapes ...if we count the negative space between the 3 solid lines ;)

<svg id="b" xmlns="http://www.w3.org/2000/svg" width="40" height="26" viewBox="0 0 40 26"><g id="c"><rect x="0" y="22" width="40" height="4" rx="2" ry="2" fill="#111" stroke-width="0"/><rect x="0" y="11" width="40" height="4" rx="2" ry="2" fill="#111" stroke-width="0"/><rect x="0" y="0" width="40" height="4" rx="2" ry="2" fill="#111" stroke-width="0"/></g></svg>

#7: Remove stroke or shadow effect from the ×

It should just be all white.
All strokes and effects should be removed from all icons.

#8: Footer copy update

13191 Crossroads Parkway North, Suite 510
City of Industry, CA 91746
562.692.6688
info@wowl.io

© 2024 WOWL Inc. All rights reserved.

please note the formating and that the phone number is a link

#9: Other icons

<svg id="b" xmlns="http://www.w3.org/2000/svg" width="21.89" height="40" viewBox="0 0 21.89 40"><g id="c"><path d="M10.95,0C4.9,0,0,4.9,0,10.95c0,11.13,4.13,21.3,10.95,29.05,6.82-7.76,10.95-17.93,10.95-29.05C21.89,4.9,16.99,0,10.95,0ZM10.95,16.62c-3.14,0-5.69-2.55-5.69-5.69s2.55-5.69,5.69-5.69,5.69,2.55,5.69,5.69-2.55,5.69-5.69,5.69Z" fill="#111" stroke-width="0"/></g></svg>

<svg id="b" xmlns="http://www.w3.org/2000/svg" width="21.89" height="40" viewBox="0 0 21.89 40"><g id="c"><path d="M10.95,0C4.9,0,0,4.9,0,10.95c0,11.13,4.13,21.3,10.95,29.05,6.82-7.76,10.95-17.93,10.95-29.05C21.89,4.9,16.99,0,10.95,0Z" fill="#111" stroke-width="0"/></g></svg>

<svg id="b" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g id="c"><path d="M20,0C8.95,0,0,8.95,0,20s8.95,20,20,20,20-8.95,20-20S31.05,0,20,0ZM20,28c-4.42,0-8-3.58-8-8s3.58-8,8-8,8,3.58,8,8-3.58,8-8,8Z" fill="#111" stroke-width="0"/></g></svg>

#10: Animate text links

.underline-links a {position: relative; display: inline-block;}

.underline-links a::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 0;
    right: 100%;
    bottom: 0;
    background: #ff5d00;
    height: 1px;
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.underline-links a:hover:before {right: 0 !important;}

This should appear as an orange line that quickly grows from left to right.

#11: Default page background color should be "alabaster" (#f7f7f7), while block/boxes that contain content should be white (#fff).

#12: Make date and reading time estimate gray (#999)

#13: Remove bylines everywhere so WOWL is the implied author.

#14: Please kill this header (home page)

#15:Style title

Please use Inter "Black 900" for H1 headlines and titles. Try 72px for desktop and 48px for mobile breakpoint (big is better here).