/*
Theme Name: KidsWorld Child Theme
Theme URI: http://themeforest.net/user/Softwebmedia/portfolio
Description: KidsWorld child theme for customization
Author: Soft Web Media
Author URI: http://themeforest.net/user/Softwebmedia
Template: kids-world
Version: 1.00
*/
/* Add your custom style below */
/* =========================================================================
HEADER - compact logo + tidy sticky state
=========================================================================
The Campbell School logo is 315x56 natively. The theme forced
.kidsworld_logo_img img to height:100px (and 80px when stuck), which
upscaled it ~1.8x - blurry and far too heavy. Sized to 45px here, with a
proportionally shorter logo row so the header does not carry dead space.
!important is needed throughout: the parent rules are ID-qualified
(#kidsworldHeader.kidsworld_smaller_menu ...) and load from layout.css.
------------------------------------------------------------------------- */
/* --- Vertical rhythm --------------------------------------------------
Row heights are the single source of truth. The menu centres itself by
matching line-height to the row, which is how the theme's own icon-less
nav variant works; the alternative (padding-top) leaves the anchor's 28px
bottom margin behind as dead space and makes the bar far taller than the
text needs.
normal : 36px top bar + 62px logo row = 98px
stuck : 0 (top bar hidden) + 50px = 50px
---------------------------------------------------------------------- */
/* Trim the contact strip: 30px line-height + 3px padding either side. */
.kidsworld_topbar {
padding-top: 3px !important;
padding-bottom: 3px !important;
}
.kidsworld_logo_img img {
height: 45px !important;
max-height: 45px !important;
width: auto !important;
}
.kidsworld_logo_img a {
padding-top: 8px !important;
padding-bottom: 9px !important;
}
.kidsworld_logo_menu_holder {
height: 62px !important;
}
/* Let each item fill the row so line-height alone centres the label. */
ul.kidsworld_top_nav > li > a {
margin-bottom: 0 !important;
}
ul.kidsworld_top_nav > li > a > span {
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 62px !important;
}
/* The hover bar is absolutely positioned inside the span; anchor it to the
top and push it to the vertical centre of the row (half the row, less half
the bar's 14px height). */
ul.kidsworld_top_nav > li > a > span:after {
top: 0 !important;
bottom: auto !important;
margin-top: 24px !important;
}
/* Active-item arrow sits on the bottom edge of the bar, pointing at content. */
ul.kidsworld_top_nav > li > a:before {
bottom: 0 !important;
}
/* =========================================================================
FOOTER
=========================================================================
The theme floats the copyright line left and a second line right. With the
right-hand line removed, the remaining one has to be un-floated or it sits
awkwardly against the left edge.
------------------------------------------------------------------------- */
/* --- Column headings ---------------------------------------------------
The theme centres each footer heading and centres a 60px gold accent bar
beneath it (an absolutely positioned span::after, offset with left:50%).
Both are pulled to the left, and a full-width rule is added underneath so
the three columns read as a set. The gold bar then sits on that rule. */
#footer .kidsworld_footer_widget h3 {
text-align: left !important;
padding-bottom: 14px !important;
margin-bottom: 24px !important;
}
#footer .kidsworld_footer_widget h3 span {
display: inline-block;
}
/* The theme draws TWO stacked accent bars under each title - an 80px
span::before and a 60px span::after, both centred with left:50%. Moving
only one of them leaves the other stranded mid-column, so both are pulled
to the left edge and aligned to the same baseline, where they overlap into
a single accent under the title. */
#footer .kidsworld_footer_widget h3 span:before,
#footer .kidsworld_footer_widget h3 span:after {
left: 0 !important;
right: auto !important;
margin-left: 0 !important;
bottom: -1px !important;
}
/* --- Link hover --------------------------------------------------------
The hover COLOUR is not set here: the theme generates
".footer a:hover { color: ... }" into its inline CSS from the
kidsworld_footer_links_hover_color option, which is now the brand blue.
Fighting that generated rule with a more specific override would leave two
sources of truth. Only the movement is added, which the theme has no
opinion about. Links inherit the theme's 0.3s ease-out transition. */
/* Block-level so the whole row is a hover/click target, not just the few
characters of the label. Scoped to .widget_nav_menu on purpose: the social
icons live in the same .kidsworld_footer_widget wrapper and must stay
inline, or they stack vertically.
The nudge uses padding rather than translateX - a full-width block shifted
by transform would overhang its column by 4px. */
#footer .widget_nav_menu ul li a {
display: block;
padding-left: 0;
-webkit-transition: padding-left .3s ease-out, color .3s ease-out;
transition: padding-left .3s ease-out, color .3s ease-out;
}
#footer .widget_nav_menu ul li a:hover,
#footer .widget_nav_menu ul li a:focus {
padding-left: 4px;
}
#footer .kidsworld_footer_widget ul li {
-webkit-transition: border-color .3s ease-out;
transition: border-color .3s ease-out;
}
#footer .kidsworld_footer_widget ul li:hover {
border-bottom-color: #015e9b;
}
/* The social icon is a link too, but it should not slide or go full width. */
#footer .swmsc_sm_wid_icons ul li a {
display: block; /* fills its round chip, not the column */
}
#footer .swmsc_sm_wid_icons ul li a:hover,
#footer .swmsc_sm_wid_icons ul li a:focus {
padding-left: 0;
opacity: .85;
}
.kidsworld_footer_copyright p.left,
.kidsworld_footer_copyright p.right {
float: none !important;
width: 100% !important;
text-align: center !important;
margin: 0 !important;
}
/* Social icons sit directly under the About copy, so drop the widget's
default top spacing and left-align them with the text above. */
#footer .swmsc_custom_social_widget {
margin-top: -10px;
}
#footer .swmsc_sm_wid_icons ul {
margin: 0;
padding: 0;
text-align: left;
}
#footer .swmsc_sm_wid_icons ul li {
margin: 0 8px 0 0;
}
/* Give the two link columns a consistent rhythm. */
#footer .kidsworld_footer_widget ul li {
line-height: 1.9;
}
/* =========================================================================
SERVICE BOXES (Our Programs) - accent bar alignment
=========================================================================
Each box draws two 56px accent bars (.._icon_brd1 / .._icon_brd2). The
shortcodes plugin positions them off the 80px icon block rather than the
title, and staggers them 10px horizontally, so they start at 70px and 80px
while the title starts at 106px - neither aligned to the title nor to each
other.
The title is offset by margin-left:106px and the bars are absolutely
positioned against the 80px icon section, so a -82px pull puts each bar's
leading edge exactly on the title:
right edge 80 + 82 = 162, minus the 56px width = 106.
The 3px vertical stagger is kept - that is the intended "double" look.
------------------------------------------------------------------------- */
.swmsc_school_service_icon_brd1,
.swmsc_school_service_icon_brd2 {
margin-right: -82px;
}
/* Mirrored for right-aligned boxes, where the plugin flips the bars to
left:0 and the title carries margin-right:106px. The bars' trailing edge
then lands on the title's right edge: 271 - 82 + 56 = 245. */
@media only screen and (min-width: 980px) {
.sss_right .swmsc_school_service_icon_brd1,
.sss_right .swmsc_school_service_icon_brd2 {
margin-right: 0;
margin-left: -82px;
}
}
/* =========================================================================
HOMEPAGE - welcome section photo
=========================================================================
The school photo is served at 768px so it stays sharp on retina, but the
demo image it replaced was 500px wide. Left uncapped it eats 69% of the
column and crushes the mission text beside it, so it is displayed at 480px
(about the original's footprint) while keeping the higher-resolution file.
------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) {
body.home .swmsc_image_lightbox.image_right {
max-width: 480px;
}
body.home .swmsc_image_lightbox.image_right img {
width: 100%;
height: auto;
}
}
/* --- Menu accent colour ------------------------------------------------
styling.css gives every nav item its own colour, hard-coded per :nth-child
(purple, yellow, red, green, light blue...) across four clusters: link
text, border-top, hover background, and border. These unify the whole lot
to the theme yellow, with two text colours forced by contrast (noted below).
The #kidsworldHeader prefix is not decorative: brand-colors.css already
carries generated !important rules for the :first-child item at specificity
(0,2,5). An ID puts these at (1,1,5) so they win outright instead of losing
to a more specific !important. */
/* Top bars + divider ticks (the span accents). */
#kidsworldHeader ul.kidsworld_top_nav > li > a > span:before,
#kidsworldHeader ul.kidsworld_top_nav > li > a > span:after {
background-color: #fcb54d !important;
}
/* Active item's pointer, plus the line across the top of each drop-down. */
#kidsworldHeader ul.kidsworld_top_nav > li.kidsworld_m_active > a:before,
#kidsworldHeader.kidsworld_smaller_menu ul.kidsworld_top_nav > li.kidsworld_m_active > a:before,
#kidsworldHeader ul.kidsworld_top_nav > li > ul {
border-top-color: #fcb54d !important;
}
/* The 2px accent border on the first drop-down row. */
#kidsworldHeader ul.kidsworld_top_nav > li > ul > li:first-child {
border-top-color: #fcb54d !important;
}
/* Drop-down row hover: yellow fill. The theme pairs the fill with white text
(#fff on #fcb54d is 1.8:1 - unreadable), so the row text goes dark navy
here, which reaches 6.7:1. */
#kidsworldHeader ul.kidsworld_top_nav > li > ul li:hover {
background-color: #fcb54d !important;
}
#kidsworldHeader ul.kidsworld_top_nav > li > ul li:hover > a,
#kidsworldHeader ul.kidsworld_top_nav > li > ul li:hover > a span {
color: #013a5e !important;
}
/* Top-level active / hover text. Yellow text on the white header row is
1.8:1 and would make the current page's menu item unreadable, so it stays
dark - the yellow top bar is the active/hover indicator. This also clears
the theme's per-item rainbow (purple / red / green / blue) active colours. */
#kidsworldHeader ul.kidsworld_top_nav > li.kidsworld_m_active > a,
#kidsworldHeader ul.kidsworld_top_nav > li.kidsworld_m_active > a span,
#kidsworldHeader ul.kidsworld_top_nav > li:hover > a,
#kidsworldHeader ul.kidsworld_top_nav > li:hover > a span {
color: #333 !important;
}
/* =========================================================================
HOMEPAGE - centred "Welcome" section
=========================================================================
The CTA sits in a swmsc_text_block; WPBakery strips the wrapping
, so
the centring has to come from the text block itself. :has() limits it to
the block that actually holds a button. */
body.home .swmsc_text_block:has(> .swmsc_button_div) {
text-align: center;
}
body.home .swmsc_button_div {
text-align: center;
}
/* =========================================================================
RESPONSIVE - stop sideways scrolling
=========================================================================
WPBakery inner rows carry -15px side margins that the parent column's
padding normally cancels out. Once the columns stack (below 768px) that
compensation disappears and the row pokes ~15px past the container, which
makes the whole page scroll sideways. Clipping the content wrapper is the
safe fix: the fixed header and top bar live OUTSIDE this element, so
nothing sticky is affected. */
.kidsworld_containers_holder {
overflow-x: hidden;
}
/* --- Dropdown parents are labels, not links ----------------------------
"About" and "Admissions" only open their submenu - they point at "#" and
must not look or behave clickable. The submenu opens on li:hover in pure
CSS (no JS), so switching off pointer events on the anchor alone does not
stop the dropdown from appearing. On mobile the theme adds a separate
.kidsworld-mini-menu-arrow span outside the anchor to expand the submenu,
so this does not trap touch users either. */
#kidsworldHeader ul.kidsworld_top_nav > li.menu-item-has-children > a,
#kidsworld_mobi_nav li.kidsworld-has-sub-menu > a {
cursor: default;
pointer-events: none;
}
/* --- Scrolled / stuck state ------------------------------------------- */
@media only screen and (min-width: 768px) {
/* Animate between the two heights so the shrink is not a hard jump. */
.kidsworld_logo_menu_holder,
.kidsworld_logo_img img,
.kidsworld_logo_img a {
-webkit-transition: all .25s ease;
transition: all .25s ease;
}
/* Reclaim the top bar's 45px once the user has scrolled. */
#kidsworldHeader.kidsworld_smaller_menu .kidsworld_topbar {
display: none !important;
}
#kidsworldHeader.kidsworld_smaller_menu .kidsworld_logo_img img {
height: 34px !important;
max-height: 34px !important;
}
#kidsworldHeader.kidsworld_smaller_menu .kidsworld_logo_img a {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
#kidsworldHeader.kidsworld_smaller_menu .kidsworld_logo_menu_holder {
height: 50px !important;
}
/* Same rule as above, against the 50px stuck row. */
#kidsworldHeader.kidsworld_smaller_menu ul.kidsworld_top_nav > li > a > span {
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 50px !important;
}
#kidsworldHeader.kidsworld_smaller_menu ul.kidsworld_top_nav > li > a {
margin-bottom: 0 !important;
}
#kidsworldHeader.kidsworld_smaller_menu ul.kidsworld_top_nav > li > a > span:after {
top: 0 !important;
bottom: auto !important;
margin-top: 18px !important;
}
/* Drop-downs hang off the nav row, so they must follow its new height. */
#kidsworldHeader.kidsworld_smaller_menu ul.kidsworld_top_nav > li > ul {
top: auto !important;
}
/* A soft shadow separates the stuck header from the content behind it. */
#kidsworldHeader.kidsworld_smaller_menu {
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
}
/* Mobile: the header is not fixed below 768px, so let it size naturally. */
@media only screen and (max-width: 767px) {
.kidsworld_logo_menu_holder {
height: auto !important;
}
.kidsworld_logo_img a {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
/* The theme caps the logo's width here (280px, then 240px under 480px).
Forcing an explicit height as well would stretch it, so cap the height
instead and let the width follow the aspect ratio. */
.kidsworld_logo_img img {
height: auto !important;
max-height: 45px !important;
width: auto !important;
max-width: 100% !important;
}
/* The desktop line-height would leave a huge gap in the slide-down menu. */
ul.kidsworld_top_nav > li > a > span {
line-height: 1.4 !important;
}
/* Announcement bar: on phones show only the phone number and the social
icon. The email is the only left-side item carrying a link (a mailto),
so :has() targets it regardless of position - it will not catch the
plain-text phone number. */
.kidsworld_topbar_left li:has(a[href^="mailto:"]) {
display: none !important;
}
/* With just the phone left and the social icon right, keep them on one
compact row instead of stacked full-width blocks. */
.kidsworld_topbar_left,
.kidsworld_topbar_right {
display: inline-block !important;
width: auto !important;
}
.kidsworld_topbar_left {
float: left !important;
}
.kidsworld_topbar_right {
float: right !important;
}
.kidsworld_topbar_left li {
display: inline-block !important;
}
}
/* =========================================================================
OUR MISSION PAGE (page id 1746)
========================================================================= */
/* "What We Believe In" values: bigger icons + text, stacked and centred so
each value reads as a badge instead of floating left in a wide column.
Scoped to the page so it can't touch the icon_list on other pages. */
body.page-id-1746 .swmsc_the_icons {
text-align: center;
list-style: none;
margin-left: 0;
padding-left: 0;
}
body.page-id-1746 .swmsc_the_icons li {
text-align: center;
font-size: 20px;
line-height: 1.5;
margin-bottom: 20px;
/* Theme reserves 26px left padding for the inline-icon layout; the stacked
layout doesn't need it, and it would push the pair off-centre. */
padding-left: 0 !important;
padding-right: 0 !important;
}
body.page-id-1746 .swmsc_the_icons li i {
display: block;
font-size: 30px;
margin: 0 auto 10px;
}
/* Centre the "Enroll Your Child" button. Its swmsc_button_div is inline-block,
so it only centres when its parent .wpb_wrapper is centred. :has() scopes this
to just the wrapper that holds the button, so body paragraphs stay left. */
body.page-id-1746 .swmsc_button_div {
text-align: center;
}
body.page-id-1746 .wpb_wrapper:has(> .swmsc_button_div) {
text-align: center;
}
/* =========================================================================
MEET OUR STAFF PAGE (page id 1748)
=========================================================================
"Our Team of Experts" style cards (swmsc_content_box + service image),
two per row. Source photos vary in aspect ratio, so normalise them into
equal circular headshots. */
body.page-id-1748 .swmsc_services_item_holder img {
width: 150px !important;
height: 150px !important;
object-fit: cover;
object-position: center 25%;
box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
/* Subtle lift on hover for each card. */
body.page-id-1748 .swmsc_service_box {
transition: transform .2s ease, box-shadow .2s ease;
height: 100%;
}
body.page-id-1748 .swmsc_service_box:hover {
transform: translateY(-4px);
box-shadow: 0 12px 26px rgba(0, 0, 0, .10);
}
/* =========================================================================
DAILY SCHEDULE & ACTIVITIES (page id 1750)
=========================================================================
Theme has no timeline/schedule component, so these two small patterns are
custom - kept in the theme's blue (#015e9b) / gold (#fcb54d) palette. */
/* Arrival & dismissal time list */
body.page-id-1750 .tcs-times {
list-style: none;
margin: 0;
padding: 0;
}
body.page-id-1750 .tcs-times li {
padding: 10px 0;
border-bottom: 1px dashed #cfddea;
color: #555;
}
body.page-id-1750 .tcs-times li:last-child {
border-bottom: 0;
padding-bottom: 0;
}
body.page-id-1750 .tcs-times li span {
display: inline-block;
min-width: 104px;
font-weight: 700;
color: #015e9b;
}
/* Daily-flow timeline */
body.page-id-1750 .tcs-timeline {
list-style: none;
margin: 0;
padding: 0;
}
body.page-id-1750 .tcs-timeline li {
position: relative;
padding: 0 0 20px 34px;
color: #555;
line-height: 1.55;
}
body.page-id-1750 .tcs-timeline li:before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #015e9b;
border: 3px solid #fff;
box-shadow: 0 0 0 2px #015e9b;
z-index: 1;
}
body.page-id-1750 .tcs-timeline li:after {
content: "";
position: absolute;
left: 7px;
top: 7px;
width: 2px;
height: 100%;
background: #dbe4ee;
}
body.page-id-1750 .tcs-timeline li:last-child {
padding-bottom: 0;
}
body.page-id-1750 .tcs-timeline li:last-child:after {
display: none;
}
body.page-id-1750 .tcs-timeline li strong {
color: #333;
}
/* =========================================================================
SCHOOL CALENDAR (page id 1760)
=========================================================================
Month cards with events colour-coded by type - custom pattern in the
theme's blue / coral / green accents. */
body.page-id-1760 .tcs-cal-legend {
text-align: center;
}
body.page-id-1760 .tcs-cal-legend span {
display: inline-block;
margin: 0 12px;
color: #555;
font-size: 14px;
}
body.page-id-1760 .tcs-cal-legend i {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
margin-right: 6px;
vertical-align: middle;
}
body.page-id-1760 .tcs-cal-head {
background: #015e9b;
color: #fff;
font-size: 18px;
font-weight: 700;
padding: 12px 20px;
border-radius: 14px 14px 0 0;
}
body.page-id-1760 .tcs-cal-body {
padding: 14px 20px 18px;
}
body.page-id-1760 .tcs-cal {
list-style: none;
margin: 0;
padding: 0;
}
body.page-id-1760 .tcs-cal li {
padding: 8px 0 8px 12px;
border-left: 3px solid #ccc;
margin-bottom: 4px;
color: #555;
line-height: 1.45;
}
body.page-id-1760 .tcs-cal li:last-child {
margin-bottom: 0;
}
body.page-id-1760 .tcs-cal .cal-day {
display: inline-block;
font-weight: 700;
margin-right: 7px;
}
body.page-id-1760 .tcs-cal li.cal-event {
border-left-color: #015e9b;
}
body.page-id-1760 .tcs-cal li.cal-event .cal-day {
color: #015e9b;
}
body.page-id-1760 .tcs-cal li.cal-closed {
border-left-color: #fc5b4e;
}
body.page-id-1760 .tcs-cal li.cal-closed .cal-day {
color: #fc5b4e;
}
body.page-id-1760 .tcs-cal li.cal-resume {
border-left-color: #6fae3a;
}
body.page-id-1760 .tcs-cal li.cal-resume .cal-day {
color: #6fae3a;
}
/* =========================================================================
REGISTRATION FORMS - form only, no other page sections.
Shared by: page id 1754 (Registration) and 1756 (Toddler Registration) -
same PDF-derived pattern, so both pages share one styling pass.
========================================================================= */
body.page-id-1754 .wpcf7-form p,
body.page-id-1756 .wpcf7-form p {
margin-bottom: 18px;
}
body.page-id-1754 .wpcf7-form input[type="text"],
body.page-id-1754 .wpcf7-form input[type="tel"],
body.page-id-1754 .wpcf7-form input[type="email"],
body.page-id-1754 .wpcf7-form input[type="date"],
body.page-id-1754 .wpcf7-form textarea,
body.page-id-1756 .wpcf7-form input[type="text"],
body.page-id-1756 .wpcf7-form input[type="tel"],
body.page-id-1756 .wpcf7-form input[type="email"],
body.page-id-1756 .wpcf7-form input[type="date"],
body.page-id-1756 .wpcf7-form textarea {
width: 100%;
border: 1px solid #dbe4ee;
border-radius: 8px;
padding: 12px 14px;
font-size: 15px;
}
body.page-id-1754 .wpcf7-form input:focus,
body.page-id-1754 .wpcf7-form textarea:focus,
body.page-id-1756 .wpcf7-form input:focus,
body.page-id-1756 .wpcf7-form textarea:focus {
border-color: #015e9b;
outline: none;
}
/* Phone + email side by side on desktop.
CF7 auto-wraps every tag in the paragraph it finds it in, so both fields
end up inside ONE
(joined by the that separated them in the
source), not as two separate flex items. The
itself - not the
.tcs-reg-row div around it - is what actually needs to become the flex
row; the is hidden since flex-direction handles the split instead. */
body.page-id-1754 .tcs-reg-row p,
body.page-id-1756 .tcs-reg-row p {
display: flex;
gap: 16px;
margin-bottom: 18px;
}
body.page-id-1754 .tcs-reg-row p br,
body.page-id-1756 .tcs-reg-row p br {
display: none;
}
body.page-id-1754 .tcs-reg-row p > span.wpcf7-form-control-wrap,
body.page-id-1756 .tcs-reg-row p > span.wpcf7-form-control-wrap {
flex: 1;
}
@media only screen and (max-width: 600px) {
body.page-id-1754 .tcs-reg-row p,
body.page-id-1756 .tcs-reg-row p {
flex-direction: column;
gap: 0;
}
}
/* Radio / checkbox groups (program preference, additional care) as big,
clearly readable selectable cards rather than tiny native controls. */
body.page-id-1754 .wpcf7-list-item,
body.page-id-1756 .wpcf7-list-item {
display: block;
margin: 0 0 12px;
border: 2px solid #e6ecf2;
border-radius: 12px;
transition: border-color .15s ease, background-color .15s ease;
cursor: pointer;
}
/* use_label_element wraps the input + text in a real