#wpadminbar {
position: fixed;
inset: 0 0 auto 0;
}
*, ::before, ::after {
box-sizing: border-box;
}
html {
--menu-height: 70px;
--sticky-top-size: 15px;
--white: #fff;
--cta: #E09213;
--light-cta: #e7a337;
--gray: #B0B5B5;
--dark-gray: #889191;
--light-green: #9BBEC7;
--dark: #394747;
--dark-blue: #5993A1;
--page-gradient: linear-gradient(0deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.97) 100%), var(--dark);
--gray-gradient: radial-gradient(102.61% 87.63% at 26.22% 24.02%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.87) 100%), var(--dark);
--green-gradient: radial-gradient(70.26% 93.56% at 27.04% 36.05%, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.16) 100%), var(--dark-blue);
--dark-gradient: radial-gradient(149.89% 115.26% at 21.67% 17.46%, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.25) 100%), var(--dark);
--ultra-dark-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), var(--dark);
--map-mobile-gradient: linear-gradient(180deg, rgba(249, 249, 249, 0.6) 0%, rgba(249, 249, 249, 0.99) 100%);
--map-desktop-gradient: linear-gradient(180deg, rgba(249, 249, 249, 0.4) 0%, rgba(249, 249, 249, 1) 100%);
--fs-14: 0.875rem;
--fs-16: 1rem;
--fs-18: 1.125rem;
--fs-20: clamp(1rem, 1.65vw, 1.25rem);
--fs-24: clamp(1.25rem, 1.65vw, 1.5rem);
--fs-28: clamp(1.25rem, 2.15vw, 1.75rem);
--fs-32: clamp(1.75rem, 2.5vw, 2rem);
--fs-40: clamp(1.75rem, 2.5vw, 2.5rem);
--fs-48: clamp(2rem, 3.75vw, 3rem);
--fs-56: clamp(2.375rem, 4.3vw, 3.5rem);
--fs-64: clamp(3rem, 5vw, 4rem);
--br-8: 8px;
--br-16: 16px;
--br-24: clamp(16px, 1.85vw, 24px);
--br-40: clamp(20px, 3vw, 40px);
--br-56: clamp(24px, 4.3vw, 56px);
scroll-behavior: smooth;
scroll-padding-top: var(--sticky-top-size);
}
body {
margin: 0;
padding: clamp(16px, 3vw, 40px) 0;
color: var(--dark);
background: var(--page-gradient);
overflow-wrap: anywhere;
}
body, button {
line-height: 1.4;
letter-spacing: -0.36px;
}
body, button, input, textarea, select {
font-family:  'Martel Sans', sans-serif;
}
a, button, input, textarea, select {
touch-action: manipulation;
}
a {
color: inherit;
text-decoration: none;
}
ol, ul { 
padding: 0; 
margin: 0;
}
p, blockquote, dl, figure { 
margin: 0; 
}
strong, b, th, a, button, time {
font-weight: 600;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
line-height: 1.25;
font-weight: 300;
letter-spacing: -1px;
}
:is(h2, h3) span {
color: var(--dark-gray);
}
:is(.dark-box, .ultra-dark-box) :is(h2, h3) span {
color: var(--gray);
}
:is(.dark-box, .ultra-dark-box) p span { 
color: var(--white);
}
footer {
content-visibility: auto;
contain-intrinsic-size: auto 500px;
}
.fs-14 { font-size: var(--fs-14); }
.fs-16 { font-size: var(--fs-16); }
.fs-18 { font-size: var(--fs-18); }
.fs-c-20 { font-size: 1.25rem; }
.fs-20 { font-size: var(--fs-20); }
.fs-24 { font-size: var(--fs-24); }
.fs-28 { font-size: var(--fs-28); }
.fs-32 { font-size: var(--fs-32); }
.fs-40 { font-size: var(--fs-40); }
.fs-48 { font-size: var(--fs-48); }
.fs-56 { font-size: var(--fs-56); }
.fs-64 { font-size: var(--fs-64); }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-600 { font-weight: 600; }
.c-white { color: var(--white); }
.c-gray { color: var(--gray); }
.c-dark-gray { color: var(--dark-gray); }
.c-light-green { color: var(--light-green); }
.c-dark-blue { color: var(--dark-blue); }
.relative { 
position: relative; 
}
.text-center {
text-align: center;
}
.uppercase {
text-transform: uppercase;
}
.h-100 {
height: 100%;
}
.img-fluid {
max-width: 100%;
height: auto;
}
.unstyled-list {
list-style: none;
}
.container.ultra-wide { 
max-width: 1920px !important; 
}
.lh-0 {
line-height: 0 !important;
}
.header {
position: sticky;
inset: var(--wp-admin--admin-bar--height, 0) 0 auto 0;
z-index: 20;
display: flex;
align-items: center;
height: var(--menu-height);
margin-bottom: clamp(40px, 7.4vw, 96px);
background: var(--page-gradient);
}
.header-panel,
.header-panel .list {
gap: 16px 48px;
}
.header-panel a {
display: flex;
}
.header-toggler {
position: relative;
display: flex;
justify-content: space-between;
flex-direction: column;
width: 42px;
height: 42px;
padding: 12px 10px;
border: 1px solid var(--cta);
border-radius: var(--br-16);
background: none;
cursor: pointer;
}
.header-toggler span {
flex: 0 0 2px;
height: 2px;
background: var(--dark);
}
.header-toggler span:nth-child(2) {
max-width: 12px;
transform: translateX(8px);
}
.header.open::before {
position: fixed;
inset: calc(var(--menu-height) + 50px + var(--wp-admin--admin-bar--height, 0px)) 0 0 0;
z-index: -2;
background: rgba(0, 0, 0, 0.9);
content: '';
pointer-events: none;
}
.header.open .header-panel {
position: absolute;
inset: 100% 0 auto 0;
display: flex !important;
flex-direction: column;
padding-top: 24px;
padding-bottom: 24px;
background: var(--page-gradient);
}
.header.open .header-toggler span {
position: absolute;
inset: 50% auto auto calc(50% - 10px);
width: 20px;
}
.header.open .header-toggler span:nth-child(1) {
transform: rotate(45deg);
}
.header.open .header-toggler span:nth-child(2) {
display: none;
}
.header.open .header-toggler span:nth-child(3) {
transform: rotate(-45deg);
}
.button {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 16px;
font-size: var(--fs-18);
border-radius: var(--br-16);
text-align: center;
}
.outline-button {
border: 1px solid var(--cta);
color: var(--dark);
transition: transform 0.25s ease;
}
.outline-button:hover {
transform: translateY(-3px);
}
.cta-button {
border: 0;
color: var(--white);
background: var(--cta);
transition: transform 0.25s ease, background-color 0.25s ease;
}
.cta-button:hover {
transform: translateY(-3px);
background: var(--light-cta);
}
.with-arrows-suffix::after,
.with-white-arrows-suffix::after {
display: block;
width: 16px;
height: 18px;
content: '';
}
.with-arrows-suffix::after {
background: url(//clar.co/wp-content/themes/clar/assets/icons/arrows/3-arrows.svg) no-repeat center;
}
.with-white-arrows-suffix::after {
background: url(//clar.co/wp-content/themes/clar/assets/icons/arrows/3-white-arrows.svg) no-repeat center;
}
.list {
display: grid;
gap: 8px;
}
a.link,
.links a {
transition: color 0.25s ease;
}
a.link:hover,
.links a:hover {
color: var(--cta);
}
.post-content {
display: grid;
gap: 0.9em;
}
.post-content:not([class*="c-"]) {
color: var(--dark-gray);
}
.post-content:not([class*="c-"]) :is(h1, h2, h3, h4, h5, h6){
color: var(--dark);
}
.post-content:not([class*="fs-"]) {
font-size: var(--fs-24);
}
.post-content :is(ul, ol) {
display: grid;
gap: 8px;
padding-left: 27px;
}
.post-content :is(ul, ol) :is(ul, ol) {
margin-top: 8px;
}
.post-content :is(h1, h2, h3, h4, h5, h6) {
margin-bottom: 8px;
}
.post-content h2 {
font-size: var(--fs-40);
}
.post-content h3 {
font-size: var(--fs-32);
}
.post-content :is(h4, h5, h6) {
font-size: var(--fs-28);
}
.post-content :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
margin-top: clamp(1.75rem, 2.5vw, 2rem);
}
.post-content a {
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.25s ease;
}
.post-content a:hover {
color: var(--light-cta);
text-decoration: none;
}
.sublist-with-checked :is(ul, ol) {
padding-left: 34px;
list-style: none;
}
.sublist-with-checked :is(ul, ol) > li {
position: relative;
}
.sublist-with-checked :is(ul, ol) > li::before {
position: absolute;
inset: 0 auto auto -34px;
width: 24px;
height: 24px;
background: url(//clar.co/wp-content/themes/clar/assets/icons/bullets/checked.svg) no-repeat center;
content: '';
}
.breadcrumb-icon {
position: relative;
top: -1px;
}
.white-box {
border-radius: var(--br-24);
background: var(--white);
}
.gray-box {
border-radius: var(--br-56);
background: var(--gray-gradient);
}
.green-box {
border-radius: var(--br-40);
color: var(--white);
background: var(--green-gradient);
}
.dark-green-box {
border-radius: var(--br-24);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.10) 100%), var(--dark);
}
.dark-box {
border-radius: var(--br-40);
color: var(--gray);
background: var(--dark-gradient);
}
.ultra-dark-box {
border-radius: var(--br-24);
color: var(--gray);
background: var(--ultra-dark-gradient);
}
.green-arrow-box {
border-radius: var(--br-56);
color: var(--white);
background: url(//clar.co/wp-content/themes/clar/assets/icons/arrows/big-green-arrow.svg) no-repeat bottom, var(--green-gradient);
}
.pagination {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.pagination :is(a, span) {
flex: 0 0 max-content;
display: flex;
justify-content: center;
align-items: center;
padding: 14px 30px;
border: 1px solid var(--gray);
border-radius: var(--br-8);
font-weight: 600;
transition: color 0.25s ease, background-color 0.25s ease;
}
.pagination span,
.pagination a:hover {
color: var(--white);
background: var(--cta);
}
.milestones {
display: flex;
align-items: center;
gap: 15px;
height: 455px;
overflow: auto hidden;
}
.milestone-early-item {
flex: 0 0 270px;
}
.milestone-high-item {
flex: 0 0 402px;
}
.milestone-global-item {
flex: 1 0 350px;
}
.milestone-line {
position: relative;
display: flex;
justify-content: space-evenly;
align-items: center;
height: 11px;
}
.milestone-early-item .milestone-line {
background: linear-gradient(0deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.60) 100%), var(--dark);
}
.milestone-high-item .milestone-line {
background: var(--cta);
}
.milestone-global-item .milestone-line {
background: var(--dark-blue);
}
.milestone-text {
position: absolute;
left: 13px;
display: grid;
gap: 16px;
}
.milestone-top-text {
bottom: 82px;
}
.milestone-bottom-text {
top: 82px;
}
.hero-map {
--map-image: url(//clar.co/wp-content/themes/clar/assets/images/sections/map/small.webp);
--map-gradient: var(--map-mobile-gradient);
position: absolute;
inset: -30px 0 auto 0;
z-index: -2;
max-width: 300px;
height: 584px;
margin-left: auto;
overflow: hidden;
background: var(--map-gradient), var(--map-image) no-repeat top left;
content: '';
}
.hero-map-point {
position: absolute;
top: var(--map-point-y);
left: var(--map-point-x);
width: 25px;
height: 22px;
background: url(//clar.co/wp-content/themes/clar/assets/images/sections/map/point.svg) no-repeat center;
opacity: 0.3;
pointer-events: none;
}
.map-point {
position: absolute; 
inset: var(--point-pos-y) auto auto var(--point-pos-x); 
padding: 0;
border: 0;
background: transparent;
border-radius: 20px;
cursor: pointer;
}
.map-point-detail {
display: none;
position: absolute;
z-index: 10;
inset: var(--point-detail-pos-y) auto auto var(--point-detail-pos-x);
width: 300px;
padding: 18px;
border-radius: var(--br-16);
background: var(--white);
}
.map-point:is(:hover, :active) path.octagon {
fill: var(--cta);
}
.map-point:is(:hover, :active) + .map-point-detail {
display: block;
pointer-events: none;
}
.tnp-submit {
flex: 0 0 fit-content;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 8px 12px;
font-size: var(--fs-16);
font-weight: 600;
border: 0;
border-radius: var(--br-16);
text-align: center;
color: var(--white);
background: var(--cta);
transition: transform 0.25s ease, background-color 0.25s ease;
cursor: pointer;
}
.tnp-submit:hover {
transform: translateY(-3px);
background: var(--light-cta);
}
.tnp-email {
flex: 1 1;
padding: 8px 12px;
line-height: 1em;
border: 1px solid var(--dark);
border-radius: var(--br-16);
}
.tnp-widget-minimal {
margin-top: 16px;
}
.tnp-form,
.tnp-form form,
.tnp-field {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
}
:is(.tnp-form, .tnp-form form) > :not(.tnp-email, .tnp-submit) {
flex: 0 0 100%;
}
.tnp-field .tnp-submit {
flex: 0 0 100%;
}
@media (max-width: 1399.98px) {
.milestone-early-item .milestone-line {
justify-content: space-between;
}
}
@media (min-width: 767px) {
.hero-map {
--map-image: url(//clar.co/wp-content/themes/clar/assets/images/sections/map/medium.webp);
inset: -50px 0 auto 40%;
max-width: 600px;
}
}
@media (min-width: 992px) {
.button {
width: fit-content;
}
.hero-content {
max-width: 573px !important;
margin: 0 0 0 auto !important;
}
.hero-map {
--map-gradient: var(--map-desktop-gradient);
}
.header-panel .list {
width: fit-content;
}
.hero-map-point:not([data-animation="small-slide-top-and-right"]) {
opacity: 0.8;
}
[data-animated="1"] {
transition: transform 0.75s ease;
}
[data-animation="slide-top"]:not([data-animated="1"]) {
transform: translateY(200px);
}
[data-animation="small-slide-top-and-right"]:not([data-animated="1"]) {
transform: translateY(100px) translateX(-75px) scale(0.15);
}
[data-animation="slide-top-and-right"]:not([data-animated="1"]) {
transform: translateY(200px) translateX(-100px) scale(0.15);
}
[data-animation-delay="100"] { transition-delay: 0.1s; }
[data-animation-delay="200"] { transition-delay: 0.2s; }
[data-animation-delay="300"] { transition-delay: 0.3s; }
[data-animation-delay="400"] { transition-delay: 0.4s; }
[data-animation-delay="500"] { transition-delay: 0.5s; }
[data-animation-delay="600"] { transition-delay: 0.6s; }
[data-animation-delay="700"] { transition-delay: 0.7s; }
[data-animation-delay="800"] { transition-delay: 0.8s; }
[data-animation-delay="900"] { transition-delay: 0.9s; }
[data-animation-delay="1000"] { transition-delay: 1s; }
}
@media (min-width: 1200px) {
.container.max-xl {
max-width: 1144px !important;
}
.hero-map {
--map-image: url(//clar.co/wp-content/themes/clar/assets/images/sections/map/big.webp);
max-width: 1027px;
}
}
@media (min-width: 1400px) {
.milestone-early-item {
flex: 0 0 330px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
* {
transition: none !important;
animation: none !important;
}
}