AdviseYou – Your budget. Broken down.

<!–

SHARED TEMPLATE — adviseyou.com.au / Budget Breakdown pages.

This is NOT a full page. It’s the shell every page shares: head assets,

the full CSS design system, header, footer, and shared JS. Drop this

once wherever your WordPress “template” mechanism actually lives.

Each individual page’s own content goes where the PAGE CONTENT GOES HERE

marker sits below, inside the main element. See home-page-content.html and

careers-page-content.html for what goes there.

Per-page <title> and meta description are deliberately NOT included

here — those should come from WordPress’s own Page Title field and

your SEO plugin (Yoast/RankMath), not from this block.

Cleaned up from the original build: now that both the home page and

the careers page use real Forminator shortcodes instead of the mock

JS forms, all the mock-form-only CSS/JS (multi-step progress, field

validation styling, character counters, photo preview, the honeypot

trap, the fake thank-you panel) has been removed — Forminator handles

all of that itself now. Only .form-card remains, as the styled

wrapper around each shortcode. The header’s Apply Now button now uses

a real href (/#apply) with JS enhancement, so it still works as a

plain link on pages that don’t have an #apply section, instead of

silently doing nothing.

–>

<style>

:root{

–paper:#EEF0ED;

–paper-deep:#E2E4DD;

–ink:#14171A;

–ink-soft:#20242A;

–red:#D6301F;

–red-dark:#9B1D11;

–red-text:#B82818;

–slate:#565C61;

–line:#D4D6CC;

–line-dark:#3A3F46;

–white:#FFFFFF;

–display:’Big Shoulders Display’,sans-serif;

–body:’Inter’,-apple-system,BlinkMacSystemFont,sans-serif;

–mono:’IBM Plex Mono’,ui-monospace,monospace;

padding-top:env(safe-area-inset-top,0px);

padding-bottom:env(safe-area-inset-bottom,0px);

}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px);}

body{margin:0;background:var(–paper);color:var(–ink);font-family:var(–body);font-size:16px;line-height:1.55;}

img{max-width:100%;display:block;}

a{color:inherit;}

button{font:inherit;}

ul,ol{margin:0;padding:0;list-style:none;}

h1,h2,h3,p{margin:0;}

:focus-visible{outline:3px solid var(–red);outline-offset:2px;}

@media (prefers-reduced-motion: reduce){

*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}

}

.container{max-width:640px;margin:0 auto;padding:0 1.25rem;}

.container-wide{max-width:1080px;margin:0 auto;padding:0 1.25rem;}

.h1{font-family:var(–display);font-weight:800;font-size:clamp(2.5rem,9.5vw,4.8rem);line-height:0.97;letter-spacing:-0.01em;text-transform:uppercase;max-width:14ch;}

.h2{font-family:var(–display);font-weight:700;font-size:clamp(2rem,6.5vw,3.1rem);line-height:1.02;letter-spacing:-0.005em;text-transform:uppercase;max-width:16ch;}

.h3{font-family:var(–display);font-weight:700;font-size:1.4rem;text-transform:uppercase;letter-spacing:-0.005em;}

.lede{font-size:1.1rem;color:var(–slate);max-width:46ch;}

.on-dark .lede{color:#C7CBD1;}

.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(–mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(–ink);margin-bottom:1rem;}

.eyebrow::before{content:”;width:8px;height:8px;background:var(–red);border-radius:2px;flex-shrink:0;}

.on-dark .eyebrow{color:var(–white);}

section{padding:4.5rem 0;}

.section-head{margin-bottom:2.5rem;}

.intro{padding:3rem 0 1.5rem;}

.apply-form-section{padding-bottom:4rem;}

[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}

[data-reveal].is-visible{opacity:1;transform:translateY(0);}

/* Header (shared, identical on every page) */

.site-header{position:sticky;top:0;z-index:50;background:rgba(238,240,237,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(–line);}

.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.25rem;max-width:1080px;margin:0 auto;}

.wordmark{font-family:var(–display);font-weight:800;font-size:1.05rem;text-transform:uppercase;line-height:1;text-decoration:none;letter-spacing:-0.01em;}

.wordmark-sub{display:block;font-family:var(–mono);font-size:.6rem;letter-spacing:.1em;color:var(–slate);text-transform:uppercase;font-weight:500;margin-top:.15rem;}

/* Buttons */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.95rem 1.7rem;border-radius:999px;font-weight:700;font-size:.95rem;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s ease,background .15s ease,border-color .15s ease;white-space:nowrap;}

