/* ============================================================================ KALVI ELITE — "Heritage Paper & Scholar's Ink" An editorial-heritage academic theme for Kalvi Groups. Paper-warm light sections, deep teal-ink bands, disciplined Kalvi red. Typography: Fraunces (display serif) · Inter (text) · Space Grotesk (mono-ish labels) Designed to feel human-crafted: hairlines, rules, stamps, indices, generous margins. ========================================================================== */ :root { /* Palette — warm paper + scholar ink + brand accents */ --paper: #FBF8F2; /* warm paper (body bg) */ --paper-deep: #F4EFE5; /* deeper paper tint */ --card: #FFFFFF; --ink: #14313B; /* scholar's ink — deep teal-ink (not too dark) */ --ink-deep: #0E242C; /* darkest band */ --ink-soft: #2B4650; --text: #3A4A52; --muted: #7A868E; --red: #E23B44; /* Kalvi brand red — disciplined accent */ --red-deep: #BC2A33; --gold: #B98A2F; /* heritage gold */ --gold-soft: #D9B25F; --line: #E4DCC9; /* paper hairline */ --line-ink: rgba(20,49,59,.14); --wash-red: #FDF1EF; --wash-gold: #FBF5E7; /* Type */ --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --label: 'Space Grotesk', 'Inter', sans-serif; /* Rhythm */ --gutter: 24px; --rule: 1px solid var(--line); } /* ======== FONT PREVIEW OPTIONS (class on via main.php) ======== */ /* Option 2 — Poppins + Inter (upGrad-like friendly geometric) */ body.fopt-2 { --serif: 'Poppins', 'Inter', sans-serif; --sans: 'Inter', system-ui, sans-serif; --label: 'Poppins', sans-serif; } body.fopt-2 h1, body.fopt-2 h2, body.fopt-2 h3, body.fopt-2 h4, body.fopt-2 h5 { font-weight: 600; letter-spacing: -.01em; } body.fopt-2 h1 { font-weight: 700; } body.fopt-2 .hero h1 em, body.fopt-2 .ph h1 em { font-style: normal; color: var(--red); } /* Option 3 — DM Serif Display + DM Sans (classic editorial) */ body.fopt-3 { --serif: 'DM Serif Display', Georgia, serif; --sans: 'DM Sans', system-ui, sans-serif; --label: 'DM Sans', sans-serif; } body.fopt-3 h1, body.fopt-3 h2, body.fopt-3 h3, body.fopt-3 h4, body.fopt-3 h5 { font-weight: 400; } /* Option 4 — Sora + Inter (clean modern geometric) */ body.fopt-4 { --serif: 'Sora', 'Inter', sans-serif; --sans: 'Inter', system-ui, sans-serif; --label: 'Sora', sans-serif; } body.fopt-4 h1, body.fopt-4 h2, body.fopt-4 h3, body.fopt-4 h4, body.fopt-4 h5 { font-weight: 600; } body.fopt-4 h1 { font-weight: 700; } body.fopt-4 .hero h1 em, body.fopt-4 .ph h1 em { font-style: normal; } body.fopt-4 .quote-item blockquote { font-style: normal; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--sans); font-size: 15.5px; line-height: 1.65; color: var(--text); background: var(--paper); margin: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: rgba(226,59,68,.18); } h1, h2, h3, h4, h5 { font-family: var(--serif); font-weight: 500; color: var(--ink); line-height: 1.14; margin: 0; letter-spacing: -.01em; } h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); font-weight: 480; } h2 { font-size: clamp(1.75rem, 3.4vw, 2.7rem); } h3 { font-size: 1.4rem; } h4 { font-size: 1.08rem; font-weight: 600; } p { margin: 0 0 1em; } a { color: var(--red); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--red-deep); } img { max-width: 100%; display: block; } /* ------------------------------------------------------------ TYPOGRAPHIC FURNITURE (the "human craft" details) ------------------------------------------------------------ */ /* Index label — chapter-style "01 /" markers */ .idx { font-family: var(--label); font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); } .idx b { color: var(--red); font-weight: 700; } /* Eyebrow — stamped label with rules */ .stamp { display: inline-flex; align-items: center; gap: 12px; font-family: var(--label); font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--red); } .stamp::before { content: ''; width: 30px; height: 1px; background: var(--red); } .stamp.on-ink { color: var(--gold-soft); } .stamp.on-ink::before { background: var(--gold-soft); } .stamp.centered { justify-content: center; } .stamp.centered::after { content: ''; width: 30px; height: 1px; background: var(--red); } .stamp.on-ink.centered::after { background: var(--gold-soft); } /* Drop cap for feature paragraphs */ .dropcap::first-letter { font-family: var(--serif); font-size: 3.1em; float: left; line-height: .82; padding: 6px 10px 0 0; color: var(--red); font-weight: 500; } /* Lede paragraph */ .lede { font-size: 17.5px; line-height: 1.75; color: var(--ink-soft); } /* ------------------------------------------------------------ LAYOUT ------------------------------------------------------------ */ .wrap { max-width: 1220px; margin: 0 auto; padding: 0 var(--gutter); } .wrap.wide { max-width: 1420px; } .sec { padding: 92px 0; position: relative; } .sec-tight { padding: 64px 0; } .sec-paper { background: var(--paper); } .sec-card { background: var(--card); } .sec-paper-deep { background: var(--paper-deep); } .sec-ink { background: var(--ink); color: #E9EFEC; } .sec-ink-deep { background: var(--ink-deep); color: #E9EFEC; } /* Section header with rule + index */ .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 52px; } .sec-head .sh { max-width: 640px; } .sec-head .sh h2 { margin-top: 14px; } .sec-head .sh p { color: var(--muted); font-size: 14px; margin-top: 10px; } .sec-head .sh .idx { display: block; margin-bottom: 10px; } @media (max-width: 720px) { .sec-head { flex-direction: column; align-items: flex-start; } } /* ------------------------------------------------------------ BUTTONS — engraved, quiet hover ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--label); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 14px 28px; border: 1px solid transparent; border-radius: 2px; cursor: pointer; transition: all .28s cubic-bezier(.4,0,.2,1); line-height: 1; white-space: nowrap; position: relative; } .btn i { font-size: 14px; } .btn-red { background: var(--red); color: #fff; } .btn-red:hover { background: var(--red-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(226,59,68,.5); } .btn-ink { background: var(--ink); color: #fff; } .btn-ink:hover { background: var(--ink-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(20,49,59,.5); } .btn-gold { background: var(--gold); color: #fff; } .btn-gold:hover { background: #9C7423; color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(185,138,47,.5); } .btn-line { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-line:hover { background: var(--ink); color: #fff; } .btn-line-red { background: transparent; color: var(--red); border-color: var(--red); } .btn-line-red:hover { background: var(--red); color: #fff; } .btn-line-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .btn-line-light:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; } .btn-line-gold { background: transparent; color: var(--gold-soft); border-color: rgba(217,178,95,.55); } .btn-line-gold:hover { border-color: var(--gold-soft); background: rgba(217,178,95,.1); color: var(--gold-soft); } .btn-sm { padding: 10px 18px; font-size: 11px; } .btn-block { width: 100%; } /* ------------------------------------------------------------ HEADER — fixed rail, transparent over hero, solid-ink on scroll ------------------------------------------------------------ */ .hd { position: fixed; inset: 0 0 auto 0; z-index: 70; transition: background .35s ease, box-shadow .35s ease, border-color .35s ease; border-bottom: 1px solid transparent; } .hd.scrolled, .hd.solid { background: rgba(251,248,242,.94); backdrop-filter: blur(14px); border-bottom-color: var(--line); box-shadow: 0 8px 32px -16px rgba(20,49,59,.18); } .hd-in { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 24px; } .hd-logo { display: flex; align-items: center; flex-shrink: 0; } .hd-logo img { height: 42px; width: auto; filter: brightness(0) invert(1); transition: filter .35s ease; } .hd.scrolled .hd-logo img, .hd.solid .hd-logo img { filter: none; } /* Nav */ .hd-nav { display: flex; align-items: center; gap: 30px; } .hd-nav > a { position: relative; font-family: var(--label); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.92); padding: 6px 0; white-space: nowrap; } .hd-nav > a::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1.5px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .32s ease; } .hd-nav > a:hover::after, .hd-nav > a.on::after { transform: scaleX(1); } .hd.scrolled .hd-nav > a, .hd.solid .hd-nav > a { color: var(--ink-soft); } .hd.scrolled .hd-nav > a.on, .hd.solid .hd-nav > a.on { color: var(--red); } .hd-acts { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } /* Burger */ .hd-burger { display: none; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.35); background: transparent; border-radius: 2px; cursor: pointer; position: relative; z-index: 82; } .hd-burger span { display: block; width: 20px; height: 1.5px; background: #fff; margin: 4.5px auto; transition: background .3s ease; } .hd.scrolled .hd-burger { border-color: var(--line); } .hd.scrolled .hd-burger span { background: var(--ink); } .hd.solid .hd-burger { border-color: var(--line); } .hd.solid .hd-burger span { background: var(--ink); } @media (max-width: 1080px) { .hd-nav, .hd-acts .btn { display: none; } .hd-burger { display: block; } .hd-in { height: 70px; } .hd-logo img { height: 36px; } } /* Mobile drawer — above header so close button stays clickable */ .dr { position: fixed; inset: 0; z-index: 80; background: var(--paper); transform: translateX(100%); transition: transform .45s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; overflow-y: auto; } .dr.open { transform: translateX(0); } .dr-head { display: flex; align-items: center; justify-content: space-between; height: 70px; border-bottom: var(--rule); padding: 0 var(--gutter); } .dr-head img { height: 36px; width: auto; } .dr-close { width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; cursor: pointer; border-radius: 2px; font-size: 20px; color: var(--ink); line-height: 1; } .dr-nav { flex: 1; padding: 10px 0; } .dr-nav a { display: flex; align-items: center; justify-content: space-between; font-family: var(--serif); font-size: 26px; color: var(--ink); padding: 18px var(--gutter); border-bottom: var(--rule); } .dr-nav a i { color: var(--red); font-size: 16px; } .dr-cta { padding: 22px var(--gutter) 34px; display: grid; gap: 10px; } .dr-cta .btn { width: 100%; } /* ------------------------------------------------------------ HERO (home) — light typographic hero with image collage ------------------------------------------------------------ */ .hero { position: relative; padding: 168px 0 96px; background: var(--paper); overflow: hidden; } .hero::before { /* faint ledger grid on paper */ content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; opacity: .35; mask-image: radial-gradient(ellipse 90% 70% at 30% 20%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 30% 20%, #000 30%, transparent 75%); } .hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } } .hero h1 { margin-top: 20px; } .hero h1 em { color: var(--red); font-style: italic; } .hero .lede { margin-top: 22px; max-width: 520px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } .hero-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; font-family: var(--label); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .hero-meta span { display: inline-flex; align-items: center; gap: 8px; } .hero-meta i { color: var(--gold); font-size: 13px; } /* Collage — layered frames, slight rotation, heritage feel */ .hero-art { position: relative; min-height: 480px; } .hero-art .fr { position: absolute; border: 8px solid #fff; background: #fff; box-shadow: 0 24px 60px -20px rgba(20,49,59,.28); overflow: hidden; transition: transform .5s ease; } .hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-art .fr-a { width: 62%; height: 66%; top: 0; left: 4%; transform: rotate(-2deg); z-index: 2; } .hero-art .fr-b { width: 52%; height: 52%; bottom: 0; right: 0; transform: rotate(1.6deg); z-index: 3; } .hero-art .fr-c { width: 40%; height: 30%; top: 8%; right: 0; transform: rotate(2.4deg); z-index: 1; background: var(--wash-gold); display: flex; align-items: center; justify-content: center; padding: 20px; } .hero-art .fr-c .q { font-family: var(--serif); font-size: 17px; font-style: italic; color: var(--ink); line-height: 1.5; text-align: center; } .hero-art .fr-c .q b { color: var(--red); } /* rotating seal badge */ .seal { position: absolute; z-index: 5; width: 118px; height: 118px; bottom: 6%; left: 40%; border-radius: 50%; background: var(--ink); color: var(--gold-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 16px 40px -12px rgba(20,49,59,.5); border: 1px solid rgba(217,178,95,.4); } .seal b { font-family: var(--serif); font-size: 30px; font-weight: 600; color: #fff; line-height: 1; } .seal span { font-family: var(--label); font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; } .seal-spin { position: absolute; inset: -10px; border-radius: 50%; border: 1px dashed rgba(185,138,47,.5); animation: sealSpin 26s linear infinite; } @keyframes sealSpin { to { transform: rotate(360deg); } } @media (max-width: 980px) { .hero-art { min-height: 400px; } } @media (max-width: 640px) { .hero { padding-top: 130px; } .hero-art { min-height: 330px; } .seal { width: 92px; height: 92px; } .seal b { font-size: 24px; } } /* Hero load choreography */ .hero .anim { opacity: 0; transform: translateY(26px); animation: heroRise .9s cubic-bezier(.22,.61,.36,1) forwards; } .hero .a1 { animation-delay: .05s; } .hero .a2 { animation-delay: .2s; } .hero .a3 { animation-delay: .35s; } .hero .a4 { animation-delay: .5s; } .hero .a5 { animation-delay: .68s; } @keyframes heroRise { to { opacity: 1; transform: translateY(0); } } .hero-art .fr { opacity: 0; animation: frIn 1s cubic-bezier(.22,.61,.36,1) forwards; } .hero-art .fr-a { animation-delay: .3s; } .hero-art .fr-b { animation-delay: .45s; } .hero-art .fr-c { animation-delay: .6s; } .hero-art .seal { opacity: 0; animation: frIn 1s .8s cubic-bezier(.22,.61,.36,1) forwards; } @keyframes frIn { from { opacity: 0; transform: translateY(34px) rotate(var(--rot, 0deg)); } to { opacity: 1; } } /* ------------------------------------------------------------ TICKER — university/partner marquee on gold rule ------------------------------------------------------------ */ .ticker { background: var(--ink); padding: 20px 0; overflow: hidden; position: relative; } .ticker::before, .ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; } .ticker::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); } .ticker::after { right: 0; background: linear-gradient(-90deg, var(--ink), transparent); } .ticker-track { display: flex; gap: 64px; width: max-content; animation: tick 42s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } .ticker-track span { font-family: var(--label); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.62); display: inline-flex; align-items: center; gap: 18px; white-space: nowrap; } .ticker-track span::after { content: '◆'; font-size: 7px; color: var(--gold); } @keyframes tick { to { transform: translateX(-50%); } } /* ------------------------------------------------------------ CARDS ------------------------------------------------------------ */ .card { background: var(--card); border: var(--rule); border-radius: 2px; transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease; position: relative; } .card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -22px rgba(20,49,59,.22); border-color: var(--gold-soft); } .card::before { /* top hairline accent on hover */ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; } .card:hover::before { transform: scaleX(1); } /* Offer cards (3 verticals) */ .offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 940px) { .offers { grid-template-columns: 1fr; } } .offer { padding: 40px 34px 34px; display: flex; flex-direction: column; } .offer .o-idx { font-family: var(--serif); font-size: 44px; font-weight: 300; color: var(--line); line-height: 1; transition: color .3s ease; } .offer:hover .o-idx { color: var(--gold); } .offer h3 { font-size: 25px; margin: 14px 0 10px; } .offer p { font-size: 13.5px; color: var(--muted); line-height: 1.7; } .offer ul { list-style: none; margin: 18px 0 26px; padding: 16px 0 0; border-top: var(--rule); display: grid; gap: 9px; } .offer ul li { display: flex; gap: 10px; font-size: 13px; color: var(--ink-soft); align-items: flex-start; } .offer ul i { color: var(--red); font-size: 14px; margin-top: 3px; flex-shrink: 0; } .offer .btn { margin-top: auto; } /* Program cards — "catalog card" style */ .progs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 940px) { .progs { grid-template-columns: 1fr; } } @media (min-width: 941px) and (max-width: 1150px) { .progs { grid-template-columns: repeat(2, 1fr); } } .prog { display: flex; flex-direction: column; overflow: hidden; } .prog .p-media { position: relative; aspect-ratio: 16/9.5; overflow: hidden; background: var(--paper-deep); } .prog .p-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .prog:hover .p-media img { transform: scale(1.05); } .prog .p-media .p-mode { position: absolute; top: 12px; left: 12px; background: rgba(20,49,59,.92); color: #fff; font-family: var(--label); font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 5px 10px; border-radius: 2px; backdrop-filter: blur(4px); } .prog .p-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; } .prog .p-uni { display: flex; align-items: center; gap: 8px; font-family: var(--label); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .prog .p-uni i { color: var(--gold); font-size: 14px; } .prog h3 { font-size: 18.5px; line-height: 1.35; } .prog h3 a { color: inherit; } .prog h3 a:hover { color: var(--red); } .prog .p-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding-top: 13px; border-top: var(--rule); font-size: 12.5px; color: var(--muted); } .prog .p-meta span { display: inline-flex; align-items: center; gap: 6px; } .prog .p-meta i { color: var(--gold); font-size: 13px; } .prog .p-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; } .prog .p-fee b { display: block; font-family: var(--serif); font-size: 20px; color: var(--ink); font-weight: 600; } .prog .p-fee span { font-family: var(--label); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } /* University cards */ .unis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } @media (max-width: 1080px) { .unis { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 780px) { .unis { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .unis { grid-template-columns: 1fr; } } .uni { text-align: center; padding: 0 0 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } a.uni:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(10,20,40,.12); } .uni .u-thumb { position: relative; width: 100%; height: 118px; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(135deg,#0A2A66,#165caa); } .uni .u-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .uni .u-logo { position: relative; z-index: 2; height: 56px; margin-bottom: -26px; width: 76px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.18); padding: 5px 8px; } .uni .u-logo img { position: static; width: auto; height: auto; max-height: 46px; max-width: 62px; object-fit: contain; } .uni h3 { font-size: 15px; line-height: 1.4; margin-top: 20px; padding: 0 16px; } .uni h3 a { color: inherit; } .uni h3 a:hover { color: var(--red); } .uni .u-loc { font-family: var(--label); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 0 14px; } .uni .u-progs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 2px; padding: 0 14px; } .uni .u-progs b { font-family: var(--label); font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--ink); background: var(--wash-gold, rgba(217,178,95,.14)); border: 1px solid var(--line); border-radius: 20px; padding: 3px 9px; } .uni .u-progs i { font-style: normal; font-size: 10.5px; color: var(--muted); align-self: center; } .uni .u-cta { margin-top: auto; padding-top: 10px; font-family: var(--label); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--red); display: inline-flex; align-items: center; gap: 6px; } .uni .u-cta i { font-size: 12px; transition: transform .16s ease; } a.uni:hover .u-cta i { transform: translateX(3px); } /* ------------------------------------------------------------ STATS — ink band with count-up ------------------------------------------------------------ */ .stats-band { padding: 76px 0; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } } .stat { text-align: center; padding: 30px 14px; border: 1px solid rgba(217,178,95,.25); border-radius: 2px; position: relative; } .stat::after { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 34px; height: 2px; background: var(--gold-soft); } .stat .num { font-family: var(--serif); font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 500; color: #fff; line-height: 1; } .stat .num em { font-style: normal; color: var(--gold-soft); } .stat .lbl { font-family: var(--label); font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 12px; } /* ------------------------------------------------------------ PROCESS — numbered ledger steps ------------------------------------------------------------ */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: var(--rule); border-left: var(--rule); } @media (max-width: 940px) { .steps { grid-template-columns: 1fr; } } .step { padding: 34px 30px; border-right: var(--rule); border-bottom: var(--rule); background: var(--card); position: relative; transition: background .3s ease; } .step:hover { background: var(--wash-gold); } .step .s-num { font-family: var(--serif); font-size: 38px; font-weight: 300; color: var(--line); transition: color .3s ease; line-height: 1; } .step:hover .s-num { color: var(--red); } .step h4 { font-family: var(--serif); font-size: 19px; margin: 12px 0 8px; } .step p { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0; } /* ------------------------------------------------------------ QUOTES — chairman's quote rotator on paper-deep ------------------------------------------------------------ */ .quotes { position: relative; } .quote-stage { min-height: 210px; position: relative; } .quote-item { position: absolute; inset: 0; opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; pointer-events: none; } .quote-item.on { opacity: 1; transform: none; pointer-events: auto; } .quote-item blockquote { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-style: italic; color: var(--ink); line-height: 1.55; max-width: 820px; margin: 0 auto; text-align: center; } .quote-item blockquote::before { content: '“'; color: var(--gold); font-size: 1.6em; line-height: 0; vertical-align: -.3em; margin-right: 6px; } .quote-item cite { display: block; text-align: center; margin-top: 18px; font-family: var(--label); font-style: normal; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } .quote-item cite b { color: var(--red); font-weight: 700; } .quote-dots { display: flex; gap: 8px; justify-content: center; margin-top: 26px; } .quote-dots button { width: 28px; height: 3px; border: none; background: var(--line); cursor: pointer; padding: 0; transition: background .3s ease; } .quote-dots button.on { background: var(--red); } /* ------------------------------------------------------------ FAQ ------------------------------------------------------------ */ .faqs { max-width: 800px; margin: 0 auto; border-top: var(--rule); } .faq { border-bottom: var(--rule); } .faq .fq { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 6px; cursor: pointer; user-select: none; } .faq .fq h4 { font-family: var(--serif); font-size: 19px; font-weight: 500; } .faq .fq .tg { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--ink); background: var(--card); transition: all .32s ease; flex-shrink: 0; } .faq.open .tg { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(45deg); } .faq .fa { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.4,0,.2,1); } .faq.open .fa { grid-template-rows: 1fr; } .faq .fa > div { overflow: hidden; } .faq .fa p { font-size: 14px; color: var(--muted); line-height: 1.8; padding: 0 6px 26px; max-width: 660px; margin: 0; } /* ------------------------------------------------------------ PAGE HERO (inner pages — image band ~62vh) ------------------------------------------------------------ */ .ph { position: relative; display: flex; align-items: flex-end; min-height: 62vh; padding: 128px 0 60px; background: var(--ink); color: #fff; overflow: hidden; isolation: isolate; } .ph.small { min-height: 46vh; } .ph-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; animation: phZoom 2s cubic-bezier(.22,.61,.36,1) both; } .ph-media img { width: 100%; height: 100%; object-fit: cover; opacity: .52; } .ph-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,36,44,.97) 0%, rgba(14,36,44,.66) 46%, rgba(14,36,44,.28) 100%), linear-gradient(to right, rgba(14,36,44,.5), transparent 68%); } @keyframes phZoom { from { transform: scale(1.1); } to { transform: scale(1); } } .ph h1 { color: #fff; margin-top: 16px; max-width: 820px; } .ph h1 em { color: var(--gold-soft); font-style: italic; } .ph p { color: rgba(255,255,255,.8); max-width: 640px; margin-top: 16px; font-size: 15px; line-height: 1.75; } .ph .stamp { color: var(--gold-soft); } .ph .stamp::before { background: var(--gold-soft); } .ph .crumbs { display: flex; gap: 9px; font-family: var(--label); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 10px; } .ph .crumbs a { color: rgba(255,255,255,.75); } .ph .crumbs a:hover { color: var(--gold-soft); } .ph .ph-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } .ph .ph-facts { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 28px; font-size: 13.5px; color: rgba(255,255,255,.78); } .ph .ph-facts span { display: inline-flex; align-items: center; gap: 9px; } .ph .ph-facts i { color: var(--gold-soft); font-size: 15px; } .ph .ph-stats { display: flex; flex-wrap: wrap; gap: 44px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2); width: fit-content; } .ph .ph-stats b { display: block; font-family: var(--serif); font-size: 30px; font-weight: 500; color: #fff; } .ph .ph-stats span { font-family: var(--label); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); } /* load choreography for page heroes */ .ph .anim { opacity: 0; transform: translateY(20px); animation: heroRise .8s cubic-bezier(.22,.61,.36,1) forwards; } .ph .a1 { animation-delay: .08s; } .ph .a2 { animation-delay: .2s; } .ph .a3 { animation-delay: .32s; } .ph .a4 { animation-delay: .44s; } /* ------------------------------------------------------------ CTA — ink band with gold ring ornament (no loud red) ------------------------------------------------------------ */ .cta { position: relative; background: var(--ink-deep); color: #fff; text-align: center; padding: 96px 0; overflow: hidden; isolation: isolate; } .cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(560px 280px at 50% -80px, rgba(226,59,68,.16), transparent 70%), radial-gradient(460px 260px at 90% 120%, rgba(185,138,47,.14), transparent 70%); } .cta::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background: var(--gold-soft); } .cta h2 { color: #fff; max-width: 760px; margin: 16px auto 0; } .cta h2 em { color: var(--gold-soft); font-style: italic; } .cta p { color: rgba(255,255,255,.75); max-width: 580px; margin: 18px auto 0; font-size: 15px; } .cta .acts { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; } .cta .stamp { color: var(--gold-soft); } .cta .stamp::before, .cta .stamp::after { background: var(--gold-soft); } /* ------------------------------------------------------------ FOOTER — ledger footer ------------------------------------------------------------ */ .ft { background: var(--ink-deep); color: rgba(255,255,255,.68); padding: 80px 0 0; } .ft-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 52px; padding-bottom: 60px; } @media (max-width: 940px) { .ft-grid { grid-template-columns: 1fr 1fr; gap: 36px; } } @media (max-width: 540px) { .ft-grid { grid-template-columns: 1fr; } } .ft-brand img { height: 48px; width: auto; background: #fff; border-radius: 10px; padding: 7px 10px; } .ft-brand .ft-tag { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--gold-soft); margin: 20px 0 0; } .ft-brand p { font-size: 13px; line-height: 1.75; margin-top: 14px; max-width: 330px; color: rgba(255,255,255,.6); } .ft-col h4 { font-family: var(--label); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; margin-bottom: 20px; } .ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .ft-col ul a { color: rgba(255,255,255,.62); font-size: 13.5px; transition: color .2s ease, padding-left .25s ease; } .ft-col ul a:hover { color: var(--gold-soft); padding-left: 5px; } .ft-ct { display: grid; gap: 14px; font-size: 13.5px; } .ft-ct .row { display: flex; gap: 11px; align-items: flex-start; } .ft-ct .row i { color: var(--gold-soft); font-size: 15px; margin-top: 2px; flex-shrink: 0; } .ft-ct a { color: rgba(255,255,255,.78); } .ft-ct a:hover { color: var(--gold-soft); } .ft-soc { display: flex; gap: 10px; margin-top: 24px; } .ft-soc a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.75); font-size: 15px; transition: all .28s ease; } .ft-soc a:hover { border-color: var(--gold-soft); color: var(--gold-soft); transform: translateY(-2px); } .ft-bot { border-top: 1px solid rgba(255,255,255,.12); padding: 24px 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; font-family: var(--label); font-size: 11.5px; letter-spacing: .08em; color: rgba(255,255,255,.45); } .ft-bot nav { display: flex; gap: 24px; } .ft-bot nav a { color: rgba(255,255,255,.45); } .ft-bot nav a:hover { color: #fff; } /* ------------------------------------------------------------ FORMS ------------------------------------------------------------ */ .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .fgrid .full { grid-column: 1 / -1; } @media (max-width: 620px) { .fgrid { grid-template-columns: 1fr; } } .fld label { display: block; font-family: var(--label); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .fld input, .fld select, .fld textarea { width: 100%; padding: 13px 15px; border: var(--rule); border-radius: 2px; background: var(--card); font-family: var(--sans); font-size: 14.5px; color: var(--ink); outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(226,59,68,.08); } .fld textarea { min-height: 120px; resize: vertical; } /* ------------------------------------------------------------ SPEC TABLE (program detail) ------------------------------------------------------------ */ .spec { width: 100%; border-collapse: collapse; font-size: 14.5px; } .spec th, .spec td { text-align: left; padding: 14px 18px; border-bottom: var(--rule); vertical-align: top; } .spec th { font-family: var(--label); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 600; width: 36%; } .spec td { color: var(--ink-soft); } /* ------------------------------------------------------------ DETAIL LAYOUT ------------------------------------------------------------ */ .detail { display: grid; grid-template-columns: 1fr 370px; gap: 52px; align-items: start; } @media (max-width: 1060px) { .detail { grid-template-columns: 1fr; } } .side { position: sticky; top: 104px; background: var(--card); border: var(--rule); border-radius: 2px; padding: 30px; } .side h4 { font-family: var(--serif); font-size: 22px; } .side .side-sub { font-size: 13px; color: var(--muted); margin: 4px 0 22px; } @media (max-width: 1060px) { .side { position: static; } } /* ------------------------------------------------------------ MISC ------------------------------------------------------------ */ .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { display: inline-flex; align-items: center; padding: 9px 17px; border: var(--rule); border-radius: 2px; background: var(--card); font-family: var(--label); font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--ink-soft); transition: all .22s ease; } .chip:hover, .chip.on { border-color: var(--red); color: var(--red); background: var(--wash-red); } .filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 20px; background: var(--card); border: var(--rule); border-radius: 2px; } .filters input, .filters select { padding: 11px 14px; border: var(--rule); border-radius: 2px; font-family: var(--sans); font-size: 13.5px; color: var(--ink); background: #fff; outline: none; } .filters input:focus, .filters select:focus { border-color: var(--red); } .filters input[type="text"] { flex: 1; min-width: 210px; } .filters .count { font-family: var(--label); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-left: auto; } .empty { text-align: center; padding: 72px 20px; color: var(--muted); } .empty i { font-size: 42px; color: var(--line); display: block; margin-bottom: 16px; } .rich { max-width: 780px; } .rich h2 { margin: 40px 0 16px; font-size: 27px; } .rich h3 { margin: 30px 0 12px; } .rich p { color: var(--muted); line-height: 1.85; } .rich img { border-radius: 2px; margin: 22px 0; } .rich ul, .rich ol { padding-left: 24px; color: var(--muted); } .rich li { margin-bottom: 9px; } /* pagination */ .pager { display: flex; gap: 8px; justify-content: center; margin-top: 52px; } .pager a, .pager span { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: var(--rule); border-radius: 2px; font-size: 13.5px; color: var(--ink-soft); background: var(--card); padding: 0 13px; font-family: var(--label); } .pager a:hover { border-color: var(--red); color: var(--red); } .pager .cur { background: var(--ink); border-color: var(--ink); color: #fff; } /* reveal on scroll */ .rv { opacity: 0; transform: translateY(30px); transition: opacity .85s ease, transform .85s cubic-bezier(.22,.61,.36,1); } .rv.in { opacity: 1; transform: none; } .rv.d1 { transition-delay: .1s; } .rv.d2 { transition-delay: .2s; } .rv.d3 { transition-delay: .3s; } /* lead popup */ .ovl { position: fixed; inset: 0; background: rgba(14,36,44,.68); z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; } .ovl.open { display: flex; } .modal { background: var(--card); width: 100%; max-width: 500px; border-radius: 2px; position: relative; max-height: 92vh; overflow-y: auto; box-shadow: 0 48px 100px -24px rgba(0,0,0,.5); } .modal-head { background: var(--ink); color: #fff; padding: 30px 30px 26px; position: relative; } .modal-head h3 { color: #fff; font-size: 23px; margin-top: 6px; } .modal-head p { color: rgba(255,255,255,.65); font-size: 12.5px; margin: 7px 0 0; } .modal-body { padding: 28px 30px 30px; } .modal-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: #fff; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; } .msg { display: none; padding: 13px 15px; border-radius: 2px; font-size: 13.5px; } .msg.ok { display: block; background: #ECFDF3; color: #107C41; border: 1px solid #ABEFC6; } .msg.err { display: block; background: #FDECEC; color: #B42318; border: 1px solid #FDC6C7; } /* whatsapp float */ .wa { position: fixed; right: 24px; bottom: 24px; width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 25px; z-index: 55; box-shadow: 0 12px 30px -8px rgba(37,211,102,.6); transition: transform .25s ease; } .wa:hover { transform: translateY(-3px); color: #fff; } /* 404 */ .nf { min-height: 64vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 170px 24px 90px; } .nf .code { font-family: var(--serif); font-size: clamp(100px, 20vw, 190px); color: var(--line); line-height: 1; } .nf h1 { font-size: 30px; margin-top: 12px; } /* country cards (study abroad) */ .countries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 940px) { .countries { grid-template-columns: 1fr; } } .country { padding: 0 0 30px; display: flex; flex-direction: column; overflow: hidden; } .country .c-media { display: block; height: 160px; margin: 0 0 22px; overflow: hidden; background: var(--paper-deep); } .country .c-media img { width: 100%; height: 100%; object-fit: cover; } .country .c-top { display: flex; align-items: center; justify-content: space-between; padding: 0 30px; } .country .flag { font-size: 36px; line-height: 1; } .country .c-tag { font-family: var(--label); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .country h3 { font-size: 23px; margin: 14px 0 8px; padding: 0 30px; } .country h3 a { color: inherit; text-decoration: none; } .country h3 a:hover { color: var(--red); } .country p { font-size: 13px; color: var(--muted); line-height: 1.7; padding: 0 30px; } .country .c-unis { list-style: none; margin: 14px 30px 0; padding: 0; display: grid; gap: 8px; } .country .c-unis li a { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); text-decoration: none; padding: 7px 10px; border: var(--rule); border-radius: 6px; background: #fff; } .country .c-unis li a:hover { border-color: var(--red); color: var(--red); } .country .c-unis li a img { width: 26px; height: 26px; object-fit: contain; border-radius: 4px; background: #fff; } .country .c-unis li a span { flex: 1; } .country .c-unis li a b { font-family: var(--label); font-size: 10px; letter-spacing: .08em; color: var(--muted); border: var(--rule); border-radius: 20px; padding: 2px 8px; } .country .c-facts { list-style: none; margin: 16px 30px 22px; padding: 16px 0 0; border-top: var(--rule); display: grid; gap: 9px; } .country .c-facts li { font-size: 12.5px; color: var(--ink-soft); display: flex; gap: 9px; align-items: flex-start; } .country .c-facts i { color: var(--gold); font-size: 13px; margin-top: 3px; flex-shrink: 0; } .country .c-ctas { margin-top: auto; padding: 0 30px; display: flex; gap: 10px; flex-wrap: wrap; } .country .btn { margin-top: 0; } /* blog cards */ .blogs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 940px) { .blogs { grid-template-columns: 1fr; } } .blog { overflow: hidden; display: flex; flex-direction: column; } .blog .b-media { aspect-ratio: 16/10; overflow: hidden; background: var(--paper-deep); } .blog .b-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .blog:hover .b-media img { transform: scale(1.04); } .blog .b-body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .blog .b-cat { font-family: var(--label); font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--red); margin-bottom: 11px; } .blog h3 { font-size: 19px; } .blog h3 a { color: inherit; } .blog h3 a:hover { color: var(--red); } .blog p { font-size: 13px; color: var(--muted); margin-top: 10px; } .blog .b-meta { margin-top: auto; padding-top: 18px; font-family: var(--label); font-size: 11px; letter-spacing: .08em; color: var(--muted); display: flex; justify-content: space-between; } /* utilities */ .tac { text-align: center; } .mt1 { margin-top: 8px; } .mt2 { margin-top: 16px; } .mt3 { margin-top: 24px; } .mt4 { margin-top: 42px; } .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } @media (max-width: 820px) { .g2 { grid-template-columns: 1fr; } } .no-scroll { overflow: hidden; }