/* Theme Name: Consultation Booking Theme URI: https://dotance.com/themes/consultant-wordpress-theme/ Author: Dotance Author URI: https://dotance.com/ Description: A fast Elementor-ready theme for consultants, coaches, advisers and consultancy firms that take appointments online. It pairs with the free Bookance booking plugin for services, staff and online booking, and works with Elemance for ready-made consultant pages. Includes a sticky "Book appointment" header button, a mobile booking bar, two colour schemes, custom colours, locally hosted fonts and accessible, keyboard-friendly navigation. Version: 1.1.0 Requires at least: 6.5 Tested up to: 7.1 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: consultation-booking Tags: blog, one-column, grid-layout, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, editor-style Consultation Booking WordPress Theme, (C) 2026 Dotance. Consultation Booking is distributed under the terms of the GNU GPL v2 or later. */ /* ========================================================================== Fonts (bundled, SIL Open Font License 1.1) ========================================================================== */ @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); } @font-face { font-family: "Figtree"; font-style: normal; font-display: swap; font-weight: 300 900; src: url("assets/fonts/figtree-latin-wght-normal.woff2") format("woff2"); } @font-face { font-family: "Figtree"; font-style: italic; font-display: swap; font-weight: 300 900; src: url("assets/fonts/figtree-latin-wght-italic.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 500; src: url("assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); } /* ========================================================================== Tokens. Scheme classes sit on ; Customizer colours override on :root. ========================================================================== */ :root, .cb-scheme-navy { --cb-primary: #0b1f3a; --cb-primary-2: #16335c; --cb-accent: #f2b544; --cb-accent-ink: #0b1f3a; --cb-primary-ink: #ffffff; --cb-link: #2d5fcc; --cb-bg: #ffffff; --cb-bg-soft: #f5f7fb; --cb-line: #e3e8f0; --cb-ink: #111827; --cb-muted: #5b6576; --cb-footer: #07142a; } .cb-scheme-teal { --cb-primary: #0f4c5c; --cb-primary-2: #17687a; --cb-accent: #f4a261; --cb-accent-ink: #102a30; --cb-link: #17687a; --cb-bg-soft: #eef4f3; --cb-line: #dce7e5; --cb-ink: #102a30; --cb-muted: #56706f; --cb-footer: #0a2f38; } :root { --cb-font-display: "Bricolage Grotesque", system-ui, sans-serif; --cb-font-body: "Figtree", system-ui, sans-serif; --cb-font-mono: "IBM Plex Mono", ui-monospace, monospace; --cb-radius: 18px; --cb-shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 12px 32px -12px rgb(16 24 40 / 18%); --cb-ease: cubic-bezier(.2, .8, .2, 1); --cb-wrap: 1200px; --cb-narrow: 760px; } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--cb-bg); color: var(--cb-ink); font: 400 17px/1.7 var(--cb-font-body); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } img, video, iframe { max-width: 100%; height: auto; } a { color: var(--cb-link); text-underline-offset: .18em; } a:hover { color: var(--cb-primary); } h1, h2, h3, h4, h5, h6 { font-family: var(--cb-font-display); line-height: 1.12; letter-spacing: -.02em; color: var(--cb-ink); margin: 1.6em 0 .55em; } h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); font-weight: 700; } h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; } h3 { font-size: 1.45rem; font-weight: 600; } h4 { font-size: 1.2rem; font-weight: 600; } h5, h6 { font-size: 1rem; font-weight: 600; } p, ul, ol, dl, blockquote, pre, table, figure { margin: 0 0 1.4em; } blockquote { border-inline-start: 4px solid var(--cb-accent); padding: .2em 0 .2em 1.2em; font: 500 1.25rem/1.5 var(--cb-font-display); } code, kbd, pre, samp { font-family: var(--cb-font-mono); font-size: .9em; } pre { background: var(--cb-bg-soft); padding: 1.2em; border-radius: 12px; overflow: auto; } hr { border: 0; border-top: 1px solid var(--cb-line); margin: 2.5em 0; } table { width: 100%; border-collapse: collapse; } th, td { padding: .7em .9em; border-bottom: 1px solid var(--cb-line); text-align: start; } /* Zero specificity so plugins and builders can style their own focus rings. */ :where(:focus-visible) { outline: 3px solid var(--cb-accent); outline-offset: 3px; } /* ========================================================================== Accessibility + WordPress core classes ========================================================================== */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important; } .screen-reader-text:focus { background: var(--cb-bg); border-radius: 8px; box-shadow: var(--cb-shadow); clip: auto !important; clip-path: none; color: var(--cb-ink); display: block; font-weight: 600; height: auto; left: 8px; padding: 14px 20px; top: 8px; width: auto; z-index: 100000; } .alignleft { float: left; margin: .4em 1.5em 1em 0; } .alignright { float: right; margin: .4em 0 1em 1.5em; } .aligncenter { display: block; margin-inline: auto; clear: both; } .alignwide { width: min(var(--cb-wrap), 100vw - 32px); margin-inline: calc((min(var(--cb-wrap), 100vw - 32px) - 100%) / -2); max-width: none; } .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; } .wp-caption, .wp-block-image figcaption { max-width: 100%; } .wp-caption-text, .gallery-caption, figcaption { font-size: .88rem; color: var(--cb-muted); margin-top: .5em; } .sticky .entry-card { border-color: var(--cb-accent); box-shadow: inset 4px 0 0 var(--cb-accent); } .bypostauthor > .comment-body .comment-author b::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cb-accent); margin-inline-start: 6px; vertical-align: middle; } .clear::after, .entry-content::after { content: ""; display: table; clear: both; } /* ========================================================================== Layout ========================================================================== */ .cb-wrap { width: min(var(--cb-wrap), 100% - 32px); margin-inline: auto; } .cb-narrow { width: min(var(--cb-narrow), 100% - 32px); margin-inline: auto; } .site { min-height: 100vh; display: flex; flex-direction: column; } .site-main { flex: 1; } .cb-content-area { padding: clamp(48px, 7vw, 96px) 0; } /* Elementor-built pages control their own spacing. */ .cb-builder-page .site-main { padding: 0; } /* ========================================================================== Buttons + forms ========================================================================== */ /* Unclassed buttons and core form submits only, at zero specificity, so booking and builder plugins keep their own button design. */ .cb-button, :where(.wp-block-button__link, .search-submit, .comment-form .submit, .post-password-form input[type="submit"]), :where(.entry-content, .widget) :where(button:not([class]), input[type="submit"]:not([class])) { --b: var(--cb-primary); display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .85em 1.4em; border-radius: 999px; border: 1.5px solid var(--b); background: var(--b); color: #fff; font: 600 1rem/1 var(--cb-font-body); text-decoration: none; cursor: pointer; transition: transform .35s var(--cb-ease), box-shadow .35s var(--cb-ease), background-color .25s, border-color .25s; } .cb-button:hover, :where(.wp-block-button__link, .search-submit, .comment-form .submit, .post-password-form input[type="submit"]):hover, :where(.entry-content, .widget) :where(button:not([class]), input[type="submit"]:not([class])):hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px var(--b); color: #fff; } .cb-button--accent { --b: var(--cb-accent); color: var(--cb-accent-ink); } .cb-button--accent:hover { color: var(--cb-accent-ink); } .cb-button--ghost { background: transparent; color: var(--cb-ink); --b: var(--cb-line); } .cb-button--ghost:hover { --b: var(--cb-ink); color: var(--cb-ink); box-shadow: none; } /* Zero specificity: any plugin form styling wins. */ :where(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], select, textarea) { width: 100%; font: inherit; color: var(--cb-ink); background: #fff; padding: 12px 14px; border: 1.5px solid var(--cb-line); border-radius: 12px; transition: border-color .25s, box-shadow .25s; } :where(input, select, textarea):focus-visible { outline: none; border-color: var(--cb-primary-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cb-primary-2) 18%, transparent); } :where(label) { font-weight: 600; font-size: .94rem; } .search-form { display: flex; gap: 8px; } .search-form label { flex: 1; } /* ========================================================================== Header ========================================================================== */ .site-header { position: relative; z-index: 50; background: var(--cb-bg); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; } .cb-sticky-header .site-header { position: sticky; top: 0; background: color-mix(in srgb, var(--cb-bg) 96%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .admin-bar.cb-sticky-header .site-header { top: 32px; } .site-header.is-scrolled { border-color: var(--cb-line); box-shadow: 0 8px 30px -22px rgb(0 0 0 / 30%); } .cb-header-inner { display: flex; align-items: center; gap: 20px; min-height: 76px; } .site-branding { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .site-branding .custom-logo { max-height: 48px; width: auto; } .site-title { margin: 0; font: 700 1.25rem/1.1 var(--cb-font-display); letter-spacing: -.02em; } .site-title a { color: var(--cb-ink); text-decoration: none; } .site-description { margin: 2px 0 0; font-size: .82rem; color: var(--cb-muted); } .main-navigation { margin-inline-start: auto; min-width: 0; } .main-navigation ul { list-style: none; margin: 0; padding: 0; } .main-navigation > div > ul, .main-navigation > ul { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 2px; } .main-navigation li { position: relative; } .main-navigation a { display: block; padding: 8px 14px; color: var(--cb-ink); text-decoration: none; font-weight: 500; font-size: .96rem; border-radius: 999px; position: relative; white-space: nowrap; } .main-navigation > div > ul > li > a::after, .main-navigation > ul > li > a::after { content: ""; position: absolute; inset-inline: 14px; bottom: 3px; height: 2px; background: var(--cb-accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--cb-ease); } .main-navigation li:hover > a::after, .main-navigation .current-menu-item > a::after, .main-navigation .current_page_item > a::after { transform: scaleX(1); } .main-navigation .sub-menu, .main-navigation .children { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 220px; background: #fff; border: 1px solid var(--cb-line); border-radius: 14px; box-shadow: var(--cb-shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .3s var(--cb-ease), visibility .25s; z-index: 10; } .main-navigation .sub-menu .sub-menu, .main-navigation .children .children { top: -9px; inset-inline-start: 100%; } .main-navigation .sub-menu a, .main-navigation .children a { border-radius: 8px; } .main-navigation .sub-menu a:hover, .main-navigation .children a:hover { background: var(--cb-bg-soft); } .main-navigation li:hover > .sub-menu, .main-navigation li:hover > .children, .main-navigation li.is-open > .sub-menu, .main-navigation li.is-open > .children, .main-navigation li:focus-within > .sub-menu, .main-navigation li:focus-within > .children { opacity: 1; visibility: visible; transform: none; } .menu-item-has-children, .page_item_has_children { display: flex; align-items: center; } .cb-submenu-toggle { background: none; border: 0; padding: 6px; margin-inline-start: -10px; cursor: pointer; color: var(--cb-muted); display: grid; place-items: center; border-radius: 6px; } .cb-submenu-toggle svg { width: 14px; height: 14px; transition: transform .3s; } .is-open > .cb-submenu-toggle svg { transform: rotate(180deg); } .cb-header-actions { display: flex; align-items: center; gap: 14px; } .cb-header-phone { font: 500 .9rem var(--cb-font-mono); color: var(--cb-muted); text-decoration: none; white-space: nowrap; } .cb-header-phone:hover { color: var(--cb-primary); } .cb-header-actions .cb-button { padding: .75em 1.2em; white-space: nowrap; } .cb-menu-toggle { display: none; margin-inline-start: auto; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid var(--cb-line); border-radius: 10px; cursor: pointer; } .cb-menu-toggle span { display: block; width: 18px; height: 2px; margin: 4px auto; background: var(--cb-ink); transition: transform .3s var(--cb-ease), opacity .2s; } .cb-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .cb-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .cb-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ========================================================================== Page header (archives, search, pages) ========================================================================== */ .cb-page-header { background: var(--cb-bg-soft); padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 64px); position: relative; overflow: hidden; } .cb-page-header::before { content: ""; position: absolute; inset: 0; opacity: .7; pointer-events: none; background-image: linear-gradient(var(--cb-line) 1px, transparent 1px), linear-gradient(90deg, var(--cb-line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000); } .cb-page-header > * { position: relative; } .cb-page-header h1 { margin: 0; } .cb-eyebrow:not(.elementor-element) { display: inline-flex; align-items: center; gap: .6em; margin-bottom: 1rem; font: 500 .78rem/1 var(--cb-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cb-primary-2); } .cb-eyebrow:not(.elementor-element)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cb-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cb-accent) 30%, transparent); } .archive-description { color: var(--cb-muted); max-width: 640px; margin-top: 1em; } .archive-description p:last-child { margin: 0; } /* ========================================================================== Post cards (blog, archive, search) ========================================================================== */ .cb-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .entry-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cb-line); border-radius: var(--cb-radius); overflow: hidden; transition: transform .45s var(--cb-ease), box-shadow .45s var(--cb-ease), border-color .3s; } .entry-card:hover { transform: translateY(-6px); box-shadow: var(--cb-shadow); border-color: transparent; } .entry-card .post-thumbnail { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cb-bg-soft); } .entry-card .post-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--cb-ease); } .entry-card:hover .post-thumbnail img { transform: scale(1.05); } .entry-card-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; } .entry-card .entry-title { font-size: 1.3rem; margin: 10px 0 10px; } .entry-card .entry-title a { color: var(--cb-ink); text-decoration: none; } .entry-card .entry-title a:hover { color: var(--cb-primary-2); } .entry-card .entry-summary { color: var(--cb-muted); font-size: .96rem; } .entry-card .entry-summary p { margin: 0; } .cb-read-more { margin-top: auto; padding-top: 16px; font-weight: 600; text-decoration: none; color: var(--cb-primary-2); } .entry-meta { font: 500 .8rem var(--cb-font-mono); color: var(--cb-muted); display: flex; flex-wrap: wrap; gap: 6px 14px; } .entry-meta a { color: inherit; text-decoration: none; } .entry-meta a:hover { color: var(--cb-primary); } .cb-cat { display: inline-block; font: 500 .74rem/1 var(--cb-font-mono); padding: 7px 10px; border-radius: 999px; background: var(--cb-bg-soft); color: var(--cb-primary-2); text-decoration: none; align-self: flex-start; } .navigation.pagination { margin-top: 56px; } .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .page-numbers { min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--cb-line); color: var(--cb-ink); text-decoration: none; font-weight: 600; } .page-numbers.current { background: var(--cb-primary); border-color: var(--cb-primary); color: #fff; } a.page-numbers:hover { border-color: var(--cb-ink); } /* ========================================================================== Single post + page ========================================================================== */ .single .site-main > article { padding-bottom: clamp(56px, 8vw, 104px); } .cb-single-header { text-align: center; padding: clamp(48px, 7vw, 88px) 0 32px; } .cb-single-header .entry-meta { justify-content: center; margin-top: 18px; } .cb-single-header .entry-title { margin: 12px 0 0; } .cb-single-thumb { width: min(1000px, 100% - 32px); margin: 0 auto 48px; border-radius: 24px; overflow: hidden; box-shadow: var(--cb-shadow); } .cb-single-thumb img { width: 100%; display: block; } .entry-content { font-size: 1.08rem; } .entry-content > *:first-child { margin-top: 0; } .entry-content a { font-weight: 500; } .entry-content li { margin-bottom: .4em; } .page-links { clear: both; margin: 2em 0; font-weight: 600; } .entry-footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--cb-line); display: flex; flex-wrap: wrap; gap: 8px; } .entry-footer .tags-links a { font: 500 .8rem var(--cb-font-mono); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--cb-line); text-decoration: none; color: var(--cb-ink); margin: 0 4px 6px 0; display: inline-block; } .post-navigation { margin-top: 48px; } .post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .post-navigation a { display: block; padding: 20px 22px; border: 1px solid var(--cb-line); border-radius: 14px; text-decoration: none; color: var(--cb-ink); transition: box-shadow .3s, border-color .3s; } .post-navigation a:hover { box-shadow: var(--cb-shadow); border-color: transparent; } .post-navigation .nav-next { text-align: end; grid-column: 2; } .post-navigation .meta-nav { display: block; font: 500 .75rem var(--cb-font-mono); color: var(--cb-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; } .post-navigation .post-title { font: 600 1.05rem/1.3 var(--cb-font-display); } /* ========================================================================== Comments ========================================================================== */ .comments-area { margin-top: 64px; } .comment-list, .comment-list .children { list-style: none; padding: 0; margin: 0; } .comment-list .children { padding-inline-start: clamp(16px, 4vw, 48px); } .comment-body { padding: 22px 0; border-bottom: 1px solid var(--cb-line); } .comment-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .comment-author .avatar { border-radius: 50%; display: block; } .comment-author { display: flex; align-items: center; gap: 12px; } .comment-author .says { display: none; } .comment-metadata { font: 500 .78rem var(--cb-font-mono); } .comment-metadata a { color: var(--cb-muted); text-decoration: none; } .reply a { font-weight: 600; font-size: .9rem; } .comment-respond { margin-top: 40px; } .comment-form p { margin-bottom: 16px; } .comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; } .comment-form-cookies-consent label { font-weight: 400; } /* ========================================================================== Widgets ========================================================================== */ .widget { margin-bottom: 32px; } .widget ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .widget-title, .widget h2, .widget .wp-block-heading { font-size: 1rem; margin: 0 0 18px; } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--cb-footer); color: #93a3b8; padding: 28px 0; font-size: .95rem; } .site-footer a { color: #b8c4d4; text-decoration: none; } .site-info a, .site-footer .widget_text a { text-decoration: underline; text-underline-offset: .2em; } .site-footer a:hover { color: #fff; } .site-footer .widget-title, .site-footer h2, .site-footer h3, .site-footer .wp-block-heading { color: #fff; } .cb-footer-widgets { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; margin: 44px 0 48px; } .cb-footer-widgets + .cb-footer-bottom { border-top: 1px solid rgb(255 255 255 / 10%); padding-top: 24px; } .cb-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: .86rem; } .cb-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; } /* ========================================================================== Mobile booking bar ========================================================================== */ .cb-mobile-book { display: none; } /* ========================================================================== Motion ========================================================================== */ @keyframes cb-rise { from { opacity: 0; transform: translateY(24px); } } .cb-page-header > *, .cb-single-header > * { animation: cb-rise .8s var(--cb-ease) both; } .cb-page-header > *:nth-child(2), .cb-single-header > *:nth-child(2) { animation-delay: .08s; } .cb-page-header > *:nth-child(3), .cb-single-header > *:nth-child(3) { animation-delay: .16s; } .cb-js .cb-reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--cb-ease), transform .8s var(--cb-ease); transition-delay: var(--cb-d, 0s); } .cb-js .cb-reveal.is-in { opacity: 1; transform: none; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1024px) { .cb-post-grid { grid-template-columns: repeat(2, 1fr); } .cb-footer-widgets { grid-template-columns: 1fr 1fr; } .cb-header-phone { display: none; } } @media (max-width: 860px) { body { font-size: 16px; } .cb-menu-toggle { display: block; } .cb-header-actions { display: none; } .main-navigation { position: absolute; inset: 100% 0 auto; margin: 0; background: var(--cb-bg); border-bottom: 1px solid var(--cb-line); box-shadow: 0 20px 30px -24px rgb(0 0 0 / 30%); padding: 12px 16px 20px; display: none; } .main-navigation.is-open { display: block; animation: cb-rise .4s var(--cb-ease); } .main-navigation > div > ul, .main-navigation > ul { flex-direction: column; align-items: stretch; } .menu-item-has-children, .page_item_has_children { flex-wrap: wrap; } .menu-item-has-children > a, .page_item_has_children > a { flex: 1; } .main-navigation .sub-menu, .main-navigation .children { position: static; width: 100%; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 16px; display: none; } .main-navigation li.is-open > .sub-menu, .main-navigation li.is-open > .children { display: block; } .main-navigation a::after { display: none; } .cb-mobile-nav-actions { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cb-line); } .main-navigation .cb-mobile-nav-actions .cb-button { display: flex; padding: .95em 1.4em; font-size: 1rem; border-radius: 999px; } .main-navigation .cb-mobile-nav-actions .cb-header-phone { text-align: center; } .cb-mobile-book { position: fixed; inset-inline: 12px; bottom: 12px; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 20px; border-radius: 999px; background: var(--cb-primary); color: #fff; box-shadow: 0 20px 40px -16px rgb(0 0 0 / 45%); transform: translateY(150%); transition: transform .5s var(--cb-ease); } .cb-mobile-book.is-visible { transform: none; } .cb-mobile-book span { font-size: .9rem; font-weight: 500; } .cb-has-mobile-book .site-footer { padding-bottom: 104px; } .post-navigation .nav-links { grid-template-columns: 1fr; } .post-navigation .nav-next { grid-column: auto; } } @media (min-width: 861px) { .cb-mobile-nav-actions { display: none; } } @media (max-width: 782px) { .admin-bar.cb-sticky-header .site-header { top: 46px; } } @media (max-width: 600px) { .admin-bar.cb-sticky-header .site-header { top: 0; } .cb-post-grid, .cb-footer-widgets { grid-template-columns: 1fr; } .alignleft, .alignright { float: none; margin-inline: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .cb-js .cb-reveal { opacity: 1; transform: none; } }