/* Theme Name: Avada Child Description: Child theme for Avada theme — Forum Borealis Author: ThemeFusion Author URI: https://theme-fusion.com Template: Avada Version: 1.0.0 Text Domain: Avada */ /* Sticky footer: keep the footer at the bottom of short pages. */ #wrapper.fusion-wrapper { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } #wrapper.fusion-wrapper > #main { flex: 1 0 auto; } #wrapper.fusion-wrapper > .fusion-footer { flex: 0 0 auto; margin-top: auto; } /* Main menu: hover is a slight tint, while the current page keeps the stronger accent — Avada drives both from --menu_hover_first_color, so without this an item under the cursor reads as the active page. */ body.fusion-body .fusion-main-menu > ul > li > a { transition: color .15s ease; } body.fusion-body .fusion-main-menu .current-menu-ancestor > a, body.fusion-body .fusion-main-menu .current-menu-item > a, body.fusion-body .fusion-main-menu .current-menu-parent > a, body.fusion-body .fusion-main-menu .current_page_item > a { color: #C77DFF; border-color: #C77DFF; } /* ---- Home page ------------------------------------------------------ */ /* Site-specific presentation, so it lives in the theme rather than the episodes plugin. Palette comes from Avada's --awb-color* tokens. */ .fb-hero{ margin:0 0 54px;padding:44px 40px 38px;border-radius:12px; background: radial-gradient(120% 140% at 12% 115%, rgba(122,31,184,.55) 0%, rgba(122,31,184,0) 58%), radial-gradient(110% 130% at 72% 118%, rgba(31,111,139,.5) 0%, rgba(31,111,139,0) 60%), var(--awb-color8,#0F1220); color:#fff; } .fb-eyebrow{margin:0 0 6px;font-size:.76em;letter-spacing:.16em;text-transform:uppercase;color:#C77DFF} .fb-hero-title{margin:0 0 10px;color:#fff;line-height:1.05;text-wrap:balance} .fb-hero-lede{margin:0 0 26px;max-width:56ch;color:rgba(255,255,255,.88);font-size:1.12em;line-height:1.55} .fb-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0} .fb-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.94em;line-height:1.2;transition:background .14s ease,color .14s ease,border-color .14s ease} .fb-btn-primary{background:#C77DFF;color:#160B22;border:1px solid #C77DFF} .fb-btn-primary:hover{background:#fff;border-color:#fff;color:#160B22} .fb-btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)} .fb-btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff} .fb-stats{display:flex;flex-wrap:wrap;gap:34px;list-style:none;margin:34px 0 0;padding:26px 0 0;border-top:1px solid rgba(255,255,255,.16)} .fb-stats li{display:flex;flex-direction:column;gap:2px} .fb-stats strong{font-size:1.75em;line-height:1;color:#fff;font-variant-numeric:tabular-nums} .fb-stats span{font-size:.78em;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.66)} .fb-section{margin:0 0 54px} .fb-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 18px;padding-bottom:10px;border-bottom:2px solid var(--awb-color4,#7A1FB8)} .fb-section-head h2{margin:0;font-size:1.4em;line-height:1.25} .fb-more{flex:0 0 auto;font-size:.86em;font-weight:600;text-decoration:none;color:var(--awb-color4,#7A1FB8);white-space:nowrap} .fb-more:hover{color:var(--awb-color5,#1F6F8B)} .fb-members{padding:34px 36px;border:1px solid var(--awb-color3,#E3E8F0);border-left:3px solid var(--awb-color5,#1F6F8B);border-radius:10px;background:var(--awb-color2,#F4F6FA)} .fb-members h2{margin:0 0 12px;font-size:1.35em} .fb-members p{max-width:66ch} .fb-members .fb-hero-actions{margin-top:20px} @media(max-width:640px){ .fb-hero{padding:32px 22px 28px;border-radius:9px} .fb-hero-lede{font-size:1.02em} .fb-stats{gap:22px;margin-top:26px;padding-top:20px} .fb-stats strong{font-size:1.45em} .fb-btn{flex:1 1 auto} .fb-members{padding:26px 22px} } @media(prefers-reduced-motion:reduce){.fb-btn{transition:none}} /* ---- Join / membership page ---------------------------------------- */ .fb-hero-compact{padding:36px 40px 32px;margin-bottom:38px} .fb-hero-compact .fb-hero-lede{margin-bottom:0} .fb-plan{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;border:1px solid var(--awb-color3,#E3E8F0);border-radius:12px;overflow:hidden;margin:0 0 22px} .fb-plan-price{flex:0 0 220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:34px 24px;background:var(--awb-color8,#0F1220);color:#fff} .fb-plan-amount{font-size:3.1em;line-height:1;font-weight:700;font-variant-numeric:tabular-nums} .fb-plan-per{font-size:.8em;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)} .fb-plan-body{flex:1 1 320px;padding:30px 34px} .fb-plan-body h2{margin:0 0 10px;font-size:1.35em} .fb-plan-body p{margin:0 0 16px;max-width:60ch} .fb-plan-body .fb-hero-actions{margin:0} .fb-btn-quiet{background:transparent;color:var(--awb-color7,#252A3D);border:1px solid var(--awb-color3,#E3E8F0)} .fb-btn-quiet:hover{border-color:var(--awb-color4,#7A1FB8);color:var(--awb-color4,#7A1FB8)} .fb-note{padding:20px 24px;border:1px solid var(--awb-color3,#E3E8F0);border-left:3px solid var(--awb-color5,#1F6F8B);border-radius:8px;background:var(--awb-color2,#F4F6FA);margin:0 0 14px} .fb-note h3{margin:0 0 6px;font-size:1.02em;line-height:1.3} .fb-note p{margin:0;max-width:66ch} .fb-note code{padding:2px 7px;border-radius:4px;background:var(--awb-color8,#0F1220);color:#C77DFF;font-size:.92em;letter-spacing:.04em} .fb-note-offer{border-left-color:var(--awb-color4,#7A1FB8)} .fb-included{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px} .fb-included li{padding:18px 20px;border:1px solid var(--awb-color3,#E3E8F0);border-radius:8px;line-height:1.5} .fb-included strong{display:block;margin-bottom:3px;color:var(--awb-color7,#252A3D)} @media(max-width:640px){ .fb-hero-compact{padding:28px 22px 24px} .fb-plan-price{flex:1 1 100%;padding:26px 20px} .fb-plan-body{padding:24px 22px} .fb-plan-amount{font-size:2.6em} } /* Contact address cards reuse the "included" grid */ .fb-included li a{display:inline-block;margin-top:2px;color:var(--awb-color4,#7A1FB8);text-decoration:none;word-break:break-word} .fb-included li a:hover{color:var(--awb-color5,#1F6F8B);text-decoration:underline} .fluentform{margin-top:4px} .fluentform .ff-el-form-control{max-width:100%} /* ---- Contact page: form beside a purpose-labelled address column ---- */ .fb-contact-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:40px;align-items:start;margin:0 0 40px} .fb-contact-form{min-width:0} .fb-contact-aside{padding:26px 26px 22px;border:1px solid var(--awb-color3,#E3E8F0);border-radius:10px;background:var(--awb-color2,#F4F6FA)} .fb-contact-aside h2{margin:0 0 6px;font-size:1.18em} .fb-aside-note{margin:0 0 18px;font-size:.9em;color:var(--awb-color6,#5B6178)} .fb-addr{display:flex;flex-direction:column;gap:2px;padding:14px 0;border-top:1px solid var(--awb-color3,#E3E8F0)} .fb-addr strong{font-size:.76em;letter-spacing:.08em;text-transform:uppercase;color:var(--awb-color5,#1F6F8B)} .fb-addr a{color:var(--awb-color4,#7A1FB8);text-decoration:none;word-break:break-word;font-weight:600} .fb-addr a:hover{text-decoration:underline} .fb-addr span{font-size:.88em;color:var(--awb-color6,#5B6178);line-height:1.45} .fb-contact-aside .fb-aside-note:last-child{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--awb-color3,#E3E8F0)} @media(max-width:900px){.fb-contact-grid{grid-template-columns:1fr;gap:28px}} /* --------------------------------------------------------------------------- Mobile menu legibility. The mobile menu sits on --awb-color8 (near-black). Avada left the item colour unset, so every item except the current one rendered dark-on-dark and was effectively invisible; the current item used --awb-color4 (#7A1FB8), which measures 2.72:1 on that background — the ACTIVE item was the least legible of the lot. Setting these here rather than chasing theme-option keys, because this is the surface the rule actually has to win on. --------------------------------------------------------------------------- */ .fusion-mobile-nav-holder .fusion-mobile-nav-item > a, .fusion-mobile-nav-holder .fusion-mobile-nav-item > a:visited, .fusion-mobile-nav-holder .fusion-mobile-nav-item .fusion-mobile-nav-item-child > a { color: var(--awb-color1, #fff); } .fusion-mobile-nav-holder .fusion-mobile-nav-item.current-menu-item > a, .fusion-mobile-nav-holder .fusion-mobile-nav-item.current_page_item > a, .fusion-mobile-nav-holder .fusion-mobile-nav-item.current-menu-ancestor > a, .fusion-mobile-nav-holder .fusion-mobile-nav-item > a:hover, .fusion-mobile-nav-holder .fusion-mobile-nav-item > a:focus { color: #C77DFF; /* ~7.8:1 on the menu background, vs 2.72:1 for #7A1FB8 */ } /* --------------------------------------------------------------------------- Memberships and donations: no social sharing box. Everything else on these pages (reviews, tabs, SKU line, quantity) is removed in PHP via WooCommerce's own public filters, so that markup never renders. This one stays in CSS on purpose. It is drawn by Avada_Woocommerce::after_single_product_summary, and unhooking a theme's internal method means depending on a class and method name that an Avada update can rename — which would fail silently, leaving the box back on the page with nobody the wiser. A CSS rule that stops matching fails visibly instead. It is still keyed on the fb-support-product body class rather than a hard-coded post id, so a new donation or membership tier inherits it. --------------------------------------------------------------------------- */ body.fb-support-product .social-share, body.fb-support-product .fusion-social-links-product { display: none !important; /* Avada's dynamic CSS sets display:flex and loads after this file */ } /* --------------------------------------------------------------------------- Dark surfaces declare their own heading colour. Avada's global heading colour (--h1..h6_typography-color) shipped as #ffffff while body text was the near-black --awb-color8, so every heading on every light page was white-on-white and invisible — 47 of them across 24 pages. The global colour is now --awb-color8, which is correct for content pages but wrong for the dark hero, whose headings then went dark-on-dark. A dark section must state its own text colour rather than depend on a global default happening to be light. !important is needed because Avada's dynamic CSS (.fusion-post-content h1, specificity 0-1-1) both outranks .fb-hero-title (0-1-0) and loads after this file — the same ordering problem noted for .social-share above. --------------------------------------------------------------------------- */ .fb-hero h1, .fb-hero h2, .fb-hero h3, .fb-hero h4, .fb-hero h5, .fb-hero h6 { color: var(--awb-color1) !important; } /* Ultimate Member's muted grey (#888) is 3.54:1 on white — below the 4.5:1 needed for body text. --awb-color6 is the palette's muted tone and clears it. */ .um a.um-link-alt, .um .um-form a.um-link-alt, .um .um-field-checkbox-option, .um .um-form .um-field-checkbox-option, .um-form .um-field-checkbox-option { color: var(--awb-color6) !important; /* UM ships a.um-link-alt{color:#888!important} and loads after this file */ } /* UM's field-block description text inherits #777 (4.48:1 on white — just under the 4.5:1 floor). Palette muted tone clears it at ~5.9:1. */ .um .um-field-block, .um .um-field-block > div { color: var(--awb-color6); } /* =========================================================================== Mobile header, menu and spacing. =========================================================================== */ @media (max-width: 640px) { /* Avada sizes the logo from the attachment, so the 72px-tall desktop file produced a 112px header bar on a 412px screen. Scale it in CSS rather than shipping a second file — the separate mobile logo had been flattened onto white (alpha=False) and read as a white box on the dark header. */ .fusion-header .fusion-logo img, .fusion-header img.fusion-standard-logo { /* Avada writes style="max-height:72px" inline on the , so a plain stylesheet rule never wins here. */ max-height: 62px !important; width: auto !important; height: auto !important; } .fusion-header { /* Avada's own header padding (20px) wins without this. */ padding-top: 6px !important; padding-bottom: 6px !important; } /* Centre the bars icon against the logo. Avada floats it inside a zero-height .fusion-mobile-menu-icons, so it sat 9px above centre. That container holds ONLY the icon — the dropdown (.fusion-mobile-nav-holder) is a sibling inside .fusion-row — so taking it out of flow does not move the menu. An earlier attempt made .fusion-row itself a flex container, which DID reparent the dropdown beside the icon; do not do that. */ .fusion-header .fusion-mobile-menu-icons { position: absolute; top: 0; right: 0; /* Fixed to the logo's height, NOT 100%. .fusion-row also contains the mobile nav holder, so when the menu opens the row grows from 62px to ~273px; at height:100% this box grew with it and flex-centring pushed the bars icon down into the middle of the open menu, where it read as having disappeared and left no way to close the menu. */ height: 62px; margin-top: 0; /* Avada's own .fusion-mobile-menu-icons{display:block} loads after this file and won that cascade on the first attempt. */ display: flex !important; align-items: center; } .fusion-header .fusion-mobile-menu-icons > a { float: none; } /* Episode rows run edge to edge on a phone: cancel the 30px page gutter on the list only, so the row highlight spans the full width. The filters above keep the gutter. */ .ppe-list { margin-left: -30px; margin-right: -30px; } .ppe-list .ppe-row { padding-left: 18px; padding-right: 18px; } /* .ppe-filters is a CHILD of .ppe-list, so the negative margin above pulled the title, chips and controls flush to the edge too. Give that block its gutter back; only the rows run edge to edge. */ .ppe-list > .ppe-filters { padding-left: 30px; padding-right: 30px; } /* The current item was white on rgb(199,125,255) — 2.71:1, unreadable. The palette's own accent gives white text 7.8:1 and matches the active chip style used on the episodes page. */ .fusion-mobile-nav-item.fusion-mobile-current-nav-item > a, .fusion-mobile-nav-item.current-menu-item > a, .fusion-mobile-nav-item.current_page_item > a { background-color: var(--awb-color4) !important; color: var(--awb-color1) !important; } /* Page furniture was 60px top and bottom plus a 54px gap under the hero — over a third of a phone screen before any content. */ .fusion-body main, .fusion-body .post-content { padding-top: 22px !important; padding-bottom: 22px !important; } .fb-hero { margin-bottom: 30px; } } /* Footer social row: 11 icons at 16px with 10px side margins need 396px, and the wrapper is 372px on a phone — so exactly one (X) wrapped to a line of its own. Tighten the gutters so the set holds one line. */ @media (max-width: 640px) { .fusion-social-networks .fusion-social-network-icon { margin-left: 6px !important; margin-right: 6px !important; margin-bottom: 6px !important; } } /* Empty-cart actions are buttons, not a pair of inline links. */ .fb-empty-cart-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; } .fb-empty-cart-links a { margin: 0; } /* Desktop dropdown items gave no hover feedback at all — measured identical colour AND background hovered vs not, so Avada's menu_sub_hover_color never reached them. Give the row a real highlight. */ .fusion-main-menu .sub-menu li > a:hover, .fusion-main-menu .sub-menu li > a:focus-visible, .fusion-main-menu .sub-menu li:hover > a, .fusion-main-menu .sub-menu li.hover > a { /* Avada paints these from its dynamic CSS, which loads after this file. */ background-color: var(--awb-color4) !important; color: var(--awb-color1) !important; } /* Selected menu items read as white, not a faded purple. Avada painted the current top-level item #C77DFF, which on the dark header looked washed out against its white neighbours. */ .fusion-main-menu > ul > li.current-menu-item > a, .fusion-main-menu > ul > li.current-menu-ancestor > a, .fusion-main-menu > ul > li.current_page_item > a, .fusion-main-menu > ul > li.current-menu-parent > a, .fusion-main-menu .sub-menu li.current-menu-item > a { color: var(--awb-color1) !important; } /* Current page indicator on the desktop top level. Avada's highlight style is "textcolor", and since selected items are now white like everything else there was nothing marking where you are. A bar keeps the colour-only hover intact and still answers "which page am I on". */ .fusion-main-menu > ul > li.current-menu-item > a, .fusion-main-menu > ul > li.current-menu-ancestor > a, .fusion-main-menu > ul > li.current-menu-parent > a, .fusion-main-menu > ul > li.current_page_item > a { position: relative; } .fusion-main-menu > ul > li.current-menu-item > a::after, .fusion-main-menu > ul > li.current-menu-ancestor > a::after, .fusion-main-menu > ul > li.current-menu-parent > a::after, .fusion-main-menu > ul > li.current_page_item > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 14px; height: 2px; background: var(--awb-color4); border-radius: 2px; } /* Product pages: title and short description belong together. The 80px between them was the price line plus a 3px separator carrying 20px margins top and bottom — the separator, not the text, was the space. */ .single-product .summary-container .product_title { margin-bottom: 4px; } .single-product .summary-container p.price { margin-top: 4px; } .single-product .summary-container .product-border { margin-top: 10px; margin-bottom: 10px; } .single-product .summary-container .post-content.woocommerce-product-details { margin-top: 0; } .single-product .summary-container .post-content.woocommerce-product-details p:first-child { margin-top: 0; } /* Name Your Price advertises a floor and a suggestion. Neither is wanted: the $1 donation minimum is not worth saying, and the subscription has one price. The minimum is still enforced server-side — this only stops announcing it. */ /* Scoped to the donation: a $1 floor is not worth announcing. The subscription keeps its "minimum price" line, because $10/month and $100/year is the information a pay-what-you-want buyer actually needs. */ .single-product.postid-581 .nyp-terms, .single-product.postid-581 p.minimum-price, .single-product p.suggested-price { display: none !important; } /* Product images are illustrative here, not a gallery to explore — no zoom, no lightbox cursor, no hover lift. */ .single-product .woocommerce-product-gallery img, .single-product .woocommerce-product-gallery__image, .single-product .woocommerce-product-gallery__image a, .woocommerce ul.products li.product img { cursor: default !important; transition: none !important; transform: none !important; opacity: 1 !important; } .single-product .woocommerce-product-gallery__trigger, .single-product .woocommerce-product-gallery .flex-control-nav { display: none !important; } .single-product .woocommerce-product-gallery img:hover, .woocommerce ul.products li.product:hover img { transform: none !important; opacity: 1 !important; filter: none !important; } /* Callout used where a reader could otherwise take the wrong action — e.g. the returning subscriber who should register before buying anything. */ .fb-notice { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; padding: 14px 16px; border: 1px solid var(--awb-color4); border-left-width: 4px; border-radius: 6px; background: color-mix(in srgb, var(--awb-color4) 7%, transparent); } .fb-notice-icon { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--awb-color4); stroke-width: 1.7; stroke-linecap: round; } .fb-notice-body > strong { display: block; margin-bottom: 4px; } .fb-notice-body p { margin: 0; } /* --------------------------------------------------------------------------- Coming-soon page. Centred, quiet, and carrying one piece of artwork rather than a list of things that are not decided yet. --------------------------------------------------------------------------- */ .fb-soon { max-width: 44rem; margin: 10px auto 40px; padding: 44px 32px 40px; border: 1px solid var(--awb-color3); border-radius: 14px; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--awb-color4) 12%, transparent) 0%, transparent 62%), var(--awb-color2); text-align: center; } .fb-soon-art { width: 132px; margin: 0 auto 20px; } .fb-soon-art svg { width: 100%; height: auto; display: block; overflow: visible; } .fb-soon-shirt { fill: color-mix(in srgb, var(--awb-color4) 14%, transparent); stroke: var(--awb-color4); stroke-width: 2.4; stroke-linejoin: round; } .fb-soon-spark { fill: var(--awb-color4); animation: fb-soon-twinkle 3.2s ease-in-out infinite; } .fb-soon-s2 { animation-delay: .5s; } .fb-soon-s3 { animation-delay: 1.1s; } .fb-soon-s4 { animation-delay: 1.7s; } @keyframes fb-soon-twinkle { 0%, 100% { opacity: .25; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.12); } } @media (prefers-reduced-motion: reduce) { .fb-soon-spark { animation: none; opacity: .7; } } .fb-soon-eyebrow { margin: 0 0 6px; color: var(--awb-color4); font-size: .78em; letter-spacing: .14em; /* letter-spacing also lands after the final character, so centred text sits half a space left of true centre. Push it back by the same amount. */ text-indent: .14em; text-transform: uppercase; } .fb-soon-title { margin: 0 0 14px; text-wrap: balance; } .fb-soon-lede { max-width: 34rem; /* Avada's paragraph margins load later and reset the auto side margins, so the capped-width lede sat flush left inside a centred card — 1px of gap on the left against 95px on the right. */ margin-left: auto !important; margin-right: auto !important; margin-top: 0; margin-bottom: 22px; color: var(--awb-color6); font-size: 1.06em; line-height: 1.6; /* Even line lengths — a centred paragraph with one long line and one short one is what reads as "off". */ text-wrap: balance; } .fb-soon-note { text-wrap: balance; } .fb-soon-note { margin: 0; padding-top: 18px; border-top: 1px solid var(--awb-color3); color: var(--awb-color6); } @media (max-width: 640px) { .fb-soon { padding: 32px 20px 28px; border-radius: 10px; } .fb-soon-art { width: 104px; } } /* Single post and episode titles were 36px, larger than the page needs once the artwork and notes sit beneath them. */ .single-episode h1.entry-title, .single-post h1.entry-title { /* Avada writes style="--fontSize: 36" inline and computes font-size from it, so a plain font-size rule never wins. An !important declaration in a stylesheet does beat a non-important inline one, so override the variable. */ --fontSize: 30 !important; font-size: 30px !important; line-height: 1.25; text-wrap: balance; } @media (max-width: 640px) { .single-episode h1.entry-title, .single-post h1.entry-title { --fontSize: 25 !important; font-size: 25px !important; } } /* Host section on /about/. The artwork column carries the show mark rather than a portrait — Al Borealis presents under that name and publishes no photograph, so there is none to use. */ .fb-host-grid { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; } .fb-host-art img { width: 100%; height: auto; border-radius: 10px; display: block; } .fb-host-body p:first-child { margin-top: 0; } @media (max-width: 760px) { .fb-host-grid { grid-template-columns: 1fr; gap: 18px; } .fb-host-art { max-width: 160px; } }