/** * Front-end block styles for this theme * @package Alurra * @since 1.0.0 */ /* Colours */ .has-black-background-color { background: #000; } .has-dark-grey-background-color { background: #222; } .has-light-grey-background-color { background: #f1f1f1; } .has-brown-background-color { background: #b38a2d; } .has-green-background-color { background: #a9b87b; } .has-light-green-background-color { background: #e2e2d1; } .has-white-background-color { background: #fff; } .has-black-color, .has-black-color .has-inline-color { color: #000; } .has-dark-grey-color, .has-dark-grey-color .has-inline-color { color: #222; } .has-light-grey-color, .has-light-grey-color .has-inline-color { color: #f1f1f1; } .has-brown-color, .has-brown-color .has-inline-color { color: #b38a2d; } .has-green-color, .has-green-color .has-inline-color { color: #a9b87b; } .has-light-green-color, .has-light-green-color .has-inline-color { color: #e2e2d1; } .has-white-color, .has-white-color .has-inline-color { color: #fff; } /* Typography */ .has-drop-cap:not(:focus):first-letter, .has-drop-cap:first-letter { color: #222; float: left; font-family: "Times New Roman", serif; font-size: 7rem; line-height: .68; font-weight: 700; margin: 0.5rem .688rem 0 0; text-transform: uppercase; font-style: normal; } .has-drop-cap:after { content: ""; display: table; clear: both; padding-top: 14px } /* Block Text Sizes */ .has-extra-small-font-size { font-size: 14px; font-size: 0.875rem; } .has-small-font-size { font-size: 16px; font-size: 1rem; } .has-normal-font-size { font-size: 18px; font-size: 1.125rem; } .has-large-font-size { font-size: 24px; font-size: 1.5rem; } .has-extra-large-font-size { font-size: 34px; font-size: 2.125rem; } .has-huge-font-size { font-size: 48px; font-size: 3rem; } .has-gigantic-font-size { font-size: 60px; font-size: 3.75rem; } /* Images and Media */ .wp-block-image figcaption { color: var(--rp-secondary-text-colour); font-size: 0.813rem; font-style: italic; line-height: 1.6; padding: 1rem 0 0; } /* Block Gallery */ .columns-5 figcaption, .columns-6 figcaption, .columns-7 figcaption, .columns-8 figcaption, .columns-9 figcaption { display: none; } /* Alignments */ .wp-block-image .alignright, .wp-block-image .alignleft { margin: 0.875rem auto 1rem 0; } .wp-block-image .aligncenter { margin-right: auto; margin-left: auto; } .alignfull, .alignwide, .wp-block-gallery, .wp-block-image .aligncenter, .wp-block-quote, .wp-block-media-text, .wp-block-cover, .wp-block-cover-image, .wp-block-cover.alignwide, .wp-block-cover.alignfull, .wp-block-table { margin: 3rem auto; } .template-full .alignfull { margin-left: calc(-100vw / 2 + 100% / 2); margin-right: calc(-100vw / 2 + 100% / 2); max-width: 100vw; } .template-full .alignfull, .template-full .alignwide { position: relative; } .template-full .alignfull { width: 100vw; left: calc(-50vw + 50%); margin-left: 0px; margin-right: 0px; } /* Block: Separators */ .wp-block-separator { margin: 3rem auto; margin: calc(2rem + 1vw) auto; max-width: 50%; } .wp-block-separator.is-style-wide { max-width: 100%; } .wp-block-separator.is-style-dots { background: none; border: none; text-align: center; max-width: none; line-height: 1; height: auto; } .wp-block-separator.is-style-dots:before { color: inherit; content: "\00b7 \00b7 \00b7"; font-size: 2rem; letter-spacing: 2rem; padding-left: 2rem; } /* Buttons */ .wp-block-button { margin-bottom: 1rem; } .wp-block-button__link { border: none; border-radius: 0; cursor: pointer; padding: 1rem 2rem; font-family: var(--rp-font-sans); font-size: 0.75rem; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.125rem; } .is-style-outline>.wp-block-button__link, .wp-block-button__link.is-style-outline { border: 1px solid; padding: 0.938rem 2rem; } .wp-block-button__link.is-style-outline { border: 1px solid var(--rp-button-hover-bg-colour); background: transparent; border: 1px solid; } .wp-block-button__link:focus, .wp-block-button__link:hover, .is-style-outline>.wp-block-button__link:focus, .is-style-outline>.wp-block-button__link:hover, .wp-block-button__link.is-style-outline:focus, .wp-block-button__link.is-style-outline:hover { border: 1px solid var(--rp-button-hover-bg-colour); background-color: var(--rp-button-hover-bg-colour); color: var(--rp-button-text-hover-colour); } .wp-block-button__link:focus, .wp-block-button__link:hover { border: none; } /* Block Quotes and Pull Quotes*/ .wp-block-quote { padding-left: 1.375rem; } .wp-block-quote p, .wp-block-pullquote.alignleft p, .wp-block-pullquote.alignright p, .wp-block-pullquote.is-style-solid-color blockquote p { color: #000; font-style: italic; font-size: 106.3%; margin-bottom: 0.25rem; } .wp-block-pullquote.is-style-solid-color blockquote p { color: inherit; } .wp-block-pullquote.alignright { text-align: right; } .wp-block-pullquote.alignleft { text-align: left; } .wp-block-pullquote blockquote { margin-bottom: 0; } .wp-block-pullquote { border-width: 2px; padding: 2rem 0; } .wp-block-quote cite, .wp-block-pullquote cite, .wp-block-quote footer { color: var(--rp-secondary-text-colour); font-size: 0.813rem; } .wp-block-pullquote__citation, .wp-block-quote cite, .wp-block-pullquote cite, .wp-block-quote footer, .wp-block-pullquote footer, .wp-block-pullquote.is-style-solid-color blockquote cite { font-style: italic; text-transform: capitalize; } .wp-block-quote cite:before, .wp-block-pullquote cite:before { content: "\2014"; } .wp-block-pullquote.is-style-solid-color blockquote cite { color: inherit; opacity: 0.8; } .wp-block-quote, .wp-block-pullquote { border-color: #b38a2d; } .wp-block-pullquote.is-style-solid-color blockquote { max-width: 80%; } .wp-block-pullquote blockquote { border: none; } /* Media Text */ .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { grid-column: 1; grid-row: 2; } .wp-block-media-text .wp-block-media-text__content { padding: 8%; } .wp-block-media-text { grid-template-columns: auto; grid-template-rows: auto; } .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr; } .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { grid-column: 1; grid-row: 1 /*!rtl:end:ignore*/; } .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { grid-column: 1; grid-row: 2; } .wp-block-media-text__content h1, .wp-block-media-text__content h2, .wp-block-media-text__content h3, .wp-block-media-text__content h4, .wp-block-media-text__content h5, .wp-block-media-text__content h6 { margin-top: 0; } .wp-block-media-text p:last-child { margin-bottom: 0; } /* Cover Block */ .wp-block-cover, .wp-block-cover-image { padding: 3rem; } .wp-block-cover p:last-child { margin-bottom: 0; } .alignwide .wp-block-cover__inner-container, .alignfull .wp-block-cover__inner-container { max-width: 95%; } .wp-block-cover__inner-container a { color: inherit; } /* Block Widgets */ .wp-block-latest-posts li, .wp-block-latest-comments li { margin-bottom: 1.5rem; } /* Block Calendar */ .wp-block-calendar table th { background: #f1f1f1; } .wp-block-calendar caption { background: #f1f1f1; padding: 0.5rem 1rem; font-size: 0.75rem; } /* Block Cloud */ .wp-block-tag-cloud a { display: inline-block; padding: 0.1875em 0.875em; border: 1px solid rgba(0,0,0,0.11); color: var(--secondary-text-color); margin-right: 4px; margin-bottom: 4px; border-radius: 3px; font-size: 0.875rem !important; font-style: italic; } /* Block Comments */ .wp-block-latest-comments__comment-meta a { font-style: italic; } .wp-block-latest-comments .avatar, .wp-block-latest-comments__comment-avatar { border-radius: 50%; } .wp-block-latest-comments__comment-date { font-size: 0.875rem; font-style: italic; color: #a7a7a7; } .wp-block-latest-comments__comment-excerpt { margin-top: 0.875rem; } /* Block Recent Posts */ .wp-block-latest-posts__featured-image.alignleft { margin-right: 1.5rem; } .wp-block-latest-posts__featured-image.alignright { margin-left: 1.5rem; } .wp-block-latest-posts__featured-image { flex: 0 0 70px; max-width: 70px; margin-right: 1.5em; } .wp-block-latest-posts__featured-image img { border-radius: 50%; } .wp-block-latest-posts__list >* { line-height: 1.7; } .wp-block-latest-posts__post-author, .wp-block-latest-posts__post-date { color: #a7a7a7; display: inline-block; font-style: italic; } .wp-block-latest-posts__post-author { margin-right: 0.5rem; } .wp-block-latest-posts__post-excerpt { font-size: 0.875rem; margin-left: 5.875rem; } /* Entry content widget lists */ .entry-content ul.wp-block-categories, .entry-content ul.wp-block-archives, .entry-content ul.wp-block-page-list, .entry-content ul.wp-block-latest-posts { list-style: disc; margin: 1.5rem 3rem; padding: 0; } ul.wp-block-latest-posts li { margin: 0.375rem; } /* Tables */ .wp-block-table thead { border-bottom: 2px solid; background: #e2e2d1; } /* Style - Stripes */ table.is-style-stripes * { border: none; } table.is-style-stripes tr:nth-child(odd) { background: #F1F1F3; } /* Social Block */ ul.is-style-pill-shape li > a { width: 5rem; text-align: center; } /* Forms */ .wp-block-search .wp-block-search__input { border-color: #ccc; } /* Medium devices (tablets, 768px and up) */ @media screen and (min-width: 768px) { } /* Large devices (desktops, 992px and up) */ @media screen and (min-width: 992px) { /* Media Text */ .wp-block-media-text { grid-template-columns: 50% 1fr; grid-template-rows: auto; } .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { grid-column: 2; grid-row: 1; } .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content { grid-column: 1; grid-row: 1; } .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 50%; } .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { grid-column: 2; grid-row: 1 /*!rtl:end:ignore*/; } .wp-block-image .alignleft { margin: 0.875rem 4rem 1rem 0; } .wp-block-image .alignright { margin: 0.875rem 0 1rem 4rem; } } /* Larger devices (Desktop, 1200px and up */ @media (min-width: 1200px) { .wp-block-cover-image .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover__inner-container { max-width: 80%; } .alignwide .wp-block-cover__inner-container { max-width: 70%; } .alignfull .wp-block-cover__inner-container { max-width: 50%; } } /* Larger devices (Desktop, 1400px and up */ @media (min-width: 1400px) { .template-full .alignwide { margin: 3rem -160px; width: 100vw; max-width: 1320px; } }