/* ============================================= landing.css FIT College Landing Page — Custom Styles Stack: Tailwind CDN + Alpine.js + this file ============================================= */ /* --------------------------------------------- 1. FONTS Aileron via Adobe Fonts (Typekit) Include in : --------------------------------------------- */ /* --------------------------------------------- 2. VARIABLES --------------------------------------------- */ :root { /* Brand */ --color-red: #ca2827; --color-red-dark: #9f201f; /* Neutrals */ --color-black: #191919; --color-white: #ffffff; /* Backgrounds */ --color-bg-light: #f2f2f2; --color-bg-mid: #ebebeb; /* Borders */ --color-border: #e6e6e6; /* Text */ --color-text-muted: #555555; /* Transitions */ --transition: all 0.15s ease-in-out; /* Border radius — asymmetric brand shape lg: full and half width elements md: third width elements sm: quarter width elements */ --radius-lg: 0 clamp(2rem, 6vw, 5rem) 0 clamp(2rem, 6vw, 5rem); --radius-md: 0 clamp(1.5rem, 4vw, 3rem) 0 clamp(1.5rem, 4vw, 3rem); --radius-sm: 0 clamp(0.75rem, 2vw, 1.5rem) 0 clamp(0.75rem, 2vw, 1.5rem); /* Border radius — any element where all corners are rounded */ --radius-all-sm: clamp(0.5rem, 1.5vw, 0.75rem); } /* --------------------------------------------- 3. BASE 16px root = 1rem baseline. All layout spacing uses rem. Component-internal spacing uses em. px reserved for fixed values (borders, etc). --------------------------------------------- */ html { font-size: 16px; scroll-behavior: smooth; } body { font-family: aileron, sans-serif; color: var(--color-black); line-height: 1.6; margin: 0; } a { color: var(--color-black); text-decoration: none; transition: var(--transition); } a:hover, a:focus { color: var(--color-red); } ul { padding-left: 0; } /* --------------------------------------------- 4. TYPOGRAPHY All typographic properties live here only — font-size, font-weight, line-height, text-transform, letter-spacing, margin, and text colour. Component sections handle layout only. --------------------------------------------- */ /* Text colours */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, p, .accordion-trigger, .accordion-content-inner, .form-input, .form-label { color: var(--color-black); } .text-muted { color: var(--color-text-muted); } .text-white { color: var(--color-white); } .text-red { color: var(--color-red); } /* All headings */ h1, .h1, h2, .h2, h4, .h4 { text-transform: uppercase; line-height: 1.2; margin: 0.5rem 0; } .hero-card-stat, .hero-card-label{ line-height: 1.2; } /* Font sizes */ .text-stat { font-size: clamp(2.5rem, 6vw, 4rem); } h1, .h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); } h2, .h2, .text-xl { font-size: clamp(1.5rem, 3.5vw, 2.25rem); } h3, .h3 { font-size: clamp(1.25rem, 2.75vw, 1.6rem); } .text-lg, .hero-card-stat, .hero-card-label { font-size: clamp(1.1rem, 2.5vw, 1.35rem); } p, h4, .h4, .hero-card-text, .accordion-content-inner, .form-input { font-size: clamp(0.9rem, 1.5vw, 1rem); margin: 1rem 0; } .text-sm, .form-label, .hbspt-form label, .hbspt-form .hs-error-msg { font-size: clamp(0.75rem, 1.2vw, 0.875rem); } .text-xs, .countdown-pill { font-size: clamp(0.65rem, 1vw, 0.75rem); } /* Font weights */ h1, .h1, .text-stat { font-weight: 900; line-height: 1; margin: 0.25rem 0; } h2, .h2, h4, .h4, h3, .h3 { font-weight: 700; } .hero-card-label, .hero-card-stat { font-weight: 700; } /* Shared component typographic styles */ .btn, .accordion-trigger, .form-label, .hero-card-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } /* Component font sizes */ .btn, .accordion-trigger { font-size: clamp(0.85rem, 1.5vw, 1rem); } /* Margins */ .hero-card-label, .hero-card-text, .hero-card-stat { margin: 0; } /* Lists */ .list-ruled li { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); } .list-ruled li:last-child { border-bottom: none; } /* --------------------------------------------- 5. COLOUR UTILITIES Use these instead of Tailwind arbitrary values e.g. bg-[#f2f2f2] or text-[#888] --------------------------------------------- */ /* Backgrounds */ .bg-white { background-color: var(--color-white); } .bg-light { background-color: var(--color-bg-light); } .bg-mid { background-color: var(--color-bg-mid); } .bg-black { background-color: var(--color-black); } .bg-red { background-color: var(--color-red); } /* Borders */ .border-brand { border-color: var(--color-border); } .border-red { border-color: var(--color-red); } /* --------------------------------------------- 6. BUTTONS Layout only — typography in section 4. Colours kept here due to interactive states. Internal padding uses em (scales with font size). --------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.75em; padding: 0.5em 0.5em 0.5em 1.25em; border-radius: 999px; border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: var(--transition); } /* Icon circle — em so it scales with button font size */ .btn .btn-icon { display: flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: 50%; flex-shrink: 0; overflow: hidden; transition: var(--transition); } .btn .btn-icon i { font-size: 1.2em; display: block; line-height: 1; } .btn:hover, .btn:focus { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Primary — red pill, white circle, red chevron */ .btn-primary { background-color: var(--color-red); border-color: var(--color-red); color: var(--color-white); } .btn-primary .btn-icon { background-color: var(--color-white); color: var(--color-red); } .btn-primary:hover, .btn-primary:focus { background-color: var(--color-red-dark); border-color: var(--color-red-dark); color: var(--color-white); } .btn-primary:hover .btn-icon, .btn-primary:focus .btn-icon { background-color: var(--color-white); color: var(--color-red-dark); } /* Default and Outline share transparent background */ .btn-default, .btn-outline { background-color: transparent; } /* Default — black outline pill, black circle, white chevron */ .btn-default { border-color: var(--color-black); color: var(--color-black); } .btn-default .btn-icon { background-color: var(--color-black); color: var(--color-white); } .btn-default:hover, .btn-default:focus { background-color: var(--color-black); color: var(--color-white); } .btn-default:hover .btn-icon, .btn-default:focus .btn-icon { background-color: var(--color-white); color: var(--color-black); } /* Outline — for use on dark/image backgrounds */ .btn-outline { border-color: var(--color-white); color: var(--color-white); } .btn-outline .btn-icon { background-color: var(--color-white); color: var(--color-black); } .btn-outline:hover, .btn-outline:focus { background-color: var(--color-white); color: var(--color-black); } .btn-outline:hover .btn-icon, .btn-outline:focus .btn-icon { background-color: var(--color-black); color: var(--color-white); } /* Countdown pill — static badge, no hover/interaction */ .countdown-pill { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.4em 1em; margin-bottom: 0.4em; border-radius: 999px; border: 2px solid var(--color-black); background-color: var(--color-white); font-weight: 700; letter-spacing: 0.05em; color: var(--color-black); width: fit-content; } /* --------------------------------------------- 7. ACCENT LINE --------------------------------------------- */ .accent-line { display: block; width: 3.75rem; height: 4px; background-color: var(--color-red); margin: 0.75rem 0 1.5rem; } .accent-line.center { margin-left: auto; margin-right: auto; } .accent-line.white { background-color: var(--color-white); } /* --------------------------------------------- 8. ACCORDION (Alpine.js) Layout only — typography in section 4. Internal padding uses em (scales with font size). --------------------------------------------- */ .accordion-item { border-bottom: 1px solid var(--color-border); } .accordion-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1em 0; background: none; border: none; cursor: pointer; text-align: left; transition: var(--transition); } .accordion-trigger:hover { color: var(--color-red); } .accordion-trigger svg, .accordion-trigger .icon { flex-shrink: 0; transition: var(--transition); } .accordion-trigger[aria-expanded="true"] svg, .accordion-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); } .accordion-content { overflow: hidden; transition: var(--transition); } .accordion-content-inner { padding: 0 0 1.25em; line-height: 1.7; margin: 0; } /* --------------------------------------------- 9. FORMS Layout only — typography in section 4. Internal padding uses em (scales with font size). --------------------------------------------- */ .form-input { width: 100%; padding: 0.8em 1em; border: 1px solid var(--color-border); border-radius: 0.25rem; background-color: var(--color-white); transition: var(--transition); margin-bottom: 0.75rem; } .form-input:focus { outline: none; border-color: var(--color-red); } .form-label { display: block; margin-bottom: 0.35rem; } /* Offset for sticky header */ #enquire { scroll-margin-top: 5rem; } @media (min-width: 768px) { #enquire { scroll-margin-top: 8rem; } } /* Form wrapper */ .enquire-form { background-color: var(--color-white); border-radius: var(--radius-all-sm); padding: clamp(1.5rem, 4vw, 3rem); max-width: 48rem; margin: 0 auto; } /* HubSpot form overrides */ /* Hide HubSpot heading richtext blocks, show privacy text */ .hbspt-form fieldset.form-columns-0:not(:last-of-type) { display: none; } /* Hide fieldsets containing only hidden inputs */ .hbspt-form fieldset.form-columns-1:has(input[type="hidden"]) { display: none; } /* Fieldset full width */ .hbspt-form fieldset { max-width: 100% !important; margin-bottom: 1rem !important; } /* Column gap — mobile first single column */ .hbspt-form fieldset.form-columns-2 .hs-form-field { box-sizing: border-box; padding-right: 0; width: 100% !important; float: none !important; } .hbspt-form fieldset.form-columns-2 .hs-form-field:last-child { padding-right: 0; padding-left: 0; } /* Clearfix for floats */ .hbspt-form fieldset.form-columns-2::after { content: ''; display: table; clear: both; } /* Desktop — two columns */ @media (min-width: 768px) { .hbspt-form fieldset.form-columns-2 .hs-form-field { width: 50% !important; float: left !important; padding-right: 0.5rem; } .hbspt-form fieldset.form-columns-2 .hs-form-field:last-child { padding-right: 0; padding-left: 0.5rem; } } /* Labels left aligned */ .hbspt-form label { text-align: left !important; display: block; } /* Input full width */ .hbspt-form .hs-input { width: 100% !important; box-sizing: border-box; } /* Fields */ .hbspt-form input[type="text"], .hbspt-form input[type="email"], .hbspt-form input[type="tel"], .hbspt-form select { background-color: var(--color-bg-light); border: 1.5px solid var(--color-border); border-radius: 0.5rem; padding: 1em 1.25em; color: var(--color-black); transition: var(--transition); } .hbspt-form input[type="text"]:focus, .hbspt-form input[type="email"]:focus, .hbspt-form input[type="tel"]:focus, .hbspt-form select:focus { outline: none; border-color: var(--color-red); } /* Privacy text */ .hbspt-form fieldset.form-columns-0:last-of-type .hs-richtext { font-size: clamp(0.65rem, 1vw, 0.75rem); color: var(--color-text-muted); text-align: center; } /* reCAPTCHA */ .hbspt-form .hs_recaptcha { display: flex; justify-content: center; margin-top: 0.5rem; margin-bottom: 0.5rem; } /* Submit button */ .hbspt-form input[type="submit"] { width: auto; padding: 0.85em 2em; background-color: var(--color-red); color: var(--color-white); border: none; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: var(--transition); font-size: clamp(0.85rem, 1.5vw, 1rem); margin-top: 0.5rem; } .hbspt-form input[type="submit"]:hover { background-color: var(--color-red-dark); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Error messages */ .hbspt-form .hs-error-msgs { list-style: none; padding: 0; margin: 0.25rem 0 0; } .hbspt-form .hs-error-msg { color: var(--color-red); text-align: left; font-weight: 400; text-transform: none; letter-spacing: 0; } /* --------------------------------------------- 10. ANIMATIONS Button icon loop — continuous marquee on hover. Scroll animations handled via Alpine.js. --------------------------------------------- */ @keyframes icon-loop { 0% { transform: translateX(-120%); opacity: 0; } 15% { transform: translateX(-60%); opacity: 1; } 85% { transform: translateX(60%); opacity: 1; } 100% { transform: translateX(120%); opacity: 0; } } .btn:hover .btn-icon i, .btn:focus .btn-icon i { animation: icon-loop 0.6s linear infinite; } /* Scroll animations */ .anim-fade-in { opacity: 0; transform: translateY(1rem); transition: opacity 0.7s ease-out, transform 0.7s ease-out; } .anim-fade-in.is-visible { opacity: 1; transform: translateY(0); } .anim-fade-in.anim-from-above { transform: translateY(-1rem); } .anim-delay-100 { transition-delay: 0.1s; } .anim-delay-200 { transition-delay: 0.2s; } .anim-delay-300 { transition-delay: 0.3s; } /* --------------------------------------------- 11. HEADER Fixed header with transparent and sticky states. Transitions smoothly on scroll via Alpine.js. --------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease; padding: 1.5rem 0; } .site-header.is-transparent { background-color: transparent; } .site-header.is-sticky { background-color: var(--color-white); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); padding: 0.5rem 0; } /* Logo transition */ .site-header .site-logo { height: 8rem; width: auto; transition: height 0.3s ease; } .site-header.is-sticky .site-logo { height: 5rem; } /* --------------------------------------------- 12. HERO Layout and shape styles for hero section. min-height kept here to avoid arbitrary values in HTML markup. --------------------------------------------- */ .hero { min-height: 80vh; padding-top: 7rem; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; bottom: -5rem; right: -8rem; width: 30rem; height: 30rem; background-image: url('/library/FitCollege/images/logo-black.svg'); background-size: contain; background-repeat: no-repeat; opacity: 0.07; pointer-events: none; z-index: 0; } .hero-mask-placeholder { position: relative; background-color: var(--color-black); border-radius: var(--radius-lg); max-width: 85%; } .hero-mask-image { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 110%; width: auto; z-index: 1; } /* Hero overlay cards */ .hero-card { position: absolute; padding: 1rem 1.25rem; border-radius: var(--radius-all-sm); min-width: 10rem; z-index: 2; } .hero-card-red { background-color: var(--color-red); top: 20%; right: -3rem; box-shadow: 0 8px 24px rgba(202, 40, 39, 0.3); } .hero-card-white { background-color: var(--color-white); bottom: 20%; left: -3rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .hero-card-red .hero-card-label, .hero-card-red .hero-card-text { color: var(--color-white); } /* Avatars */ .hero-card-avatars { display: flex; margin-bottom: 0.5rem; } .hero-avatar { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--color-white); margin-left: -0.5rem; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .hero-avatar:first-child { margin-left: 0; } .hero-avatar picture { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .hero-avatar picture img, .hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --------------------------------------------- 13. OFFER BANNER --------------------------------------------- */ .offer-banner-card { background-color: var(--color-black); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 3rem); } .offer-banner picture, .offer-banner img { display: block; width: 100%; height: auto; } /* --------------------------------------------- 14. LOGO MARQUEE Continuous RTL scroll via Alpine.js duplication. Client manages one set of logos in HTML only. Edge fades via CSS gradient. Mobile-first — desktop overrides below. --------------------------------------------- */ @keyframes marquee-rtl { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .logo-marquee { padding: 2rem 0; } .logo-marquee-track { overflow: hidden; position: relative; } .logo-marquee-track::before, .logo-marquee-track::after { content: ''; position: absolute; top: 0; bottom: 0; width: 4rem; z-index: 2; pointer-events: none; } .logo-marquee-track::before { left: 0; background: linear-gradient(to right, var(--color-white), transparent); } .logo-marquee-track::after { right: 0; background: linear-gradient(to left, var(--color-white), transparent); } .logo-marquee-inner { display: flex; align-items: center; width: max-content; animation: marquee-rtl 30s linear infinite; } .logo-marquee-item { padding: 0 1.25rem; flex-shrink: 0; } .logo-marquee-item img { height: 3rem; width: auto; object-fit: contain; transition: var(--transition); } @media (min-width: 768px) { .logo-marquee { padding: 3rem 0; } .logo-marquee-track::before, .logo-marquee-track::after { width: 8rem; } .logo-marquee-item { padding: 0 2rem; } .logo-marquee-item img { height: 5rem; } } /* --------------------------------------------- 19. GENERAL CONTENT Reusable layout classes for content sections. --------------------------------------------- */ .student-stories-item { border-radius: var(--radius-all-sm); overflow: hidden; position: relative; aspect-ratio: 9 / 16; } .student-stories-item iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .course-card-image { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-md); object-fit: cover; height: auto; display: block; } /* Handle CMS picture tag wrapping for course images */ .course-card picture { display: block; width: 100%; } .course-card picture img { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-md); object-fit: cover; height: auto; display: block; } .why-fit-image-large { width: 100%; aspect-ratio: 2 / 3; border-radius: var(--radius-lg); object-fit: cover; height: auto; display: block; } /* Handle CMS picture tag wrapping for large portrait image */ .why-fit-image-small-wrapper { border-radius: var(--radius-sm); overflow: hidden; width: 40%; flex-shrink: 0; } .why-fit-image-small-wrapper picture { display: block; width: 100%; height: 100%; } .why-fit-image-small { width: 100%; height: 100%; object-fit: cover; display: block; } /* Content image wrapper — handles CMS picture tag */ .content-image-wrapper { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1 / 1; } .content-image-wrapper picture { display: block; width: 100%; height: 100%; } .content-image-wrapper picture img, .content-image-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Trust widget and manual reviews */ .review-card { border-radius: var(--radius-sm); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; } .review-card-header { display: flex; align-items: center; gap: 0.75rem; } .review-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .review-name { font-weight: 700; font-size: clamp(0.85rem, 1.5vw, 1rem); } .review-text, .review-date { margin: 0; } /* --------------------------------------------- 20. FOOTER --------------------------------------------- */ footer, footer p, footer a { color: var(--color-white); } footer a:hover, footer a:focus { color: var(--color-white); text-decoration: underline; } footer .social-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: transparent; border: 2px solid rgba(255, 255, 255, 0.4); transition: var(--transition); } footer .social-icon:hover, footer .social-icon:focus { background-color: var(--color-red); border-color: var(--color-red); text-decoration: none; }