/* SOURCE: variables.css */ /* ========================================================== CARE'S CORNER CHILDCARE DESIGN SYSTEM / GLOBAL VARIABLES ========================================================== */ :root { /* ====================================================== BRAND COLORS ====================================================== */ --color-primary: #28AFCB; --color-primary-dark: #167A98; --color-primary-light: #E9F9FC; --color-secondary: #73C66B; --color-secondary-light: #EEF9EC; --color-accent: #F4C542; --color-accent-light: #FFF8DE; --color-pink: #F3A6B8; /* ====================================================== NEUTRAL COLORS ====================================================== */ --color-white: #FFFFFF; --color-background: #F8FCFD; --color-background-soft: #F1F9FA; --color-surface: #FFFFFF; --color-text: #173B48; --color-text-soft: #607881; --color-text-light: #84979D; --color-border: #D9EBEF; --color-border-light: #EAF3F5; /* ====================================================== TYPOGRAPHY ====================================================== */ --font-heading: "Nunito", sans-serif; --font-body: "Inter", sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-md: 1.125rem; --font-size-lg: 1.375rem; --font-size-xl: 1.75rem; --font-size-2xl: 2.25rem; --font-size-3xl: 3rem; --font-size-4xl: 4rem; --line-height-tight: 1.15; --line-height-normal: 1.6; /* ====================================================== LAYOUT ====================================================== */ --container-width: 1200px; --container-padding: 24px; --section-spacing: 100px; --section-spacing-mobile: 72px; /* ====================================================== BORDER RADIUS ====================================================== */ --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-xl: 40px; --radius-pill: 999px; /* ====================================================== SHADOWS ====================================================== */ --shadow-sm: 0 8px 24px rgba(23, 59, 72, 0.08); --shadow-md: 0 18px 50px rgba(23, 59, 72, 0.12); --shadow-lg: 0 28px 80px rgba(23, 59, 72, 0.16); /* ====================================================== TRANSITIONS ====================================================== */ --transition-fast: 180ms ease; --transition-normal: 300ms ease; --transition-slow: 700ms ease; /* ====================================================== HEADER ====================================================== */ --header-height: 82px; } /* SOURCE: reset.css */ /* ========================================================== CARE'S CORNER CHILDCARE CSS RESET REMOVE DEFAULT BROWSER STYLES ========================================================== */ /* ========================================================== BOX SIZING ========================================================== */ *, *::before, *::after { box-sizing: border-box; } /* ========================================================== REMOVE DEFAULT SPACING ========================================================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } /* ========================================================== HTML AND BODY ========================================================== */ html { scroll-behavior: smooth; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { min-height: 100vh; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================================== HTML5 ELEMENTS ========================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } /* ========================================================== LISTS ========================================================== */ ol, ul { list-style: none; } /* ========================================================== LINKS ========================================================== */ a { color: inherit; text-decoration: none; } /* ========================================================== MEDIA ========================================================== */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } /* ========================================================== FORM ELEMENTS ========================================================== */ button, input, textarea, select { margin: 0; padding: 0; border: 0; border-radius: 0; color: inherit; font: inherit; background: none; } button { cursor: pointer; } textarea { resize: vertical; } input, textarea, select { width: 100%; } /* ========================================================== TABLES ========================================================== */ table { border-collapse: collapse; border-spacing: 0; } /* ========================================================== QUOTES ========================================================== */ blockquote, q { quotes: none; } blockquote::before, blockquote::after, q::before, q::after { content: ""; content: none; } /* ========================================================== REDUCED MOTION ACCESSIBILITY ========================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* SOURCE: global.css */ /* ========================================================== CARE'S CORNER CHILDCARE GLOBAL STYLES ========================================================== */ /* ========================================================== DOCUMENT ========================================================== */ html { background-color: var(--color-background); } body { overflow-x: hidden; color: var(--color-text); font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height-normal); background-color: var(--color-background); } /* ========================================================== TEXT SELECTION ========================================================== */ ::selection { color: var(--color-white); background-color: var(--color-primary); } /* ========================================================== FOCUS ACCESSIBILITY ========================================================== */ :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; } /* ========================================================== TYPOGRAPHY ========================================================== */ h1, h2, h3, h4, h5, h6 { color: var(--color-text); font-family: var(--font-heading); font-weight: 800; line-height: var(--line-height-tight); } h1 { font-size: clamp(2.5rem, 6vw, var(--font-size-4xl)); letter-spacing: -0.04em; } h2 { font-size: clamp(2rem, 4vw, var(--font-size-3xl)); letter-spacing: -0.03em; } h3 { font-size: clamp(1.4rem, 2.5vw, var(--font-size-xl)); } h4 { font-size: var(--font-size-lg); } p { color: var(--color-text-soft); } strong { color: var(--color-text); font-weight: 700; } /* ========================================================== LINKS ========================================================== */ a { transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast); } /* ========================================================== PAGE CONTAINER ========================================================== */ .container { width: min( calc(100% - (var(--container-padding) * 2)), var(--container-width) ); margin-inline: auto; } /* ========================================================== SECTIONS ========================================================== */ .section { position: relative; padding-block: var(--section-spacing); } .section--soft { background-color: var(--color-background-soft); } .section--white { background-color: var(--color-white); } .section--primary-light { background-color: var(--color-primary-light); } .section--secondary-light { background-color: var(--color-secondary-light); } .section--accent-light { background-color: var(--color-accent-light); } /* ========================================================== SECTION HEADER ========================================================== */ .section-heading { width: min(100%, 760px); margin-bottom: 48px; } .section-heading--center { margin-inline: auto; text-align: center; } .section-heading__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--color-primary-dark); font-family: var(--font-heading); font-size: var(--font-size-sm); font-weight: 800; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase; } .section-heading__eyebrow::before { width: 26px; height: 3px; border-radius: var(--radius-pill); background-color: var(--color-accent); content: ""; } .section-heading--center .section-heading__eyebrow::after { width: 26px; height: 3px; border-radius: var(--radius-pill); background-color: var(--color-accent); content: ""; } .section-heading__title { margin-bottom: 18px; } .section-heading__description { max-width: 680px; font-size: var(--font-size-md); } .section-heading--center .section-heading__description { margin-inline: auto; } /* ========================================================== BUTTONS ========================================================== */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 24px; border: 2px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-heading); font-size: var(--font-size-base); font-weight: 800; line-height: 1; text-align: center; transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .button:hover { transform: translateY(-2px); } .button:active { transform: translateY(0); } /* PRIMARY BUTTON */ .button--primary { color: var(--color-white); background-color: var(--color-primary); box-shadow: 0 12px 30px rgba(40, 175, 203, 0.28); } .button--primary:hover { background-color: var(--color-primary-dark); box-shadow: 0 16px 36px rgba(40, 175, 203, 0.35); } /* SECONDARY BUTTON */ .button--secondary { color: var(--color-text); background-color: var(--color-accent); box-shadow: 0 12px 30px rgba(244, 197, 66, 0.26); } .button--secondary:hover { box-shadow: 0 16px 36px rgba(244, 197, 66, 0.34); } /* OUTLINE BUTTON */ .button--outline { color: var(--color-primary-dark); border-color: var(--color-border); background-color: var(--color-white); } .button--outline:hover { border-color: var(--color-primary); background-color: var(--color-primary-light); } /* BUTTON GROUP */ .button-group { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } /* ========================================================== CARDS ========================================================== */ .card { border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background-color: var(--color-surface); box-shadow: var(--shadow-sm); } .card--interactive { transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal); } .card--interactive:hover { border-color: var(--color-border); box-shadow: var(--shadow-md); transform: translateY(-6px); } /* ========================================================== BADGES ========================================================== */ .badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-primary-dark); font-family: var(--font-heading); font-size: var(--font-size-sm); font-weight: 800; background-color: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ========================================================== IMAGE HELPERS ========================================================== */ .image-cover { width: 100%; height: 100%; object-fit: cover; } .image-rounded { overflow: hidden; border-radius: var(--radius-lg); } .image-shadow { box-shadow: var(--shadow-md); } /* ========================================================== GRID HELPERS ========================================================== */ .grid { display: grid; gap: 24px; } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* ========================================================== VISUALLY HIDDEN FOR ACCESSIBILITY ========================================================== */ .visually-hidden { position: absolute !important; overflow: hidden; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; border: 0 !important; white-space: nowrap; clip: rect(0, 0, 0, 0); clip-path: inset(50%); } /* ========================================================== SKIP LINK ========================================================== */ .skip-link { position: fixed; top: 12px; left: 12px; z-index: 9999; padding: 12px 18px; border-radius: var(--radius-sm); color: var(--color-white); font-family: var(--font-heading); font-weight: 800; background-color: var(--color-primary-dark); transform: translateY(-150%); transition: transform var(--transition-fast); } .skip-link:focus { transform: translateY(0); } /* ========================================================== DIVIDER ========================================================== */ .divider { width: 100%; height: 1px; border: 0; background-color: var(--color-border-light); } /* ========================================================== UTILITY CLASSES ========================================================== */ .text-center { text-align: center; } .text-primary { color: var(--color-primary); } .text-primary-dark { color: var(--color-primary-dark); } .text-accent { color: var(--color-accent); } .text-white { color: var(--color-white); } .background-white { background-color: var(--color-white); } .no-scroll { overflow: hidden; } /* SOURCE: hero.css */ /* ========================================================== CARE'S CORNER CHILDCARE HERO ========================================================== */ .hero { position: relative; min-height: 760px; display: flex; align-items: center; overflow: hidden; background: #4A2D20; } /* ========================================================== IMAGE ========================================================== */ .hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } /* ========================================================== OVERLAY ========================================================== */ .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 90deg, rgba(47, 33, 27, 0.90) 0%, rgba(47, 33, 27, 0.78) 35%, rgba(47, 33, 27, 0.38) 62%, rgba(47, 33, 27, 0.10) 100% ); } /* ========================================================== DECORATION ========================================================== */ .hero__decoration { position: absolute; z-index: 2; border-radius: 50%; pointer-events: none; } .hero__decoration--one { width: 16px; height: 16px; top: 20%; left: 5%; background: #F4CA55; } .hero__decoration--two { width: 12px; height: 12px; right: 7%; bottom: 20%; background: #96C898; } /* ========================================================== HERO CONTAINER ========================================================== */ .hero__container { position: relative; z-index: 3; width: 100%; padding-left: clamp(70px, 10vw, 170px); padding-right: 40px; } /* ========================================================== CONTENT ========================================================== */ .hero__content { max-width: 650px; padding: 90px 0; } /* ========================================================== HERO PRIMARY BUTTON OVERRIDE OLD PROJECT COLORS ========================================================== */ .hero .button--primary { min-height: 52px; padding: 0.9rem 1.45rem; border: 0; border-radius: 999px; background: #F4CA55; color: #2F211B; font-weight: 900; box-shadow: 0 10px 24px rgba(231, 185, 63, 0.24); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .hero .button--primary:hover { background: #E7B93F; color: #2F211B; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(231, 185, 63, 0.30); } /* ========================================================== EYEBROW ========================================================== */ .hero__eyebrow { display: inline-flex; margin-bottom: 20px; padding: 9px 16px; border-radius: 999px; background: rgba(150, 200, 152, 0.92); color: #2F211B; font-size: 0.76rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } /* ========================================================== TITLE ========================================================== */ .hero__title { max-width: 12ch; margin: 0 0 22px; color: #FFFFFF; font-family: "Nunito", sans-serif; font-size: clamp(3rem, 6vw, 5.6rem); font-weight: 900; line-height: 0.98; letter-spacing: -0.045em; } /* ========================================================== DESCRIPTION ========================================================== */ .hero__description { max-width: 600px; margin: 0 0 30px; color: rgba(255, 255, 255, 0.90); font-size: 1.08rem; line-height: 1.65; } /* ========================================================== BUTTONS ========================================================== */ .hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .button--hero-outline { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 1.35rem; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #FFFFFF; font-weight: 800; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .button--hero-outline:hover { background: rgba(255, 255, 255, 0.14); border-color: #FFFFFF; transform: translateY(-2px); } /* ========================================================== TRUST ========================================================== */ .hero__trust-list { display: flex; flex-wrap: wrap; gap: 10px 20px; } .hero__trust-item { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.90); font-size: 0.88rem; font-weight: 700; } .hero__trust-icon { color: #F4CA55; font-size: 1.2rem; line-height: 1; } .hero__trust-link { color: inherit; text-decoration-color: rgba(255, 255, 255, .62); text-underline-offset: 3px; } .hero__trust-link:hover, .hero__trust-link:focus-visible { color: #F4CA55; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 980px) { .hero { min-height: 680px; } .hero__overlay { background: linear-gradient( 90deg, rgba(47, 33, 27, 0.88) 0%, rgba(47, 33, 27, 0.72) 55%, rgba(47, 33, 27, 0.28) 100% ); } .hero__container { padding-left: 50px; padding-right: 40px; } .hero__content { max-width: 610px; padding: 82px 0; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 700px) { .hero { min-height: 660px; /* content starts higher */ align-items: flex-start; } .hero__container { width: 100%; padding-left: 22px; padding-right: 22px; } /* ====================================================== IMAGE ====================================================== */ .hero__image { object-position: 62% center; } /* ====================================================== OVERLAY ====================================================== */ .hero__overlay { background: linear-gradient( 180deg, rgba(47, 33, 27, 0.28) 0%, rgba(47, 33, 27, 0.55) 36%, rgba(47, 33, 27, 0.94) 100% ); } /* ====================================================== CONTENT ====================================================== */ .hero__content { width: 100%; /* Main change: previously 170px. Brings green badge much closer to header. */ padding: 38px 0 46px; } /* ====================================================== LOCATION BADGE ====================================================== */ .hero__eyebrow { margin-bottom: 16px; padding: 8px 13px; font-size: 0.68rem; } /* ====================================================== TITLE ====================================================== */ .hero__title { max-width: 11ch; margin-bottom: 20px; font-size: clamp(2.7rem, 13vw, 4.2rem); } /* ====================================================== DESCRIPTION ====================================================== */ .hero__description { margin-bottom: 26px; font-size: 1rem; line-height: 1.55; } /* ====================================================== BUTTONS ====================================================== */ .hero__buttons { flex-direction: column; align-items: stretch; gap: 11px; margin-bottom: 24px; } .hero__buttons .button, .button--hero-outline { width: 100%; } /* ====================================================== TRUST ITEMS TWO ITEMS HORIZONTAL ====================================================== */ .hero__trust-list { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 14px; width: 100%; } .hero__trust-item { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 800; white-space: nowrap; } .hero__trust-icon { flex-shrink: 0; font-size: 1rem; } } /* ========================================================== VERY SMALL MOBILE ========================================================== */ @media (max-width: 380px) { .hero__trust-list { gap: 9px; } .hero__trust-item { font-size: 0.66rem; } } /* ========================================================== END MOBILE HERO ========================================================== */ /* SOURCE: trust-strip.css */ /* ========================================================== BLOCO 03 — QUICK FIT / CARE AT A GLANCE CARE'S CORNER CHILDCARE ========================================================== */ .trust-strip { padding: 88px 0 96px; background: #FFFFFF; } .trust-strip__container { display: flex; flex-direction: column; } /* ========================================================== INTRODUCTION ========================================================== */ .trust-strip__intro { max-width: 760px; margin: 0 auto; text-align: center; } .trust-strip__eyebrow { display: inline-flex; margin-bottom: 16px; padding: 8px 14px; border-radius: 999px; background: #E6F3E7; color: #356642; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .trust-strip__title { max-width: 760px; margin: 0 auto; color: #4A2D20; font-family: "Nunito", sans-serif; font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.035em; } /* ========================================================== QUICK FIT GRID ========================================================== */ .trust-strip__items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; } /* ========================================================== ITEM ========================================================== */ .trust-strip__item { min-height: 210px; display: flex; flex-direction: column; gap: 18px; padding: 26px; border: 1px solid #D8E9DA; border-radius: 22px; background: linear-gradient( 180deg, #F4FAF4 0%, #FBFDFB 100% ); box-shadow: 0 10px 30px rgba(74, 45, 32, 0.045); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .trust-strip__item:hover { transform: translateY(-3px); border-color: #BFDCC2; box-shadow: 0 14px 34px rgba(74, 45, 32, 0.07); } /* ========================================================== ICON ========================================================== */ .trust-strip__icon { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: #96C898; color: #FFFFFF; font-size: 1.05rem; } /* ========================================================== TEXT ========================================================== */ .trust-strip__item-title { display: block; margin-bottom: 8px; color: #4A2D20; font-family: "Nunito", sans-serif; font-size: 1.08rem; font-weight: 900; line-height: 1.25; } .trust-strip__item-text { display: block; color: #725E55; font-size: 0.92rem; line-height: 1.6; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 980px) { .trust-strip { padding: 72px 0 80px; } .trust-strip__items { grid-template-columns: repeat(2, 1fr); } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 600px) { .trust-strip { padding: 58px 0 64px; } .trust-strip__intro { text-align: left; } .trust-strip__title { font-size: clamp(2rem, 10vw, 2.7rem); } .trust-strip__items { grid-template-columns: 1fr; gap: 12px; margin-top: 34px; } .trust-strip__item { min-height: auto; flex-direction: row; align-items: flex-start; padding: 20px; } .trust-strip__icon { flex: 0 0 44px; width: 44px; height: 44px; } } /* ========================================================== FIM BLOCO 03 — QUICK FIT / CARE AT A GLANCE ========================================================== */ /* SOURCE: enrollment.css */ /* ========================================================== BLOCO 04 — ENROLLMENT / AVAILABILITY CARE'S CORNER CHILDCARE ========================================================== */ .enrollment { position: relative; padding: 96px 0; overflow: hidden; background: #FFF9F2; } /* ========================================================== MAIN CARD ========================================================== */ .enrollment__card { position: relative; max-width: 1180px; margin: 0 auto; padding: 64px; overflow: hidden; border: 1px solid #E8DCD3; border-radius: 32px; background: #FFFFFF; box-shadow: 0 18px 50px rgba(74, 45, 32, 0.07); } /* DECORATIVE DETAIL */ .enrollment__card::before { content: ""; position: absolute; width: 180px; height: 180px; top: -90px; right: -70px; border-radius: 50%; background: rgba(244, 202, 85, 0.18); pointer-events: none; } .enrollment__card::after { content: ""; position: absolute; width: 140px; height: 140px; left: -70px; bottom: -80px; border-radius: 50%; background: rgba(150, 200, 152, 0.16); pointer-events: none; } /* ========================================================== INTRO ========================================================== */ .enrollment__intro { position: relative; z-index: 1; max-width: 760px; margin: 0 auto 48px; text-align: center; } .enrollment__eyebrow { display: inline-flex; margin-bottom: 16px; padding: 8px 14px; border-radius: 999px; background: #E6F3E7; color: #356642; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .enrollment__title { margin: 0; color: #4A2D20; font-family: "Nunito", sans-serif; font-size: clamp(2.3rem, 4.5vw, 3.8rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.04em; } .enrollment__description { max-width: 680px; margin: 20px auto 0; color: #725E55; font-size: 1rem; line-height: 1.7; } /* ========================================================== ENROLLMENT GRID ========================================================== */ .enrollment__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } /* ========================================================== ITEM ========================================================== */ .enrollment__item { position: relative; min-height: 220px; padding: 28px; border: 1px solid #E4EDE4; border-radius: 22px; background: linear-gradient( 180deg, #F7FBF7 0%, #FFFFFF 100% ); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .enrollment__item:hover { transform: translateY(-3px); border-color: #C8DFC9; box-shadow: 0 14px 30px rgba(74, 45, 32, 0.06); } /* ========================================================== NUMBER ========================================================== */ .enrollment__number { display: inline-flex; margin-bottom: 28px; color: #E7B93F; font-family: "Nunito", sans-serif; font-size: 0.85rem; font-weight: 900; letter-spacing: 0.08em; } /* ========================================================== ITEM TEXT ========================================================== */ .enrollment__item h3 { margin: 0 0 10px; color: #4A2D20; font-family: "Nunito", sans-serif; font-size: 1.2rem; font-weight: 900; line-height: 1.25; } .enrollment__item p { margin: 0; color: #725E55; font-size: 0.92rem; line-height: 1.65; } /* ========================================================== CTA AREA ========================================================== */ .enrollment__action { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 42px; text-align: center; } .enrollment__button { min-height: 52px; padding: 0.9rem 1.55rem; border: 0; border-radius: 999px; background: #F4CA55; color: #2F211B; font-weight: 900; box-shadow: 0 10px 24px rgba(231, 185, 63, 0.20); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .enrollment__button:hover { background: #E7B93F; color: #2F211B; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(231, 185, 63, 0.26); } .enrollment__note { max-width: 520px; color: #8A756B; font-size: 0.82rem; line-height: 1.5; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 980px) { .enrollment { padding: 78px 0; } .enrollment__card { padding: 50px 36px; } .enrollment__grid { grid-template-columns: 1fr; } .enrollment__item { min-height: auto; } .enrollment__number { margin-bottom: 18px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 600px) { .enrollment { padding: 58px 0; } .enrollment__card { padding: 38px 20px; border-radius: 24px; } .enrollment__intro { margin-bottom: 32px; text-align: left; } .enrollment__title { font-size: clamp(2rem, 10vw, 2.8rem); } .enrollment__description { margin-top: 16px; } .enrollment__grid { gap: 12px; } .enrollment__item { padding: 22px; border-radius: 18px; } .enrollment__action { align-items: stretch; margin-top: 30px; } .enrollment__button { width: 100%; } .enrollment__note { margin: 0 auto; } } /* ========================================================== FIM BLOCO 04 — ENROLLMENT / AVAILABILITY ========================================================== */ /* SOURCE: service-area.css */ /* ========================================================== SERVICE AREA / NEARBY COMMUNITIES CARE'S CORNER CHILDCARE ========================================================== */ .service-area { position: relative; padding: 0 0 96px; overflow: hidden; background: #FFF9F2; } .service-area__card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 56px; padding: 56px; border: 1px solid #E8DCD3; border-radius: 32px; background: linear-gradient(135deg, #FFFFFF 0%, #FFFCF7 100%); box-shadow: 0 18px 50px rgba(74, 45, 32, 0.07); } .service-area__content { max-width: 650px; } .service-area__eyebrow { display: inline-flex; margin-bottom: 16px; padding: 8px 14px; border-radius: 999px; background: #E6F3E7; color: #356642; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .service-area__title { margin: 0; color: #4A2D20; font-family: "Nunito", sans-serif; font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 900; line-height: 1.06; letter-spacing: -0.04em; } .service-area__description { max-width: 620px; margin: 20px 0 0; color: #725E55; font-size: 1rem; line-height: 1.75; } .service-area__communities { position: relative; padding: 30px; border: 1px solid #DCE9DD; border-radius: 24px; background: #F4FAF4; } .service-area__communities::before { content: ""; position: absolute; width: 72px; height: 6px; top: 0; left: 30px; border-radius: 0 0 999px 999px; background: #F4CA55; } .service-area__list-title { margin: 0 0 20px; color: #4A2D20; font-family: "Nunito", sans-serif; font-size: 1.15rem; font-weight: 900; line-height: 1.3; } .service-area__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .service-area__city { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 50px; padding: 12px 14px; border: 1px solid #E4EDE4; border-radius: 16px; background: #FFFFFF; color: #4A2D20; font-size: 0.92rem; font-weight: 800; line-height: 1.3; box-shadow: 0 8px 22px rgba(74, 45, 32, 0.035); } .service-area__city::before { content: ""; flex: 0 0 10px; width: 10px; height: 10px; border: 3px solid #DDEFE0; border-radius: 50%; background: #568A62; } .service-area__city a { color: inherit; text-decoration-color: rgba(74, 45, 32, .36); text-underline-offset: 3px; } .service-area__city a:hover, .service-area__city a:focus-visible { color: #167A98; } @media (max-width: 980px) { .service-area { padding-bottom: 78px; } .service-area__card { grid-template-columns: 1fr; gap: 38px; padding: 48px 36px; } .service-area__content { max-width: 760px; } } @media (max-width: 600px) { .service-area { padding-bottom: 58px; } .service-area__card { gap: 30px; padding: 38px 20px; border-radius: 24px; } .service-area__title { font-size: clamp(2rem, 10vw, 2.8rem); } .service-area__description { margin-top: 16px; } .service-area__communities { padding: 26px 18px 18px; border-radius: 20px; } .service-area__communities::before { left: 18px; } .service-area__list { grid-template-columns: 1fr; gap: 10px; } .service-area__city { min-height: 48px; padding: 11px 13px; border-radius: 14px; } } /* SOURCE: visual-story.css */ /* ========================================================== BLOCO 05 — REAL MOMENTS / VISUAL STORY CARE'S CORNER CHILDCARE ========================================================== */ .visual-story { position: relative; padding: 96px 0; overflow: hidden; background: #F4FAF4; } /* ========================================================== MAIN LAYOUT ========================================================== */ .visual-story__container { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 72px; } /* ========================================================== MEDIA ========================================================== */ .visual-story__media { position: relative; min-height: 560px; overflow: hidden; border-radius: 30px; background: #E7EFE7; box-shadow: 0 18px 50px rgba(74, 45, 32, 0.10); } /* ========================================================== IMAGE ========================================================== */ .visual-story__image { width: 100%; height: 100%; position: absolute; inset: 0; display: block; object-fit: cover; object-position: center; transition: transform 0.45s ease; } .visual-story__media:hover .visual-story__image { transform: scale(1.025); } /* ========================================================== PHOTO LABEL ========================================================== */ .visual-story__photo-label { position: absolute; left: 24px; bottom: 24px; z-index: 2; display: inline-flex; max-width: calc(100% - 48px); padding: 10px 16px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: rgba(47, 33, 27, 0.72); color: #FFFFFF; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ========================================================== CONTENT ========================================================== */ .visual-story__content { max-width: 620px; } /* ========================================================== EYEBROW ========================================================== */ .visual-story__eyebrow { display: inline-flex; margin-bottom: 18px; padding: 8px 14px; border-radius: 999px; background: #DDEFE0; color: #356642; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } /* ========================================================== TITLE ========================================================== */ .visual-story__title { margin: 0; color: #4A2D20; font-family: "Nunito", sans-serif; font-size: clamp(2.4rem, 4.8vw, 4.1rem); font-weight: 900; line-height: 1.03; letter-spacing: -0.045em; } /* ========================================================== DESCRIPTION ========================================================== */ .visual-story__description { max-width: 590px; margin: 22px 0 0; color: #725E55; font-size: 1rem; line-height: 1.75; } /* ========================================================== POINTS ========================================================== */ .visual-story__points { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 30px; } /* ========================================================== POINT ========================================================== */ .visual-story__point { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 12px 16px; border: 1px solid #DCE9DD; border-radius: 16px; background: rgba(255, 255, 255, 0.78); color: #4A2D20; font-size: 0.94rem; font-weight: 800; box-shadow: 0 8px 22px rgba(74, 45, 32, 0.035); transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .visual-story__point:hover { transform: translateX(3px); border-color: #C6DEC9; background: #FFFFFF; } /* ========================================================== POINT ICON ========================================================== */ .visual-story__point-icon { flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: #96C898; color: #FFFFFF; font-size: 0.95rem; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 980px) { .visual-story { padding: 78px 0; } .visual-story__container { grid-template-columns: 1fr; gap: 42px; } .visual-story__media { min-height: 500px; } .visual-story__content { max-width: 760px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 600px) { .visual-story { padding: 54px 0; } .visual-story__container { display: flex; flex-direction: column; gap: 24px; } /* ====================================================== CONTENT FIRST ====================================================== */ .visual-story__content { display: contents; } .visual-story__eyebrow { order: 1; align-self: flex-start; margin-bottom: 0; } .visual-story__title { order: 2; margin: 0; font-size: clamp(2.1rem, 11vw, 3rem); } /* ====================================================== IMAGE AFTER H1 ====================================================== */ .visual-story__media { order: 3; width: 100%; min-height: 360px; margin-top: 4px; border-radius: 22px; } .visual-story__image { object-position: center; } .visual-story__photo-label { left: 16px; bottom: 16px; max-width: calc(100% - 32px); padding: 8px 12px; font-size: 0.72rem; } /* ====================================================== DESCRIPTION AFTER IMAGE ====================================================== */ .visual-story__description { order: 4; margin: 0; font-size: 0.96rem; line-height: 1.65; } /* ====================================================== POINTS LAST ====================================================== */ .visual-story__points { order: 5; margin-top: 0; gap: 10px; } .visual-story__point { min-height: 54px; padding: 10px 12px; } .visual-story__point-icon { flex-basis: 40px; width: 40px; height: 40px; } } /* SOURCE: educator.css */ /* ========================================================== BLOCO 07 — MEET CAROLINE / PROVIDER CARE'S CORNER CHILDCARE ========================================================== */ .educator { position: relative; padding: 96px 0; overflow: hidden; background: #FFF9F2; } /* ========================================================== MAIN LAYOUT ========================================================== */ .educator__container { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 72px; } /* ========================================================== CONTENT ========================================================== */ .educator__content { max-width: 620px; } /* ========================================================== EYEBROW ========================================================== */ .educator__eyebrow { display: inline-flex; margin-bottom: 18px; padding: 8px 14px; border-radius: 999px; background: #E6F3E7; color: #356642; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } /* ========================================================== TITLE ========================================================== */ .educator__title { margin: 0; color: #4A2D20; font-family: "Nunito", sans-serif; font-size: clamp(2.5rem, 5vw, 4.2rem); font-weight: 900; line-height: 1.03; letter-spacing: -0.045em; } /* ========================================================== DESCRIPTION ========================================================== */ .educator__description { max-width: 590px; margin: 22px 0 0; color: #725E55; font-size: 1rem; line-height: 1.75; } /* ========================================================== DETAILS ========================================================== */ .educator__details { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 30px; } /* ========================================================== DETAIL ITEM ========================================================== */ .educator__detail { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid #E3E9E2; border-radius: 18px; background: #FFFFFF; box-shadow: 0 8px 22px rgba(74, 45, 32, 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .educator__detail:hover { transform: translateX(3px); border-color: #CADFCD; box-shadow: 0 12px 28px rgba(74, 45, 32, 0.06); } /* ========================================================== DETAIL ICON ========================================================== */ .educator__detail-icon { flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; background: #96C898; color: #FFFFFF; font-size: 0.98rem; } /* ========================================================== DETAIL TEXT ========================================================== */ .educator__detail strong { display: block; margin-bottom: 5px; color: #4A2D20; font-family: "Nunito", sans-serif; font-size: 1rem; font-weight: 900; line-height: 1.3; } .educator__detail span:not(.educator__detail-icon) { display: block; color: #725E55; font-size: 0.9rem; line-height: 1.55; } /* ========================================================== NOTE ========================================================== */ .educator__note { margin: 24px 0 0; padding-left: 16px; border-left: 3px solid #F4CA55; color: #725E55; font-size: 0.9rem; line-height: 1.65; } /* ========================================================== MEDIA ========================================================== */ .educator__media { position: relative; min-height: 590px; overflow: hidden; border-radius: 30px; background: #EDE4DE; box-shadow: 0 18px 50px rgba(74, 45, 32, 0.10); } /* ========================================================== IMAGE ========================================================== */ .educator__image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform 0.45s ease; } .educator__media:hover .educator__image { transform: scale(1.025); } /* ========================================================== IMAGE CARD ========================================================== */ .educator__image-card { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 18px; background: rgba(47, 33, 27, 0.76); color: #FFFFFF; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .educator__image-card > span:first-child { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #F4CA55; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 980px) { .educator { padding: 78px 0; } .educator__container { grid-template-columns: 1fr; gap: 42px; } .educator__content { max-width: 760px; } .educator__media { min-height: 520px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 600px) { .educator { padding: 54px 0; } /* ====================================================== MOBILE LAYOUT / ORDER ====================================================== */ .educator__container { display: flex; flex-direction: column; gap: 24px; } /* Allows the elements inside content to participate directly in the flex ordering. */ .educator__content { display: contents; } /* ====================================================== EYEBROW ====================================================== */ .educator__eyebrow { order: 1; align-self: flex-start; margin-bottom: 0; } /* ====================================================== TITLE ====================================================== */ .educator__title { order: 2; margin: 0; font-size: clamp(2.1rem, 11vw, 3rem); } /* ====================================================== IMAGE AFTER H1 ====================================================== */ .educator__media { order: 3; width: 100%; min-height: 420px; margin-top: 4px; border-radius: 22px; } .educator__image { object-position: center; } /* ====================================================== DESCRIPTION AFTER IMAGE ====================================================== */ .educator__description { order: 4; margin: 0; font-size: 0.96rem; line-height: 1.65; } /* ====================================================== DETAILS ====================================================== */ .educator__details { order: 5; margin-top: 0; gap: 10px; } .educator__detail { padding: 14px; border-radius: 16px; } .educator__detail-icon { flex-basis: 40px; width: 40px; height: 40px; } /* ====================================================== NOTE LAST ====================================================== */ .educator__note { order: 6; margin: 0; padding-left: 14px; } } /* ========================================================== FIM MOBILE ========================================================== */ /* SOURCE: daily-routine.css */ /* ========================================================== BLOCO 06 — A DAY AT CARE'S CORNER CARE'S CORNER CHILDCARE ========================================================== */ .daily-routine { position: relative; padding: 96px 0; overflow: hidden; background: #FFFFFF; } /* ========================================================== CONTAINER ========================================================== */ .daily-routine__container { position: relative; } /* ========================================================== INTRO ========================================================== */ .daily-routine__intro { max-width: 780px; margin: 0 auto 52px; text-align: center; } .daily-routine__eyebrow { display: inline-flex; margin-bottom: 16px; padding: 8px 14px; border-radius: 999px; background: #FFF2C8; color: #8B6B13; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .daily-routine__title { margin: 0; color: #4A2D20; font-family: "Nunito", sans-serif; font-size: clamp(2.4rem, 4.8vw, 4rem); font-weight: 900; line-height: 1.04; letter-spacing: -0.045em; } .daily-routine__description { max-width: 690px; margin: 20px auto 0; color: #725E55; font-size: 1rem; line-height: 1.7; } /* ========================================================== ROUTINE GRID ========================================================== */ .daily-routine__grid { position: relative; max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 22px; } /* ========================================================== ITEM ========================================================== */ .daily-routine__item { display: flex; align-items: flex-start; gap: 16px; min-height: 170px; padding: 24px; border: 1px solid #E8E1DC; border-radius: 22px; background: #FFFDFC; box-shadow: 0 10px 26px rgba(74, 45, 32, 0.045); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .daily-routine__item:hover { transform: translateY(-3px); border-color: #D9CFC7; box-shadow: 0 14px 32px rgba(74, 45, 32, 0.07); } /* ========================================================== ICON ========================================================== */ .daily-routine__icon { flex: 0 0 48px; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 15px; background: #E8F3E9; color: #4E8B5C; font-size: 1.02rem; } /* ========================================================== ITEM TEXT ========================================================== */ .daily-routine__item h3 { margin: 0 0 8px; color: #4A2D20; font-family: "Nunito", sans-serif; font-size: 1.15rem; font-weight: 900; line-height: 1.25; } .daily-routine__item p { margin: 0; color: #725E55; font-size: 0.92rem; line-height: 1.62; } /* ========================================================== MEALS ITEM ========================================================== */ .daily-routine__item--meal { position: relative; grid-column: 1 / -1; min-height: 150px; border-color: #F1D984; background: linear-gradient( 135deg, #FFF8DC 0%, #FFFDF6 100% ); } .daily-routine__item--meal .daily-routine__icon { background: #F4CA55; color: #4A2D20; } /* ========================================================== MEALS BADGE ========================================================== */ .daily-routine__badge { display: inline-flex; margin-bottom: 8px; padding: 5px 9px; border-radius: 999px; background: #4A2D20; color: #FFFFFF; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } /* ========================================================== FOOTER NOTE ========================================================== */ .daily-routine__note { max-width: 700px; margin: 30px auto 0; color: #927E74; font-size: 0.8rem; line-height: 1.55; text-align: center; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 900px) { .daily-routine { padding: 78px 0; } .daily-routine__grid { grid-template-columns: 1fr; } .daily-routine__item--meal { grid-column: auto; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 600px) { .daily-routine { padding: 58px 0; } .daily-routine__intro { margin-bottom: 34px; text-align: left; } .daily-routine__title { font-size: clamp(2.1rem, 11vw, 3rem); } .daily-routine__description { margin-top: 16px; } .daily-routine__grid { gap: 12px; } .daily-routine__item { min-height: auto; padding: 20px; border-radius: 18px; } .daily-routine__icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 13px; } .daily-routine__note { text-align: left; } } /* ========================================================== FIM BLOCO 06 — A DAY AT CARE'S CORNER ========================================================== */ /* SOURCE: reviews.css */ /* ========================================================== BLOCO 08 — GOOGLE REVIEWS / SOCIAL PROOF CARE'S CORNER CHILDCARE ========================================================== */ .reviews { position: relative; padding: 96px 0; overflow: hidden; background: #FFFFFF; } /* ========================================================== CONTAINER ========================================================== */ .reviews__container { position: relative; } /* ========================================================== HEADER ========================================================== */ .reviews__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 44px; } .reviews__intro { max-width: 720px; } .reviews__eyebrow { display: inline-flex; margin-bottom: 16px; padding: 8px 14px; border-radius: 999px; background: #EEF4FF; color: #4285F4; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .reviews__title { margin: 0; color: #4A2D20; font-family: "Nunito", sans-serif; font-size: clamp(2.4rem, 4.8vw, 4rem); font-weight: 900; line-height: 1.04; letter-spacing: -0.045em; } /* ========================================================== GOOGLE RATING SUMMARY ========================================================== */ .reviews__rating { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .reviews__google-mark { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #E5E7EB; border-radius: 50%; background: #FFFFFF; color: #4285F4; font-size: 1.2rem; font-weight: 900; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); } .reviews__stars { color: #FBBC05; font-size: 1rem; letter-spacing: 0.06em; } .reviews__rating strong { display: block; margin-top: 3px; color: #4A2D20; font-size: 0.94rem; } .reviews__rating span { display: block; margin-top: 2px; color: #725E55; font-size: 0.78rem; } /* ========================================================== SLIDER WRAPPER ========================================================== */ .reviews-slider { position: relative; width: 100%; padding: 0 28px; } /* ========================================================== VIEWPORT ========================================================== */ .reviews-slider__viewport { width: 100%; overflow: hidden; } /* ========================================================== TRACK ========================================================== */ .reviews-slider__track { display: flex; align-items: stretch; gap: 18px; transition: transform 0.35s ease; will-change: transform; } /* ========================================================== REVIEW CARD ========================================================== */ .review-card { position: relative; flex: 0 0 calc((100% - 36px) / 3); min-width: 0; min-height: 340px; display: flex; flex-direction: column; padding: 28px; overflow: hidden; border: 1px solid #E7E7E7; border-radius: 24px; background: #FFFFFF; box-shadow: 0 12px 32px rgba(74, 45, 32, 0.05); } /* ========================================================== GOOGLE COLOR LINE ========================================================== */ .review-card__google-line { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient( 90deg, #4285F4 0%, #4285F4 25%, #EA4335 25%, #EA4335 50%, #FBBC05 50%, #FBBC05 75%, #34A853 75%, #34A853 100% ); } /* ========================================================== STARS ========================================================== */ .review-card__stars { margin-top: 6px; margin-bottom: 22px; color: #FBBC05; font-size: 1rem; letter-spacing: 0.06em; } /* ========================================================== REVIEW TEXT ========================================================== */ .review-card__text { margin: 0; color: #4A2D20; font-size: 0.98rem; font-weight: 700; line-height: 1.65; } /* ========================================================== REVIEW FOOTER ========================================================== */ .review-card__footer { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 28px; } /* ========================================================== REVIEW AVATAR ========================================================== */ .review-card__avatar { flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #F1F5FF; color: #4285F4; font-size: 0.88rem; font-weight: 900; } /* ========================================================== REVIEW AUTHOR ========================================================== */ .review-card__footer strong { display: block; color: #4A2D20; font-size: 0.9rem; font-weight: 900; } .review-card__footer span { display: block; margin-top: 2px; color: #725E55; font-size: 0.76rem; } /* ========================================================== SLIDER ARROWS ========================================================== */ .reviews-slider__arrow { position: absolute; top: 50%; z-index: 5; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #E5E7EB; border-radius: 50%; background: #FFFFFF; color: #4285F4; font-size: 1rem; cursor: pointer; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08); transform: translateY(-50%); transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; } .reviews-slider__arrow:hover:not(:disabled) { transform: translateY(-50%) scale(1.06); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); } .reviews-slider__arrow--prev { left: 0; } .reviews-slider__arrow--next { right: 0; } .reviews-slider__arrow:disabled { opacity: 0.28; cursor: default; } /* ========================================================== GOOGLE CTA ========================================================== */ .reviews__action { display: flex; justify-content: center; margin-top: 36px; } .reviews__google-button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0.8rem 1.35rem; border: 1px solid #E5E7EB; border-radius: 999px; background: #FFFFFF; color: #4A2D20; font-weight: 900; text-decoration: none; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .reviews__google-button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07); } .reviews__google-button-icon { color: #4285F4; font-size: 1.05rem; font-weight: 900; } /* ========================================================== TABLET 2 REVIEWS PER VIEW ========================================================== */ @media (max-width: 980px) { .reviews { padding: 78px 0; } .reviews__header { flex-direction: column; align-items: flex-start; } .review-card { flex-basis: calc((100% - 18px) / 2); } } /* ========================================================== MOBILE 1 REVIEW PER VIEW ========================================================== */ @media (max-width: 600px) { .reviews { padding: 58px 0; } .reviews__header { gap: 24px; margin-bottom: 30px; } .reviews__title { font-size: clamp(2.1rem, 11vw, 3rem); } .reviews-slider { padding: 0 20px; } .review-card { flex-basis: 100%; min-height: 360px; padding: 24px; border-radius: 20px; } .reviews-slider__arrow { width: 40px; height: 40px; } .reviews-slider__arrow--prev { left: 0; } .reviews-slider__arrow--next { right: 0; } } /* ========================================================== FIM BLOCO 08 — GOOGLE REVIEWS / SOCIAL PROOF ========================================================== */ /* SOURCE: final-cta.css */ /* ========================================================== BLOCO 09 — FINAL CTA / CARE REQUEST CARE'S CORNER CHILDCARE ========================================================== */ .final-cta { position: relative; padding: 104px 0; overflow: hidden; background: #4A2D20; } /* ========================================================== DECORATION ========================================================== */ .final-cta::before { content: ""; position: absolute; width: 340px; height: 340px; top: -170px; right: -120px; border-radius: 50%; background: rgba(244, 202, 85, 0.09); pointer-events: none; } .final-cta::after { content: ""; position: absolute; width: 280px; height: 280px; left: -130px; bottom: -150px; border-radius: 50%; background: rgba(150, 200, 152, 0.08); pointer-events: none; } /* ========================================================== LAYOUT ========================================================== */ .final-cta__container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); align-items: center; gap: 72px; } /* ========================================================== CONTENT ========================================================== */ .final-cta__content { max-width: 720px; } /* ========================================================== EYEBROW ========================================================== */ .final-cta__eyebrow { display: inline-flex; margin-bottom: 18px; padding: 8px 14px; border-radius: 999px; background: #96C898; color: #2F211B; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } /* ========================================================== TITLE ========================================================== */ .final-cta__title { margin: 0; color: #FFFFFF; font-family: "Nunito", sans-serif; font-size: clamp(2.7rem, 5.6vw, 4.8rem); font-weight: 900; line-height: 1.01; letter-spacing: -0.045em; } /* ========================================================== DESCRIPTION ========================================================== */ .final-cta__description { max-width: 660px; margin: 24px 0 0; color: rgba(255, 255, 255, 0.78); font-size: 1rem; line-height: 1.75; } /* ========================================================== STEPS ========================================================== */ .final-cta__steps { display: grid; gap: 14px; margin-top: 34px; } /* ========================================================== STEP ========================================================== */ .final-cta__step { display: flex; align-items: flex-start; gap: 16px; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 18px; background: rgba(255, 255, 255, 0.055); } /* ========================================================== STEP NUMBER ========================================================== */ .final-cta__step-number { flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; background: #F4CA55; color: #2F211B; font-family: "Nunito", sans-serif; font-size: 0.78rem; font-weight: 900; } /* ========================================================== STEP TEXT ========================================================== */ .final-cta__step h3 { margin: 0 0 5px; color: #FFFFFF; font-family: "Nunito", sans-serif; font-size: 1rem; font-weight: 900; } .final-cta__step p { margin: 0; color: rgba(255, 255, 255, 0.68); font-size: 0.88rem; line-height: 1.55; } /* ========================================================== TRUST ========================================================== */ .final-cta__trust { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 26px; } .final-cta__trust-item { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.82); font-size: 0.82rem; font-weight: 700; } .final-cta__trust-item i { color: #F4CA55; } /* ========================================================== ACTION ========================================================== */ .final-cta__action { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 30px; } /* ========================================================== MAIN BUTTON ========================================================== */ .final-cta__button { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; padding: 0.95rem 1.7rem; border-radius: 999px; background: #F4CA55; color: #2F211B; font-weight: 900; text-decoration: none; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .final-cta__button:hover { background: #E7B93F; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.20); } /* ========================================================== RETURN NOTE ========================================================== */ .final-cta__return-note { color: rgba(255, 255, 255, 0.58); font-size: 0.78rem; line-height: 1.5; } /* ========================================================== SIDE ========================================================== */ .final-cta__side { display: flex; justify-content: flex-end; } /* ========================================================== SIDE CARD ========================================================== */ .final-cta__side-card { width: 100%; max-width: 420px; padding: 34px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 28px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.055) 100% ); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ========================================================== SIDE ICON ========================================================== */ .final-cta__side-icon { width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 28px; border-radius: 18px; background: #96C898; color: #2F211B; font-size: 1.15rem; } /* ========================================================== SIDE TEXT ========================================================== */ .final-cta__side-eyebrow { display: block; margin-bottom: 10px; color: #F4CA55; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.10em; text-transform: uppercase; } .final-cta__side-card h3 { margin: 0; color: #FFFFFF; font-family: "Nunito", sans-serif; font-size: clamp(1.7rem, 3vw, 2.25rem); font-weight: 900; line-height: 1.1; } .final-cta__side-card p { margin: 18px 0 0; color: rgba(255, 255, 255, 0.70); font-size: 0.92rem; line-height: 1.65; } /* ========================================================== SIDE POINTS ========================================================== */ .final-cta__side-points { display: grid; gap: 10px; margin-top: 26px; } .final-cta__side-points span { position: relative; display: block; padding-left: 24px; color: rgba(255, 255, 255, 0.85); font-size: 0.86rem; font-weight: 700; } .final-cta__side-points span::before { content: "✓"; position: absolute; left: 0; top: 0; color: #96C898; font-weight: 900; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 980px) { .final-cta { padding: 82px 0; } .final-cta__container { grid-template-columns: 1fr; gap: 44px; } .final-cta__content { max-width: 760px; } .final-cta__side { justify-content: flex-start; } .final-cta__side-card { max-width: 620px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 600px) { .final-cta { padding: 58px 0; } /* ====================================================== MOBILE STRUCTURE ====================================================== */ .final-cta__container { display: flex; flex-direction: column; gap: 24px; } /* Important: both wrappers disappear only from the layout tree, allowing their children to be reordered. */ .final-cta__content, .final-cta__side { display: contents; } /* ====================================================== 01 — EYEBROW ====================================================== */ .final-cta__eyebrow { order: 1; align-self: flex-start; margin: 0; } /* ====================================================== 02 — TITLE ====================================================== */ .final-cta__title { order: 2; margin: 0; font-size: clamp(2.3rem, 12vw, 3.3rem); } /* ====================================================== 03 — SIDE CARD DIRECTLY AFTER TITLE ====================================================== */ .final-cta__side-card { order: 3; width: 100%; max-width: none; margin: 2px 0 0; padding: 26px; border-radius: 22px; } .final-cta__side-icon { width: 52px; height: 52px; margin-bottom: 22px; border-radius: 16px; } .final-cta__side-card h3 { font-size: clamp(1.65rem, 8vw, 2rem); } .final-cta__side-card p { margin-top: 16px; } .final-cta__side-points { margin-top: 22px; } /* ====================================================== 04 — DESCRIPTION ====================================================== */ .final-cta__description { order: 4; margin: 0; font-size: 0.96rem; line-height: 1.65; } /* ====================================================== 05 — STEPS ====================================================== */ .final-cta__steps { order: 5; gap: 12px; margin: 0; } .final-cta__step { padding: 15px; border-radius: 16px; } .final-cta__step-number { flex-basis: 40px; width: 40px; height: 40px; } /* ====================================================== 06 — TRUST ====================================================== */ .final-cta__trust { order: 6; flex-direction: column; gap: 9px; margin: 0; } /* ====================================================== 07 — ACTION ====================================================== */ .final-cta__action { order: 7; width: 100%; align-items: stretch; margin: 0; } .final-cta__button { width: 100%; } /* ====================================================== 08 — RETURN NOTE ====================================================== */ .final-cta__return-note { margin: 0; text-align: center; } } /* ========================================================== FIM BLOCO 09 — FINAL CTA / CARE REQUEST ========================================================== */ /* SOURCE: floating-booking.css */ /* Booking-first floating contact component */ .floating-booking { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 1200; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .floating-booking__menu { display: grid; gap: 8px; min-width: min(250px, calc(100vw - 36px)); padding: 10px; border: 1px solid rgba(40, 175, 203, 0.18); border-radius: 20px; background: rgba(255, 255, 255, 0.98); box-shadow: 0 20px 55px rgba(23, 59, 72, 0.2); opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.98); transform-origin: bottom right; pointer-events: none; transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease; } .floating-booking.is-open .floating-booking__menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .floating-booking__option { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 11px 14px; border-radius: 14px; color: var(--color-text); background: var(--color-background-soft); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 800; text-decoration: none; transition: transform 180ms ease, background-color 180ms ease; } .floating-booking__option--schedule { color: #ffffff; background: var(--color-primary-dark); } .floating-booking__option:hover { transform: translateX(-3px); } .floating-booking__option:focus-visible, .floating-booking__toggle:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; } .floating-booking__option i { width: 20px; color: var(--color-primary-dark); text-align: center; } .floating-booking__option--schedule i { color: #ffffff; } .floating-booking__toggle { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; color: #ffffff; background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); box-shadow: 0 12px 28px rgba(22, 122, 152, 0.3); font-size: 1.08rem; line-height: 1; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; } .floating-booking__toggle:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(22, 122, 152, 0.38); } @media (max-width: 480px) { .floating-booking { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); } .floating-booking__toggle { width: 48px; height: 48px; font-size: 0.96rem; } } @media (prefers-reduced-motion: reduce) { .floating-booking__menu, .floating-booking__option, .floating-booking__toggle { transition: none; } } /* Direct Family Care Request action */ .floating-care-request { position: fixed; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); z-index: 900; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border: 2px solid #fff9f2; border-radius: 50%; color: #ffffff; background: #568a62; box-shadow: 0 14px 32px rgba(74, 45, 32, 0.28); font-size: 1.35rem; line-height: 1; text-decoration: none; transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease; } .floating-care-request:hover { color: #ffffff; background: #3f704c; transform: translateY(-3px); box-shadow: 0 18px 38px rgba(74, 45, 32, 0.34); } .floating-care-request:focus-visible { outline: 3px solid #f4ca55; outline-offset: 4px; } @media (max-width: 600px) { .floating-care-request { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 52px; height: 52px; font-size: 1.15rem; } } @media (prefers-reduced-motion: reduce) { .floating-care-request { transition: none; } } /* SOURCE: footer.css */ /* ========================================================== BLOCO 10 — FOOTER CARE'S CORNER CHILDCARE ========================================================== */ .site-footer { padding: 76px 0 26px; background: #251711; color: #FFFFFF; } /* ========================================================== GRID ========================================================== */ .site-footer__grid { display: grid; grid-template-columns: 1.25fr 1fr 0.9fr 1.1fr; gap: 52px; padding-bottom: 54px; } /* ========================================================== BRAND ========================================================== */ .site-footer__brand { max-width: 320px; } .site-footer__logo { display: inline-flex; margin-bottom: 14px; text-decoration: none; } .site-footer__logo img { width: 78px; height: auto; object-fit: contain; } .site-footer__business-name { display: block; color: #FFFFFF; font-family: "Nunito", sans-serif; font-size: 1.35rem; font-weight: 900; } .site-footer__business-type { display: block; margin-top: 2px; color: #F4CA55; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .site-footer__description { margin: 16px 0 0; color: rgba(255, 255, 255, 0.64); font-size: 0.88rem; line-height: 1.65; } /* ========================================================== COLUMNS ========================================================== */ .site-footer__column h3 { margin: 0 0 18px; color: #FFFFFF; font-family: "Nunito", sans-serif; font-size: 1rem; font-weight: 900; } /* ========================================================== CONTACT ========================================================== */ .site-footer__contact-link { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; color: rgba(255, 255, 255, 0.68); font-size: 0.84rem; line-height: 1.5; text-decoration: none; transition: color 0.2s ease; } a.site-footer__contact-link:hover { color: #F4CA55; } .site-footer__contact-link i { width: 16px; margin-top: 3px; color: #96C898; text-align: center; } /* ========================================================== CARE LIST ========================================================== */ .site-footer__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .site-footer__list li { position: relative; padding-left: 18px; color: rgba(255, 255, 255, 0.68); font-size: 0.84rem; line-height: 1.5; } .site-footer__list li::before { content: "•"; position: absolute; left: 0; color: #F4CA55; font-weight: 900; } .site-footer__list a { color: inherit; text-decoration-color: rgba(244, 202, 85, 0.58); text-underline-offset: 3px; } .site-footer__list a:hover { color: #FFFFFF; } /* ========================================================== NEXT STEP ========================================================== */ .site-footer__next-step p { max-width: 270px; margin: 0 0 18px; color: rgba(255, 255, 255, 0.68); font-size: 0.84rem; line-height: 1.6; } .site-footer__cta { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.15rem; border-radius: 999px; background: #F4CA55; color: #2F211B; font-size: 0.82rem; font-weight: 900; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; } .site-footer__cta:hover { background: #E7B93F; transform: translateY(-2px); } /* ========================================================== BOTTOM ========================================================== */ .site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.10); } /* ========================================================== COPYRIGHT ========================================================== */ .site-footer__copyright { display: flex; flex-wrap: wrap; gap: 4px; color: rgba(255, 255, 255, 0.46); font-size: 0.74rem; } /* ========================================================== LEGAL ========================================================== */ .site-footer__legal { display: flex; align-items: center; gap: 18px; } .site-footer__legal a { color: rgba(255, 255, 255, 0.54); font-size: 0.74rem; text-decoration: none; transition: color 0.2s ease; } .site-footer__legal a:hover { color: #FFFFFF; } /* ========================================================== MATEGROWTH CREDIT ========================================================== */ .site-footer__credit { display: flex; align-items: center; gap: 5px; color: rgba(255, 255, 255, 0.42); font-size: 0.72rem; text-decoration: none; transition: color 0.2s ease; } .site-footer__credit strong { color: #96C898; font-weight: 900; } .site-footer__credit:hover { color: #FFFFFF; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 980px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 42px; } .site-footer__bottom { align-items: flex-start; flex-direction: column; gap: 14px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 600px) { .site-footer { padding: 58px 0 24px; } .site-footer__grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; } .site-footer__brand { max-width: 100%; } .site-footer__next-step p { max-width: 100%; } .site-footer__cta { width: 100%; } .site-footer__legal { flex-wrap: wrap; } .site-footer__credit { align-items: flex-start; flex-direction: column; gap: 2px; } } /* ========================================================== FIM BLOCO 10 — FOOTER ========================================================== */ /* SOURCE: legal.css */ /* ========================================================== LEGAL PAGES ========================================================== */ .legal-page{ background:#F8FAFC; padding:80px 0; } .legal-page .container{ max-width:900px; } /* ========================================================== BADGE ========================================================== */ .section-badge{ display:inline-block; background:#EAF4FF; color:#1D3557; font-size:.85rem; font-weight:600; padding:8px 18px; border-radius:999px; margin-bottom:24px; } /* ========================================================== TITLE ========================================================== */ .legal-page h1{ font-size:2.8rem; font-weight:700; color:#1D3557; margin-bottom:12px; line-height:1.2; } .legal-updated{ color:#64748B; font-size:.95rem; margin-bottom:45px; } /* ========================================================== CONTENT CARD ========================================================== */ .legal-content{ background:#fff; padding:50px; border-radius:20px; box-shadow:0 10px 35px rgba(0,0,0,.06); } /* ========================================================== HEADINGS ========================================================== */ .legal-content h2{ font-size:1.35rem; color:#1D3557; margin-top:45px; margin-bottom:18px; } .legal-content h2:first-child{ margin-top:0; } /* ========================================================== TEXT ========================================================== */ .legal-content p{ color:#475569; line-height:1.9; margin-bottom:20px; } /* ========================================================== LIST ========================================================== */ .legal-content ul{ margin-top:25px; padding-left:22px; } .legal-content li{ color:#475569; margin-bottom:14px; line-height:1.8; } .legal-content strong{ color:#1D3557; } /* ========================================================== LINKS ========================================================== */ .legal-content a{ color:#2563EB; text-decoration:none; transition:.25s; } .legal-content a:hover{ text-decoration:underline; } /* ========================================================== MOBILE ========================================================== */ @media(max-width:768px){ .legal-page{ padding:60px 0; } .legal-page h1{ font-size:2rem; } .legal-content{ padding:30px 24px; border-radius:16px; } } /* SOURCE: fall-v2.css */ /* ========================================================== CARE'S CORNER CHILDCARE — FALL HOME V2 Seasonal layer only. Core brand variables remain unchanged. ========================================================== */ .fall-hero { position: relative; overflow: hidden; padding: 76px 0 84px; background: radial-gradient(circle at 10% 12%, rgba(244,197,66,.18), transparent 24%), radial-gradient(circle at 90% 12%, rgba(243,166,184,.12), transparent 28%), linear-gradient(180deg, #fffaf3 0%, #f8fcfd 100%); } .fall-hero::before, .fall-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } .fall-hero::before { width: 260px; height: 260px; left: -140px; bottom: -120px; background: rgba(115,198,107,.10); } .fall-hero::after { width: 180px; height: 180px; right: -70px; top: 38px; background: rgba(214,116,61,.10); } .fall-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .93fr) minmax(360px, 1.07fr); align-items: center; gap: clamp(40px, 6vw, 86px); } .fall-hero__content { max-width: 650px; } .fall-hero__season { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 13px; border: 1px solid rgba(190,104,45,.22); border-radius: 999px; color: #8a4d25; background: #fff2e7; font-family: var(--font-heading); font-size: .72rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; } .fall-hero__season i { color: #c96d35; } .fall-hero__eyebrow { display: block; margin-bottom: 18px; color: #356642; font-family: var(--font-heading); font-size: .78rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; } .fall-hero__title { max-width: 11ch; margin: 0; color: #4a2d20; font-family: var(--font-heading); font-size: clamp(3.35rem, 6.2vw, 5.8rem); font-weight: 900; line-height: .98; letter-spacing: -.05em; } .fall-hero__description { max-width: 600px; margin: 24px 0 0; color: #725e55; font-size: 1.06rem; line-height: 1.72; } .fall-hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .fall-hero__primary, .fall-hero__secondary { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border-radius: 999px; font-family: var(--font-heading); font-size: .9rem; font-weight: 900; text-decoration: none; } .fall-hero__primary { color: #2f211b; background: #f4ca55; box-shadow: 0 12px 26px rgba(231,185,63,.20); } .fall-hero__primary:hover { color:#2f211b; background:#e7b93f; transform:translateY(-2px); } .fall-hero__secondary { border: 1px solid #d9ebef; color: #4a2d20; background: #fff; } .fall-hero__secondary:hover { border-color:#96c898; color:#356642; transform:translateY(-2px); } .fall-hero__trust { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 26px; color: #725e55; font-size: .86rem; font-weight: 800; } .fall-hero__trust span { display:inline-flex; align-items:center; gap:7px; } .fall-hero__trust i { color:#d99a32; font-size:.72rem; } .fall-hero__media { position:relative; } .fall-hero__photo { position: relative; min-height: 650px; overflow: hidden; border-radius: 38px 38px 96px 38px; background: #e9f4e8; box-shadow: 0 28px 80px rgba(74,45,32,.15); } .fall-hero__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 48%; } .fall-hero__photo-card { position:absolute; left:24px; bottom:24px; z-index:2; max-width:280px; padding:15px 17px; border:1px solid rgba(255,255,255,.48); border-radius:18px; color:#fff; background:rgba(74,45,32,.76); box-shadow:0 10px 30px rgba(0,0,0,.12); backdrop-filter:blur(10px); } .fall-hero__photo-card strong { display:block; color:#fff; font-family:var(--font-heading); font-size:.95rem; } .fall-hero__photo-card span { display:block; margin-top:3px; color:rgba(255,255,255,.82); font-size:.78rem; } .fall-hero__leaf { position:absolute; z-index:3; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#c76f38; box-shadow:0 12px 26px rgba(120,65,28,.22); transform:rotate(-12deg); } .fall-hero__leaf--one { right:-12px; top:42px; } .fall-hero__leaf--two { left:-18px; bottom:110px; width:38px; height:38px; background:#d6a83f; transform:rotate(14deg); } .fall-bulletin { position:relative; padding:88px 0; overflow:hidden; background:#fff8ee; } .fall-bulletin__card { position:relative; display:grid; grid-template-columns:minmax(0,.8fr) minmax(360px,1.2fr); gap:54px; align-items:center; padding:52px; border:1px solid #f0dec8; border-radius:32px; background:#fff; box-shadow:0 18px 52px rgba(74,45,32,.08); } .fall-bulletin__eyebrow { color:#9a572f; font-family:var(--font-heading); font-size:.74rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; } .fall-bulletin h2 { margin:12px 0 0; color:#4a2d20; } .fall-bulletin p { margin:18px 0 0; max-width:560px; color:#725e55; } .fall-bulletin__items { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .fall-bulletin__item { min-height:150px; padding:20px; border:1px solid #ece6de; border-radius:20px; background:#fffaf5; } .fall-bulletin__item i { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#fff; background:#c76f38; } .fall-bulletin__item strong { display:block; margin-top:15px; color:#4a2d20; font-family:var(--font-heading); } .fall-bulletin__item span { display:block; margin-top:6px; color:#725e55; font-size:.84rem; line-height:1.5; } .fall-bulletin__link { display:inline-flex; margin-top:24px; color:#356642; font-weight:900; text-decoration:none; } @media (max-width:980px) { .fall-hero { padding:58px 0 68px; } .fall-hero__grid { grid-template-columns:1fr; gap:34px; } .fall-hero__content { max-width:760px; } .fall-hero__photo { min-height:560px; } .fall-bulletin__card { grid-template-columns:1fr; padding:38px; } } @media (max-width:600px) { .fall-hero { padding:36px 0 52px; } .fall-hero__grid { display:flex; flex-direction:column; gap:22px; } .fall-hero__content { display:contents; } .fall-hero__season { order:1; align-self:flex-start; margin-bottom:0; } .fall-hero__eyebrow { order:2; margin-bottom:0; } .fall-hero__title { order:3; max-width:100%; font-size:clamp(2.75rem,13vw,4rem); } .fall-hero__media { order:4; width:100%; } .fall-hero__photo { min-height:520px; border-radius:26px 26px 70px 26px; } .fall-hero__photo-card { left:16px; right:16px; bottom:16px; max-width:none; } .fall-hero__description { order:5; margin-top:0; font-size:.98rem; } .fall-hero__buttons { order:6; margin-top:0; flex-direction:column; width:100%; } .fall-hero__primary,.fall-hero__secondary { width:100%; } .fall-hero__trust { order:7; margin-top:0; flex-direction:column; gap:8px; } .fall-hero__leaf--one { right:-6px; top:28px; } .fall-hero__leaf--two { display:none; } .fall-bulletin { padding:58px 0; } .fall-bulletin__card { padding:26px 20px; border-radius:24px; gap:28px; } .fall-bulletin__items { grid-template-columns:1fr; } .fall-bulletin__item { min-height:0; } } /* SOURCE: page-v2.css */ /* ========================================================== CARE'S CORNER CHILDCARE — V2 INTERNAL PAGES ========================================================== */ .page-language-badge { min-height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0 14px; border:1px solid #d9e8dc; border-radius:999px; color:#4a2d20; background:#fff; font-size:.8rem; font-weight:900; } .page-hero { position:relative; padding:88px 0 72px; overflow:hidden; background:linear-gradient(180deg,#fff9f2 0%,#f8fcfd 100%); } .page-hero::after { content:""; position:absolute; width:250px; height:250px; right:-110px; top:-110px; border-radius:50%; background:rgba(244,197,66,.14); } .page-hero__inner { position:relative; z-index:1; max-width:850px; } .page-hero__eyebrow { display:inline-flex; margin-bottom:16px; padding:8px 13px; border-radius:999px; color:#356642; background:#e6f3e7; font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; } .page-hero h1 { margin:0; max-width:14ch; color:#4a2d20; font-size:clamp(2.8rem,6vw,5rem); } .page-hero p { max-width:720px; margin:20px 0 0; color:#725e55; font-size:1.05rem; line-height:1.7; } .page-hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; } .page-hero__button { min-height:50px; display:inline-flex; align-items:center; justify-content:center; padding:0 20px; border-radius:999px; color:#2f211b; background:#f4ca55; font-weight:900; text-decoration:none; } .page-hero__button--secondary { border:1px solid #d9ebef; color:#4a2d20; background:#fff; } .page-section { padding:84px 0; } .page-section--soft { background:#f4faf4; } .page-section--warm { background:#fff9f2; } .page-section__intro { max-width:760px; margin-bottom:38px; } .page-section__intro span { color:#356642; font-size:.74rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; } .page-section__intro h2 { margin:10px 0 0; color:#4a2d20; } .page-section__intro p { margin:16px 0 0; color:#725e55; } .info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .info-card { padding:24px; border:1px solid #e3e9e2; border-radius:20px; background:#fff; box-shadow:0 8px 24px rgba(74,45,32,.04); } .info-card i { width:42px; height:42px; display:grid; place-items:center; margin-bottom:15px; border-radius:13px; color:#fff; background:#96c898; } .info-card h3 { margin:0; color:#4a2d20; font-size:1.08rem; } .info-card p { margin:9px 0 0; color:#725e55; font-size:.92rem; } .content-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.8fr); gap:54px; align-items:start; } .content-copy h2 { margin:0; color:#4a2d20; } .content-copy h3 { margin:28px 0 8px; color:#4a2d20; font-size:1.25rem; } .content-copy p { color:#725e55; } .content-note { padding:28px; border:1px solid #eadfcf; border-radius:24px; background:#fffaf5; } .content-note strong { display:block; color:#4a2d20; font-family:var(--font-heading); font-size:1.15rem; } .content-note ul { margin:16px 0 0; padding-left:18px; color:#725e55; } .content-note li + li { margin-top:8px; } .faq-list { display:grid; gap:12px; max-width:900px; } .faq-item { padding:24px; border:1px solid #e6e9e4; border-radius:20px; background:#fff; } .faq-item h2,.faq-item h3 { margin:0; color:#4a2d20; font-size:1.12rem; } .faq-item p { margin:9px 0 0; color:#725e55; } .page-cta { padding:72px 0; background:#4a2d20; } .page-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:30px; } .page-cta h2 { margin:0; color:#fff; } .page-cta p { margin:8px 0 0; color:rgba(255,255,255,.72); } .page-cta a { flex:0 0 auto; min-height:52px; display:inline-flex; align-items:center; padding:0 22px; border-radius:999px; color:#2f211b; background:#f4ca55; font-weight:900; text-decoration:none; } .bulletin-board { display:grid; grid-template-columns:.8fr 1.2fr; gap:42px; padding:36px; border:1px solid #f0dec8; border-radius:28px; background:#fff; box-shadow:0 16px 48px rgba(74,45,32,.07); } .bulletin-month { padding:28px; border-radius:22px; background:#fff6e7; text-align:center; } .bulletin-month span { color:#9a572f; font-size:.75rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; } .bulletin-month strong { display:block; margin-top:8px; color:#4a2d20; font-family:var(--font-heading); font-size:2.6rem; } .bulletin-list { display:grid; gap:12px; } .bulletin-list div { padding:18px 20px; border:1px solid #ece6de; border-radius:17px; background:#fffaf5; } .bulletin-list strong { color:#4a2d20; } .bulletin-list p { margin:5px 0 0; color:#725e55; font-size:.9rem; } @media(max-width:860px){ .info-grid{grid-template-columns:1fr 1fr}.content-split,.bulletin-board{grid-template-columns:1fr}.page-cta__inner{align-items:flex-start;flex-direction:column} } @media(max-width:600px){ .page-hero{padding:58px 0 52px}.page-section{padding:58px 0}.info-grid{grid-template-columns:1fr}.page-cta{padding:54px 0}.page-cta a{width:100%;justify-content:center}.bulletin-board{padding:20px} } /* ========================================================== ABOUT V2 — CONFIANÇA, EQUIPE E FAMILY REQUEST ========================================================== */ .about-v2-hero{padding:82px 0 92px;overflow:hidden;background:linear-gradient(135deg,#fff8ef 0%,#f7fcf6 100%)} .about-v2-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.88fr);gap:72px;align-items:center} .about-v2-hero__eyebrow,.about-v2-kicker{display:inline-block;color:#356642;font-size:.72rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase} .about-v2-hero h1{max-width:11ch;margin:14px 0 0;color:#4a2d20;font-size:clamp(3rem,5.5vw,5.1rem);line-height:1.02;letter-spacing:-.045em} .about-v2-hero__description{max-width:610px;margin:23px 0 0;color:#725e55;font-size:1.05rem;line-height:1.75} .about-v2-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .about-v2-hero__primary,.about-v2-hero__secondary{min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:0 21px;border-radius:999px;font-weight:900;text-decoration:none;transition:transform .2s ease,background .2s ease} .about-v2-hero__primary{color:#2f211b;background:#f4ca55;box-shadow:0 12px 28px rgba(117,82,28,.14)} .about-v2-hero__secondary{border:1px solid #d7e7d9;color:#4a2d20;background:#fff} .about-v2-hero__primary:hover,.about-v2-hero__secondary:hover{transform:translateY(-2px)} .about-v2-hero__media{position:relative;padding:0 18px 24px 0} .about-v2-hero__photo{position:relative;z-index:1;min-height:610px;margin:0;overflow:hidden;border-radius:30px 30px 92px 30px;background:#e8f0e7;box-shadow:22px 22px 0 #e1f0e2,0 24px 55px rgba(74,45,32,.14)} .about-v2-hero__photo img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center 45%} .about-v2-hero__tags{position:absolute;z-index:2;right:-2px;bottom:0;display:flex;max-width:330px;flex-wrap:wrap;justify-content:flex-end;gap:8px} .about-v2-hero__tags span{padding:8px 11px;border:1px solid rgba(255,255,255,.8);border-radius:999px;color:#4a2d20;background:rgba(255,255,255,.94);box-shadow:0 8px 20px rgba(74,45,32,.1);font-size:.72rem;font-weight:800} .about-v2-team{background:#fff} .about-v2-team__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(450px,1.15fr);gap:58px;align-items:start} .about-v2-team__intro h2,.about-v2-section-heading h2,.about-v2-glance h2{margin:10px 0 0;color:#4a2d20;font-size:clamp(2.2rem,4vw,3.65rem);line-height:1.05;letter-spacing:-.04em} .about-v2-team__intro p{max-width:560px;margin:20px 0 0;color:#725e55;line-height:1.75} .about-v2-team__cards{display:grid;grid-template-columns:1.1fr .9fr;gap:16px} .about-v2-person-card{min-height:328px;padding:24px;border:1px solid #e7e9df;border-radius:25px;background:#fffaf5;box-shadow:0 14px 35px rgba(74,45,32,.06)} .about-v2-person-card--caroline{display:grid;grid-template-columns:124px minmax(0,1fr);gap:20px;align-items:end;background:#f5faf3} .about-v2-person-card--caroline img{width:124px;height:156px;object-fit:cover;object-position:center;border-radius:18px} .about-v2-person-card__label{color:#356642;font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase} .about-v2-person-card h3{margin:8px 0 0;color:#4a2d20;font-size:1.35rem} .about-v2-person-card p{margin:6px 0 0;color:#725e55;line-height:1.6} .about-v2-person-card--team{display:flex;flex-direction:column;justify-content:center;background:#fff7df} .about-v2-person-card__icon{width:52px;height:52px;display:grid;place-items:center;margin-bottom:16px;border-radius:17px;color:#4a2d20;background:#f4ca55} .about-v2-review{padding:54px 0;background:#4a2d20} .about-v2-review__inner{display:grid;grid-template-columns:auto minmax(0,760px);gap:36px;align-items:center} .about-v2-review__rating{display:grid;gap:7px;color:#f4ca55;font-size:1.2rem;letter-spacing:.12em} .about-v2-review__rating small{color:rgba(255,255,255,.72);font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase} .about-v2-review blockquote{margin:0;color:#fff;font-family:var(--font-heading);font-size:clamp(1.55rem,3vw,2.35rem);font-weight:800;line-height:1.25} .about-v2-expectations{background:#fff9f2} .about-v2-section-heading{max-width:650px;margin-bottom:36px} .about-v2-expectations__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .about-v2-expectations__grid article{padding:25px;border:1px solid #eee2d4;border-radius:22px;background:#fff;box-shadow:0 10px 28px rgba(74,45,32,.05)} .about-v2-expectations__icon{width:44px;height:44px;display:grid;place-items:center;margin-bottom:16px;border-radius:14px;color:#356642;background:#e8f3e8} .about-v2-expectations__grid h3{margin:0;color:#4a2d20;font-size:1.08rem} .about-v2-expectations__grid p{margin:9px 0 0;color:#725e55;font-size:.92rem;line-height:1.6} .about-v2-glance{padding:78px 0;background:#f1f8ef} .about-v2-glance__inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(460px,1.15fr);gap:56px;align-items:start} .about-v2-glance__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:0;padding:0;list-style:none} .about-v2-glance__list li{display:flex;align-items:center;gap:10px;min-height:58px;padding:13px 14px;border:1px solid #dbe9dc;border-radius:16px;color:#4a2d20;background:#fff;font-size:.86rem;font-weight:800;line-height:1.35} .about-v2-glance__list i{width:26px;color:#356642;text-align:center} @media(max-width:1050px){.about-v2-hero__grid,.about-v2-team__grid,.about-v2-glance__inner{grid-template-columns:1fr;gap:42px}.about-v2-hero__content{max-width:720px}.about-v2-hero__photo{min-height:580px}.about-v2-team__cards{max-width:720px}.about-v2-expectations__grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.about-v2-hero{padding:50px 0 58px}.about-v2-hero__grid{display:flex;flex-direction:column;gap:21px}.about-v2-hero__content{display:contents}.about-v2-hero__eyebrow{order:1}.about-v2-hero h1{order:2;max-width:10ch;margin:0;font-size:clamp(2.35rem,10.5vw,3rem);overflow-wrap:anywhere}.about-v2-hero__media{order:3;width:100%;padding:0 10px 24px 0}.about-v2-hero__photo{min-height:470px;border-radius:25px 25px 66px 25px}.about-v2-hero__tags{right:0;bottom:0;max-width:290px}.about-v2-hero__tags span{padding:7px 9px;font-size:.66rem}.about-v2-hero__description{order:4;margin:0;font-size:.98rem}.about-v2-hero__actions{order:5;width:100%;margin:0;flex-direction:column}.about-v2-hero__primary,.about-v2-hero__secondary{width:100%}.about-v2-team__cards,.about-v2-expectations__grid,.about-v2-glance__list{grid-template-columns:1fr}.about-v2-person-card{min-height:auto}.about-v2-person-card--caroline{grid-template-columns:96px minmax(0,1fr)}.about-v2-person-card--caroline img{width:96px;height:124px}.about-v2-review{padding:46px 0}.about-v2-review__inner{grid-template-columns:1fr;gap:18px}.about-v2-review blockquote{font-size:1.55rem}.about-v2-glance{padding:58px 0}.about-v2-glance__inner{gap:28px}.about-v2-final-cta .final-cta__description{order:3}.about-v2-final-cta .final-cta__side-card{order:4}.about-v2-final-cta .final-cta__steps{order:5}.about-v2-final-cta .final-cta__trust{order:6}.about-v2-final-cta .final-cta__action{order:7}} /* SOURCE: family-request.css */ /* ========================================================== CARE'S CORNER — FAMILY REQUEST EMBED PAGE ========================================================== */ .request-page { min-height:100vh; background:#f8fcfd; } .request-topbar { border-bottom:1px solid #e8dcd3; background:#fff9f2; } .request-topbar__inner { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:20px; } .request-topbar__brand { display:flex; align-items:center; gap:10px; color:#4a2d20; text-decoration:none; font-family:var(--font-heading); font-weight:900; } .request-topbar__brand img { width:58px; height:auto; } .request-topbar__back { color:#356642; font-weight:800; text-decoration:none; } .request-hero { padding:46px 0 30px; text-align:center; } .request-hero span { display:inline-flex; padding:8px 13px; border-radius:999px; color:#356642; background:#e6f3e7; font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; } .request-hero h1 { margin:14px auto 0; color:#4a2d20; font-size:clamp(2.4rem,6vw,4rem); } .request-hero p { max-width:690px; margin:14px auto 0; color:#725e55; } .request-embed-wrap { width:min(100% - 24px,1120px); margin:0 auto 26px; overflow:visible; } .request-embed { width:100%; height:1600px; min-height:640px; display:block; border:0; border-radius:22px; background:#fff; box-shadow:0 16px 44px rgba(23,59,72,.08); overflow:hidden; } .request-open { display:flex; justify-content:center; padding:0 20px 34px; } .request-open a { color:#356642; font-weight:900; } @media(max-width:600px){ .request-topbar__inner{min-height:64px}.request-topbar__brand span{display:none}.request-hero{padding:34px 0 22px}.request-embed-wrap{width:100%;margin-bottom:18px}.request-embed{min-height:640px;border-radius:0;box-shadow:none}.request-open{padding-bottom:26px} } /* SOURCE: core-v3.css */ /* ========================================================== CARE'S CORNER CHILDCARE — CORE PAGES V3 Oct 2026 refresh: Fall Home + Our Care + Bulletin + FAQ + Our Space + Our Activities ========================================================== */ /* ---------- FALL DETAIL SYSTEM ---------- */ .fall-leaf-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .fall-leaf-field span{position:absolute;top:-12%;width:18px;height:28px;border-radius:100% 0 100% 0;background:#d47a3e;opacity:.52;animation:care-fall-leaf 11s linear infinite;filter:drop-shadow(0 4px 3px rgba(74,45,32,.08))} .fall-leaf-field span:nth-child(2){left:18%;width:13px;height:22px;background:#e7b93f;animation-delay:-4s;animation-duration:13s} .fall-leaf-field span:nth-child(3){left:42%;width:16px;height:25px;background:#a86737;animation-delay:-8s;animation-duration:15s} .fall-leaf-field span:nth-child(4){left:67%;width:12px;height:20px;background:#cf6d43;animation-delay:-2s;animation-duration:12s} .fall-leaf-field span:nth-child(5){left:86%;width:15px;height:24px;background:#c99d3d;animation-delay:-7s;animation-duration:14s} .fall-leaf-field span:nth-child(1){left:5%} @keyframes care-fall-leaf{0%{transform:translate3d(0,-8vh,0) rotate(0deg)}50%{transform:translate3d(34px,58vh,0) rotate(190deg)}100%{transform:translate3d(-18px,118vh,0) rotate(380deg)}} @media(prefers-reduced-motion:reduce){.fall-leaf-field span{animation:none;display:none}} /* ---------- HOME HERO SOCIAL PROOF ---------- */ .fall-hero__google-badge{position:absolute;z-index:4;top:22px;left:22px;display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid rgba(255,255,255,.82);border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 12px 30px rgba(74,45,32,.14);backdrop-filter:blur(10px);color:#4a2d20} .fall-hero__google-badge-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#fff7df;color:#386ec8;font-family:Arial,sans-serif;font-weight:900;font-size:1rem} .fall-hero__google-badge-copy{display:grid;gap:2px;line-height:1.05} .fall-hero__google-badge-copy strong{font-family:var(--font-heading);font-size:.8rem} .fall-hero__google-badge-copy span{color:#d99a32;font-size:.72rem;letter-spacing:.05em} /* ---------- HOME BULLETIN REFRESH ---------- */ .fall-bulletin--home-refresh{position:relative;overflow:hidden;padding:82px 0;background:linear-gradient(180deg,#fff8ef 0%,#fffdf9 100%)} .fall-bulletin--home-refresh::before{content:"";position:absolute;width:300px;height:300px;right:-120px;bottom:-150px;border-radius:50%;background:rgba(216,124,66,.08)} .fall-bulletin--home-refresh .fall-bulletin__card{position:relative;z-index:1;grid-template-columns:minmax(0,.88fr) minmax(380px,1.12fr);align-items:stretch;gap:30px;padding:30px;border-color:#efddc9;background:rgba(255,255,255,.93)} .fall-bulletin__preview{position:relative;min-height:410px;overflow:hidden;border-radius:24px;background:#eadfce;box-shadow:0 16px 36px rgba(74,45,32,.08)} .fall-bulletin__preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%} .fall-bulletin__preview-overlay{position:absolute;inset:auto 18px 18px 18px;padding:18px;border:1px solid rgba(255,255,255,.48);border-radius:18px;color:#fff;background:linear-gradient(135deg,rgba(48,30,22,.94),rgba(74,45,32,.82));backdrop-filter:blur(9px);text-shadow:0 2px 10px rgba(0,0,0,.3)} .fall-bulletin__preview-overlay span{display:block;color:#ffe08a;font-size:.7rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase} .fall-bulletin__preview-overlay strong{display:block;margin-top:5px;font-family:var(--font-heading);font-size:1.4rem;line-height:1.15;color:#fff} .fall-bulletin__copy{display:flex;flex-direction:column;justify-content:center} .fall-bulletin--home-refresh .fall-bulletin__items{grid-template-columns:1fr 1fr;margin-top:24px} .fall-bulletin--home-refresh .fall-bulletin__item{min-height:142px} /* ---------- HOME PATHWAY BLOCKS ---------- */ .home-pathways{padding:86px 0;background:#f4faf4} .home-pathways__heading{max-width:720px;margin-bottom:34px} .home-pathways__heading span{color:#356642;font-size:.74rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase} .home-pathways__heading h2{margin:10px 0 0;color:#4a2d20;font-size:clamp(2.35rem,4.7vw,4rem);line-height:1.05;letter-spacing:-.04em} .home-pathways__heading p{margin:16px 0 0;color:#725e55;line-height:1.7} .home-pathways__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:24px;align-items:stretch} .home-pathway{position:relative;min-height:410px;overflow:hidden;border:1px solid #dfe9df;border-radius:28px;background:#fff;box-shadow:0 16px 44px rgba(74,45,32,.06)} .home-pathway--space{display:grid;grid-template-columns:1.02fr .98fr} .home-pathway__content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:38px} .home-pathway__content span{color:#356642;font-size:.72rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase} .home-pathway__content h3{margin:10px 0 0;color:#4a2d20;font-size:clamp(1.8rem,3vw,2.65rem);line-height:1.08} .home-pathway__content p{margin:12px 0 0;color:#725e55;line-height:1.65} .home-pathway__content a{align-self:flex-start;margin-top:20px;color:#4a2d20;font-weight:900;text-decoration:none} .home-pathway__media{position:relative;min-height:100%;overflow:hidden;background:#e5efe3} .home-pathway__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .home-pathway--activities{background:linear-gradient(145deg,#fff8e7,#f4faf4)} .home-pathway__mockups{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:28px 28px 0} .home-pathway__mockup{min-height:110px;padding:18px;border:1px solid #ebe2d5;border-radius:19px;background:#fff;box-shadow:0 10px 26px rgba(74,45,32,.05)} .home-pathway__mockup i{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:#356642;background:#e6f3e7} .home-pathway__mockup strong{display:block;margin-top:14px;color:#4a2d20;font-size:.88rem} /* ---------- SHARED V3 PAGE HERO ---------- */ .v3-hero{position:relative;overflow:hidden;padding:78px 0 88px;background:linear-gradient(135deg,#fff8ef 0%,#f6fbf5 100%)} .v3-hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.95fr) minmax(380px,1.05fr);gap:70px;align-items:center} .v3-hero__eyebrow{display:inline-flex;color:#356642;font-size:.72rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase} .v3-hero h1{max-width:11ch;margin:14px 0 0;color:#4a2d20;font-size:clamp(3rem,5.5vw,5rem);line-height:1.01;letter-spacing:-.045em} .v3-hero__description{max-width:630px;margin:22px 0 0;color:#725e55;font-size:1.04rem;line-height:1.75} .v3-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px} .v3-hero__primary,.v3-hero__secondary{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 21px;border-radius:999px;font-weight:900;text-decoration:none} .v3-hero__primary{color:#2f211b;background:#f4ca55;box-shadow:0 12px 28px rgba(117,82,28,.14)} .v3-hero__secondary{border:1px solid #d8e8dc;color:#4a2d20;background:#fff} .v3-hero__media{position:relative;padding:0 18px 22px 0} .v3-hero__photo{position:relative;min-height:590px;overflow:hidden;border-radius:30px 30px 86px 30px;background:#e5efe3;box-shadow:20px 20px 0 #e2f0e3,0 24px 54px rgba(74,45,32,.13)} .v3-hero__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .v3-hero__tags{position:absolute;z-index:3;right:0;bottom:0;display:flex;max-width:340px;flex-wrap:wrap;justify-content:flex-end;gap:8px} .v3-hero__tags span{padding:8px 11px;border:1px solid rgba(255,255,255,.85);border-radius:999px;color:#4a2d20;background:rgba(255,255,255,.95);box-shadow:0 8px 20px rgba(74,45,32,.10);font-size:.7rem;font-weight:800} /* ---------- SHARED REVIEW ---------- */ .v3-review{padding:52px 0;background:#4a2d20} .v3-review__inner{display:grid;grid-template-columns:auto minmax(0,800px);gap:34px;align-items:center} .v3-review__rating{display:grid;gap:5px;color:#f4ca55;letter-spacing:.1em;font-size:1.15rem} .v3-review__rating small{color:rgba(255,255,255,.68);font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase} .v3-review blockquote{margin:0;color:#fff;font-family:var(--font-heading);font-size:clamp(1.5rem,2.8vw,2.3rem);font-weight:800;line-height:1.25} /* ---------- OUR CARE ---------- */ .care-v3-overview{padding:82px 0;background:#fff} .care-v3-heading{max-width:760px;margin-bottom:34px} .care-v3-heading span{color:#356642;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase} .care-v3-heading h2{margin:10px 0 0;color:#4a2d20;font-size:clamp(2.35rem,4.3vw,3.8rem);line-height:1.05} .care-v3-heading p{margin:15px 0 0;color:#725e55;line-height:1.7} .care-v3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .care-v3-card{padding:25px;border:1px solid #e4e9e3;border-radius:22px;background:#fffaf5;box-shadow:0 10px 28px rgba(74,45,32,.04)} .care-v3-card i{width:44px;height:44px;display:grid;place-items:center;margin-bottom:15px;border-radius:14px;color:#356642;background:#e6f3e7} .care-v3-card h3{margin:0;color:#4a2d20;font-size:1.08rem} .care-v3-card p{margin:8px 0 0;color:#725e55;font-size:.92rem;line-height:1.6} .care-v3-rhythm{padding:82px 0;background:#f3f9f1} .care-v3-rhythm__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start} .care-v3-rhythm__intro h2{margin:10px 0 0;color:#4a2d20;font-size:clamp(2.3rem,4vw,3.5rem);line-height:1.05} .care-v3-rhythm__intro p{margin:16px 0 0;color:#725e55;line-height:1.7} .care-v3-timeline{display:grid;grid-template-columns:1fr 1fr;gap:13px} .care-v3-timeline article{padding:22px;border:1px solid #dce9dc;border-radius:20px;background:#fff} .care-v3-timeline span{display:inline-grid;width:36px;height:36px;place-items:center;border-radius:11px;color:#4a2d20;background:#f4ca55;font-family:var(--font-heading);font-size:.75rem;font-weight:900} .care-v3-timeline h3{margin:14px 0 0;color:#4a2d20} .care-v3-timeline p{margin:7px 0 0;color:#725e55;font-size:.9rem;line-height:1.6} .care-v3-glance{padding:72px 0;background:#fff9f2} .care-v3-glance__inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center} .care-v3-glance h2{margin:10px 0 0;color:#4a2d20;font-size:clamp(2.2rem,4vw,3.5rem)} .care-v3-glance__list{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:0;padding:0;list-style:none} .care-v3-glance__list li{display:flex;align-items:center;gap:10px;min-height:56px;padding:13px 14px;border:1px solid #eadfd1;border-radius:16px;background:#fff;color:#4a2d20;font-size:.86rem;font-weight:800} .care-v3-glance__list i{width:24px;color:#356642;text-align:center} /* ---------- BULLETIN PAGE ---------- */ .bulletin-v3-hero{position:relative;overflow:hidden;padding:74px 0 82px;background:linear-gradient(135deg,#fff6e8 0%,#fffaf4 56%,#f4faf4 100%)} .bulletin-v3-hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;gap:66px;align-items:center} .bulletin-v3-hero h1{max-width:9ch;margin:13px 0 0;color:#4a2d20;font-size:clamp(3rem,5.5vw,5.2rem);line-height:1} .bulletin-v3-hero__preview{position:relative;min-height:570px;overflow:hidden;border-radius:30px 30px 90px 30px;background:#eadfcf;box-shadow:22px 22px 0 #f4e7cf,0 24px 55px rgba(74,45,32,.13)} .bulletin-v3-hero__preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%} .bulletin-v3-hero__stamp{position:absolute;z-index:2;top:18px;right:18px;display:grid;place-items:center;width:108px;height:108px;border-radius:50%;color:#4a2d20;background:#f4ca55;box-shadow:0 10px 28px rgba(74,45,32,.12);text-align:center} .bulletin-v3-hero__stamp strong{display:block;font-family:var(--font-heading);font-size:1.15rem;line-height:1} .bulletin-v3-hero__stamp span{font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase} .bulletin-v3-board{padding:84px 0;background:#fff9f2} .bulletin-v3-board__shell{display:grid;grid-template-columns:.72fr 1.28fr;gap:28px;padding:30px;border:1px solid #efdeca;border-radius:30px;background:#fff;box-shadow:0 16px 48px rgba(74,45,32,.06)} .bulletin-v3-month{position:relative;min-height:390px;padding:28px;border-radius:24px;background:linear-gradient(150deg,#fff0d8,#f4faf4);overflow:hidden} .bulletin-v3-month img{position:absolute;inset:auto 0 0 0;width:100%;height:56%;object-fit:cover;opacity:.95} .bulletin-v3-month__copy{position:relative;z-index:2} .bulletin-v3-month__copy span{color:#9a572f;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase} .bulletin-v3-month__copy strong{display:block;margin-top:8px;color:#4a2d20;font-family:var(--font-heading);font-size:2.7rem;line-height:1} .bulletin-v3-list{display:grid;gap:12px} .bulletin-v3-item{padding:20px 21px;border:1px solid #ece2d7;border-radius:18px;background:#fffaf5} .bulletin-v3-item__head{display:flex;align-items:center;gap:10px} .bulletin-v3-item i{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:#356642;background:#e6f3e7} .bulletin-v3-item h3{margin:0;color:#4a2d20;font-size:1.02rem} .bulletin-v3-item p{margin:8px 0 0;color:#725e55;font-size:.91rem;line-height:1.62} .bulletin-v3-moment{padding:82px 0;background:#f4faf4} .bulletin-v3-moment__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .bulletin-v3-moment__visual{position:relative;min-height:480px;overflow:hidden;border-radius:28px;background:#e5efe3} .bulletin-v3-moment__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .bulletin-v3-moment__copy h2{margin:10px 0 0;color:#4a2d20;font-size:clamp(2.3rem,4vw,3.6rem);line-height:1.05} .bulletin-v3-moment__copy p{margin:17px 0 0;color:#725e55;line-height:1.75} /* ---------- FAQ ---------- */ .faq-v3-hero{padding:72px 0 56px;background:linear-gradient(180deg,#fff9f2,#f7fbfb)} .faq-v3-hero__grid{display:grid;grid-template-columns:1fr .72fr;gap:50px;align-items:center} .faq-v3-hero h1{max-width:12ch;margin:13px 0 0;color:#4a2d20;font-size:clamp(2.9rem,5.1vw,4.8rem);line-height:1.02} .faq-v3-hero__side{padding:26px;border:1px solid #e1e9e0;border-radius:24px;background:#fff;box-shadow:0 12px 34px rgba(74,45,32,.05)} .faq-v3-hero__side i{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;color:#356642;background:#e6f3e7} .faq-v3-hero__side h2{margin:15px 0 0;color:#4a2d20;font-size:1.45rem} .faq-v3-hero__side p{margin:9px 0 0;color:#725e55;line-height:1.65} .faq-v3{padding:76px 0;background:#fff} .faq-v3__layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:start} .faq-v3__categories{position:sticky;top:112px;display:grid;gap:8px} .faq-v3__categories a{padding:12px 14px;border:1px solid #e7e9e3;border-radius:14px;color:#725e55;background:#fff9f2;font-size:.84rem;font-weight:800;text-decoration:none} .faq-v3__groups{display:grid;gap:34px} .faq-v3__group h2{margin:0 0 13px;color:#4a2d20;font-size:1.55rem} .faq-v3 details{border:1px solid #e4e9e3;border-radius:18px;background:#fff;overflow:hidden} .faq-v3 details+details{margin-top:10px} .faq-v3 summary{position:relative;cursor:pointer;list-style:none;padding:20px 56px 20px 21px;color:#4a2d20;font-family:var(--font-heading);font-weight:900} .faq-v3 summary::-webkit-details-marker{display:none} .faq-v3 summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:#356642;background:#e6f3e7;font-family:Arial,sans-serif;font-size:1.15rem} .faq-v3 details[open] summary::after{content:"–"} .faq-v3 details p{margin:0;padding:0 21px 20px;color:#725e55;line-height:1.68} .faq-v3-nudge{padding:26px;border:1px solid #efdcc8;border-radius:22px;background:#fff8ea} .faq-v3-nudge h2{margin:0;color:#4a2d20;font-size:1.55rem} .faq-v3-nudge p{margin:10px 0 0;color:#725e55;line-height:1.65} .faq-v3-nudge a{display:inline-flex;margin-top:16px;color:#4a2d20;font-weight:900;text-decoration:none} /* ---------- OUR SPACE ---------- */ .space-v3-intro{padding:88px 0;background:linear-gradient(180deg,#fff 0%,#f7fbf6 100%)} .space-v3-video{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;padding:38px;border:1px solid #dfe9df;border-radius:32px;background:#fff;box-shadow:0 18px 48px rgba(74,45,32,.07)} .space-v3-video__copy h2{margin:10px 0 0;color:#4a2d20;font-size:clamp(2.4rem,4.3vw,3.8rem);line-height:1.05} .space-v3-video__copy p{margin:16px 0 0;color:#725e55;line-height:1.72} .space-v3-video__frame{justify-self:center;overflow:hidden;border:10px solid #fff;border-radius:32px;background:#241d19;box-shadow:0 22px 54px rgba(74,45,32,.17);max-width:390px} .space-v3-video__frame video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#17120f} .space-v3-highlights{padding:76px 0;background:#f4faf4} .space-v3-highlights__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .space-v3-highlight{padding:20px;border:1px solid #dfe9df;border-radius:18px;background:#fff;text-align:center} .space-v3-highlight i{width:42px;height:42px;display:grid;place-items:center;margin:0 auto 12px;border-radius:13px;color:#356642;background:#e6f3e7} .space-v3-highlight strong{color:#4a2d20;font-size:.9rem} .space-v3-gallery{padding:84px 0;background:#fff9f2} .space-v3-gallery__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .space-v3-area{overflow:hidden;border:1px solid #eadfd1;border-radius:26px;background:#fff;box-shadow:0 12px 34px rgba(74,45,32,.05)} .space-v3-area--wide{grid-column:1/-1;display:grid;grid-template-columns:1.06fr .94fr} .space-v3-area__media{position:relative;min-height:430px;overflow:hidden;background:#e7efe7} .space-v3-area__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .space-v3-area__copy{padding:26px} .space-v3-area__copy span{color:#356642;font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase} .space-v3-area__copy h3{margin:8px 0 0;color:#4a2d20;font-size:1.65rem} .space-v3-area__copy p{margin:10px 0 0;color:#725e55;line-height:1.67} .space-v3-area__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px} .space-v3-area__tags em{padding:7px 9px;border-radius:999px;color:#4a2d20;background:#fff3d5;font-style:normal;font-size:.7rem;font-weight:800} /* ---------- ACTIVITIES ---------- */ .activities-v3{padding:82px 0;background:#fff} .activities-v3__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .activities-v3-card{position:relative;min-height:290px;padding:25px;border:1px solid #e4e9e3;border-radius:23px;background:#fffaf5;overflow:hidden} .activities-v3-card::after{content:"";position:absolute;width:120px;height:120px;right:-45px;bottom:-50px;border-radius:50%;background:rgba(150,200,152,.12)} .activities-v3-card__icon{width:50px;height:50px;display:grid;place-items:center;border-radius:16px;color:#356642;background:#e6f3e7;font-size:1.05rem} .activities-v3-card h3{margin:20px 0 0;color:#4a2d20;font-size:1.25rem} .activities-v3-card p{margin:9px 0 0;color:#725e55;font-size:.92rem;line-height:1.65} .activities-v3-card__mock{display:flex;gap:7px;margin-top:22px} .activities-v3-card__mock span{height:8px;border-radius:999px;background:#f4ca55} .activities-v3-card__mock span:nth-child(1){width:44px}.activities-v3-card__mock span:nth-child(2){width:28px;background:#96c898}.activities-v3-card__mock span:nth-child(3){width:36px;background:#ef9b76} .activities-v3-rhythm{padding:80px 0;background:#f4faf4} .activities-v3-rhythm__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:start} .activities-v3-rhythm__copy h2{margin:10px 0 0;color:#4a2d20;font-size:clamp(2.3rem,4vw,3.5rem)} .activities-v3-rhythm__copy p{margin:16px 0 0;color:#725e55;line-height:1.7} .activities-v3-rhythm__steps{display:grid;grid-template-columns:1fr 1fr;gap:12px} .activities-v3-rhythm__steps article{padding:20px;border:1px solid #dce9dc;border-radius:18px;background:#fff} .activities-v3-rhythm__steps strong{color:#4a2d20}.activities-v3-rhythm__steps p{margin:7px 0 0;color:#725e55;font-size:.9rem;line-height:1.58} /* ---------- COMMON SMALL KICKER ---------- */ .v3-kicker{color:#356642;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase} /* ---------- RESPONSIVE ---------- */ @media(max-width:1050px){ .v3-hero__grid,.bulletin-v3-hero__grid,.care-v3-rhythm__grid,.care-v3-glance__inner,.bulletin-v3-moment__grid,.space-v3-video,.activities-v3-rhythm__grid{grid-template-columns:1fr;gap:40px} .v3-hero__photo,.bulletin-v3-hero__preview{min-height:560px} .care-v3-grid,.activities-v3__grid{grid-template-columns:1fr 1fr} .space-v3-highlights__grid{grid-template-columns:repeat(3,1fr)} .home-pathways__grid{grid-template-columns:1fr} } @media(max-width:860px){ .fall-bulletin--home-refresh .fall-bulletin__card,.bulletin-v3-board__shell,.faq-v3__layout{grid-template-columns:1fr} .faq-v3__categories{position:static;display:flex;overflow:auto;padding-bottom:5px} .faq-v3__categories a{white-space:nowrap} .space-v3-area--wide{grid-template-columns:1fr} .home-pathway--space{grid-template-columns:1fr} .home-pathway__media{min-height:300px} } @media(max-width:600px){ .fall-hero__google-badge{top:14px;left:14px;padding:8px 10px}.fall-hero__google-badge-mark{width:27px;height:27px} .fall-bulletin--home-refresh{padding:58px 0}.fall-bulletin--home-refresh .fall-bulletin__card{padding:20px;gap:20px}.fall-bulletin__preview{min-height:340px}.fall-bulletin--home-refresh .fall-bulletin__items{grid-template-columns:1fr} .home-pathways{padding:58px 0}.home-pathways__grid{gap:14px}.home-pathway{min-height:0}.home-pathway--space{display:flex;flex-direction:column}.home-pathway__media{order:1;min-height:330px}.home-pathway__content{order:2;padding:24px}.home-pathway__mockups{padding:20px 20px 0}.home-pathway__mockup{min-height:96px;padding:15px} .v3-hero{padding:50px 0 58px}.v3-hero__grid{display:flex;flex-direction:column;gap:21px}.v3-hero__content{display:contents}.v3-hero__eyebrow{order:1}.v3-hero h1{order:2;max-width:100%;margin:0;font-size:clamp(2.35rem,10.5vw,3rem);overflow-wrap:anywhere}.v3-hero__media{order:3;width:100%;padding:0 10px 22px 0}.v3-hero__photo{min-height:470px;border-radius:25px 25px 64px 25px}.v3-hero__description{order:4;margin:0;font-size:.97rem}.v3-hero__actions{order:5;width:100%;margin:0;flex-direction:column}.v3-hero__primary,.v3-hero__secondary{width:100%}.v3-hero__tags{right:0;max-width:290px}.v3-hero__tags span{padding:7px 9px;font-size:.65rem} .care-v3-overview,.care-v3-rhythm,.care-v3-glance,.bulletin-v3-board,.bulletin-v3-moment,.faq-v3,.space-v3-intro,.space-v3-highlights,.space-v3-gallery,.activities-v3,.activities-v3-rhythm{padding:58px 0} .care-v3-grid,.care-v3-timeline,.care-v3-glance__list,.activities-v3__grid,.activities-v3-rhythm__steps,.space-v3-highlights__grid,.space-v3-gallery__grid{grid-template-columns:1fr} .v3-review{padding:44px 0}.v3-review__inner{grid-template-columns:1fr;gap:17px}.v3-review blockquote{font-size:1.48rem} .bulletin-v3-hero{padding:50px 0 58px}.bulletin-v3-hero__grid{display:flex;flex-direction:column;gap:21px}.bulletin-v3-hero__content{display:contents}.bulletin-v3-hero__eyebrow{order:1}.bulletin-v3-hero h1{order:2;max-width:100%;margin:0;font-size:clamp(2.4rem,11vw,3.2rem)}.bulletin-v3-hero__preview{order:3;width:100%;min-height:480px}.bulletin-v3-hero__description{order:4}.bulletin-v3-hero__actions{order:5;width:100%;display:flex;flex-direction:column}.bulletin-v3-hero__actions a{width:100%}.bulletin-v3-board__shell{padding:20px}.bulletin-v3-month{min-height:350px} .faq-v3-hero{padding:50px 0}.faq-v3-hero__grid{grid-template-columns:1fr;gap:25px}.faq-v3-hero h1{font-size:clamp(2.35rem,10.5vw,3rem)}.faq-v3 summary{padding:18px 52px 18px 18px}.faq-v3 details p{padding:0 18px 18px} .space-v3-video{padding:24px}.space-v3-video__frame{width:100%;max-width:390px}.space-v3-video__frame video{max-height:none}.space-v3-area--wide{display:block}.space-v3-area__media{min-height:390px} } /* SOURCE: header.css */ /* ========================================================== CARE'S CORNER CHILDCARE HEADER.CSS ========================================================== */ /* ========================================================== 01 — HEADER BASE ========================================================== */ .site-header { position: sticky; top: 0; z-index: 1100; width: 100%; background: rgba(255, 249, 242, 0.98); border-bottom: 1px solid #E8DCD3; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .site-header__container { min-height: 88px; display: flex; align-items: center; gap: 26px; } /* ========================================================== 02 — BRAND / COMPANY ========================================================== */ .site-header__brand-group { display: flex; align-items: center; gap: 20px; flex-shrink: 0; } .site-header__logo { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex-shrink: 0; color: #4A2D20; text-decoration: none; } .site-header__logo-image { width: 54px; height: 27px; display: block; margin: 0 0 1px 1px; object-fit: contain; } .site-header__logo-text { display: flex; flex-direction: column; line-height: 1.05; } .site-header__business-name { color: #4A2D20; font-family: "Nunito", sans-serif; font-size: 0.9rem; font-weight: 900; } .site-header__business-type { margin-top: 3px; color: #8B6B13; font-size: 0.55rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } /* ========================================================== 03 — DESKTOP PHONE ========================================================== */ .site-header__phone { display: inline-flex; align-items: center; gap: 7px; color: #725E55; font-size: 0.84rem; font-weight: 800; white-space: nowrap; text-decoration: none; transition: color 0.2s ease; } .site-header__phone i { color: #568A62; font-size: 0.78rem; } .site-header__phone:hover { color: #4A2D20; } /* ========================================================== 04 — DESKTOP NAVIGATION ========================================================== */ .site-navigation { display: flex; align-items: center; margin-left: auto; } .site-navigation__list { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; list-style: none; } .site-navigation__item { margin: 0; padding: 0; } .site-navigation__link { position: relative; display: inline-flex; align-items: center; padding: 12px 0; color: #4A2D20; font-size: 0.79rem; font-weight: 800; line-height: 1; white-space: nowrap; text-decoration: none; transition: color 0.2s ease; } /* YELLOW UNDERLINE */ .site-navigation__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; border-radius: 999px; background: #E7B93F; transform: scaleX(0); transform-origin: center; transition: transform 0.2s ease; } /* HOME ALWAYS ACTIVE */ .site-navigation__link.is-active::after { transform: scaleX(1); } /* OTHER LINKS HOVER */ .site-navigation__link:not(.is-active):hover { color: #8B6B13; } .site-navigation__link:not(.is-active):hover::after { transform: scaleX(1); } /* ========================================================== 05 — MOBILE CONTACT HIDDEN ON DESKTOP ========================================================== */ .site-navigation__mobile-contact { display: none; } /* ========================================================== 06 — HEADER ACTIONS ========================================================== */ .site-header__actions { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } /* ========================================================== 07 — LANGUAGE SELECTOR ========================================================== */ .language-selector { position: relative; flex-shrink: 0; } .language-selector__button { min-width: 70px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 1px solid #D9E8DC; border-radius: 999px; background: #FFFFFF; color: #4A2D20; font-family: inherit; font-size: 0.82rem; font-weight: 800; line-height: 1; cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .language-selector__button:hover { border-color: #96C898; background: #F7FCF7; transform: translateY(-1px); } .language-selector__button--static { cursor: default; } .language-selector__button--static:hover { border-color: #D9E8DC; background: #FFFFFF; transform: none; } .language-selector__icon { display: inline-flex; font-size: 0.82rem; } .language-selector__current { display: inline-flex; color: #4A2D20; font-weight: 900; } .language-selector__arrow { display: inline-flex; color: #725E55; font-size: 0.65rem; } /* ========================================================== 08 — LANGUAGE DROPDOWN ========================================================== */ .language-selector__menu { position: absolute; top: calc(100% + 9px); right: 0; z-index: 1200; min-width: 160px; display: none; margin: 0; padding: 7px; border: 1px solid #E8DCD3; border-radius: 14px; background: #FFFFFF; box-shadow: 0 16px 38px rgba(74, 45, 32, 0.14); } .language-selector.is-open .language-selector__menu { display: block; } .language-selector__option { width: 100%; display: block; margin: 0; padding: 10px 11px; border: 0; border-radius: 9px; background: transparent; color: #4A2D20; font-family: inherit; font-size: 0.86rem; font-weight: 700; line-height: 1.2; text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none; } .language-selector__option:hover, .language-selector__option.is-active:hover { background: #FFF3D5; } .language-selector__option.is-active { background: transparent; font-weight: 900; } /* ========================================================== 09 — DESKTOP CTA ========================================================== */ .site-header__cta { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 19px; border: 0; border-radius: 999px; background: #F4CA55; color: #2F211B; font-size: 0.8rem; font-weight: 900; line-height: 1; white-space: nowrap; text-decoration: none; box-shadow: 0 8px 20px rgba(231, 185, 63, 0.2); transition: background 0.2s ease, transform 0.2s ease; } .site-header__cta:hover { background: #E7B93F; color: #2F211B; transform: translateY(-1px); } /* ========================================================== 10 — MOBILE MENU BUTTON HIDDEN ON DESKTOP ========================================================== */ .mobile-menu-button { width: 42px; height: 42px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; margin: 0; padding: 0; border: 1px solid #E8DCD3; border-radius: 50%; background: #FFFFFF; cursor: pointer; appearance: none; -webkit-appearance: none; } .mobile-menu-button__line { width: 18px; height: 2px; display: block; border-radius: 999px; background: #4A2D20; transition: transform 0.25s ease, opacity 0.25s ease; } .mobile-menu-button.is-open .mobile-menu-button__line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-menu-button.is-open .mobile-menu-button__line:nth-child(2) { opacity: 0; } .mobile-menu-button.is-open .mobile-menu-button__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================== 11 — MOBILE OVERLAY ========================================================== */ .mobile-menu-overlay { position: fixed; inset: 0; z-index: 1000; visibility: hidden; background: rgba(47, 33, 27, 0.42); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } .mobile-menu-overlay.is-visible { visibility: visible; opacity: 1; pointer-events: auto; } /* ========================================================== 12 — MEDIUM DESKTOP ========================================================== */ @media (max-width: 1240px) and (min-width: 1101px) { .site-header__container { gap: 16px; } .site-header__brand-group { gap: 12px; } .site-navigation__list { gap: 14px; } .site-navigation__link { font-size: 0.72rem; } .site-header__phone { font-size: 0.75rem; } .site-header__cta { padding-inline: 14px; font-size: 0.72rem; } } /* ========================================================== 13 — MOBILE / TABLET ========================================================== */ @media (max-width: 1100px) { /* HEADER */ .site-header { position: sticky; top: 0; z-index: 1100; background: #FFF9F2; /* IMPORTANT: backdrop-filter creates a containing block and breaks the fixed mobile navigation drawer. */ backdrop-filter: none; -webkit-backdrop-filter: none; } .site-header__container { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* BRAND */ .site-header__brand-group { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: 0; } .site-header__logo { flex-shrink: 0; } .site-header__logo-image { width: 48px; height: 24px; margin: 0; } .site-header__business-name { font-size: 0.76rem; } .site-header__business-type { margin-top: 2px; font-size: 0.45rem; letter-spacing: 0.07em; } /* DESKTOP PHONE OFF */ .site-header__phone { display: none; } /* DESKTOP CTA OFF */ .site-header__cta { display: none; } /* HEADER ACTIONS */ .site-header__actions { display: flex; align-items: center; gap: 7px; margin-left: auto; } /* LANGUAGE */ .language-selector__button { min-width: 60px; min-height: 40px; gap: 5px; padding: 0 9px; font-size: 0.76rem; } .language-selector__menu { top: calc(100% + 8px); right: 0; min-width: 150px; } /* HAMBURGER ON */ .mobile-menu-button { width: 40px; height: 40px; display: flex; } /* ====================================================== MOBILE DRAWER ====================================================== */ .site-navigation { position: fixed; top: 72px; right: 0; bottom: 0; left: auto; z-index: 1050; width: min(330px, 88vw); display: flex; flex-direction: column; align-items: stretch; margin: 0; padding: 22px 22px 28px; overflow-x: hidden; overflow-y: auto; background: #FFF9F2; box-shadow: -18px 0 45px rgba(74, 45, 32, 0.18); transform: translateX(105%); transition: transform 0.28s ease; } .site-navigation.is-open { transform: translateX(0); } /* NAV LINKS */ .site-navigation__list { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 0; } .site-navigation__item { width: 100%; } .site-navigation__link { width: 100%; display: flex; align-items: center; padding: 14px 4px; font-size: 0.98rem; white-space: normal; } .site-navigation__link::after { left: 4px; right: auto; bottom: 4px; width: 30px; } /* ====================================================== MOBILE CONTACT ====================================================== */ .site-navigation__mobile-contact { width: 100%; display: flex; flex-direction: column; gap: 11px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #E8DCD3; color: #725E55; font-size: 0.82rem; } .site-navigation__mobile-phone, .site-navigation__mobile-city { width: 100%; display: flex; align-items: center; gap: 8px; } .site-navigation__mobile-phone { color: #4A2D20; font-weight: 900; text-decoration: none; } .site-navigation__mobile-contact i { width: 15px; color: #568A62; text-align: center; } /* MOBILE CTA */ .site-navigation__mobile-cta { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; margin-top: 7px; padding: 0 14px; border-radius: 999px; background: #F4CA55; color: #2F211B; font-size: 0.83rem; font-weight: 900; text-align: center; text-decoration: none; } } /* ========================================================== 14 — SMALL MOBILE ========================================================== */ @media (max-width: 480px) { .site-header__container { min-height: 68px; } .site-header__logo-image { width: 44px; height: 22px; } .site-header__business-name { font-size: 0.72rem; } .site-header__business-type { font-size: 0.42rem; } .site-navigation { top: 68px; width: min(310px, 90vw); } .language-selector__button { min-width: 56px; padding-inline: 8px; } }