/* Form controls used across Family Hub modules -- plain HTML inputs have no
theme styling of their own (unlike buttons, which pick up Divi's global
et_pb_button styles), so we style them explicitly here. A shared
min-height keeps text inputs, textareas, and selects all the same
height regardless of each browser's own default sizing. */
.family_chat__input,
.family_tasks__input,
.family_calendar__title,
.family_calendar__start,
.family_calendar__location,
.family_chore_overview__title,
.family_chore_overview__value,
.family_chore_overview__assignee,
.family_chore_overview__recurrence {
border: 1px solid #d0d0d0;
border-radius: 6px;
/* !important: plain `) opens the file
picker instead, so no bare browser "Choose File / No file chosen" UI
shows through. Applies both to the welcome-banner instance and the
standalone family/profile-photo module. */
.family_profile_photo__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
}
.family_profile_photo__label {
display: inline-block;
cursor: pointer;
margin-top: 8px;
}
.family_welcome_message__avatar .family_profile_photo__preview {
border-radius: 50%;
object-fit: cover;
display: block;
width: 88px;
height: 88px;
}
.family_welcome_message__avatar .family_profile_photo__button {
font-size: 12px;
padding: 4px 12px !important;
}
.family_chore_overview__no_kids_notice {
font-size: 13px;
opacity: 0.75;
margin-bottom: 8px;
}
/* Calendar month navigation -- gives the prev/next buttons breathing room
around the month label instead of sitting flush against the text. */
.family_calendar__nav {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.family_calendar__prev,
.family_calendar__next {
padding: 6px 14px !important;
}
.family_calendar__month_label {
font-weight: 600;
}
/* Add-event form: consistent gaps between fields instead of them touching. */
.family_calendar__start {
margin-bottom: 12px;
display: inline-block;
}
.family_calendar__all_day {
margin: 0 6px 12px 12px;
}
.family_calendar__add {
margin-top: 4px;
}
/* Assign-chore row: title/kid-picker/value/button all need gaps between
them, not just each field's own internal padding. */
.family_chore_overview__assign_form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.family_chore_overview__title {
flex: 1 1 200px;
}
/* Sun-Sat day pills for "Certain days of the week" recurrence -- same
hidden-attribute-gated display toggle as .family_chat__emoji_picker
above (an author `display` rule must stay conditional on :not([hidden])
or it permanently overrides the UA's own `[hidden] { display: none }`). */
.family_chore_overview__days {
flex-basis: 100%;
flex-wrap: wrap;
gap: 6px;
}
.family_chore_overview__days:not([hidden]) {
display: flex;
}
.family_chore_overview__day_pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: "Fredoka", sans-serif;
font-weight: 600;
font-size: 12px;
padding: 4px 10px;
border-radius: 999px;
background: #f7f4ee;
border: 1px solid #e0dbcf;
cursor: pointer;
}
.family_chore_overview__day_pill:has(input:checked) {
background: #fbe8b8;
border-color: #cf9a1e;
color: #7a5b00;
}
.family_welcome_message__heading_row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
/* Actions group (background picker + Log out) sits together at the end
of the heading row, "by the logout button" per Thyran's request. */
.family_welcome_message__actions {
display: flex;
align-items: center;
gap: 10px;
}
/* .et_pb_button on the anchor gives it Divi's own button chrome (same
dark pill already used for "Change Photo" in this same hero card) --
just needs a smaller size to fit next to the bg picker swatch. */
.family_welcome_message__logout.et_pb_button {
font-size: 13px;
white-space: nowrap;
padding: 6px 16px !important;
}
.family_welcome_message__bg_picker_label {
display: inline-flex;
cursor: pointer;
flex: none;
}
/* Native color inputs default to a plain rectangular swatch -- reshaped
into a small circular button matching the icon-badge sizing used
throughout the rest of the redesign. Vendor-prefixed swatch/wrapper
pseudo-elements need overriding individually in both engines (Chromium
and Firefox use different ones) to actually get a round swatch instead
of the browser's own inset rectangle. */
.family_welcome_message__bg_picker {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 32px;
height: 32px;
padding: 0;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
background: none;
cursor: pointer;
}
.family_welcome_message__bg_picker::-webkit-color-swatch-wrapper {
padding: 0;
border-radius: 50%;
}
.family_welcome_message__bg_picker::-webkit-color-swatch {
border: none;
border-radius: 50%;
}
.family_welcome_message__bg_picker::-moz-color-swatch {
border: none;
border-radius: 50%;
}
/* Background-image upload -- same hidden-input-inside-a-styled-label
pattern as the "Change Photo" control (.family_profile_photo__input
already supplies the visually-hidden-but-still-clickable input styling,
reused here rather than duplicated). */
.family_welcome_message__bg_image_label {
display: inline-flex;
cursor: pointer;
flex: none;
}
.family_welcome_message__bg_image_button {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
}
/* Task/chore metadata line (who added it, when, when completed) -- kept
visually secondary to the title/status itself. Also reused by
chore-list.js/calendar.js for their own small caption line -- flex
layout (fh-list-row__body / fh-list-row) handles indentation now, so no
manual margin is needed here. */
.family_tasks__meta {
font-size: 12px;
opacity: 0.65;
}
/* Chore list card: heading + chore list share a left column (top-aligned,
so the list starts right under the heading instead of stretching to
match the stats table's height); the stats table sits in its own
top-aligned column to the right. */
.family_chore_list__layout {
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
gap: 16px;
}
/* Shared "stats table" look -- rounded card with soft amber shading, used
by both the kid-facing chore totals here and the parent-facing per-kid
earned/paid summary in Chore Overview. border-collapse must be
"separate" (not the table default "collapse") for border-radius to
actually clip the cell backgrounds into rounded corners. */
.fh-stats-table {
border-collapse: separate;
border-spacing: 0;
font-size: 13px;
border-radius: 12px;
overflow: hidden;
background: #fdf6e3;
}
/* Safety net for wider tables (Chore Overview's 5-column per-kid summary)
on narrow phones -- scrolls horizontally instead of breaking the card's
own layout. */
.fh-stats-table__scroll {
overflow-x: auto;
border-radius: 12px;
}
.fh-stats-table td,
.fh-stats-table th {
padding: 6px 14px;
text-align: right;
white-space: nowrap;
}
.fh-stats-table td:first-child,
.fh-stats-table th:first-child {
text-align: left;
}
.fh-stats-table thead th {
font-family: "Fredoka", sans-serif;
font-size: 11px;
font-weight: 600;
color: #7a5b00;
text-transform: uppercase;
letter-spacing: 0.03em;
background: #fbe8b8;
padding-top: 8px;
padding-bottom: 8px;
}
.family_chore_list__stats_table td:first-child {
opacity: 0.75;
}
.family_chore_list__total_row td {
background: #fbe8b8;
font-weight: 600;
font-size: 14px;
}
/* ==========================================================================
Playful redesign (2026-07-23) -- cream page background, Fredoka/Quicksand
type pairing, colored icon badges + accents per card. Matches the Claude
Design mockup Thyran approved (design.claude.ai project "WrightWay Family
Hub -- Home"). Scoped to family-hub's own module classes (plus
body.page-id-127 for page-level background/login styling) so it doesn't
leak into the rest of the site's typography.
========================================================================== */
/* !important beats the WP Customizer's inline `body.custom-background`
style printed in -- same specificity (one class each), so without
it the inline rule wins purely on source order. Each Divi Section on
this page also paints its own explicit background (resolved from the
theme's global "body color" variable) over whatever's behind it, so the
body rule alone only shows through in the gaps between sections --
overriding .et_pb_section directly covers the actual visible page. This
only targets Section-level backgrounds; card/row backgrounds (a
different global color variable) are untouched. */
/* background-color/-image/-size/-position split out from the shorthand
(was just `background: var(--fh-page-bg, ...)`) so an uploaded image
can layer over the color instead of the two fighting for the same
property. background-attachment: fixed makes every one of the stacked
Divi Sections show a "window" onto the same viewport-positioned image
instead of each restarting the image at its own top edge (which would
show visible seams between cards otherwise). */
body.page-id-127 {
background-color: var(--fh-page-bg, #fdf3e7) !important;
background-image: var(--fh-page-bg-image, none) !important;
background-size: cover !important;
background-position: center !important;
background-attachment: fixed !important;
}
/* .et_pb_section repeated 3x is not a typo -- Divi's own generated CSS for
this page carries a 4-class-deep selector
(".et-l--post > .et_builder_inner_content .et_pb_section.et_pb_section_0")
also marked !important, so a plain single-class override loses the
specificity tie-break even with !important. Repeating the class inflates
this selector's class-count to 4 (page-id-127 + 3x et_pb_section) to
match, with the extra `body` type selector breaking the tie in our
favor. */
body.page-id-127 .et_pb_section.et_pb_section.et_pb_section {
background-color: var(--fh-page-bg, #fdf3e7) !important;
background-image: var(--fh-page-bg-image, none) !important;
background-size: cover !important;
background-position: center !important;
background-attachment: fixed !important;
}
.family_chat,
.family_tasks,
.family_chore_list,
.family_chore_overview,
.family_calendar,
.family_welcome_message,
.family_profile_photo {
font-family: "Quicksand", sans-serif;
}
.fh-card-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.fh-card-head > * {
margin: 0;
font-family: "Fredoka", sans-serif;
}
.fh-icon-badge {
width: 32px;
height: 32px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex: none;
font-style: normal;
}
.fh-icon-badge--chat { background: #d7e3fc; }
.fh-icon-badge--tasks { background: #d7f5df; }
.fh-icon-badge--chores { background: #fbe8b8; }
.fh-icon-badge--calendar { background: #ecd9f7; }
.fh-icon-badge--profile { background: #fbdcd0; }
/* Recolor each module's buttons to its own accent instead of Divi's
site-wide default button color, so Send/Add/Assign feels matched to the
card it's inside. */
.family_chat .et_pb_button { background: #4a6fd4 !important; border-color: transparent !important; }
.family_tasks .et_pb_button { background: #349a5a !important; border-color: transparent !important; }
.family_chore_list .et_pb_button,
.family_chore_overview .et_pb_button { background: #cf9a1e !important; border-color: transparent !important; }
.family_calendar .et_pb_button { background: #9152b8 !important; border-color: transparent !important; }
/* Welcome banner: warm gradient hero card instead of a plain panel. Goes on
the module's own root element (which already carries Divi's baked-in
card padding/radius from its block attrs) -- a separate inner div would
nest a second rounded rectangle inside the module's own white one. */
.family_welcome_message {
background: linear-gradient(160deg, #f7d3bb, #f9dfc4) !important;
}
.family_welcome_message__heading_row * {
font-family: "Fredoka", sans-serif;
}
.family_welcome_message__brand {
font-family: "Fredoka", sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8a5a3a;
opacity: 0.7;
margin-bottom: 4px;
}
.family_welcome_message__quote {
font-style: italic;
font-size: 14px;
color: #6b4a36;
opacity: 0.85;
margin-top: 10px;
}
.family_welcome_message__quote_author {
font-style: normal;
font-size: 12px;
opacity: 0.8;
}
/* Family presence list -- who's online now / when everyone else was last
seen, spanning the full hero card width below the personal greeting. */
.family_welcome_message__presence {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
gap: 8px;
}
.family_welcome_message__presence_row {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
}
.family_welcome_message__presence_avatar_wrap {
position: relative;
flex: none;
line-height: 0;
}
.family_welcome_message__presence_avatar {
border-radius: 50%;
display: block;
}
/* Border color matches the hero gradient rather than the card background
it actually sits on, so the dot doesn't need to track which part of the
gradient it's over to still look intentional rather than mismatched. */
.family_welcome_message__presence_dot {
position: absolute;
right: -1px;
bottom: -1px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #f7d3bb;
}
.family_welcome_message__presence_dot--online {
background: #3fb95f;
}
.family_welcome_message__presence_dot--offline {
background: #c8bfb5;
}
.family_welcome_message__presence_name {
font-family: "Fredoka", sans-serif;
font-weight: 600;
flex: 1 1 auto;
}
.family_welcome_message__presence_status {
font-size: 12px;
opacity: 0.7;
white-space: nowrap;
flex: none;
}
/* ---- List rows shared by Tasks / Chores / Calendar (rendered client-side
by tasks.js / chore-list.js / calendar.js) ---- */
.fh-list-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 12px;
background: #f7f4ee;
list-style: none;
margin-bottom: 6px;
}
.fh-list-row input[type="checkbox"] {
width: 18px;
height: 18px;
flex: none;
}
.family_tasks .fh-list-row input[type="checkbox"] { accent-color: #349a5a; }
.fh-list-row--done {
opacity: 0.65;
}
.fh-list-row--done .fh-list-row__title {
text-decoration: line-through;
}
.fh-list-row__title {
font-weight: 600;
flex: 1 1 auto;
}
.fh-list-row__body {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1 1 auto;
}
.fh-pill {
font-family: "Fredoka", sans-serif;
font-weight: 600;
font-size: 11px;
padding: 3px 9px;
border-radius: 999px;
flex: none;
white-space: nowrap;
}
.fh-pill--chores { color: #7a5b00; background: #fbe8b8; }
.family_chore_list .fh-list-row .et_pb_button,
.family_chore_overview .fh-list-row .et_pb_button {
margin-left: auto;
font-size: 12px;
padding: 4px 12px !important;
white-space: nowrap;
flex-shrink: 0;
}
.family_calendar .fh-list-row__day {
font-family: "Fredoka", sans-serif;
font-weight: 600;
font-size: 12px;
color: #6a3a91;
width: 44px;
flex: none;
text-transform: uppercase;
}
.family_calendar .fh-list-row__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #9152b8;
flex: none;
}
/* ---- Chat message rows ---- */
.family_chat__avatar {
box-shadow: 0 0 0 2px #d7e3fc;
}
.family_chat__author {
font-family: "Fredoka", sans-serif;
}
/* ---- Logged-out login card (native divi/login module) -- restyled to
match the same warm/playful language rather than Divi's default dark
panel, purely via CSS so page 127's post_content stays untouched. ---- */
body.page-id-127 .et_pb_login .et_pb_login_form .input {
border: 1px solid #d0d0d0;
border-radius: 10px;
padding: 10px 14px !important;
font-family: "Quicksand", sans-serif;
font-size: 14px;
}
body.page-id-127 .et_pb_login .et_pb_forgot_password a {
font-family: "Quicksand", sans-serif;
}
body.page-id-127 .et_pb_login .et_pb_newsletter_button {
background: #4a6fd4 !important;
border-color: transparent !important;
font-family: "Fredoka", sans-serif;
}
/* Mobile: cards only ~10-20px from the screen edge instead of Divi's
site-wide "Content Width" theme setting (80%, --content-width), which on
a narrow phone leaves ~35-40px of dead margin on each side on top of the
module's own internal padding. That theme setting is left alone (it's
used sitewide, not just here) -- this only overrides the row width, and
only on page 127, and only below the phone breakpoint. */
@media (max-width: 767px) {
body.page-id-127 .et_pb_row:not([class*="et_flex_column"]) {
width: calc(100% - 32px) !important;
max-width: none !important;
}
}
/* Parent-only delete control on Family Chat messages / Family Tasks rows.
.fh-list-row's __body already takes flex:1, so this flex:none sibling
naturally ends up flush right with no extra margin needed; Family Chat's
own row isn't flex, so it's floated right instead. */
.fh-delete-btn {
border: none;
background: none;
color: #b23b3b;
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 2px 8px;
border-radius: 6px;
flex: none;
}
.fh-delete-btn:hover {
background: #fbe2e2;
}
.family_chat__message .fh-delete-btn {
float: right;
}
/* Homepage masthead ("Family Hub" + one-line description) -- et_pb_text_0
is the only Text module on this page, so it's safe to target directly
rather than needing a custom class in the block's own attrs. */
body.page-id-127 .et_pb_text_0 h2 {
font-family: "Fredoka", sans-serif;
font-size: 30px;
color: #4a3728;
margin-bottom: 6px;
}
body.page-id-127 .et_pb_text_0 p {
font-family: "Quicksand", sans-serif;
font-size: 14px;
color: #4a3728;
opacity: 0.7;
}