:root {
--clr-black: #1D1C20;
--clr-gray: #646464;
--clr-white: #ffffff;
--clr-white-700: #f7f7f7;
--clr-white-hover: #e2e6ea;
--clr-blue: #0066d2;
--clr-blue-100: #BDD8E9;
--clr-blue-200: #49769f;
--clr-blue-300: #6ea1b2;
--clr-blue-700: #094174;
--clr-blue-800: #001e3a;
--clr-blue-hover: #0058b7;
--natural-shadow: 0px 1px 4px 0px rgba(25, 33, 61, 0.08);
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', Tahoma, sans-serif;
background: var(--clr-white-700);
}
h1 {
font-size: 4rem;
font-weight: 600;
line-height: 100%;
letter-spacing: -0.05em;
}
h2 {
font-size: 3rem;
font-weight: 600;
line-height: 100%;
letter-spacing: -0.04em;
}
h3 {
font-size: 2rem;
font-weight: 600;
line-height: 120%;
letter-spacing: normal;
}
h4 {
font-size: 1.25rem;
font-weight: 600;
line-height: 120%;
letter-spacing: -0.03em;
}
h5 {
font-size: 1rem;
font-weight: 600;
line-height: 120%;
letter-spacing: -0.01em;
}
p {
font-size: 1rem;
font-weight: 400;
line-height: 150%;
letter-spacing: -0.03em;
}
a {
text-decoration: none;
font-size: 1rem;
font-weight: 500;
line-height: 120%;
letter-spacing: normal;
}
button {
padding: 12px 22px;
white-space: nowrap;
font-size: 1rem;
font-weight: 500;
line-height: 120%;
letter-spacing: normal;
cursor: pointer;
}
img {
display: block;
pointer-events: none;
}
.container {
margin: 0 auto;
max-width: 1380px;
box-sizing: border-box;
}
.section {
padding-top: 140px;
}
.section-new {
padding: 100px 0 20px;
}
.section-new__article {
display: flex;
flex-direction: column;
gap: 22px;
}
.section-new__title {
margin: 0;
color: var(--clr-blue-800);
font-size: 30px;
font-weight: 500;
line-height: 110%;
letter-spacing: -0.8px;
}
.section-new__subtitle {
margin: 0;
color: var(--clr-blue-200);
font-size: 16px;
font-weight: 400;
line-height: 140%;
letter-spacing: 0px;
}
.btn {
padding: 12px 22px;
display: inline-block;
text-decoration: none;
white-space: nowrap;
font-weight: 500;
line-height: 120%;
letter-spacing: normal;
cursor: pointer;
border-radius: 8px;
border: solid;
transition: .3s ease-in-out;
}
.btn__white {
border-color: var(--clr-blue);
color: var(--clr-blue);
background-color: var(--clr-white);
}
.btn__white:hover {
border-color: var(--clr-blue-hover);
color: var(--clr-white);
background-color: var(--clr-blue);
}
.btn__blue {
border-color: var(--clr-blue-hover);
color: var(--clr-white);
background-color: var(--clr-blue);
}
.btn__blue:hover {
background-color: var(--clr-blue-hover);
}
.btn__arrow--blue {
display: flex;
align-items: center;
}
.btn__arrow--blue::after {
margin-left: 4px;
content: '';
display: block;
width: 15px;
height: 15px;
background: no-repeat url(//coachingisl.com/wp-content/themes/coalchingisl/assets/icons/arrow_blue.svg) center / cover;
transition: .3s ease-in-out;
}
.btn__arrow--blue:hover::after {
margin-left: 8px;
}
.btn__arrow--white {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
}
.btn__arrow--white::after {
content: '';
display: block;
width: 15px;
height: 15px;
background: no-repeat url(//coachingisl.com/wp-content/themes/coalchingisl/assets/icons/arrow_white.svg) center / cover;
}
.btn__new {
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
color: var(--clr-white);
font-size: 16px;
font-weight: 500;
line-height: 140%;
letter-spacing: 0%;
border-radius: 12px;
background: var(--clr-blue-700);
transition: .3s ease-in-out;
outline: none;
cursor: pointer;
border: none;
}
.btn__new:hover {
color: var(--clr-white);
background-color: var(--clr-black);
}
.li__dotted {
position: relative;
padding-left: 20px;
}
.li__dotted::before {
content: '';
position: absolute;
left: 0;
top: 0.4em;
width: 12px;
height: 12px;
background: url(//coachingisl.com/wp-content/themes/coalchingisl/assets/icons/dods_item.svg) no-repeat center center;
background-size: cover;
}
.date {
display: flex;
align-items: center;
}
.date::before {
content: '';
margin-right: 4px;
width: 15px;
height: 15px;
display: block;
background: no-repeat url(//coachingisl.com/wp-content/themes/coalchingisl/assets/icons/calendar.svg) center / cover;
}
.views {
display: flex;
align-items: center;
}
.views::before {
content: '';
margin-right: 4px;
width: 15px;
height: 15px;
display: block;
background: no-repeat url(//coachingisl.com/wp-content/themes/coalchingisl/assets/icons/eye.svg) center / cover;
}
@media screen and (max-width: 1380px) {
button {
padding: 8px 18px;
}
.btn {
padding: 8px 18px;
}
.container {
max-width: 90%;
}
.section {
padding-top: 80px;
}
}
@media screen and (max-width: 1024px) {
.container {
max-width: 95%;
}
.section {
padding-top: 60px;
}
}
@media screen and (max-width: 768px) {
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 1rem;
}
h5 {
font-size: .75rem;
}
p {
font-size: .75rem;
}
a {
font-size: .75rem;
}
button {
font-size: .75rem;
}
.section-new {
padding: 50px 0 10px;
}
.section-new__title {
font-size: 24px;
font-weight: 500;
line-height: 110%;
letter-spacing: -0.6px;
}
.section-new__subtitle {
font-size: 14px;
font-weight: 400;
line-height: 140%;
letter-spacing: 0px;
}
}
@media screen and (max-width: 438px) {
h1 {
font-size: 2.25rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 1rem;
}
h5 {
font-size: .75rem;
}
p {
font-size: 1rem;
}
a {
font-size: 1rem;
}
button {
font-size: 1rem;
}
.container {
max-width: 90%;
}
.btn {
padding: 12px 24px;
}
}