.btn-primary{background:var(–red);color:var(–white);}

.btn-primary:hover{background:var(–red-dark);transform:translateY(-1px);}

.btn-ghost{background:transparent;color:var(–ink);border-color:var(–line);}

.btn-ghost:hover{border-color:var(–slate);}

.on-dark .btn-ghost{color:var(–white);border-color:var(–line-dark);}

.btn-small{padding:.6rem 1.1rem;font-size:.85rem;}

.btn-block{width:100%;}

/* HERO (used by the home page) */

.hero{background:var(–ink);color:var(–white);padding:3.5rem 0 4.5rem;}

.hero-inner{display:flex;flex-direction:column;gap:2.75rem;}

.hero-copy p.lede{margin:1.25rem 0 1.75rem;}

.hero-cta-row{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;}

.hero-micro{font-family:var(–mono);font-size:.78rem;color:#9AA0A6;letter-spacing:.02em;}

.statement-card{background:var(–white);color:var(–ink);border-radius:14px;padding:1.4rem 1.3rem 1.6rem;box-shadow:0 24px 48px -14px rgba(0,0,0,.45);position:relative;transform:rotate(-1.4deg);border:1px solid var(–line);max-width:380px;margin:0 auto;}

.statement-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.85rem;}

.statement-label{font-family:var(–mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}

.statement-tag{font-family:var(–mono);font-size:.6rem;color:var(–slate);letter-spacing:.06em;text-transform:uppercase;}

.statement-lines li{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;padding:.5rem 0;border-bottom:1px dashed var(–line);font-family:var(–mono);font-size:.83rem;}

.statement-lines li span:first-child{color:var(–ink);}

.statement-lines li .amt{color:var(–slate);flex-shrink:0;}

.statement-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:.9rem;padding-top:.9rem;border-top:2px solid var(–ink);font-family:var(–mono);}

.statement-total .amt-total{color:var(–red);font-weight:700;font-size:1.5rem;}

.statement-stamp{position:absolute;top:1.1rem;right:-.4rem;transform:rotate(9deg);border:2px solid var(–red);color:var(–red-text);font-family:var(–mono);font-weight:700;font-size:.65rem;letter-spacing:.08em;padding:.25rem .55rem;border-radius:5px;background:rgba(214,48,31,.06);}

@media(min-width:860px){

.hero-inner{flex-direction:row;align-items:center;gap:3.5rem;}

.hero-copy{flex:1;}

.statement-card{flex-shrink:0;width:380px;margin:0;}

}

/* PAIN POINTS */

.pain-list li{display:flex;gap:.75rem;padding:.9rem 0;border-bottom:1px solid var(–line);font-size:1.05rem;}

.pain-list li:last-child{border-bottom:none;}

.pain-list li::before{content:’—’;color:var(–red-text);font-weight:700;flex-shrink:0;}

/* ABOUT SHOW */

.about-show .lede{max-width:60ch;}

.about-show .micro-line{margin-top:1.25rem;font-family:var(–mono);font-size:.85rem;color:var(–slate);}

/* BENEFITS */

.credit-list{display:grid;gap:.9rem;}

.credit-list li{display:flex;gap:.85rem;align-items:flex-start;padding:1rem 1.1rem;background:var(–white);border:1px solid var(–line);border-radius:10px;}

.credit-plus{font-family:var(–mono);font-weight:700;color:var(–red-text);font-size:1.1rem;flex-shrink:0;}

@media(min-width:700px){ .credit-list{grid-template-columns:1fr 1fr;} }

/* HOW IT WORKS */

.steps{display:grid;gap:1.75rem;}

.step-num{font-family:var(–mono);font-size:.85rem;color:var(–red-text);font-weight:700;display:block;margin-bottom:.5rem;}

.steps h3{margin-bottom:.4rem;}

.steps p{color:var(–slate);max-width:38ch;}

@media(min-width:760px){ .steps{grid-template-columns:repeat(4,1fr);gap:1.5rem;} .steps p{max-width:none;} }

/* HOST */

.host-inner{display:flex;flex-direction:column;gap:1.5rem;}

.host-bio{max-width:62ch;color:var(–slate);font-size:1.05rem;}

.host-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(–red-text);text-decoration:underline;margin-top:.5rem;}

/* FAQ */

.faq-item{border-bottom:1px solid var(–line);}

