:root { --color-accent: #E4BD86; --color-accent-secondary: #0F1F31; --color-heading: #181818; --color-1: #727272; --color-2: #ffffff; --container-width: 1170px } :root { --color-link: var(--color-accent-secondary); --color-link-hover: var(--color-accent); --color-link-visited: var(--color-1); --color-bg-1: var(--color-2); --color-bg-2: var(--color-accent-secondary); --color-bg-3: var(--color-accent); --color-btn: var(--color-2); --color-btn-hover: var(--color-accent); --color-btn-bg: var(--color-accent); --color-btn-bg-hover: var(--color-bg-1); } /* Basic Block Editor CSS */ .editor-styles-wrapper { background-color: var(--color-2); color: var(--color-1); font-size: 1rem; font-family: -apple-system, blinkmacsystemfont, "segoe ui", roboto, "oxygen-sans", ubuntu, cantarell, "helvetica neue", helvetica, arial, sans-serif; line-height: 1.8; word-wrap: break-word; } .editor-styles-wrapper > * { font-family: -apple-system, blinkmacsystemfont, "segoe ui", roboto, "oxygen-sans", ubuntu, cantarell, "helvetica neue", helvetica, arial, sans-serif; color: var(--color-1); } .editor-styles-wrapper .wp-block[data-align="wide"] { max-width: 1200px; } .editor-styles-wrapper .wp-block.editor-post-title__block .editor-post-title__input { margin: 0 0 0.5em; font-size: 2.25rem; word-wrap: break-word; line-height: 1.8; color: var(--color-heading); font-weight: normal; } .wp-block { max-width: 1160px; } /*============================================= = Heading Typography = =============================================*/ .editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6 { color: var(--color-heading); line-height: 1.3; font-weight: 500; margin: 0 0 20px; } .editor-styles-wrapper h1 { font-size: 2.5rem; } .editor-styles-wrapper h2 { font-size: 2.25rem; } .editor-styles-wrapper h3 { font-size: 1.75rem; } .editor-styles-wrapper h4 { font-size: 1.5rem; } .editor-styles-wrapper h5 { font-size: 1.313rem; } .editor-styles-wrapper h6 { font-size: 1.125rem; } /*============================================= = Base Typography = =============================================*/ .editor-styles-wrapper code { background-color: #f8f9fa; padding: 0.125em 0.25em; } .editor-styles-wrapper pre { background-color: #f8f9fa; padding: 20px; } .editor-styles-wrapper blockquote { padding: 1em; margin: 1.5em 1em 1.5em 2em; color: var(--color-accent); font-size: 25px; font-weight: 600; } .editor-styles-wrapper blockquote cite { text-transform: uppercase; } .editor-styles-wrapper blockquote.has-text-align-right { border: unset; border-left: 4px solid #e9ecef; } /*============================================= = Table = =============================================*/ .editor-styles-wrapper table { margin: 0 0 1.5em; width: 100%; } .editor-styles-wrapper table th, .editor-styles-wrapper table td { text-align: left; border: 1px solid var(--color-1); } .editor-styles-wrapper hr { background-color: #e9ecef; border: 0; height: 1px; margin-bottom: 1.5em; } /* Make sure embeds and iframes fit their containers */ .editor-styles-wrapper embed, .editor-styles-wrapper iframe, .editor-styles-wrapper object { max-width: 100%; } .editor-styles-wrapper button:not(.components-button):not([role=presentation]):not(.mce-open), .editor-styles-wrapper a.button, .editor-styles-wrapper .wp-block-button__link, .editor-styles-wrapper input[type="button"], .editor-styles-wrapper input[type="reset"], .editor-styles-wrapper input[type="submit"]{ border: 0 solid var(--color-btn-hover); background-color: var(--color-btn-bg); color: var(--color-btn); padding: 0.7rem 1rem; } .editor-styles-wrapper button:not(.components-button):not([role=presentation]):not(.mce-open), .editor-styles-wrapper input[type="button"]:hover, .editor-styles-wrapper input[type="reset"]:hover, .editor-styles-wrapper input[type="submit"]:hover { background-color: var(--color-btn-bg); } .is-style-outline > .wp-block-button__link, .wp-block-button__link.is-style-outline { border: 2px solid var(--color-btn-hover); } .is-style-outline > .wp-block-button__link:not(.has-text-color), .wp-block-button__link.is-style-outline:not(.has-text-color) { color: var(--color-btn-bg); } .editor-styles-wrapper input[type="text"], .editor-styles-wrapper input[type="email"], .editor-styles-wrapper input[type="url"], .editor-styles-wrapper input[type="password"], .editor-styles-wrapper input[type="search"], .editor-styles-wrapper input[type="number"], .editor-styles-wrapper input[type="tel"], .editor-styles-wrapper input[type="range"], .editor-styles-wrapper input[type="date"], .editor-styles-wrapper input[type="month"], .editor-styles-wrapper input[type="week"], .editor-styles-wrapper input[type="time"], .editor-styles-wrapper input[type="datetime"], .editor-styles-wrapper input[type="datetime-local"], .editor-styles-wrapper input[type="color"], .editor-styles-wrapper select, .editor-styles-wrapper textarea { color: var(--color-1); border: 1px solid var(--color-1); padding: 0.7rem 1rem; width: 100%; border-radius: 0; } .editor-styles-wrapper input[type="text"]:focus, .editor-styles-wrapper input[type="email"]:focus, .editor-styles-wrapper input[type="url"]:focus, .editor-styles-wrapper input[type="password"]:focus, .editor-styles-wrapper input[type="search"]:focus, .editor-styles-wrapper input[type="number"]:focus, .editor-styles-wrapper input[type="tel"]:focus, .editor-styles-wrapper input[type="range"]:focus, .editor-styles-wrapper input[type="date"]:focus, .editor-styles-wrapper input[type="month"]:focus, .editor-styles-wrapper input[type="week"]:focus, .editor-styles-wrapper input[type="time"]:focus, .editor-styles-wrapper input[type="datetime"]:focus, .editor-styles-wrapper input[type="datetime-local"]:focus, .editor-styles-wrapper input[type="color"]:focus, .editor-styles-wrapper select:focus, .editor-styles-wrapper textarea:focus { color: var(--color-1); } .editor-styles-wrapper input[type="search"] { -webkit-appearance: none; } .editor-styles-wrapper input[type="checkbox"], .editor-styles-wrapper input[type="radio"] { margin-right: 0.5rem; vertical-align: middle; display: inline-block; } .editor-styles-wrapper label { margin-bottom: 0.5rem; display: inline-block; } .editor-styles-wrapper select { border: 1px solid #dee2e6; padding: 0.5rem; } /*============================================= = Links = =============================================*/ .editor-styles-wrapper a, .editor-styles-wrapper .wp-block-file__textlink { color: var(--color-link); text-decoration: none; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .editor-styles-wrapper a:hover, .editor-styles-wrapper a:focus { color: var(--color-link-hover); } /*============================================= = Lists = =============================================*/ .editor-styles-wrapper ul, .editor-styles-wrapper ol { margin: 0 0 1.6rem 1.6rem; padding-left: 0; } .editor-styles-wrapper ul { list-style: square; } .editor-styles-wrapper ol { list-style: decimal; } .editor-styles-wrapper li > ul, .editor-styles-wrapper li > ol { margin-bottom: 0; margin-left: 1.6rem; } .editor-styles-wrapper dt { font-weight: 700; } .editor-styles-wrapper dd { margin: 0 1.6rem 1.6rem; } /*============================================= = Alignments = =============================================*/ .editor-styles-wrapper .alignleft { display: inline; float: left; margin-right: 1.5em; } .editor-styles-wrapper .alignright { display: inline; float: right; margin-left: 1.5em; } .editor-styles-wrapper .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } /*============================================= = Captions = =============================================*/ .editor-styles-wrapper .wp-caption { border: 1px solid #cccccc; margin-bottom: 1.5em; max-width: 100%; } .editor-styles-wrapper .wp-caption img[class*="wp-image-"], .editor-styles-wrapper .wp-caption img[class*="wp-image-"] dt { display: block; margin: 1.2% auto 0; max-width: 98%; } .editor-styles-wrapper .wp-caption .wp-caption-text, .editor-styles-wrapper .wp-caption .wp-caption .wp-caption-dd { margin: 0.8075em 0; } .editor-styles-wrapper .wp-caption-text, .editor-styles-wrapper .wp-caption .wp-caption-dd { text-align: center; } /*============================================= = Gallery = =============================================*/ .editor-styles-wrapper .gallery { margin: 0 auto 1.5em; } .editor-styles-wrapper .gallery-item { display: inline-block; padding: 15px 2%; text-align: center; vertical-align: top; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .editor-styles-wrapper .gallery-icon img { margin: 0 auto; } .editor-styles-wrapper .gallery .gallery-caption { font-size: 12px; line-height: 1.2; padding-top: 5px; } .editor-styles-wrapper .wp-block-gallery ol, .editor-styles-wrapper .wp-block-gallery li { margin-bottom: 1em; } .editor-styles-wrapper .wp-block .gallery-columns-2 .gallery-item { width: 50%; } .editor-styles-wrapper .wp-block .gallery-columns-3 .gallery-item { width: 33.33%; } .editor-styles-wrapper .wp-block .gallery-columns-4 .gallery-item { width: 25%; } .editor-styles-wrapper .wp-block .gallery-columns-5 .gallery-item { width: 20%; } .editor-styles-wrapper .wp-block .gallery-columns-6 .gallery-item { width: 16.66%; } .editor-styles-wrapper .wp-block .gallery-columns-7 .gallery-item { width: 14.28%; } .editor-styles-wrapper .wp-block .gallery-columns-8 .gallery-item { width: 12.5%; } .editor-styles-wrapper .wp-block .gallery-columns-9 .gallery-item { width: 11.11%; } .editor-styles-wrapper .wp-block .gallery-columns-3 .gallery-item { padding: 15px 1%; } .editor-styles-wrapper .wp-block .gallery-columns-4 .gallery-item { padding: 15px 1%; } .editor-styles-wrapper .wp-block .gallery-columns-5 .gallery-item { padding: 15px 1%; } .editor-styles-wrapper .wp-block .gallery-columns-6 .gallery-item { padding: 10px 0.5%; } .editor-styles-wrapper .wp-block .gallery-columns-7 .gallery-item { padding: 10px 0.5%; } .editor-styles-wrapper .wp-block .gallery-columns-8 .gallery-item { padding: 10px 0.5%; } .editor-styles-wrapper .wp-block .gallery-columns-9 .gallery-item { padding: 10px 0.5%; }