/*
Theme Name: Blocksy Child
Theme URI: https://www.creeden.com
Description: Child theme for Creeden public site
Author: Creeden IT
Template: blocksy
Version: 1.1.0
*/
/* ===================================================================
CREEDEN POLISH LAYER v1.1
v1.1 corrections, verified against rendered DOM:
- Team Members Pro loads its CSS AFTER the child theme at equal
specificity, so plain .tmm rules lost. All structural rules now
carry a `body` prefix to win on specificity rather than !important.
- .tmm_photo is a DIV with an inline background-image and a
padding-bottom aspect-ratio hack. There is no ![]()
. Photo rules
retarget the div; padding-bottom needs !important to beat inline.
Remove this file to revert. Sections are independent.
=================================================================== */
:root {
--cr-navy: #22303c;
--cr-navy-soft: #4a5a68;
--cr-orange: #e8541f;
--cr-rule: #e2e6ea;
--cr-card-bg: #ffffff;
--cr-photo-bg: #eceef0;
--cr-space-sm: 1rem;
--cr-space-md: 2rem;
--cr-space-lg: 4rem;
}
/* -------------------------------------------------------------------
1. TEAM PHOTOS
The div's height comes from padding-bottom as a percentage of its
own width. 100% = square (plugin default). 125% = 4:5 portrait.
Inline style sets this per element, so !important is unavoidable.
------------------------------------------------------------------- */
body .tmm .tmm_photo {
padding-bottom: 125% !important;
height: 0 !important;
background-color: var(--cr-photo-bg);
background-size: cover !important;
background-position: 50% 18% !important; /* face, not chest */
border-radius: 2px 2px 0 0;
border: 0 !important;
filter: saturate(0.88) contrast(1.02);
transition: filter 0.25s ease;
}
body .tmm .tmm_member:hover .tmm_photo {
filter: saturate(1) contrast(1.02);
}
/* -------------------------------------------------------------------
2. CARD GRID
Plugin uses inline-block with percentage widths. Grid overrides it.
------------------------------------------------------------------- */
body .tmm .tmm_container {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 1.75rem;
float: none !important;
width: 100% !important;
}
@media (min-width: 1200px) {
body .tmm_5_columns .tmm_container {
grid-template-columns: repeat(5, 1fr);
}
}
body .tmm .tmm_member {
display: flex !important;
flex-direction: column;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
background: var(--cr-card-bg);
border: 1px solid var(--cr-rule) !important;
border-top: 3px solid var(--cr-navy) !important;
border-radius: 2px;
box-shadow: 0 1px 2px rgba(34, 48, 60, 0.04);
transition: box-shadow 0.25s ease, transform 0.25s ease;
overflow: hidden;
}
body .tmm .tmm_member:hover {
box-shadow: 0 8px 24px rgba(34, 48, 60, 0.10);
transform: translateY(-2px);
}
body .tmm .tmm_textblock {
display: flex !important;
flex-direction: column;
flex: 1 1 auto;
padding: 1.4rem 1.1rem 1.1rem;
text-align: center;
}
/* -------------------------------------------------------------------
3. CARD TYPOGRAPHY
------------------------------------------------------------------- */
body .tmm .tmm_names {
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--cr-navy);
margin: 0 0 0.35rem;
line-height: 1.3;
}
body .tmm .tmm_job {
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cr-navy-soft);
margin: 0 0 0.9rem;
line-height: 1.45;
min-height: 2.6em;
}
body .tmm .tmm_more_info {
margin-top: auto;
padding-top: 0.5rem;
}
body .tmm .tmm_more_info a,
body .tmm .tmm_comp_text a {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--cr-orange);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
body .tmm .tmm_more_info a:hover {
border-bottom-color: var(--cr-orange);
}
body .tmm .tmm_scblock {
padding: 0.75rem 0 0.25rem;
border-top: 1px solid var(--cr-rule);
margin-top: 0.9rem;
}
body .tmm .tmm_scblock img {
width: 18px;
height: 18px;
opacity: 0.55;
transition: opacity 0.2s ease;
}
body .tmm .tmm_scblock a:hover img {
opacity: 1;
}
/* -------------------------------------------------------------------
4. SECTION HEADINGS
------------------------------------------------------------------- */
.entry-content h2,
.entry-content h1:not(.page-title) {
font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
font-weight: 700;
letter-spacing: 0.01em;
color: var(--cr-navy);
line-height: 1.2;
}
.entry-content hr,
.entry-content .wp-block-separator {
max-width: 100%;
border: 0;
border-top: 2px solid var(--cr-orange);
opacity: 1;
margin-block: 0.75rem var(--cr-space-md);
}
/* -------------------------------------------------------------------
5. VERTICAL RHYTHM
------------------------------------------------------------------- */
.entry-content > .kb-row-layout-wrap {
padding-block: clamp(2rem, 1rem + 3vw, var(--cr-space-lg));
}
/* -------------------------------------------------------------------
6. FORMS
------------------------------------------------------------------- */
.wpforms-container .wpforms-field-label {
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--cr-navy);
}
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea {
border: 1px solid var(--cr-rule);
border-radius: 2px;
padding: 0.7rem 0.8rem;
font-size: 0.95rem;
background: #fff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wpforms-container input:focus,
.wpforms-container textarea:focus {
border-color: var(--cr-orange);
box-shadow: 0 0 0 3px rgba(232, 84, 31, 0.12);
outline: none;
}
.wpforms-container button[type="submit"] {
background: var(--cr-orange);
border: 0;
border-radius: 2px;
padding: 0.8rem 2.2rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: background 0.2s ease;
}
.wpforms-container button[type="submit"]:hover {
background: #cf461a;
}
/* -------------------------------------------------------------------
7. MOBILE
Does NOT fix the hero. That text is pixels, not text.
------------------------------------------------------------------- */
@media (max-width: 767px) {
body .tmm .tmm_container {
grid-template-columns: 1fr;
gap: 1.25rem;
max-width: 420px;
margin-inline: auto;
}
body .tmm .tmm_photo {
padding-bottom: 70% !important; /* shorter crop on phones */
background-position: 50% 15% !important;
}
body .tmm .tmm_job {
min-height: 0;
}
.entry-content > .kb-row-layout-wrap {
padding-block: 2rem;
}
}
/* -------------------------------------------------------------------
8. ACCESSIBILITY
------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--cr-orange);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
body .tmm .tmm_member,
body .tmm .tmm_photo {
transition: none;
}
body .tmm .tmm_member:hover {
transform: none;
}
}
/* -------------------------------------------------------------------
9. v1.2 - grid cell cleanup
Team Members Pro injects
clearing elements plus a trailing unclassed div. Harmless under the
plugin's float layout, but they become real cells under grid and
punch holes in the row. Verified against rendered DOM.
------------------------------------------------------------------- */
body .tmm .tmm_container > *:not(.tmm_member) {
display: none !important;
}