mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-18 09:35:20 +02:00
821 lines
18 KiB
CSS
821 lines
18 KiB
CSS
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
|
|
|
|
|
|
/* Global */
|
|
:root {
|
|
--primary-DarkBlue: #043873;
|
|
--primary-White: #ffffff;
|
|
--primary-DarkGray: #32363f;
|
|
--accent-LightBlue: #4f9cf9;
|
|
--accent-Yellow: #ffe492;
|
|
--variationPrimary-VaraintDark: #072445;
|
|
--variationPrimary-VaraintWhite: #f8f9fa;
|
|
--variationPrimary-VaraintDarkGray: #212529;
|
|
--variationAccent-VaraintLightBlue: #F7FBFF;
|
|
}
|
|
* {
|
|
font-family: "Montserrat", sans-serif;
|
|
}
|
|
|
|
h2 {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
margin-top: 0.7em;
|
|
}
|
|
|
|
#mobile_icon_logo{
|
|
display: none;
|
|
}
|
|
.joplin__para {
|
|
font-weight: 400;
|
|
font-size: 20.8px;
|
|
line-height: 1.5;
|
|
color: var(--primary-DarkGray);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.joplin__para {
|
|
/* text-align: center; */
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
@media screen and (max-width: 425px) {
|
|
.joplin__para {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
.joplin__tagline1 {
|
|
font-weight: 700;
|
|
font-size: 32px;
|
|
line-height: 1.5;
|
|
color: var(--variationPrimary-VaraintDarkGray);
|
|
}
|
|
@media screen and (max-width: 425px) {
|
|
.joplin__tagline1 {
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
@media (min-width: 576px) {
|
|
.container {
|
|
max-width: 540px;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
max-width: 720px;
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
.container {
|
|
max-width: 960px;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.container {
|
|
max-width: 1140px;
|
|
}
|
|
}
|
|
@media (min-width: 1400px) {
|
|
.container {
|
|
max-width: 1220px;
|
|
}
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.justify-content-tablet-end {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
/* Global */
|
|
|
|
/* Header */
|
|
header {
|
|
background-image: url("../images/brand/background\ blue\ motif\ 1.png");
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
border-radius: 5px;
|
|
padding: 36px 0;
|
|
}
|
|
header .container nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
@media screen and (max-width: 425px) {
|
|
header .container nav {
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
h1.main-logo {
|
|
|
|
font-weight: 600;
|
|
font-size: 48px;
|
|
color: var(--primary-DarkBlue);
|
|
margin: 0;
|
|
border-bottom: 1px solid #ddd;
|
|
line-height: 1.3em;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
@media screen and (max-width: 992px) {
|
|
header .container nav img {
|
|
max-width: 200px;
|
|
}
|
|
#brand_guidelines{
|
|
margin-top: 50px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
header .container nav img {
|
|
max-width: 150px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 576px) {
|
|
#main_lockup {
|
|
display: none;
|
|
}
|
|
#mobile_icon_logo{
|
|
display: block;
|
|
max-width: 80px;
|
|
margin-top: 20px;
|
|
|
|
}
|
|
#brand_guidelines{
|
|
text-align: left;
|
|
padding-left: 20px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 375px) {
|
|
header .container nav h1.main-logo {
|
|
font-size: 40px;
|
|
}
|
|
#main_lockup{
|
|
display: none;
|
|
}
|
|
|
|
|
|
#mobile_icon_logo{
|
|
display: block;
|
|
max-width: 80px;
|
|
margin-top: 20px;
|
|
|
|
}
|
|
#brand_guidelines{
|
|
text-align: left;
|
|
padding-left: 30px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/*header .container nav .logo {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 30px;
|
|
flex-wrap: nowrap;
|
|
}*/
|
|
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
header .container nav .logo {
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
header .container nav .logo h3 {
|
|
font-weight: 600;
|
|
font-size: 48px;
|
|
color: #ffffff;
|
|
letter-spacing: 1px;
|
|
margin: 0;
|
|
}
|
|
@media screen and (max-width: 560px) {
|
|
header .container nav .logo h3 {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
/* Header */
|
|
/* joplin Logos */
|
|
.joplin__logos {
|
|
padding-top: 0px;
|
|
padding-bottom: 43px;
|
|
}
|
|
.joplin__logos h2.main-logo {
|
|
font-weight: 700;
|
|
font-size: 40px;
|
|
color: var(--primary-DarkBlue);
|
|
/* margin-bottom: 45px; */
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.joplin__logos h2.main-logo {
|
|
text-align: center;
|
|
}
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.joplin__logos h2.main-logo {
|
|
font-size: 33px;
|
|
}
|
|
}
|
|
.joplin__logos .container > p {
|
|
margin-bottom: 6px;
|
|
}
|
|
.joplin__logos > .wrapper {
|
|
padding: 40px 0 45px 0;
|
|
margin: 40px 45px;
|
|
/* width: calc(100% - 6.5vw); */
|
|
border: 1px solid var(--variationPrimary-VaraintDarkGray);
|
|
border-radius: 5px;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
@media screen and (max-width: 1440px) {
|
|
.joplin__logos > .wrapper {
|
|
padding: 40px 0 45px 0;
|
|
margin: 40px auto;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.joplin__logos .wrapper .para-1 {
|
|
margin-bottom: 19px;
|
|
}
|
|
.joplin__logos .wrapper .logo-wrapper {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
gap: 27px;
|
|
}
|
|
.joplin__logos .wrapper .logo-wrapper:last-child {
|
|
gap: 24px;
|
|
}
|
|
@media screen and (max-width: 320px) {
|
|
.joplin__logos .wrapper .logo-wrapper img {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
.joplin__logos .wrapper .logo-wrapper h4 {
|
|
font-size: 38px;
|
|
font-weight: 600;
|
|
}
|
|
@media screen and (max-width: 320px) {
|
|
.joplin__logos .wrapper .logo-wrapper h4 {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.joplin__logos .wrapper .logo-wrapper .blue-header {
|
|
color: var(--accent-LightBlue);
|
|
margin: 0;
|
|
}
|
|
.joplin__logos .wrapper .logo-wrapper .white-header {
|
|
color: var(--primary-White);
|
|
margin: 0;
|
|
}
|
|
.joplin__logos .wrapper .para-1 .blue-text {
|
|
font-weight: bold;
|
|
color: var(--accent-LightBlue);
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.joplin__logos .wrapper .box:nth-child(1) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.joplin__logos .wrapper .box:nth-child(1) > p {
|
|
width: 80%;
|
|
}
|
|
@media screen and (max-width: 1024px) {
|
|
.joplin__logos .wrapper .box:nth-child(1) > p {
|
|
width: 90%;
|
|
}
|
|
}
|
|
|
|
.para-1 {
|
|
width: 100%;
|
|
}
|
|
.joplin__logos .wrapper-2 .our-para {
|
|
width: 100% !important;
|
|
}
|
|
@media screen and (min-width: 1400px) {
|
|
.joplin__logos .wrapper .box2 {
|
|
/* padding-left: 50px;
|
|
margin-right: -130px; */
|
|
}
|
|
}
|
|
.joplin__logos .wrapper .colored-box {
|
|
background-color: var(--primary-DarkBlue);
|
|
padding: 17px 15px 15px 24px;
|
|
/* width: 320px; */
|
|
/* height: 189px; */
|
|
}
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.joplin__logos .wrapper .colored-box {
|
|
transform: translateX(-35px);
|
|
}
|
|
}
|
|
.joplin__logos .wrapper .colored-box p {
|
|
font-weight: normal;
|
|
color: var(--primary-White);
|
|
margin-bottom: 20px;
|
|
line-height: 1.5;
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.joplin__logos .wrapper .colored-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.joplin__logos .wrapper .box-wrapper {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.joplin__logos .wrapper .box-wrapper {
|
|
flex-direction: column-reverse;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.joplin__logos .wrapper h2 {
|
|
text-align: center;
|
|
}
|
|
}
|
|
.joplin__logos .wrapper .box-wrapper img {
|
|
margin-top: 7px;
|
|
max-width: 100%;
|
|
}
|
|
.joplin__logos .wrapper .box-wrapper p {
|
|
width: 70%;
|
|
}
|
|
.joplin__logos .wrapper-2 {
|
|
position: relative;
|
|
padding: 42px 0 35px 0;
|
|
}
|
|
@media screen and (max-width: 425px) {
|
|
.joplin__logos .wrapper-2 {
|
|
padding: 42px 0 35px 0;
|
|
}
|
|
}
|
|
.joplin__logos .wrapper-2 .pipeline {
|
|
width: 1px;
|
|
height: 94%;
|
|
background-color: var(--variationPrimary-VaraintDarkGray);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 47%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
@media screen and (max-width: 1200px) {
|
|
.joplin__logos .wrapper-2 .pipeline {
|
|
display: none;
|
|
}
|
|
}
|
|
@media screen and (max-width: 1366px) {
|
|
.joplin__logos .wrapper-2 .pipeline {
|
|
left: 49%;
|
|
}
|
|
}
|
|
.joplin__logos .wrapper-2 .joplin__tagline1 {
|
|
margin-bottom: 34px;
|
|
}
|
|
.joplin__logos .wrapper-2 .our-para {
|
|
margin-top: 19px;
|
|
}
|
|
.joplin__logos .wrapper-2 img {
|
|
max-width: 100%;
|
|
}
|
|
@media screen and (max-width: 425px) {
|
|
.joplin__logos .wrapper-2 .box-wrapper {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
@media (min-width: 1400px) and (max-width: 2100px) {
|
|
.joplin__logos .wrapper-2 .special-box {
|
|
margin-left: 150px;
|
|
}
|
|
.joplin__logos .wrapper-2 .special-box p {
|
|
width: 100%;
|
|
}
|
|
.joplin__logos .wrapper-2 .pipeline {
|
|
left: 53%;
|
|
}
|
|
}
|
|
/* @media (min-width: 1441px) and (max-width: 1750px) {
|
|
.joplin__logos .p-row {
|
|
padding: 0 5rem;
|
|
}
|
|
} */
|
|
/* joplin Logos */
|
|
|
|
/* joplin__Colours */
|
|
.joplin__colours {
|
|
padding: 5px 0;
|
|
background-image: url("../images/brand/background\ blue\ motif\ 2.png");
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.joplin__colours h2 {
|
|
color: var(--primary-White);
|
|
font-size: 40px;
|
|
margin-bottom: 28px;
|
|
font-weight: 700;
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.joplin__colours h2 {
|
|
font-size: 33px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.joplin__colours h2 {
|
|
text-align: center;
|
|
}
|
|
}
|
|
.joplin__colours p {
|
|
color: var(--primary-White);
|
|
margin-bottom: 40px;
|
|
}
|
|
.joplin__colours .custom-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 45px;
|
|
padding-bottom: 20px;
|
|
}
|
|
@media screen and (max-width: 1400px) {
|
|
.joplin__colours .custom-row {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
.joplin__colours .custom-row .chartjs-wrapper canvas {
|
|
width: 535px;
|
|
}
|
|
@media screen and (max-width: 575px) {
|
|
.joplin__colours .custom-row .chartjs-wrapper canvas {
|
|
width: 270px;
|
|
}
|
|
}
|
|
/* joplin__Colours */
|
|
/* joplin__Pallet */
|
|
.joplin__pallet {
|
|
padding: 45px 0 92px 0;
|
|
}
|
|
.joplin__pallet h3 {
|
|
font-weight: 600;
|
|
font-size: 32px;
|
|
margin-bottom: 50px;
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.joplin__pallet h3 {
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 1200px) {
|
|
.joplin__pallet h3 {
|
|
text-align: center;
|
|
}
|
|
}
|
|
.joplin__pallet .sigma-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 35px;
|
|
}
|
|
@media screen and (max-width: 555px) {
|
|
.joplin__pallet .sigma-wrapper {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.joplin__pallet .sigma-wrapper .circle-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
@media screen and (max-width: 992px) {
|
|
.joplin__pallet .sigma-wrapper .circle-wrapper {
|
|
align-items: center;
|
|
}
|
|
}
|
|
@media screen and (max-width: 1200px) {
|
|
.joplin__pallet .sigma-wrapper {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.joplin__pallet .sigma-wrapper .circle-wrapper .circle {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
border: 1px solid #000;
|
|
margin-bottom: 30px;
|
|
}
|
|
.joplin__pallet .row-space {
|
|
padding: 50px 0;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
.joplin__pallet .row-space div {
|
|
width: 97%;
|
|
height: 1px;
|
|
background-color: var(--primary-DarkGray);
|
|
}
|
|
.joplin__pallet .dark-blue {
|
|
background-color: var(--primary-DarkBlue);
|
|
}
|
|
.joplin__pallet .white {
|
|
background-color: var(--primary-White);
|
|
}
|
|
.joplin__pallet .dark-gray {
|
|
background-color: var(--primary-DarkGray);
|
|
}
|
|
.joplin__pallet .light-blue {
|
|
background-color: var(--accent-LightBlue);
|
|
}
|
|
.joplin__pallet .yellow {
|
|
background-color: var(--accent-Yellow);
|
|
}
|
|
.joplin__pallet .variant-dark {
|
|
background-color: var(--variationPrimary-VaraintDark);
|
|
}
|
|
.joplin__pallet .variant-white {
|
|
background-color: var(--variationPrimary-VaraintWhite);
|
|
}
|
|
.joplin__pallet .variant-dark-gray {
|
|
background-color: var(--variationPrimary-VaraintDarkGray);
|
|
}
|
|
.joplin__pallet .variant-light-blue {
|
|
background-color: var(--variationAccent-VaraintLightBlue);
|
|
}
|
|
/* joplin__Pallet */
|
|
/* joplin__State */
|
|
.joplin__state {
|
|
background-color: var(--primary-DarkBlue);
|
|
background-image: url("../images/brand/Rectangle\ 16.png");
|
|
background-position: bottom center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
padding: 65px 0 78px 0;
|
|
position: relative;
|
|
}
|
|
.joplin__state::before {
|
|
content: "";
|
|
width: 1px;
|
|
height: 98%;
|
|
background-color: var(--variationPrimary-VaraintDarkGray);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
overflow: hidden;
|
|
}
|
|
@media screen and (max-width: 992px) {
|
|
.joplin__state::before {
|
|
display: none;
|
|
}
|
|
}
|
|
.joplin__state .image {
|
|
transform: translateY(25px);
|
|
}
|
|
.joplin__state .wrapper > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.joplin__state .wrapper > div .box h2 {
|
|
color: var(--primary-White);
|
|
font-size: 40px;
|
|
margin-bottom: 28px;
|
|
font-weight: 700;
|
|
}
|
|
/* @media screen and (min-width: 1400px) {
|
|
.joplin__state .wrapper > div .box h2 {
|
|
text-wrap: nowrap;
|
|
}
|
|
} */
|
|
@media screen and (max-width: 767px) {
|
|
.joplin__state .wrapper > div .box h2 {
|
|
text-align: center;
|
|
}
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
.joplin__state .wrapper > div .box h2 {
|
|
font-size: 38px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.joplin__state .wrapper > div .box h2 {
|
|
font-size: 33px;
|
|
}
|
|
}
|
|
|
|
.joplin__state .wrapper > div .box p {
|
|
color: var(--primary-White);
|
|
width: 85%;
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
.joplin__state .wrapper > div .box p {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
.joplin__state .wrapper > div .box img {
|
|
max-width: 100%;
|
|
}
|
|
.joplin__highlighter {
|
|
padding: 74px 0;
|
|
background-image: url("../images/brand/Rectangle\ 16.png");
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.joplin__highlighter h2 {
|
|
color: var(--primary-White);
|
|
font-size: 40px;
|
|
margin-bottom: 28px;
|
|
font-weight: 700;
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.joplin__highlighter h2 {
|
|
font-size: 33px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.joplin__highlighter h2 {
|
|
text-align: center;
|
|
}
|
|
}
|
|
.joplin__highlighter p {
|
|
color: var(--primary-White);
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
.joplin__highlighter p {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
.joplin__highlighter .wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 22px;
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.joplin__highlighter .wrapper {
|
|
flex-wrap: wrap;
|
|
row-gap: 25px;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.joplin__highlighter .wrapper div {
|
|
padding: 32px 62px;
|
|
border-radius: 5px;
|
|
position: relative;
|
|
}
|
|
.joplin__highlighter .wrapper div:first-child img {
|
|
position: absolute;
|
|
top: 57%;
|
|
max-width: 100%;
|
|
}
|
|
.joplin__highlighter .wrapper div:last-child img {
|
|
position: absolute;
|
|
top: 59%;
|
|
max-width: 100%;
|
|
}
|
|
@media screen and (max-width: 1200px) {
|
|
.joplin__highlighter .wrapper div:first-child img {
|
|
top: 43%;
|
|
}
|
|
.joplin__highlighter .wrapper div:last-child img {
|
|
top: 44%;
|
|
}
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.joplin__highlighter .wrapper div:first-child img {
|
|
top: 59%;
|
|
}
|
|
.joplin__highlighter .wrapper div:last-child img {
|
|
top: 59%;
|
|
}
|
|
}
|
|
@media screen and (max-width: 490px) {
|
|
.joplin__highlighter .wrapper div:first-child img {
|
|
top: 43%;
|
|
}
|
|
.joplin__highlighter .wrapper div:last-child img {
|
|
top: 43%;
|
|
}
|
|
}
|
|
@media screen and (max-width: 320px) {
|
|
.joplin__highlighter .wrapper div:last-child img {
|
|
top: 36%;
|
|
}
|
|
}
|
|
.joplin__highlighter .wrapper div.yellow {
|
|
background-color: var(--primary-White);
|
|
}
|
|
.joplin__highlighter .wrapper div.blue {
|
|
background-color: var(--primary-DarkBlue);
|
|
}
|
|
.joplin__highlighter .wrapper div h4 {
|
|
color: var(--variationPrimary-VaraintDarkGray);
|
|
margin: 0;
|
|
font-weight: 700;
|
|
font-size: 20.8px;
|
|
line-height: 1.5;
|
|
}
|
|
.joplin__highlighter .wrapper div.blue h4 {
|
|
color: var(--primary-White);
|
|
}
|
|
|
|
/* joplin__State */
|
|
/* joplin__Voice */
|
|
.joplin__voice {
|
|
padding: 78px 0;
|
|
}
|
|
.joplin__voice .container h2 {
|
|
font-weight: 700;
|
|
font-size: 40px;
|
|
line-height: 1.5;
|
|
color: var(--variationPrimary-VaraintDarkGray);
|
|
}
|
|
|
|
@media screen and (max-width: 500px) {
|
|
.joplin__voice .container h2 {
|
|
font-size: 38px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.joplin__voice .container h2 {
|
|
font-size: 33px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.joplin__voice .container .wrapper {
|
|
margin-top: 57px;
|
|
}
|
|
.joplin__voice .container .wrapper .box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 20px;
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.joplin__voice .container .wrapper .box {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.joplin__voice .container .wrapper .box div:first-child {
|
|
flex: 1;
|
|
}
|
|
.joplin__voice .container .wrapper .box div:last-child {
|
|
flex: 2;
|
|
}
|
|
.joplin__voice .container .wrapper .box div h3 {
|
|
font-weight: 700;
|
|
font-size: 32px;
|
|
line-height: 1.7;
|
|
color: var(--primary-DarkGray);
|
|
}
|
|
@media (max-width: 767px) {
|
|
.joplin__voice .container .wrapper .box div h3 {
|
|
text-align: center;
|
|
font-size:28px;
|
|
}
|
|
.joplin__voice .container .wrapper .box {
|
|
align-items: center;
|
|
}
|
|
}
|
|
.joplin__voice .container .wrapper .box div p {
|
|
margin-bottom: 36px;
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
.joplin__voice .container .wrapper .box div p {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
/* joplin__Voice */
|
|
.chartjs-wrapper {
|
|
background-color: #d9d9d9;
|
|
padding: 10px 20px;
|
|
max-width: 45%;
|
|
}
|
|
|