/* Style for the main section of this page */ .parents-resources-section { /* background-color: #FAF8F5; */ /* Original beige color, now overridden by body */ position: relative; /* For positioning decorative doodles */ overflow-x: hidden; /* Prevent horizontal scroll if doodles overflow slightly */ padding-bottom: 80px; /* Add some space at the bottom for doodles */ } /* NEW: Global page background and centering */ body.page-parents-resources { /* Add this class to the tag in HTML */ background-color: #faf9f8; } /* NEW: Constrain the main content area for this page */ .parents-resources-section > .container { max-width: 1200px; /* Adjust this value as needed for your desired content width */ margin: 0 auto; /* Centers the container */ position: relative; /* Important for doodle positioning within the constrained width */ padding-left: 20px; /* Keep some padding for smaller screens */ padding-right: 20px; /* Keep some padding for smaller screens */ } .parents-resources-section h1 { text-align: center; font-size: 2.4rem; /* Adjust as needed */ margin-bottom: 15px; padding-top: 40px; /* More space above title */ color: var(--color-dark-text); } .parents-resources-section .intro-paragraph { text-align: center; max-width: 800px; margin: 0 auto 60px auto; /* Increased bottom margin */ font-size: 1rem; color: var(--color-light-text); } /* Grid for the resource cards */ .resources-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */ gap: 40px; /* Space between cards */ /* margin-bottom: 40px; */ /* Removed, replaced by spacing after each grid */ } /* Add margin after the first grid */ .resources-grid:first-of-type { margin-bottom: 80px; /* Space between the two rows of cards */ } .resource-card { } .resource-card img { width: 80%; border-radius: 10px; /* Slightly rounded corners for images inside cards */ margin-bottom: 20px; object-fit: cover; margin: 0 auto; } .resource-card h3 { font-size: 1.2rem; font-weight: 600; color: var(--color-dark-text); line-height: 1.5; margin: auto; margin-top: 20px; width: 80%; } /* Card Border Colors (using existing or new variables if needed) */ .card-border-green { border-color: #A5D6A7; } .card-border-yellow { border-color: #FFE082; } .card-border-pink { border-color: #F48FB1; } .card-border-blue { border-color: #90CAF9; } /* Separator Line - REMOVED as requested */ /* .resource-separator { ... } */ /* Decorative Doodle Styles */ .decor-doodle { position: absolute; z-index: 0; opacity: 0.9; } /* Doodle Positioning: These positions are now relative to the .parents-resources-section > .container or the .parents-resources-section itself if you want them outside the main content flow. It might be easier to position them relative to the overall section so they can "bleed" outside the centered content area more naturally. If you want them strictly within the centered content, they need to be inside the .container or positioned relative to it. Let's assume for now they are relative to the main section and can sit in the "margins" created by centering the content. */ /* Top Section Doodles */ .doodle-airplane { top: 130px; left: calc(50% - 600px - 50px); width: 100px; transform: rotate(-15deg); } /* 600px is half of 1200px max-width */ .doodle-butterfly { top: 240px; left: calc(50% - 600px - 30px); width: 60px; } .doodle-flower { top: 610px; left: calc(50% - 650px - 20px); width: 100px; } .doodle-sun { top: 20px; right: calc(50% - 600px - 45px); width: 90px; } .doodle-rocket { top: 210px; right: calc(50% - 600px - 50px); width: 90px; transform: rotate(25deg); } .doodle-bear-tree { top: 660px; right: calc(50% - 630px - 100px); width: 180px; } /* Bottom Section Doodles - adjust based on the position of the second resources-grid */ /* These will need careful adjustment relative to the content flow */ .doodle-robot { top: 64%; left: calc(50% - 600px - 40px); width: 100px; } .doodle-princess { top: 65%; right: calc(50% - 600px - 40px); width: 90px; } .doodle-hearts { top: 75%; right: calc(50% - 600px - 30px); width: 60px; } /* These bottom ones are tricky. Let's try to position them relative to the bottom of the section */ .doodle-dino-rider { bottom: 40px; left: calc(50% - 600px - 90px); width: 180px; } .doodle-boat-whale { bottom: 40px; left: 50%; transform: translateX(-50%); width: 170px; } .doodle-truck { bottom: 40px; right: calc(50% - 600px - 80px); width: 160px; } /* Active state for current page in nav (from your main style.css ideally) */ header nav ul li a.active { font-weight: 700; color: var(--color-accent-green); } .spacer { height: 300px; } /* Responsive adjustments */ @media (max-width: 1300px) { /* Adjust breakpoint based on your doodle positions */ /* When screen is smaller than content + doodle margins, doodles might need to move or shrink */ .doodle-airplane { left: 2%; } .doodle-butterfly { left: 3%; } .doodle-flower { left: 2%; } .doodle-sun { right: 2%; } .doodle-rocket { right: 1%; } .doodle-bear-tree { right: 0; } .doodle-robot { left: 1%; top: 60%; } .doodle-princess { right: 1%; top: 63%; } .doodle-hearts { right: 2%; top: 72%; } .doodle-dino-rider { left: 2%; bottom: 20px;} .doodle-truck { right: 2%; bottom: 20px;} } @media (max-width: 992px) { .parents-resources-section > .container { padding-left: 15px; padding-right: 15px; } .parents-resources-section h1 { font-size: 2rem; padding-top: 30px;} .parents-resources-section .intro-paragraph { margin-bottom: 40px; } .resources-grid:first-of-type { margin-bottom: 60px; } /* Adjust doodle sizes and positions for tablets */ .decor-doodle { width: auto; /* Let natural size dictate unless specified */ } .doodle-airplane { width: 80px; } .doodle-bear-tree { width: 150px; } .doodle-dino-rider { width: 150px; } .doodle-boat-whale { width: 140px; } .doodle-truck { width: 130px; } } @media (max-width: 768px) { .parents-resources-section h1 { font-size: 1.8rem; } .parents-resources-section .intro-paragraph { font-size: 0.9rem; } .resources-grid { gap: 25px; } .resources-grid:first-of-type { margin-bottom: 40px; } .resource-card { padding: 15px; border-width: 4px;} .resource-card h3 { font-size: 1.1rem; } /* Hide or significantly scale down doodles on mobile if they clutter */ .decor-doodle { /* display: none; */ /* Option to hide all */ max-width: 70px; /* General constraint for most doodles */ } .doodle-bear-tree, .doodle-dino-rider, .doodle-boat-whale, .doodle-truck { max-width: 100px !important; /* Large bottom ones slightly bigger */ bottom: 10px; } .doodle-family { max-width: 40px; top: 10px;} .doodle-boat-whale { left: 50%; } .doodle-sun { max-width: 60px; top: 10px;} /* Make sure very outer doodles are not causing overflow */ .doodle-airplane, .doodle-butterfly, .doodle-flower, .doodle-robot, .doodle-dino-rider { left: 1%; } .doodle-sun, .doodle-rocket, .doodle-bear-tree, .doodle-princess, .doodle-hearts, .doodle-truck { right: 1%; } }