/* * Add content area styles to the editor (in addition to the front end), so that users see content the way it will * appear on the front end. */ /* ---------------------------------------------------------------------------- 1.0 - Button Layouts ---------------------------------------------------------------------------- */ .button, body.home .wp-block-button, .button-primary, .button-secondary, .plugin-upload-form .button-primary { border: 1px solid; border-radius: 3px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: ms(-2); height: ms(4); line-height: 1; margin: 0; padding: 0 0.8rem; text-decoration: none; white-space: nowrap; -webkit-appearance: none; } /* Remove the dotted border on :focus and the extra padding in Firefox */ button::-moz-focus-inner, input[type=reset]::-moz-focus-inner, input[type=button]::-moz-focus-inner, input[type=submit]::-moz-focus-inner { border: 0 none; padding: 0; } .button.button-xl, body.home .button-xl.wp-block-button, .button-group.button-xl .button, .button-group.button-xl body.home .wp-block-button, body.home .button-group.button-xl .wp-block-button { font-size: ms(0); height: ms(8); line-height: 1; padding: 0 1.5rem; } .button.button-large, body.home .button-large.wp-block-button, .button-group.button-large .button, .button-group.button-large body.home .wp-block-button, body.home .button-group.button-large .wp-block-button { height: ms(6); line-height: 1; padding: 0 1rem; } .button.button-small, body.home .button-small.wp-block-button, .button-group.button-small .button, .button-group.button-small body.home .wp-block-button, body.home .button-group.button-small .wp-block-button { font-size: ms(-4); height: ms(2); line-height: 1; padding: 0 0.5rem; } a.button, body.home a.wp-block-button, a.button-primary, a.button-secondary { line-height: ms(4); } a.button.button-large, body.home a.button-large.wp-block-button, .button-group.button-large a.button, .button-group.button-large body.home a.wp-block-button, body.home .button-group.button-large a.wp-block-button { line-height: ms(6); } a.button.button-xl, body.home a.button-xl.wp-block-button, .button-group.button-xl a.button, .button-group.button-xl body.home a.wp-block-button, body.home .button-group.button-xl a.wp-block-button { line-height: ms(8); } a.button.button-small, body.home a.button-small.wp-block-button, .button-group.button-small a.button, .button-group.button-small body.home a.wp-block-button, body.home .button-group.button-small a.wp-block-button { line-height: ms(2); } .button:active, body.home .wp-block-button:active, .button:focus, body.home .wp-block-button:focus { outline: none; } .button.hidden, body.home .hidden.wp-block-button { display: none; } /* Style Reset buttons as simple text links */ input[type=reset], input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus { background: none; border: none; box-shadow: none; padding: 0 2px 1px; width: auto; } /* ---------------------------------------------------------------------------- 2.0 - Default Button Style ---------------------------------------------------------------------------- */ .button, body.home .wp-block-button, .button:visited, .button-secondary { background: #f7f7f7; border-color: #cccccc; box-shadow: 0 1px 0 #cccccc; color: #555; vertical-align: top; } p .button, p body.home .wp-block-button, body.home p .wp-block-button { vertical-align: baseline; } .button.hover, body.home .hover.wp-block-button, .button:hover, body.home .wp-block-button:hover, .button-secondary:hover, .button.focus, body.home .focus.wp-block-button, .button:focus, body.home .wp-block-button:focus, .button-secondary:focus { background: #fafafa; border-color: #999; color: #23282d; } .button.focus, body.home .focus.wp-block-button, .button:focus, body.home .wp-block-button:focus, .button-secondary:focus, .button-link:focus { border-color: #5b9dd9; box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); } .button.active, body.home .active.wp-block-button, .button.active:hover, .button:active, body.home .wp-block-button:active, .button-secondary:active { background: #eee; border-color: #999; box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); transform: translateY(1px); } .button.active:focus, body.home .active.wp-block-button:focus { border-color: #5b9dd9; box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), 0 0 3px rgba(0, 115, 170, 0.8); } .button[disabled], body.home [disabled].wp-block-button, .button:disabled, body.home .wp-block-button:disabled, .button.disabled, body.home .disabled.wp-block-button, .button-secondary[disabled], .button-secondary:disabled, .button-secondary.disabled, .button-disabled { background: #f7f7f7 !important; border-color: #ddd !important; box-shadow: none !important; color: #a0a5aa !important; cursor: default; text-shadow: 0 1px 0 #fff !important; transform: none !important; } /* Buttons that look like links, for a cross of good semantics with the visual */ .button-link, input[type=submit].button-link { background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; margin: 0; outline: none; padding: 0; } .button-link:focus { outline: #5b9dd9 solid 1px; } /* ---------------------------------------------------------------------------- 3.0 - Primary Button Style ---------------------------------------------------------------------------- */ .button-primary, .download-button, .plugin-upload-form .button-primary { background: #0085ba; border-color: #0073aa #006799 #006799; box-shadow: 0 1px 0 #006799; color: #fff; text-decoration: none; text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799; } .button-primary:visited, .download-button:visited, .plugin-upload-form .button-primary:visited { background: #0085ba; border-color: #0073aa #006799 #006799; box-shadow: 0 1px 0 #006799; color: #fff; } .button-primary.hover, .button-primary:hover, .button-primary.focus, .button-primary:focus, .download-button.hover, .download-button:hover, .download-button.focus, .download-button:focus, .plugin-upload-form .button-primary.hover, .plugin-upload-form .button-primary:hover, .plugin-upload-form .button-primary.focus, .plugin-upload-form .button-primary:focus { background: #008ec2; border-color: #006799; box-shadow: 0 1px 0 #006799; color: #fff; } .button-primary.focus, .button-primary:focus, .download-button.focus, .download-button:focus, .plugin-upload-form .button-primary.focus, .plugin-upload-form .button-primary:focus { box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db; } .button-primary.active, .button-primary.active:hover, .button-primary.active:focus, .button-primary:active, .download-button.active, .download-button.active:hover, .download-button.active:focus, .download-button:active, .plugin-upload-form .button-primary.active, .plugin-upload-form .button-primary.active:hover, .plugin-upload-form .button-primary.active:focus, .plugin-upload-form .button-primary:active { background: #0073aa; border-color: #006799; box-shadow: inset 0 2px 0 #006799; vertical-align: top; } .button-primary[disabled], .button-primary:disabled, .button-primary.disabled, .download-button[disabled], .download-button:disabled, .download-button.disabled, .plugin-upload-form .button-primary[disabled], .plugin-upload-form .button-primary:disabled, .plugin-upload-form .button-primary.disabled { background: #008ec2 !important; border-color: #007cb2 !important; box-shadow: none !important; color: #66c6e4 !important; cursor: default; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) !important; } .button-primary.button.button-hero, body.home .button-primary.button-hero.wp-block-button, .download-button.button.button-hero, body.home .download-button.button-hero.wp-block-button, .plugin-upload-form .button-primary.button.button-hero { box-shadow: 0 2px 0 #006799; } .button-primary.button.button-hero.active, body.home .button-primary.button-hero.active.wp-block-button, .button-primary.button.button-hero.active:hover, .button-primary.button.button-hero.active:focus, .button-primary.button.button-hero:active, body.home .button-primary.button-hero.wp-block-button:active, .download-button.button.button-hero.active, body.home .download-button.button-hero.active.wp-block-button, .download-button.button.button-hero.active:hover, .download-button.button.button-hero.active:focus, .download-button.button.button-hero:active, body.home .download-button.button-hero.wp-block-button:active, .plugin-upload-form .button-primary.button.button-hero.active, .plugin-upload-form .button-primary.button.button-hero.active:hover, .plugin-upload-form .button-primary.button.button-hero.active:focus, .plugin-upload-form .button-primary.button.button-hero:active { box-shadow: inset 0 3px 0 #006799; } .button-primary-disabled { background: #008ec2 !important; border-color: #007cb2 !important; box-shadow: none !important; color: #66c6e4 !important; cursor: default; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) !important; } /* ---------------------------------------------------------------------------- 4.0 - Button Groups ---------------------------------------------------------------------------- */ .button-group { display: inline-block; font-size: 0; position: relative; vertical-align: middle; white-space: nowrap; } .button-group > .button, body.home .button-group > .wp-block-button { border-radius: 0; display: inline-block; margin-right: -1px; z-index: 10; } .button-group > .button-primary { z-index: 100; } .button-group > .button:hover, body.home .button-group > .wp-block-button:hover { z-index: 20; } .button-group > .button:first-child, body.home .button-group > .wp-block-button:first-child { border-radius: 3px 0 0 3px; } .button-group > .button:last-child, body.home .button-group > .wp-block-button:last-child { border-radius: 0 3px 3px 0; } .button-group > .button:focus, body.home .button-group > .wp-block-button:focus { position: relative; z-index: 1; } /* ---------------------------------------------------------------------------- 5.0 - Responsive Button Styles ---------------------------------------------------------------------------- */ @media screen and (max-width: 737px) { .button, body.home .wp-block-button, .button.button-large, .button.button-small, .plugin-upload-form .button-primary { font-size: 14px; height: auto; line-height: normal; margin-bottom: 4px; padding: 6px 14px; vertical-align: middle; } } body.home .wp-block-button { display: inline-block; height: auto; margin-bottom: 1rem; } body.home .wp-block-button__link { background: none; color: #555d66; text-decoration: none; } body.home .wp-block-button__link:hover, body.home .wp-block-button__link:visited { color: #555d66; } .button.button-danger, body.home .button-danger.wp-block-button { color: #c92c2c; } .button.button-danger:visited, body.home .button-danger.wp-block-button:visited { color: #c92c2c; } .button.button-danger.hover, body.home .button-danger.hover.wp-block-button, .button.button-danger:hover, body.home .button-danger.wp-block-button:hover, .button.button-danger.focus, body.home .button-danger.focus.wp-block-button, .button.button-danger:focus, body.home .button-danger.wp-block-button:focus { color: #c92c2c; } .button.button-danger.focus, body.home .button-danger.focus.wp-block-button, .button.button-danger:focus, body.home .button-danger.wp-block-button:focus { border-color: rgba(201, 44, 44, 0.6); box-shadow: 0 0 3px #c92c2c; } .button.button-link, body.home .button-link.wp-block-button { padding: 0; margin-left: 0; margin-right: 0; border: none; background-color: transparent; box-shadow: none; text-decoration: underline; } .button.button-link.focus, body.home .button-link.focus.wp-block-button, .button.button-link:focus, body.home .button-link.wp-block-button:focus { box-shadow: none; } /* Fills 100% of the screen on mobile, and 100% of the content area on desktop */ .is-style-wporg-hero { position: relative; left: -ms(4); width: calc(100% + ( 2 * ms(4) )); max-width: calc(100% + ( 2 * ms(4) )); clear: both; margin-bottom: 0; } @media screen and (min-width: 768px) { .is-style-wporg-hero { position: inherit; left: inherit; width: inherit; max-width: inherit; clear: inherit; margin-bottom: 1em; } .is-style-wporg-hero.wp-block-group { margin-top: -8rem; } } .wp-block-pullquote { color: #606a74; } html { overflow-x: hidden; } .entry-header .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; } .has-wporg-blue-color { color: #1E8CBE; } .has-wporg-blue-background-color { background-color: #1E8CBE; } .has-wporg-purple-color { color: #826EB4; } .has-wporg-purple-background-color { background-color: #826EB4; } .has-wporg-white-color { color: #FFFFFF; } .has-wporg-white-background-color { background-color: #FFFFFF; } .is-style-wporg-parallelogram .wp-block-column { background: black; color: #fff; margin: 0; padding: 3rem 3rem; text-align: center; mix-blend-mode: multiply; } .is-style-wporg-parallelogram .wp-block-column:nth-of-type(2n+1) { background: #1E8CBE; } .is-style-wporg-parallelogram .wp-block-column:nth-of-type(2n) { background: #826EB4; } @media screen and (min-width: 768px) { .is-style-wporg-parallelogram .wp-block-column { transform: skew(-15deg); } .is-style-wporg-parallelogram .wp-block-column:first-child { position: relative; top: 40px; left: 30px; z-index: 2; padding-right: 90px; } .is-style-wporg-parallelogram .wp-block-column:last-child { position: relative; z-index: 1; right: 30px; padding-left: 90px; } .is-style-wporg-parallelogram .wp-block-column:before { font-size: ms(12); height: 64px; position: relative; right: 1rem; transform: skew(15deg); width: 64px; } .is-style-wporg-parallelogram .wp-block-column > * { transform: skew(15deg); } } @media screen and (min-width: 600px) and (max-width: 767px) { .is-style-wporg-parallelogram .wp-block-column { padding: 3rem 2rem; flex-basis: calc(50% + 0.5rem); } .is-style-wporg-parallelogram .wp-block-column:nth-of-type(n+2) { margin-left: -1rem; } } @media screen and (max-width: 599px) { .is-style-wporg-parallelogram .wp-block-column { padding: 2rem; } .is-style-wporg-parallelogram .wp-block-column:nth-of-type(n+2) { margin-top: -1rem; } } p.is-style-wporg-tldr { color: #606a74; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1rem; } @media screen and (min-width: 768px) { p.is-style-wporg-tldr { text-align: center; font-size: 1.25rem; } } .wp-block-pullquote.is-style-wporg-home-pullquote { padding: 0; margin-bottom: 0; font-family: Georgia, "Times New Roman", serif; border: none; } .wp-block-pullquote.is-style-wporg-home-pullquote blockquote { max-width: 100%; margin: 0; padding: 0; border: none; text-align: left; color: white; } @media screen and (min-width: 768px) { .wp-block-pullquote.is-style-wporg-home-pullquote { position: absolute; top: 14rem; left: -17.5rem; max-width: 16rem; } .wp-block-pullquote.is-style-wporg-home-pullquote blockquote { border-left: none; color: #606a74; } .wp-block-pullquote.is-style-wporg-home-pullquote p { font-size: 2.8rem; } .wp-block-pullquote.is-style-wporg-home-pullquote p:first-child { margin-top: 0; } } @media screen and (min-width: 768px) { .block-editor-block-list__block-edit .is-style-wporg-parallelogram .wp-block-column { transform: skew(0); } .block-editor-block-list__block-edit .is-style-wporg-parallelogram .wp-block-column:last-child { position: static; z-index: auto; top: auto; left: auto; right: auto; padding-left: 0; } .block-editor-block-list__block-edit .is-style-wporg-parallelogram .wp-block-column > * { transform: skew(0); } } .wp-block-pullquote.is-style-wporg-home-pullquote { position: relative; top: 0; left: 0; width: auto; max-width: 100%; }