239 lines
6.8 KiB
CSS
239 lines
6.8 KiB
CSS
.font-smoothing { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
|
|
|
/** Reset some basic elements
|
|
*/
|
|
* { box-sizing: border-box !important; margin: 0; }
|
|
|
|
input, select, textarea, button { font-family: inherit; font-size: inherit; line-height: inherit; }
|
|
|
|
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
|
|
|
|
/** Basic styling */
|
|
body { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #181818; background-color: #fff; }
|
|
|
|
p { margin-top: 0; margin-bottom: 0.5em; }
|
|
|
|
h1, h2, h3, h4, h5, h6 { margin-top: 1em; margin-bottom: 0.25em; }
|
|
|
|
h1, .h1 { font-size: 40px; }
|
|
|
|
h2, .h2 { font-size: 32px; }
|
|
|
|
h3, .h3 { font-size: 24px; }
|
|
|
|
h4, .h4 { font-size: 20px; }
|
|
|
|
h5, .h5 { font-size: 16px; }
|
|
|
|
h6, .h6 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; }
|
|
|
|
a { color: inherit; text-decoration: none; }
|
|
|
|
a:hover { text-decoration: underline; }
|
|
|
|
pre { border-left: 8px solid #ddd; margin: 32px 0; padding-left: 16px; width: 75%; overflow-x: auto; }
|
|
|
|
code { color: #DC3918; font-size: 16px; padding: 1px 0px; }
|
|
|
|
.prose a { text-decoration: underline dotted; }
|
|
.prose a:hover { text-decoration: underline; }
|
|
.prose p, .prose ol, .prose ul { font-size: 20px; margin-bottom: 1em; width: 100%; }
|
|
@media (min-width: 52em) { .prose p, .prose ol, .prose ul { width: 83.3333333333%; } }
|
|
.prose ul, .prose ol { padding-left: 40px; }
|
|
.prose li { margin-bottom: 0.5em; }
|
|
.prose li ul li, .prose li ol li { margin-bottom: 0; }
|
|
.prose img { max-width: 100%; }
|
|
@media (min-width: 52em) { .prose img { max-width: 120%; } }
|
|
.prose blockquote { line-height: 1.375; padding-left: 20px; margin: 40px 0 40px -16px; border-left: 8px solid #ddd; font-style: italic; }
|
|
.prose blockquote p { font-size: 24px; }
|
|
@media (min-width: 52em) { .prose blockquote { padding-left: 32px; margin: 64px 0 64px -40px; max-width: 110%; }
|
|
.prose blockquote p { font-size: 32px; } }
|
|
.prose hr { color: #181818; border-style: solid; border-width: thin; margin-top: 0.5em; margin-bottom: 0.5em; }
|
|
.prose dt { font-weight: bold; font-style: italic; line-height: 1.25; }
|
|
.prose dd { font-style: italic; margin-bottom: 0.5em; }
|
|
.prose table { border-collapse: collapse; display: block; width: 100%; margin-bottom: 1.5em; overflow: auto; word-break: normal; word-break: keep-all; }
|
|
.prose table th { font-weight: bold; text-align: left; }
|
|
.prose table th, .prose table td { padding: 16px 32px 16px 2px; border-top: 1px solid #181818; border-bottom: 1px solid #181818; }
|
|
.prose table tr { background-color: #fff; border-top: 1px solid #181818; }
|
|
.prose table tr th { border-top: 2px solid #181818; border-bottom: 2px solid #181818; }
|
|
|
|
/* Type utilities */
|
|
.h0 { font-size: 64px; line-height: 1.0125; margin-top: 0.85em; word-wrap: break-word; }
|
|
@media (min-width: 52em) { .h0 { font-size: 128px; } }
|
|
|
|
.text-right { text-align: right; }
|
|
|
|
.no-underline { text-decoration: none !important; }
|
|
.no-underline:hover { text-decoration: none !important; }
|
|
|
|
.bold { font-weight: bold; }
|
|
|
|
.uppercase { text-transform: uppercase; }
|
|
|
|
.lh-condensed { line-height: 1.25; }
|
|
|
|
.list-reset { list-style: none; padding-left: 0; }
|
|
|
|
/* Border utilities */
|
|
.border-bottom-thick { border-bottom: 2px solid; border-color: currentColor; }
|
|
|
|
.border-bottom-thin { border-bottom: 1px solid; border-color: currentColor; }
|
|
|
|
.border-top-thick { border-top: 2px solid; border-color: currentColor; }
|
|
|
|
.border-top-thin { border-top: 1px solid; border-color: currentColor; }
|
|
|
|
.border-0 { border: 0; }
|
|
|
|
/* Theme color utilities */
|
|
.header-background { background-color: #181818; }
|
|
|
|
.header-border { border-color: #fff; }
|
|
|
|
.header-title { color: #fff; }
|
|
|
|
.header-text { color: #fff; }
|
|
|
|
.header-social { fill: #fff; }
|
|
|
|
.header-social-accent { fill: #E74727; }
|
|
|
|
.header-link:hover { color: #E74727 !important; }
|
|
|
|
.text-accent { color: #E74727; }
|
|
|
|
/* Layout utilities */
|
|
.container { max-width: 64em; }
|
|
|
|
.col-1 { width: 8.3333333333%; }
|
|
|
|
.col-2 { width: 16.6666666667%; }
|
|
|
|
.col-3 { width: 25%; }
|
|
|
|
.col-4 { width: 33.3333333333%; }
|
|
|
|
.col-5 { width: 41.6666666667%; }
|
|
|
|
.col-6 { width: 50%; }
|
|
|
|
.col-7 { width: 58.3333333333%; }
|
|
|
|
.col-8 { width: 66.6666666667%; }
|
|
|
|
.col-9 { width: 75%; }
|
|
|
|
.col-10 { width: 83.3333333333%; }
|
|
|
|
.col-11 { width: 91.6666666667%; }
|
|
|
|
.col-12 { width: 100%; }
|
|
|
|
@media (max-width: 52em) { .sm-width-full { width: 100% !important; } }
|
|
.block { display: block !important; }
|
|
|
|
.inline-block { display: inline-block !important; }
|
|
|
|
.table { display: table !important; }
|
|
|
|
.left { float: left; }
|
|
|
|
.right { float: right; }
|
|
|
|
.clearfix:before, .clearfix:after { content: " "; display: table; }
|
|
|
|
.clearfix:after { clear: both; }
|
|
|
|
.align-middle { vertical-align: middle; }
|
|
|
|
/* Padding */
|
|
.px-0 { padding-left: 0; padding-right: 0; }
|
|
|
|
.py-0 { padding-top: 0; padding-bottom: 0; }
|
|
|
|
.px-1 { padding-left: 8px; padding-right: 8px; }
|
|
|
|
.py-1 { padding-top: 8px; padding-bottom: 8px; }
|
|
|
|
.px-2 { padding-left: 16px; padding-right: 16px; }
|
|
|
|
.py-2 { padding-top: 16px; padding-bottom: 16px; }
|
|
|
|
.px-3 { padding-left: 32px; padding-right: 32px; }
|
|
|
|
.py-3 { padding-top: 32px; padding-bottom: 32px; }
|
|
|
|
.px-4 { padding-left: 64px; padding-right: 64px; }
|
|
|
|
.py-4 { padding-top: 64px; padding-bottom: 64px; }
|
|
|
|
/* Margin */
|
|
.mx-auto { margin-left: auto; margin-right: auto; }
|
|
|
|
.mt-0 { margin-top: 0; }
|
|
|
|
.mr-0 { margin-right: 0; }
|
|
|
|
.mb-0 { margin-bottom: 0; }
|
|
|
|
.ml-0 { margin-left: 0; }
|
|
|
|
.mt-1 { margin-top: 8px; }
|
|
|
|
.mr-1 { margin-right: 8px; }
|
|
|
|
.mb-1 { margin-bottom: 8px; }
|
|
|
|
.ml-1 { margin-left: 8px; }
|
|
|
|
.mt-2 { margin-top: 16px; }
|
|
|
|
.mr-2 { margin-right: 16px; }
|
|
|
|
.mb-2 { margin-bottom: 16px; }
|
|
|
|
.ml-2 { margin-left: 16px; }
|
|
|
|
.mt-3 { margin-top: 32px; }
|
|
|
|
.mr-3 { margin-right: 32px; }
|
|
|
|
.mb-3 { margin-bottom: 32px; }
|
|
|
|
.ml-3 { margin-left: 32px; }
|
|
|
|
.mt-4 { margin-top: 64px; }
|
|
|
|
.mr-4 { margin-right: 64px; }
|
|
|
|
.mb-4 { margin-bottom: 64px; }
|
|
|
|
.ml-4 { margin-left: 64px; }
|
|
|
|
@media (min-width: 52em) { .mx-lg-auto { margin-left: auto; margin-right: auto; }
|
|
.mt-lg-0 { margin-top: 0; }
|
|
.mr-lg-0 { margin-right: 0; }
|
|
.mb-lg-0 { margin-bottom: 0; }
|
|
.ml-lg-0 { margin-left: 0; }
|
|
.mt-lg-1 { margin-top: 8px; }
|
|
.mr-lg-1 { margin-right: 8px; }
|
|
.mb-lg-1 { margin-bottom: 8px; }
|
|
.ml-lg-1 { margin-left: 8px; }
|
|
.mt-lg-2 { margin-top: 16px; }
|
|
.mr-lg-2 { margin-right: 16px; }
|
|
.mb-lg-2 { margin-bottom: 16px; }
|
|
.ml-lg-2 { margin-left: 16px; }
|
|
.mt-lg-3 { margin-top: 32px; }
|
|
.mr-lg-3 { margin-right: 32px; }
|
|
.mb-lg-3 { margin-bottom: 32px; }
|
|
.ml-lg-3 { margin-left: 32px; }
|
|
.mt-lg-4 { margin-top: 64px; }
|
|
.mr-lg-4 { margin-right: 64px; }
|
|
.mb-lg-4 { margin-bottom: 64px; }
|
|
.ml-lg-4 { margin-left: 64px; } }
|
|
.link-social { text-decoration: none; font-weight: bold; line-height: 1; }
|
|
.link-social:hover { text-decoration: none !important; }
|
|
|
|
.link-primary { font-weight: bold; text-decoration: none !important; }
|
|
.link-primary:hover { color: #E74727; text-decoration: none !important; }
|