/* ========================================================= ADMISSIONMANTRA FRONT PAGE CSS IMPORTANT: All global colors, fonts, buttons, radii, shadows, containers and spacing are fetched from style.css :root ========================================================= */ /* ========================================================= 01. HERO SECTION ========================================================= */ .am-hero { position: relative; overflow: hidden; min-height: 690px; display: flex; align-items: center; background: radial-gradient( circle at 83% 35%, rgba(37, 106, 158, .10), transparent 30% ), var(--am-gradient-soft-blue); } /* ========================================================= HERO CONTAINER ========================================================= */ .am-hero__container { width: min( var(--am-container), calc(100% - 48px) ); margin-inline: auto; display: grid; grid-template-columns: minmax(0, .92fr) minmax(500px, 1.08fr); align-items: center; gap: var(--am-space-6); padding: 70px 0 95px; position: relative; z-index: 3; } /* ========================================================= HERO LEFT CONTENT ========================================================= */ .am-hero__content { position: relative; z-index: 5; max-width: 620px; } /* ========================================================= HERO EYEBROW ========================================================= */ .am-hero__eyebrow { display: flex; align-items: center; gap: var(--am-space-3); margin-bottom: var(--am-space-5); color: var(--am-secondary); font-family: var(--am-font); font-size: var(--am-fs-sm); font-weight: var(--am-fw-bold); line-height: var(--am-lh-small); } .am-hero__eyebrow span { width: 8px; height: 8px; display: inline-block; flex-shrink: 0; border-radius: var(--am-radius-circle); background: var(--am-accent); box-shadow: 0 0 0 5px rgba(242, 138, 75, .12); } /* ========================================================= HERO TITLE ========================================================= */ .am-hero__title { max-width: 600px; margin: 0 0 var(--am-space-6); color: var(--am-heading); font-family: var(--am-font-heading); font-size: var(--am-fs-hero); font-weight: var(--am-fw-extrabold); line-height: var(--am-lh-tight); letter-spacing: -.045em; } .am-hero__title strong { display: block; color: var(--am-accent); font-weight: inherit; } .am-hero__title::after { content: ""; width: 75px; height: 4px; display: block; margin-top: var(--am-space-5); border-radius: var(--am-radius-pill); background: var(--am-accent); } /* ========================================================= HERO DESCRIPTION ========================================================= */ .am-hero__description { max-width: 570px; margin: 0 0 var(--am-space-7); color: var(--am-text); font-family: var(--am-font); font-size: var(--am-fs-base); font-weight: var(--am-fw-regular); line-height: var(--am-lh-body); } /* ========================================================= HERO FEATURES ========================================================= */ .am-hero__features { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--am-space-3); margin-bottom: var(--am-space-7); } .am-hero__feature { display: flex; flex-direction: column; align-items: center; gap: var(--am-space-2); text-align: center; } .am-hero__feature-icon { width: var(--am-icon-md); height: var(--am-icon-md); display: flex; align-items: center; justify-content: center; color: var(--am-primary); background: var(--am-secondary-light); border-radius: var(--am-radius-circle); font-size: var(--am-fs-md); } .am-hero__feature span { color: var(--am-heading); font-family: var(--am-font); font-size: 11.5px; font-weight: var(--am-fw-semibold); line-height: 1.35; } /* ========================================================= HERO ACTIONS ========================================================= */ .am-hero__actions { display: flex; align-items: center; gap: var(--am-space-6); margin-bottom: var(--am-space-7); } /* IMPORTANT: This button uses the SAME ROOT values as .am-btn--primary */ .am-hero__primary-btn { min-height: var(--am-btn-height-lg); display: inline-flex; align-items: center; justify-content: center; gap: var(--am-space-3); padding: var(--am-btn-padding-lg); color: var(--am-white); background: var(--am-gradient-accent); border: 1px solid var(--am-accent); border-radius: var(--am-btn-radius); font-family: var(--am-font); font-size: var(--am-btn-font-size); font-weight: var(--am-btn-font-weight); line-height: 1; box-shadow: var(--am-shadow-accent); transition: background var(--am-transition), border-color var(--am-transition), transform var(--am-transition), box-shadow var(--am-transition); } .am-hero__primary-btn:hover { color: var(--am-white); background: var(--am-accent-hover); border-color: var(--am-accent-hover); transform: translateY(-2px); box-shadow: var(--am-shadow-lg); } .am-hero__primary-btn span { font-size: var(--am-fs-lg); transition: transform var(--am-transition-fast); } .am-hero__primary-btn:hover span { transform: translateX(4px); } /* ========================================================= HERO STORY BUTTON ========================================================= */ .am-hero__story-btn { display: inline-flex; align-items: center; gap: var(--am-space-3); color: var(--am-primary); font-family: var(--am-font); font-size: var(--am-btn-font-size); font-weight: var(--am-fw-bold); } .am-hero__story-btn:hover { color: var(--am-secondary); } .am-hero__play { width: var(--am-icon-md); height: var(--am-icon-md); display: inline-flex; align-items: center; justify-content: center; padding-left: 2px; color: var(--am-white); background: var(--am-secondary); border-radius: var(--am-radius-circle); font-size: var(--am-fs-xs); box-shadow: var(--am-shadow-sm); transition: transform var(--am-transition); } .am-hero__story-btn:hover .am-hero__play { transform: scale(1.08); } /* ========================================================= HERO STATS ========================================================= */ .am-hero__stats { display: flex; align-items: stretch; } .am-hero__stat { min-width: 130px; padding: 0 var(--am-space-6); border-right: 1px solid var(--am-border-primary); } .am-hero__stat:first-child { padding-left: 0; } .am-hero__stat:last-child { border-right: 0; } .am-hero__stat strong { display: block; color: var(--am-secondary); font-family: var(--am-font-heading); font-size: 28px; font-weight: var(--am-fw-extrabold); line-height: 1.1; } .am-hero__stat span { display: block; margin-top: var(--am-space-1); color: var(--am-text); font-size: 11.5px; } /* ========================================================= HERO RIGHT VISUAL ========================================================= */ .am-hero__visual { position: relative; min-height: 570px; display: flex; align-items: flex-end; justify-content: center; } /* ========================================================= HERO CIRCLES ========================================================= */ .am-hero__circle { position: absolute; border-radius: var(--am-radius-circle); pointer-events: none; } .am-hero__circle--one { width: 540px; height: 540px; right: 25px; top: 5px; background: linear-gradient( 145deg, var(--am-bg-blue-2), #B9DDF1 ); } .am-hero__circle--two { width: 385px; height: 385px; right: -20px; top: -75px; border: 45px solid rgba(242, 138, 75, .12); } /* ========================================================= HERO STUDENTS IMAGE ========================================================= */ .am-hero__image-wrap { position: relative; z-index: 3; width: 100%; height: 570px; display: flex; align-items: flex-end; justify-content: center; } .am-hero__image { width: 100%; max-width: 700px; max-height: 570px; object-fit: contain; object-position: center bottom; filter: drop-shadow( 0 22px 30px rgba(21, 58, 91, .12) ); } /* ========================================================= HERO NOTE ========================================================= */ .am-hero__note { position: absolute; z-index: 5; right: 5px; top: 45px; color: var(--am-secondary); font-family: var(--am-font); font-size: var(--am-fs-md); font-weight: var(--am-fw-semibold); font-style: italic; line-height: var(--am-lh-title); text-align: center; transform: rotate(-5deg); } .am-hero__note span { display: block; color: var(--am-primary); font-size: var(--am-fs-lg); } /* ========================================================= HERO ORANGE BADGE ========================================================= */ .am-hero__badge { position: absolute; z-index: 6; right: 0; top: 205px; width: 98px; height: 98px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--am-white); background: var(--am-gradient-accent); border: 4px solid rgba(255, 255, 255, .92); border-radius: var(--am-radius-circle); box-shadow: var(--am-shadow-accent); font-family: var(--am-font); font-size: var(--am-fs-sm); font-weight: var(--am-fw-bold); line-height: 1.25; transform: rotate(-5deg); } /* ========================================================= HERO COURSE PANEL ========================================================= */ .am-hero__courses { position: absolute; z-index: 10; left: 50%; bottom: 0; width: min(560px, 94%); display: grid; grid-template-columns: repeat(4, 1fr); padding: var(--am-space-3); background: rgba(255, 255, 255, .96); border: 1px solid var(--am-border); border-radius: var(--am-radius-lg); box-shadow: var(--am-shadow-lg); transform: translateX(-50%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .am-hero__course { min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--am-space-1); padding: var(--am-space-3); color: var(--am-heading); text-align: center; border-right: 1px solid var(--am-border); transition: background var(--am-transition-fast), transform var(--am-transition-fast); } .am-hero__course:last-child { border-right: 0; } .am-hero__course:hover { color: var(--am-primary); background: var(--am-bg-blue); border-radius: var(--am-radius-md); transform: translateY(-3px); } .am-hero__course-icon { color: var(--am-secondary); font-size: var(--am-fs-xl); } .am-hero__course > span:last-child { font-size: 12.5px; font-weight: var(--am-fw-bold); } .am-hero__course small { display: block; margin-top: 2px; color: var(--am-text); font-size: 10px; font-weight: var(--am-fw-medium); } /* ========================================================= HERO DOTS ========================================================= */ .am-hero__dots { position: absolute; z-index: 1; width: 115px; height: 90px; right: 0; bottom: 105px; opacity: .45; background-image: radial-gradient( var(--am-secondary) 1.3px, transparent 1.3px ); background-size: 13px 13px; } /* ========================================================= HERO BOTTOM WAVE ========================================================= */ .am-hero__bottom-wave { position: absolute; left: -5%; right: -5%; bottom: -95px; height: 150px; background: rgba(255, 255, 255, .55); border-radius: 50% 50% 0 0; transform: rotate(-2deg); } /* ========================================================= HERO RESPONSIVE MOBILE / TABLET FIX Keep this immediately before 02. ADMISSION OPTIONS. ========================================================= */ /* ========================================================= TABLET / SMALL LAPTOP ========================================================= */ @media (max-width: 1050px) { .am-hero { min-height: auto; display: block; } .am-hero__container { width: min( var(--am-container), calc(100% - 40px) ); grid-template-columns: 1fr; gap: var(--am-space-7); padding: var(--am-section-space-tablet) 0 var(--am-space-9); } .am-hero__content { width: 100%; max-width: 760px; } .am-hero__title { max-width: 720px; } .am-hero__description { max-width: 680px; } .am-hero__features { max-width: 680px; } .am-hero__visual { width: 100%; max-width: 760px; min-height: 590px; margin-inline: auto; } .am-hero__image-wrap { height: 560px; } .am-hero__image { max-width: 680px; max-height: 550px; } .am-hero__circle--one { width: 520px; height: 520px; left: 50%; right: auto; top: 10px; transform: translateX(-50%); } .am-hero__circle--two { width: 350px; height: 350px; right: 3%; top: -40px; } .am-hero__note { right: 4%; } .am-hero__badge { right: 3%; } .am-hero__courses { width: min(560px, 92%); } } /* ========================================================= MOBILE LANDSCAPE / LARGE MOBILE ========================================================= */ @media (max-width: 767px) { .am-hero { min-height: auto; display: block; overflow: hidden; background: linear-gradient( 180deg, var(--am-bg-soft), var(--am-bg-blue) ); } .am-hero__container { width: calc(100% - 30px); display: block; padding: var(--am-space-7) 0 var(--am-space-6); } /* ----------------------------- CONTENT ----------------------------- */ .am-hero__content { width: 100%; max-width: none; } .am-hero__eyebrow { gap: var(--am-space-2); margin-bottom: var(--am-space-4); font-size: var(--am-fs-xs); line-height: var(--am-lh-small); } .am-hero__eyebrow span { width: 7px; height: 7px; } .am-hero__title { max-width: none; margin-bottom: var(--am-space-4); font-size: clamp( 36px, 10vw, 48px ); line-height: 1.03; letter-spacing: -.035em; } .am-hero__title strong { display: block; } .am-hero__title::after { width: 58px; height: 3px; margin-top: var(--am-space-4); } .am-hero__description { max-width: none; margin-bottom: var(--am-space-5); font-size: var(--am-fs-sm); line-height: var(--am-lh-body); } /* ----------------------------- FEATURES ----------------------------- */ .am-hero__features { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--am-space-3); margin-bottom: var(--am-space-6); } .am-hero__feature { min-width: 0; align-items: flex-start; flex-direction: row; gap: var(--am-space-2); padding: var(--am-space-3); border: 1px solid var(--am-border); border-radius: var(--am-radius-md); background: color-mix( in srgb, var(--am-white) 86%, transparent ); text-align: left; } .am-hero__feature-icon { width: var(--am-icon-sm); height: var(--am-icon-sm); flex-shrink: 0; font-size: var(--am-fs-sm); } .am-hero__feature span { min-width: 0; font-size: var(--am-fs-xs); line-height: var(--am-lh-small); } /* ----------------------------- ACTIONS ----------------------------- */ .am-hero__actions { width: 100%; align-items: stretch; flex-direction: column; gap: var(--am-space-3); margin-bottom: var(--am-space-6); } .am-hero__primary-btn { width: 100%; min-height: var(--am-btn-height-lg); justify-content: center; } .am-hero__story-btn { width: 100%; min-height: var(--am-btn-height); justify-content: center; padding: var(--am-space-2) var(--am-space-3); border: 1px solid var(--am-border); border-radius: var(--am-btn-radius); background: var(--am-white); } /* ----------------------------- STATS ----------------------------- */ .am-hero__stats { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; overflow: hidden; border: 1px solid var(--am-border); border-radius: var(--am-radius-md); background: var(--am-white); box-shadow: var(--am-shadow-sm); } .am-hero__stat { min-width: 0; padding: var(--am-space-3) var(--am-space-2); border-right: 1px solid var(--am-border); text-align: center; } .am-hero__stat:first-child { padding-left: var(--am-space-2); } .am-hero__stat:last-child { border-right: 0; } .am-hero__stat strong { font-size: var(--am-fs-lg); } .am-hero__stat span { margin-top: var(--am-space-1); font-size: var(--am-fs-xs); line-height: var(--am-lh-small); } /* ----------------------------- VISUAL ----------------------------- */ .am-hero__visual { width: 100%; max-width: none; min-height: 0; display: block; margin: var(--am-space-7) auto 0; } .am-hero__image-wrap { width: 100%; height: clamp( 300px, 92vw, 430px ); position: relative; display: flex; align-items: flex-end; justify-content: center; } .am-hero__image { width: 100%; max-width: 560px; max-height: 100%; object-fit: contain; object-position: center bottom; } /* ----------------------------- DECORATIVE CIRCLES ----------------------------- */ .am-hero__circle--one { width: min( 86vw, 390px ); height: min( 86vw, 390px ); left: 50%; right: auto; top: 15px; transform: translateX(-50%); } .am-hero__circle--two { width: min( 62vw, 270px ); height: min( 62vw, 270px ); right: -10%; top: -15px; border-width: 28px; } .am-hero__note, .am-hero__badge, .am-hero__dots, .am-hero__bottom-wave { display: none; } /* ----------------------------- COURSE PANEL On mobile it becomes a normal block under the student image. ----------------------------- */ .am-hero__courses { position: relative; left: auto; bottom: auto; width: 100%; margin-top: var(--am-space-3); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--am-space-2); transform: none; border-radius: var(--am-radius-md); backdrop-filter: none; -webkit-backdrop-filter: none; } .am-hero__course { min-height: 82px; padding: var(--am-space-3) var(--am-space-2); border-right: 1px solid var(--am-border); border-bottom: 1px solid var(--am-border); } .am-hero__course:nth-child(2n) { border-right: 0; } .am-hero__course:nth-last-child(-n + 2) { border-bottom: 0; } .am-hero__course-icon { font-size: var(--am-fs-lg); } .am-hero__course > span:last-child { font-size: var(--am-fs-xs); } .am-hero__course small { font-size: var(--am-fs-xs); } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .am-hero__container { width: calc( 100% - 24px ); padding-top: var(--am-space-6); } .am-hero__title { font-size: clamp( 33px, 10.5vw, 42px ); } .am-hero__description { font-size: var(--am-fs-sm); } .am-hero__features { gap: var(--am-space-2); } .am-hero__feature { padding: var(--am-space-2); } .am-hero__feature span { font-size: var(--am-fs-xs); } .am-hero__stat { padding: var(--am-space-3) var(--am-space-1); } .am-hero__stat strong { font-size: var(--am-fs-base); } .am-hero__stat span { font-size: var(--am-fs-xs); } .am-hero__visual { margin-top: var(--am-space-6); } .am-hero__image-wrap { height: clamp( 270px, 92vw, 360px ); } .am-hero__circle--one { width: min( 82vw, 330px ); height: min( 82vw, 330px ); } .am-hero__circle--two { width: min( 58vw, 230px ); height: min( 58vw, 230px ); } .am-hero__courses { gap: 0; } .am-hero__course { min-height: 76px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .am-hero__features { grid-template-columns: 1fr; } .am-hero__stats { grid-template-columns: 1fr; } .am-hero__stat, .am-hero__stat:first-child { padding: var(--am-space-3); border-right: 0; border-bottom: 1px solid var(--am-border); } .am-hero__stat:last-child { border-bottom: 0; } .am-hero__courses { grid-template-columns: 1fr; } .am-hero__course, .am-hero__course:nth-child(2n), .am-hero__course:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid var(--am-border); } .am-hero__course:last-child { border-bottom: 0; } } /* ========================================================= 02. ADMISSION OPTIONS LEFT EDITORIAL + 3x2 COURSE GRID All design tokens come from style.css :root ========================================================= */ /* ========================================================= SECTION ========================================================= */ .am-paths { position: relative; overflow: hidden; padding: var(--am-section-space) 0; background: linear-gradient( 180deg, var(--am-white), var(--am-bg-soft) ); } /* ========================================================= CONTAINER ========================================================= */ .am-paths__container { position: relative; z-index: 2; width: min( var(--am-container-wide), calc(100% - 48px) ); margin-inline: auto; } /* ========================================================= DECORATIONS ========================================================= */ .am-paths__decor { position: absolute; pointer-events: none; border-radius: var(--am-radius-circle); } .am-paths__decor--left { width: 430px; height: 430px; left: -290px; top: -180px; background: var(--am-bg-blue); opacity: .72; } .am-paths__decor--right { width: 500px; height: 500px; right: -360px; bottom: -300px; border: 70px solid var(--am-medical-soft); opacity: .55; } /* ========================================================= MAIN LAYOUT ========================================================= */ .am-paths__layout { display: grid; grid-template-columns: minmax(310px, .72fr) minmax(0, 1.48fr); gap: var(--am-space-9); align-items: start; } /* ========================================================= LEFT CONTENT ========================================================= */ .am-paths__content { position: sticky; top: calc( var(--am-space-9) + var(--am-space-8) ); padding-top: var(--am-space-4); } /* ========================================================= EYEBROW ========================================================= */ .am-paths__eyebrow { display: flex; align-items: center; gap: var(--am-space-3); margin-bottom: var(--am-space-4); color: var(--am-secondary); font-family: var(--am-font); font-size: var(--am-fs-xs); font-weight: var(--am-fw-extrabold); letter-spacing: var(--am-ls-eyebrow); text-transform: uppercase; } .am-paths__eyebrow::before { content: ""; width: 42px; height: 2px; flex-shrink: 0; border-radius: var(--am-radius-pill); background: var(--am-accent); } /* ========================================================= TITLE ========================================================= */ .am-paths__title { max-width: 520px; margin: 0; color: var(--am-primary); font-family: var(--am-font-heading); font-size: var(--am-fs-h2); font-weight: var(--am-fw-extrabold); line-height: var(--am-lh-tight); letter-spacing: var(--am-ls-heading); } .am-paths__title strong { display: block; color: var(--am-accent); font-weight: inherit; } /* ========================================================= INTRO ========================================================= */ .am-paths__intro { max-width: 520px; margin: var(--am-space-5) 0 0; color: var(--am-text); font-family: var(--am-font); font-size: var(--am-fs-base); font-weight: var(--am-fw-regular); line-height: var(--am-lh-body); } /* ========================================================= BENEFITS ========================================================= */ .am-paths__benefits { display: grid; gap: var(--am-space-5); margin-top: var(--am-space-7); } .am-path-benefit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--am-space-4); align-items: center; } /* ========================================================= BENEFIT ICON ========================================================= */ .am-path-benefit__icon { width: var(--am-icon-lg); height: var(--am-icon-lg); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--am-secondary); background: var(--am-bg-blue); border: 1px solid var(--am-border); border-radius: var(--am-radius-circle); font-size: var(--am-fs-lg); } .am-path-benefit:nth-child(2) .am-path-benefit__icon { color: var(--am-accent); background: var(--am-engineering-soft); } .am-path-benefit:nth-child(3) .am-path-benefit__icon { color: var(--am-management); background: var(--am-management-soft); } /* ========================================================= BENEFIT CONTENT ========================================================= */ .am-path-benefit strong, .am-path-benefit span { display: block; } .am-path-benefit strong { color: var(--am-heading); font-family: var(--am-font-heading); font-size: var(--am-fs-base); font-weight: var(--am-fw-bold); line-height: var(--am-lh-title); } .am-path-benefit span { max-width: 410px; margin-top: var(--am-space-1); color: var(--am-text); font-size: var(--am-fs-sm); line-height: var(--am-lh-small); } /* ========================================================= LEFT CTA ========================================================= */ .am-paths__actions { margin-top: var(--am-space-7); } .am-paths__cta { min-width: 230px; justify-content: center; } /* ========================================================= TRUST NOTE ========================================================= */ .am-paths__trust-note { display: flex; align-items: center; gap: var(--am-space-3); margin-top: var(--am-space-5); color: var(--am-text); font-size: var(--am-fs-xs); font-weight: var(--am-fw-medium); line-height: var(--am-lh-small); } .am-paths__trust-icon { width: var(--am-icon-sm); height: var(--am-icon-sm); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--am-white); background: var(--am-secondary); border-radius: var(--am-radius-circle); font-size: var(--am-fs-xs); font-weight: var(--am-fw-bold); } /* ========================================================= COURSE GRID ========================================================= */ .am-paths__grid { display: grid; grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: var(--am-space-4); } /* ========================================================= COURSE CARD ========================================================= */ .am-path-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--am-border); border-radius: var(--am-radius-lg); background: var(--am-white); box-shadow: var(--am-shadow-sm); transition: transform var(--am-transition), box-shadow var(--am-transition), border-color var(--am-transition); } .am-path-card:hover { transform: translateY(-7px); border-color: var(--am-border-dark); box-shadow: var(--am-shadow-lg); } /* ========================================================= FULL CARD LINK ========================================================= */ .am-path-card__link { min-height: 100%; display: flex; flex-direction: column; color: inherit; } /* ========================================================= CATEGORY SOFT BACKGROUNDS ========================================================= */ .am-path-card--medical { background: linear-gradient( 180deg, var(--am-medical-soft), var(--am-white) ); } .am-path-card--engineering { background: linear-gradient( 180deg, var(--am-engineering-soft), var(--am-white) ); } .am-path-card--nursing { background: linear-gradient( 180deg, var(--am-nursing-soft), var(--am-white) ); } .am-path-card--management { background: linear-gradient( 180deg, var(--am-management-soft), var(--am-white) ); } .am-path-card--allied { background: linear-gradient( 180deg, var(--am-allied-soft), var(--am-white) ); } .am-path-card--law { background: linear-gradient( 180deg, var(--am-law-soft), var(--am-white) ); } /* ========================================================= IMAGE ========================================================= */ .am-path-card__image { position: relative; height: 220px; overflow: hidden; background: var(--am-bg-soft); } .am-path-card__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 55%, var(--am-primary) ); opacity: .06; pointer-events: none; } .am-path-card__image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; transition: transform var(--am-transition-slow); } .am-path-card:hover .am-path-card__image img { transform: scale(1.045); } /* ========================================================= CARD NUMBER ========================================================= */ .am-path-card__number { position: absolute; z-index: 3; left: var(--am-space-4); top: var(--am-space-4); color: var(--am-primary); font-family: var(--am-font-heading); font-size: var(--am-fs-sm); font-weight: var(--am-fw-extrabold); opacity: .38; } /* ========================================================= IMAGE NOTE ========================================================= */ .am-path-card__note { position: absolute; z-index: 3; right: var(--am-space-4); top: var(--am-space-4); max-width: 110px; color: var(--am-primary); font-size: var(--am-fs-xs); font-weight: var(--am-fw-semibold); font-style: italic; line-height: var(--am-lh-small); text-align: right; transform: rotate(-4deg); } /* ========================================================= FLOATING ICON ========================================================= */ .am-path-card__icon { position: relative; z-index: 5; width: var(--am-icon-lg); height: var(--am-icon-lg); margin: calc( var(--am-icon-lg) / -2 ) 0 0 var(--am-space-5); display: inline-flex; align-items: center; justify-content: center; color: var(--am-white); border: 4px solid var(--am-white); border-radius: var(--am-radius-circle); box-shadow: var(--am-shadow-md); font-size: var(--am-fs-lg); } /* MEDICAL */ .am-path-card--medical .am-path-card__icon { background: var(--am-medical); } /* ENGINEERING */ .am-path-card--engineering .am-path-card__icon { background: var(--am-engineering); } /* NURSING */ .am-path-card--nursing .am-path-card__icon { background: var(--am-nursing); } /* MANAGEMENT */ .am-path-card--management .am-path-card__icon { background: var(--am-management); } /* ALLIED */ .am-path-card--allied .am-path-card__icon { background: var(--am-allied); } /* LAW */ .am-path-card--law .am-path-card__icon { background: var(--am-law); } /* ========================================================= CARD BODY ========================================================= */ .am-path-card__body { flex: 1; display: flex; flex-direction: column; padding: var(--am-space-4) var(--am-space-5) var(--am-space-5); } /* ========================================================= CARD TITLE ========================================================= */ .am-path-card__body h3 { min-height: 52px; margin: 0; color: var(--am-primary); font-family: var(--am-font-heading); font-size: var(--am-fs-lg); font-weight: var(--am-fw-extrabold); line-height: var(--am-lh-title); letter-spacing: var(--am-ls-title); } /* ========================================================= CARD DESCRIPTION ========================================================= */ .am-path-card__body p { min-height: 52px; margin: var(--am-space-2) 0 var(--am-space-4); color: var(--am-text); font-family: var(--am-font); font-size: var(--am-fs-sm); font-weight: var(--am-fw-regular); line-height: var(--am-lh-small); } /* ========================================================= EXPLORE LINK ========================================================= */ .am-path-card__explore { margin-top: auto; display: inline-flex; align-items: center; gap: var(--am-space-2); color: var(--am-secondary); font-size: var(--am-fs-sm); font-weight: var(--am-fw-bold); line-height: 1; } /* ========================================================= CATEGORY LINK COLORS ========================================================= */ .am-path-card--medical .am-path-card__explore { color: var(--am-medical); } .am-path-card--engineering .am-path-card__explore { color: var(--am-engineering); } .am-path-card--nursing .am-path-card__explore { color: var(--am-nursing); } .am-path-card--management .am-path-card__explore { color: var(--am-management); } .am-path-card--allied .am-path-card__explore { color: var(--am-allied); } .am-path-card--law .am-path-card__explore { color: var(--am-law); } .am-path-card__explore i { font-style: normal; font-size: var(--am-fs-lg); transition: transform var(--am-transition-fast); } .am-path-card:hover .am-path-card__explore i { transform: translateX(5px); } /* ========================================================= BOTTOM CTA ========================================================= */ .am-paths__bottom { margin-top: var(--am-space-7); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--am-space-4); align-items: center; padding: var(--am-space-5); background: linear-gradient( 135deg, var(--am-bg-blue), var(--am-bg-soft) ); border: 1px solid var(--am-border); border-radius: var(--am-radius-lg); box-shadow: var(--am-shadow-sm); } /* ========================================================= BOTTOM ICON ========================================================= */ .am-paths__bottom-icon { width: var(--am-icon-lg); height: var(--am-icon-lg); display: inline-flex; align-items: center; justify-content: center; color: var(--am-secondary); background: var(--am-white); border-radius: var(--am-radius-circle); box-shadow: var(--am-shadow-sm); font-size: var(--am-fs-lg); } /* ========================================================= BOTTOM COPY ========================================================= */ .am-paths__bottom-copy strong, .am-paths__bottom-copy span { display: block; } .am-paths__bottom-copy strong { color: var(--am-primary); font-family: var(--am-font-heading); font-size: var(--am-fs-lg); font-weight: var(--am-fw-extrabold); line-height: var(--am-lh-title); } .am-paths__bottom-copy span { margin-top: var(--am-space-1); color: var(--am-text); font-size: var(--am-fs-sm); line-height: var(--am-lh-small); } /* ========================================================= RESPONSIVE — LARGE TABLET ========================================================= */ @media (max-width: 1200px) { .am-paths__layout { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: var(--am-space-7); } .am-paths__grid { grid-template-columns: repeat( 2, minmax(0, 1fr) ); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .am-paths { padding: var(--am-section-space-tablet) 0; } .am-paths__layout { grid-template-columns: 1fr; gap: var(--am-space-8); } .am-paths__content { position: static; max-width: 760px; padding-top: 0; } .am-paths__title { max-width: 650px; } .am-paths__intro { max-width: 680px; } .am-paths__benefits { grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: var(--am-space-4); } .am-path-benefit { grid-template-columns: 1fr; align-items: start; padding: var(--am-space-4); border: 1px solid var(--am-border); border-radius: var(--am-radius-md); background: var(--am-white); box-shadow: var(--am-shadow-sm); } } /* ========================================================= SMALL TABLET ========================================================= */ @media (max-width: 700px) { .am-paths__container { width: calc( 100% - 30px ); } .am-paths__benefits { grid-template-columns: 1fr; } .am-path-benefit { grid-template-columns: auto minmax(0, 1fr); } .am-paths__grid { grid-template-columns: 1fr; } .am-path-card__image { height: 300px; } .am-path-card__body h3, .am-path-card__body p { min-height: auto; } .am-paths__bottom { grid-template-columns: auto 1fr; } .am-paths__bottom .am-btn { grid-column: 1 / -1; width: 100%; justify-content: center; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 520px) { .am-paths { padding: var(--am-section-space-mobile) 0; } .am-paths__eyebrow { font-size: var(--am-fs-xs); } .am-paths__title { font-size: var(--am-fs-h2); } .am-paths__intro { font-size: var(--am-fs-sm); } .am-paths__actions .am-btn { width: 100%; justify-content: center; } .am-path-card__image { height: 260px; } .am-path-card__note { display: none; } .am-paths__bottom { grid-template-columns: 1fr; text-align: center; padding: var(--am-space-5) var(--am-space-4); } .am-paths__bottom-icon { margin-inline: auto; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .am-path-card, .am-path-card__image img, .am-path-card__explore i { transition: none; } } /* ========================================================= 03. ADMISSION JOURNEY SECTION Uses master root from style.css ========================================================= */ .am-journey { position: relative; overflow: hidden; background: linear-gradient( 180deg, var(--am-bg-soft) 0%, var(--am-white) 100% ); } /* ========================================================= HEADING EXTRA ========================================================= */ .am-journey__heading { margin-bottom: var(--am-space-8); } .am-journey__mini-title { margin-top: var(--am-space-2); color: var(--am-heading); font-family: var(--am-font-heading); font-size: clamp(24px, 2vw, 34px); font-weight: var(--am-fw-bold); line-height: 1.2; text-align: center; } /* ========================================================= STAGE AREA ========================================================= */ .am-journey__stage { position: relative; padding: var(--am-space-2) 0 var(--am-space-10); } /* ========================================================= DECORATIVE NOTES ========================================================= */ .am-journey__note { position: absolute; z-index: 1; color: var(--am-secondary); font-size: 17px; font-weight: var(--am-fw-medium); font-style: italic; line-height: 1.25; text-align: center; opacity: .95; pointer-events: none; } .am-journey__note::after { content: ""; position: absolute; width: 22px; height: 22px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 0 0 0 14px; } .am-journey__note--left { left: -8px; top: 110px; transform: rotate(-7deg); } .am-journey__note--left::after { left: -10px; bottom: -22px; transform: rotate(-30deg); } .am-journey__note--right { right: -2px; top: 108px; color: var(--am-primary); transform: rotate(4deg); } .am-journey__note--right::after { right: -6px; bottom: -16px; transform: scaleX(-1) rotate(-30deg); } .am-journey__note--bottom { left: 50%; bottom: 86px; color: var(--am-primary); transform: translateX(-50%) rotate(-6deg); } .am-journey__note--bottom::after { left: 50%; bottom: -24px; width: 48px; height: 18px; border-left: 0; border-bottom: 2px solid currentColor; border-radius: 0 0 18px 18px; transform: translateX(-50%); } /* ========================================================= CARDS WRAP ========================================================= */ .am-journey__cards { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding: var(--am-space-4) 20px 0; margin-top: var(--am-space-4); } /* ========================================================= CARD BASE ========================================================= */ .am-journey-card { --journey-accent: var(--am-secondary); --journey-soft: var(--am-bg-blue); position: relative; width: 100%; max-width: 290px; min-width: 0; overflow: hidden; background: var(--am-white); border: 3px solid var(--journey-accent); border-radius: 28px; box-shadow: var(--am-shadow-lg); transition: transform var(--am-transition-slow), box-shadow var(--am-transition), border-color var(--am-transition); } .am-journey-card + .am-journey-card { margin-left: -18px; } .am-journey-card:hover { transform: translateY(-18px) rotate(0deg) !important; box-shadow: var(--am-shadow-xl); } /* ========================================================= INDIVIDUAL CARD COLORS + ROTATIONS ========================================================= */ .am-journey-card--profile { --journey-accent: var(--am-medical); --journey-soft: var(--am-medical-soft); transform: rotate(-6deg) translateY(6px); z-index: 1; } .am-journey-card--shortlisting { --journey-accent: var(--am-engineering); --journey-soft: var(--am-engineering-soft); transform: rotate(4deg) translateY(32px); z-index: 2; } .am-journey-card--counselling { --journey-accent: #25B857; --journey-soft: #EAF9EF; transform: rotate(-1deg) translateY(0); z-index: 4; } .am-journey-card--documents { --journey-accent: var(--am-allied); --journey-soft: var(--am-allied-soft); transform: rotate(4deg) translateY(26px); z-index: 3; } .am-journey-card--confirmed { --journey-accent: var(--am-law); --journey-soft: var(--am-law-soft); transform: rotate(5deg) translateY(10px); z-index: 1; } /* ========================================================= CARD MEDIA ========================================================= */ .am-journey-card__media { position: relative; padding: 14px 14px 0; } .am-journey-card__media img { width: 100%; height: 268px; display: block; object-fit: cover; object-position: center top; border-radius: 20px; } /* ========================================================= STEP CHIP ========================================================= */ .am-journey-card__step { position: absolute; left: 26px; top: 24px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(255, 255, 255, .96); border: 1px solid rgba(255, 255, 255, .95); border-radius: 18px; box-shadow: var(--am-shadow-sm); } .am-journey-card__step-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--journey-accent); background: var(--journey-soft); border-radius: var(--am-radius-circle); font-size: 14px; } .am-journey-card__step-text { display: flex; flex-direction: column; line-height: 1.15; } .am-journey-card__step-text strong { color: var(--am-primary); font-size: 12px; font-weight: var(--am-fw-bold); } .am-journey-card__step-text small { color: var(--am-heading); font-size: 11px; font-weight: var(--am-fw-medium); } /* ========================================================= CARD BODY ========================================================= */ .am-journey-card__body { padding: 18px 20px 16px; } .am-journey-card__body h3 { margin: 0 0 10px; color: var(--am-heading); font-size: 20px; font-weight: var(--am-fw-extrabold); line-height: 1.12; letter-spacing: -.03em; } .am-journey-card__body p { margin: 0; color: var(--am-text-dark); font-size: 13px; font-weight: var(--am-fw-regular); line-height: 1.55; } /* ========================================================= CARD META ========================================================= */ .am-journey-card__meta { display: flex; align-items: center; gap: 12px; margin-top: 16px; } .am-journey-card__meta-main { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--journey-accent); background: var(--journey-soft); border-radius: var(--am-radius-circle); font-size: 15px; } .am-journey-card__dots { display: inline-flex; align-items: center; gap: 6px; } .am-journey-card__dots i { width: 10px; height: 10px; display: block; background: #C9D0DA; border-radius: var(--am-radius-circle); } /* ========================================================= CARD FOOTER STRIP ========================================================= */ .am-journey-card__footer { display: flex; align-items: center; gap: 10px; padding: 13px 18px; color: var(--am-primary); background: var(--journey-soft); border-top: 1px solid rgba(21, 58, 91, .08); font-size: 12.5px; font-weight: var(--am-fw-semibold); line-height: 1.4; } .am-journey-card__footer span { color: var(--journey-accent); font-size: 13px; } /* ========================================================= BOTTOM AREA ========================================================= */ .am-journey__bottom { position: relative; z-index: 2; margin-top: var(--am-space-9); display: flex; align-items: center; justify-content: space-between; gap: var(--am-space-6); } .am-journey__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--am-primary); font-size: 20px; font-weight: var(--am-fw-extrabold); line-height: 1; } .am-journey__brand strong { color: var(--am-primary); font-weight: var(--am-fw-extrabold); } .am-journey__brand span { color: #2164E8; font-weight: var(--am-fw-extrabold); } .am-journey__brand-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 24px; } .am-journey__keywords { display: inline-flex; align-items: center; gap: 16px; color: var(--am-primary); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: var(--am-fw-semibold); opacity: .7; } .am-journey__keywords i { width: 4px; height: 4px; display: block; background: currentColor; border-radius: var(--am-radius-circle); } /* ========================================================= 1400 ========================================================= */ @media (max-width: 1400px) { .am-journey-card { max-width: 265px; } .am-journey-card__media img { height: 248px; } } /* ========================================================= 1200 ========================================================= */ @media (max-width: 1200px) { .am-journey__cards { justify-content: flex-start; overflow-x: auto; overflow-y: visible; padding-bottom: 14px; margin-inline: -10px; padding-inline: 10px; scrollbar-width: thin; } .am-journey-card { flex: 0 0 260px; } .am-journey__note--left, .am-journey__note--right { display: none; } } /* ========================================================= 767 ========================================================= */ @media (max-width: 767px) { .am-journey__mini-title { font-size: 22px; } .am-journey__stage { padding-bottom: var(--am-space-8); } .am-journey__cards { margin-top: var(--am-space-3); } .am-journey-card { flex: 0 0 246px; max-width: 246px; } .am-journey-card + .am-journey-card { margin-left: -10px; } .am-journey-card__media img { height: 220px; } .am-journey-card__body { padding: 16px 16px 14px; } .am-journey-card__body h3 { font-size: 18px; } .am-journey-card__body p { font-size: 12.5px; } .am-journey__bottom { align-items: flex-start; flex-direction: column; gap: var(--am-space-4); } .am-journey__note--bottom { display: none; } } /* ========================================================= 580 ========================================================= */ @media (max-width: 580px) { .am-journey__brand { font-size: 17px; } .am-journey__keywords { gap: 10px; font-size: 10px; letter-spacing: .06em; } .am-journey-card { flex: 0 0 225px; max-width: 225px; } .am-journey-card__step { left: 22px; top: 22px; padding: 8px 10px; } .am-journey-card__step-icon { width: 28px; height: 28px; font-size: 13px; } .am-journey-card__step-text strong { font-size: 11.5px; } .am-journey-card__step-text small { font-size: 10px; } } /* ========================================================= HERO LOAD-IN MOTION ========================================================= */ .am-hero__content { animation: amHeroIntroLeft .8s ease both; } .am-hero__visual { animation: amHeroIntroRight .9s ease .08s both; } @keyframes amHeroIntroLeft { from { opacity: 0; transform: translateX(calc(var(--am-space-6) * -1)); } to { opacity: 1; transform: translateX(0); } } @keyframes amHeroIntroRight { from { opacity: 0; transform: translateX(var(--am-space-6)) scale(.98); } to { opacity: 1; transform: translateX(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .am-hero__content, .am-hero__visual { animation: none; } } /* ========================================================= 04. HOMEPAGE MOTION SYSTEM New homepage sections use the master :root in style.css. ========================================================= */ .am-reveal { opacity: 0; transform: translateY(var(--am-space-6)); transition: opacity var(--am-transition-slow), transform var(--am-transition-slow); will-change: opacity, transform; } .am-reveal--left { transform: translateX(calc(var(--am-space-8) * -1)); } .am-reveal--right { transform: translateX(var(--am-space-8)); } .am-reveal--zoom { transform: scale(.94); } .am-reveal--up { transform: translateY(var(--am-space-7)); } .am-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } @media (prefers-reduced-motion: reduce) { .am-reveal, .am-reveal--left, .am-reveal--right, .am-reveal--zoom, .am-reveal--up { opacity: 1; transform: none; transition: none; } } /* ========================================================= 05. OPTIONAL SEASONAL ALERT ========================================================= */ .am-seasonal-alert { background: var(--am-primary); color: var(--am-white); } .am-seasonal-alert__inner { min-height: var(--am-space-9); display: flex; align-items: center; gap: var(--am-space-3); padding-block: var(--am-space-2); font-size: var(--am-fs-sm); } .am-seasonal-alert__dot { width: var(--am-space-2); height: var(--am-space-2); flex: 0 0 auto; border-radius: var(--am-radius-circle); background: var(--am-accent); } .am-seasonal-alert__inner a { margin-left: auto; display: inline-flex; align-items: center; gap: var(--am-space-2); color: var(--am-white); font-weight: var(--am-fw-bold); } /* ========================================================= 06. COMPACT RANK / OPTION ENTRY BAR Matches .am-rankbar* markup in front-page.php ========================================================= */ .am-rankbar { position: relative; z-index: 6; padding: var(--am-space-5) 0; background: var(--am-white); } .am-rankbar__shell { display: grid; grid-template-columns: minmax(240px, 1.15fr) minmax(145px, .7fr) minmax(170px, .9fr) minmax(145px, .72fr) auto; align-items: center; gap: var(--am-space-3); min-height: 84px; padding: var(--am-space-3); border: 1px solid var(--am-border); border-radius: var(--am-radius-lg); background: linear-gradient(135deg, var(--am-primary), var(--am-secondary)); box-shadow: var(--am-shadow-lg); } .am-rankbar__lead { min-width: 0; display: flex; align-items: center; gap: var(--am-space-3); padding-inline: var(--am-space-3); color: var(--am-white); } .am-rankbar__icon { width: var(--am-icon-md); height: var(--am-icon-md); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--am-radius-circle); background: var(--am-accent); color: var(--am-white); font-size: var(--am-fs-lg); font-weight: var(--am-fw-bold); box-shadow: var(--am-shadow-sm); } .am-rankbar__lead strong, .am-rankbar__lead small { display: block; } .am-rankbar__lead strong { color: var(--am-white); font-family: var(--am-font-heading); font-size: var(--am-fs-base); font-weight: var(--am-fw-extrabold); line-height: var(--am-lh-title); } .am-rankbar__lead small { margin-top: var(--am-space-1); color: var(--am-white); opacity: .76; font-size: var(--am-fs-xs); line-height: var(--am-lh-small); } .am-rankbar__field { min-width: 0; display: grid; gap: var(--am-space-1); } .am-rankbar__field > span { padding-left: var(--am-space-2); color: var(--am-white); opacity: .76; font-size: var(--am-fs-xs); font-weight: var(--am-fw-semibold); line-height: 1; } .am-rankbar__field select, .am-rankbar__field input { width: 100%; height: var(--am-input-height); padding-inline: var(--am-space-3); border: 1px solid var(--am-border); border-radius: var(--am-radius-md); background: var(--am-white); color: var(--am-heading); font-family: var(--am-font); font-size: var(--am-fs-sm); outline: none; box-shadow: var(--am-shadow-sm); transition: border-color var(--am-transition-fast), box-shadow var(--am-transition-fast), transform var(--am-transition-fast); } .am-rankbar__field select:focus, .am-rankbar__field input:focus { border-color: var(--am-accent); box-shadow: var(--am-shadow-md); transform: translateY(-1px); } .am-rankbar__button { min-height: var(--am-input-height); white-space: nowrap; justify-content: center; padding-inline: var(--am-space-5); box-shadow: var(--am-shadow-accent); } /* ========================================================= 07. COMPACT HOME PROOF STRIP ========================================================= */ .am-home-proof { padding: 0 0 var(--am-section-space-tablet); background: var(--am-white); } .am-home-proof__shell { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--am-border); border-radius: var(--am-radius-lg); background: var(--am-white); box-shadow: var(--am-shadow-sm); } .am-home-proof__item { min-height: 104px; display: flex; align-items: center; gap: var(--am-space-4); padding: var(--am-space-5); border-right: 1px solid var(--am-border); } .am-home-proof__item:last-child { border-right: 0; } .am-home-proof__mark { min-width: 64px; color: var(--am-accent); font-family: var(--am-font-heading); font-size: var(--am-fs-xl); font-weight: var(--am-fw-extrabold); line-height: 1; } .am-home-proof__item strong, .am-home-proof__item small { display: block; } .am-home-proof__item strong { color: var(--am-heading); font-size: var(--am-fs-base); font-weight: var(--am-fw-bold); } .am-home-proof__item small { margin-top: var(--am-space-1); color: var(--am-text); font-size: var(--am-fs-xs); line-height: var(--am-lh-small); } /* ========================================================= 08. PREMIUM FOUNDER / TRUST STORY ========================================================= */ .am-founder-premium { position: relative; overflow: hidden; background: var(--am-white); } .am-founder-premium::before { content: ""; position: absolute; width: 420px; height: 420px; right: -250px; top: -240px; border-radius: var(--am-radius-circle); background: var(--am-bg-blue); pointer-events: none; } .am-founder-premium__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(380px, .88fr) minmax(0, 1.12fr); gap: var(--am-space-10); align-items: center; } .am-founder-premium__visual { position: relative; } .am-founder-premium__frame { position: relative; min-height: 610px; overflow: hidden; border: 1px solid var(--am-border); border-radius: var(--am-radius-lg); background: linear-gradient(145deg, var(--am-bg-blue), var(--am-bg-soft)); box-shadow: var(--am-shadow-xl); } .am-founder-premium__frame::before { content: ""; position: absolute; inset: var(--am-space-4); z-index: 2; pointer-events: none; border: 1px solid var(--am-white); border-radius: var(--am-radius-lg); opacity: .55; } .am-founder-premium__frame img { width: 100%; height: 610px; display: block; object-fit: cover; object-position: center top; } .am-founder-premium__placeholder { min-height: 610px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--am-space-4); color: var(--am-primary); text-align: center; } .am-founder-premium__placeholder > span { width: 118px; height: 118px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--am-radius-circle); background: var(--am-white); box-shadow: var(--am-shadow-lg); font-family: var(--am-font-heading); font-size: var(--am-fs-h2); font-weight: var(--am-fw-extrabold); } .am-founder-premium__placeholder small { color: var(--am-text); font-size: var(--am-fs-sm); } .am-founder-premium__since { position: absolute; z-index: 4; left: var(--am-space-5); top: var(--am-space-5); padding: var(--am-space-3) var(--am-space-4); border-radius: var(--am-radius-md); background: var(--am-white); box-shadow: var(--am-shadow-md); } .am-founder-premium__since small, .am-founder-premium__since strong { display: block; } .am-founder-premium__since small { color: var(--am-text); font-size: var(--am-fs-xs); } .am-founder-premium__since strong { margin-top: var(--am-space-1); color: var(--am-primary); font-family: var(--am-font-heading); font-size: var(--am-fs-h4); font-weight: var(--am-fw-extrabold); } .am-founder-premium__experience { position: absolute; z-index: 4; right: var(--am-space-5); bottom: var(--am-space-5); display: grid; grid-template-columns: auto 1fr; gap: var(--am-space-3); align-items: center; padding: var(--am-space-4) var(--am-space-5); border-radius: var(--am-radius-lg); background: var(--am-primary); color: var(--am-white); box-shadow: var(--am-shadow-lg); } .am-founder-premium__experience strong { color: var(--am-accent); font-family: var(--am-font-heading); font-size: var(--am-fs-h3); font-weight: var(--am-fw-extrabold); line-height: 1; } .am-founder-premium__experience span { color: var(--am-white); font-size: var(--am-fs-xs); font-weight: var(--am-fw-semibold); line-height: var(--am-lh-small); } .am-founder-premium__signature { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--am-space-2) var(--am-space-4); margin-top: var(--am-space-4); color: var(--am-primary); font-size: var(--am-fs-xs); font-weight: var(--am-fw-semibold); letter-spacing: var(--am-ls-eyebrow); text-transform: uppercase; } .am-founder-premium__signature span:not(:last-child)::after { content: "•"; margin-left: var(--am-space-4); color: var(--am-accent); } .am-founder-premium__content { max-width: 760px; } .am-founder-premium__title { margin-inline: 0; text-align: left; } .am-founder-premium__lead { max-width: 660px; margin: var(--am-space-5) 0 0; color: var(--am-text); font-size: var(--am-fs-base); line-height: var(--am-lh-body); } .am-founder-premium__quote { position: relative; margin: var(--am-space-6) 0; padding: var(--am-space-5) var(--am-space-6); overflow: hidden; border-left: 4px solid var(--am-accent); border-radius: 0 var(--am-radius-lg) var(--am-radius-lg) 0; background: var(--am-bg-soft); } .am-founder-premium__quote-mark { position: absolute; right: var(--am-space-4); top: calc(var(--am-space-4) * -1); color: var(--am-accent); font-family: var(--am-font-heading); font-size: var(--am-fs-hero); font-weight: var(--am-fw-extrabold); line-height: 1; opacity: .18; } .am-founder-premium__quote p { position: relative; z-index: 1; margin: 0; color: var(--am-heading); font-family: var(--am-font-heading); font-size: var(--am-fs-lg); font-weight: var(--am-fw-semibold); line-height: var(--am-lh-title); } .am-founder-premium__pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--am-space-3); } .am-founder-premium__pillars > div { min-height: 154px; padding: var(--am-space-4); border: 1px solid var(--am-border); border-radius: var(--am-radius-md); background: var(--am-white); box-shadow: var(--am-shadow-sm); transition: transform var(--am-transition-fast), box-shadow var(--am-transition-fast), border-color var(--am-transition-fast); } .am-founder-premium__pillars > div:hover { transform: translateY(-4px); border-color: var(--am-border-dark); box-shadow: var(--am-shadow-md); } .am-founder-premium__pillars span, .am-founder-premium__pillars strong, .am-founder-premium__pillars small { display: block; } .am-founder-premium__pillars span { color: var(--am-accent); font-size: var(--am-fs-xs); font-weight: var(--am-fw-extrabold); } .am-founder-premium__pillars strong { margin-top: var(--am-space-3); color: var(--am-heading); font-size: var(--am-fs-sm); font-weight: var(--am-fw-bold); } .am-founder-premium__pillars small { margin-top: var(--am-space-2); color: var(--am-text); font-size: var(--am-fs-xs); line-height: var(--am-lh-small); } .am-founder-premium__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--am-space-5); margin-top: var(--am-space-6); } .am-founder-premium__text-link { display: inline-flex; align-items: center; gap: var(--am-space-2); color: var(--am-primary); font-size: var(--am-fs-sm); font-weight: var(--am-fw-bold); } .am-founder-premium__text-link span { color: var(--am-accent); transition: transform var(--am-transition-fast); } .am-founder-premium__text-link:hover span { transform: translate(3px, -3px); } /* ========================================================= 09. PREMIUM ORIGIN / BANGALORE NETWORK ========================================================= */ .am-origins-premium { position: relative; overflow: hidden; background: var(--am-white); } .am-origins-premium__shell { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .88fr) minmax(500px, 1.12fr); gap: var(--am-space-8); align-items: center; padding: var(--am-space-9); border-radius: var(--am-radius-lg); background: linear-gradient(135deg, var(--am-primary), var(--am-primary-dark)); box-shadow: var(--am-shadow-xl); } .am-origins-premium__shell::before { content: ""; position: absolute; width: 420px; height: 420px; left: -250px; bottom: -280px; border: 60px solid color-mix(in srgb, var(--am-white) 8%, transparent); border-radius: var(--am-radius-circle); pointer-events: none; } .am-origins-premium__copy { position: relative; z-index: 2; } .am-origins-premium__eyebrow { display: inline-flex; align-items: center; padding: var(--am-space-2) var(--am-space-3); border-radius: var(--am-radius-pill); background: color-mix(in srgb, var(--am-white) 10%, transparent); color: var(--am-accent); font-size: var(--am-fs-xs); font-weight: var(--am-fw-bold); letter-spacing: var(--am-ls-eyebrow); text-transform: uppercase; } .am-origins-premium__copy h2 { max-width: 650px; margin: var(--am-space-4) 0 0; color: var(--am-white); font-family: var(--am-font-heading); font-size: var(--am-fs-h2); font-weight: var(--am-fw-extrabold); line-height: var(--am-lh-tight); letter-spacing: var(--am-ls-heading); } .am-origins-premium__copy h2 span { color: var(--am-accent); } .am-origins-premium__copy > p { max-width: 610px; margin: var(--am-space-4) 0 0; color: var(--am-white); opacity: .78; font-size: var(--am-fs-base); line-height: var(--am-lh-body); } .am-origins-premium__chips { display: flex; flex-wrap: wrap; gap: var(--am-space-2); margin-top: var(--am-space-6); } .am-origins-premium__chips a { min-height: 38px; display: inline-flex; align-items: center; padding: 0 var(--am-space-3); border: 1px solid color-mix(in srgb, var(--am-white) 18%, transparent); border-radius: var(--am-radius-pill); background: color-mix(in srgb, var(--am-white) 7%, transparent); color: var(--am-white); font-size: var(--am-fs-xs); font-weight: var(--am-fw-semibold); transition: background var(--am-transition-fast), border-color var(--am-transition-fast), transform var(--am-transition-fast); } .am-origins-premium__chips a:hover { transform: translateY(-2px); border-color: var(--am-accent); background: var(--am-accent); } .am-origins-premium__microcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--am-space-3); margin-top: var(--am-space-6); } .am-origins-premium__microcards > div { padding: var(--am-space-4); border: 1px solid color-mix(in srgb, var(--am-white) 14%, transparent); border-radius: var(--am-radius-md); background: color-mix(in srgb, var(--am-white) 6%, transparent); } .am-origins-premium__microcards strong, .am-origins-premium__microcards span { display: block; } .am-origins-premium__microcards strong { color: var(--am-white); font-size: var(--am-fs-sm); font-weight: var(--am-fw-bold); } .am-origins-premium__microcards span { margin-top: var(--am-space-2); color: var(--am-white); opacity: .68; font-size: var(--am-fs-xs); line-height: var(--am-lh-small); } .am-origin-network { position: relative; z-index: 2; min-height: 610px; overflow: hidden; padding: var(--am-space-5); border: 1px solid color-mix(in srgb, var(--am-white) 15%, transparent); border-radius: var(--am-radius-lg); background: color-mix(in srgb, var(--am-white) 6%, transparent); backdrop-filter: blur(10px); } .am-origin-network::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(var(--am-white) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; } .am-origin-network__topline { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: var(--am-space-3); align-items: center; padding-bottom: var(--am-space-3); border-bottom: 1px solid color-mix(in srgb, var(--am-white) 14%, transparent); } .am-origin-network__topline span, .am-origin-network__topline strong { color: var(--am-white); font-size: var(--am-fs-xs); } .am-origin-network__topline span { opacity: .62; } .am-origin-network__topline strong { font-weight: var(--am-fw-bold); } .am-origin-network svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; margin-top: var(--am-space-3); } .am-origin-network__flows path { fill: none; stroke: var(--am-secondary); stroke-width: 1.7; stroke-dasharray: 7 9; opacity: .72; animation: amOriginRoute 3.7s linear infinite; } .am-origin-network__node circle { fill: var(--am-primary); stroke: var(--am-white); stroke-width: 2; } .am-origin-network__node text { fill: var(--am-white); font-family: var(--am-font); font-size: var(--am-fs-xs); font-weight: var(--am-fw-semibold); } .am-origin-network__ring { fill: none; stroke: var(--am-accent); stroke-width: 1; opacity: .18; } .am-origin-network__ring--two { opacity: .08; } .am-origin-network__hub circle { fill: var(--am-accent); stroke: var(--am-white); stroke-width: 4; } .am-origin-network__hub text { fill: var(--am-white); font-family: var(--am-font-heading); font-size: var(--am-fs-base); font-weight: var(--am-fw-extrabold); letter-spacing: var(--am-ls-eyebrow); } .am-origin-network__pulse { fill: var(--am-accent); transform-origin: 310px 510px; animation: amOriginPulse 2.7s ease-out infinite; } .am-origin-network__badge { position: absolute; z-index: 3; left: var(--am-space-5); right: var(--am-space-5); bottom: var(--am-space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--am-space-4); padding: var(--am-space-4) var(--am-space-5); border: 1px solid color-mix(in srgb, var(--am-white) 18%, transparent); border-radius: var(--am-radius-lg); background: color-mix(in srgb, var(--am-primary) 86%, transparent); box-shadow: var(--am-shadow-lg); } .am-origin-network__badge strong { color: var(--am-accent); font-family: var(--am-font-heading); font-size: var(--am-fs-lg); font-weight: var(--am-fw-extrabold); } .am-origin-network__badge span { max-width: 330px; color: var(--am-white); opacity: .76; font-size: var(--am-fs-xs); line-height: var(--am-lh-small); text-align: right; } @keyframes amOriginRoute { to { stroke-dashoffset: -32; } } @keyframes amOriginPulse { 0% { transform: scale(.75); opacity: .36; } 100% { transform: scale(2.6); opacity: 0; } } /* ========================================================= 10. PREMIUM COLLEGE SHOWCASE ========================================================= */ .am-college-showcase { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--am-white), var(--am-bg-soft)); } .am-college-showcase__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .55fr); gap: var(--am-space-8); align-items: end; margin-bottom: var(--am-space-8); } .am-college-showcase__head .am-section-title { margin-inline: 0; text-align: left; } .am-college-showcase__head > p { margin: 0 0 var(--am-space-2); color: var(--am-text); font-size: var(--am-fs-base); line-height: var(--am-lh-body); } .am-college-showcase__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 290px 290px 230px; gap: var(--am-space-4); } .am-college-tile { position: relative; overflow: hidden; display: block; border-radius: var(--am-radius-lg); background: var(--am-primary); color: var(--am-white); box-shadow: var(--am-shadow-lg); } .am-college-tile--featured { grid-column: 1 / 8; grid-row: 1 / 3; } .am-college-showcase__grid > .am-college-tile:nth-child(2) { grid-column: 8 / 13; grid-row: 1; } .am-college-showcase__grid > .am-college-tile:nth-child(3) { grid-column: 8 / 13; grid-row: 2; } .am-college-tile--wide { grid-column: 1 / 13; grid-row: 3; } .am-college-tile img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; transition: transform var(--am-transition-slow), filter var(--am-transition-slow); } .am-college-tile:hover img { transform: scale(1.045); } .am-college-tile__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 20%, var(--am-primary) 100%); opacity: .88; } .am-college-tile__top { position: absolute; z-index: 2; left: var(--am-space-5); top: var(--am-space-5); display: flex; align-items: center; gap: var(--am-space-2); padding: var(--am-space-2) var(--am-space-3); border-radius: var(--am-radius-pill); background: color-mix(in srgb, var(--am-white) 88%, transparent); color: var(--am-primary); box-shadow: var(--am-shadow-sm); } .am-college-tile__top span, .am-college-tile__top small { font-size: var(--am-fs-xs); font-weight: var(--am-fw-bold); } .am-college-tile__top span { color: var(--am-accent); } .am-college-tile__content { position: absolute; z-index: 3; left: var(--am-space-5); right: var(--am-space-5); bottom: var(--am-space-5); padding-right: calc(var(--am-icon-md) + var(--am-space-4)); } .am-college-tile__tag { display: inline-flex; margin-bottom: var(--am-space-2); color: var(--am-accent); font-size: var(--am-fs-xs); font-weight: var(--am-fw-bold); } .am-college-tile__content strong { display: block; color: var(--am-white); font-family: var(--am-font-heading); font-size: var(--am-fs-h3); font-weight: var(--am-fw-extrabold); line-height: var(--am-lh-tight); } .am-college-tile:not(.am-college-tile--featured):not(.am-college-tile--wide) .am-college-tile__content strong { font-size: var(--am-fs-xl); } .am-college-tile__content small { display: block; max-width: 620px; margin-top: var(--am-space-2); color: var(--am-white); opacity: .78; font-size: var(--am-fs-xs); line-height: var(--am-lh-small); } .am-college-tile__arrow { position: absolute; right: 0; bottom: 0; width: var(--am-icon-md); height: var(--am-icon-md); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--am-radius-circle); background: var(--am-accent); color: var(--am-white); font-size: var(--am-fs-lg); transition: transform var(--am-transition-fast), background var(--am-transition-fast); } .am-college-tile:hover .am-college-tile__arrow { transform: translate(3px, -3px) rotate(8deg); background: var(--am-accent-hover); } .am-college-showcase__foot { display: flex; align-items: center; justify-content: center; gap: var(--am-space-5); margin-top: var(--am-space-6); } .am-college-showcase__foot > span { color: var(--am-text); font-size: var(--am-fs-sm); } /* ========================================================= 11. PREMIUM STUDENT STORIES ========================================================= */ .am-stories-premium { position: relative; overflow: hidden; background: var(--am-primary); } .am-stories-premium::before, .am-stories-premium::after { content: ""; position: absolute; border-radius: var(--am-radius-circle); pointer-events: none; } .am-stories-premium::before { width: 430px; height: 430px; left: -280px; top: -260px; background: var(--am-secondary); opacity: .2; } .am-stories-premium::after { width: 520px; height: 520px; right: -340px; bottom: -350px; border: 75px solid var(--am-accent); opacity: .08; } .am-stories-premium__head { position: relative; z-index: 2; max-width: 880px; margin: 0 auto var(--am-space-8); text-align: center; } .am-stories-premium .am-section-eyebrow { color: var(--am-accent); } .am-stories-premium .am-section-title { color: var(--am-white); } .am-stories-premium .am-section-title span { color: var(--am-accent); } .am-stories-premium .am-section-subtitle { color: var(--am-white); opacity: .72; } .am-stories-premium__grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--am-space-5); } .am-video-story { overflow: hidden; border: 1px solid color-mix(in srgb, var(--am-white) 15%, transparent); border-radius: var(--am-radius-lg); background: color-mix(in srgb, var(--am-white) 6%, transparent); box-shadow: var(--am-shadow-lg); transition: transform var(--am-transition), border-color var(--am-transition), background var(--am-transition); } .am-video-story:hover { transform: translateY(-7px); border-color: color-mix(in srgb, var(--am-white) 28%, transparent); background: color-mix(in srgb, var(--am-white) 9%, transparent); } .am-video-story__art { position: relative; min-height: 330px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--am-secondary), var(--am-primary-dark)); } .am-video-story--two .am-video-story__art { background: linear-gradient(145deg, var(--am-primary-dark), var(--am-secondary)); } .am-video-story--three .am-video-story__art { background: linear-gradient(145deg, var(--am-secondary), var(--am-primary)); } .am-video-story__art::before, .am-video-story__art::after { content: ""; position: absolute; border-radius: var(--am-radius-circle); border: 1px solid color-mix(in srgb, var(--am-white) 15%, transparent); } .am-video-story__art::before { width: 210px; height: 210px; } .am-video-story__art::after { width: 290px; height: 290px; opacity: .5; } .am-video-story__state { position: absolute; z-index: 3; left: var(--am-space-4); top: var(--am-space-4); padding: var(--am-space-2) var(--am-space-3); border-radius: var(--am-radius-pill); background: var(--am-white); color: var(--am-primary); font-size: var(--am-fs-xs); font-weight: var(--am-fw-bold); } .am-video-story__play { position: relative; z-index: 4; width: 76px; height: 76px; display: inline-flex; align-items: center; justify-content: center; padding-left: 4px; border-radius: var(--am-radius-circle); background: var(--am-accent); color: var(--am-white); font-size: var(--am-fs-xl); box-shadow: var(--am-shadow-accent); transition: transform var(--am-transition-fast), background var(--am-transition-fast); } .am-video-story:hover .am-video-story__play { transform: scale(1.08); background: var(--am-accent-hover); } .am-video-story__line { position: absolute; left: var(--am-space-4); right: var(--am-space-4); bottom: var(--am-space-5); height: 2px; background: color-mix(in srgb, var(--am-white) 18%, transparent); } .am-video-story__line::before { content: ""; display: block; width: 34%; height: 100%; background: var(--am-accent); } .am-video-story__ghost { position: absolute; right: var(--am-space-3); bottom: var(--am-space-5); color: var(--am-white); opacity: .08; font-family: var(--am-font-heading); font-size: var(--am-fs-h2); font-weight: var(--am-fw-extrabold); letter-spacing: var(--am-ls-heading); } .am-video-story__meta { padding: var(--am-space-5); } .am-video-story__meta strong, .am-video-story__meta span { display: block; } .am-video-story__meta strong { color: var(--am-white); font-family: var(--am-font-heading); font-size: var(--am-fs-lg); font-weight: var(--am-fw-bold); } .am-video-story__meta span { margin-top: var(--am-space-2); color: var(--am-white); opacity: .62; font-size: var(--am-fs-xs); } /* ========================================================= 12. CLARITY + OFFICE TRUST ========================================================= */ .am-clarity { position: relative; overflow: hidden; background: var(--am-bg-soft); } .am-clarity__shell { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(360px, .94fr); gap: var(--am-space-6); align-items: stretch; } .am-clarity__copy { padding: var(--am-space-8); border: 1px solid var(--am-border); border-radius: var(--am-radius-lg); background: var(--am-white); box-shadow: var(--am-shadow-sm); } .am-clarity__eyebrow { color: var(--am-secondary); font-size: var(--am-fs-xs); font-weight: var(--am-fw-bold); letter-spacing: var(--am-ls-eyebrow); text-transform: uppercase; } .am-clarity__copy > h2 { max-width: 700px; margin: var(--am-space-3) 0 0; color: var(--am-heading); font-family: var(--am-font-heading); font-size: var(--am-fs-h2); font-weight: var(--am-fw-extrabold); line-height: var(--am-lh-tight); letter-spacing: var(--am-ls-heading); } .am-clarity__copy > h2 span { color: var(--am-accent); } .am-clarity__copy > p { max-width: 680px; margin: var(--am-space-4) 0 0; color: var(--am-text); font-size: var(--am-fs-base); line-height: var(--am-lh-body); } .am-clarity__steps { display: grid; gap: var(--am-space-3); margin-top: var(--am-space-6); } .am-clarity__steps > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--am-space-4); align-items: center; padding: var(--am-space-4); border: 1px solid var(--am-border); border-radius: var(--am-radius-md); background: var(--am-bg-soft); } .am-clarity__steps > div > span { width: var(--am-icon-lg); height: var(--am-icon-lg); display: inline-flex; align-items: center; justify-content: center; grid-row: 1 / 3; border-radius: var(--am-radius-circle); background: var(--am-bg-blue); color: var(--am-secondary); font-size: var(--am-fs-xs); font-weight: var(--am-fw-extrabold); } .am-clarity__steps strong, .am-clarity__steps small { display: block; } .am-clarity__steps strong { color: var(--am-heading); font-size: var(--am-fs-base); font-weight: var(--am-fw-bold); } .am-clarity__steps small { margin-top: var(--am-space-1); color: var(--am-text); font-size: var(--am-fs-sm); line-height: var(--am-lh-small); } .am-clarity__office { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: var(--am-space-8); border-radius: var(--am-radius-lg); background: linear-gradient(145deg, var(--am-primary), var(--am-primary-dark)); color: var(--am-white); box-shadow: var(--am-shadow-lg); } .am-clarity__office::before { content: ""; position: absolute; width: 300px; height: 300px; right: -160px; top: -160px; border: 54px solid color-mix(in srgb, var(--am-white) 7%, transparent); border-radius: var(--am-radius-circle); } .am-clarity__office-kicker, .am-clarity__office h3, .am-clarity__office > p, .am-clarity__office-list, .am-clarity__office-actions { position: relative; z-index: 1; } .am-clarity__office-kicker { display: inline-flex; align-self: flex-start; padding: var(--am-space-2) var(--am-space-3); border-radius: var(--am-radius-pill); background: var(--am-accent); color: var(--am-white); font-size: var(--am-fs-xs); font-weight: var(--am-fw-bold); letter-spacing: var(--am-ls-eyebrow); text-transform: uppercase; } .am-clarity__office h3 { margin: var(--am-space-4) 0 0; color: var(--am-white); font-family: var(--am-font-heading); font-size: var(--am-fs-h3); font-weight: var(--am-fw-extrabold); line-height: var(--am-lh-tight); } .am-clarity__office > p { margin: var(--am-space-4) 0 0; color: var(--am-white); opacity: .74; font-size: var(--am-fs-base); line-height: var(--am-lh-body); } .am-clarity__office-list { display: grid; gap: var(--am-space-3); margin-top: var(--am-space-7); } .am-clarity__office-list > div { display: flex; align-items: center; gap: var(--am-space-3); padding-bottom: var(--am-space-3); border-bottom: 1px solid color-mix(in srgb, var(--am-white) 13%, transparent); } .am-clarity__office-list > div:last-child { border-bottom: 0; } .am-clarity__office-list span { width: var(--am-icon-sm); height: var(--am-icon-sm); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--am-radius-circle); background: var(--am-accent); color: var(--am-white); font-size: var(--am-fs-xs); } .am-clarity__office-list strong { color: var(--am-white); font-size: var(--am-fs-sm); font-weight: var(--am-fw-semibold); } .am-clarity__office-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--am-space-5); margin-top: auto; padding-top: var(--am-space-8); } .am-clarity__call { color: var(--am-white); } .am-clarity__call small, .am-clarity__call strong { display: block; } .am-clarity__call small { opacity: .62; font-size: var(--am-fs-xs); } .am-clarity__call strong { margin-top: var(--am-space-1); color: var(--am-white); font-size: var(--am-fs-sm); font-weight: var(--am-fw-bold); } /* ========================================================= 13. FAQ + FINAL CTA ========================================================= */ .am-home-faq { position: relative; overflow: hidden; background: var(--am-white); } .am-home-faq__head { max-width: 900px; margin: 0 auto var(--am-space-8); text-align: center; } .am-home-faq__list { max-width: 980px; margin-inline: auto; display: grid; gap: var(--am-space-3); } .am-home-faq__list details { overflow: hidden; border: 1px solid var(--am-border); border-radius: var(--am-radius-md); background: var(--am-white); box-shadow: var(--am-shadow-sm); transition: border-color var(--am-transition-fast), box-shadow var(--am-transition-fast), transform var(--am-transition-fast); } .am-home-faq__list details:hover { transform: translateY(-2px); border-color: var(--am-border-dark); } .am-home-faq__list details[open] { border-color: var(--am-secondary); box-shadow: var(--am-shadow-md); } .am-home-faq__list summary { position: relative; cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--am-space-4); padding: var(--am-space-5) calc(var(--am-space-8) + var(--am-space-2)) var(--am-space-5) var(--am-space-5); color: var(--am-heading); font-size: var(--am-fs-base); font-weight: var(--am-fw-bold); } .am-home-faq__list summary::-webkit-details-marker { display: none; } .am-home-faq__list summary > span { color: var(--am-accent); font-size: var(--am-fs-xs); font-weight: var(--am-fw-extrabold); } .am-home-faq__list summary::after { content: "+"; position: absolute; right: var(--am-space-5); top: 50%; width: var(--am-icon-sm); height: var(--am-icon-sm); display: inline-flex; align-items: center; justify-content: center; transform: translateY(-50%); border-radius: var(--am-radius-circle); background: var(--am-bg-blue); color: var(--am-secondary); font-size: var(--am-fs-lg); font-weight: var(--am-fw-bold); transition: transform var(--am-transition-fast), background var(--am-transition-fast), color var(--am-transition-fast); } .am-home-faq__list details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--am-secondary); color: var(--am-white); } .am-home-faq__list details p { margin: 0; padding: 0 var(--am-space-5) var(--am-space-5) calc(var(--am-space-5) + var(--am-space-8)); color: var(--am-text); font-size: var(--am-fs-sm); line-height: var(--am-lh-body); } .am-home-cta { position: relative; overflow: hidden; max-width: var(--am-container-wide); margin: var(--am-space-10) auto 0; padding: var(--am-space-9); display: flex; align-items: center; justify-content: space-between; gap: var(--am-space-8); border-radius: var(--am-radius-lg); background: linear-gradient(135deg, var(--am-primary), var(--am-secondary)); box-shadow: var(--am-shadow-xl); } .am-home-cta__decor { position: absolute; width: 360px; height: 360px; right: -190px; top: -200px; border: 70px solid color-mix(in srgb, var(--am-white) 8%, transparent); border-radius: var(--am-radius-circle); pointer-events: none; } .am-home-cta__copy, .am-home-cta__actions { position: relative; z-index: 2; } .am-home-cta__copy { max-width: 760px; } .am-home-cta__copy > span { display: inline-flex; margin-bottom: var(--am-space-3); color: var(--am-accent); font-size: var(--am-fs-xs); font-weight: var(--am-fw-bold); letter-spacing: var(--am-ls-eyebrow); text-transform: uppercase; } .am-home-cta h2 { margin: 0; color: var(--am-white); font-family: var(--am-font-heading); font-size: var(--am-fs-h2); font-weight: var(--am-fw-extrabold); line-height: var(--am-lh-tight); letter-spacing: var(--am-ls-heading); } .am-home-cta p { margin: var(--am-space-3) 0 0; color: var(--am-white); opacity: .75; font-size: var(--am-fs-base); line-height: var(--am-lh-body); } .am-home-cta__actions { min-width: 245px; display: grid; gap: var(--am-space-4); } .am-home-cta__phone { text-align: center; color: var(--am-white); } .am-home-cta__phone small, .am-home-cta__phone strong { display: block; } .am-home-cta__phone small { opacity: .62; font-size: var(--am-fs-xs); } .am-home-cta__phone strong { margin-top: var(--am-space-1); color: var(--am-white); font-size: var(--am-fs-sm); font-weight: var(--am-fw-bold); } /* ========================================================= 14. MATCHED NEW-SECTION RESPONSIVE RULES ========================================================= */ @media (max-width: 1180px) { .am-rankbar__shell { grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(130px, .7fr)); } .am-rankbar__button { grid-column: 1 / -1; width: 100%; } .am-founder-premium__grid, .am-origins-premium__shell, .am-clarity__shell { grid-template-columns: 1fr; } .am-founder-premium__visual { max-width: 760px; width: 100%; margin-inline: auto; } .am-origins-premium__copy { max-width: 820px; } .am-origin-network { max-width: 800px; width: 100%; margin-inline: auto; } } @media (max-width: 900px) { .am-rankbar__shell { grid-template-columns: 1fr 1fr; min-height: auto; padding: var(--am-space-4); } .am-rankbar__lead { grid-column: 1 / -1; padding: 0 0 var(--am-space-2); } .am-rankbar__field--rank { grid-column: span 1; } .am-rankbar__button { grid-column: 1 / -1; } .am-home-proof__shell { grid-template-columns: repeat(2, minmax(0, 1fr)); } .am-home-proof__item:nth-child(2) { border-right: 0; } .am-home-proof__item:nth-child(-n + 2) { border-bottom: 1px solid var(--am-border); } .am-founder-premium__pillars { grid-template-columns: 1fr; } .am-college-showcase__head { grid-template-columns: 1fr; gap: var(--am-space-4); } .am-college-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; } .am-college-tile, .am-college-tile--featured, .am-college-showcase__grid > .am-college-tile:nth-child(2), .am-college-showcase__grid > .am-college-tile:nth-child(3), .am-college-tile--wide { grid-column: auto; grid-row: auto; min-height: 390px; } .am-college-tile--featured, .am-college-tile--wide { grid-column: span 2; } .am-stories-premium__grid { grid-template-columns: 1fr; } .am-video-story { display: grid; grid-template-columns: minmax(260px, .72fr) 1fr; align-items: stretch; } .am-video-story__art { min-height: 250px; } .am-video-story__meta { display: flex; flex-direction: column; justify-content: center; } .am-home-cta { align-items: flex-start; flex-direction: column; } .am-home-cta__actions { width: 100%; min-width: 0; } } @media (max-width: 700px) { .am-rankbar { padding: var(--am-space-4) 0; } .am-rankbar__shell { grid-template-columns: 1fr; gap: var(--am-space-2); } .am-rankbar__lead, .am-rankbar__button, .am-rankbar__field, .am-rankbar__field--rank { grid-column: 1; } .am-rankbar__field > span { display: none; } .am-home-proof__item { min-height: 92px; padding: var(--am-space-4); } .am-home-proof__mark { min-width: 56px; font-size: var(--am-fs-lg); } .am-founder-premium__frame, .am-founder-premium__frame img, .am-founder-premium__placeholder { min-height: 480px; height: 480px; } .am-founder-premium__experience { left: var(--am-space-3); right: var(--am-space-3); bottom: var(--am-space-3); } .am-founder-premium__since { left: var(--am-space-3); top: var(--am-space-3); } .am-origins-premium__shell, .am-clarity__copy, .am-clarity__office, .am-home-cta { padding: var(--am-space-6); } .am-origins-premium__microcards { grid-template-columns: 1fr; } .am-origin-network { min-height: 500px; padding: var(--am-space-3); } .am-origin-network__topline { align-items: flex-start; flex-direction: column; } .am-origin-network__badge { left: var(--am-space-3); right: var(--am-space-3); bottom: var(--am-space-3); align-items: flex-start; flex-direction: column; } .am-origin-network__badge span { text-align: left; } .am-college-showcase__grid { grid-template-columns: 1fr; } .am-college-tile, .am-college-tile--featured, .am-college-tile--wide { grid-column: 1; min-height: 380px; } .am-college-showcase__foot { align-items: flex-start; flex-direction: column; } .am-video-story { display: block; } .am-video-story__art { min-height: 300px; } .am-clarity__steps > div { align-items: start; } .am-clarity__office-actions { align-items: flex-start; flex-direction: column; } .am-home-faq__list details p { padding-left: var(--am-space-5); } .am-home-cta__actions .am-btn { width: 100%; justify-content: center; } } @media (max-width: 520px) { .am-home-proof__shell { grid-template-columns: 1fr; } .am-home-proof__item, .am-home-proof__item:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--am-border); } .am-home-proof__item:last-child { border-bottom: 0; } .am-founder-premium__frame, .am-founder-premium__frame img, .am-founder-premium__placeholder { min-height: 410px; height: 476px; } .am-founder-premium__signature span:not(:last-child)::after { display: none; } .am-origin-network { min-height: 430px; } .am-origin-network__topline strong { display: none; } .am-college-tile, .am-college-tile--featured, .am-college-tile--wide { min-height: 330px; } .am-home-faq__list summary { gap: var(--am-space-2); padding-left: var(--am-space-4); padding-right: var(--am-space-8); } } @media (prefers-reduced-motion: reduce) { .am-origin-network__flows path, .am-origin-network__pulse { animation: none; } .am-founder-premium__pillars > div, .am-origins-premium__chips a, .am-college-tile img, .am-college-tile__arrow, .am-video-story, .am-video-story__play, .am-home-faq__list details { transition: none; } } /* ========================================================= ADMISSION JOURNEY MOBILE SINGLE-CARD AUTO SLIDER ========================================================= */ .am-journey__mobile-controls { display: none; } /* ========================================================= MOBILE SLIDER ========================================================= */ @media (max-width: 767px) { .am-journey { overflow: hidden; } .am-journey__stage { width: 100%; padding-bottom: var(--am-space-6); } /* ----------------------------------------- SLIDER FRAME ----------------------------------------- */ .am-journey__cards { width: 100%; display: flex; align-items: stretch; justify-content: flex-start; gap: 0; margin: var(--am-space-4) 0 0; padding: var(--am-space-3) 0 var(--am-space-5); overflow-x: auto; overflow-y: visible; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .am-journey__cards::-webkit-scrollbar { display: none; } /* ----------------------------------------- ONE COMPLETE CARD PER FRAME ----------------------------------------- */ .am-journey-card { flex: 0 0 100%; width: 100%; max-width: 100%; margin: 0 !important; scroll-snap-align: center; scroll-snap-stop: always; transform: none !important; border-radius: var(--am-radius-lg); box-shadow: var(--am-shadow-lg); } .am-journey-card + .am-journey-card { margin-left: 0; } .am-journey-card:hover { transform: none !important; } /* ----------------------------------------- IMAGE ----------------------------------------- */ .am-journey-card__media { padding: var(--am-space-3) var(--am-space-3) 0; } .am-journey-card__media img { width: 100%; height: 330px; object-fit: cover; object-position: center top; border-radius: var(--am-radius-lg); } /* ----------------------------------------- STEP CHIP ----------------------------------------- */ .am-journey-card__step { left: var(--am-space-5); top: var(--am-space-5); gap: var(--am-space-2); padding: var(--am-space-2) var(--am-space-3); border-radius: var(--am-radius-md); } .am-journey-card__step-icon { width: var(--am-icon-md); height: var(--am-icon-md); font-size: var(--am-fs-sm); } .am-journey-card__step-text strong { font-size: var(--am-fs-sm); } .am-journey-card__step-text small { font-size: var(--am-fs-xs); } /* ----------------------------------------- CONTENT ----------------------------------------- */ .am-journey-card__body { padding: var(--am-space-5); } .am-journey-card__body h3 { margin-bottom: var(--am-space-2); font-size: var(--am-fs-xl); line-height: var(--am-lh-title); } .am-journey-card__body p { font-size: var(--am-fs-sm); line-height: var(--am-lh-body); } .am-journey-card__meta { margin-top: var(--am-space-4); } .am-journey-card__footer { min-height: 52px; padding: var(--am-space-3) var(--am-space-5); font-size: var(--am-fs-sm); } /* ===================================================== SLIDER CONTROLS ===================================================== */ .am-journey__mobile-controls { width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--am-space-4); margin-top: var(--am-space-4); } .am-journey__slider-btn { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; cursor: pointer; color: var(--am-primary); background: var(--am-white); border: 1px solid var(--am-border); border-radius: var(--am-radius-circle); box-shadow: var(--am-shadow-sm); font-family: var(--am-font); font-size: var(--am-fs-xl); font-weight: var(--am-fw-bold); line-height: 1; transition: color var(--am-transition-fast), background var(--am-transition-fast), border-color var(--am-transition-fast), transform var(--am-transition-fast), box-shadow var(--am-transition-fast); } .am-journey__slider-btn:hover, .am-journey__slider-btn:focus-visible { color: var(--am-white); background: var(--am-secondary); border-color: var(--am-secondary); box-shadow: var(--am-shadow-md); transform: translateY(-2px); } .am-journey__slider-btn:active { transform: scale(.95); } /* NEXT BUTTON = PRIMARY VISUAL */ .am-journey__slider-btn--next { color: var(--am-white); background: var(--am-primary); border-color: var(--am-primary); } .am-journey__slider-btn--next:hover, .am-journey__slider-btn--next:focus-visible { background: var(--am-secondary); border-color: var(--am-secondary); } /* ----------------------------------------- COUNTER ----------------------------------------- */ .am-journey__slider-count { min-width: 82px; display: flex; align-items: baseline; justify-content: center; gap: var(--am-space-1); color: var(--am-text); font-family: var(--am-font); } .am-journey__slider-count strong { color: var(--am-primary); font-family: var(--am-font-heading); font-size: var(--am-fs-xl); font-weight: var(--am-fw-extrabold); } .am-journey__slider-count span { color: var(--am-text); font-size: var(--am-fs-sm); font-weight: var(--am-fw-semibold); } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .am-journey-card__media img { height: 300px; } .am-journey-card__body { padding: var(--am-space-4); } .am-journey-card__body h3 { font-size: var(--am-fs-lg); } .am-journey-card__footer { padding-inline: var(--am-space-4); } .am-journey__slider-btn { width: 44px; height: 44px; } }