/*! Theme Name: EpicAgain Theme URI: https://them.es/starter Author: Gary of Epic Again Author URI: https://epicagain.com Description: It's Epic...Again! Version: 3.7.0 Requires at least: 5.0 Tested up to: 7.0 Requires PHP: 7.2 License: GPL version 2 or later License URI: https://www.gnu.org/licenses/gpl-2.0 Tags: custom-background, custom-colors, featured-images, flexible-header, microformats, post-formats, rtl-language-support, theme-options, translation-ready, accessibility-ready Text Domain: epicagain */ /* Don't overwrite this file. Compile "/assets/main.scss" to "/build/main.css" */ /* From http://codex.wordpress.org/CSS */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float: right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } .gallery-item { display: inline-block; text-align: left; vertical-align: top; width: 50%; } .gallery-item a, .gallery-item a:hover, .gallery-item a:focus { -webkit-box-shadow: none; box-shadow: none; background: none; display: inline-block; max-width: 100%; } .gallery-item a img { display: block; -webkit-transition: -webkit-filter 0.2s ease-in; transition: -webkit-filter 0.2s ease-in; transition: filter 0.2s ease-in; transition: filter 0.2s ease-in, -webkit-filter 0.2s ease-in; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .gallery-item a:hover img, .gallery-item a:focus img { -webkit-filter: opacity(60%); filter: opacity(60%); } .gallery-caption { display: block; text-align: left; padding: 0 10px 0 0; margin-bottom: 0; } .gallery-columns-1 .gallery-item { max-width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; } .bypostauthor { font-weight: bold; } /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /*! * EPIC AGAIN — MASTER DESIGN SYSTEM * Version: 1.0.0 | 2026-09-20 * Target: Bootstrap 5.3.x + WordPress frontend * LOAD ORDER: Bootstrap CSS -> theme CSS -> this stylesheet. * SCOPE: Add class="ea-site" to (e.g. via WordPress body_class()). * All proprietary components use ea- prefix. Use Bootstrap grid/utilities alongside them. * Asset/content specifics are HTML data, not extra CSS: e.g. style="--ea-hero-image:url('...')". * Interactive behavior (menus, modals, sliders, consent, forms) requires Bootstrap JS or other JS. * Color contrast assumes specified foreground/background pairs, not arbitrary combinations. * DO NOT EDIT FOR EVERY PAGE: compose documented classes and existing tokens instead. * ----------------------------------------------------------------------------- * Index * 01 Design tokens & Bootstrap bridge 02 Base, links & accessibility * 03 Layout, surfaces & sections 04 Typography & editorial utilities * 05 Header, navbar & footer 06 Buttons, badges & icon treatments * 07 Heroes & image overlays 08 Cards & responsive collections * 09 Callouts, announcements, banners 10 Guide & download experiences * 11 Article, tutorial & WordPress content 12 Video, audio, podcast & events * 13 Forms, CTA & newsletter 14 Advertising slots & promo overlays * 15 Bootstrap component skin 16 Responsive, reduced motion & print */ /* 01. DESIGN TOKENS -------------------------------------------------------- */ :root { /* Bright Adventure: energetic surfaces; dark inks keep small text readable. */ --ea-blue: #3659e8; --ea-blue-deep: #263f91; --ea-yellow: #ffda43; --ea-pink: #ff6581; --ea-sky: #5bc5f2; --ea-mint: #55d6ac; --ea-purple: #a88aff; --ea-canvas: #fff9e9; --ea-paper: #ffffff; --ea-ink: #23345c; --ea-muted: #536078; --ea-border: #dce2ed; --ea-surface-muted: #f5f7ff; --ea-lavender: #f0eaff; --ea-mint-pale: #e2f9ee; --ea-sky-pale: #e4f5ff; --ea-pink-pale: #ffe5e3; --ea-yellow-pale: #fff1b9; /* Legacy/category palette: preserve recognizable editorial identity. */ --ea-hobby: #762b3f; --ea-sci-fi: #2f3b78; --ea-creative: #7a3167; --ea-fiction: #4f376f; --ea-podcast: #71501f; --ea-mint-ink: #176b53; --ea-gold-highlight: #d4a55c; /* Semantic use. Success/error are status, NOT marketing colors. */ --ea-primary: var(--ea-blue-deep); --ea-primary-hover: #1c3077; --ea-primary-pressed: #16265f; --ea-link: var(--ea-blue-deep); --ea-link-hover: #172c76; --ea-success: #176b53; --ea-danger: #a62540; --ea-warning: #755000; --ea-info: var(--ea-sci-fi); --ea-focus: #ff9c29; --ea-selection: #fff0a6; /* Font files are optional. System fallbacks work without external requests. */ --ea-font-display: "Fredoka", "Trebuchet MS", ui-rounded, system-ui, sans-serif; --ea-font-body: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --ea-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; --ea-text-xs: .8125rem; --ea-text-sm: .9375rem; --ea-text-base: 1.0625rem; --ea-text-lg: 1.25rem; --ea-text-xl: 1.5rem; --ea-body-leading: 1.65; --ea-heading-leading: 1.12; --ea-space-1: .25rem; --ea-space-2: .5rem; --ea-space-3: .75rem; --ea-space-4: 1rem; --ea-space-5: 1.5rem; --ea-space-6: 2rem; --ea-space-7: 3rem; --ea-space-8: 4rem; --ea-space-9: 5.5rem; --ea-section-space: clamp(3.25rem, 7vw, 6rem); --ea-container: 76rem; --ea-container-wide: 88rem; --ea-reading-width: 44rem; --ea-gutter: clamp(1rem, 4vw, 2rem); --ea-radius-xs: .375rem; --ea-radius-sm: .625rem; --ea-radius: 1rem; --ea-radius-lg: 1.5rem; --ea-radius-xl: 2rem; --ea-radius-pill: 100rem; --ea-shadow-sm: 0 .25rem 1rem rgb(35 52 92 / 7%); --ea-shadow: 0 .75rem 2.5rem rgb(35 52 92 / 11%); --ea-shadow-lg: 0 1.25rem 4rem rgb(35 52 92 / 18%); --ea-transition: 180ms ease; --ea-transition-long: 300ms ease; --ea-layer-sticky: 1010; --ea-layer-float: 1020; } /* Site scope: avoid modifying admin screens and third-party widgets elsewhere. */ body.ea-site { --bs-body-bg: var(--ea-canvas); --bs-body-bg-rgb: 255, 249, 233; --bs-body-color: var(--ea-ink); --bs-body-color-rgb: 35, 52, 92; --bs-emphasis-color: var(--ea-ink); --bs-secondary-color: var(--ea-muted); --bs-secondary-color-rgb: 83, 96, 120; --bs-border-color: var(--ea-border); --bs-primary: var(--ea-blue-deep); --bs-primary-rgb: 38, 63, 145; --bs-primary-text-emphasis: var(--ea-blue-deep); --bs-primary-bg-subtle: var(--ea-sky-pale); --bs-primary-border-subtle: #a9b8ff; --bs-font-sans-serif: var(--ea-font-body); --bs-font-monospace: var(--ea-font-mono); --bs-link-color: var(--ea-link); --bs-link-hover-color: var(--ea-link-hover); --bs-border-radius: var(--ea-radius-sm); margin: 0; background: var(--ea-canvas); color: var(--ea-ink); font: 400 var(--ea-text-base)/var(--ea-body-leading) var(--ea-font-body); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; } /* 02. BASE AND ACCESSIBILITY ----------------------------------------------- */ .ea-site *, .ea-site *::before, .ea-site *::after { box-sizing: border-box; } .ea-site ::selection { background: var(--ea-selection); color: var(--ea-ink); } .ea-site img, .ea-site svg, .ea-site video { max-width: 100%; } .ea-site img { height: auto; vertical-align: middle; } .ea-site iframe { max-width: 100%; border: 0; } .ea-site :where(a) { color: var(--ea-link); text-decoration-thickness: .085em; text-underline-offset: .19em; } .ea-site :where(a:hover) { color: var(--ea-link-hover); } .ea-site :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--ea-focus); outline-offset: 3px; } .ea-site :where(button, input, select, textarea) { font: inherit; } .ea-site :where(button, .btn, summary) { touch-action: manipulation; } .ea-site :where([hidden]) { display: none !important; } .ea-site :where([id]) { scroll-margin-top: 6rem; } .ea-site .ea-skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 1100; padding: .75rem 1rem; background: var(--ea-yellow); color: var(--ea-ink); border-radius: var(--ea-radius-sm); transform: translateY(-160%); } .ea-site .ea-skip-link:focus { transform: translateY(0); } .ea-site .ea-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .ea-site .ea-no-scroll { overflow: hidden; } /* 03. LAYOUT, SURFACES AND SECTIONS ---------------------------------------- */ .ea-site .ea-container { width: min(100% - 2 * var(--ea-gutter), var(--ea-container)); margin-inline: auto; } .ea-site .ea-container--wide { --ea-container: var(--ea-container-wide); } .ea-site .ea-container--reading { --ea-container: var(--ea-reading-width); } .ea-site .ea-section { padding-block: var(--ea-section-space); position: relative; } .ea-site .ea-section--compact { padding-block: clamp(2rem, 4vw, 3.25rem); } .ea-site .ea-section--flush { padding-block: 0; } .ea-site .ea-section--canvas, .ea-site .ea-bg-canvas { background: var(--ea-canvas); color: var(--ea-ink); } .ea-site .ea-section--white, .ea-site .ea-bg-white { background: var(--ea-paper); color: var(--ea-ink); } .ea-site .ea-section--sunshine, .ea-site .ea-bg-sunshine { background: var(--ea-yellow); color: var(--ea-ink); } .ea-site .ea-section--mint, .ea-site .ea-bg-mint { background: var(--ea-mint-pale); color: var(--ea-ink); } .ea-site .ea-section--lavender, .ea-site .ea-bg-lavender { background: var(--ea-lavender); color: var(--ea-ink); } .ea-site .ea-section--sky, .ea-site .ea-bg-sky { background: var(--ea-sky-pale); color: var(--ea-ink); } .ea-site .ea-section--blush, .ea-site .ea-bg-blush { background: var(--ea-pink-pale); color: var(--ea-ink); } .ea-site .ea-section--ink, .ea-site .ea-bg-ink { background: var(--ea-ink); color: #fff; } .ea-site .ea-section--blue, .ea-site .ea-bg-blue { background: var(--ea-blue-deep); color: #fff; } .ea-site .ea-section--ink :where(h1,h2,h3,h4,h5,h6,p,a), .ea-site .ea-section--blue :where(h1,h2,h3,h4,h5,h6,p,a) { color: inherit; } .ea-site .ea-section__head { max-width: 48rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); } .ea-site .ea-section__head--center { margin-inline: auto; text-align: center; } .ea-site .ea-section__head > :last-child { margin-bottom: 0; } .ea-site .ea-section__foot { margin-top: var(--ea-space-7); text-align: center; } .ea-site .ea-stack > * + * { margin-block-start: var(--ea-space-5); } .ea-site .ea-stack--tight > * + * { margin-block-start: var(--ea-space-3); } .ea-site .ea-stack--roomy > * + * { margin-block-start: var(--ea-space-7); } .ea-site .ea-cluster { display: flex; flex-wrap: wrap; gap: var(--ea-space-3); align-items: center; } .ea-site .ea-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--ea-space-5); } .ea-site .ea-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } .ea-site .ea-grid--tight { gap: var(--ea-space-3); } .ea-site .ea-surface { background: var(--ea-paper); color: var(--ea-ink); border: 1px solid var(--ea-border); border-radius: var(--ea-radius-lg); } .ea-site .ea-surface--raised { box-shadow: var(--ea-shadow); } .ea-site .ea-surface--soft { background: var(--ea-surface-muted); } .ea-site .ea-divider { height: 1px; width: 100%; border: 0; margin-block: var(--ea-space-6); background: var(--ea-border); opacity: 1; } .ea-site .ea-ribbon { display: flex; width: 100%; height: .75rem; } .ea-site .ea-ribbon > * { flex: 1; background: var(--ea-blue); } .ea-site .ea-ribbon > :nth-child(2) { background: var(--ea-yellow); } .ea-site .ea-ribbon > :nth-child(3) { background: var(--ea-pink); } .ea-site .ea-ribbon > :nth-child(4) { background: var(--ea-sky); } .ea-site .ea-ribbon > :nth-child(5) { background: var(--ea-mint); } .ea-site .ea-ribbon > :nth-child(6) { background: var(--ea-purple); } .ea-site .ea-accent-line { display: block; width: 4rem; height: .4rem; border-radius: var(--ea-radius-pill); background: var(--ea-yellow); } .ea-site .ea-align-center { text-align: center; } .ea-site .ea-max-reading { max-width: var(--ea-reading-width); } .ea-site .ea-max-intro { max-width: 54rem; } .ea-site .ea-overflow-clip { overflow: clip; } /* 04. TYPOGRAPHY AND EDITORIAL UTILITIES ----------------------------------- */ .ea-site :where(h1,h2,h3,h4,h5,h6), .ea-site .ea-display, .ea-site .ea-heading { font-family: var(--ea-font-display); line-height: var(--ea-heading-leading); color: var(--ea-ink); font-weight: 700; letter-spacing: -.018em; overflow-wrap: normal; text-wrap: balance; } .ea-site h1, .ea-site .ea-h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); } .ea-site h2, .ea-site .ea-h2 { font-size: clamp(2rem, 4vw, 3rem); } .ea-site h3, .ea-site .ea-h3 { font-size: clamp(1.55rem, 2.6vw, 2rem); } .ea-site h4, .ea-site .ea-h4 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); } .ea-site .ea-display { font-size: clamp(3rem, 7vw, 5.75rem); line-height: 1.04; font-weight: 700; } .ea-site .ea-eyebrow { font-size: var(--ea-text-xs); font-weight: 900; letter-spacing: .11em; text-transform: uppercase; line-height: 1.35; } .ea-site .ea-lead { font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.55; } .ea-site .ea-muted { color: var(--ea-muted); } .ea-site .ea-small { font-size: var(--ea-text-sm); } .ea-site .ea-fine-print { font-size: var(--ea-text-xs); line-height: 1.55; } .ea-site .ea-kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--ea-text-xs); font-weight: 900; letter-spacing: .09em; text-transform: uppercase; } .ea-site .ea-kicker::before { content: ""; display: block; width: 1.65rem; height: .25rem; border-radius: var(--ea-radius-pill); background: currentColor; } .ea-site .ea-highlight { background: linear-gradient(transparent 62%, var(--ea-yellow) 62%); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .ea-site .ea-gradient-text { color: var(--ea-blue-deep); } @supports (-webkit-background-clip: text) { .ea-site .ea-gradient-text { background: linear-gradient(110deg, var(--ea-blue-deep), var(--ea-creative)); background-clip: text; -webkit-background-clip: text; color: transparent; } } .ea-site .ea-pullquote { margin-block: 2rem; padding: 1rem 0 1rem 1.5rem; border-inline-start: .4rem solid var(--ea-pink); font-family: var(--ea-font-display); font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.35; color: var(--ea-blue-deep); } .ea-site .ea-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; color: var(--ea-muted); font-size: var(--ea-text-sm); } .ea-site .ea-meta > * { margin: 0; } /* 05. SITE HEADER, NAVIGATION AND FOOTER ----------------------------------- */ .ea-site .ea-site-header { background: var(--ea-paper); border-bottom: 1px solid var(--ea-border); position: relative; z-index: 20; } .ea-site .ea-site-header--sticky { position: sticky; top: 0; z-index: var(--ea-layer-sticky); box-shadow: 0 .25rem 1.2rem rgb(35 52 92 / 5%); } .ea-site .ea-site-header__inner { min-height: 5rem; display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); } .ea-site .ea-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ea-blue-deep); font: 800 clamp(1.25rem, 2.3vw, 1.8rem)/1 var(--ea-font-display); text-decoration: none; white-space: nowrap; } .ea-site .ea-brand:hover { color: var(--ea-blue-deep); } .ea-site .ea-brand__again { color: var(--ea-creative); } .ea-site .ea-brand__mark { display: grid; place-items: center; flex: none; width: 2.5rem; aspect-ratio: 1; background: var(--ea-yellow); border-radius: .8rem; color: var(--ea-ink); font-size: 1.35rem; transform: rotate(-6deg); } .ea-site .ea-navbar { display: flex; align-items: center; gap: clamp(.5rem, 1.5vw, 1.5rem); margin-inline-start: auto; } .ea-site .ea-navbar :where(a:not(.ea-btn)) { display: inline-flex; align-items: center; padding: .55rem .2rem; text-decoration: none; color: var(--ea-ink); font-weight: 800; font-size: var(--ea-text-sm); } .ea-site .ea-navbar :where(a:not(.ea-btn):hover, a:not(.ea-btn)[aria-current="page"]) { color: var(--ea-blue-deep); text-decoration: underline; text-decoration-thickness: .16rem; text-underline-offset: .42rem; } .ea-site .ea-site-header .navbar-toggler { border-color: var(--ea-border); border-radius: var(--ea-radius-sm); } .ea-site .ea-site-footer { background: var(--ea-ink); color: #fff; padding: 4rem 0 1.5rem; } .ea-site .ea-site-footer :where(h2,h3,h4,p) { color: inherit; } .ea-site .ea-site-footer a { color: #fff; } .ea-site .ea-site-footer a:hover { color: var(--ea-yellow); } .ea-site .ea-site-footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / 26%); font-size: var(--ea-text-sm); } .ea-site .ea-social-links { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; padding: 0; margin: 0; } .ea-site .ea-social-links a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid currentColor; border-radius: var(--ea-radius-pill); text-decoration: none; } /* 06. BUTTONS, PILLS, BADGES AND ICONS ------------------------------------- */ .ea-site .ea-btn { --ea-btn-bg: var(--ea-blue-deep); --ea-btn-ink: #fff; --ea-btn-border: var(--ea-blue-deep); --ea-btn-hover-bg: var(--ea-primary-hover); --ea-btn-hover-ink: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 2.875rem; padding: .72rem 1.25rem; border: 2px solid var(--ea-btn-border); border-radius: var(--ea-radius-sm); background: var(--ea-btn-bg); color: var(--ea-btn-ink); text-decoration: none; font: 850 .96rem/1.3 var(--ea-font-body); text-align: center; cursor: pointer; vertical-align: middle; transition: background var(--ea-transition), color var(--ea-transition), border-color var(--ea-transition), transform var(--ea-transition), box-shadow var(--ea-transition); } .ea-site .ea-btn:hover { background: var(--ea-btn-hover-bg); border-color: var(--ea-btn-hover-bg); color: var(--ea-btn-hover-ink); transform: translateY(-1px); box-shadow: var(--ea-shadow-sm); } .ea-site .ea-btn:active { transform: translateY(0); box-shadow: none; } .ea-site .ea-btn:disabled, .ea-site .ea-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } .ea-site a.ea-btn[aria-disabled="true"] { pointer-events: none; } .ea-site .ea-btn--outline { --ea-btn-bg: transparent; --ea-btn-ink: var(--ea-blue-deep); --ea-btn-hover-bg: var(--ea-blue-deep); --ea-btn-hover-ink: #fff; } .ea-site .ea-btn--white { --ea-btn-bg: #fff; --ea-btn-ink: var(--ea-blue-deep); --ea-btn-border: #fff; --ea-btn-hover-bg: var(--ea-yellow); --ea-btn-hover-ink: var(--ea-ink); } .ea-site .ea-btn--yellow { --ea-btn-bg: var(--ea-yellow); --ea-btn-ink: var(--ea-ink); --ea-btn-border: var(--ea-yellow); --ea-btn-hover-bg: #ffca1e; --ea-btn-hover-ink: var(--ea-ink); } .ea-site .ea-btn--creative { --ea-btn-bg: var(--ea-creative); --ea-btn-ink: #fff; --ea-btn-border: var(--ea-creative); --ea-btn-hover-bg: #59204a; --ea-btn-hover-ink: #fff; } .ea-site .ea-btn--character { --ea-btn-bg: var(--ea-fiction); --ea-btn-ink: #fff; --ea-btn-border: var(--ea-fiction); --ea-btn-hover-bg: #392653; --ea-btn-hover-ink: #fff; } .ea-site .ea-btn--mint { --ea-btn-bg: var(--ea-mint-ink); --ea-btn-ink: #fff; --ea-btn-border: var(--ea-mint-ink); --ea-btn-hover-bg: #10513e; --ea-btn-hover-ink: #fff; } .ea-site .ea-btn--pink { --ea-btn-bg: var(--ea-pink); --ea-btn-ink: #18243d; --ea-btn-border: var(--ea-pink); --ea-btn-hover-bg: #f94b6e; --ea-btn-hover-ink: #18243d; } .ea-site .ea-btn--pill { border-radius: var(--ea-radius-pill); } .ea-site .ea-btn--sm { min-height: 2.35rem; padding: .42rem .85rem; font-size: .875rem; } .ea-site .ea-btn--lg { min-height: 3.5rem; padding: .85rem 1.55rem; font-size: 1.06rem; } .ea-site .ea-btn--block { display: flex; width: 100%; } .ea-site .ea-btn--icon { width: 2.875rem; padding-inline: 0; aspect-ratio: 1; } .ea-site .ea-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .67rem; background: var(--ea-sky-pale); color: var(--ea-blue-deep); border-radius: var(--ea-radius-pill); font-size: .75rem; line-height: 1.2; letter-spacing: .055em; font-weight: 900; text-transform: uppercase; } .ea-site .ea-badge--creative { background: #f8e8f2; color: var(--ea-creative); } .ea-site .ea-badge--character { background: var(--ea-lavender); color: var(--ea-fiction); } .ea-site .ea-badge--hobby { background: var(--ea-pink-pale); color: var(--ea-hobby); } .ea-site .ea-badge--podcast { background: #fff0d6; color: var(--ea-podcast); } .ea-site .ea-badge--free { background: var(--ea-mint-pale); color: var(--ea-mint-ink); } .ea-site .ea-badge--live { background: #fff0f2; color: var(--ea-danger); } .ea-site .ea-badge--dark { background: var(--ea-ink); color: #fff; } .ea-site .ea-icon-disc { display: inline-grid; place-items: center; flex: none; width: 3rem; aspect-ratio: 1; border-radius: .95rem; background: var(--ea-yellow); color: var(--ea-ink); font-size: 1.35rem; } .ea-site .ea-icon-disc--blue { background: var(--ea-sky-pale); color: var(--ea-blue-deep); } .ea-site .ea-icon-disc--purple { background: var(--ea-lavender); color: var(--ea-fiction); } .ea-site .ea-icon-disc--mint { background: var(--ea-mint-pale); color: var(--ea-mint-ink); } /* Bridge common Bootstrap classes after their compiled CSS. */ .ea-site .btn { border-radius: var(--ea-radius-sm); font-family: var(--ea-font-body); font-weight: 850; } .ea-site .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--ea-blue-deep); --bs-btn-border-color: var(--ea-blue-deep); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ea-primary-hover); --bs-btn-hover-border-color: var(--ea-primary-hover); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ea-primary-pressed); --bs-btn-active-border-color: var(--ea-primary-pressed); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--ea-blue-deep); --bs-btn-disabled-border-color: var(--ea-blue-deep); --bs-btn-focus-shadow-rgb: 54, 89, 232; } .ea-site .btn-outline-primary { --bs-btn-color: var(--ea-blue-deep); --bs-btn-border-color: var(--ea-blue-deep); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ea-blue-deep); --bs-btn-hover-border-color: var(--ea-blue-deep); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ea-primary-hover); --bs-btn-active-border-color: var(--ea-primary-hover); --bs-btn-focus-shadow-rgb: 54, 89, 232; } /* 07. HEROES, BREADCRUMBS AND MEDIA OVERLAYS ------------------------------- */ .ea-site .ea-hero { isolation: isolate; position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(29rem, 70vh, 47rem); padding-block: clamp(4rem, 9vw, 8rem); background: var(--ea-canvas); color: var(--ea-ink); } .ea-site .ea-hero__inner { position: relative; z-index: 2; width: 100%; } .ea-site .ea-hero__content { max-width: 44rem; } .ea-site .ea-hero__content > :last-child { margin-bottom: 0; } .ea-site .ea-hero__title { font-size: clamp(2.85rem, 7vw, 6rem); line-height: 1.05; } .ea-site .ea-hero__lead { max-width: 37rem; font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.53; } .ea-site .ea-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; } .ea-site .ea-hero--short { min-height: 20rem; padding-block: clamp(3rem, 6vw, 5rem); } .ea-site .ea-hero--center { text-align: center; } .ea-site .ea-hero--center .ea-hero__content, .ea-site .ea-hero--center .ea-hero__lead { margin-inline: auto; } .ea-site .ea-hero--center .ea-hero__actions { justify-content: center; } .ea-site .ea-hero--sunny { background: var(--ea-yellow); } .ea-site .ea-hero--sky { background: var(--ea-sky-pale); } .ea-site .ea-hero--ink { background: var(--ea-ink); color: #fff; } .ea-site .ea-hero--ink :where(h1,h2,h3,p) { color: inherit; } /* Use style="--ea-hero-image: url('image.jpg')" on the hero element. */ .ea-site .ea-hero--image { background-color: var(--ea-ink); color: #fff; background-image: linear-gradient(90deg, rgb(18 32 69 / 94%) 0%, rgb(18 32 69 / 76%) 45%, rgb(18 32 69 / 32%) 100%), var(--ea-hero-image, linear-gradient(125deg, #263f91, #7a3167)); background-position: center, var(--ea-hero-position, center); background-size: cover; } .ea-site .ea-hero--image :where(h1,h2,h3,p) { color: inherit; } .ea-site .ea-hero--image.ea-hero--center { background-image: linear-gradient(rgb(18 32 69 / 65%), rgb(18 32 69 / 78%)), var(--ea-hero-image, linear-gradient(125deg, #263f91, #7a3167)); } .ea-site .ea-hero--split { min-height: 0; background: var(--ea-canvas); padding-top:0; padding-bottom: 0; padding-left: 50px; padding-right: 50px;} .ea-site .ea-hero__split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); } .ea-site .ea-hero__media { width: 100%; aspect-ratio: 4/3; border-radius: var(--ea-radius-xl); overflow: hidden; background: var(--ea-lavender); box-shadow: var(--ea-shadow-lg); } .ea-site .ea-hero__media img { width: 100%; height: 100%; object-fit: cover; } .ea-site .ea-hero__media--portrait { aspect-ratio: 3/4; } .ea-site .ea-hero__media--square { aspect-ratio: 1; } .ea-site .ea-hero--split .ea-hero__title { font-size: clamp(2.75rem, 5.2vw, 5.1rem); } .ea-site .ea-hero__shape { position: absolute; z-index: -1; pointer-events: none; width: clamp(10rem, 25vw, 24rem); aspect-ratio: 1; border-radius: 35% 65% 64% 36%; right: -6%; bottom: -45%; background: rgb(255 218 67 / 35%); } .ea-site .ea-media-cover { position: relative; overflow: hidden; border-radius: var(--ea-radius-lg); background: var(--ea-ink); isolation: isolate; color: #fff; } .ea-site .ea-media-cover > img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; z-index: -2; } .ea-site .ea-media-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(15 25 55 / 90%) 0%, rgb(15 25 55 / 15%) 75%); pointer-events: none; } .ea-site .ea-media-cover__content { display: flex; flex-direction: column; justify-content: flex-end; min-height: 18rem; height: 100%; padding: clamp(1.25rem, 3vw, 2.5rem); } .ea-site .ea-media-cover__content :where(h2,h3,h4,p,a) { color: #fff; } .ea-site .ea-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: 0; margin: 0 0 1.5rem; list-style: none; font-size: var(--ea-text-sm); } .ea-site .ea-breadcrumb li + li::before { content: "/"; display: inline-block; margin-inline: .35rem .7rem; color: var(--ea-muted); } .ea-site .ea-breadcrumb [aria-current="page"] { color: var(--ea-muted); } /* 08. CARD SYSTEM AND CONTENT COLLECTIONS --------------------------------- */ .ea-site .ea-card { --ea-card-accent: var(--ea-blue); display: flex; flex-direction: column; height: 100%; min-width: 0; overflow: hidden; background: var(--ea-paper); color: var(--ea-ink); border: 1px solid var(--ea-border); border-radius: var(--ea-radius-lg); box-shadow: var(--ea-shadow-sm); transition: transform var(--ea-transition-long), box-shadow var(--ea-transition-long), border-color var(--ea-transition-long); } .ea-site .ea-card:hover { box-shadow: var(--ea-shadow); border-color: #b8c7e6; transform: translateY(-3px); } .ea-site .ea-card__image { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--ea-sky-pale); } .ea-site .ea-card__image--square { aspect-ratio: 1; } .ea-site .ea-card__image--portrait { aspect-ratio: 3/4; } .ea-site .ea-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; } .ea-site .ea-card:hover .ea-card__image img { transform: scale(1.035); } .ea-site .ea-card__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: .75rem; padding: clamp(1.25rem, 2.5vw, 1.8rem); } .ea-site .ea-card__body > :last-child { margin-bottom: 0; } .ea-site .ea-card__title { margin: 0; font-size: clamp(1.35rem, 2vw, 1.7rem); } .ea-site .ea-card__text { color: var(--ea-muted); margin: 0; } .ea-site .ea-card__foot { margin-top: auto; padding-top: .5rem; } .ea-site .ea-card__link { font-weight: 900; text-decoration: none; } .ea-site .ea-card__link:hover { text-decoration: underline; } .ea-site .ea-card--flat { box-shadow: none; } .ea-site .ea-card--feature { border-top: .5rem solid var(--ea-card-accent); } .ea-site .ea-card--hobby { --ea-card-accent: var(--ea-hobby); } .ea-site .ea-card--scifi { --ea-card-accent: var(--ea-sci-fi); } .ea-site .ea-card--creative { --ea-card-accent: var(--ea-creative); } .ea-site .ea-card--fiction { --ea-card-accent: var(--ea-fiction); } .ea-site .ea-card--podcast { --ea-card-accent: var(--ea-podcast); } .ea-site .ea-card--tinted { background: var(--ea-surface-muted); } .ea-site .ea-card--horizontal { flex-direction: row; align-items: stretch; } .ea-site .ea-card--horizontal .ea-card__image { flex: 0 0 38%; aspect-ratio: auto; } .ea-site .ea-card--horizontal .ea-card__image img { height: 100%; } .ea-site .ea-card--horizontal .ea-card__body { flex: 1; } .ea-site .ea-card--spotlight { background: var(--ea-blue-deep); color: #fff; border-color: transparent; } .ea-site .ea-card--spotlight :where(h2,h3,h4,p) { color: inherit; } .ea-site .ea-card--spotlight .ea-card__link { color: #fff; } .ea-site .ea-card--spotlight .ea-card__text { color: #eef1ff; } .ea-site .ea-feature-list { display: grid; gap: .75rem; padding: 0; margin: 0; list-style: none; } .ea-site .ea-feature-list li { display: flex; gap: .65rem; align-items: flex-start; } .ea-site .ea-feature-list li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--ea-mint-pale); color: var(--ea-mint-ink); font-size: .8rem; font-weight: 900; margin-top: .13rem; } .ea-site .ea-tile { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--ea-radius-lg); background: var(--ea-lavender); } .ea-site .ea-tile--yellow { background: var(--ea-yellow-pale); } .ea-site .ea-tile--mint { background: var(--ea-mint-pale); } .ea-site .ea-tile--sky { background: var(--ea-sky-pale); } .ea-site .ea-tile--pink { background: var(--ea-pink-pale); } .ea-site .ea-stat { background: #fff; border: 1px solid var(--ea-border); border-radius: var(--ea-radius); padding: 1.35rem; } .ea-site .ea-stat__value { font: 800 clamp(1.75rem, 4vw, 2.75rem)/1.15 var(--ea-font-display); color: var(--ea-blue-deep); } .ea-site .ea-stat__label { margin-top: .25rem; font-size: var(--ea-text-sm); color: var(--ea-muted); } /* 09. CALLOUTS, ANNOUNCEMENTS, POPS AND BANNERS ---------------------------- */ .ea-site .ea-callout { --ea-callout-accent: var(--ea-blue-deep); --ea-callout-bg: var(--ea-sky-pale); position: relative; padding: clamp(1.25rem, 3vw, 2rem); border-inline-start: .4rem solid var(--ea-callout-accent); border-radius: var(--ea-radius); background: var(--ea-callout-bg); color: var(--ea-ink); } .ea-site .ea-callout > :last-child { margin-bottom: 0; } .ea-site .ea-callout__title { display: flex; align-items: center; gap: .5rem; font-size: 1.4rem; margin-bottom: .5rem; } .ea-site .ea-callout--tip { --ea-callout-accent: var(--ea-mint-ink); --ea-callout-bg: var(--ea-mint-pale); } .ea-site .ea-callout--note { --ea-callout-accent: var(--ea-blue-deep); --ea-callout-bg: var(--ea-sky-pale); } .ea-site .ea-callout--idea { --ea-callout-accent: var(--ea-creative); --ea-callout-bg: #fbeaf6; } .ea-site .ea-callout--warning { --ea-callout-accent: var(--ea-warning); --ea-callout-bg: #fff3c9; } .ea-site .ea-callout--important { --ea-callout-accent: var(--ea-danger); --ea-callout-bg: #ffe8ec; } .ea-site .ea-callout--download { --ea-callout-accent: var(--ea-fiction); --ea-callout-bg: var(--ea-lavender); } .ea-site .ea-announce { background: var(--ea-yellow); color: var(--ea-ink); padding: .6rem var(--ea-gutter); text-align: center; font-size: var(--ea-text-sm); font-weight: 800; } .ea-site .ea-announce a { color: inherit; font-weight: 900; } .ea-site .ea-announce--blue { background: var(--ea-blue-deep); color: #fff; } .ea-site .ea-announce--pink { background: var(--ea-pink); color: #18243d; } .ea-site .ea-banner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(1.25rem, 4vw, 3rem); padding: clamp(1.5rem, 4vw, 3rem); background: var(--ea-yellow); color: var(--ea-ink); border-radius: var(--ea-radius-xl); overflow: hidden; } .ea-site .ea-banner__content { max-width: 44rem; } .ea-site .ea-banner__content > :last-child { margin-bottom: 0; } .ea-site .ea-banner--blue { background: var(--ea-blue-deep); color: #fff; } .ea-site .ea-banner--blue :where(h2,h3,h4,p) { color: inherit; } .ea-site .ea-banner--lavender { background: var(--ea-lavender); } .ea-site .ea-banner--mint { background: var(--ea-mint-pale); } .ea-site .ea-pop { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--ea-radius-xl); padding: clamp(1.75rem, 4vw, 3.25rem); color: var(--ea-ink); background: var(--ea-yellow); box-shadow: var(--ea-shadow); } .ea-site .ea-pop::after { content: ""; position: absolute; z-index: -1; width: 12rem; aspect-ratio: 1; right: -4rem; top: -5rem; background: var(--ea-pink); border-radius: 38% 62% 58% 42%; transform: rotate(-19deg); opacity: .62; pointer-events: none; } .ea-site .ea-pop--purple { background: var(--ea-lavender); } .ea-site .ea-pop--purple::after { background: var(--ea-purple); } .ea-site .ea-pop--mint { background: var(--ea-mint-pale); } .ea-site .ea-pop--mint::after { background: var(--ea-mint); } .ea-site .ea-pop__title { max-width: 35rem; } .ea-site .ea-quote-card { background: var(--ea-paper); border: 1px solid var(--ea-border); border-radius: var(--ea-radius-lg); padding: 1.75rem; } .ea-site .ea-quote-card blockquote { font-size: var(--ea-text-lg); line-height: 1.5; margin: 0 0 1rem; } .ea-site .ea-quote-card cite { font-style: normal; font-weight: 800; font-size: var(--ea-text-sm); color: var(--ea-muted); } /* Only render real quotes, genuine feedback, or attributed original copy. */ /* 10. GUIDES, DOWNLOADS, RESOURCE LIBRARY --------------------------------- */ .ea-site .ea-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); } .ea-site .ea-guide { --ea-guide-bg: var(--ea-mint-pale); --ea-guide-color: var(--ea-mint-ink); display: flex; flex-direction: column; overflow: hidden; height: 100%; border: 1px solid var(--ea-border); border-radius: var(--ea-radius-xl); background: var(--ea-guide-bg); color: var(--ea-ink); } .ea-site .ea-guide--creative { --ea-guide-bg: var(--ea-mint-pale); --ea-guide-color: var(--ea-mint-ink); } .ea-site .ea-guide--character { --ea-guide-bg: var(--ea-lavender); --ea-guide-color: var(--ea-fiction); } .ea-site .ea-guide--hobby { --ea-guide-bg: var(--ea-pink-pale); --ea-guide-color: var(--ea-hobby); } .ea-site .ea-guide__cover { aspect-ratio: 16/10; background: var(--ea-guide-color); overflow: hidden; } .ea-site .ea-guide__cover img { width: 100%; height: 100%; object-fit: cover; } .ea-site .ea-guide__body { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding: clamp(1.25rem, 3vw, 2rem); flex: 1; } .ea-site .ea-guide__title { font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--ea-guide-color); margin: 0; } .ea-site .ea-guide__body > p { margin: 0; } .ea-site .ea-guide__details { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: var(--ea-text-sm); color: var(--ea-muted); } .ea-site .ea-guide__action { margin-top: auto; padding-top: .5rem; width: 100%; } .ea-site .ea-guide__action .ea-btn { width: 100%; } .ea-site .ea-resource-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 2rem; } .ea-site .ea-resource-filter a, .ea-site .ea-resource-filter button { display: inline-flex; text-decoration: none; padding: .5rem 1rem; border: 1px solid var(--ea-border); color: var(--ea-ink); background: var(--ea-paper); border-radius: var(--ea-radius-pill); font-weight: 800; font-size: var(--ea-text-sm); } .ea-site .ea-resource-filter [aria-current="page"], .ea-site .ea-resource-filter [aria-pressed="true"] { color: #fff; background: var(--ea-blue-deep); border-color: var(--ea-blue-deep); } .ea-site .ea-download { display: flex; align-items: center; gap: 1.25rem; padding: clamp(1rem, 3vw, 1.75rem); background: var(--ea-paper); border: 2px dashed #afc2e2; border-radius: var(--ea-radius-lg); } .ea-site .ea-download__icon { flex: none; display: grid; place-items: center; width: 3.5rem; aspect-ratio: 1; border-radius: var(--ea-radius); background: var(--ea-lavender); color: var(--ea-fiction); font-size: 1.6rem; } .ea-site .ea-download__body { flex: 1; min-width: 0; } .ea-site .ea-download__title { font-size: 1.25rem; margin-bottom: .25rem; } .ea-site .ea-download__meta { color: var(--ea-muted); font-size: var(--ea-text-sm); margin: 0; } .ea-site .ea-download__action { flex: none; } .ea-site .ea-resource-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3.5rem); align-items: center; } .ea-site .ea-resource-preview__image { border-radius: var(--ea-radius-lg); overflow: hidden; background: var(--ea-lavender); box-shadow: var(--ea-shadow); } .ea-site .ea-resource-preview__image img { width: 100%; display: block; } .ea-site .ea-guide-steps { list-style: none; counter-reset: guide-step; display: grid; gap: 1rem; padding: 0; margin: 0; } .ea-site .ea-guide-steps > li { counter-increment: guide-step; display: flex; align-items: flex-start; gap: 1rem; background: #fff; border: 1px solid var(--ea-border); border-radius: var(--ea-radius); padding: 1rem 1.25rem; } .ea-site .ea-guide-steps > li::before { content: counter(guide-step); flex: 0 0 2rem; display: grid; place-items: center; height: 2rem; border-radius: .7rem; background: var(--ea-yellow); color: var(--ea-ink); font-weight: 900; } .ea-site .ea-price { display: flex; align-items: baseline; gap: .5rem; } .ea-site .ea-price__amount { font: 800 clamp(2rem, 4vw, 3rem)/1.1 var(--ea-font-display); } .ea-site .ea-price__note { font-size: var(--ea-text-sm); color: var(--ea-muted); } /* 11. BLOG, ARTICLES, TUTORIALS AND GUTENBERG ------------------------------- */ .ea-site .ea-archive-header { padding-block: clamp(3rem, 6vw, 5rem); } .ea-site .ea-archive-filters { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.5rem; } .ea-site .ea-archive-filters a { padding: .4rem .8rem; border-radius: var(--ea-radius-pill); border: 1px solid var(--ea-border); background: #fff; font-size: var(--ea-text-sm); font-weight: 800; text-decoration: none; } .ea-site .ea-archive-filters a[aria-current="page"] { background: var(--ea-blue-deep); color: #fff; } .ea-site .ea-article { padding-bottom: var(--ea-section-space); } .ea-site .ea-article__header { max-width: 55rem; margin: 0 auto clamp(2rem, 5vw, 3.5rem); padding-top: clamp(2.5rem, 6vw, 5rem); } .ea-site .ea-article__title { font-size: clamp(2.4rem, 5vw, 4.5rem); margin-block: .75rem 1rem; } .ea-site .ea-article__dek { font-size: clamp(1.125rem, 1.75vw, 1.375rem); color: var(--ea-muted); line-height: 1.55; } .ea-site .ea-article__cover { margin-block: 0 clamp(2rem, 5vw, 4rem); } .ea-site .ea-article__cover img { width: 100%; max-height: 44rem; object-fit: cover; border-radius: var(--ea-radius-lg); } .ea-site .ea-article__cover figcaption, .ea-site .ea-article__body figcaption, .ea-site .wp-element-caption { color: var(--ea-muted); text-align: center; font-size: .875rem; line-height: 1.5; margin-top: .6rem; } .ea-site .ea-article__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem); gap: clamp(2rem, 5vw, 4rem); align-items: start; } .ea-site .ea-article__body { width: 100%; max-width: var(--ea-reading-width); margin-inline: auto; min-width: 0; font-size: 1.125rem; line-height: 1.75; } .ea-site .ea-article__layout .ea-article__body { max-width: none; } .ea-site .ea-article__body :where(p,ul,ol,blockquote,figure,table,pre) { margin-bottom: 1.5rem; } .ea-site .ea-article__body :where(h2,h3,h4) { margin-top: 2.25rem; margin-bottom: 1rem; } .ea-site .ea-article__body :where(ul,ol) { padding-inline-start: 1.5rem; } .ea-site .ea-article__body li + li { margin-top: .4rem; } .ea-site .ea-article__body img { max-width: 100%; border-radius: var(--ea-radius-sm); } .ea-site .ea-article__body :where(blockquote,.wp-block-quote) { margin-inline: 0; padding: .6rem 0 .6rem 1.35rem; border-inline-start: .35rem solid var(--ea-purple); color: var(--ea-blue-deep); font-size: 1.25rem; } .ea-site .ea-article__body blockquote cite { display: block; font-size: var(--ea-text-sm); font-style: normal; color: var(--ea-muted); margin-top: .75rem; } .ea-site .ea-article__body :where(pre, .wp-block-code) { overflow-x: auto; padding: 1.25rem; color: #fff; background: var(--ea-ink); border-radius: var(--ea-radius-sm); font: .9rem/1.65 var(--ea-font-mono); } .ea-site .ea-article__body :where(code, kbd) { font-family: var(--ea-font-mono); font-size: .88em; } .ea-site .ea-article__body :where(:not(pre)>code) { padding: .12rem .35rem; background: var(--ea-lavender); color: var(--ea-fiction); border-radius: .25rem; } .ea-site .ea-article__body :where(table,.wp-block-table table) { width: 100%; border-collapse: collapse; font-size: .96rem; } .ea-site .ea-article__body :where(th,td) { padding: .8rem; text-align: start; border: 1px solid var(--ea-border); vertical-align: top; } .ea-site .ea-article__body th { background: var(--ea-sky-pale); } .ea-site .ea-article__body .wp-block-table { overflow-x: auto; } .ea-site .ea-article__body .wp-block-image { margin-bottom: 1.75rem; } .ea-site .ea-article__body .wp-block-image img { height: auto; } .ea-site .ea-article__body .wp-block-separator { border: 0; height: 1px; background: var(--ea-border); margin-block: 2.5rem; opacity: 1; } .ea-site .ea-article__body .wp-block-cover { border-radius: var(--ea-radius-lg); overflow: hidden; } .ea-site .ea-article__body .wp-block-cover :where(h2,h3,h4,p) { color: inherit; } .ea-site .ea-article__body .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; } .ea-site .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .7rem 1.3rem; background: var(--ea-blue-deep); color: #fff; border: 2px solid var(--ea-blue-deep); border-radius: var(--ea-radius-sm); font-weight: 850; text-decoration: none; } .ea-site .wp-block-button__link:hover { color: #fff; background: var(--ea-primary-hover); border-color: var(--ea-primary-hover); } .ea-site .is-style-outline .wp-block-button__link { background: transparent; color: var(--ea-blue-deep); } .ea-site .is-style-outline .wp-block-button__link:hover { background: var(--ea-blue-deep); color: #fff; } .ea-site .ea-article-sidebar { position: sticky; top: 7rem; } .ea-site .ea-article-sidebar > * + * { margin-top: 1.25rem; } .ea-site .ea-article-toc { padding: 1.25rem; background: #fff; border: 1px solid var(--ea-border); border-radius: var(--ea-radius); font-size: var(--ea-text-sm); } .ea-site .ea-article-toc__title { font-size: 1rem; margin-bottom: .65rem; } .ea-site .ea-article-toc ul { list-style: none; padding: 0; margin: 0; } .ea-site .ea-article-toc li + li { margin-top: .5rem; } .ea-site .ea-article-toc a { text-decoration: none; } .ea-site .ea-article-toc a:hover { text-decoration: underline; } .ea-site .ea-author-box { display: flex; align-items: flex-start; gap: 1.25rem; background: var(--ea-lavender); border-radius: var(--ea-radius-lg); padding: 1.5rem; } .ea-site .ea-author-box__photo { flex: 0 0 5rem; width: 5rem; aspect-ratio: 1; object-fit: cover; border-radius: 1.25rem; } .ea-site .ea-related { padding-block: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--ea-border); } .ea-site .ea-category-strip { height: .4rem; border-radius: var(--ea-radius-pill); background: var(--ea-blue); } .ea-site .ea-category-strip--hobby { background: var(--ea-hobby); } .ea-site .ea-category-strip--creative { background: var(--ea-creative); } .ea-site .ea-category-strip--scifi { background: var(--ea-sci-fi); } .ea-site .ea-category-strip--fiction { background: var(--ea-fiction); } .ea-site .ea-category-strip--podcast { background: var(--ea-podcast); } /* How-to: semantic ordered steps, optional duration and difficulty chips. */ .ea-site .ea-howto__intro { padding: 1.5rem; margin-bottom: 2rem; border-radius: var(--ea-radius-lg); background: var(--ea-sky-pale); } .ea-site .ea-howto__summary { display: flex; flex-wrap: wrap; gap: .6rem; } .ea-site .ea-howto__summary span { display: inline-flex; gap: .35rem; border: 1px solid #bfcae9; border-radius: var(--ea-radius-pill); padding: .3rem .7rem; font-size: var(--ea-text-sm); font-weight: 800; } .ea-site .ea-howto__steps { counter-reset: howto; list-style: none; padding: 0; margin: 0; } .ea-site .ea-howto__steps > li { counter-increment: howto; position: relative; padding: 0 0 2.5rem 4.5rem; border-left: 2px solid var(--ea-border); margin-left: 1.2rem; } .ea-site .ea-howto__steps > li:last-child { border-color: transparent; } .ea-site .ea-howto__steps > li::before { content: counter(howto); position: absolute; left: -1.22rem; top: -.1rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; color: var(--ea-ink); background: var(--ea-yellow); border: 3px solid var(--ea-paper); border-radius: 50%; font: 900 1rem/1 var(--ea-font-body); } .ea-site .ea-howto__steps > li > :first-child { margin-top: 0; } .ea-site .ea-howto__steps img { display: block; margin-block: 1rem; } .ea-site .ea-checklist { padding: 1.3rem 1.5rem; background: var(--ea-mint-pale); border-radius: var(--ea-radius-lg); } .ea-site .ea-checklist__items { list-style: none; padding: 0; margin: 0; } .ea-site .ea-checklist__items li + li { margin-top: .75rem; } .ea-site .ea-checklist__items label { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; } .ea-site .ea-checklist__items input[type="checkbox"] { margin-top: .3rem; accent-color: var(--ea-mint-ink); width: 1.15rem; height: 1.15rem; } /* 12. VIDEO, PODCAST, AUDIO AND LIVE EVENTS -------------------------------- */ .ea-site .ea-video { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--ea-radius-lg); background: var(--ea-ink); } .ea-site .ea-video--square { aspect-ratio: 1; } .ea-site .ea-video--vertical { aspect-ratio: 9/16; max-width: 26rem; margin-inline: auto; } .ea-site .ea-video > :where(iframe,video,img) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ea-site .ea-video__caption { display: block; margin-top: .75rem; color: var(--ea-muted); font-size: var(--ea-text-sm); } .ea-site .ea-video-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .75fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .ea-site .ea-playlist { display: grid; gap: .75rem; } .ea-site .ea-playlist__item { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--ea-border); padding: .75rem; border-radius: var(--ea-radius); background: #fff; color: var(--ea-ink); text-decoration: none; } .ea-site .ea-playlist__thumb { flex: 0 0 6rem; aspect-ratio: 16/9; border-radius: var(--ea-radius-xs); object-fit: cover; background: var(--ea-lavender); } .ea-site .ea-podcast {border-radius: var(--ea-radius-xl); background: #fff; padding: 30px} .ea-site .ea-podcast__art { aspect-ratio: 1; width: 100%; border-radius: var(--ea-radius); object-fit: cover; background: var(--ea-lavender); } .ea-site .ea-podcast__content { min-width: 0; } .ea-site .ea-audio { display: block; width: 100%; margin-block: 1rem; accent-color: var(--ea-blue-deep); } .ea-site .ea-episode-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; } .ea-site .ea-episode-list__item { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem; background: #fff; border: 1px solid var(--ea-border); border-radius: var(--ea-radius); } .ea-site .ea-episode-list__number { display: grid; place-items: center; background: var(--ea-lavender); color: var(--ea-fiction); width: 3.5rem; height: 3.5rem; border-radius: .9rem; font-weight: 900; } .ea-site .ea-live { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); background: var(--ea-lavender); color: var(--ea-ink); border-radius: var(--ea-radius-xl); } .ea-site .ea-live__date { display: grid; place-items: center; width: 6rem; min-height: 6rem; border-radius: var(--ea-radius); background: #fff; border: 1px solid #cabde9; line-height: 1.1; text-align: center; } .ea-site .ea-live__date strong { font: 800 2rem/1 var(--ea-font-display); } .ea-site .ea-live--onair { background: #ffe7ee; border: 2px solid var(--ea-pink); } .ea-site .ea-live--onair .ea-badge--live::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; } .ea-site .ea-event-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: var(--ea-text-sm); color: var(--ea-muted); margin-block: .75rem; } .ea-site .ea-event-replay { background: #fff; border: 1px solid var(--ea-border); border-radius: var(--ea-radius-lg); padding: 1.25rem; } /* 13. FORMS, LEAD MAGNETS AND NEWSLETTER ---------------------------------- */ .ea-site .ea-form { display: grid; gap: 1rem; } .ea-site .ea-form__field { display: grid; gap: .4rem; } .ea-site .ea-form label { color: inherit; font-size: var(--ea-text-sm); font-weight: 850; } .ea-site .ea-input, .ea-site .ea-form :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { width: 100%; min-height: 3rem; padding: .75rem .95rem; border: 1px solid #9eabc5; border-radius: var(--ea-radius-sm); background: #fff; color: var(--ea-ink); } .ea-site .ea-form textarea { min-height: 8rem; resize: vertical; } .ea-site .ea-form :where(input,select,textarea)::placeholder { color: #67738a; opacity: 1; } .ea-site .ea-form :where(input,select,textarea):focus { border-color: var(--ea-blue-deep); } .ea-site .ea-form :where(input[type="checkbox"],input[type="radio"]) { accent-color: var(--ea-blue-deep); width: 1.1rem; height: 1.1rem; } .ea-site .ea-form__help { margin: 0; color: var(--ea-muted); font-size: var(--ea-text-xs); } .ea-site .ea-form__error { margin: 0; color: var(--ea-danger); font-size: var(--ea-text-sm); font-weight: 800; } .ea-site .ea-form [aria-invalid="true"] { border-color: var(--ea-danger) !important; } .ea-site .ea-inline-form { display: flex; gap: .65rem; align-items: stretch; } .ea-site .ea-inline-form .ea-form__field { flex: 1; min-width: 0; } .ea-site .ea-inline-form .ea-btn { align-self: end; } .ea-site .ea-signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, .85fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.5rem, 5vw, 3.5rem); background: var(--ea-blue-deep); color: #fff; border-radius: var(--ea-radius-xl); } .ea-site .ea-signup :where(h2,h3,h4,p) { color: inherit; } .ea-site .ea-signup__form { padding: clamp(1rem, 2.5vw, 1.75rem); background: #fff; color: var(--ea-ink); border-radius: var(--ea-radius-lg); } .ea-site .ea-signup__form :where(h2,h3,h4,p) { color: var(--ea-ink); } .ea-site .ea-signup--sunny { background: var(--ea-yellow); color: var(--ea-ink); } .ea-site .ea-signup--mint { background: var(--ea-mint-pale); color: var(--ea-ink); } .ea-site .ea-thankyou { padding: clamp(2rem, 5vw, 4rem); text-align: center; background: var(--ea-mint-pale); border-radius: var(--ea-radius-xl); } .ea-site .ea-thankyou__icon { display: grid; place-items: center; width: 4.5rem; aspect-ratio: 1; border-radius: 50%; background: var(--ea-mint-ink); color: #fff; margin-inline: auto; margin-bottom: 1.25rem; font-size: 2rem; } /* Restyle native Bootstrap form controls only within the site. */ .ea-site :where(.form-control,.form-select) { border-color: #9eabc5; border-radius: var(--ea-radius-sm); color: var(--ea-ink); min-height: 2.75rem; } .ea-site :where(.form-control,.form-select):focus { border-color: var(--ea-blue-deep); box-shadow: 0 0 0 .2rem rgb(54 89 232 / 17%); } .ea-site .form-check-input:checked { background-color: var(--ea-blue-deep); border-color: var(--ea-blue-deep); } .ea-site .form-check-input:focus { box-shadow: 0 0 0 .2rem rgb(54 89 232 / 17%); } /* 14. AD INVENTORY, INLINE PROMOS AND OVERLAYS ----------------------------- */ /* Reserve ad dimensions to reduce layout shifts. Add an explicit visible label in markup. Empty ad slots may be hidden by PHP/JS; CSS does NOT decide whether an ad exists. */ .ea-site .ea-ad-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 7.5rem; width: 100%; margin-block: 2rem; padding: .75rem; background: #f3f5f8; border: 1px dashed #adb8ca; border-radius: var(--ea-radius-sm); color: var(--ea-muted); text-align: center; } .ea-site .ea-ad-slot__label { display: block; font: 800 .625rem/1.3 var(--ea-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ea-muted); } .ea-site .ea-ad-slot__unit { display: grid; place-items: center; width: 100%; max-width: 100%; min-height: inherit; } .ea-site .ea-ad-slot--leaderboard { min-height: 8rem; } .ea-site .ea-ad-slot--rectangle { width: min(100%, 22rem); min-height: 19rem; margin-inline: auto; } .ea-site .ea-ad-slot--inarticle { min-height: 17rem; } .ea-site .ea-ad-slot--mobile { min-height: 8rem; } .ea-site .ea-ad-slot--sidebar { min-height: 17rem; } .ea-site .ea-ad-slot--empty { display: none; } .ea-site .ea-inline-promo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 2rem; padding: 1.5rem; margin-block: 2rem; border: 2px solid #d2c2f6; border-radius: var(--ea-radius-lg); background: var(--ea-lavender); } .ea-site .ea-inline-promo__title { margin-bottom: .3rem; } .ea-site .ea-inline-promo__text { margin-bottom: 0; } .ea-site .ea-float-promo { position: fixed; z-index: var(--ea-layer-float); right: clamp(.75rem, 2vw, 1.75rem); bottom: clamp(.75rem, 2vw, 1.75rem); width: min(24rem, calc(100vw - 1.5rem)); padding: 1.25rem; background: #fff; border: 2px solid var(--ea-blue-deep); border-radius: var(--ea-radius-lg); box-shadow: var(--ea-shadow-lg); } .ea-site .ea-float-promo[hidden] { display: none !important; } .ea-site .ea-float-promo__close { position: absolute; right: .7rem; top: .65rem; width: 2.5rem; height: 2.5rem; border: 0; background: var(--ea-surface-muted); border-radius: 50%; color: var(--ea-ink); } /* Use JS to open/close overlays; do not show automatically without consent/compliance. */ .ea-site .ea-modal-panel { border: 0; border-radius: var(--ea-radius-xl); background: var(--ea-paper); color: var(--ea-ink); padding: clamp(1.5rem, 4vw, 3rem); box-shadow: var(--ea-shadow-lg); } .ea-site .ea-modal-panel::backdrop { background: rgb(15 25 55 / 65%); } /* 15. BOOTSTRAP COMPONENT SKIN --------------------------------------------- */ .ea-site .alert { border-radius: var(--ea-radius); border-width: 1px; } .ea-site .alert-info { --bs-alert-color: var(--ea-sci-fi); --bs-alert-bg: var(--ea-sky-pale); --bs-alert-border-color: #bbdbf0; } .ea-site .alert-success { --bs-alert-color: var(--ea-mint-ink); --bs-alert-bg: var(--ea-mint-pale); --bs-alert-border-color: #a4dbca; } .ea-site .alert-warning { --bs-alert-color: var(--ea-warning); --bs-alert-bg: #fff3c9; --bs-alert-border-color: #eed084; } .ea-site .alert-danger { --bs-alert-color: var(--ea-danger); --bs-alert-bg: #ffe8ec; --bs-alert-border-color: #f3adb9; } .ea-site .badge.text-bg-primary { background: var(--ea-blue-deep) !important; color: #fff !important; } .ea-site .accordion { --bs-accordion-color: var(--ea-ink); --bs-accordion-bg: #fff; --bs-accordion-border-color: var(--ea-border); --bs-accordion-border-radius: var(--ea-radius); --bs-accordion-inner-border-radius: var(--ea-radius-sm); --bs-accordion-active-color: var(--ea-blue-deep); --bs-accordion-active-bg: var(--ea-sky-pale); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgb(255 156 41 / 30%); } .ea-site .accordion-button { font-weight: 850; } .ea-site .accordion-button:not(.collapsed) { box-shadow: none; } .ea-site .ea-faq details { border: 1px solid var(--ea-border); border-radius: var(--ea-radius); background: #fff; margin-bottom: .7rem; overflow: hidden; } .ea-site .ea-faq summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 900; } .ea-site .ea-faq details[open] summary { background: var(--ea-sky-pale); color: var(--ea-blue-deep); } .ea-site .ea-faq__answer { padding: 1.25rem; } .ea-site .ea-faq__answer > :last-child { margin-bottom: 0; } .ea-site .pagination { --bs-pagination-color: var(--ea-blue-deep); --bs-pagination-bg: #fff; --bs-pagination-border-color: var(--ea-border); --bs-pagination-hover-color: var(--ea-blue-deep); --bs-pagination-hover-bg: var(--ea-sky-pale); --bs-pagination-hover-border-color: var(--ea-border); --bs-pagination-active-color: #fff; --bs-pagination-active-bg: var(--ea-blue-deep); --bs-pagination-active-border-color: var(--ea-blue-deep); --bs-pagination-border-radius: var(--ea-radius-sm); } .ea-site .modal-content { border: 0; border-radius: var(--ea-radius-xl); box-shadow: var(--ea-shadow-lg); overflow: hidden; } .ea-site .modal-header { background: var(--ea-sky-pale); border-color: var(--ea-border); } .ea-site .modal-footer { border-color: var(--ea-border); } .ea-site .offcanvas { --bs-offcanvas-bg: #fff; --bs-offcanvas-color: var(--ea-ink); } .ea-site .offcanvas-header { border-bottom: 1px solid var(--ea-border); } .ea-site .dropdown-menu { --bs-dropdown-bg: #fff; --bs-dropdown-color: var(--ea-ink); --bs-dropdown-link-color: var(--ea-ink); --bs-dropdown-link-hover-bg: var(--ea-sky-pale); --bs-dropdown-link-active-bg: var(--ea-blue-deep); --bs-dropdown-link-active-color: #fff; border-radius: var(--ea-radius-sm); border-color: var(--ea-border); box-shadow: var(--ea-shadow); } .ea-site .nav-pills { --bs-nav-pills-border-radius: var(--ea-radius-pill); --bs-nav-pills-link-active-bg: var(--ea-blue-deep); --bs-nav-pills-link-active-color: #fff; } .ea-site .progress { --bs-progress-bg: var(--ea-sky-pale); --bs-progress-bar-bg: var(--ea-blue-deep); border-radius: var(--ea-radius-pill); } .ea-site .table { --bs-table-color: var(--ea-ink); --bs-table-bg: transparent; --bs-table-border-color: var(--ea-border); } .ea-site .table thead { background: var(--ea-sky-pale); } .ea-site .ea-table-wrap { width: 100%; overflow-x: auto; border-radius: var(--ea-radius-sm); } /* 16. RESPONSIVE, MOTION, HIGH-CONTRAST AND PRINT --------------------------- */ @media (max-width: 991.98px) { .ea-site .ea-hero__split, .ea-site .ea-resource-preview, .ea-site .ea-signup, .ea-site .ea-video-feature { grid-template-columns: 1fr; } .ea-site .ea-hero--split .ea-hero__media { max-width: 43rem; } .ea-site .ea-article__layout { grid-template-columns: minmax(0,1fr); } .ea-site .ea-article-sidebar { position: static; order: -1; } .ea-site .ea-article__layout .ea-article__body { max-width: var(--ea-reading-width); } .ea-site .ea-navbar { margin-inline-start: 0; flex-wrap: wrap; } } @media (max-width: 767.98px) { .ea-site { --ea-section-space: 3.25rem; } .ea-site .ea-site-header__inner { min-height: 4.25rem; } .ea-site .ea-hero { min-height: 29rem; padding-block: 3.75rem; } .ea-site .ea-hero--short { min-height: 0; padding-block: 3rem; } .ea-site .ea-hero--image { background-image: linear-gradient(0deg, rgb(18 32 69 / 91%) 0%, rgb(18 32 69 / 62%) 100%), var(--ea-hero-image, linear-gradient(125deg, #263f91, #7a3167)); background-position: center, var(--ea-hero-position, center); } .ea-site .ea-guide-grid, .ea-site .ea-grid { grid-template-columns: minmax(0, 1fr); } .ea-site .ea-card--horizontal { flex-direction: column; } .ea-site .ea-card--horizontal .ea-card__image { aspect-ratio: 16/10; flex: initial; } .ea-site .ea-banner, .ea-site .ea-live, .ea-site .ea-inline-promo { grid-template-columns: 1fr; } .ea-site .ea-banner .ea-btn, .ea-site .ea-inline-promo .ea-btn { width: 100%; } .ea-site .ea-podcast { grid-template-columns: minmax(0, 1fr); } .ea-site .ea-podcast__art { max-width: 12rem; } .ea-site .ea-download { flex-wrap: wrap; } .ea-site .ea-download__action { width: 100%; } .ea-site .ea-download__action .ea-btn { width: 100%; } .ea-site .ea-inline-form { flex-direction: column; } .ea-site .ea-inline-form .ea-btn { align-self: stretch; } .ea-site .ea-episode-list__item { grid-template-columns: 3rem minmax(0,1fr); } .ea-site .ea-episode-list__item > :last-child { grid-column: 2; } .ea-site .ea-episode-list__number { width: 3rem; height: 3rem; } .ea-site .ea-author-box { flex-direction: column; } .ea-site .ea-ad-slot--leaderboard { min-height: 7.5rem; } .ea-site .ea-ad-slot--sidebar { display: none; } } @media (max-width: 479.98px) { .ea-site .ea-hero__actions { flex-direction: column; align-items: stretch; } .ea-site .ea-hero__actions .ea-btn { width: 100%; } .ea-site .ea-howto__steps > li { padding-inline-start: 3.3rem; } .ea-site .ea-float-promo { inset-inline: .75rem; width: auto; bottom: .75rem; } .ea-site .ea-site-footer__bottom { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .ea-site *, .ea-site *::before, .ea-site *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .ea-site .ea-card:hover, .ea-site .ea-btn:hover, .ea-site .ea-card:hover .ea-card__image img { transform: none; } } @media (forced-colors: active) { .ea-site .ea-btn, .ea-site .ea-badge, .ea-site .ea-guide, .ea-site .ea-card, .ea-site .ea-callout { forced-color-adjust: auto; border: 1px solid CanvasText; } .ea-site :where(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid Highlight; } } @media print { .ea-site { background: #fff !important; color: #000 !important; font-size: 11pt; } .ea-site .ea-site-header, .ea-site .ea-site-footer, .ea-site .ea-announce, .ea-site .ea-ad-slot, .ea-site .ea-float-promo, .ea-site .ea-article-sidebar, .ea-site .ea-social-links, .ea-site .ea-hero__actions, .ea-site .ea-signup, .ea-site .ea-inline-promo, .ea-site .ea-related, .ea-site .ea-btn { display: none !important; } .ea-site :where(.ea-section,.ea-hero,.ea-callout,.ea-guide,.ea-card,.ea-pop,.ea-banner) { min-height: 0 !important; background: #fff !important; color: #000 !important; box-shadow: none !important; border-color: #ccc !important; } .ea-site :where(h1,h2,h3,h4,h5,h6) { color: #000 !important; break-after: avoid; } .ea-site :where(p,blockquote,figure,li) { orphans: 3; widows: 3; } .ea-site :where(img,figure,.ea-callout,.ea-howto__steps>li) { break-inside: avoid; } .ea-site .ea-article__body { max-width: none !important; } .ea-site .ea-article__layout, .ea-site .ea-hero__split, .ea-site .ea-resource-preview { display: block; } .ea-site .ea-hero--image { background-image: none !important; } .ea-site .ea-hero--image :where(h1,h2,h3,p) { color: #000 !important; } .ea-site .ea-video { display: none; } .ea-site .ea-article__body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .7em; overflow-wrap: anywhere; } } .page .entry-title {display: none;}