.faq-q{width:100%;text-align:left;background:none;border:none;padding:1.15rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(–body);font-weight:700;font-size:1.02rem;cursor:pointer;color:var(–ink);}

.faq-icon{font-family:var(–mono);font-size:1.2rem;color:var(–red-text);flex-shrink:0;transition:transform .25s ease;}

.faq-item.is-open .faq-icon{transform:rotate(45deg);}

.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}

.faq-item.is-open .faq-a{max-height:320px;}

.faq-a p{padding-bottom:1.15rem;color:var(–slate);max-width:58ch;}

/* APPLY / FORM WRAPPER — .form-card wraps every Forminator shortcode

on the site so each embedded form sits in a consistent styled card.

Style the fields themselves via Forminator’s own Design tab +

Custom CSS panel (per form), not here. */

.apply{background:var(–ink);color:var(–white);}

.apply .lede{margin-top:.75rem;margin-bottom:2rem;}

.form-card{background:var(–paper);color:var(–ink);border-radius:18px;padding:1.5rem 1.25rem 1.75rem;}

/* FOOTER (shared, identical on every page) */

.site-footer{background:var(–ink-soft);color:#9AA0A6;padding:3rem 0 2.5rem;}

.footer-inner{display:flex;flex-direction:column;gap:1rem;}

.footer-wordmark{font-family:var(–display);font-weight:800;color:var(–white);font-size:1.1rem;text-transform:uppercase;}

.footer-links{display:flex;flex-wrap:wrap;gap:1.25rem;}

.footer-links a{text-decoration:underline;font-size:.88rem;}

.footer-fine{font-size:.78rem;color:#6C7278;margin-top:.5rem;}

</style>

<a class=”wordmark” href=”/”>Budget Breakdown<span class=”wordmark-sub”>by AdviseYou</span></a>

<a class=”btn btn-primary btn-small” href=”/#apply” data-scroll-to=”#apply”>Apply Now</a>

</div>

</header>

<!– PAGE CONTENT GOES HERE –>

</main>

<span class=”footer-wordmark”>Budget Breakdown</span>

<p>A show by <a href=”https://adviseyou.com.au”>AdviseYou</a></p>

<a href=”https://adviseyou.com.au/privacy-policy”>Privacy Policy</a>

<a href=”mailto:apply@adviseyou.com.au”>apply@adviseyou.com.au</a>

</nav>

</div>

</footer>

(function(){

// Smooth scroll for [data-scroll-to] triggers. Only intercepts the

// click when the target actually exists on THIS page — otherwise the

// element’s real href is left alone, so a header link like

// href=”/#apply” still navigates normally from pages (e.g. careers)

// that don’t have an #apply section of their own.

document.querySelectorAll(‘[data-scroll-to]’).forEach(function(btn){

btn.addEventListener(‘click’, function(e){

var target = document.querySelector(btn.getAttribute(‘data-scroll-to’));

if(target){

e.preventDefault();

target.scrollIntoView({behavior:’smooth’, block:’start’});

}

});

// Scroll reveal — harmless no-op on pages with no [data-reveal] elements

var revealEls = document.querySelectorAll(‘[data-reveal]’);

var prefersReduced = window.matchMedia(‘(prefers-reduced-motion: reduce)’).matches;

if(prefersReduced){

revealEls.forEach(function(el){ el.classList.add(‘is-visible’); });

} else if(‘IntersectionObserver’ in window){

var io = new IntersectionObserver(function(entries){

entries.forEach(function(entry){

if(entry.isIntersecting){

entry.target.classList.add(‘is-visible’);

io.unobserve(entry.target);

}

});

}, {threshold:0.15});

revealEls.forEach(function(el){ io.observe(el); });

} else {

revealEls.forEach(function(el){ el.classList.add(‘is-visible’); });

}

// FAQ accordion — harmless no-op on pages with no .faq-item elements

document.querySelectorAll(‘.faq-item’).forEach(function(item){

var btn = item.querySelector(‘.faq-q’);

btn.addEventListener(‘click’, function(){

var isOpen = item.classList.contains(‘is-open’);

document.querySelectorAll(‘.faq-item’).forEach(function(i){

i.classList.remove(‘is-open’);

i.querySelector(‘.faq-q’).setAttribute(‘aria-expanded’,’false’);

});

if(!isOpen){

item.classList.add(‘is-open’);

btn.setAttribute(‘aria-expanded’,’true’);

}

});

})();

</script>