/* ========================================================= BELAIR HILL JUNIOR SCHOOL HERO / HOMEPAGE DESIGN --------------------------------------------------------- Large cinematic hero photograph Elegant single-line school name Deep red + deep green typography Orange vertical signature line No horizontal signature line No text shadow ========================================================= */ /* ========================================================= HERO CONTAINER ========================================================= */ .bh-hero { position: relative; width: 100%; overflow: hidden; background: var(--cream, #fffaf6); } /* ========================================================= HERO PHOTO ========================================================= */ .bh-hero-photo { position: relative; width: 100%; min-height: 760px; overflow: hidden; background: #e8f7f8; } /* ========================================================= HERO IMAGE ========================================================= */ .bh-hero-image { display: block; width: 100%; height: 760px; object-fit: cover; object-position: center center; filter: saturate(1.03) contrast(1.02); } /* ========================================================= SCHOOL NAME --------------------------------------------------------- Positioned near the bottom of the hero photograph. BELAIR HILL - Deep bold red JUNIOR SCHOOL - Deep bold green Orange vertical line - Immediately before the B - Same visual height as the lettering ========================================================= */ .bh-hero-school-name { position: absolute; left: 5%; bottom: 5.5%; z-index: 5; display: flex; align-items: center; width: auto; max-width: none; margin: 0; padding: 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem, 3.5vw, 3.7rem); font-weight: 700; font-style: normal; line-height: 1; letter-spacing: -0.018em; white-space: nowrap; text-align: left; background: transparent; border: none; box-shadow: none; text-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ========================================================= ORANGE VERTICAL LINE --------------------------------------------------------- Immediately before the B in Belair Hill. ========================================================= */ .bh-hero-school-name::before { content: ""; display: block; width: 5px; height: 1em; margin-right: 15px; flex: 0 0 5px; background: #c66a32; border-radius: 0; } /* ========================================================= REMOVE OLD HORIZONTAL / GOLD ACCENT ========================================================= */ .bh-hero-school-name::after { content: none; } /* ========================================================= BELAIR HILL --------------------------------------------------------- Deep bold red. ========================================================= */ .bh-hero-school-name-main { display: inline; color: #9c2938; font-weight: 700; } /* ========================================================= JUNIOR SCHOOL --------------------------------------------------------- Deep bold green. ========================================================= */ .bh-hero-school-name-junior { display: inline; margin-left: 0.28em; color: #075b43; font-weight: 700; } /* ========================================================= FEATURED HERO UPDATE ========================================================= */ .bh-hero-featured-update { position: absolute; top: 28px; right: 28px; z-index: 10; width: min(390px, 38%); padding: 18px 20px 19px 21px; border-left: 4px solid rgba(214, 168, 79, 0.90); border-radius: 8px; background: rgba(4, 86, 97, 0.58); color: #ffffff; cursor: pointer; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; animation: bhHeroUpdateBlink 2.8s ease-in-out infinite; } /* ========================================================= HIDDEN STATE ========================================================= */ .bh-hero-featured-update[hidden] { display: none; } /* ========================================================= FEATURED UPDATE HOVER ========================================================= */ .bh-hero-featured-update:hover { transform: translateY(-2px); background: rgba(4, 86, 97, 0.68); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.20); } /* ========================================================= KEYBOARD FOCUS ========================================================= */ .bh-hero-featured-update:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; } /* ========================================================= FEATURED UPDATE LABEL ========================================================= */ .bh-hero-featured-update-label { display: block; margin-bottom: 6px; color: #ffe7a3; font-family: "DM Sans", Arial, sans-serif; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; line-height: 1.3; text-transform: uppercase; } /* ========================================================= FEATURED UPDATE TITLE ========================================================= */ .bh-hero-featured-update-title { display: block; color: #ffffff; font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 700; line-height: 1.2; } /* ========================================================= FEATURED UPDATE SUMMARY ========================================================= */ .bh-hero-featured-update-summary { display: block; margin-top: 8px; color: rgba(255, 255, 255, 0.94); font-family: "DM Sans", Arial, sans-serif; font-size: clamp(0.82rem, 1.2vw, 0.94rem); font-weight: 400; line-height: 1.55; } /* ========================================================= FEATURED UPDATE BLINK / PULSE ========================================================= */ @keyframes bhHeroUpdateBlink { 0%, 100% { opacity: 1; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); } 50% { opacity: 0.84; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16), 0 0 0 7px rgba(214, 168, 79, 0.13); } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .bh-hero-featured-update { animation: none; } } /* ========================================================= HERO CONTENT ========================================================= */ .bh-hero-content { position: relative; width: 100%; background: linear-gradient( 180deg, #fffaf6 0%, #ffffff 100% ); border-bottom: 1px solid rgba(7, 151, 166, 0.10); } .bh-hero-content-inner { width: min( var(--container, 1220px), calc(100% - 40px) ); margin: 0 auto; padding: 58px 0 64px; text-align: center; } /* ========================================================= BELIEVING / ACHIEVING / ENJOYING ========================================================= */ .bh-hero-values-heading { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; margin-bottom: 28px; } .bh-hero-values-heading span { position: relative; display: inline-flex; align-items: center; padding: 0 22px; color: var(--teal-deep, #045661); font-family: "DM Sans", Arial, sans-serif; font-size: clamp(0.78rem, 1.2vw, 0.96rem); font-weight: 800; letter-spacing: 0.16em; line-height: 1.4; text-transform: uppercase; } .bh-hero-values-heading span:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--terracotta, #c95f43); transform: translateY(-50%); } /* ========================================================= HERO SCHOOL DESCRIPTION ========================================================= */ .bh-hero-values-statement { position: relative; width: min(900px, 100%); margin: 0 auto 34px; padding: 25px 30px; color: var(--text, #39484d); background: rgba(255, 255, 255, 0.92); border-left: 4px solid var(--terracotta, #c95f43); border-radius: 0 8px 8px 0; box-shadow: 0 8px 25px rgba(36, 50, 56, 0.06); font-family: "DM Sans", Arial, sans-serif; font-size: clamp(1rem, 1.4vw, 1.15rem); font-weight: 400; line-height: 1.85; text-align: center; } /* ========================================================= TOP DECORATIVE LINE ========================================================= */ .bh-hero-values-statement::before { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 2px; background: linear-gradient( 90deg, var(--gold, #d6a84f), transparent ); } /* ========================================================= BOTTOM DECORATIVE LINE ========================================================= */ .bh-hero-values-statement::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--teal, #0797a6) ); } /* ========================================================= HERO BUTTONS ========================================================= */ .bh-hero-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 13px; } .bh-hero-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 25px; border-radius: 5px; font-family: "DM Sans", Arial, sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .bh-hero-button:hover { transform: translateY(-2px); } /* ========================================================= PRIMARY BUTTON ========================================================= */ .bh-hero-button-primary { color: #ffffff; background: var(--terracotta, #c95f43); border: 1px solid var(--terracotta, #c95f43); box-shadow: 0 7px 18px rgba(201, 95, 67, 0.18); } .bh-hero-button-primary:hover { color: #ffffff; background: var(--terracotta-dark, #a94a34); border-color: var(--terracotta-dark, #a94a34); } /* ========================================================= SECONDARY BUTTON ========================================================= */ .bh-hero-button-secondary { color: var(--teal-deep, #045661); background: #ffffff; border: 1px solid var(--teal, #0797a6); } .bh-hero-button-secondary:hover { color: #ffffff; background: var(--teal, #0797a6); border-color: var(--teal, #0797a6); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .bh-hero-photo { min-height: 640px; } .bh-hero-image { height: 640px; } .bh-hero-featured-update { top: 20px; right: 20px; width: min(350px, 45%); padding: 15px 17px 16px 18px; } .bh-hero-school-name { left: 5%; bottom: 5%; font-size: clamp(1.8rem, 4vw, 3rem); } .bh-hero-school-name::before { width: 4px; height: 1em; margin-right: 12px; flex-basis: 4px; } .bh-hero-school-name-junior { margin-left: 0.25em; } .bh-hero-content-inner { padding: 48px 0 54px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 640px) { .bh-hero-photo { min-height: 560px; } .bh-hero-image { height: 560px; } /* ----------------------------------------------- Featured update spans most of the image width ----------------------------------------------- */ .bh-hero-featured-update { top: 16px; right: 16px; left: 16px; width: auto; padding: 14px 16px 15px 17px; } .bh-hero-featured-update-label { font-size: 0.66rem; } .bh-hero-featured-update-title { font-size: 1.12rem; } .bh-hero-featured-update-summary { font-size: 0.82rem; line-height: 1.5; } /* ----------------------------------------------- School name ----------------------------------------------- */ .bh-hero-school-name { left: 16px; right: 16px; bottom: 18px; max-width: calc(100% - 32px); font-size: clamp(1.35rem, 6vw, 2.15rem); letter-spacing: -0.015em; } .bh-hero-school-name::before { width: 3px; height: 1em; margin-right: 9px; flex-basis: 3px; } .bh-hero-school-name-junior { margin-left: 0.2em; } .bh-hero-content-inner { width: calc(100% - 28px); padding: 40px 0 46px; } .bh-hero-values-heading { margin-bottom: 22px; } .bh-hero-values-heading span { padding: 0 11px; font-size: 0.68rem; letter-spacing: 0.11em; } .bh-hero-values-heading span:not(:last-child)::after { width: 4px; height: 4px; } .bh-hero-values-statement { padding: 21px 20px; margin-bottom: 27px; font-size: 0.96rem; line-height: 1.75; } .bh-hero-values-statement::before, .bh-hero-values-statement::after { left: 20px; right: 20px; } .bh-hero-actions { flex-direction: column; width: 100%; } .bh-hero-button { width: 100%; max-width: 330px; } } /* ========================================================= VERY SMALL SCREENS ========================================================= */ @media (max-width: 400px) { .bh-hero-photo { min-height: 530px; } .bh-hero-image { height: 530px; } .bh-hero-featured-update { top: 12px; right: 12px; left: 12px; } .bh-hero-school-name { bottom: 15px; left: 14px; right: 14px; max-width: calc(100% - 28px); font-size: 1.25rem; } .bh-hero-school-name::before { width: 3px; height: 1em; margin-right: 7px; flex-basis: 3px; } .bh-hero-school-name-junior { margin-left: 0.18em; } .bh-hero-values-heading span { padding: 0 7px; font-size: 0.62rem; } }