diff --git a/styles.css b/styles.css index 790feae..1ce2482 100644 --- a/styles.css +++ b/styles.css @@ -4,9 +4,9 @@ --color-text: #3A404E; --color-text-secondary: #101828; --font-family: 'Inter', sans-serif; - --font-size-normal: 16px; - --font-size-large: 18px; - --line-height-normal: 24px; + --font-size-normal: 1rem; + --font-size-large: 1.125rem; + --line-height-normal: 1.5rem; } * { @@ -21,20 +21,20 @@ header { display: flex; justify-content: space-between; - padding: 18px 80px; + padding: 1.125rem 5rem; font-weight: 500; } .logo { display: flex; align-items: center; - gap: 8px; + gap: 0.5rem; } .logo span { color: var(--color-text); - font-size: 18px; - line-height: 24px; + font-size: var(--font-size-large); + line-height: var(--line-height-normal); } .navbar { @@ -44,7 +44,7 @@ header { .navbar ul { list-style: none; display: flex; - gap: 32px; + gap: 2rem; } .navbar a { @@ -55,18 +55,18 @@ header { .actions-button { display: flex; align-items: center; - gap: 12px; + gap: .75rem; } .actions-button button { background: rgba(255, 255, 255, 1); color: var(--color-secondary); - font-size: 16px; + font-size: 1rem; font-weight: 500; - line-height: 24px; + line-height: var(--line-height-normal); - padding: 10px 18px; - border-radius: 8px; + padding: 0.625rem 1.125rem; + border-radius: 0.5rem; border-style: none; cursor: pointer; } @@ -80,96 +80,96 @@ header { display: flex; flex-direction: column; align-items: center; - gap: 24px; - padding: 96px 0px; + gap: 1.5rem; + padding: 6rem 0px; } #sobre_nos span { color: var(--color-primary); font-weight: 600; - line-height: 24px; + line-height: var(--line-height-normal); } #sobre_nos h1 { color: var(--color-text-secondary); - font-size: 48px; + font-size: 3rem; font-weight: 600; - line-height: 60px; - letter-spacing: -0.96px; + line-height: 3.75rem; + letter-spacing: -0.06rem; } #sobre_nos p { width: 791px; - padding-top: 12px; + padding-top: 0.75rem; text-align: center; - font-size: 20px; - line-height: 30px; + font-size: 1.25rem; + line-height: 1.875rem; } #metricas { display: flex; - padding-bottom: 96px; - gap: 64px; - margin: 0px 80px; + padding-bottom: 6rem; + gap: 4rem; + margin: 0px 5rem; } #metricas .metricas_card { display: flex; flex-direction: column; - gap: 20px; + gap: 1.25rem; flex: 1 0 0; } .metricas_card > span { color: var(--color-primary); font-weight: 600; - font-size: 60px; + font-size: 3.75rem; } .metricas_card > h2 { color: var(--color-text-secondary); - font-size: 18px; + font-size: var(--font-size-large); font-weight: 500; - line-height: 28px; + line-height: 1.75rem; } .metricas_card > p { color: var(--color-secondary); - line-height: 24px; + line-height: var(--line-height-normal); } #vagas { display: flex; - padding: 96px 0px; + padding: 6rem 0px; flex-direction: column; align-items: center; - gap: 20px; + gap: 1.25rem; } #vagas > span { color: var(--color-primary); - font-size: 14px; + font-size: 0.875rem; font-weight: 500; - line-height: 20px; + line-height: 1.25rem; - padding: 4px 12px; - border-radius: 16px; + padding: 0.25rem 0.75rem; + border-radius: var(--font-size-normal); background: rgba(142, 36, 36, 0.05); } #vagas > h2 { color: var(--color-text-secondary); - font-size: 36px; + font-size: 2.25rem; font-weight: 600; - letter-spacing: -0.72px; + letter-spacing: -0.045rem; } #vagas > p { color: var(--color-secondary); - font-size: 20px; - line-height: 30px; + font-size: 1.25rem; + line-height: 1.875rem; } #vagas > img { - margin-top: 44px; + margin-top: 2.75rem; } \ No newline at end of file