/* Theme Name: Better Coaching Academy Theme URI: https://bettercoachingacademy.com Author: BCA Description: Custom theme for Better Coaching Academy — a coaching program for Better Homes & Gardens Real Estate agents. Black, white and silver, with a duotone light mode and a native-style mobile tab bar. Version: 2.27.22 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bca Tags: one-column, custom-colors, custom-menu, translation-ready, full-width-template */ /* ============================================================ DESIGN TOKENS — the single source of truth for colour. Change a value here and every page follows, in both themes. Dark is the default; [data-theme="light"] switches the page. .inv re-applies the DARK palette inside a light page, which is how the duotone light mode keeps hero/band/footer black. ============================================================ */ :root { --w: 255,255,255; --s0: #07070a; --s1: #0b0c10; --s2: #101116; --s3: #1b1d24; --s4: #3a3d45; --t-hi: #ffffff; --t0: #f7f8fb; --t1: #f2f3f7; --t2: #c3c8d1; --t3: #a0a6b1; --t4: #8d939e; --t5: #7c828e; --t6: #7a808b; --ghost: #2c2f37; --on-metal: #0a0a0d; --on-metal-2: rgba(10,10,13,.66); --on-metal-3: rgba(10,10,13,.6); --on-metal-line: rgba(10,10,13,.25); --metal: linear-gradient(160deg,#fafbfd,#b4b9c4 60%,#eceef3); --metal-text: linear-gradient(105deg,#ffffff 5%,#8d939f 45%,#f4f6fa 75%); --prog: linear-gradient(90deg,#6f7480,#ffffff); --save: #4fd18b; --save-dim: rgba(79,209,139,.62); --save-bg: rgba(79,209,139,.07); --save-line: rgba(79,209,139,.2); --warn: #ff8f6b; --warn-bg: rgba(255,143,107,.08); --warn-line: rgba(255,143,107,.28); --plate: linear-gradient(145deg,#2a2c33,#0c0d10); --hero: radial-gradient(120% 90% at 12% 0%,#171820 0%,#0a0a0e 48%,#07070a 100%); --band: radial-gradient(80% 120% at 50% 0%,#191b21,#08080b 70%); --tint: radial-gradient(52% 42% at 80% 14%,rgba(190,198,214,.15),transparent 70%); --console: linear-gradient(180deg,rgba(24,26,32,.94),rgba(11,12,15,.97)); --pillar-a: linear-gradient(180deg,#101116,#0a0b0e); --pillar-a-hover: linear-gradient(180deg,#1b1d24,#101116); --pillar-b: linear-gradient(180deg,#1a1c22,#0f1013); --pillar-b-hover: linear-gradient(180deg,#23262d,#14161a); --section-2: linear-gradient(180deg,#0d0e12,#09090c); --card-a: linear-gradient(160deg,#101217,#09090c 60%); --card-b: linear-gradient(200deg,#131519,#09090c 60%); --hatch: repeating-linear-gradient(135deg,#14151a 0 9px,#0e0f12 9px 18px); --glow: rgba(220,226,240,.7); --shadow: rgba(0,0,0,.92); --dock: rgba(12,13,17,.82); --blend: screen; } [data-theme='light'] { --w: 0,0,0; --s0: #f4f4f1; --s1: #ffffff; --s2: #edece7; --s3: #e3e1da; --s4: #cdcac1; --t-hi: #000000; --t0: #111317; --t1: #1c1f25; --t2: #33373f; --t3: #4d525b; --t4: #5d636d; --t5: #5f656d; --t6: #63686f; --ghost: #c9c6bd; --on-metal: #f7f8fb; --on-metal-2: rgba(247,248,251,.74); --on-metal-3: rgba(247,248,251,.64); --on-metal-line: rgba(247,248,251,.28); --metal: linear-gradient(160deg,#3a3e46,#111318 62%,#2b2f37); --metal-text: linear-gradient(105deg,#14171c 5%,#8a9099 48%,#20242b 78%); --prog: linear-gradient(90deg,#9aa0ab,#111317); --plate: linear-gradient(145deg,#ffffff,#dedcd4); --hero: radial-gradient(120% 90% at 12% 0%,#ffffff 0%,#f7f6f3 48%,#f4f4f1 100%); --band: radial-gradient(80% 120% at 50% 0%,#ffffff,#efeee9 70%); --tint: radial-gradient(52% 42% at 80% 14%,rgba(120,132,158,.10),transparent 70%); --console: linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,250,247,.99)); --pillar-a: linear-gradient(180deg,#ffffff,#f5f4f0); --pillar-a-hover: linear-gradient(180deg,#ffffff,#eceae4); --pillar-b: linear-gradient(180deg,#eeece6,#e4e2db); --pillar-b-hover: linear-gradient(180deg,#e7e5de,#dbd9d1); --section-2: linear-gradient(180deg,#efeee9,#f4f4f1); --card-a: linear-gradient(160deg,#ffffff,#f6f5f1 60%); --card-b: linear-gradient(200deg,#ffffff,#f6f5f1 60%); --hatch: repeating-linear-gradient(135deg,#e6e4dd 0 9px,#efeee9 9px 18px); --glow: rgba(24,26,32,.28); --shadow: rgba(30,32,38,.16); --dock: rgba(255,255,255,.86); --blend: multiply; --save: #14814f; --save-dim: rgba(20,129,79,.72); --save-bg: rgba(20,129,79,.07); --save-line: rgba(20,129,79,.18); --warn: #b1412a; --warn-bg: rgba(177,65,42,.06); --warn-line: rgba(177,65,42,.22); } /* Intentionally-dark sections and cards inside a light page. */ [data-theme='light'] .inv { --w: 255,255,255; --s0: #07070a; --s1: #0b0c10; --s2: #101116; --s3: #1b1d24; --s4: #3a3d45; --t-hi: #ffffff; --t0: #f7f8fb; --t1: #f2f3f7; --t2: #c3c8d1; --t3: #a0a6b1; --t4: #8d939e; --t5: #7c828e; --t6: #7a808b; --ghost: #2c2f37; --on-metal: #0a0a0d; --on-metal-2: rgba(10,10,13,.66); --on-metal-3: rgba(10,10,13,.6); --on-metal-line: rgba(10,10,13,.25); --metal: linear-gradient(160deg,#fafbfd,#b4b9c4 60%,#eceef3); --metal-text: linear-gradient(105deg,#ffffff 5%,#8d939f 45%,#f4f6fa 75%); --prog: linear-gradient(90deg,#6f7480,#ffffff); --save: #4fd18b; --save-dim: rgba(79,209,139,.62); --save-bg: rgba(79,209,139,.07); --save-line: rgba(79,209,139,.2); --warn: #ff8f6b; --warn-bg: rgba(255,143,107,.08); --warn-line: rgba(255,143,107,.28); --plate: linear-gradient(145deg,#2a2c33,#0c0d10); --hero: radial-gradient(120% 90% at 12% 0%,#171820 0%,#0a0a0e 48%,#07070a 100%); --band: radial-gradient(80% 120% at 50% 0%,#191b21,#08080b 70%); --tint: radial-gradient(52% 42% at 80% 14%,rgba(190,198,214,.15),transparent 70%); --console: linear-gradient(180deg,rgba(24,26,32,.94),rgba(11,12,15,.97)); --pillar-a: linear-gradient(180deg,#101116,#0a0b0e); --pillar-a-hover: linear-gradient(180deg,#1b1d24,#101116); --pillar-b: linear-gradient(180deg,#1a1c22,#0f1013); --pillar-b-hover: linear-gradient(180deg,#23262d,#14161a); --section-2: linear-gradient(180deg,#0d0e12,#09090c); --card-a: linear-gradient(160deg,#101217,#09090c 60%); --card-b: linear-gradient(200deg,#131519,#09090c 60%); --hatch: repeating-linear-gradient(135deg,#14151a 0 9px,#0e0f12 9px 18px); --glow: rgba(220,226,240,.7); --shadow: rgba(0,0,0,.92); --dock: rgba(12,13,17,.82); --blend: screen; } /* ---- fonts ---- The @font-face rules used to live here and pointed at assets/fonts/, which is empty. They were emitted unconditionally, so every page load asked for nine files that were not there and collected seven 404s (only the weights the page actually needed were requested). They now live in inc/design.php, inside the branch that already decides how fonts load: bca_fonts_are_self_hosted(). Self-hosted declares them and skips Google; otherwise nothing is declared and Google serves the same families, with the same weights. Drop the nine .woff2 files into assets/fonts/ and the local copies take over automatically, exactly as before -- the difference is that not having them no longer costs a request per face. */ html,body{margin:0;padding:0;scroll-behavior:smooth} html{background:var(--s0)} body{background:var(--s0);color:var(--t1);-webkit-font-smoothing:antialiased; font-family:'Space Grotesk',Helvetica,Arial,sans-serif;overflow-x:clip} a{color:var(--t1);text-decoration:none} a:hover{color:var(--t-hi)} ::selection{background:#c9cdd6;color:#0a0a0d} img{max-width:100%;height:auto} :focus-visible{outline:2px solid var(--t0);outline-offset:2px} /* Motion is decorative here — respect the OS setting. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important} } @keyframes bcaSpin{to{transform:rotate(360deg)}} @keyframes bcaSweep{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}@keyframes bcaPulse{0%,100%{opacity:.35}50%{opacity:1}} @keyframes bcaDrift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0)}100%{transform:translate3d(0,0,0)}} @keyframes bcaRise{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}} @keyframes bcaSheen{0%{transform:translateX(-130%)}55%{transform:translateX(260%)}100%{transform:translateX(260%)}} @keyframes bcaAsstIn{from{opacity:0;transform:translate3d(0,14px,0) scale(.98)}to{opacity:1;transform:none}} @keyframes bcaAsstDot{0%,80%,100%{opacity:.25}40%{opacity:1}} /* Lane markings on the success road. They stream only while the visitor is actually scrolling, and in the direction of travel — assets/js/bca.js adds and removes these classes. */ @keyframes bcaRoadR{from{background-position:0 0}to{background-position:-64px 0}} @keyframes bcaRoadL{from{background-position:0 0}to{background-position:64px 0}} @keyframes bcaRoadD{from{background-position:0 0}to{background-position:0 -64px}} .bca-road-r{animation:bcaRoadR .4s linear infinite} .bca-road-l{animation:bcaRoadL .4s linear infinite} .bca-road-d{animation:bcaRoadD .4s linear infinite} .bca-rise{animation:bcaRise .7s cubic-bezier(.22,.7,.25,1) both} /* Pinned weekly frame: on a short screen the headline costs more than it gives, and the panel underneath must not be clipped. */ @media (max-height:700px){[data-weekly-head] h2{display:none}} /* The hero panel is capped beside the copy, full width once it wraps below it. */ @media (max-width:920px){.bca-hero-panel{max-width:none !important}} /* Native dropdowns inherit the dark page and render dark-on-dark otherwise. */ [data-booking-tz] option{background:#f7f8fb;color:#14171d} /* ---------- Stripe Elements, wearing our clothes ---------- */ #bca-card-element{position:relative;z-index:1} #bca-card-element .__PrivateStripeElement{width:100%} #bca-card-element[data-ready] + [data-card-skeleton]{display:none} [data-pay-button][aria-busy="true"] [aria-hidden="true"][style*="bcaSheen"]{animation-play-state:paused;opacity:.3} /* ---------- the lamp: a light the page sits under ---------- */ /* It belongs to the top of the document, not to the viewport — scroll down and you leave the light behind, which is the whole point of it. */ .bca-lamp{position:absolute;top:0;left:0;width:100%;height:600px;z-index:20;pointer-events:none;overflow:hidden} .bca-lamp-glow{position:absolute;top:0;left:50%;transform:translateX(-50%); width:min(1180px,130vw);height:560px;pointer-events:none; /* screen lifts a dark page; a warm glow on a light page has to multiply */ mix-blend-mode:screen; background:radial-gradient(58% 52% at 50% 0%,rgba(226,232,240,.13),rgba(226,232,240,.05) 44%,rgba(226,232,240,0) 72%); opacity:.85;transition:opacity .6s,background .6s} html[data-theme="light"] .bca-lamp-glow{ mix-blend-mode:multiply; background:radial-gradient(58% 52% at 50% 0%,rgba(255,213,138,.62),rgba(255,231,186,.28) 40%,rgba(255,255,255,0) 70%); opacity:1} .bca-bulb{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:21; display:flex;flex-direction:column;align-items:center;border:0;background:none; padding:0 10px 8px;cursor:pointer;-webkit-tap-highlight-color:transparent} .bca-bulb-cord{width:1px;height:26px;background:linear-gradient(180deg,rgba(var(--w),.05),rgba(var(--w),.34))} .bca-bulb-glass{position:relative;width:18px;height:18px;border-radius:50% 50% 52% 52%; border:1px solid rgba(var(--w),.4);background:radial-gradient(circle at 50% 38%,rgba(var(--w),.2),rgba(var(--w),.05)); transition:background .45s,border-color .45s,box-shadow .45s} .bca-bulb-glass::after{content:'';position:absolute;left:50%;bottom:-5px;transform:translateX(-50%); width:9px;height:5px;border-radius:0 0 2px 2px;background:rgba(var(--w),.28)} .bca-bulb-filament{position:absolute;inset:5px;border-radius:50%;background:rgba(var(--w),.22);transition:background .45s,box-shadow .45s} .bca-bulb{opacity:.66;transition:opacity .45s} .bca-bulb:hover{opacity:1} html[data-theme="light"] .bca-bulb{opacity:1} html[data-theme="light"] .bca-bulb-glass{border-color:rgba(255,214,120,.9); background:radial-gradient(circle at 50% 38%,#fff6dc,#ffd25e 62%,#f0b13a); box-shadow:0 0 10px 2px rgba(255,201,84,.5)} html[data-theme="light"] .bca-bulb-filament{background:#fffaf0} html[data-theme="light"] .bca-bulb-cord{background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.42))} @media print{.bca-bulb,.bca-lamp{display:none}} /* The reading-progress bar sits at the top of the viewport — which is exactly where the WordPress admin bar is for a logged-in user, hiding it. */ body.admin-bar #bca-progress{top:32px !important} @media screen and (max-width:782px){body.admin-bar #bca-progress{top:46px !important}} .bca-dock::-webkit-scrollbar{display:none} .bca-asst-scroll::-webkit-scrollbar{width:6px} .bca-asst-scroll::-webkit-scrollbar-thumb{background:rgba(var(--w),.18);border-radius:100px} .bca-asst-scroll::-webkit-scrollbar-track{background:transparent} /* Testimonials scroller. The bar is hidden because the arrows and the snap points are the affordance, but the track keeps `overflow-x:auto` so touch, trackpad and keyboard still scroll it with no JavaScript involved. */ .bca-tstm-track{scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth} .bca-tstm-track::-webkit-scrollbar{display:none} .bca-tstm-track:focus-visible{outline:2px solid rgba(var(--w),.5);outline-offset:4px} /* Somebody who asked for less motion gets the jump, not the glide — and the arrows still work, because the scroll itself is unconditional. */ @media (prefers-reduced-motion: reduce){.bca-tstm-track{scroll-behavior:auto}} [data-tstm-nav] button:hover{border-color:rgba(var(--w),.45)} [data-tstm-nav] button[disabled]{opacity:.3;cursor:default} [data-tstm-nav] button[disabled]:hover{border-color:rgba(var(--w),.18)} .bca-grid-overlay{position:absolute;inset:0;pointer-events:none;z-index:3; background-image:linear-gradient(rgba(var(--w),.026) 1px,transparent 1px), linear-gradient(90deg,rgba(var(--w),.026) 1px,transparent 1px); background-size:88px 88px;mix-blend-mode:var(--blend)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---- WordPress admin bar must not sit under our fixed chrome ---- */ body.admin-bar-showing #bca-progress { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar-showing #bca-progress { top: 46px; } } /* ---- editor / block defaults, kept minimal on purpose ---- */ .alignwide { max-width: 1340px; margin-inline: auto; } .alignfull { max-width: none; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- "Keep hero and footer dark in light mode" turned off ---- */ body.bca-no-duotone [data-theme='light'] .inv, [data-theme='light'] body.bca-no-duotone .inv { /* Inherit the page palette instead of re-applying the dark one. */ --w: 0,0,0; --s0: #f4f4f1; --s1: #ffffff; --s2: #edece7; --s3: #e3e1da; --s4: #cdcac1; --t-hi: #000000; --t0: #111317; --t1: #1c1f25; --t2: #33373f; --t3: #4d525b; --t4: #5d636d; --t5: #5f656d; --t6: #63686f; --ghost: #c9c6bd; --blend: multiply; } /* ============================================================ BLOCK EDITOR + BLOCK CONTENT Native blocks the client adds inherit the design system here. ============================================================ */ .bca-blocks > * { margin-block: clamp(18px, 2.4vw, 32px); } .bca-blocks > *:first-child { margin-block-start: 0; } .bca-blocks .wp-block-columns { gap: clamp(18px, 2.4vw, 32px); } .bca-blocks .wp-block-image img { display: block; border-radius: 4px; } .bca-blocks .wp-block-embed iframe { border-radius: 6px; display: block; } .bca-blocks .wp-block-button__link { background: var(--metal); color: var(--on-metal); border-radius: 3px; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 12px; font-weight: 500; letter-spacing: .16em; padding: 16px 26px; box-shadow: 0 18px 40px -22px var(--glow); transition: transform .25s; } .bca-blocks .wp-block-button__link:hover { transform: translateY(-2px); } .bca-blocks .is-style-outline .wp-block-button__link { background: rgba(var(--w), .02); color: var(--t1); border: 1px solid rgba(var(--w), .2); box-shadow: none; } .bca-blocks .wp-block-separator { border-color: rgba(var(--w), .14); } .bca-blocks .wp-block-quote { border-left: 1px solid rgba(var(--w), .2); padding-left: clamp(16px, 2vw, 26px); } /* Blocks placed inside a dark band keep the dark palette. */ .inv .wp-block-heading, .inv h1, .inv h2, .inv h3 { color: var(--t0); } .inv p { color: var(--t3); } /* ---- The Real Value on a phone: two layout fixes (appended 3 Sep 2026) ---- Inline styles cannot hold a media query, so these live here. Everything is keyed on attributes the templates already carry. ---- */ @media screen and (max-width: 780px) { /* Nine Pillars. The index wraps ABOVE the articles at this width - 395px of sticky column that then parks over the text as it scrolls. Static once wrapped; sticky only ever made sense beside the articles. */ [data-pillar-index] { position: static !important; max-width: none !important; } /* Weekly block. The pinned frame is ~1150px against an ~820px viewport once the three day cards stack, so the scroll-driven reveal can only show the cards and clips the panel - which, sitting after all three cards, then reads as Thursday's whichever day is open. Unpin the frame (bca.js reads this and stands its scroll logic down) and let each day's panel open directly beneath its own card: the tablist becomes display:contents so buttons and panels share one flex column, and the order values in the markup interleave them. */ [data-weekly-scroll] { height: auto !important; } [data-weekly-scroll] > div { position: static !important; padding: 0 !important; } [data-weekly] { display: flex !important; flex-direction: column !important; gap: 10px; } /* Inline display:grid on the tablist outranks anything here without !important. */ [data-weekly] [role="tablist"] { display: contents !important; } [data-weekly] [data-weekly-panel] { margin-top: 0 !important; } /* "KEEP SCROLLING FOR ..." describes the pin; without it, it is a lie. */ [data-weekly] [data-weekly-hint] { display: none; } }