/* ========================================================================== Awakened Business - site stylesheet Built and maintained by DeCODE Digital. All custom CSS for this build lives here. Do not paste CSS into the Beaver Builder page settings: add it to this file instead so every page shares one source of truth. Enqueued from the child theme functions.php and cache-busted on save (filemtime). Brand colours come from the Beaver Builder global palette: var(--fl-global-navy|gold|sky-blue|midnight|charcoal|grey|off-white|white) ========================================================================== */ /* -------------------------------------------------------------------------- 1. Brand helpers -------------------------------------------------------------------------- */ /* Inline colour spans inside headings: gold */ .fl-heading .fl-heading-text span.g, .fl-heading h1 span.g, .fl-heading h2 span.g, .fl-heading h3 span.g { color: var(--fl-global-gold) !important; } .fl-heading .fl-heading-text span.n { color: var(--fl-global-navy) !important; } .fl-heading .fl-heading-text span.w { color: #fff !important; } .ab-white p, .ab-white li { color: #fff; } .ab-narrow .fl-rich-text { max-width: 820px; margin: 0 auto; } /* Buttons are never underlined */ .fl-button, .fl-button:hover, .fl-button:visited { text-decoration: none !important; } /* Equal-height card rows (BB columns are floated by default) */ .fl-col-group:has(> .ab-tcard), .fl-col-group:has(> .ab-stat) { display: flex; flex-wrap: wrap; align-items: stretch; } .ab-tcard, .ab-stat { display: flex; } /* -------------------------------------------------------------------------- 2. Eyebrow pills Small uppercase navy pills that sit above a section heading. Applies to PowerPack Heading "prefix" text and to any element given .ab-eyebrow. Navy on purpose: gold pills read as buttons sitting next to the real gold CTAs. -------------------------------------------------------------------------- */ body .pp-heading-prefix, body .ab-eyebrow { display: inline-block; margin: 0 0 18px; padding: 7px 14px; background: var(--fl-global-navy); color: #fff; border-radius: 999px; font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 1.5px; text-transform: uppercase; } /* Light variant: white pill with navy text, for pills that sit on a navy, midnight, gold or dark photo background where the navy pill would disappear. Add .ab-eyebrow--light to new ones. The scoped aliases below cover the places that need it today: home page Mick's story card, the Who is Mick hero, the Who is Mick "The Mission" navy row. */ body .ab-eyebrow--light, body .ab-mick-hero .ab-eyebrow, body .fl-node-abstoryrow01 .ab-eyebrow, body .fl-node-gxutkzvd2mib .ab-eyebrow { background: #fff; color: var(--fl-global-navy); } /* Alignment. A pill is an inline-block, so it is positioned by the text alignment of the block it sits in, not by its own. Beaver Builder writes the alignment onto the paragraph itself (style="text-align:center"), which only centres the label inside the pill and leaves the pill hard left under a centred heading. These rules move the pill across to match. On markup that carries no inline style, add .ab-eyebrow--center or .ab-eyebrow--right. */ body .ab-eyebrow[style*="text-align:center"], body .ab-eyebrow[style*="text-align: center"], body .ab-eyebrow--center { display: table; margin-left: auto; margin-right: auto; } body .ab-eyebrow[style*="text-align:right"], body .ab-eyebrow[style*="text-align: right"], body .ab-eyebrow--right { display: table; margin-left: auto; margin-right: 0; } /* -------------------------------------------------------------------------- 3. Hero -------------------------------------------------------------------------- */ .ab-hero .fl-row-content-wrap { background-position: center top; } /* -------------------------------------------------------------------------- 4. Mick's story section -------------------------------------------------------------------------- */ /* Pull quote. The class works three ways: on a rich text module wrapper, on a single paragraph inside a rich text block, or on a heading module (the heading then drops its own font size and takes the quote treatment). */ .ab-pullquote p, p.ab-pullquote, .ab-pullquote .fl-heading { margin: 0; padding: 2px 0 2px 18px; border-left: 4px solid var(--fl-global-gold); color: var(--fl-global-gold); font-family: "Baloo 2", Montserrat, sans-serif; font-size: 26px; font-weight: 800; line-height: 1.25; } /* Body copy inside the story card */ .ab-story-body p { margin: 0 0 16px; } .ab-story-body p:last-child { margin-bottom: 0; } /* Closing kicker line */ .ab-story-kicker p { margin: 0; } /* Proof numbers strip */ .ab-stat > .fl-col-content { flex: 1 1 auto; padding: 22px 22px 20px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(255,255,255,.08); } .ab-stat-num { margin: 0 0 4px; font-family: "Baloo 2", Montserrat, sans-serif; font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--fl-global-gold); } .ab-stat-label { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.86); } /* -------------------------------------------------------------------------- 5. Testimonial cards -------------------------------------------------------------------------- */ .ab-tcard > .fl-col-content { flex: 1 1 auto; display: flex; flex-direction: column; } .ab-tcard .ab-quote { flex: 1 1 auto; } .ab-tcard .pp-rating { font-size: 20px; letter-spacing: 3px; line-height: 1; } .ab-quote p { margin: 0 0 14px; color: var(--fl-global-charcoal); } .ab-quote p:last-child { margin-bottom: 0; } .ab-reviewer { margin: 0; } .ab-reviewer strong { display: block; color: var(--fl-global-navy); font-weight: 700; } .ab-reviewer span { font-weight: 400; color: var(--fl-global-grey); } /* Legacy Font Awesome star markup, still used on inner pages */ .ab-stars i { color: var(--fl-global-sky-blue); font-size: 18px; margin-right: 4px; } /* -------------------------------------------------------------------------- 6. The Arena Academy lockup Put the class "arena-title" on the PowerPack dual heading whose primary title is "The Arena" and secondary title is "Academy". Matches the Figma: an oversized gold wordmark with a white ACADEMY plate tucked under its right edge. PowerPack writes its own long selectors (div.fl-node-X .pp-heading-content .pp-heading .heading-title span.pp-primary-title), so these rules carry the same depth plus "body" to win the cascade. Keep that prefix if you edit them. The lockup sizes itself off the viewport, so the module's own Typography settings in Beaver Builder are deliberately overridden here. (Replaced the old .ab-arena-title / .ab-academy / .ab-mixed / .ab-spaced rules, which nothing on the site uses any more.) -------------------------------------------------------------------------- */ /* Drops the lockup down the banner the way the Figma frame has it */ body div.arena-title { margin-top: clamp(20px, 3vw, 44px); } body div.arena-title .pp-heading-content .pp-heading .heading-title { margin: 0; line-height: 1; } /* THE ARENA */ body div.arena-title .pp-heading-content .pp-heading .heading-title span.pp-primary-title { display: block; margin: 0 -0.2em 0 0; /* cancels the trailing letter-space so it sits flush right */ font-family: Montserrat, sans-serif; font-size: clamp(32px, 5.4vw, 78px); font-weight: 800; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fl-global-gold); } /* ACADEMY plate */ body div.arena-title .pp-heading-content .pp-heading .heading-title span.pp-secondary-title { display: inline-block; margin: clamp(10px, 1.7vw, 24px) 0 0; padding: 0.42em 0.4em 0.42em 0.8em; background: #fff; font-family: Montserrat, sans-serif; font-size: clamp(13px, 1.95vw, 28px); font-weight: 700; line-height: 1; letter-spacing: 0.4em; text-transform: uppercase; color: var(--fl-global-navy); } /* Supporting copy under the lockup */ body div.arena-title .pp-heading-content .pp-sub-heading { margin-top: clamp(18px, 2.2vw, 30px); color: #fff; } body div.arena-title .pp-heading-content .pp-sub-heading p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; } body div.arena-title .pp-heading-content .pp-sub-heading p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 7. Newsletter -------------------------------------------------------------------------- */ .ab-newsletter { max-width: 640px; margin: 0 auto; } /* -------------------------------------------------------------------------- 8. Responsive -------------------------------------------------------------------------- */ @media (max-width: 991px) { .ab-stat > .fl-col-content { padding: 18px 18px 16px; } .ab-stat-num { font-size: 26px; } } @media (max-width: 767px) { body .pp-heading-prefix, body .ab-eyebrow { font-size: 10px; padding: 6px 12px; letter-spacing: 1.3px; } .ab-pullquote p, p.ab-pullquote, .ab-pullquote .fl-heading { font-size: 22px; padding-left: 14px; } .ab-stat > .fl-col-content { padding: 16px 18px 14px; } .ab-stat-num { font-size: 24px; } body div.arena-title { margin-top: 0; } body div.arena-title .pp-heading-content .pp-heading .heading-title span.pp-primary-title { font-size: 40px; letter-spacing: 0.16em; margin-right: -0.16em; } body div.arena-title .pp-heading-content .pp-heading .heading-title span.pp-secondary-title { font-size: 15px; letter-spacing: 0.34em; } /* The Colosseum artwork is baked into the row background at full size and runs straight through the copy on a phone. Drop it below 768 so the banner stays readable. Delete this if a mobile crop of the artwork is added to the row instead. */ .fl-row:has(.arena-title) > .fl-row-content-wrap { background-image: none; background-color: #0A3B7B; } } /* -------------------------------------------------------------------------- 9. Header line-height guard The Themer Header template collapses the HTML module with line-height: 0 to kill the whitespace gap under it. That inherits into the header markup and squashes the nav and the mobile menu, so give the header's own elements a real line-height back. -------------------------------------------------------------------------- */ #dc-nav, #dc-mobile, #dc-mobile-close { line-height: 1.2; } .dc-nav__menu > li > a { line-height: 1.2; } .dc-nav__menu .sub-menu a { line-height: 1.35; } .dc-mobile__menu > li > a { line-height: 1.15; } .dc-mobile__menu .sub-menu a { line-height: 1.35; } /* -------------------------------------------------------------------------- 11. Who is Mick -------------------------------------------------------------------------- */ /* Long-read sections. A full 1140px measure is a hard read for body copy, so .ab-measure on the row pulls the whole section in (eyebrow, heading and copy together) to a comfortable line length. Reusable on any long-form section. */ .ab-measure > .fl-row-content-wrap > .fl-row-content { max-width: 880px; } /* Hero: gold pull quote under the H1, then the credit line, then the button. */ .ab-mick-hero p.ab-pullquote { margin-bottom: 24px; } .ab-mick-hero .fl-rich-text p:last-child { margin-bottom: 0; } @media (max-width: 767px) { .ab-mick-hero p.ab-pullquote { margin-bottom: 18px; } } /* -------------------------------------------------------------------------- 10. Blog post table of contents (PowerPack TOC module) The card in the blog post sidebar (Themer Post layout 507). The module scans h2 and h3 inside #post-content, so a post with no headings shows an empty card - that is a content problem, not a CSS one. Gotcha: the Themer template's own page CSS styles this with ".pp-toc-container .pp-toc-list ...", but PowerPack actually emits "ul.pp-toc-list-wrapper" - no element on the page has the class "pp-toc-list", so none of those rules have ever applied and the entries rendered as default 16px sky-blue links with no bullets and no spacing. These rules re-do that styling against the real class names. They carry three class selectors plus "body" so they beat PowerPack's own per-node rules (.fl-node-X .pp-toc-list-wrapper li a). If you edit them, keep that depth or nothing applies. -------------------------------------------------------------------------- */ body .pp-toc-container .pp-toc-body { padding: 0; } body .pp-toc-container .pp-toc-body ul.pp-toc-list-wrapper { margin: 0; padding: 0; list-style: none; } body .pp-toc-container .pp-toc-body ul.pp-toc-list-wrapper li { position: relative; margin: 0 0 8px; padding-left: 16px; list-style: none; } body .pp-toc-container .pp-toc-body ul.pp-toc-list-wrapper > li:last-child { margin-bottom: 0; } /* Gold dot marker */ body .pp-toc-container .pp-toc-body ul.pp-toc-list-wrapper li:before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--fl-global-gold); } body .pp-toc-container .pp-toc-body ul.pp-toc-list-wrapper li a { display: block; font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--fl-global-navy); text-decoration: none; } body .pp-toc-container .pp-toc-body ul.pp-toc-list-wrapper li a:hover, body .pp-toc-container .pp-toc-body ul.pp-toc-list-wrapper li a:focus { color: var(--fl-global-sky-blue); } /* Nested h3 entries (hierarchical_view is on) sit indented with a quieter dot */ body .pp-toc-container .pp-toc-body ul.pp-toc-list-wrapper ul { margin: 8px 0 0 14px; padding: 0; list-style: none; } body .pp-toc-container .pp-toc-body ul.pp-toc-list-wrapper ul li:before { width: 5px; height: 5px; top: 8px; background: rgba(26,58,119,.4); } body .pp-toc-container .pp-toc-body ul.pp-toc-list-wrapper ul li a { font-size: 13px; color: var(--fl-global-charcoal); } /* -------------------------------------------------------------------------- 12. Mobile polish -------------------------------------------------------------------------- */ /* No sideways drag. Nothing on this site is meant to scroll horizontally, so clamp it: a single over-wide element makes the whole page slide left and right under a thumb on a phone. This is a safety net, not a licence to leave over-wide elements in place - fix the element too. */ html, body { overflow-x: hidden; max-width: 100%; } /* The culprit on the Contact page: mick@awakenedbusiness.com.au is one long unbreakable word inside a flex info box. "anywhere" lets it wrap and, unlike break-word, also lets the flex item shrink below the word's width. */ .ab-contact-val, .ab-contact-val a { overflow-wrap: anywhere; } /* Row edge shapes (the angled cut under the hero). Beaver Builder scales the shape with the row width, so the same angle that reads as a subtle cut on a desktop becomes a fat off-white band across the bottom of the photo on a phone. Cap the height so it stays a cut, not a band. */ @media (max-width: 991px) { .fl-builder-top-edge-layer svg, .fl-builder-bottom-edge-layer svg { max-height: 40px; } } @media (max-width: 767px) { .fl-builder-top-edge-layer svg, .fl-builder-bottom-edge-layer svg { max-height: 14px; } } /* -------------------------------------------------------------------------- 13. Contact page The two cards in the "How can we help?" row carry their own background, radius, shadow and padding in their COLUMN settings, so they stay editable in the builder. Only what Beaver Builder settings cannot do lives here: equal card heights, the two-across form grid and the field treatment. -------------------------------------------------------------------------- */ /* Form card and details card sit level with each other. BB's Equal Heights toggle does not survive a REST write, so it is done the same way as .ab-tcard above. */ .fl-col-group:has(> .ab-form-card) { display: flex; flex-wrap: wrap; align-items: stretch; } .ab-form-card, .ab-contact-card { display: flex; } .ab-form-card > .fl-col-content, .ab-contact-card > .fl-col-content { flex: 1 1 auto; } /* Comfortable measure for the hero line and the section intros */ .ab-hero-lead .fl-rich-text { max-width: 620px; margin: 0 auto; } .ab-contact-lead .fl-rich-text { max-width: 700px; margin: 0 auto; } /* --- Details card ------------------------------------------------------- */ /* The value line of each contact info box. Long unbreakable values (the email address) have to be able to wrap inside the flex box. */ .ab-contact-card .ab-cbox .pp-infobox-description p { margin: 0; } .ab-contact-card .ab-cbox .pp-infobox-description, .ab-contact-card .ab-cbox a { overflow-wrap: anywhere; } .ab-contact-card .ab-cbox a, .ab-contact-card .ab-cbox a:hover { text-decoration: none; } .ab-contact-card .ab-cbox a:hover .pp-infobox-description { color: var(--fl-global-gold); } .ab-contact-card .ab-cbox .pp-icon-wrapper { transition: background .2s ease; } .ab-contact-card .ab-cbox a:hover .pp-icon-wrapper { background: rgba(255,255,255,.18); } /* Reply-time note at the foot of the card */ .ab-card-note { display: flex; gap: 10px; margin: 30px 0 0; padding: 15px 18px; border-radius: 10px; background: rgba(255,255,255,.08); font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.86); } .ab-card-note i { margin-top: 3px; color: var(--fl-global-gold); } /* --- Form --------------------------------------------------------------- */ /* Two fields to a row on desktop, one on a phone. The message, the button and the error line always span the full width. The module's own settings still own the border, radius and button colours; these rules carry "body" so they sit above Beaver Builder's per-node CSS. */ body .ab-form-card .fl-contact-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; } body .ab-form-card .fl-contact-form > .fl-message, body .ab-form-card .fl-contact-form > .fl-button-wrap, body .ab-form-card .fl-contact-form > .fl-send-error { grid-column: 1 / -1; } body .ab-form-card .fl-input-group { margin: 0 0 18px; } body .ab-form-card .fl-contact-form-label { display: block; margin: 0 0 7px; font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; } body .ab-form-card .fl-input-group input, body .ab-form-card .fl-input-group textarea { width: 100%; background: #fbfcfe; box-shadow: none; font-family: Montserrat, sans-serif; font-size: 15px; color: var(--fl-global-charcoal); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } body .ab-form-card .fl-input-group input:focus, body .ab-form-card .fl-input-group textarea:focus { background: #fff; border-color: var(--fl-global-sky-blue); box-shadow: 0 0 0 3px rgba(41,149,237,.16); outline: none; } body .ab-form-card .fl-input-group textarea { min-height: 132px; resize: vertical; } body .ab-form-card .fl-input-group input::placeholder, body .ab-form-card .fl-input-group textarea::placeholder { color: #9aa4b4; } body .ab-form-card .fl-button-wrap { margin-top: 4px; } /* --- What happens next -------------------------------------------------- */ /* Three step cards, level with each other whatever the copy length. */ .fl-col-group:has(.ab-step) { display: flex; flex-wrap: wrap; align-items: stretch; } .fl-col-group:has(.ab-step) > .fl-col { display: flex; } .fl-col-group:has(.ab-step) > .fl-col > .fl-col-content { flex: 1 1 auto; display: flex; } .ab-step, .ab-step > .fl-module-content { flex: 1 1 auto; display: flex; } .ab-step .pp-infobox { flex: 1 1 auto; } .ab-step .pp-infobox-title-prefix { display: block; } @media (max-width: 767px) { body .ab-form-card .fl-contact-form { grid-template-columns: 1fr; } .ab-card-note { margin-top: 24px; } } /* -------------------------------------------------------------------------- 14. Leadership quiz The quiz is a survey served from the Awakened CRM (link.getcmm.com) inside an iframe, so the page owns the framing and the CRM owns the questions, the scoring, the result screen AND the survey's own colours. Nothing here can reach inside the iframe - CSS does not cross that boundary - so the survey's button colour has to be changed in the CRM, not on this page. -------------------------------------------------------------------------- */ /* Hero facts line: three short reassurances under the lead paragraph, so the commitment is obvious before anyone clicks Start. */ .ab-quiz-meta .fl-rich-text p { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 0; font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; color: rgba(255,255,255,.92); } .ab-quiz-meta .fl-rich-text i { margin-right: 9px; color: var(--fl-global-gold); } /* The quiz holder. The survey draws its own white card with a shadow, so this deliberately adds no card of its own - two nested white cards looked like a mistake. All this does is centre the embed and hold it to a sensible measure on the off-white band. width: 100% is load bearing. Beaver Builder 2.11 makes .fl-col-content a column flex container, and "margin: 0 auto" on a flex item makes it shrink-to-fit, which left the iframe at its intrinsic 300px. */ .ab-quiz-frame { width: 100%; max-width: 760px; margin: 0 auto; } /* form_embed.js sets the real height from inside the iframe and updates it on every question, so do not set a height here. The min-height is only the floor for the moment before that script runs, or if it is blocked. */ .ab-quiz-frame iframe { display: block; width: 100%; min-height: 340px; border: 0; } /* The hero button jumps to the quiz row (row ID "quiz"). Keep the landing point clear of the sticky header. */ #quiz { scroll-margin-top: 100px; } /* "What you get" points on the navy band. They reuse .ab-step for equal heights; only the on-navy treatment differs, and that lives in the module settings so it stays editable in the builder. */ .ab-quiz-point .pp-infobox-description p { margin: 0; } @media (max-width: 767px) { .ab-quiz-meta .fl-rich-text p { gap: 8px 18px; font-size: 13px; } #quiz { scroll-margin-top: 80px; } } /* -------------------------------------------------------------------------- 15. The Arena Academy page These rules used to live in the page's own Beaver Builder page CSS. They are here so every page shares one source of truth, and so the stale .ab-eyebrow rule that page carried (flat gold text) stops fighting the pill styling in section 2. -------------------------------------------------------------------------- */ /* Hero tag above the H1 - a wider, gold-on-translucent version of the pill */ .ab-tag { display: inline-block; padding: 12px 22px; border-radius: 4px; background: rgba(255,255,255,.14); color: var(--fl-global-gold); font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } /* Tick and cross lists. Put .ab-check on the rich text module and on the