Thiago Website Fixes: Components Section

[labboy0276]

Site Header — #header

Final copy should look like this.

• Give it a little more breathing room

padding: 2em

• Align items to baseline of "Tandem" in logo

position: relative;
top: 0.25rem

• Children set tight, Still in Poppins

font-family: Avenir Next,Helvetica Neue,Arial,sans-serif;
font-size: 24px;
text-decoration: none;
letter-spacing: -1.67px;
font-weight: 900;
letter-spacing: normal;
color: #ed3f7a;
Full pink?

Mobile Breakpoints

• Relationship of "Tandem" to the "Logo" should be the same in all breakpoints.
• Consider a small animation from logo to mobile menu tree are a wide variety over at jonshu

Homepage Section — .fp-section

• These should be article tags, maybe sections, but not divs
• Hover states are not a11y - consider using the pink, and making sure the contrast is adequate, is there any sort of formalized secondary palette? If not, consider establishing one to ensure consistency / a11y.
• Consider using verbs in ctas "View our recent wordpress work" have it be part of your brand voice "Acquaint yourself with wordpress work we've done" maybe a bit long, but it should feel like reading dialogue, rather than a technical manual.
• .hero-flex-wrapper

padding: 4em;  in tablet breakpoints

• .home-summary

line-height: 1.2

• .hero-summary

letter-spacing: -0.025em;

consider getting rid of the HR's they are nice, but they are not "minimal essentialism"

Hero CTA — .hero-type

• Remove from button treatment:

letter-spacing: -0.0265em;
border-bottom: 0.25em solid #fff;
display: inline-block;
clear: both;
padding-bottom: 0.25em;

Homepage Intro — .fp-section:first-oftype

This is what is should look like.

• “Better together” headline (also applies to:
  .content-wrapper-tandem
  .content-wrapper-about
  .custom-block.important
  p.custom-block-title)

sentence case
96px
letter spacing "normal", 

• The heading of this section, should use a heading tag with embedded spans
• I'm not personally a fan of centered type, but working out a centeredish align left maybe more trouble than it’s worth.
• No periods at the end of sentence fragments.
• Maybe shrink the galaxy copernicus type

Page Title — .section-header-left h1

font-size: 32px;
font-weight: 900;
border-bottom: 0.5rem solid #000;
display: inline-block;
padding-bottom: 0.5em;

Section Header — .section-header

Big title, for people with big monitors, and imacs, lets go bold with some 96px titles (we can play with how dramatic we make it, but do look at the screenshot linked above. With a little tweaking, we can maybe have that work everywhere, or come up with a type scale that works.
Last bit of emphasized text, feels like it should maybe link to something, and that cue is reinforced on the homepage. Maybe just vertical space between it and the previous paragraph, but keeping the font-weight constant, may help alleviate this?
| See Screenshot » |

Custom Block Title — .custom-block-title

• Still set in Poppins, fix

letter-spacing: -0.0265em;
line-height: 1.265;

Work Grid — .work-grid

Same recommendations re: heading leading / letter spacing as everywhere else, beware a11y color combos and hover states.

margin-bottom: 1em;
(on logo) padding-right: 2em // instead of one but better logos from clients

Footer — #footer

Copyright line, use good ol sans-serif at smaller than 1rem? Right now it looks "designed" because Galaxie Copernicus is kinda nice, but then writing TANDEM in it, is kinda off-brand. Should be aligned to the baseline of the secondary nav, rather than vertically centered in this space. Remove bracket hover state (keep mikes unique creation)

• The nav is still set in poppins, also waaaay too tight. Finished product

font-family: Avenir Next;
text-decoration: none;
font-weight: 900;
letter-spacing: normal;
font-size: inherit;

[labboy0276]

I did the best I could with these requests, I will wait for Thiago feedback. a11y stuff can wait

PR: #238