/* Theme Name: Radcliffe 2 Description: Used to style Gutenberg Blocks. */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 General Block Alignments 2.0 General Block Styles 3.0 Blocks - Common Blocks 4.0 Blocks - Formatting 5.0 Blocks - Layout Elements 6.0 Blocks - Widgets 7.0 Blocks - Colors 7.0 Blocks - Posts List --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 General Block Alignments --------------------------------------------------------------*/ #page { overflow-x: hidden; } .entry-content > *[class^="wp-block-"] { margin-bottom: 1.5em; } .alignfull, .alignwide, .aligncenter { clear: both; } /* Text-based blocks with alignfull */ .wp-block-text-columns.alignfull, .wp-block-columns.alignfull, .wp-block-preformatted.alignfull, .wp-block-button.alignfull, .wp-block-pullquote.alignfull, .wp-block-latest-posts.alignfull, .wp-block-categories.alignfull, .wp-block-latest-comments.alignfull, .wp-block-verse.alignfull, .wp-block-audio.alignfull, p.alignfull { margin-left: auto; margin-right: auto; } @media (min-width: 1160px) { .alignwide, .wp-block-group.alignfull .alignwide { margin-left: -25%; margin-right: -25%; width: auto; max-width: 1000%; } } @media (min-width: 750px) { .alignfull, .wp-block-group.alignfull .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: auto; max-width: 1000%; } /* Let's reduce this a bit for blocks with text */ .wp-block-text-columns.alignfull, .wp-block-columns.alignfull, .wp-block-table.alignfull, .wp-block-preformatted.alignfull, .wp-block-button.alignfull, .wp-block-pullquote.alignfull, .wp-block-latest-posts.alignfull, .wp-block-categories.alignfull, .wp-block-latest-comments.alignfull, .wp-block-verse.alignfull, .wp-block-audio.alignfull, p.alignfull { margin-left: calc(50% - 48vw); margin-right: calc(50% - 48vw); } .wp-block-embed.is-type-video.alignwide iframe, .wp-block-embed.is-type-video.alignfull iframe { width: 100% !important; height: 100% !important; } } /* Nested Blocks */ .alignfull > *, .alignwide > * { margin-left: auto; margin-right: auto; } *[class^="wp-block"] .alignwide, *[class^="wp-block"] .alignfull { max-width: 100%; margin-left: inherit; margin-right: inherit; } .alignfull img, .alignwide img, .alignfull iframe, .alignwide iframe, .alignfull video, .alignwide video { display: block; } .alignfull .jetpack-video-wrapper iframe, .alignwide .jetpack-video-wrapper iframe { margin-left: auto !important; /* to override inline styles */ margin-right: auto !important; } /* Video */ .wp-block-embed.is-type-video iframe { max-height: 100%; } /*-------------------------------------------------------------- 2.0 General Block Styles --------------------------------------------------------------*/ /* Caption */ [class^="wp-block-"] figcaption { font-size: 80%; } [class^="wp-block-"]:not(.wp-block-gallery) figcaption { opacity: 0.8; } /* Video */ .wp-block-embed.is-type-video iframe { max-height: 100%; } /*-------------------------------------------------------------- 3.0 Blocks - Common Blocks --------------------------------------------------------------*/ /* Paragraph */ p.has-drop-cap:not(:focus)::first-letter { font-size: 5em; margin-top: 0.15em; } /* Image */ .wp-block-image {} .wp-block-image figure { margin-top: 0; } .wp-block-image img { display: block; } .wp-block-image .alignleft { margin-right: 1.6em; } .wp-block-image .alignright { margin-left: 1.6em; } .wp-block-image.alignfull { width: 100vw; max-width: 100vw; margin: 2rem calc((100% - 100vw) * .5); } .wp-block-image figcaption { color: inherit; opacity: 0.8; } /* Gallery */ ul.wp-block-gallery, ul.wp-block-gallery li { padding: 0; } /* Quote */ .wp-block-quote cite { color: inherit; opacity: 0.8; } .wp-block-quote.is-large p, .wp-block-quote.is-style-large p { font-size: 28px; } .wp-block-quote.is-large cite, .wp-block-quote.is-style-large cite { font-size: 22px; } @media (min-width: 600px) { .wp-block-pullquote.alignleft, .wp-block-pullquote.alignright { max-width: 40%; } } /* Audio */ .wp-block-audio audio { display: block; min-width: 270px; width: 100%; } /* Cover */ .wp-block-cover-image.alignwide, .wp-block-cover.alignwide, .wp-block-cover-image.alignfull, .wp-block-cover.alignfull { height: 75vh; } .wp-block-cover.alignfull .wp-block-cover__inner-container { max-width: 740px; margin: 0 auto; } /* File */ .wp-block-file .wp-block-file__button { background: #222; border-radius: 3px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: 1.4rem; font-size: 14px; line-height: 1.29; padding: 9px 18px; } .style-pack-colorful .wp-block-file .wp-block-file__button, .style-pack-modern .wp-block-file .wp-block-file__button { font-family: inherit; } .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus { background: #ca2017; opacity: 1.0; } .rtl .wp-block-file * + .wp-block-file__button { margin-left: 0.75em; margin-right: 0; } /* Video */ .wp-block-video video, .wp-block-video iframe { max-width: 100%; } /*-------------------------------------------------------------- 4.0 Blocks - Formatting --------------------------------------------------------------*/ /* Verse */ .wp-block-verse { background-color: transparent; font-family: inherit; font-size: 1.1em; font-style: italic; line-height: 1.8; padding: 0; } /* Code */ .wp-block-code {} /* Preformatted */ .wp-block-preformatted {} /* Pullquotes */ .wp-block-pullquote { border-bottom: 2px solid #ddd; border-top: 3px solid #ddd; color: #666; margin-bottom: 0; } .wp-block-pullquote cite { color: inherit; opacity: 0.8; } .wp-block-pullquote blockquote::before, .wp-block-pullquote blockquote::after { display: none; } /* Social Links */ .wp-block-social-links[class*="align"] { display: flex; } /* Tables */ .wp-block-table td, .wp-block-table th { border: none; } .wp-block-table.alignwide, .wp-block-table.alignfull { width: 96vw; } .wp-block-table.alignwide { width: 100%; } @media (min-width: 1160px) { .wp-block-table.alignwide { width: 1110px; } } /*-------------------------------------------------------------- 5.0 Blocks - Layout Elements --------------------------------------------------------------*/ /* Buttons */ .wp-block-button .wp-block-button__link { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: 1.4rem; font-size: 14px; line-height: 1.29; padding: 9px 18px; } .wp-block-button__link { background: #222; color: #fff; } .is-style-outline .wp-block-button__link:not(.has-text-color) { color: #222; } .entry-content .wp-block-button .wp-block-button__link:hover, .entry-content .wp-block-button .wp-block-button__link:focus { background: #ca2017; color: #fff; text-decoration: none; } .wp-block-button.alignwide, .wp-block-button.alignfull, .wp-block-button.aligncenter { display: block; } /* Group */ .wp-block-group.alignfull .wp-block-group__inner-container { max-width: 740px; margin: 0 auto; } /* Separator */ .wp-block-separator { border: none; max-width: 100px; margin: 1.6em auto; } .wp-block-separator.is-style-wide { max-width: 100%; } /* Media & Text */ .wp-block-media-text .wp-block-media-text__content { margin: 0; } .wp-block-media-text *:last-child { margin-bottom: 0; } /*-------------------------------------------------------------- 6.0 Blocks - Widgets --------------------------------------------------------------*/ /* General Widget styles */ .wp-block-categories.aligncenter, .wp-block-categories.aligncenter ul, .wp-block-archives.aligncenter, .wp-block-latest-posts.aligncenter, .wp-block-latest-comments.aligncenter { list-style-position: inside; margin-left: 0; margin-right: 0; text-align: center; } .wp-block-archives, .wp-block-latest-comments, .wp-block-latest-posts, .wp-block-categories-list { list-style: none; padding: 0; } .wp-block-archives li, .wp-block-categories-list li { padding: 0.25em 0; } .wp-block-archives li:not(:last-child), .wp-block-categories-list li:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,0.075); } .wp-block-categories-list ul ul { padding-left: 2em; } .wp-block-categories-list ul ul li:last-child { padding-bottom: 0; } /* Latest Posts */ .wp-block-latest-posts__post-date { color: inherit; margin-bottom: 0; opacity: 0.8; } .wp-block-latest-posts, .wp-block-latest-posts li { list-style: none; } .wp-block-latest-posts li { padding: 0.25em 0; } .wp-block-latest-posts li:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,0.2); } .wp-block-latest-posts.is-grid li { border: 0; } /* Latest Comments */ .wp-block-latest-comments__comment, .wp-block-latest-comments__comment-date { font-size: inherit; } .wp-block-latest-comments__comment-meta { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: 80%; font-weight: bold; margin-bottom: 0; } .style-pack-colorful .wp-block-latest-comments__comment-meta, .style-pack-modern .wp-block-latest-comments__comment-meta { font-family: inherit; } .wp-block-latest-comments__comment-excerpt p { font-size: 90%; } .wp-block-latest-comments__comment-date { color: #707070; font-size: 80%; } /*-------------------------------------------------------------- 7.0 Blocks - Colors --------------------------------------------------------------*/ /* Default */ .has-white-color, .has-white-color:hover, .has-white-color:active, .has-white-color:focus, .has-white-color:visited { color: #fff; } .has-white-background-color, .has-white-background-color:hover, .has-white-background-color:active, .has-white-background-color:focus, .has-white-background-color:visited { background-color: #fff } .has-dark-gray-color, .has-dark-gray-color:hover, .has-dark-gray-color:active, .has-dark-gray-color:focus, .has-dark-gray-color:visited { color: #222; } .has-dark-gray-background-color, .has-dark-gray-background-color:hover, .has-dark-gray-background-color:active, .has-dark-gray-background-color:focus, .has-dark-gray-background-color:visited { background-color: #222; } .has-light-gray-color, .has-light-gray-color:hover, .has-light-gray-color:active, .has-light-gray-color:focus, .has-light-gray-color:visited { color: #666; } .has-light-gray-background-color, .has-light-gray-background-color:hover, .has-light-gray-background-color:active, .has-light-gray-background-color:focus, .has-light-gray-background-color:visited { background-color: #666; } .has-red-color, .has-red-color:hover, .has-red-color:active, .has-red-color:focus, .has-red-color:visited { color: #ca2017; } .has-red-background-color, .has-red-background-color:hover, .has-red-background-color:active, .has-red-background-color:focus, .has-red-background-color:visited { background-color: #ca2017; } /* Modern */ .has-modern-white-color, .has-modern-white-color:hover, .has-modern-white-color:active, .has-modern-white-color:focus, .has-modern-white-color:visited { color: #fff; } .has-modern-white-background-color, .has-modern-white-background-color:hover, .has-modern-white-background-color:active, .has-modern-white-background-color:focus, .has-modern-white-background-color:visited { background-color: #fff } .has-modern-light-gray-color, .has-modern-light-gray-color:hover, .has-modern-light-gray-color:active, .has-modern-light-gray-color:focus, .has-modern-light-gray-color:visited { color: #f1f1f1; } .has-modern-light-gray-background-color, .has-modern-light-gray-background-color:hover, .has-modern-light-gray-background-color:active, .has-modern-light-gray-background-color:focus, .has-modern-light-gray-background-color:visited { background-color: #f1f1f1 } .has-modern-medium-gray-color, .has-modern-medium-gray-color:hover, .has-modern-medium-gray-color:active, .has-modern-medium-gray-color:focus, .has-modern-medium-gray-color:visited { color: #aaa; } .has-modern-medium-gray-background-color, .has-modern-medium-gray-background-color:hover, .has-modern-medium-gray-background-color:active, .has-modern-medium-gray-background-color:focus, .has-modern-medium-gray-background-color:visited { background-color: #aaa } .has-modern-dark-gray-color, .has-modern-dark-gray-color:hover, .has-modern-dark-gray-color:active, .has-modern-dark-gray-color:focus, .has-modern-dark-gray-color:visited { color: #222; } .has-modern-dark-gray-background-color, .has-modern-dark-gray-background-color:hover, .has-modern-dark-gray-background-color:active, .has-modern-dark-gray-background-color:focus, .has-modern-dark-gray-background-color:visited { background-color: #222 } /* Colorful */ .has-colorful-white-color, .has-colorful-white-color:hover, .has-colorful-white-color:active, .has-colorful-white-color:focus, .has-colorful-white-color:visited { color: #fff; } .has-colorful-white-background-color, .has-colorful-white-background-color:hover, .has-colorful-white-background-color:active, .has-colorful-white-background-color:focus, .has-colorful-white-background-color:visited { background-color: #fff } .has-colorful-light-gray-color, .has-colorful-light-gray-color:hover, .has-colorful-light-gray-color:active, .has-colorful-light-gray-color:focus, .has-colorful-light-gray-color:visited { color: #e5e5e5; } .has-colorful-light-gray-background-color, .has-colorful-light-gray-background-color:hover, .has-colorful-light-gray-background-color:active, .has-colorful-light-gray-background-color:focus, .has-colorful-light-gray-background-color:visited { background-color: #e5e5e5 } .has-colorful-dark-gray-color, .has-colorful-dark-gray-color:hover, .has-colorful-dark-gray-color:active, .has-colorful-dark-gray-color:focus, .has-colorful-dark-gray-color:visited { color: #222; } .has-colorful-dark-gray-background-color, .has-colorful-dark-gray-background-color:hover, .has-colorful-dark-gray-background-color:active, .has-colorful-dark-gray-background-color:focus, .has-colorful-dark-gray-background-color:visited { background-color: #222 } .has-colorful-blue-color, .has-colorful-blue-color:hover, .has-colorful-blue-color:active, .has-colorful-blue-color:focus, .has-colorful-blue-color:visited { color: #4ba3c3; } .has-colorful-blue-background-color, .has-colorful-blue-background-color:hover, .has-colorful-blue-background-color:active, .has-colorful-blue-background-color:focus, .has-colorful-blue-background-color:visited { background-color: #4ba3c3 } .has-colorful-green-color, .has-colorful-green-color:hover, .has-colorful-green-color:active, .has-colorful-green-color:focus, .has-colorful-green-color:visited { color: #71db9d; } .has-colorful-green-background-color, .has-colorful-green-background-color:hover, .has-colorful-green-background-color:active, .has-colorful-green-background-color:focus, .has-colorful-green-background-color:visited { background-color: #71db9d } .has-colorful-orange-color, .has-colorful-orange-color:hover, .has-colorful-orange-color:active, .has-colorful-orange-color:focus, .has-colorful-orange-color:visited { color: #d97059; } .has-colorful-orange-background-color, .has-colorful-orange-background-color:hover, .has-colorful-orange-background-color:active, .has-colorful-orange-background-color:focus, .has-colorful-orange-background-color:visited { background-color: #d97059 } /* Vintage */ .has-vintage-off-white-color, .has-vintage-off-white-color:hover, .has-vintage-off-white-color:active, .has-vintage-off-white-color:focus, .has-vintage-off-white-color:visited { color: #fff; } .has-vintage-off-white-background-color, .has-vintage-off-white-background-color:hover, .has-vintage-off-white-background-color:active, .has-vintage-off-white-background-color:focus, .has-vintage-off-white-background-color:visited { background-color: #fff; } .has-vintage-light-brown-color, .has-vintage-light-brown-color:hover, .has-vintage-light-brown-color:active, .has-vintage-light-brown-color:focus, .has-vintage-light-brown-color:visited { color: #c7c4b4; } .has-vintage-light-brown-background-color, .has-vintage-light-brown-background-color:hover, .has-vintage-light-brown-background-color:active, .has-vintage-light-brown-background-color:focus, .has-vintage-light-brown-background-color:visited { background-color: #c7c4b4; } .has-vintage-light-gray-color, .has-vintage-light-gray-color:hover, .has-vintage-light-gray-color:active, .has-vintage-light-gray-color:focus, .has-vintage-light-gray-color:visited { color: #666; } .has-vintage-light-gray-background-color, .has-vintage-light-gray-background-color:hover, .has-vintage-light-gray-background-color:active, .has-vintage-light-gray-background-color:focus, .has-vintage-light-gray-background-color:visited { background-color: #666; } .has-vintage-dark-gray-color, .has-vintage-dark-gray-color:hover, .has-vintage-dark-gray-color:active, .has-vintage-dark-gray-color:focus, .has-vintage-dark-gray-color:visited { color: #222; } .has-vintage-dark-gray-background-color, .has-vintage-dark-gray-background-color:hover, .has-vintage-dark-gray-background-color:active, .has-vintage-dark-gray-background-color:focus, .has-vintage-dark-gray-background-color:visited { background-color: #222; } .has-vintage-blue-color, .has-vintage-blue-color:hover, .has-vintage-blue-color:active, .has-vintage-blue-color:focus, .has-vintage-blue-color:visited { color: #2b6e9d; } .has-vintage-blue-background-color, .has-vintage-blue-background-color:hover, .has-vintage-blue-background-color:active, .has-vintage-blue-background-color:focus, .has-vintage-blue-background-color:visited { background-color: #2b6e9d; } /*-------------------------------------------------------------- 8.0 Blocks - Posts List Block --------------------------------------------------------------*/ .a8c-posts-list { text-align: center; } .a8c-posts-list-item__post-thumbnail { margin: 0 0 36px; } .a8c-posts-list-item__post-thumbnail img { display: block; } .a8c-posts-list-item__featured, .a8c-posts-list-item__meta { color: #666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: 12px; font-size: 1.2rem; font-weight: 600; letter-spacing: 1px; line-height: 1.5; margin-top: 18px; text-decoration: none; text-transform: uppercase; } .a8c-posts-list-item__title { font-family: Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Times,"Times New Roman",serif; font-size: 36px; font-size: 3.6rem; font-weight: 600; line-height: 1.25; margin: 0 auto; max-width: 100%; word-wrap: break-word; width: 1040px; } .a8c-posts-list-item__title a { color: #222; } .a8c-posts-list-item__meta { margin-bottom: 36px; } .a8c-posts-list-item__meta a { color: #666; } .a8c-posts-list-item__title a:hover, .a8c-posts-list-item__meta a:hover { color: #ca2017; text-decoration: none; } .a8c-posts-list-item__edit-link:before { content: "/"; color: rgba(0,0,0,0.15); margin: 0 0.5em; } .a8c-posts-list-item__excerpt { text-align: left; } .a8c-posts-list .a8c-posts-list__view-all { background: #222; border-radius: 3px; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: 14px; font-size: 1.4rem; line-height: 1.29; margin: 0; padding: 9px 18px; } .a8c-posts-list .a8c-posts-list__view-all:hover { background: #ca2017; color: #fff; cursor: pointer; text-decoration: none; } @media all and (min-width: 600px) { .a8c-posts-list-item__featured, .a8c-posts-list-item__meta { font-size: 16px; font-size: 1.6rem; line-height: 1.125; } .a8c-posts-list-item__title { font-size: 50px; font-size: 5rem; line-height: 1.44; } } @media screen and (min-width: 768px) { .a8c-posts-list-item__title { font-size: 60px; font-size: 6rem; line-height: 1.2; } .a8c-posts-list-item__post-thumbnail, .a8c-posts-list-item__meta { margin-bottom: 72px; } }