/* Theme Name: Just Breathe Manual Therapy Theme URI: https://justbreathemanualtherapy.com/ Author: Jeff Bramhall Description: Block theme for Just Breathe Manual Therapy and the Learning Hands essays. Palette, type, header, footer, page templates, and section patterns from the approved site design. Version: 1.0.2 Requires at least: 6.6 Tested up to: 7.1 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: jbmt */ /* ---------- Page rhythm: sections butt together ---------- */ .wp-site-blocks > * { margin-block-start: 0; } .jb-section { margin-block-start: 0 !important; } /* ---------- Small type helpers ---------- */ .jb-eyebrow { margin-bottom: 12px !important; font-size: 15px; letter-spacing: 0.2em; font-weight: 700; text-transform: uppercase; color: var(--wp--preset--color--deep-gold); } .jb-dark .jb-eyebrow { color: var(--wp--preset--color--light-gold); } .jb-lede { font-size: var(--wp--preset--font-size--large); } .jb-muted { color: var(--wp--preset--color--slate-teal); } .jb-goudy { font-family: var(--wp--preset--font-family--sorts-mill-goudy) !important; font-weight: 400; } .jb-serif { font-family: var(--wp--preset--font-family--young-serif) !important; font-weight: 400; } /* ---------- Header ---------- */ .jb-header { border-bottom: 1px solid var(--wp--preset--color--mist); } .jb-logo { display: flex; align-items: center; gap: 14px; text-decoration: none !important; } .jb-logo .jb-logo-words { display: flex; flex-direction: column; line-height: 1.05; } .jb-logo .jb-logo-name { font-family: var(--wp--preset--font-family--young-serif); font-size: 28px; color: var(--wp--preset--color--deep-teal); } .jb-logo .jb-logo-sub { font-size: 12px; letter-spacing: 0.28em; font-weight: 500; color: var(--wp--preset--color--slate-teal); margin-top: 4px; } .jb-header .wp-block-navigation a { text-decoration: none; } .jb-header .wp-block-navigation a:hover, .jb-header .wp-block-navigation .current-menu-item > a { text-decoration: underline; text-underline-offset: 6px; } /* ---------- Dark sections ---------- */ .jb-dark, .jb-dark p, .jb-dark li { color: var(--wp--preset--color--limestone); } .jb-dark :is(h1, h2, h3, h4) { color: var(--wp--preset--color--limestone); } .jb-dark a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--light-gold); } .jb-dark a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--limestone); } .jb-dark .wp-block-button__link { background: var(--wp--preset--color--light-gold); color: var(--wp--preset--color--deep-teal); } .jb-dark .wp-block-button__link:hover { background: var(--wp--preset--color--limestone); color: var(--wp--preset--color--deep-teal); } /* ---------- Buttons ---------- */ .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--deep-teal); border: 1.5px solid var(--wp--preset--color--deep-teal); } .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--limestone); } .jb-textlink a, a.jb-textlink { font-weight: 500; text-underline-offset: 5px; } /* ---------- Cards and lists ---------- */ .jb-card { background: var(--wp--preset--color--paper); border-radius: 20px; padding: 36px !important; } .jb-card-limestone { background: var(--wp--preset--color--limestone); border-radius: 20px; padding: 32px !important; } .jb-card-teal { background: var(--wp--preset--color--deep-teal); border-radius: 20px; padding: 36px !important; } .jb-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; } .jb-steps > li { border-top: 2px solid var(--wp--preset--color--ripple-gold); padding-top: 18px; } .jb-steps .jb-num { display: block; font-family: var(--wp--preset--font-family--young-serif); font-size: 22px; color: var(--wp--preset--color--deep-gold); } .jb-steps strong { display: block; margin: 6px 0; font-size: 21px; color: var(--wp--preset--color--deep-teal); } .jb-rule-list { list-style: none; padding: 0 !important; margin: 0; } .jb-rule-list > li { border-top: 1px solid var(--wp--preset--color--mist); padding: 16px 0; } .jb-rule-list > li:first-child { border-top: 2px solid var(--wp--preset--color--ripple-gold); } .jb-rule-list > li:last-child { border-bottom: 1px solid var(--wp--preset--color--mist); } .jb-dark .jb-rule-list > li { border-color: var(--wp--preset--color--slate-teal); } .jb-dark .jb-rule-list > li:first-child { border-top-color: var(--wp--preset--color--light-gold); } .jb-chips { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-auto-rows: 1fr; gap: 12px; } .jb-chips > li { background: var(--wp--preset--color--paper); border-radius: 20px; padding: 18px 22px; } .jb-dl { display: grid; grid-template-columns: max-content 1fr; gap: 12px 24px; margin: 0; } .jb-dl dt { font-weight: 700; color: var(--wp--preset--color--deep-teal); } .jb-dl dd { margin: 0; } /* ---------- Images with arched corners ---------- */ .jb-arch img { border-radius: 220px 220px 24px 24px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; width: 100%; } .jb-arch-right img { border-radius: 24px 220px 24px 24px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; width: 100%; } .jb-arch-left img { border-radius: 220px 24px 24px 24px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; width: 100%; } .jb-round img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 30%; border: 6px solid var(--wp--preset--color--limestone); width: 100%; } /* ---------- Quotes ---------- */ .wp-block-quote.jb-review { border: 0; padding: 0; margin: 0; } .wp-block-quote.jb-review p { font-family: var(--wp--preset--font-family--young-serif); color: var(--wp--preset--color--deep-teal); line-height: 1.45; } .wp-block-quote.jb-review cite { font-family: var(--wp--preset--font-family--alegreya-sans); font-style: normal; font-size: 15px; color: var(--wp--preset--color--slate-teal); } /* ---------- FAQ (Details block) ---------- */ .wp-block-details { border-top: 1px solid var(--wp--preset--color--mist); padding: 6px 0; margin-top: 0 !important; margin-bottom: 0 !important; } .wp-block-details:last-of-type { border-bottom: 1px solid var(--wp--preset--color--mist); } .wp-block-details summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; position: relative; font-size: 21px; font-weight: 700; color: var(--wp--preset--color--deep-teal); } .wp-block-details summary::-webkit-details-marker { display: none; } .wp-block-details summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 26px; font-weight: 400; color: var(--wp--preset--color--deep-gold); } .wp-block-details[open] summary::after { content: "\2013"; } .wp-block-details > p { margin: 0 0 18px; max-width: 40em; } /* ---------- Forms (signup, contact) ---------- */ .jb-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; max-width: 560px; } .jb-form label { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 500; } .jb-form input[type="email"], .jb-form input[type="text"], .jb-form textarea { min-height: 48px; border: 1px solid var(--wp--preset--color--slate-teal); border-radius: 12px; padding: 10px 16px; font: inherit; font-size: 17px; background: #fff; color: var(--wp--preset--color--ink); box-sizing: border-box; } .jb-form button { min-height: 48px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 500; font-size: 17px; background: var(--wp--preset--color--deep-teal); color: var(--wp--preset--color--paper); } .jb-form button:hover { background: var(--wp--preset--color--ink); } /* ---------- Learning Hands ---------- */ .jb-lh-masthead .jb-lh-title { font-family: var(--wp--preset--font-family--sorts-mill-goudy); font-weight: 400; } .jb-lh-list .wp-block-post { border-top: 1px solid var(--wp--preset--color--mist); padding: 22px 0; } .jb-lh-list .wp-block-post-title { font-family: var(--wp--preset--font-family--sorts-mill-goudy); font-size: 26px; } .jb-lh-list .wp-block-post-title a { text-decoration: none; } body:not(.paged) .jb-lh-list .wp-block-post:first-child { background: var(--wp--preset--color--limestone); border-radius: 20px; border: 0; padding: 40px; margin-bottom: 32px; } body:not(.paged) .jb-lh-list .wp-block-post:first-child .wp-block-post-title { font-size: 40px; } .jb-essay .wp-block-post-content { font-size: 20px; line-height: 1.7; } .jb-essay .wp-block-post-content h2 { font-family: var(--wp--preset--font-family--sorts-mill-goudy); font-size: 32px; margin-top: 44px; } .jb-essay .wp-block-pullquote { border: 0; border-left: 2px solid var(--wp--preset--color--ripple-gold); padding: 0 0 0 24px; text-align: left; } /* ---------- Embeds ---------- */ .jb-embed iframe, .jb-embed .calendly-inline-widget { border-radius: 24px; overflow: hidden; width: 100%; } @media (max-width: 700px) { .jb-card, .jb-card-teal { padding: 28px !important; } body:not(.paged) .jb-lh-list .wp-block-post:first-child { padding: 28px; } } /* Archive list: no featured first item */ body .jb-archive-list .wp-block-post:first-child { background: none; padding: 22px 0; border-radius: 0; border-top: 1px solid var(--wp--preset--color--mist); margin-bottom: 0; } body .jb-archive-list .wp-block-post:first-child .wp-block-post-title { font-size: 26px; } /* ---------- Page-pattern helpers ---------- */ .jb-mx-auto { margin-left: auto !important; margin-right: auto !important; } .jb-grow { flex: 1 1 420px; min-width: 0; } .jb-19 { font-size: 19px; } .jb-lede-22 { font-size: 22px; } .jb-italic { font-style: italic; } .jb-h-32 { font-size: 32px !important; line-height: 1.15; } .jb-h-36 { font-size: 36px !important; } .jb-h-38 { font-size: 38px !important; } .jb-h-46 { font-size: 46px !important; line-height: 1.12; } .jb-h-56 { font-size: 56px !important; line-height: 1; } .jb-small-head { font-family: var(--wp--preset--font-family--alegreya-sans) !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: 0.04em; margin-bottom: 16px !important; } .jb-li-title { display: block; font-family: var(--wp--preset--font-family--young-serif); font-size: 22px; color: var(--wp--preset--color--deep-teal); } .jb-prose-h { font-size: 32px !important; line-height: 1.2; margin-top: 44px !important; } .jb-section h1.has-huge-font-size { line-height: 1.08; } /* Steps: wide row on the homepage, stacked on Book now */ .jb-steps-wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; } .jb-steps-stack { grid-template-columns: 1fr; } /* Reviews */ .jb-quote { font-size: 21px; line-height: 1.45; margin: 0; } .jb-quote-big { font-size: 27px; line-height: 1.4; } .jb-review-fig > * + * { margin-top: 14px; } /* Ruled sub-sections on dark teal */ .jb-ruled { border-top: 1px solid var(--wp--preset--color--mist); padding-top: 22px; } .jb-ruled + .jb-ruled { margin-top: 32px; } .jb-dark .jb-card-light, .jb-card-light { color: var(--wp--preset--color--ink); } .jb-dark .jb-card-light :is(p, li) { color: var(--wp--preset--color--ink); } .jb-dark .jb-card-light a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--deep-teal); } .jb-dark .jb-card-light .jb-form button { background: var(--wp--preset--color--deep-teal); color: var(--wp--preset--color--paper); } .jb-card-light { border-radius: 24px; padding: 40px !important; } .jb-notice > li { font-size: 19px; } /* Learning Hands lockup and mini lists */ .jb-lh-lockup { display: flex; align-items: center; gap: 16px; text-decoration: none !important; } .jb-lh-lockup > span { display: flex; flex-direction: column; } .jb-lh-lockup-name { font-family: var(--wp--preset--font-family--sorts-mill-goudy); font-size: 34px; line-height: 1; color: var(--wp--preset--color--deep-teal); } .jb-lh-lockup-tag { font-family: var(--wp--preset--font-family--sorts-mill-goudy); font-style: italic; font-size: 17px; color: var(--wp--preset--color--slate-teal); margin-top: 6px; } .jb-lh-center { display: flex; justify-content: center; } .jb-lh-mini .wp-block-post-template { margin: 0; padding: 0; list-style: none; } .jb-lh-mini .wp-block-post { border-top: 1px solid var(--wp--preset--color--mist); padding: 16px 0; margin: 0; } .jb-lh-mini .wp-block-post:last-child { border-bottom: 1px solid var(--wp--preset--color--mist); } .jb-lh-mini .wp-block-post-title { font-family: var(--wp--preset--font-family--sorts-mill-goudy); font-size: 22px; margin: 0; } .jb-lh-mini .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--deep-teal) !important; } .jb-lh-mini .wp-block-post-date { margin-top: 4px; } .jb-lh-cards .wp-block-post-template { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; } .jb-lh-cards .wp-block-post { background: var(--wp--preset--color--paper); border-radius: 20px; padding: 32px; margin: 0; } .jb-lh-cards .wp-block-post-title { font-family: var(--wp--preset--font-family--sorts-mill-goudy); font-size: 28px; line-height: 1.2; margin: 0 0 8px; } .jb-lh-cards .wp-block-post-title a { text-decoration: none; } .jb-center-form .jb-form { margin: 0 auto; max-width: 620px; } /* Label/value lists (hours, practical stuff) */ .jb-dl-list { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 10px; } .jb-dl-list > li { display: grid; grid-template-columns: 11em 1fr; gap: 4px 20px; } .jb-dl-list > li > strong { color: var(--wp--preset--color--deep-teal); } /* Where I teach now */ .jb-teach-now { border-top: 2px solid var(--wp--preset--color--ripple-gold); padding-top: 24px; } .jb-teach-now .jb-eyebrow { margin: 6px 0 0 !important; } /* Map */ .jb-map iframe { display: block; min-height: 300px; border: 1px solid var(--wp--preset--color--mist) !important; } /* Contact form */ .jb-contact { display: flex; flex-direction: column; gap: 18px; max-width: none; align-items: stretch; } .jb-contact label { flex: none; } .jb-contact button { align-self: flex-start; } .jb-contact textarea { min-height: 160px; } .jb-contact .jb-hp { position: absolute; left: -9999px; } .jb-notice-box { background: var(--wp--preset--color--paper); border-left: 3px solid var(--wp--preset--color--ripple-gold); padding: 14px 18px; border-radius: 8px; } @media (max-width: 781px) { .has-huge-font-size { font-size: 40px !important; } .has-xx-large-font-size, .jb-h-46, .jb-h-38 { font-size: 32px !important; } .jb-dl-list > li { grid-template-columns: 1fr; } .jb-card-light { padding: 28px !important; } } /* ---------- Line-length limits ---------- Limit the line, not the box: the block keeps its place in the layout (so it lines up with its neighbours) and the right padding shortens the line. */ .jb-measure, .jb-lede { padding-right: max(0px, calc(100% - 34em)); box-sizing: border-box; } .jb-lede-22 { padding-right: max(0px, calc(100% - 32em)); box-sizing: border-box; } .jb-measure-20 { padding-right: max(0px, calc(100% - 20em)); box-sizing: border-box; } .jb-measure-22 { padding-right: max(0px, calc(100% - 22em)); box-sizing: border-box; } .jb-measure-40 { padding-right: max(0px, calc(100% - 40em)); box-sizing: border-box; } .jb-measure-46 { padding-right: max(0px, calc(100% - 46em)); box-sizing: border-box; } .jb-measure-46.jb-mx-auto { padding-right: 0; max-width: 46em; } /* Cards fill their column so side-by-side cards match in height */ .wp-block-column > :is(.jb-card, .jb-card-teal, .jb-card-limestone):only-child { height: 100%; box-sizing: border-box; } /* Signup and contact inputs fill their label */ .jb-form label input, .jb-form label textarea { width: 100%; } /* Value side of label/value lists */ .jb-dl-list > li > span { min-width: 0; } /* Breathing room under the address line */ .jb-section p + .jb-dl-list { margin-top: 20px; } /* Essay page: rule lines up with the text column */ .jb-essay > .wp-block-separator { margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important; } .jb-lh-backlink { display: block; } /* Header on phones: logo, menu and button on one line */ @media (max-width: 600px) { .jb-header .jb-logo svg { width: 34px; height: 28px; } .jb-header .jb-logo .jb-logo-name { font-size: 21px; } .jb-header .jb-logo .jb-logo-sub { font-size: 9px; } .jb-header .wp-block-button__link { padding: 8px 14px; font-size: 14px; } .jb-header .wp-block-group.is-layout-flex { flex-wrap: nowrap; gap: 12px; } .jb-header .jb-logo-name, .jb-header .wp-block-button__link { white-space: nowrap; } .jb-header .jb-logo { gap: 8px; } }