/* Theme Name: The Monochrome Collective Theme URI: https://www.themonochromecollective.co Author: Darren Pellegrino Description: Block theme for The Monochrome Collective. Typography and colour measured from the Squarespace site it replaces - Archivo Black headings, Archivo body, #363636 on white. Typography is set in Styles, not hardcoded. Version: 1.64.0 Requires at least: 6.5 Tested up to: 7.1 Requires PHP: 7.4 License: GNU General Public License v2 or later Text Domain: tmc */ /* ================================================================== Nearly everything lives in theme.json, which is what makes it editable from the Styles panel. Only rules the editor cannot express belong here. ================================================================== */ /* Underlines. The live site shows no underline on links, which theme.json now sets globally - so it is adjustable from Styles rather than fixed here. Focus is the exception. Removing the underline everywhere would leave a keyboard user with nothing to follow, so focus restores it and adds an outline. That is not a style preference; without it the site is unusable without a mouse. */ a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; text-decoration: underline; } /* The navigation is uppercase Archivo Black and reads as a set of labels rather than prose, so it does not take the hover underline the body copy does. */ .wp-block-navigation a:hover { text-decoration: none; opacity: 0.6; } /* --------------------------------------------------------------------------- Foto app — custom social icon WordPress core has no "Foto" social service, so add a Social Icon set to "Link" (service: chain) pointing at the.fotoapp.co and this restyles it. The glyph is applied as a MASK rather than a background image: the file contributes shape only and the colour comes from currentColor, so the icon follows whatever colour and icon-size you set on the Social Icons block instead of being fixed here. Sizing in em does the same for size. --------------------------------------------------------------------------- */ .wp-social-link-chain a[href*="fotoapp.co"] svg { display: none; } .wp-social-link-chain a[href*="fotoapp.co"]::after { content: ""; display: block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("assets/icons/foto.png") no-repeat center / contain; mask: url("assets/icons/foto.png") no-repeat center / contain; } /* --------------------------------------------------------------------------- Tutor LMS - course pages in black and white Tutor ships a blue/green/orange palette through CSS custom properties. These remap every one of them onto the theme's own colours, so course pages match the rest of the site without touching Tutor's templates (which would break on plugin updates). Colours come from theme.json presets, so changing the palette in Styles changes these too. --------------------------------------------------------------------------- */ :root { /* how many columns the "What you'll learn" grid uses - 3 or 4 both work */ --tmc-benefits-columns: 3; } .tutor-wrap, .tutor-course-details-page, body.tutor-lms, body[class*="courses-"] { --tutor-color-primary: var(--wp--preset--color--contrast, #363636); --tutor-color-primary-hover: var(--wp--preset--color--ink, #000000); --tutor-color-secondary: var(--wp--preset--color--contrast, #363636); --tutor-color-success: var(--wp--preset--color--contrast, #363636); --tutor-color-warning: var(--wp--preset--color--muted, #767676); --tutor-color-danger: var(--wp--preset--color--contrast, #363636); --tutor-body-color: var(--wp--preset--color--contrast, #363636); --tutor-color-subdued: var(--wp--preset--color--muted, #767676); --tutor-color-hints: var(--wp--preset--color--muted, #767676); --tutor-color-muted: var(--wp--preset--color--muted, #767676); --tutor-border-color: var(--wp--preset--color--rule, #E0E0E0); --tutor-color-gray: var(--wp--preset--color--rule, #E0E0E0); --tutor-color-gray-10: var(--wp--preset--color--subtle, #F5F5F5); --tutor-color-white: var(--wp--preset--color--base, #FFFFFF); } /* Typography to match the rest of the site. Tutor sets its own sizes, which is why the course title was 24px against 45px everywhere else. */ .tutor-course-details-page h1, .tutor-course-details-header h1 { font-size: var(--wp--preset--font-size--xx-large, 2.8rem); line-height: 1.2; } .tutor-course-details-page h2, .tutor-course-details-page h3 { font-size: var(--wp--preset--font-size--x-large, 1.4rem); line-height: 1.2; } .tutor-course-details-page h4, .tutor-course-topic-title h4 { font-size: var(--wp--preset--font-size--large, 1.1rem); line-height: 1.2; } /* "What you'll learn" as a grid. Tutor renders this as .tutor-course-details-widget-list - a flex list whose column count comes from a widget-col-N class on the parent (it ships as 2). Overriding to grid gives control of the count from one variable. */ .tutor-course-details-widget-list { display: grid !important; grid-template-columns: repeat(var(--tmc-benefits-columns, 3), minmax(0, 1fr)); gap: var(--wp--preset--spacing--40, 1.25rem) var(--wp--preset--spacing--50, 2rem); list-style: none; margin: 0; padding: 0; } .tutor-course-details-widget-list > li { width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; } /* Square corners and monochrome buttons, matching the site's own. */ .tutor-btn, .tutor-btn-primary, .tutor-course-details-page .tutor-btn { border-radius: 0; text-transform: uppercase; letter-spacing: inherit; } /* Course page: remove Tutor furniture that does not belong on a one-course site. The category chip ("Uncategorized") and the Share link both live in .tutor-course-details-top, so hiding that row clears both. The thumbnail block is hidden because the course has no featured image and Tutor renders a grey placeholder in its place. */ .tutor-course-details-top, .tutor-course-thumbnail, .tutor-course-details-instructors { display: none !important; } /* Tutor's own header block sits above the content; give it the site's spacing rather than the plugin's. */ .tutor-course-details-header { margin-bottom: var(--wp--preset--spacing--50, 2rem) !important; } /* Align Tutor's containers with the rest of the site. Tutor centres its content in a 1320px .tutor-container with 12px padding, so course content started 60px from the viewport edge while the header, footer and every other page start at 40px (the theme.json root padding). The result was a visible step between the header and the content beneath it. Using the root padding variables means this follows the site's own spacing rather than repeating a number. To use a DIFFERENT padding on course pages than the rest of the site, set --tmc-course-padding in Site Editor > Styles > (three dots) > Additional CSS: :root { --tmc-course-padding: 80px; } Any CSS length works, including a responsive one: :root { --tmc-course-padding: clamp(1.25rem, 5vw, 5rem); } Setting a custom property this way needs no !important and no extra selector weight, so a later theme update cannot override it. Remove the line and course pages fall back to the site's root padding. */ .tutor-page-wrap, .tutor-full-width-course-top { padding-left: var( --tmc-course-padding, var( --wp--style--root--padding-left, 40px ) ); padding-right: var( --tmc-course-padding, var( --wp--style--root--padding-right, 40px ) ); } .tutor-course-details-page.tutor-container, .tutor-page-wrap .tutor-container { max-width: none; padding-left: 0; padding-right: 0; } /* The header part is rendered inside Tutor's markup rather than the block canvas, so it picks up the root padding on the wrong element. Move it to the inner group to match every other page. */ .tutor-full-width-course-top > header.wp-block-template-part, header.wp-block-template-part:has(+ .tutor-page-wrap) { padding-left: 0; padding-right: 0; } /* Footer width on Tutor pages. Rendered through block_template_part() inside Tutor's template, the footer part becomes the outer element itself rather than sitting inside a wrapper. Its children then inherit the 820px content size instead of the site's wide width, so the footer columns came out half width and centred (820px at x=310, against 1360px at x=40 everywhere else). The header does not need this - its inner group is already full width. */ body.single-courses footer.wp-block-group > *, body.tutor-lms footer.wp-block-group > * { max-width: none; } /* Restore block layout rules on Tutor pages. WordPress emits the CSS for layout classes like .is-content-justification-space-between per block, during the page render. Tutor outputs the header and footer template parts after that pass, so the classes arrive with no rules behind them - justify-content computed as "normal" instead of "space-between", which left the navigation 27px short of the right edge instead of flush with it. These restate what core would have emitted, scoped to Tutor pages so normal pages keep using WordPress's own generated CSS. */ body.single-courses .is-content-justification-space-between, body.tutor-lms .is-content-justification-space-between { justify-content: space-between; } body.single-courses .is-content-justification-right, body.tutor-lms .is-content-justification-right { justify-content: flex-end; } body.single-courses .is-content-justification-center, body.tutor-lms .is-content-justification-center { justify-content: center; } body.single-courses .is-content-justification-left, body.tutor-lms .is-content-justification-left { justify-content: flex-start; } body.single-courses .is-nowrap, body.tutor-lms .is-nowrap { flex-wrap: nowrap; } body.single-courses .is-vertical, body.tutor-lms .is-vertical { flex-direction: column; } /* Stop Tutor faux-bolding Archivo Black. Archivo Black exists only at weight 400 - it is already the heavy cut. Tutor applies tutor-fw-bold (700) and tutor-fw-medium (500) to its headings, so the browser synthesises a bolder face on top of a black one, which reads as smeared rather than bold. The theme's own headings render at 400 correctly. Body text is left alone: Archivo is a variable font with real weights, so bold works properly there. */ body.single-courses :is( h1, h2, h3, h4, h5, h6 ), body.tutor-lms :is( h1, h2, h3, h4, h5, h6 ), body.single-courses .tutor-course-details-title, body.tutor-lms .tutor-accordion-item-header { font-weight: 400 !important; } /* Buttons in Archivo Black, matching the source site. theme.json covers WordPress buttons (including the File block's Download). Tutor renders its own .tutor-btn outside that system, so it needs saying again here. Weight stays 400 - Archivo Black has no other cut. */ .tutor-btn, .tutor-btn-primary, .tutor-course-details-page .tutor-btn, body.tutor-lms .tutor-btn { font-family: var(--wp--preset--font-family--display, "Archivo Black", sans-serif); font-weight: 400; } /* Course page: keep the content inside the site's margins. Tutor's .tutor-row uses negative side margins to create its column gutter, so the main column started at x=16 while the wrapper - and every other page, the camera guide included - starts at x=40. Zeroing the outer edges keeps the gutter between the main column and the sidebar intact while aligning both outer edges with the rest of the site. */ .tutor-course-details-page .tutor-row { margin-left: 0; margin-right: 0; } .tutor-course-details-page .tutor-row > [class*="tutor-col"]:first-child { padding-left: 0; } .tutor-course-details-page .tutor-row > [class*="tutor-col"]:last-child { padding-right: 0; } /* --------------------------------------------------------------------------- Blog post images The Squarespace import wrote bare tags inside

elements: no

, no wp-block-image class. Core's image styles are all scoped to those classes, so nothing constrained these images and they rendered at their intrinsic width (up to 1600px) inside an 820px text column, spilling past the right edge of the page. 29 of 40 sampled posts are affected. Constraining them to the column is what makes them line up with the text. --------------------------------------------------------------------------- */ .wp-block-post-content img { max-width: 100%; height: auto; } /* An image alone in its own paragraph is a figure in all but name. Treating it as block-level removes the inline baseline gap underneath it and lets it centre in the column. */ .wp-block-post-content p > img:only-child { display: block; margin-inline: auto; } /* Breathing room around those images, using the theme's own spacing scale. */ .wp-block-post-content p:has( > img:only-child ) { margin-block: var( --wp--preset--spacing--50, 1.5rem ); } /* --------------------------------------------------------------------------- Ultimate Member forms UM styles its buttons in two stylesheets: um-styles.min.css .um-button { padding:16px 20px !important; text-transform:none !important; border:none !important; border-radius:4px !important; ... } um-old-default.min.css .um input[type=submit].um-button { background:#3ba1da } Because UM marks padding, text-transform, border and border-radius as !important, matching them here is not optional - a plain declaration loses to an !important one no matter how specific the selector is. The background is NOT !important in UM, but it is marked here anyway so the whole rule behaves consistently if UM changes. Target values are measured from the theme's own .wp-block-button__link: background contrast text base Archivo Black 400 0.8rem square 0.9rem 1.8rem uppercase Archivo Black exists only at weight 400, so the weight is pinned - anything heavier makes the browser synthesise a faux-bold. --------------------------------------------------------------------------- */ .um .um-button, .um a.um-button, .um input[type="submit"].um-button, .um #um-submit-btn { background: var( --wp--preset--color--contrast ) !important; color: var( --wp--preset--color--base ) !important; font-family: var( --wp--preset--font-family--display ) !important; font-weight: 400 !important; font-size: var( --wp--preset--font-size--fine ) !important; line-height: 1.5 !important; text-transform: uppercase !important; letter-spacing: 0 !important; text-decoration: none !important; border: 0 !important; border-radius: 0 !important; padding: 0.9rem 1.8rem !important; height: auto !important; box-shadow: none !important; } .um .um-button:hover, .um a.um-button:hover, .um input[type="submit"].um-button:hover, .um #um-submit-btn:hover { background: var( --wp--preset--color--ink ) !important; color: var( --wp--preset--color--base ) !important; } /* UM's secondary buttons - the "Login" and "Register" links under the form. Outlined rather than filled so they do not compete with the submit button. */ .um .um-button.um-alt, .um a.um-button.um-alt, .um input[type="submit"].um-button.um-alt { background: transparent !important; color: var( --wp--preset--color--contrast ) !important; border: 1px solid var( --wp--preset--color--rule ) !important; } .um .um-button.um-alt:hover, .um a.um-button.um-alt:hover, .um input[type="submit"].um-button.um-alt:hover { background: var( --wp--preset--color--contrast ) !important; color: var( --wp--preset--color--base ) !important; border-color: var( --wp--preset--color--contrast ) !important; } /* --------------------------------------------------------------------------- Free Resources cards (members area) The three cards hold unequal amounts of text: one title wraps to two lines, and only two of the three have a second line. In normal flow that puts the three Download buttons at three different heights. Making each card a vertical flex column and giving the button block margin-top:auto pushes every button to the bottom of its card, so they share a baseline no matter how the text above them falls. Scoped to .tmc-resource-card so no other columns on the site are affected. --------------------------------------------------------------------------- */ .wp-block-column.tmc-resource-card { display: flex; flex-direction: column; } .wp-block-column.tmc-resource-card > .wp-block-buttons { margin-top: auto; /* push to the card floor */ padding-top: var( --wp--preset--spacing--50 ); /* the gap the inline margin used to give */ } /* The image must not stretch to fill the flex column. */ .wp-block-column.tmc-resource-card > figure.wp-block-image { flex: 0 0 auto; } /* --------------------------------------------------------------------------- UM forms: hide the secondary cross-link button Each UM form ships a second button pointing at the other form - Register carries a "Login" button, Login carries a "Register" one. Both pages already offer that route in their own copy: /join/ the card above the form has a Log In button /login/ the line below the form reads "Not a member yet? Join Free" So the in-form button is a duplicate sitting right next to the submit button, which is where it does the most harm - two buttons side by side, only one of which does what the page is for. Listed per form rather than as a blanket .um .um-alt rule, so UM's other screens (account, password reset) keep their secondary actions. --------------------------------------------------------------------------- */ .um.um-register .um-button.um-alt, .um.um-login .um-button.um-alt { display: none !important; } /* --------------------------------------------------------------------------- Store product grid WooCommerce's product-image block asks for the "thumbnail" size, but these images have no woocommerce_thumbnail file generated, so it falls back to attachment-large and renders 1024x1024 originals in the grid. Rather than regenerate every thumbnail, the displayed size is capped here. Scoped to .wc-block-grid__product-image, which only appears in product grids - the single product page keeps its full-size image. To change the size, set --tmc-product-image-max in Site Editor > Styles > (three dots) > Additional CSS: :root { --tmc-product-image-max: 160px; } --------------------------------------------------------------------------- */ .wc-block-grid__product-image img { max-width: var( --tmc-product-image-max, 200px ); height: auto; margin-inline: auto; } /* The image block is a link wrapper; centre it so the capped image sits under the middle of the tile rather than hugging the left edge. */ .wc-block-grid__product-image { display: block; text-align: center; } /* Single product title. The template renders it at the theme's default heading scale, which is heavy next to a small product image. Adjustable: :root { --tmc-product-title-size: 1.6rem; } */ .single-product .wp-block-post-title { font-size: var( --tmc-product-title-size, var( --wp--preset--font-size--x-large ) ); line-height: 1.2; } /* --------------------------------------------------------------------------- Retailer buttons Rendered by tmc_retailer_buttons() in place of WooCommerce's add-to-cart button, on both the product page and the shop grid. An earlier attempt hid the button with a .product-type-external selector, which never matched: the block theme's single-product template does not carry that class. --------------------------------------------------------------------------- */ .tmc-retailer-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var( --wp--preset--spacing--40 ); } .tmc-retailer-buttons .wp-block-button__link { text-transform: uppercase; font-size: var( --wp--preset--font-size--fine ); } /* --------------------------------------------------------------------------- Store grid: line the buttons up Each tile is image / title / price / button, and titles run from one line ("The Zone System") to three ("The Monochrome Collective Capture One Styles Pack"), so in normal flow every button lands at a different height. The fix is to let the title absorb the slack (flex: 1) rather than to bottom-align the button. Bottom-aligning looked right but was not: WooCommerce's button block reserves space beneath the button for a hidden "View cart" link, so anchoring on the block's bottom edge left the visible button sitting higher than a block without that link. WordPress's own block-gap margins differ between the two button block types, so those are zeroed and one uniform gap applied instead. --------------------------------------------------------------------------- */ .wc-block-product { display: flex; flex-direction: column; } .wc-block-product > .wc-block-grid__product-image { flex: 0 0 auto; } /* the title takes up whatever height the tile has spare */ .wc-block-product > .wp-block-post-title { flex: 1 1 auto; } .wc-block-product > .wc-block-components-product-button, .wc-block-product > .tmc-retailer-buttons { margin-top: 0 !important; padding-top: 1.25rem; } .wc-block-product > .tmc-retailer-buttons { justify-content: center; } /* The retailer buttons sit 18px below the Add to cart buttons beside them. The cause is measured, not guessed: WooCommerce's Add to cart button carries a 16px bottom margin and is 2px taller than our anchor, and because the grid sizes every tile to the same height that difference cannot be absorbed anywhere - equalising the titles just moves it. So this is a visual nudge rather than a layout fix. transform is used deliberately: it shifts what you see without changing the box, so nothing below it moves. If WooCommerce changes that margin, adjust the number: :root { --tmc-retailer-button-offset: 18px; } */ .wc-block-product > .tmc-retailer-buttons { transform: translateY( calc( -1 * var( --tmc-retailer-button-offset, 18px ) ) ); } /* --------------------------------------------------------------------------- Forminator Measured against the site's own buttons, Forminator's submit button was the only one off-brand anywhere: Archivo (body face) at weight 500, 2px corners, sentence case, on #333333. Core and WooCommerce buttons already render Archivo Black 400, square, uppercase. Its success message also ships a mint bar - background #BCEEE6 with an inset #067963 rule - which is the only colour on the site. Selectors are written without the per-form module id, so all six forms are covered; !important is needed because Forminator's own rules are generated per form at (1,4,0) specificity. --------------------------------------------------------------------------- */ .forminator-ui .forminator-button, .forminator-ui .forminator-button-submit, .forminator-ui button.forminator-button { background: var( --wp--preset--color--contrast ) !important; color: var( --wp--preset--color--base ) !important; font-family: var( --wp--preset--font-family--display ) !important; font-weight: 400 !important; font-size: var( --wp--preset--font-size--fine ) !important; text-transform: uppercase !important; letter-spacing: 0 !important; border: 0 !important; border-radius: 0 !important; padding: 0.9rem 1.8rem !important; height: auto !important; } .forminator-ui .forminator-button:hover, .forminator-ui .forminator-button-submit:hover { background: var( --wp--preset--color--ink ) !important; color: var( --wp--preset--color--base ) !important; } /* Success message: grey, matching the site rather than Forminator's mint. */ .forminator-ui .forminator-response-message.forminator-success { background-color: var( --wp--preset--color--subtle ) !important; box-shadow: inset 2px 0 0 0 var( --wp--preset--color--contrast ) !important; border-radius: 0 !important; } .forminator-ui .forminator-response-message.forminator-success, .forminator-ui .forminator-response-message.forminator-success p { color: var( --wp--preset--color--contrast ) !important; } /* --------------------------------------------------------------------------- Square corners everywhere A catch-all so any button a plugin adds later inherits the house style rather than arriving with rounded corners. --------------------------------------------------------------------------- */ .wp-element-button, .wp-block-button__link, .wc-block-components-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .forminator-button { border-radius: 0 !important; } /* --------------------------------------------------------------------------- Newsletter form in the footer The footer's first column is 462px wide and Forminator's fields fill it, so the signup form reads as wide as the article text above it. Capping the fields keeps the footer looking like a footer. Scoped to