/* * Gia Đình Hạnh Phúc — art-directed/locked presentation package. * Visual metaphor: a soft, warm family garden with layered pastel note cards. */ .world-family-happy { --family-orange: #ad5944; --family-orange-dark: #824334; --family-green: #6f795b; --family-green-dark: #505941; --family-yellow: #c89f66; --family-pink: #d7a9ad; --family-blue: #aebfc2; --family-mint: #dce3cf; --family-butter: #ead9b9; --family-cream: #fbf6ef; --family-paper: #fffdf9; --family-ink: #3f3a34; --family-muted: #6f6961; --family-line: #ded3c6; --family-shadow: 0 1.15rem 2.8rem rgb(86 72 58 / 10%); --family-shadow-small: 0 .7rem 1.6rem rgb(86 72 58 / 8%); --family-radius-sm: .8rem; --family-radius-md: 1.35rem; --family-radius-lg: 2.5rem; /* Keep adjacent story panels visually connected instead of stacking two oversized 6.5rem gutters at every section boundary. */ --public-section-space: clamp(2.5rem, 3.5vw, 3.25rem); --public-section-space-hero: clamp(2.75rem, 4vw, 3.75rem); --public-heading-gap: clamp(1.35rem, 2.4vw, 2rem); color: var(--family-ink); background: var(--family-cream); } .world-family-happy :is(h1, h2, h3, h4) { color: var(--family-ink); font-weight: 900; letter-spacing: -.025em; } .world-family-happy .world-ribbon { height: .3rem; background: var(--family-orange); } .world-family-happy .world-ribbon span:first-child { background: var(--family-yellow); } .world-family-happy .world-ribbon span:nth-child(2) { background: var(--family-green); } .world-family-happy .world-ribbon span:last-child { background: var(--family-orange); } .world-family-happy .world-header { border-bottom: 0; background: rgb(251 246 239 / 96%); box-shadow: none; } .world-family-happy .world-header.is-scrolled { background: rgb(255 253 249 / 97%); box-shadow: 0 .7rem 2rem rgb(79 65 52 / 8%); } .world-family-happy .world-header__inner { min-height: 5.6rem; } .world-family-happy .world-brand__mark { border: 1px solid #e5d7c5; border-radius: 1.1rem; background: var(--family-paper); box-shadow: 0 .3rem 0 var(--family-yellow); } .world-family-happy .world-brand__text strong { color: var(--family-ink); } .world-family-happy .world-nav > a:not(.world-button)::after { bottom: .25rem; height: .22rem; background: var(--family-orange); } .world-family-happy .world-nav > a.is-active:not(.world-button) { color: var(--family-orange-dark); } .world-family-happy :is(.world-button, .world-newsletter button, .world-floating-contact) { border-color: var(--family-orange); color: #fff; background: var(--family-orange); } .world-family-happy .world-button { box-shadow: 0 .45rem 0 var(--family-orange-dark); } .world-family-happy .world-button:hover { box-shadow: 0 .2rem 0 var(--family-orange-dark); transform: translateY(.18rem); } .world-family-happy .world-nav-toggle { border-color: #dfd2c2; background: var(--family-paper); box-shadow: var(--family-shadow-small); } .world-family-happy .world-nav-toggle > span:not(.world-sr-only) { background: var(--family-ink); } .world-family-happy .family-container { width: min(72rem, calc(100% - 2.5rem)); margin-inline: auto; } .world-family-happy .family-section { position: relative; } .world-family-happy .family-section--compact { --public-section-space: clamp(1.75rem, 2.5vw, 2.25rem); } .world-family-happy .family-section--cream { background: #faf2e7; } .world-family-happy .family-section--mint { background: #f1f3e9; } .world-family-happy .family-section--butter { background: #f8f0e2; } .world-family-happy .family-heading { max-width: 47rem; margin-inline: auto; text-align: center; } .world-family-happy .family-heading--compact { max-width: 39rem; } .world-family-happy .family-heading--left { margin-inline: 0; text-align: left; } .world-family-happy .family-heading--split { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 2rem; text-align: left; } .world-family-happy .family-heading--split > div { max-width: 44rem; } .world-family-happy .family-heading--split > p { max-width: 28rem; margin: 0; color: var(--family-muted); } .world-family-happy .family-heading > p, .world-family-happy .family-copy > p { color: var(--family-muted); } .world-family-happy .family-kicker { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: .85rem; color: var(--family-orange-dark); font-size: .76rem; font-weight: 900; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; } .world-family-happy .family-kicker::before { width: 1.25rem; height: .16rem; border-radius: 999px; background: currentColor; content: ""; } .world-family-happy .family-kicker--filled { padding: .55rem .8rem; border-radius: .35rem; color: #fff; background: var(--family-orange); letter-spacing: .06em; } .world-family-happy .family-kicker--filled::before { display: none; } .world-family-happy .family-kicker--light { color: #f8eadb; } .world-family-happy .family-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; } .world-family-happy .family-actions--center { justify-content: center; } .world-family-happy .family-button { display: inline-flex; min-height: 3.15rem; align-items: center; justify-content: center; padding: .8rem 1.35rem; border: 2px solid var(--family-orange); border-radius: .45rem; color: #fff; background: var(--family-orange); box-shadow: 0 .35rem 0 var(--family-orange-dark); font-weight: 900; line-height: 1.15; text-align: center; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .world-family-happy .family-button:hover { box-shadow: 0 .15rem 0 var(--family-orange-dark); transform: translateY(.2rem); } .world-family-happy .family-button--outline { color: var(--family-orange-dark); background: var(--family-paper); box-shadow: none; } .world-family-happy .family-button--small { min-height: 2.7rem; padding: .6rem 1rem; font-size: .87rem; } .world-family-happy .family-button--full { width: 100%; } .world-family-happy .family-text-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--family-orange-dark); font-weight: 900; text-decoration-color: var(--family-yellow); text-decoration-thickness: .18rem; } .world-family-happy .family-text-link span { transition: transform .2s ease; } .world-family-happy .family-text-link:hover span { transform: translateX(.25rem); } .world-family-happy :is(.family-honeypot, .family-sr-only) { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* Reference-led home hero: centered copy with original characters on both sides. */ .world-family-happy .family-hero { position: relative; width: 100%; min-height: 34rem; color: var(--family-ink); background: #fbf3e8; isolation: isolate; overflow: clip; } .world-family-happy .family-hero::after { position: absolute; right: -4%; bottom: -1.2rem; left: -4%; height: 2.5rem; border-radius: 50% 50% 0 0; background: #fff; content: ""; } .world-family-happy .family-hero__scene { position: absolute; z-index: -1; bottom: 0; left: 0; display: block; width: 100%; height: auto; max-width: none; } .world-family-happy .family-hero__scene > img { display: block; width: 100%; height: auto; max-width: none; filter: saturate(.74) sepia(.06); } .world-family-happy .family-hero__content { display: grid; max-width: 46rem; min-height: 29rem; align-content: center; justify-items: center; padding-block: 2.5rem 4rem; text-align: center; } .world-family-happy .family-hero h1 { max-width: 42rem; margin-bottom: 1rem; font-size: clamp(2.5rem, 5.2vw, 4.8rem) !important; } .world-family-happy .family-hero h1 em { color: var(--family-orange); font-style: normal; } .world-family-happy .family-hero__content > p { max-width: 40rem; color: #625d56; font-size: 1.04rem; } .world-family-happy .family-hero__content .family-actions { margin-top: 1rem; } .world-family-happy .family-hero__sparkles span { position: absolute; z-index: -1; font-weight: 900; } .world-family-happy .family-hero__sparkles span:nth-child(1) { top: 10%; left: 15%; color: var(--family-orange); } .world-family-happy .family-hero__sparkles span:nth-child(2) { top: 18%; right: 17%; color: var(--family-green); font-size: 1.5rem; } .world-family-happy .family-hero__sparkles span:nth-child(3) { top: 35%; left: 46%; color: #957888; } .world-family-happy .family-hero__sparkles span:nth-child(4) { right: 43%; bottom: 14%; color: var(--family-blue); } /* Programs mimic the reference image: image first, pastel note overlapping below. */ .world-family-happy .family-programs { background: var(--family-paper); } .world-family-happy .family-filter-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem; margin: 0 0 2rem; } .world-family-happy .family-filter-pills a { padding: .35rem .2rem; color: #555149; font-size: .86rem; font-weight: 800; text-decoration: none; } .world-family-happy .family-filter-pills a:is(:hover, .is-current) { color: var(--family-orange-dark); text-decoration: underline; text-decoration-color: var(--family-yellow); text-decoration-thickness: .18rem; } .world-family-happy .family-program-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem 1.35rem; } .world-family-happy .family-program-grid--compact { gap: 2rem 1.35rem; } .world-family-happy .family-program-card { position: relative; display: flex; min-width: 0; flex-direction: column; scroll-margin-top: 7rem; } .world-family-happy .family-program-card > img { width: 100%; aspect-ratio: 1.15 / 1; border-radius: 1rem; object-fit: cover; filter: saturate(.78) sepia(.05); box-shadow: var(--family-shadow-small); } .world-family-happy .family-program-card__note { --card-note: var(--family-butter); position: relative; width: calc(100% - 1.35rem); min-height: 19.5rem; padding: 2.2rem 1.3rem 1.25rem; margin: -4.2rem 0 0 auto; border-radius: 1.6rem .55rem 1.6rem .55rem; background: var(--card-note); box-shadow: 0 .55rem 1.1rem rgb(73 66 43 / 10%); } .world-family-happy .family-program-card__note::before { position: absolute; top: 1.7rem; left: .75rem; display: grid; gap: .78rem; color: rgb(255 255 255 / 88%); font-size: .55rem; line-height: 1; content: "●\A ●\A ●\A ●"; white-space: pre; } .world-family-happy .family-program-card--sun .family-program-card__note { --card-note: #ead6ae; } .world-family-happy .family-program-card--leaf .family-program-card__note { --card-note: #dce2c9; } .world-family-happy .family-program-card--rose .family-program-card__note { --card-note: #ead1d2; } .world-family-happy .family-program-card--sky .family-program-card__note { --card-note: #d8e1e2; } .world-family-happy .family-program-card--butter .family-program-card__note { --card-note: #ecdbb9; } .world-family-happy .family-program-card--mint .family-program-card__note { --card-note: #e0e6d3; } .world-family-happy .family-program-card__note small { display: table; padding: .32rem .65rem; margin: -3.1rem auto 1.15rem; border-radius: .2rem; color: #3f4437; background: color-mix(in srgb, var(--card-note) 78%, #7f8768); font-size: .7rem; font-weight: 900; } .world-family-happy .family-program-card__note h3 { margin-bottom: .55rem; font-size: 1.35rem; } .world-family-happy .family-program-card__note p { color: #5e5952; font-size: .9rem; line-height: 1.55; } .world-family-happy .family-program-card__note ul { display: grid; gap: .35rem; padding: .75rem 0 0; margin: .75rem 0 0; border-top: 1px solid rgb(69 71 55 / 15%); list-style: none; font-size: .8rem; font-weight: 750; } .world-family-happy .family-program-card__note li::before { margin-right: .45rem; color: #fff; content: "●"; } .world-family-happy .family-program-card__note > a { position: absolute; bottom: -.8rem; left: 1.2rem; display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border: 3px solid #fff; border-radius: .45rem; color: #fff; background: var(--family-orange); box-shadow: 0 .35rem .7rem rgb(75 61 32 / 16%); font-size: 1.35rem; font-weight: 900; text-decoration: none; } .world-family-happy .family-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); } .world-family-happy .family-split--reverse > :first-child { order: 2; } .world-family-happy .family-split__art { position: relative; margin: 0; } .world-family-happy .family-split__art > img { width: 100%; max-height: 34rem; border: .5rem solid var(--family-paper); border-radius: 1.1rem 3.8rem 1.1rem 3.8rem; background: var(--family-paper); filter: saturate(.78) sepia(.05); box-shadow: var(--family-shadow); object-fit: cover; } .world-family-happy .family-split__art figcaption { position: absolute; right: -.5rem; bottom: 1.2rem; display: grid; max-width: 15rem; padding: .75rem 1rem; border-radius: .65rem; color: #31372f; background: var(--family-yellow); box-shadow: .4rem .4rem 0 #fff; rotate: 2deg; } .world-family-happy .family-split__art figcaption span { font-size: .76rem; } .world-family-happy .family-copy h2 { margin-bottom: 1rem; } .world-family-happy .family-copy blockquote { padding: 1.1rem 1.25rem; margin: 1.4rem 0; border-left: .35rem solid var(--family-orange); border-radius: 0 1rem 1rem 0; color: #5d584d; background: #f4e9d5; font-size: 1.02rem; font-style: italic; } .world-family-happy .family-promises { background: linear-gradient(135deg, #f2f3ea, #faf5eb); } .world-family-happy .family-promise-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .world-family-happy .family-promise-grid article { padding: 1.45rem; border: 1px solid #e2d8ca; border-radius: 1.2rem; background: var(--family-paper); box-shadow: var(--family-shadow-small); } .world-family-happy .family-promise-grid article:nth-child(2) { background: #f2e6cd; } .world-family-happy .family-promise-grid article:nth-child(3) { background: #e7ebdc; } .world-family-happy .family-promise-grid article:nth-child(4) { background: #eee0e0; } .world-family-happy .family-promise-grid article > span { display: grid; width: 2.8rem; height: 2.8rem; margin-bottom: 1rem; place-items: center; border-radius: 50%; color: #fff; background: var(--family-orange); font-size: 1.25rem; } .world-family-happy .family-promise-grid h3 { font-size: 1.12rem; } .world-family-happy .family-promise-grid p { margin: 0; color: var(--family-muted); font-size: .88rem; } /* Reusable interior-page hero. */ .world-family-happy .family-page-hero { position: relative; background: #f4ebdf; isolation: isolate; overflow: clip; } .world-family-happy .family-page-hero::before { position: absolute; z-index: -1; inset: 0; background: repeating-conic-gradient(from 0deg at 20% 80%, rgb(255 255 255 / 36%) 0 8deg, transparent 8deg 20deg); content: ""; opacity: .65; } .world-family-happy .family-page-hero--about { background: #eef0e4; } .world-family-happy .family-page-hero--admissions { background: #f7eee1; } .world-family-happy .family-page-hero--news { background: #f3e8e7; } .world-family-happy .family-page-hero--recruitment { background: #edf0e6; } .world-family-happy .family-page-hero--contact { background: #e9efeb; } .world-family-happy .family-page-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .75fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); } .world-family-happy .family-page-hero h1 em { color: var(--family-orange); font-style: normal; } .world-family-happy .family-page-hero p { max-width: 43rem; color: #69635c; } .world-family-happy .family-page-hero .family-actions { margin-top: 1.4rem; } .world-family-happy .family-page-hero__art { position: relative; margin: 0; } .world-family-happy .family-page-hero__art::before { position: absolute; inset: 9% -5% -4% 9%; z-index: -1; border-radius: 2rem; background: var(--family-yellow); content: ""; rotate: 3deg; } .world-family-happy .family-page-hero__art > img { width: 100%; max-height: 27rem; border: .55rem solid var(--family-paper); border-radius: 1.1rem 3.5rem 1.1rem 3.5rem; background: var(--family-paper); filter: saturate(.78) sepia(.05); box-shadow: var(--family-shadow); object-fit: cover; } .world-family-happy .family-breadcrumbs { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.15rem; color: #68625b; font-size: .82rem; } .world-family-happy .family-breadcrumbs a { color: var(--family-orange-dark); font-weight: 850; } .world-family-happy :is(.family-value-grid, .family-space-grid, .family-job-grid, .family-contact-cards__grid) { display: grid; gap: 1.15rem; } .world-family-happy .family-value-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .world-family-happy .family-space-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .world-family-happy .family-job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62rem; margin-inline: auto; } .world-family-happy .family-contact-cards__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .world-family-happy .family-color-card { position: relative; padding: 1.5rem; border: 0; border-radius: 1.25rem .5rem 1.25rem .5rem; background: var(--family-paper); box-shadow: var(--family-shadow-small); } .world-family-happy .family-color-card:nth-child(even) { border-radius: .5rem 1.25rem .5rem 1.25rem; } .world-family-happy .family-color-card--sun { background: #ead8b7; } .world-family-happy .family-color-card--leaf { background: #dfe4d1; } .world-family-happy .family-color-card--rose { background: #ead4d5; } .world-family-happy .family-color-card--sky { background: #d8e1e2; } .world-family-happy .family-color-card > span { display: grid; width: 2.8rem; height: 2.8rem; margin-bottom: 1rem; place-items: center; border-radius: .55rem; color: #fff; background: var(--family-orange); font-weight: 900; } .world-family-happy .family-color-card :is(p, li, i) { color: #5e5952; } .world-family-happy .family-color-card small { color: #59604a; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; } .world-family-happy .family-color-card ul { padding-left: 1.1rem; } .world-family-happy .family-color-card a { color: var(--family-orange-dark); font-weight: 900; } .world-family-happy .family-accordion { display: grid; gap: .7rem; } .world-family-happy .family-accordion article { overflow: hidden; border: 1px solid #d8cec2; border-radius: .9rem; background: var(--family-paper); } .world-family-happy .family-accordion button { display: flex; width: 100%; min-height: 3.2rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border: 0; color: var(--family-ink); background: transparent; font-weight: 900; text-align: left; cursor: pointer; } .world-family-happy .family-accordion button b { display: grid; width: 1.8rem; height: 1.8rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--family-orange); transition: transform .2s ease; } .world-family-happy .family-accordion article.is-open { border-color: #c3a67a; box-shadow: .3rem .35rem 0 #f1e5cf; } .world-family-happy .family-accordion article.is-open button b { transform: rotate(45deg); } .world-family-happy .family-accordion article > div { padding: 0 1rem 1rem; color: var(--family-muted); } .world-family-happy .family-accordion article > div p { margin: 0; } .world-family-happy .family-culture-list { display: grid; gap: .75rem; margin-top: 1.4rem; } .world-family-happy .family-culture-list article { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem; border-radius: 1rem; background: #f8f0e6; } .world-family-happy .family-culture-list article > span { display: grid; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--family-green); } .world-family-happy .family-culture-list h3 { margin-bottom: .25rem; font-size: 1rem; } .world-family-happy .family-culture-list p { margin: 0; color: var(--family-muted); font-size: .86rem; } .world-family-happy .family-process__line { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 0; list-style: none; } .world-family-happy .family-process__line::before { position: absolute; top: 1.7rem; right: 8%; left: 8%; border-top: .2rem dashed #bda882; content: ""; } .world-family-happy .family-process__line li { position: relative; z-index: 1; padding: 1.2rem; border-radius: 1rem; background: var(--family-paper); box-shadow: var(--family-shadow-small); } .world-family-happy .family-process__line li > span { display: grid; width: 3.2rem; height: 3.2rem; margin-bottom: 1rem; place-items: center; border: .35rem solid #eef0e7; border-radius: 50%; color: #fff; background: var(--family-orange); font-weight: 900; } .world-family-happy .family-process__line h3 { font-size: 1.06rem; } .world-family-happy .family-process__line p { margin: 0; color: var(--family-muted); font-size: .86rem; } .world-family-happy .family-document-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); } .world-family-happy .family-document-list { display: grid; gap: .7rem; padding: 0; margin: 0; list-style: none; } .world-family-happy .family-document-list li { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: .8rem; background: var(--family-paper); box-shadow: var(--family-shadow-small); } .world-family-happy .family-document-list b { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; place-items: center; border-radius: .5rem; color: #fff; background: var(--family-green); } /* Forms and contact panels. */ .world-family-happy :is(.family-invitation, .family-admission-form, .family-recruit-form, .family-general-request) { color: #fff; background: linear-gradient(135deg, #8f5747, #6f7457 54%, #756449); } .world-family-happy :is(.family-invitation, .family-admission-form, .family-recruit-form, .family-general-request) :is(h2, h3) { color: #fff; } .world-family-happy .family-form-layout { display: grid; grid-template-columns: minmax(17rem, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); } .world-family-happy .family-form-layout__copy > p { color: #f8efe7; } .world-family-happy .family-form-layout__copy > img { width: min(100%, 21rem); max-height: 14rem; margin-top: 1rem; border-radius: 1rem 3rem 1rem 3rem; filter: saturate(.78) sepia(.05); object-fit: cover; } .world-family-happy .family-form-layout__copy > ul { display: grid; gap: .55rem; padding: 0; list-style: none; } .world-family-happy .family-direct-contact { padding: .7rem .85rem; border-radius: .7rem; color: #fff !important; background: rgb(255 255 255 / 14%); } .world-family-happy .family-direct-contact a { color: #fff; font-weight: 900; } .world-family-happy .family-form { padding: clamp(1.25rem, 3vw, 2rem); border: 0; border-radius: 1.25rem; color: var(--family-ink); background: var(--family-paper); box-shadow: var(--family-shadow); } .world-family-happy .family-form__heading { margin-bottom: 1.2rem; } .world-family-happy .family-form__heading small { color: var(--family-orange-dark); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .world-family-happy .family-form__heading h2 { margin: .3rem 0 0; color: var(--family-ink) !important; font-size: 1.55rem !important; } .world-family-happy .family-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; } .world-family-happy .family-form label:not(.family-consent) { display: grid; gap: .35rem; min-width: 0; font-size: .86rem; font-weight: 800; } .world-family-happy .family-field--full { grid-column: 1 / -1; } .world-family-happy .family-form :is(input, select, textarea) { width: 100%; min-width: 0; padding: .75rem .85rem; border: 1px solid #d8ccbe; border-radius: .55rem; color: var(--family-ink); background: #fffcf7; } .world-family-happy .family-form :is(input, select) { min-height: 3rem; } .world-family-happy .family-form textarea { resize: vertical; } .world-family-happy .family-form :is(input, select, textarea):focus { border-color: var(--family-orange); outline: .2rem solid rgb(173 89 68 / 18%); outline-offset: 0; } .world-family-happy .family-consent { display: flex; align-items: flex-start; gap: .65rem; margin: 1rem 0; color: #625d56; } .world-family-happy .family-consent input { width: 1.1rem; min-height: 1.1rem; flex: 0 0 auto; margin-top: .2rem; accent-color: var(--family-orange); } .world-family-happy .family-faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(2rem, 5vw, 4rem); } .world-family-happy .family-contact-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr); align-items: start; gap: 1.5rem; } .world-family-happy .family-contact-side { padding: 1.3rem; border-radius: 1.2rem; background: var(--family-paper); box-shadow: var(--family-shadow-small); } .world-family-happy .family-contact-side img { width: 100%; aspect-ratio: 1.25 / 1; margin-bottom: 1.2rem; border-radius: .8rem 2rem .8rem 2rem; filter: saturate(.78) sepia(.05); object-fit: cover; } .world-family-happy .family-contact-side ul { padding-left: 1.15rem; color: var(--family-muted); } .world-family-happy .family-map { padding-block: 3rem; background: #eef1e7; } .world-family-happy .family-map__heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; } .world-family-happy .family-map__heading p { max-width: 28rem; margin: 0; color: var(--family-muted); text-align: right; } .world-family-happy .family-map__frame { width: min(72rem, calc(100% - 2.5rem)); margin-inline: auto; border: .5rem solid #fff; border-radius: 1.2rem; box-shadow: var(--family-shadow); overflow: hidden; } .world-family-happy .family-map iframe { display: block; width: 100%; min-height: 28rem; border: 0; } /* News cards continue the layered-card motif. */ .world-family-happy .family-news-tools { position: relative; z-index: 2; padding-block: 1.15rem; background: var(--family-paper); box-shadow: 0 .6rem 1.5rem rgb(86 72 58 / 7%); } .world-family-happy .family-news-tools form { display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(12rem, .6fr) auto auto; align-items: center; gap: .75rem; } .world-family-happy .family-news-search { position: relative; } .world-family-happy .family-news-search > span:not(.family-sr-only) { position: absolute; top: 50%; left: .85rem; transform: translateY(-50%); } .world-family-happy .family-news-tools :is(input, select) { width: 100%; min-height: 3.05rem; padding: .7rem .9rem; border: 1px solid #d9ccbc; border-radius: .55rem; background: #fffcf7; } .world-family-happy .family-news-search input { padding-left: 2.3rem; } .world-family-happy .family-featured-story { background: var(--family-paper); } .world-family-happy .family-featured-story__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); } .world-family-happy .family-featured-story__art { position: relative; display: block; } .world-family-happy .family-featured-story__art img { width: 100%; aspect-ratio: 16 / 10; border: .55rem solid var(--family-paper); border-radius: 1rem 3rem 1rem 3rem; box-shadow: .7rem .75rem 0 var(--family-mint); object-fit: cover; } .world-family-happy .family-featured-story__art span { position: absolute; right: 1rem; bottom: 1rem; padding: .4rem .7rem; border-radius: .35rem; color: #fff; background: var(--family-orange); font-size: .72rem; font-weight: 900; } .world-family-happy .family-featured-story time { color: var(--family-muted); font-size: .82rem; } .world-family-happy .family-featured-story h2 a { text-decoration: none; } .world-family-happy .family-featured-story p { color: var(--family-muted); } .world-family-happy .family-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.35rem; } .world-family-happy .family-news-card { overflow: hidden; border: .45rem solid var(--family-paper); border-radius: 1rem 2.5rem 1rem 2.5rem; background: var(--family-paper); box-shadow: 0 .55rem 0 #d6ddc7, var(--family-shadow-small); } .world-family-happy .family-news-card--tone-2 { box-shadow: 0 .55rem 0 #e3c8ca, var(--family-shadow-small); } .world-family-happy .family-news-card--tone-3 { box-shadow: 0 .55rem 0 #ccd9da, var(--family-shadow-small); } .world-family-happy .family-news-card__image { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .65rem 2rem .65rem 1.4rem; } .world-family-happy .family-news-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .world-family-happy .family-news-card:hover .family-news-card__image img { transform: scale(1.035); } .world-family-happy .family-news-card__image span { position: absolute; right: .7rem; bottom: .7rem; padding: .35rem .6rem; border-radius: .3rem; color: #fff; background: var(--family-orange); font-size: .68rem; font-weight: 900; } .world-family-happy .family-news-card__body { padding: 1.25rem; } .world-family-happy .family-news-card__body time { color: var(--family-muted); font-size: .78rem; } .world-family-happy .family-news-card__body h3 { margin-top: .45rem; font-size: 1.15rem; } .world-family-happy .family-news-card__body h3 a { text-decoration: none; } .world-family-happy .family-news-card__body p { color: var(--family-muted); font-size: .88rem; } .world-family-happy .family-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: 2rem; } .world-family-happy .family-pagination a { display: grid; min-width: 2.8rem; min-height: 2.8rem; place-items: center; border: 1px solid #d9ccbb; border-radius: .45rem; background: var(--family-paper); text-decoration: none; } .world-family-happy .family-pagination a.is-current { border-color: var(--family-orange); color: #fff; background: var(--family-orange); } .world-family-happy .family-empty { max-width: 34rem; padding: 2rem; margin-inline: auto; border-radius: 1.2rem; background: var(--family-paper); box-shadow: var(--family-shadow-small); text-align: center; } .world-family-happy .family-empty img { width: min(100%, 18rem); margin-inline: auto; } /* Article, policy and error views use the same warm page grammar. */ .world-family-happy .family-article__header { padding-block: clamp(3.5rem, 7vw, 6rem); background: #f4ebdf; } .world-family-happy .family-article__heading { max-width: 54rem; text-align: center; } .world-family-happy .family-article__heading .family-breadcrumbs { justify-content: center; } .world-family-happy .family-article__heading > p { margin-inline: auto; color: var(--family-muted); } .world-family-happy .family-article__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; color: var(--family-muted); font-size: .82rem; } .world-family-happy .family-article__cover { margin-top: -2.5rem; } .world-family-happy .family-article__cover img { width: 100%; max-height: 42rem; border: .6rem solid var(--family-paper); border-radius: 1rem 3.5rem 1rem 3.5rem; box-shadow: .7rem .75rem 0 var(--family-mint); object-fit: cover; } .world-family-happy .family-article__layout { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(14rem, .35fr); align-items: start; gap: 2rem; padding-block: 4rem; } .world-family-happy .family-share { position: sticky; top: 7rem; display: grid; justify-items: center; gap: .5rem; font-size: .72rem; font-weight: 900; } .world-family-happy .family-share :is(a, button) { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border: 0; border-radius: 50%; color: #fff; background: var(--family-orange); text-decoration: none; cursor: pointer; } .world-family-happy .family-article__aside { position: sticky; top: 7rem; } .world-family-happy .family-article__aside > div { padding: 1.25rem; border-radius: 1rem; background: #eef1e7; box-shadow: var(--family-shadow-small); } .world-family-happy .family-article__aside img { width: 4.5rem; height: 4.5rem; margin-bottom: 1rem; border-radius: .8rem; object-fit: contain; } .world-family-happy .family-article__aside p { color: var(--family-muted); font-size: .86rem; } .world-family-happy .family-prose { width: 100%; max-width: 72ch; } .world-family-happy .family-prose > * + * { margin-top: 1em; } .world-family-happy .family-prose :is(img, figure img) { max-width: 100%; border-radius: 1rem; } .world-family-happy .family-prose blockquote { padding: 1rem 1.2rem; border-left: .35rem solid var(--family-orange); background: #f5ead8; } .world-family-happy .family-policy { padding: 2rem; border-radius: 1.2rem; background: var(--family-paper); box-shadow: var(--family-shadow-small); } .world-family-happy .family-page-hero--compact { background: #f4ebdf; } .world-family-happy .family-page-hero--compact .family-container { max-width: 54rem; text-align: center; } .world-family-happy .family-page-hero--compact .family-breadcrumbs { justify-content: center; } .world-family-happy .family-not-found { min-height: 66vh; display: grid; place-items: center; background: #f4ebdf; text-align: center; } .world-family-happy .family-not-found img { width: min(100%, 23rem); margin-inline: auto; } .world-family-happy .family-not-found p { color: var(--family-muted); } .world-family-happy .family-not-found .family-actions { justify-content: center; } /* Global CTA and garden footer echo the reference without copying its assets. */ .world-family-happy .world-global-cta { border-block: .35rem solid var(--family-paper); color: var(--family-ink); background: linear-gradient(120deg, #ead9b9, #ead1d2 52%, #dce3cf); } .world-family-happy .world-global-cta::before, .world-family-happy .world-global-cta::after { display: none; } .world-family-happy .world-global-cta p:not(.world-eyebrow) { color: #625d56; } .world-family-happy .world-global-cta .world-button--ghost { border-color: var(--family-orange); color: var(--family-orange-dark); background: var(--family-paper); box-shadow: none; } .world-family-happy .world-footer { position: relative; padding-top: clamp(5rem, 9vw, 7rem); color: #5f6258; background: var(--family-cream); overflow: clip; } .world-family-happy .world-footer::before { position: absolute; inset: 0 0 auto; height: 4.5rem; background: repeating-linear-gradient(78deg, transparent 0 18px, #88956f 19px 27px, transparent 28px 42px), linear-gradient(transparent 0 56%, #88956f 57%); content: ""; } .world-family-happy .world-footer::after { position: absolute; right: 2%; bottom: 2rem; width: 8rem; height: 8rem; border: 1rem solid var(--family-yellow); border-radius: 48% 52% 45% 55%; box-shadow: -7rem 1rem 0 -2.4rem var(--family-pink), -13rem -.5rem 0 -3rem var(--family-blue); content: ""; opacity: .26; } .world-family-happy .world-footer h3, .world-family-happy .world-footer strong, .world-family-happy .world-footer a { color: #48433c; } .world-family-happy .world-footer__identity > p { color: var(--family-muted); } .world-family-happy .world-footer__bottom { border-color: #ddd1c3; } .world-family-happy .world-newsletter input { border-color: #dbcebf; background: var(--family-paper); } .world-family-happy .world-newsletter button { border-radius: 0 999px 999px 0; box-shadow: none; } /* Progressive enhancement: content stays visible even if JavaScript fails. */ .family-happy-ready .world-family-happy [data-family-reveal] { transform: translateY(1rem); transition: transform .55s ease; } .family-happy-ready .world-family-happy [data-family-reveal].is-visible { transform: none; } .world-family-happy :is(a, button, input, select, textarea):focus-visible { outline: 3px solid #6f382d; outline-offset: 3px; } @media (max-width: 68rem) { .world-family-happy .world-nav { border-color: #dfd2c3; background: #fffcf7; } .world-family-happy .family-program-grid, .world-family-happy .family-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .world-family-happy .family-value-grid, .world-family-happy .family-contact-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .world-family-happy .family-promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .world-family-happy .family-page-hero__grid, .world-family-happy .family-featured-story__grid, .world-family-happy .family-form-layout, .world-family-happy .family-contact-main, .world-family-happy .family-faq-grid { grid-template-columns: 1fr; } .world-family-happy .family-page-hero__art { width: min(100%, 30rem); justify-self: center; } .world-family-happy .family-form-layout__copy > img { display: none; } .world-family-happy .family-process__line { grid-template-columns: repeat(2, minmax(0, 1fr)); } .world-family-happy .family-process__line::before { display: none; } .world-family-happy .family-news-tools form { grid-template-columns: 1fr 1fr auto; } .world-family-happy .family-news-tools .family-text-link { grid-column: 1 / -1; } .world-family-happy .family-article__layout { grid-template-columns: auto minmax(0, 1fr); } .world-family-happy .family-article__aside { position: static; grid-column: 2; } } @media (max-width: 46rem) { .world-family-happy { --public-section-space: 2.5rem; --public-section-space-hero: 2.75rem; --public-heading-gap: 1.5rem; } .world-family-happy .family-container { width: min(calc(100% - 1.5rem), 72rem); } .world-family-happy .family-heading--split, .world-family-happy .family-map__heading { align-items: flex-start; flex-direction: column; } .world-family-happy .family-map__heading p { text-align: left; } .world-family-happy .family-hero { min-height: 42rem; } .world-family-happy .family-hero__content { min-height: 35rem; align-content: start; padding-top: 1rem; } .world-family-happy .family-hero__scene { bottom: 0; left: 50%; width: 50rem; transform: translateX(-50%); } .world-family-happy .family-hero__sparkles { display: none; } .world-family-happy .family-program-grid, .world-family-happy .family-news-grid, .world-family-happy .family-value-grid, .world-family-happy .family-space-grid, .world-family-happy .family-job-grid, .world-family-happy .family-contact-cards__grid, .world-family-happy .family-promise-grid, .world-family-happy .family-process__line, .world-family-happy .family-document-grid, .world-family-happy .family-split { grid-template-columns: 1fr; } .world-family-happy .family-split--reverse > :first-child { order: 0; } .world-family-happy .family-split__art figcaption { right: .5rem; } .world-family-happy .family-program-card__note { width: calc(100% - .7rem); margin-top: -3.4rem; } .world-family-happy .family-page-hero__grid { gap: 2.5rem; } .world-family-happy .family-page-hero__art { width: min(100%, 24rem); } .world-family-happy .family-form__grid { grid-template-columns: 1fr; } .world-family-happy .family-field--full { grid-column: auto; } .world-family-happy .family-news-tools form { grid-template-columns: 1fr; } .world-family-happy .family-news-tools .family-text-link { grid-column: auto; } .world-family-happy .family-article__layout { grid-template-columns: 1fr; padding-block: 3rem; } .world-family-happy .family-share { position: static; display: flex; align-items: center; justify-content: center; } .world-family-happy .family-article__aside { grid-column: auto; } .world-family-happy .family-map__frame { width: calc(100% - 1.5rem); } .world-family-happy .family-map iframe { min-height: 21rem; } } @media (prefers-reduced-motion: reduce) { .family-happy-ready .world-family-happy [data-family-reveal] { transform: none; transition: none; } .world-family-happy :is(.family-news-card__image img, .family-text-link span) { transition: none; } } @media (forced-colors: active) { .world-family-happy :is(.family-program-card__note, .family-color-card, .family-form, .family-news-card, .family-process__line li, .family-contact-side, .family-policy) { border: 1px solid CanvasText; box-shadow: none; } .world-family-happy :is(.family-button, .family-kicker--filled, .family-program-card__note > a) { border: 1px solid ButtonText; } }