/* ========================================================= GLAM — Global Alumni Meet page styles (glam.php only) Self-contained: ships together with glam.php; nothing here touches the site-wide style.css. ========================================================= */ /* ---- hero band ---- */ .glam-hero{ background:linear-gradient(rgba(16,24,40,.55), rgba(27,47,110,.75)), url('../../images/IIMA-BG.jpg') center/cover no-repeat; color:#fff; text-align:center; padding:72px 16px 64px; } .glam-hero .kick{ font-size:.78rem; letter-spacing:.35em; text-transform:uppercase; color:#cdd8f2; } .glam-hero h1{ font-weight:800; letter-spacing:-.5px; margin:10px 0 6px; } .glam-hero .date-pill{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:10px 22px; font-weight:700; font-size:1.05rem; } .glam-hero .sub{ color:#dbe2f2; margin-top:12px; font-size:.95rem; } /* ---- "registration soon" button-style banner ---- */ .glam-soon{ display:inline-block; background:var(--navy, #1b2f6e); color:#fff; border-radius:12px; padding:12px 28px; font-weight:700; letter-spacing:.02em; box-shadow:0 8px 22px rgba(27,47,110,.28); cursor:default; } .glam-soon i{ margin-right:8px; } /* ---- dean message card (letter style: message first, signed with a centered portrait + name underneath). Flex column so the signature sits at the bottom and the card height matches the poster beside it. ---- */ .glam-dean{ background:#fff; border:1px solid #e6eaf3; border-radius:18px; padding:40px 44px; box-shadow:0 10px 30px rgba(16,24,40,.06); display:flex; flex-direction:column; } .glam-dean p{ color:#4a566e; font-size:.96rem; line-height:1.85; } .glam-dean .dean-sign{ text-align:center; margin-top:auto; padding-top:26px; } .glam-dean .dean-photo-lg{ width:150px; height:170px; object-fit:cover; object-position:top; border-radius:14px; border:1px solid #e6eaf3; cursor:zoom-in; box-shadow:0 14px 34px rgba(16,24,40,.18); } .glam-dean .dean-name{ font-weight:800; margin-top:14px; font-size:1.05rem; } .glam-dean .dean-role{ color:#6a7690; font-size:.85rem; } @media (max-width:768px){ .glam-dean{ padding:26px 22px; } } /* ---- schedule ---- */ .glam-sched .card-day{ background:#fff; border:1px solid #e6eaf3; border-radius:16px; padding:26px; height:100%; box-shadow:0 8px 24px rgba(16,24,40,.05); } .glam-sched .card-day h6{ font-weight:800; } .glam-sched .card-day .num{ width:38px; height:38px; border-radius:10px; background:#eef2fa; color:var(--navy,#1b2f6e); display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:12px; } .glam-sched p{ color:#4a566e; font-size:.93rem; line-height:1.8; margin:0; } /* ---- invite poster ---- */ .glam-invite img{ max-width:min(520px, 100%); border-radius:16px; border:1px solid #e6eaf3; box-shadow:0 16px 44px rgba(16,24,40,.16); cursor:zoom-in; } /* side-by-side card: exactly matches the Dean card's height; the poster scales to fit inside so both columns end on the same line */ .glam-invite-card{ background:#fff; border:1px solid #e6eaf3; border-radius:18px; box-shadow:0 10px 30px rgba(16,24,40,.06); padding:18px; display:flex; align-items:center; justify-content:center; } .glam-invite-card img{ max-width:100%; max-height:620px; width:auto; object-fit:contain; border-radius:12px; cursor:zoom-in; box-shadow:0 10px 28px rgba(16,24,40,.14); } /* desktop: the card stretches with the row (its height comes from the Dean card); the poster is absolutely fitted inside, so it can NEVER push the column taller — both cards always start and end on the same line */ @media (min-width: 992px){ .glam-invite-card{ position:relative; } .glam-invite-card img{ position:absolute; inset:18px; margin:auto; max-width:calc(100% - 36px); max-height:calc(100% - 36px); width:auto; height:auto; } } /* ---- reunion photo gallery: horizontal scroll strip + lightbox ---- */ .glam-gallery-wrap{ position:relative; } .glam-gallery{ display:flex; gap:14px; overflow-x:auto; padding:6px 4px 14px; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; } .glam-gallery img{ flex:0 0 auto; width:300px; height:200px; object-fit:cover; border-radius:12px; cursor:zoom-in; scroll-snap-align:start; transition:transform .25s ease, box-shadow .25s ease; } .glam-gallery img:hover{ transform:scale(1.03); box-shadow:0 12px 30px rgba(16,24,40,.18); } /* thin, tidy scrollbar */ .glam-gallery::-webkit-scrollbar{ height:8px; } .glam-gallery::-webkit-scrollbar-track{ background:#e6eaf3; border-radius:8px; } .glam-gallery::-webkit-scrollbar-thumb{ background:#8fa0cc; border-radius:8px; } .glam-gallery::-webkit-scrollbar-thumb:hover{ background:var(--navy,#1b2f6e); } /* left / right arrows */ .glam-arrow{ position:absolute; top:50%; transform:translateY(-60%); width:42px; height:42px; border-radius:50%; border:1px solid #dbe4f5; background:#fff; color:var(--navy,#1b2f6e); font-size:1.1rem; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 8px 20px rgba(16,24,40,.15); z-index:5; } .glam-arrow:hover{ background:var(--navy,#1b2f6e); color:#fff; } .glam-arrow.left{ left:-14px; } .glam-arrow.right{ right:-14px; } @media (max-width:768px){ .glam-gallery img{ width:230px; height:160px; } } /* ---- lightbox overlay (click any photo to maximise) ---- */ .glam-lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(10,14,25,.92); display:none; align-items:center; justify-content:center; padding:28px; } .glam-lightbox.open{ display:flex; } .glam-lightbox img{ max-width:94vw; max-height:88vh; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.6); } .glam-lightbox .close{ position:absolute; top:18px; right:24px; color:#fff; font-size:2rem; background:none; border:0; cursor:pointer; line-height:1; } /* ---- register card (mirrors the DAA "Know a worthy WIMWIan?" card) ---- */ .glam-register{ background:#eef2fa; border:1px solid #dbe4f5; border-radius:18px; padding:34px; text-align:center; } /* ---- FAQ accordion ---- */ .glam-faq .accordion-item{ border:1px solid #e6eaf3; border-radius:12px !important; overflow:hidden; margin-bottom:10px; } .glam-faq .accordion-button{ font-weight:700; font-size:.95rem; background:#fff; } .glam-faq .accordion-button:not(.collapsed){ background:#eef2fa; color:var(--navy,#1b2f6e); box-shadow:none; } .glam-faq .accordion-body{ color:#4a566e; font-size:.92rem; line-height:1.75; } /* ---- nostalgia: tagline, brick band, quote, memory-lane timeline ---- */ .page-band .glam-tagline{ color:#e8d9a0 !important; font-style:italic; font-size:.92rem; margin-top:8px !important; } .glam-bricks{ background:linear-gradient(rgba(74,30,24,.88), rgba(74,30,24,.88)), url('../../images/bricks.jpg') center/cover; color:#fff; padding:40px 16px; } .glam-quote{ font-size:1.35rem; font-weight:800; letter-spacing:-.3px; font-style:italic; } .glam-quote-sub{ color:#e9d9c9; font-size:.92rem; max-width:720px; margin-inline:auto; line-height:1.75; } .glam-timeline{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; } .glam-era{ background:#fff; border:1px solid #e6eaf3; border-radius:14px; padding:18px 20px; width:210px; text-align:center; box-shadow:0 8px 22px rgba(16,24,40,.06); border-top:4px solid #b0713f; /* brick accent */ } .glam-era b{ display:block; color:var(--navy,#1b2f6e); font-size:1.02rem; } .glam-era span{ display:block; color:#6a7690; font-size:.82rem; margin-top:6px; line-height:1.55; } .glam-era.now{ border-top-color:var(--navy,#1b2f6e); background:#eef2fa; } /* ---- section headers ---- */ .glam-sec-title{ font-weight:800; letter-spacing:-.3px; } .glam-kicker{ font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:#8a96b3; font-weight:700; } @media (max-width: 768px){ .glam-hero{ padding:52px 14px 44px; } .glam-dean{ padding:22px; } } /* ---- GLAM 2026 registration form (16-Sep-2026) ---- */ /* one bordered block per activity group, stacking on a phone */ .glam-actgrp{ border:1px solid #e6eaf3; border-radius:12px; padding:12px 14px; background:#fbfcfe; } .glam-acthead{ font-weight:800; color:var(--navy,#1b2f6e); font-size:.85rem; letter-spacing:.2px; margin-bottom:6px; padding-bottom:6px; border-bottom:1px dashed #dbe4f5; } .glam-actgrp .form-check{ margin-bottom:2px; } .glam-actgrp .form-check-label{ font-size:.88rem; } @media (max-width: 575.98px){ .glam-actgrp{ padding:10px 12px; } .glam-actgrp .form-check-label{ font-size:.85rem; } /* comfortable tap targets on the form */ .cmty-wrap .form-check-input{ width:1.15rem; height:1.15rem; margin-top:.15rem; } .cmty-wrap .form-control, .cmty-wrap .form-select{ font-size:.95rem; } } /* ---- registration form blocks (19-Sep-2026): agenda, SARC, hotels ---- */ .glam-block{ background:#fff; border:1px solid #dfe5f1; border-left:4px solid var(--navy,#1b2f6e); border-radius:12px; padding:16px 18px; font-size:.92rem; } .glam-block-soft{ background:#f6f8fc; border-left-color:#8fa0cc; } .glam-block-head{ font-weight:800; color:var(--navy,#1b2f6e); margin-bottom:8px; font-size:.95rem; } .glam-agenda{ padding-left:18px; margin:0; } .glam-agenda li{ margin:3px 0; line-height:1.55; } .glam-hotels thead th{ background:#eef2fa; font-size:.8rem; white-space:nowrap; } .glam-hotels td{ vertical-align:middle; } @media (max-width:576px){ .glam-block{ padding:14px; } } /* ---- 21-Sep-2026: agenda timeline card + accommodation card ---- */ .glam-agenda-card{ background:linear-gradient(180deg,#fbfcff 0%,#f3f6fd 100%); border:1px solid #d9e1f2; border-radius:16px; padding:20px 22px; box-shadow:0 8px 24px rgba(27,47,110,.07); } .glam-agenda-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; padding-bottom:12px; margin-bottom:14px; border-bottom:1px dashed #c9d3ea; } .glam-agenda-kick{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#6a7690; font-weight:700; } .glam-agenda-date{ font-size:1.35rem; font-weight:800; color:var(--navy,#1b2f6e); letter-spacing:-.3px; } .glam-agenda-venue{ font-size:.8rem; color:#6a7690; background:#fff; border:1px solid #dfe5f1; border-radius:999px; padding:4px 12px; } /* ========================================================= THE AGENDA LIST (24-Sep-2026) --------------------------------------------------------- WHY THESE SELECTORS LOOK HEAVY: ".glam-timeline" is already used by the public glam.php page, higher up this file, as .glam-timeline{ display:flex; flex-wrap:wrap; justify-content:center; } (the row of "era" cards). The agenda list uses the same class name, so every agenda row became a CENTRED FLEX ITEM — each row started at its own x, and since the dot is drawn at the start of its row, the dots walked off the vertical rail. That is the staircase in the screenshot. Everything below is scoped inside .glam-agenda-card, so it beats that rule on specificity (0,2,0 against 0,1,0) and glam.php's era strip is left completely alone. Both the old names (.glam-timeline / .glam-tl-time / .glam-tl-what) and the new ones (.glam-agenda-list / .glam-ag-time / .glam-ag-what) are covered, so the markup can stay exactly as it is. ========================================================= */ .glam-agenda-card .glam-timeline, .glam-agenda-card .glam-agenda-list{ display:block; /* NOT the flex row from line ~153 */ list-style:none; margin:0; padding:0; position:relative; } .glam-agenda-card .glam-timeline::before, .glam-agenda-card .glam-agenda-list::before{ /* the rail */ content:""; position:absolute; left:5px; top:10px; bottom:10px; width:2px; background:#d3dcf0; border-radius:2px; } .glam-agenda-card .glam-timeline > li, .glam-agenda-card .glam-agenda-list > li{ position:relative; display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; gap:12px; padding:7px 0 7px 20px; text-align:left; width:auto; margin:0; } .glam-agenda-card .glam-timeline > li::before, .glam-agenda-card .glam-agenda-list > li::before{ /* the dot, always on the rail */ content:""; position:absolute; left:0; top:13px; width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid var(--navy,#1b2f6e); box-shadow:0 0 0 3px #eef2fa; box-sizing:border-box; } /* rail centre = 5 + 1 = 6px ; dot centre = 0 + 6 = 6px — they cannot drift */ .glam-agenda-card .glam-tl-time, .glam-agenda-card .glam-ag-time{ flex:0 0 132px; font-weight:700; font-size:.8rem; color:var(--navy,#1b2f6e); background:#fff; border:1px solid #dfe5f1; border-radius:8px; padding:4px 8px; text-align:center; white-space:nowrap; } .glam-agenda-card .glam-tl-what, .glam-agenda-card .glam-ag-what{ flex:1 1 auto; font-size:.9rem; color:#2b3550; line-height:1.55; padding-top:4px; } @media (max-width:576px){ /* the rail and the dots stay put; only the text drops under the time chip */ .glam-agenda-card .glam-timeline > li, .glam-agenda-card .glam-agenda-list > li{ flex-direction:column; gap:4px; } .glam-agenda-card .glam-tl-time, .glam-agenda-card .glam-ag-time{ flex:0 0 auto; align-self:flex-start; } .glam-agenda-card .glam-tl-what, .glam-agenda-card .glam-ag-what{ padding-top:0; } } .glam-acc-card{ background:#fff; border:1px solid #d9e1f2; border-radius:16px; padding:20px 22px; box-shadow:0 8px 24px rgba(27,47,110,.07); } .glam-acc-head{ font-weight:800; color:var(--navy,#1b2f6e); font-size:1.05rem; margin-bottom:12px; } .glam-acc-intro{ display:flex; gap:14px; align-items:flex-start; font-size:.92rem; color:#2b3550; line-height:1.6; background:#f6f8fc; border-radius:12px; padding:14px 16px; } .glam-acc-icon{ flex:0 0 42px; height:42px; border-radius:12px; background:var(--navy,#1b2f6e); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.2rem; } .glam-acc-dates{ display:flex; gap:10px; flex-wrap:wrap; } .glam-acc-dates span{ background:#fff; border:1px solid #dfe5f1; border-radius:999px; padding:4px 12px; font-size:.82rem; } .glam-acc-steps{ margin-top:12px; border:1px dashed #c9d3ea; border-radius:12px; padding:12px 16px; font-size:.9rem; color:#2b3550; } .glam-acc-steps-head{ font-weight:700; color:var(--navy,#1b2f6e); margin-bottom:6px; } .glam-acc-steps ol{ padding-left:18px; } .glam-acc-steps li{ margin:3px 0; } .glam-acc-note{ display:flex; gap:10px; align-items:flex-start; background:#fff8e6; border:1px solid #f3dc9a; border-radius:12px; padding:10px 14px; font-size:.84rem; color:#5c4a0a; } .glam-acc-note i{ color:#c98a00; font-size:1rem; margin-top:1px; } @media (max-width:576px){ .glam-acc-card,.glam-agenda-card{ padding:16px; } .glam-acc-intro{ flex-direction:column; } } /* ---- 23-Sep-2026: agenda in two time bars ---- */ .glam-agenda-day{ font-size:1.05rem; font-weight:700; color:var(--navy,#1b2f6e); letter-spacing:-.2px; } .glam-timebar{ background:#fff; border:1px solid #dfe5f1; border-radius:14px; padding:14px 16px; box-shadow:0 4px 14px rgba(16,24,40,.04); } .glam-timebar-head{ font-weight:800; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--navy,#1b2f6e); border-radius:8px; padding:7px 12px; margin:-2px -2px 12px; } .glam-timebar .glam-timeline::before, .glam-timebar .glam-agenda-list::before{ top:8px; bottom:8px; } .glam-timebar .glam-timeline > li, .glam-timebar .glam-agenda-list > li{ padding:6px 0 6px 26px; } .glam-timebar .glam-timeline > li::before, .glam-timebar .glam-agenda-list > li::before{ top:11px; } .glam-timebar .glam-tl-time, .glam-timebar .glam-ag-time{ flex:0 0 120px; font-size:.78rem; } .glam-timebar .glam-tl-what, .glam-timebar .glam-ag-what{ font-size:.88rem; } @media (max-width:991px){ .glam-timebar{ margin-bottom:2px; } } /* ========================================================= 28-Sep-2026 — agenda: symmetrical rows + tidy sub-bullets --------------------------------------------------------- 1. Every time chip is the SAME width (170px). Before, the chip was allowed to grow with its text ("08:00 am to 09:00 am" is wider than "08:00 pm onwards"), so the description column started at a different x on every row — the uneven look in the screenshot. 2. The description is now written as a small