:root { --primary: #FFD231; --primary-dark: #F0AF04; --secondary: #1a1a2e; --text-main: #333333; --text-muted: #666666; --white: #ffffff; --bg-light: #f8f9fa; --glass: rgba(255, 255, 255, 0.8); --glass-border: rgba(255, 255, 255, 0.3); --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); } /* Careers/Music Labs/Curriculum pages: match every bold title's font to the hero banner's title (Bebas Neue) and every normal-text element to the hero's description font (Manrope), per request - scoped to #main within each page (not just body.page-*) since also wraps the shared navbar/footer, and the broader selector previously leaked into nav-link

s, making the navbar's own text look different only while on the Careers page. */ .page-career #main h1, .page-career #main h2, .page-career #main h3, .page-career #main h4, .page-career #main h5, .page-career #main h6, .page-career #main .fw-bold, .page-labs #main h1, .page-labs #main h2, .page-labs #main h3, .page-labs #main h4, .page-labs #main h5, .page-labs #main h6, .page-labs #main .fw-bold, .page-curriculum #main h1, .page-curriculum #main h2, .page-curriculum #main h3, .page-curriculum #main h4, .page-curriculum #main h5, .page-curriculum #main h6, .page-curriculum #main .fw-bold { font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; } .page-career #main p, .page-career #main li, .page-career #main label, .page-labs #main p, .page-labs #main li, .page-labs #main label, .page-curriculum #main p, .page-curriculum #main li, .page-curriculum #main label { font-family: 'Manrope', sans-serif; } body { font-family: 'Inter', sans-serif; color: var(--text-main); background-color: var(--white); line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--secondary); } /* Glassmorphism Classes */ .glass { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); box-shadow: var(--shadow); } .card-premium { border-radius: 16px; padding: 2rem; transition: transform 0.3s ease, box-shadow 0.3s ease; background: var(--white); border: 1px solid #eee; } .card-premium:hover { transform: translateY(-10px); box-shadow: 0 15px 45px rgba(0,0,0,0.1); } /* Hero Sections */ .hero-modern { padding: 120px 0 80px; background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%); position: relative; overflow: hidden; } /* Contact page banner - shorter than the default .hero-modern height, scoped here rather than changing the shared class since labs/partners/ career/curriculum pages also use .hero-modern at the taller size. */ .hero-modern--contact { padding: 106px 0; } .hero-modern--contact .hero-primary-title { margin-top: 74px; } .hero-modern h1 { font-size: 3.5rem; line-height: 1.2; margin-bottom: 1.5rem; } /* Matches .hero-primary-title's font (used on the Pre-Primary hero) - opt-in per title with this class rather than on .hero-modern h1 globally, since .hero-modern is also used on pages (e.g. partners.html) that weren't asked to change. */ .hero-modern-title { font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; } @media (max-width: 768px) { .hero-modern h1 { font-size: 2.5rem; } } /* Premium Buttons */ .btn-premium { padding: 12px 28px; border-radius: 50px; font-weight: 600; transition: all 0.3s ease; text-transform: capitalize; } .btn-primary-premium { background-color: var(--primary); color: var(--secondary); border: none; } .btn-primary-premium:hover { background-color: var(--secondary); color: var(--primary); transform: scale(1.05); } .btn-outline-premium { border: 2px solid var(--secondary); color: var(--secondary); background: transparent; } .btn-outline-premium:hover { background: var(--secondary); color: var(--white); } /* Navigation Modernization */ .nav-modern { background: var(--white); box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05); padding: 10px 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* logo.png has ~24px of transparent padding baked in on its left edge (logo-white.png used in the footer has none) - without this offset the navbar wordmark's visible "T" sits ~5-6px right of the container edge while the footer wordmark sits flush, making the two logos look misaligned even though both boxes start at the same x. */ .navbar-brand img { margin-left: -5.65px; } .nav-modern.scrolled { padding: 8px 0; } .navbar-nav { background: rgba(0,0,0,0.03); padding: 6px; border-radius: 50px; gap: 2px; } @media (min-width: 992px) { #mainNav .container { position: relative; } #mainNav .navbar-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0 !important; } } @media (max-width: 991px) { .navbar-nav { background: transparent; padding: 0; border-radius: 0; gap: 0; margin-top: 20px; } /* #mainNav is fixed, so it doesn't push the hero down when it opens - it just grows taller and covers more of the page. Without this, the expanded menu's bottom edge lands right at the hero's "Inquiry for pre primary" button, looking like it collides with it instead of cleanly covering it. */ .navbar-collapse.show, .navbar-collapse.collapsing { padding-bottom: 24px; } } .nav-link-modern { font-weight: 600; color: var(--secondary); margin: 0 5px; padding: 8px 20px !important; border-radius: 50px; transition: all 0.3s ease; position: relative; font-size: 0.95rem; text-decoration: none; } .nav-link-modern:hover { color: var(--primary-dark); } .nav-link-modern::after { display: none; /* Remove old underline */ } .nav-link-modern.active { background: var(--primary); color: var(--secondary) !important; box-shadow: 0 4px 15px rgba(255, 210, 49, 0.3); } @media (max-width: 991px) { .nav-link-modern { display: block; margin: 6px 0; padding: 12px 20px !important; border-radius: 12px; background: rgba(0, 0, 0, 0.03); } .nav-link-modern.active { background: var(--primary); } } .btn-contact-modern { display: inline-flex; align-items: center; justify-content: center; background: var(--secondary); color: var(--white) !important; font-weight: 600; font-size: 14px; line-height: 19px; height: 34px; padding: 0 28px; border-radius: 50px; text-decoration: none; white-space: nowrap; transition: all 0.3s ease; } .btn-contact-modern:hover { background: var(--primary-dark); color: var(--secondary) !important; } @media (max-width: 991px) { .btn-contact-modern { width: 100%; margin-top: 10px; } } /* Animations */ .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; } .reveal.active { opacity: 1; transform: translateY(0); } /* Dark full-bleed hero (Pre-Primary style) */ .hero-primary-modern { position: relative; min-height: 640px; display: flex; align-items: center; background-size: cover; background-position: center; padding: 170px 0 90px; } .hero-primary-modern::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to left, rgba(0, 0, 0, 0) 23.68%, rgba(0, 0, 0, 0.8) 66.86%); pointer-events: none; } .hero-primary-modern .container { position: relative; z-index: 2; } /* Crossfading background photos - cycled by JS every 3s (see index.php). Sit behind the ::before darkening gradient (z-index:1) and the text container (z-index:2) via z-index:0, since real DOM elements here replace what used to be a single background-image on the section. */ .hero-bg-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-bg-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease-in-out; } .hero-bg-slide.active { opacity: 1; } /* Careers hero (Figma 23447:7459) - the source photo's natural crop doesn't match this banner's wide aspect ratio, so the design pins an exact custom zoom/offset instead of a plain "cover" fit. Reproduced here with the same numbers Figma exports for this frame. */ .hero-primary-modern--career { background-image: none; } .hero-primary-bg-image { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-primary-bg-image img { position: absolute; left: 0; top: -15%; width: 114.62%; height: 211.52%; max-width: none; } .hero-primary-content { max-width: 709px; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 33px; text-align: left; } .hero-primary-title { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 100px; line-height: 90px; text-transform: uppercase; color: var(--white); margin: 0; } .hero-primary-title span { display: block; } .hero-primary-title .text-gold-display { color: #fec548; } /* Careers hero (Figma 23447:7459) uses a smaller title than the 100px home/pre-primary default. */ .hero-primary-title--sm { font-size: 74px; line-height: 82px; } @media (max-width: 768px) { .hero-primary-title--sm { font-size: 40px; line-height: 38px; } } .hero-primary-desc { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 16px; line-height: 1.6; color: #e0e0e0; max-width: 601px; margin: 0; } /* Careers hero description is set in Manrope per Figma, not Inter. */ .hero-primary-desc--manrope { font-family: 'Manrope', sans-serif; max-width: 551px; } .hero-primary-title-group { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; } .hero-primary-subtitle { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 20px; line-height: normal; color: #e0e0e0; margin: 0; white-space: nowrap; } @media (max-width: 768px) { .hero-primary-subtitle { font-size: 16px; white-space: normal; text-align: center; } } .hero-primary-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-start; } .btn-hero-fill, .btn-hero-outline { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 19px; padding: 12px 32px; border-radius: 50px; text-decoration: none; white-space: nowrap; transition: all 0.3s ease; } .btn-hero-fill { background: var(--white); color: #000000; font-weight: 600; } .btn-hero-fill:hover { background: var(--primary); color: #000000; } .btn-hero-outline { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--white); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); color: var(--white); font-weight: 500; } .btn-hero-outline:hover { background: rgba(255, 255, 255, 0.15); } @media (max-width: 768px) { /* Figma mobile frame (22927-25797, 360x596): title sits ~42px from the top, not vertically centered, with the CTA pinned near the bottom (~511px down) and a big empty gap between them - so the outer section stretches its content column full-height and pushes the actions block down with margin-top: auto, instead of centering everything as one clustered block like the desktop layout does. */ .hero-primary-title { font-size: 44px; line-height: 42px; } .hero-primary-desc { font-size: 14px; max-width: 326px; } .hero-primary-modern { align-items: stretch; min-height: 640px; /* #mainNav is fixed and overlays the hero, so padding-top has to clear it (~108px) plus Figma's own 42px inset before the title, not just the 42px alone - that's what was clipping the title behind the header. */ padding: 150px 0 60px; } /* Figma mobile frame (22927-25797) pans the hero photo so the clapping child sits centered in the narrow portrait crop, instead of the desktop's dead-center background-position. */ .hero-bg-slide { background-position: 70% top; } .hero-primary-modern .container { display: flex; } .hero-primary-content { width: 100%; gap: 16px; align-items: center; text-align: center; } .hero-primary-title-group { align-items: center; } .hero-primary-actions { margin-top: auto; justify-content: center; } /* Figma's overlay is a near-full-height fade, strong (0.85 opacity) right at the top and clearing to fully transparent by the bottom - not just a short fade over the top portion. */ .hero-primary-modern::before { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); } } /* Section heading (eyebrow + Bebas Neue title) */ .section-heading-modern { text-align: center; } .section-heading-modern .section-heading-eyebrow { display: block; font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 24px; line-height: 47px; color: #fec548; } .section-heading-modern .section-heading-title { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 44px; line-height: 47px; text-transform: uppercase; color: #222222; margin: 0; } .section-heading-modern .section-heading-desc { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; color: #000000; margin-top: 12px; } @media (max-width: 768px) { .section-heading-modern .section-heading-title { font-size: 32px; line-height: 36px; } } .section-heading-modern .section-heading-eyebrow--amber { color: #dfa935; } .section-heading-modern .section-heading-title--sm { font-size: 40px; } .section-heading-modern .section-heading-desc--wide { font-size: 16px; line-height: 28px; color: #222222; max-width: 778px; margin-left: auto; margin-right: auto; } /* Careers "Why Teach With TORRINS" benefits grid (Figma 23476:1179-1201) */ .benefits-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 32px; } .benefit-item { display: flex; flex-direction: column; align-items: center; text-align: center; width: 220px; } .benefit-icon { width: 70px; height: 70px; margin-bottom: 34px; } /* Higher specificity than .page-career #main h3 (which forces Bebas Neue on all page headings) - this card title is explicitly Manrope Bold in Figma. */ .page-career #main .benefit-title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 18px; line-height: 24px; text-transform: none; letter-spacing: normal; color: #222222; margin: 0 0 12px; } .benefit-desc { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 14px; line-height: 22px; color: #555555; margin: 0; } @media (max-width: 991px) { .benefits-grid { gap: 32px 24px; } .benefit-item { width: calc(50% - 12px); } } @media (max-width: 575px) { .benefits-grid { gap: 32px; } .benefit-item { width: 100%; max-width: 280px; } .benefit-icon { margin-bottom: 24px; } } /* Our Impact stats row (icon badge + gradient number + label) */ .impact-stats-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 42px; margin-top: 48px; } .impact-stat { display: flex; align-items: center; gap: 14px; } .impact-stat-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 65px; height: 65px; border-radius: 50%; border: 1px solid transparent; background: linear-gradient(#FFFBF2, #FFFBF2) padding-box, linear-gradient(100deg, #FFB544, #FF4F44) border-box; } .impact-stat-icon img { width: 35px; height: 35px; object-fit: contain; } .impact-stat-number { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 48px; line-height: 1.1; background: linear-gradient(100deg, #FFB544 20%, #FF4F44 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; } .impact-stat-label { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 17.25px; color: #B6B6B6; margin: 0; } .impact-stat-divider { width: 1px; height: 60px; background: rgba(0, 0, 0, 0.1); flex-shrink: 0; } @media (max-width: 575px) { .impact-stats-row { display: grid; grid-template-columns: 1fr 1fr; align-items: start; justify-items: center; row-gap: 28px; column-gap: 12px; } .impact-stat { flex-direction: column; justify-content: flex-start; gap: 10px; width: 100%; text-align: center; } .impact-stat-info { display: flex; flex-direction: column; align-items: center; } .impact-stat-divider { display: none; } .impact-stat-number { font-size: 36px; } } .impact-map { width: 400px; max-width: 100%; margin: 48px auto 0; } .impact-map img { width: 100%; height: auto; display: block; } @media (max-width: 768px) { .section-heading-modern .section-heading-title--sm { font-size: 30px; } } /* Pricing / model comparison cards */ .pricing-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; } .pricing-card { position: relative; width: 537px; max-width: 100%; min-height: 525px; background: var(--white); border-radius: 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); padding-bottom: 90px; } .pricing-card-header { margin: 10px; padding: 16px; border-radius: 12px 12px 0 0; border-bottom: 1px solid rgba(254, 197, 72, 0.5); } .pricing-card-icon { width: 50px; height: 50px; border-radius: 50%; border: 4px solid var(--white); display: flex; align-items: center; justify-content: center; } .pricing-card-icon img { width: 24px; height: 24px; } .pricing-card-title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 16px; color: #000000; margin: 12px 0 0; } .pricing-card-list { list-style: none; margin: 0; padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; } .pricing-card-list li { display: flex; align-items: center; gap: 12px; font-family: 'Inter', sans-serif; font-size: 14px; color: #000000; } .pricing-card-list img { width: 16px; height: 16px; flex-shrink: 0; } .pricing-card-btn { position: absolute; left: 24px; right: 24px; bottom: 24px; height: 46px; border-radius: 30px; border: 1px solid transparent; display: flex; align-items: center; justify-content: center; font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 14px; text-decoration: none; transition: all 0.3s ease; } .pricing-card--gold .pricing-card-header { background: linear-gradient(to bottom, #fff6e0, rgba(255, 246, 224, 0)); } .pricing-card--gold .pricing-card-icon { background: #FEF0CA; } .pricing-card--gold .pricing-card-btn { border-color: #DFA935; color: #DFA935; } .pricing-card--gold .pricing-card-btn:hover { background: #DFA935; color: var(--white); } .pricing-card--orange .pricing-card-header { background: linear-gradient(to bottom, #fdf1ec, rgba(253, 241, 236, 0)); } .pricing-card--orange .pricing-card-icon { background: #FDF1EC; } .pricing-card--orange .pricing-card-btn { border-color: #EE6E1B; color: #EE6E1B; } .pricing-card--orange .pricing-card-btn:hover { background: #EE6E1B; color: var(--white); } .pricing-card--teal .pricing-card-header { background: linear-gradient(to bottom, #eff9f9, rgba(239, 249, 249, 0)); border-bottom-color: rgba(53, 184, 179, 0.5); } .pricing-card--teal .pricing-card-icon { background: #E0F5F4; } .pricing-card--teal .pricing-card-btn { border-color: #35B8B3; color: #35B8B3; } .pricing-card--teal .pricing-card-btn:hover { background: #35B8B3; color: var(--white); } .pricing-card--purple .pricing-card-header { background: linear-gradient(to bottom, #f5f3fb, rgba(245, 243, 251, 0)); border-bottom-color: rgba(134, 116, 197, 0.5); } .pricing-card--purple .pricing-card-icon { background: #EDEAF7; } .pricing-card--purple .pricing-card-btn { border-color: #8674C5; color: #8674C5; } .pricing-card--purple .pricing-card-btn:hover { background: #8674C5; color: var(--white); } /* Compact size variant - 4-across model cards (home page) instead of the 2-across wide cards on the pre-primary pricing section. */ .pricing-card--sm { width: 304px; flex-shrink: 0; min-height: 425px; padding-bottom: 82px; } .pricing-card--sm .pricing-card-header { height: 104px; } /* Keep all 4 model cards on a single row instead of wrapping to a 2nd line once the container is narrower than 4 cards + gaps; scrolls horizontally on smaller screens instead. */ .pricing-cards--nowrap { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; -ms-overflow-style: none; } .pricing-cards--nowrap::-webkit-scrollbar { display: none; } @media (max-width: 575px) { .pricing-card { min-height: auto; } } /* Feature spotlight (image + checklist block) */ .feature-spotlight { display: flex; align-items: center; gap: 100px; /* Overrides the .mb-5 utility on these blocks so every spotlight in a stack gets the same visible gap - some blocks (Curriculum's rainbow, Interactive Learning's ABC blocks) have decorations that overflow past their own edges, so the plain mb-5 alone left uneven-looking gaps between neighbours. */ margin-bottom: 120px; } /* The heading's own .mb-5 utility (48px) is much smaller than the 120px gap between spotlights below it, so the first spotlight sat noticeably closer to the heading than to its neighbours. Margins collapse to the larger value, so this brings the gap above the first spotlight in line with the rest without touching .section-heading-modern itself (shared by pages that don't pair it with a feature-spotlight). */ .section-heading-modern + .feature-spotlight { margin-top: 120px; } /* The rainbow decoration on Specialized Curriculum's image pokes down past its own box on purpose, eating into the standard 120px gap and making it look tight against Interactive Learning below. Give this specific block extra room so the visible gap still matches the rest. */ .feature-spotlight:has(.feature-spotlight-rainbow) { margin-bottom: 240px; } /* Same reasoning for Interactive Learning's ABC-blocks decoration, which pokes down past its own image on the opposite corner. */ .feature-spotlight:has(.feature-spotlight-blocks) { margin-bottom: 240px; } .feature-spotlight-content { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 536px; max-width: 100%; } .feature-spotlight-badge { width: 40px; height: 40px; display: block; } .feature-spotlight-badge-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .feature-spotlight-badge-circle img { width: 20px; height: 20px; object-fit: contain; } .feature-spotlight-badge-circle--green { background: #84AC1D; } .feature-spotlight-badge-circle--blue { background: #1D3CAC; } .feature-spotlight-badge-circle--teal { background: #02A7A9; } .feature-spotlight-badge-circle--pink { background: #FE569C; } .feature-spotlight-image--green { border-color: rgba(132, 172, 29, 0.2); } .feature-spotlight-image--blue { border-color: rgba(29, 60, 172, 0.2); } .feature-spotlight-image--pink { border-color: rgba(254, 86, 156, 0.2); } .feature-spotlight-image img.object-position-left { object-position: 15% 40%; } /* Instrument mosaic grid (used in place of a single photo). Width matches .feature-spotlight-image/-image-wrap (557px) so this spotlight's content column lines up with every other spotlight's - it was previously 571px, 14px wider, which shifted "Child-Friendly Instruments" out of line with the content column used everywhere else. */ .instrument-mosaic { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 60px; gap: 7px; width: 557px; max-width: 100%; flex-shrink: 0; } .instrument-mosaic-cell { background: var(--white); border-radius: 4px; overflow: hidden; box-shadow: 0 3px 11px rgba(0, 0, 0, 0.08); } .instrument-mosaic-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } .instrument-mosaic-case { grid-column: 1 / 3; grid-row: 1 / 3; background: var(--white); border-radius: 6px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); display: flex; align-items: center; justify-content: center; padding: 6px; } .instrument-mosaic-case img { width: 100%; height: 100%; object-fit: contain; } @media (max-width: 767px) { .instrument-mosaic { grid-auto-rows: 40px; } } .feature-spotlight-body { display: flex; flex-direction: column; gap: 32px; width: 100%; } .feature-spotlight-heading { display: flex; flex-direction: column; gap: 24px; } .feature-spotlight-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 24px; line-height: 20px; color: #000000; margin: 0; } .feature-spotlight-desc { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 16px; line-height: 26px; color: #000000; margin: 0; } .feature-spotlight-desc--nowrap { white-space: nowrap; } @media (max-width: 1300px) { .feature-spotlight-desc--nowrap { white-space: normal; } } .feature-spotlight-list { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; } .feature-spotlight-list li { display: flex; align-items: center; gap: 12px; font-family: 'Inter', sans-serif; font-size: 16px; line-height: 20px; color: #555555; } .feature-spotlight-list img { width: 16px; height: 16px; flex-shrink: 0; } .feature-spotlight-image-wrap { position: relative; width: 557px; max-width: 100%; flex-shrink: 0; } .feature-spotlight-rainbow { position: absolute; left: 67.24%; top: 64%; width: 39.86%; height: auto; pointer-events: none; } .feature-spotlight-blocks { position: absolute; left: -18%; bottom: -14%; width: 29%; height: auto; pointer-events: none; } .feature-spotlight-image { border: 10px solid rgba(253, 159, 6, 0.2); border-radius: 20px; width: 557px; max-width: 100%; height: 305px; flex-shrink: 0; overflow: hidden; } .feature-spotlight-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; } @media (max-width: 991px) { .feature-spotlight { flex-direction: column; gap: 32px; margin-bottom: 80px; } /* Desktop's 120px gap above the first spotlight scales down to match the 80px mobile gap between spotlights below - without this it stayed at the desktop value and left an oversized empty gap under the heading on small screens. */ .section-heading-modern + .feature-spotlight { margin-top: 80px; } .feature-spotlight:has(.feature-spotlight-rainbow), .feature-spotlight:has(.feature-spotlight-blocks) { margin-bottom: 110px; } .feature-spotlight-image { width: 100%; height: auto; aspect-ratio: 557 / 305; } /* Figma mobile frame (22927-25654): every spotlight block reads icon -> title -> desc -> checklist -> image, regardless of whether the desktop version put the image on the left or right. */ .feature-spotlight-content { order: 1; } .feature-spotlight-image, .feature-spotlight-image-wrap, .instrument-mosaic { order: 2; } /* On desktop this pokes past the image border on purpose, but at mobile widths the wrap is nearly the full viewport width, so the same -18% offset pushed it off-screen past the page edge. Pull it back in so it still overlaps the border without overflowing. */ .feature-spotlight-blocks { left: -4%; bottom: -10%; width: 22%; } } /* Age Groups Section (curriculum stages, maroon band) */ .age-groups-section { position: relative; background-image: url('../img/age-groups/section-bg.svg'); background-repeat: no-repeat; background-size: 100% 100%; padding-bottom: 60px; } .age-wave-cap { width: 100%; height: clamp(30px, 4vw, 60px); } .age-groups-heading { text-align: center; padding: 20px 0 56px; } @media (max-width: 768px) { .age-groups-heading { padding-top: 44px; } } .age-groups-heading-eyebrow { display: block; font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 24px; line-height: 52px; color: #fec548; } .age-groups-heading-title { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 44px; line-height: 52px; text-transform: uppercase; color: var(--white); margin: 0; } .age-cards-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; } .age-card { position: relative; width: 341px; max-width: 100%; height: 390px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow: hidden; padding: 10px; } .age-card-photo { position: absolute; top: -26px; right: 20px; width: 92px; height: 122px; z-index: 2; pointer-events: none; } .age-card-photo img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25)); } .age-card-photo--crop img { object-fit: cover; object-position: 8% 12%; filter: none; } .age-card-photo--kg1 { top: -5px; right: 31px; width: 99px; height: 121px; overflow: hidden; } .age-card-photo--kg1 img { object-fit: contain; object-position: center bottom; filter: none; } .age-card-photo--kg2 { top: 2px; right: 30px; width: 87px; height: 114px; overflow: hidden; } .age-card-photo--kg2 img { object-fit: contain; object-position: center bottom; filter: none; } .age-card-photo--nursery { top: -1px; right: 26px; width: 92px; height: 116px; overflow: hidden; } .age-card-photo--nursery img { position: absolute; top: 0; left: -0.07%; width: 210.21%; height: 126.41%; max-width: none; object-fit: cover; filter: none; } .age-card-banner { position: relative; width: 100%; height: 106px; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 9px; color: var(--white); text-align: left; } .age-card-banner-title, .age-card-banner-subtitle { max-width: 175px; } .age-card-banner--green { background: #57A828; } .age-card-banner--purple { background: #794BA5; } .age-card-banner--orange { background: #F54900; } .age-card-banner-title { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 36px; line-height: 32px; text-transform: uppercase; color: var(--white); margin: 0; } .age-card-banner-subtitle { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; margin: 0; } .age-card-list { list-style: none; margin: 24px 0 0; padding: 0 13px; display: flex; flex-direction: column; gap: 16px; } .age-card-list li { display: flex; align-items: center; gap: 12px; } .age-card-badge { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .age-card-badge--green { background: #57A828; } .age-card-badge--purple { background: #794BA5; } .age-card-badge--orange { background: #F54900; } .age-card-badge img { width: 20px; height: 20px; object-fit: contain; } .age-card-list span { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; line-height: 18px; color: var(--white); text-transform: capitalize; } @media (max-width: 768px) { .age-groups-heading-title { font-size: 32px; line-height: 38px; } } /* Why Schools Choose TORRINS - photo column. Below 992px the two columns stack vertically (Bootstrap col-lg-6), so all 4 photos just show normally, one after another. At 992px+ they sit side by side, so the column becomes sticky and crossfades between photos as the matching text block scrolls through view - same "scroll the text, pin + swap the image" pattern used for the "Hands-on Learning" section on mastersunion.org. */ .why-stack { display: flex; flex-direction: column; gap: 24px; } .why-stack-img { width: 100%; height: 305px; object-fit: cover; border-radius: 20px; display: block; } @media (max-width: 768px) { .why-stack-img { height: 220px; } } @media (min-width: 992px) { .why-stack { position: sticky; top: 120px; height: 305px; display: block; align-self: flex-start; } .why-stack-img { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 0.6s ease; } .why-stack-img.active { opacity: 1; } } .why-heading { margin-bottom: 40px; } .why-heading-eyebrow { display: block; font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 24px; line-height: 47px; color: #dfa935; } .why-heading-title { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 40px; line-height: 47px; text-transform: uppercase; color: #333333; margin: 0; } @media (max-width: 768px) { .why-heading-title { font-size: 30px; line-height: 36px; } } .why-list { display: flex; flex-direction: column; gap: 40px; } @media (min-width: 992px) { .why-list { /* Extra breathing room per item gives the sticky image column enough scroll distance to comfortably crossfade through each photo before the next text block reaches the trigger zone. */ gap: 140px; } .why-list-item { position: relative; } /* Vertical connector line running from this item's icon down to the next item's icon, threading through the 140px gap. */ .why-list-item:not(:last-child)::after { content: ''; position: absolute; top: 40px; left: 19px; width: 2px; bottom: -140px; background: #E5D3A8; } } .why-list-item-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .why-list-icon { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; } .why-list-icon img { width: 100%; height: 100%; } .why-list-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 20px; color: #000000; margin: 0; } .why-list-desc { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; color: #000000; margin: 0 0 0 52px; } @media (max-width: 575px) { .why-list-desc { margin-left: 0; } } /* Mobile-only "Why Schools" layout: image -> content, image -> content in sequence, instead of the desktop sticky-image + scrolling-text pattern (which needs the image and text as separate columns and doesn't make sense once they're stacked full-width). */ .why-mobile-list { display: flex; flex-direction: column; gap: 40px; } .why-mobile-img { width: 100%; height: 220px; object-fit: cover; border-radius: 20px; display: block; margin-bottom: 20px; } /* Trusted By Schools strip (home page, before footer) */ .trusted-schools-strip { padding: 28px 0; text-align: center; background-color: #FBF3E8; } .trusted-schools-heading { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 20px; line-height: 32px; color: #555555; margin: 0 0 24px; } .trusted-schools-heading strong { font-weight: 800; color: #1f1f1f; } /* Infinite left-scrolling marquee - the logo strip is one flattened image (not individual logo files), so two copies sit side by side in a track that scrolls -50% and loops seamlessly. */ .trusted-schools-marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } .trusted-schools-track { display: flex; align-items: center; width: max-content; animation: trusted-schools-scroll 26s linear infinite; } .trusted-schools-marquee:hover .trusted-schools-track { animation-play-state: paused; } .trusted-schools-track img { height: 88px; width: auto; flex-shrink: 0; margin-right: 56px; } @keyframes trusted-schools-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .trusted-schools-track { animation: none; } } @media (max-width: 575px) { .trusted-schools-track img { height: 88px; margin-right: 32px; } } @media (max-width: 575px) { .trusted-schools-heading { font-size: 16px; line-height: 26px; } } /* Custom Utilities */ .text-gold { color: var(--primary-dark); } .bg-navy { background-color: var(--secondary); color: var(--white); } .trust-strip { background: #f8f9fa; padding: 40px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } /* Trust strip (home hero intro paragraph + gradient stat numbers) */ .trust-strip-row { display: flex; align-items: center; gap: 60px; } .trust-strip-content { flex: 1; min-width: 0; } .trust-strip-map { flex-shrink: 0; width: 400px; max-width: 100%; } .trust-strip-map img { width: 100%; height: auto; display: block; } @media (max-width: 991px) { .trust-strip-row { flex-direction: column; gap: 32px; } .trust-strip-map { width: 280px; } } @media (max-width: 575px) { .trust-strip-map { width: 345px; } } .trust-intro-text { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 18px; line-height: 32px; color: #222222; max-width: 607px; margin: 0 0 82px; } .trust-stats-row { display: flex; align-items: center; flex-wrap: wrap; gap: 34.5px; } .trust-stat { display: flex; flex-direction: column; align-items: center; gap: 13px; text-align: center; } .trust-stat-number { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 51.75px; /* Figma's exported leading (38.813px) is smaller than the font size, which is fine in Figma's own text-box model but clips Bebas Neue's ascenders at the top when rendered as a real CSS line box - use a line-height tall enough to contain the full glyph instead. */ line-height: 1.1; background: linear-gradient(100deg, #FFB544 20%, #FF4F44 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; } .trust-stat-label { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 17.25px; color: #DFA935; margin: 0; } .trust-stat-divider { width: 1px; height: 60px; background: rgba(0, 0, 0, 0.12); flex-shrink: 0; } @media (max-width: 575px) { .trust-intro-text { font-size: 16px; line-height: 28px; margin-bottom: 44px; text-align: center; } /* 2x2 grid, no dividers between stats, instead of the desktop single row with vertical rules - both the paragraph above and each stat block are centered on mobile. */ .trust-stats-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 24px; } .trust-stat { width: 100%; align-items: center; text-align: center; } .trust-stat-divider { display: none; } .trust-stat-number { font-size: 40px; /* Same ascender-clipping issue as before - line-height smaller than font-size cuts off the top of Bebas Neue's glyphs. */ line-height: 1.1; } .trust-stat-label { font-size: 14px; } } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 30px; text-align: center; } .stat-number { font-size: 2.5rem; font-weight: 800; color: var(--primary-dark); display: block; } .stat-label { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); } /* School logo marquee (footer band) */ .school-logo-viewport { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .school-logo-track { display: flex; align-items: center; width: max-content; animation: school-logo-scroll 28s linear infinite; } .school-logo-viewport:hover .school-logo-track { animation-play-state: paused; } .school-logo-item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 40px; width: 140px; padding: 0 2.5rem; box-sizing: content-box; overflow: hidden; } .school-logo-item img { height: 35px; width: 140px; object-fit: contain; } @keyframes school-logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Dark CTA footer (radial gradient + gold ribbons) */ .cta-dark-modern { position: relative; overflow: hidden; padding: 100px 0; background: radial-gradient(ellipse 640px 640px at 50% 50%, #323232 0%, #191919 50%, #0c0c0c 75%, #060606 87.5%, #000000 100%); } .cta-dark-ribbon { position: absolute; width: 52%; max-width: 792px; pointer-events: none; opacity: 0.85; } .cta-dark-ribbon--tl { top: -7%; left: -14%; transform: rotate(-4.47deg) scaleY(-1); } .cta-dark-ribbon--br { top: 62%; left: 72%; bottom: auto; right: auto; transform: rotate(-4.47deg) scaleY(-1); } /* Ecosystem section reuses the same dark radial background + gold ribbon decoration as the CTA footer, just with its own ribbon placement/rotation to match this section's own dimensions. */ .ecosystem-ribbon--tl { top: 0%; left: -6%; width: 38%; transform: rotate(154.05deg); } .ecosystem-ribbon--br { top: 80%; left: 78%; width: 45%; bottom: auto; right: auto; transform: rotate(-4.47deg) scaleY(-1); } .ecosystem-section { padding: 100px 0; } .ecosystem-carousel { position: relative; z-index: 1; padding: 0 56px; } .ecosystem-cards-row { display: flex; gap: 24px; overflow-x: auto; padding: 8px 4px 16px; scrollbar-width: none; -ms-overflow-style: none; } .ecosystem-cards-row::-webkit-scrollbar { display: none; } .ecosystem-scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #535353; background: rgba(20, 20, 20, 0.85); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .ecosystem-scroll-btn:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); color: #141414; } .ecosystem-scroll-btn:disabled { display: none; } .ecosystem-scroll-btn--prev { left: 0; } .ecosystem-scroll-btn--next { right: 0; } @media (max-width: 768px) { .ecosystem-carousel { padding: 0 44px; } .ecosystem-scroll-btn { width: 36px; height: 36px; } } .ecosystem-card { flex-shrink: 0; width: calc((100% - 72px) / 4); min-width: 240px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid #535353; border-radius: 12px; overflow: hidden; padding: 11px; } .ecosystem-card-image { width: 100%; height: 172px; border-radius: 13px; overflow: hidden; } .ecosystem-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .ecosystem-card-image--empty { background: linear-gradient(135deg, #2a2a2a, #141414); } .ecosystem-card-body { padding: 24px 0 0 12px; display: flex; flex-direction: column; gap: 24px; } .ecosystem-card-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 18px; line-height: 28px; color: var(--white); margin: 0; } .ecosystem-card-list { list-style: none; margin: 0; padding: 0 12px 0 0; display: flex; flex-direction: column; gap: 16px; } .ecosystem-card-list li { display: flex; align-items: flex-start; gap: 12px; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 20px; color: #e0e0e0; } .ecosystem-card-list img { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; } @media (max-width: 992px) { .ecosystem-card { width: calc((100% - 24px) / 2); min-width: 220px; } } @media (max-width: 768px) { .ecosystem-section { padding: 60px 0; } .ecosystem-card { width: 100%; min-width: 0; } } .cta-dark-content { position: relative; z-index: 1; max-width: 599px; margin: 0 auto; text-align: center; } .cta-dark-eyebrow { display: block; font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 24px; line-height: 47px; color: #fec548; } .cta-dark-title { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 40px; line-height: 47px; text-transform: uppercase; color: #e0e0e0; margin: 0; } .cta-dark-desc { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 14px; line-height: 24px; color: #b0b0b0; margin: 16px 0 27px; } .cta-dark-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--white); color: #000000; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; padding: 12px 32px; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; } .cta-dark-btn:hover { background: var(--primary); color: #000000; } @media (max-width: 768px) { .cta-dark-title { font-size: 30px; } .cta-dark-modern { padding: 70px 0; } } @media (prefers-reduced-motion: reduce) { .school-logo-track { animation: none; } } /* FAQ accordion */ .faq-heading { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 32px; letter-spacing: -0.64px; color: #222222; text-align: center; text-transform: lowercase; } .faq-heading::first-letter { text-transform: uppercase; } .faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: #FAFAFA; border-radius: 10px; overflow: hidden; } .faq-item-question { display: flex; align-items: center; gap: 12px; width: 100%; border: none; background: transparent; padding: 20px; text-align: left; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 16px; color: #222222; cursor: pointer; } .faq-item-question img { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.3s ease; } .faq-item-question[aria-expanded="true"] img { transform: rotate(45deg); } .faq-item-answer { padding: 0 20px 20px 52px; color: #555555; font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.6; } /* Global dark footer */ .footer-dark-modern { position: relative; overflow: hidden; padding: 60px 0 8px; background: radial-gradient(ellipse 700px 700px at 50% 50%, #323232 0%, #191919 50%, #0c0c0c 75%, #060606 87.5%, #000000 100%); } .footer-dark-modern::before { content: ""; position: absolute; inset: 0; background: url('../img/footer-bg-texture.png') center/cover; opacity: 0.02; pointer-events: none; } .footer-bg-text-wrap { overflow: hidden; margin-top: 36px; line-height: 1; } .footer-bg-text { display: block; margin-left: 40px; font-family: 'Bebas Neue', sans-serif; font-size: 150px; line-height: 1; color: var(--white); opacity: 0.03; white-space: nowrap; pointer-events: none; text-transform: uppercase; } .footer-content { position: relative; z-index: 1; } .footer-top-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 140px; padding-bottom: 36px; } /* Desktop: acts as if it doesn't exist, so .footer-col stays a direct flex item of .footer-top-row exactly like before. Mobile: becomes its own row so About/Programs spread edge-to-edge like Figma's space-between pair, instead of sitting close together with the row's shared 24px gap. */ .footer-about-programs-row { display: contents; } .footer-logo img { height: 50px; } .footer-col h4 { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 18px; color: var(--white); margin-bottom: 13px; } .footer-col a { display: block; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 32px; color: #b0b0b0; text-decoration: none; } .footer-col a:hover { color: var(--primary); } .footer-newsletter { max-width: 404px; } .footer-newsletter > p { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--white); margin-bottom: 20px; } .footer-subscribe-form { display: flex; gap: 8px; margin-bottom: 24px; } .footer-subscribe-form input { flex: 1; min-width: 0; border: 1px solid #ccc; border-radius: 5px; padding: 9px 16px; font-family: 'Inter', sans-serif; font-size: 12px; color: #333; } .footer-subscribe-form input::placeholder { color: #929090; } .footer-subscribe-form button { background: #DFA935; color: var(--white); border: none; border-radius: 5px; padding: 0 20px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 12px; white-space: nowrap; transition: background 0.3s ease; } .footer-subscribe-form button:hover { background: var(--primary-dark); } .footer-contact-row { display: flex; flex-wrap: nowrap; gap: 20px 24px; } .footer-contact-row a { display: inline-flex; align-items: center; gap: 8px; color: #d6d6d6; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 16px; text-decoration: none; } .footer-contact-row a i { color: #DFA935; font-size: 18px; } .footer-contact-row a:hover { color: var(--primary); } .footer-divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.15); margin: 0 0 18px; } .footer-bottom-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .footer-bottom-row p { font-family: 'Inter', sans-serif; font-size: 12px; color: #999999; margin: 0; } .footer-social { display: flex; gap: 18px; } .footer-social a { color: var(--white); font-size: 18px; opacity: 0.85; transition: opacity 0.3s ease, color 0.3s ease; } .footer-social a:hover { opacity: 1; color: var(--primary); } @media (max-width: 991px) { .footer-top-row { gap: 40px; } .footer-bg-text { font-size: 90px; } } @media (max-width: 575px) { .footer-bottom-row { justify-content: center; text-align: center; /* Figma mobile frame: terms/social/copyright stack with a 32px rhythm instead of the desktop row's tight 16px gap. */ gap: 32px; } /* Figma mobile frame (23122-4773) still shows this faint background text, just much smaller and centered instead of left-margined. */ .footer-bg-text-wrap { text-align: center; margin-top: 42px; } .footer-bg-text { margin-left: 0; font-size: 32px; } /* Figma mobile frame: logo full-width on its own row, About/Programs side by side as a tight pair below it, newsletter full-width last, each major block spaced ~40-42px apart like the Figma column. */ .footer-top-row { gap: 24px; padding-bottom: 42px; } .footer-logo, .footer-about-programs-row { width: 100%; max-width: 100%; } .footer-logo img { height: 38px; } /* Aligns the newsletter block (label, input, subscribe, contact row) with About's 14px margin-left so everything lines up on one straight left edge. */ .footer-newsletter { width: calc(100% - 14px); max-width: calc(100% - 14px); margin-left: 14px; } /* Figma mobile frame: About and Programs spread edge-to-edge (space-between within the full row width), not bunched together. */ .footer-about-programs-row { display: flex; justify-content: space-between; } .footer-subscribe-form { margin-bottom: 42px; } .footer-divider { margin: 0 0 42px; } .footer-bottom-row p:last-child { margin-top: 10px; } /* At the desktop 16px size, email + phone are too wide to both fit on one line in a mobile-width row - shrink to match Figma's mobile spec (12px) so nowrap doesn't overflow/clip either one. */ .footer-contact-row a { font-size: 14px; } .footer-contact-row a i { font-size: 14px; } .footer-about-programs-row .footer-col:first-child { margin-left: 14px; } .footer-about-programs-row .footer-col:last-child { margin-right: 14px; } /* Figma mobile frame (23129-6003) uses its own portrait-cropped background photo instead of the desktop's wide blurred texture. */ .footer-dark-modern::before { background-image: url('../img/footer-bg-texture-mobile.png'); background-position: bottom; } }