263 lines
5.2 KiB
CSS
263 lines
5.2 KiB
CSS
@charset "UTF-8";
|
|
:root {
|
|
--font-title-large: 36px;
|
|
--font-title-small: 24px;
|
|
--font-body: 16px;
|
|
--font-label: 12px;
|
|
--jp-black: #000000;
|
|
--jp-black-80: #2c3338;
|
|
--jp-white: #ffffff;
|
|
--jp-white-off: #f9f9f6;
|
|
--jp-gray: #dcdcde;
|
|
--jp-gray-0: #F6F7F7;
|
|
--jp-gray-5: #dcdcde;
|
|
--jp-gray-10: #c3c4c7;
|
|
--jp-gray-20: #A7AAAD;
|
|
--jp-gray-30: #8c8f94;
|
|
--jp-gray-40: #787C82;
|
|
--jp-gray-50: #646970;
|
|
--jp-gray-60: #50575E;
|
|
--jp-gray-70: #3c434a;
|
|
--jp-gray-80: #2C3338;
|
|
--jp-gray-90: #1d2327;
|
|
--jp-gray-100: #101517;
|
|
--jp-gray-off: #e2e2df;
|
|
--jp-yellow-5: #f5e6b3;
|
|
--jp-yellow-10: #f2cf75;
|
|
--jp-orange-20: #faa754;
|
|
--jp-blue-5: #ced9f2;
|
|
--jp-red-0: #F7EBEC;
|
|
--jp-red-50: #D63638;
|
|
--jp-red-60: #B32D2E;
|
|
--jp-red-80: #8A2424;
|
|
--jp-red: #d63639;
|
|
--jp-pink: #C9356E;
|
|
--jp-green-0: #f0f2eb;
|
|
--jp-green-5: #d0e6b8;
|
|
--jp-green-10: #9dd977;
|
|
--jp-green-20: #64ca43;
|
|
--jp-green-30: #2fb41f;
|
|
--jp-green-40: #069e08;
|
|
--jp-green-50: #008710;
|
|
--jp-green-60: #007117;
|
|
--jp-green-70: #005b18;
|
|
--jp-green-80: #004515;
|
|
--jp-green-90: #003010;
|
|
--jp-green-100: #001c09;
|
|
--jp-green: #069e08;
|
|
--jp-green-primary: var(--jp-green-40);
|
|
--jp-green-secondary: var(--jp-green-30);
|
|
--jp-border-radius: 4px;
|
|
--jp-border-radius-rna: 8px;
|
|
--jp-menu-border-height: 1px;
|
|
--jp-underline-thickness: 2px;
|
|
--jp-modal-padding-large: 32px;
|
|
--jp-modal-padding: 24px;
|
|
--jp-modal-padding-small: 16px;
|
|
--jp-modal-radius: 8px;
|
|
--jp-button-padding: 8px;
|
|
--jp-button-radius: 4px;
|
|
--jp-gap: 16px;
|
|
--jp-highlight: #3858e9;
|
|
}
|
|
|
|
/********* Mixins *********/
|
|
/********* Generic styles *********/
|
|
body {
|
|
min-height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
|
|
}
|
|
|
|
.jp-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
max-width: 1128px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.jp-row {
|
|
display: grid;
|
|
grid-gap: 24px;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
width: 100%;
|
|
margin: 0 16px;
|
|
}
|
|
@media (min-width: 600px) {
|
|
.jp-row {
|
|
grid-template-columns: repeat(8, 1fr);
|
|
margin: 0 18px;
|
|
}
|
|
}
|
|
@media (min-width: 960px) {
|
|
.jp-row {
|
|
grid-template-columns: repeat(12, 1fr);
|
|
max-width: 1128px;
|
|
margin: 0 24px;
|
|
}
|
|
}
|
|
|
|
.sm-col-span-1 {
|
|
grid-column-end: span 1;
|
|
}
|
|
|
|
.sm-col-span-2 {
|
|
grid-column-end: span 2;
|
|
}
|
|
|
|
.sm-col-span-3 {
|
|
grid-column-end: span 3;
|
|
}
|
|
|
|
.sm-col-span-4 {
|
|
grid-column-end: span 4;
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
.md-col-span-1 {
|
|
grid-column-end: span 1;
|
|
}
|
|
.md-col-span-2 {
|
|
grid-column-end: span 2;
|
|
}
|
|
.md-col-span-3 {
|
|
grid-column-end: span 3;
|
|
}
|
|
.md-col-span-4 {
|
|
grid-column-end: span 4;
|
|
}
|
|
.md-col-span-5 {
|
|
grid-column-end: span 5;
|
|
}
|
|
.md-col-span-6 {
|
|
grid-column-end: span 6;
|
|
}
|
|
.md-col-span-7 {
|
|
grid-column-end: span 7;
|
|
}
|
|
.md-col-span-8 {
|
|
grid-column-end: span 8;
|
|
}
|
|
}
|
|
@media (min-width: 960px) {
|
|
.lg-col-span-1 {
|
|
grid-column-end: span 1;
|
|
}
|
|
.lg-col-span-2 {
|
|
grid-column-end: span 2;
|
|
}
|
|
.lg-col-span-3 {
|
|
grid-column-end: span 3;
|
|
}
|
|
.lg-col-span-4 {
|
|
grid-column-end: span 4;
|
|
}
|
|
.lg-col-span-5 {
|
|
grid-column-end: span 5;
|
|
}
|
|
.lg-col-span-6 {
|
|
grid-column-end: span 6;
|
|
}
|
|
.lg-col-span-7 {
|
|
grid-column-end: span 7;
|
|
}
|
|
.lg-col-span-8 {
|
|
grid-column-end: span 8;
|
|
}
|
|
.lg-col-span-9 {
|
|
grid-column-end: span 9;
|
|
}
|
|
.lg-col-span-10 {
|
|
grid-column-end: span 10;
|
|
}
|
|
.lg-col-span-11 {
|
|
grid-column-end: span 11;
|
|
}
|
|
.lg-col-span-12 {
|
|
grid-column-end: span 12;
|
|
}
|
|
}
|
|
@media (max-width: 960px) {
|
|
.md-col-span-0 {
|
|
display: none;
|
|
}
|
|
}
|
|
@media (max-width: 600px) {
|
|
.sm-col-span-0 {
|
|
display: none;
|
|
}
|
|
}
|
|
.jp-cut {
|
|
position: relative;
|
|
display: block;
|
|
margin: 32px 0;
|
|
padding: 16px 24px 16px 64px;
|
|
border: 2px solid var(--jp-green-primary);
|
|
border-radius: var(--jp-border-radius);
|
|
text-decoration: none;
|
|
}
|
|
.jp-cut span {
|
|
display: block;
|
|
}
|
|
.jp-cut span:last-of-type {
|
|
font-weight: 600;
|
|
}
|
|
.jp-cut:hover span:last-of-type, .jp-cut:focus span:last-of-type {
|
|
text-decoration: underline;
|
|
text-decoration-thickness: var(--jp-underline-thickness);
|
|
}
|
|
.jp-cut:hover:after, .jp-cut:focus:after {
|
|
transform: translateY(-50%) translateX(-8px);
|
|
}
|
|
.jp-cut:after {
|
|
content: "→";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 24px;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: var(--jp-green-primary);
|
|
transform: translateY(-50%);
|
|
transition: transform 0.15s ease-out;
|
|
}
|
|
|
|
.jp-banner-cta-button {
|
|
background: #000;
|
|
border-color: #000;
|
|
color: #fff;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
margin: 0;
|
|
outline: 0;
|
|
overflow: hidden;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
text-overflow: ellipsis;
|
|
vertical-align: top;
|
|
box-sizing: border-box;
|
|
padding: 0.625rem 1.5rem;
|
|
transition: all 150ms ease-in-out;
|
|
text-decoration: none;
|
|
}
|
|
@media (max-width: 480px) {
|
|
.jp-banner-cta-button {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.jp-banner-cta-button:hover, .jp-banner-cta-button:active {
|
|
background: var(--jp-gray-80);
|
|
border-color: var(--jp-gray-80);
|
|
color: var(--jp-white);
|
|
}
|
|
.jp-banner-cta-button:focus {
|
|
box-shadow: none;
|
|
outline: solid 1px var(--jp-black);
|
|
outline-offset: 1px;
|
|
}
|