/* Kalpurush is named in the stacks below as a local fallback only. The @font-face that used to sit here pointed at a jsdelivr repo that has gone, so both files came back 404 on every load. Bengali text is served by Noto Sans Bengali from Google Fonts, loaded in index.html. */ body, * { font-family: 'Noto Sans Bengali', 'Plus Jakarta Sans', 'Kalpurush', sans-serif; } .rd-detail-btn{transition:background-color .18s,color .18s,transform .12s;} .rd-detail-btn:hover,.rd-detail-btn:focus-visible,.rd-detail-btn:active{background:#2563eb;color:#fff;} .rd-detail-btn:active{transform:scale(.98);} .font-premium, .font-premium h4 { font-family: 'Plus Jakarta Sans', 'Noto Sans Bengali', 'Kalpurush', sans-serif; letter-spacing: .005em; } .font-display { font-family: 'Space Grotesk', 'Noto Sans Bengali', sans-serif !important; } /* ---------- Typography utility classes ---------- Reusable type ramp for the redesign; each class sets size + weight + line-height so a single class is enough. */ .rd-label{font-size:.6rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;line-height:1.2;} @media(min-width:640px){.rd-label{font-size:.68rem;}} .rd-h1{font-family:'Space Grotesk','Noto Sans Bengali',sans-serif;font-size:clamp(1.5rem,4vw,2.75rem);font-weight:800;line-height:1.08;letter-spacing:-.01em;} .rd-h2{font-family:'Space Grotesk','Noto Sans Bengali',sans-serif;font-size:clamp(1.25rem,3vw,2rem);font-weight:800;line-height:1.1;letter-spacing:-.005em;} .rd-h3{font-family:'Plus Jakarta Sans','Noto Sans Bengali',sans-serif;font-size:clamp(1rem,2.5vw,1.35rem);font-weight:700;line-height:1.2;} .rd-body{font-size:clamp(.85rem,1.5vw,1rem);line-height:1.7;color:var(--rd-text);} .rd-cap{font-size:.75rem;line-height:1.5;color:var(--rd-text-subtle);} button, a, select, input, .cursor-pointer { cursor: pointer !important; transition: color .25s var(--rd-ease-smooth), background-color .25s var(--rd-ease-smooth), border-color .25s var(--rd-ease-smooth), box-shadow .25s var(--rd-ease-smooth), transform .25s var(--rd-ease-smooth), opacity .25s var(--rd-ease-smooth); } button:active, a:active { transform: scale(0.96); } /* ================= PREMIUM HOVER PASS ================= .card-pro was referenced by the Home activity cards but never defined, so they had no surface and no hover. Defined here with a gradient top rail, an icon lift and a colour shift on the heading. */ .card-pro{position:relative;background:#fff;border:1px solid #e2e8f0; box-shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 28px -18px rgba(15,23,42,.18); overflow:hidden;isolation:isolate; transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease,border-color .32s ease;} .card-pro:before{content:"";position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,#0ea5e9,#6366f1);transform:scaleX(0); transform-origin:left;transition:transform .42s cubic-bezier(.16,1,.3,1);} .card-pro>div:first-child{transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease;} .card-pro>h3{transition:color .28s ease;} .card-pro:hover,.card-pro:focus-within{transform:translateY(-6px);border-color:#bae6fd; box-shadow:0 2px 6px rgba(15,23,42,.05), 0 26px 50px -24px rgba(14,165,233,.55);} .card-pro:hover:before,.card-pro:focus-within:before{transform:scaleX(1);} .card-pro:hover>div:first-child{transform:translateY(-2px) scale(1.08); box-shadow:0 10px 22px -12px rgba(14,165,233,.6);} .card-pro:hover>h3{color:#0369a1;} /* Generic premium tile: used on every static information card. */ .rd-tile{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease,background-color .3s ease;} .rd-tile:hover,.rd-tile:focus-within{transform:translateY(-4px);border-color:#bae6fd; box-shadow:0 2px 5px rgba(15,23,42,.05), 0 22px 44px -24px rgba(14,165,233,.5);} .rd-tile-dark{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease,background-color .3s ease;} .rd-tile-dark:hover{transform:translateY(-4px);background:rgba(255,255,255,.10); border-color:rgba(125,211,252,.5);box-shadow:0 22px 44px -24px rgba(56,189,248,.55);} /* The icon chip on the third PDACC "who teaches" tile. The other two use bg-indigo-500/15 and bg-blue-500/15, but Tailwind never built an emerald pair for this page, and rebuilding style.css would drop classes that the JavaScript injects at runtime. So this one chip carries its own colours: emerald-500 at 15% behind emerald-300 glyphs. */ .rd-pd-chip-emerald{background:rgba(16,185,129,.15);color:#6ee7b7;} /* Every button reacts to the mouse. The two exclusions are the slideshow and lightbox arrows, which are already vertically centred with a transform -- lifting them would knock them off centre. */ button:not(:disabled):not(.lb-nav):not([class*="translate-y-1/2"]):hover{ transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(14,165,233,.65);} button:not(:disabled):not(.lb-nav):not([class*="translate-y-1/2"]):active{transform:translateY(0) scale(.97);} a:not(.premium-nav-item):hover{color:#0369a1;} .glass-nav{background:rgba(255,255,255,.94);backdrop-filter:blur(20px);border-bottom:1px solid var(--rd-border);box-shadow:0 14px 34px -26px rgba(15,23,42,.35);} .glass-nav:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--rd-primary);opacity:.95;} .page-view { display: none; animation: pageIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .page-view.active { display: block; animation: none !important; } @keyframes pageIn { 0% { opacity: 0; transform: translateY(14px) scale(0.995); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion:reduce){.page-view{animation:none;}} ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { background: #F8FAFC; } ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: #2563EB; } .form-label{display:block;font-size:.78rem;font-weight:800;color:#334155;margin-bottom:.45rem;} .form-input{width:100%;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.85rem;padding:.78rem 1rem;font-size:.9rem;color:#0f172a;outline:none;transition:.2s;} .form-input:focus{background:#fff;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.12);} :root{ --rd-primary:#0ea5e9;--rd-primary-light:#e0f2fe; --rd-accent:#0ea5e9;--rd-accent-dark:#0284c7;--rd-sky:#38bdf8; --rd-surface:#f8fafc;--rd-border:#e2e8f0; --rd-ink:#0f172a;--rd-text:#334155;--rd-text-muted:#334155;--rd-text-subtle:#64748b; --rd-ease-out:cubic-bezier(.16,1,.3,1);--rd-ease-smooth:cubic-bezier(.4,0,.2,1); --rd-shadow-card:0 1px 3px rgba(15,23,42,.06),0 8px 24px -12px rgba(14,165,233,.12); --rd-shadow-lift:0 2px 6px rgba(15,23,42,.06),0 20px 40px -20px rgba(14,165,233,.35); --rd-shadow-glow:0 10px 26px -10px rgba(14,165,233,.65); } .premium-nav-item{position:relative;display:inline-flex;align-items:center;border:0;background:transparent;padding:.5rem .6rem;font-size:.78rem;font-weight:700;letter-spacing:.01em;color:#334155;cursor:pointer;border-radius:12px;white-space:nowrap;} .premium-nav-item:after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:99px;background:var(--rd-primary);transform:scaleX(0);transform-origin:center;transition:transform .28s ease;} .premium-nav-item:hover{color:#0c4a6e;background:rgba(14,165,233,.10);transform:translateY(-1px);} .premium-nav-item:hover:after,.premium-nav-item.active:after{transform:scaleX(1);} .premium-nav-item.active{color:#0c4a6e;background:rgba(14,165,233,.14);box-shadow:inset 0 0 0 1px rgba(14,165,233,.32);} /* The angled accent band on the brand row (the diagonal in the reference). */ .nav-accent{position:absolute;top:0;bottom:0;left:33%;width:31%;transform:skewX(-20deg);background:var(--rd-primary-light);opacity:1;pointer-events:none;z-index:0;} @media (max-width:1279px){ .nav-accent{left:auto;right:-8%;width:42%;opacity:.5;} } /* Second tier: the pages live on a light strip under the brand row. */ .nav-strip{background:var(--rd-surface);border-top:1px solid var(--rd-border);} .nav-strip .premium-nav-item{padding:.55rem .85rem;font-size:.8rem;color:var(--rd-text-muted);} .nav-strip .premium-nav-item:after{display:none;} .nav-strip .premium-nav-item:hover{color:#0c4a6e;background:rgba(14,165,233,.12);transform:none;} .nav-strip .premium-nav-item.active{background:var(--rd-primary);color:#fff;box-shadow:0 8px 18px -10px rgba(14,165,233,.95);} /* Premium register CTA */ .nav-cta{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .9rem;border-radius:13px;font-weight:800;font-size:.79rem;white-space:nowrap;color:#fff;background:var(--rd-accent);box-shadow:var(--rd-shadow-glow);border:1px solid rgba(2,132,199,.28);} .nav-cta:hover{transform:translateY(-2px);background:var(--rd-accent-dark);box-shadow:0 16px 34px -10px rgba(14,165,233,.9);} /* Premium brand lockup */ .brand-logo{position:relative;width:3.15rem;height:3.15rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;background:#f0f9ff;box-shadow:0 0 0 1.5px rgba(14,165,233,.35), 0 8px 22px -8px rgba(14,165,233,.45);overflow:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;} .brand-logo img{width:100%;height:100%;object-fit:contain;padding:.2rem;filter:drop-shadow(0 2px 5px rgba(15,23,42,.16));} .group:hover .brand-logo{transform:translateY(-1px) scale(1.05);box-shadow:0 0 0 1.5px rgba(14,165,233,.75), 0 14px 30px -8px rgba(14,165,233,.6);} /* Cover headline: one fixed message for the whole slideshow. */ /* প্রতিটি স্লাইডে নিজের একটি নিচ-থেকে-উপরের কালো গ্রেডিয়েন্ট আছে (ক্যাপশনের জন্য)। তাই এই পর্দাটি শুধু উপরের অংশে, হালকা করে — নইলে দুটো মিলে পুরো ছবিটাই কালো হয়ে যায়। লেখার পাঠযোগ্যতা text-shadow দিয়ে সামলানো হয়েছে, পর্দা গাঢ় করে নয়। */ .rd-hero-veil{background:linear-gradient(180deg,rgba(2,6,23,.52) 0%,rgba(2,6,23,.26) 24%,rgba(2,6,23,.06) 42%,rgba(2,6,23,0) 55%);} #rd-hero-copy>*{text-shadow:0 2px 10px rgba(2,6,23,.55), 0 1px 2px rgba(2,6,23,.45);} #rd-hero-copy button{text-shadow:none;} @keyframes rdHeroIn{0%{opacity:0;transform:translateY(16px);filter:blur(7px);letter-spacing:.14em}55%{filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0);letter-spacing:normal}} .rd-hero-anim>*{animation:rdHeroIn .95s cubic-bezier(.16,1,.3,1) both;} .rd-hero-anim>*:nth-child(1){animation-delay:.04s} .rd-hero-anim>*:nth-child(2){animation-delay:.20s} .rd-hero-anim>*:nth-child(3){animation-delay:.40s} .rd-hero-anim>*:nth-child(4){animation-delay:.58s} @media (prefers-reduced-motion:reduce){.rd-hero-anim>*{animation:none!important}} /* The two wordings swap in place, so the block keeps one height and the slideshow underneath never shifts. */ #rd-hero-copy{min-height:11.5rem;} @media (min-width:640px){#rd-hero-copy{min-height:15rem;}} /* The PDACC bar gets its own entrance so the two pages never feel like the same banner twice: it slides in from the side with a slight skew, where the home one rises and unblurs. */ @keyframes rdPdIn{0%{opacity:0;transform:translateX(-26px) skewX(-6deg) scale(.97)}60%{opacity:1;transform:translateX(0) skewX(0) scale(1.008)}100%{opacity:1;transform:none}} .rd-pd-anim>*{animation:rdPdIn 1.05s cubic-bezier(.22,1.2,.32,1) both;} .rd-pd-anim>*:nth-child(1){animation-delay:.03s} .rd-pd-anim>*:nth-child(2){animation-delay:.18s} .rd-pd-anim>*:nth-child(3){animation-delay:.34s} .rd-pd-anim>*:nth-child(4){animation-delay:.50s} .rd-pd-anim>*:nth-child(5){animation-delay:.64s} /* The hero crossfade. The markup asks for duration-1000 ease-out, and ease-out spends most of a fade in its first moments -- so the outgoing picture disappeared early and the step felt like a cut. A longer, symmetric curve makes the two pictures cross in the middle instead. Written here rather than as arbitrary Tailwind classes so the prebuilt stylesheet does not have to carry two more one-off utilities. */ .cover-slide, .pdacc-slide { transition-property: opacity, transform !important; transition-duration: 1600ms !important; transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important; } #pdacc-hero-copy>*{text-shadow:0 2px 10px rgba(2,6,23,.55), 0 1px 2px rgba(2,6,23,.45);} #pdacc-hero-copy button{text-shadow:none;} #pdacc-hero-copy{min-height:12.5rem;} @media (min-width:640px){#pdacc-hero-copy{min-height:16rem;}} /* The headline written on a picture, on both bars. The rule underneath it draws itself out, so a caption change is noticed without moving the picture at all. */ @keyframes rdCapIn{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}} @keyframes rdCapBadge{0%{opacity:0;transform:translateY(10px) scale(.92)}100%{opacity:1;transform:none}} @keyframes rdCapLine{0%{width:0;opacity:0}100%{width:2.75rem;opacity:1}} .rd-cap-badge{animation:rdCapBadge .7s cubic-bezier(.16,1,.3,1) both;animation-delay:.10s} .rd-cap-line{display:block;height:2px;margin-top:.55rem;border-radius:2px; background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,0)); animation:rdCapLine .8s cubic-bezier(.16,1,.3,1) both;animation-delay:.24s} .rd-cap-title{animation:rdCapIn .85s cubic-bezier(.16,1,.3,1) both;animation-delay:.34s} @media (prefers-reduced-motion:reduce){ .rd-pd-anim>*,.rd-cap-badge,.rd-cap-line,.rd-cap-title{animation:none!important} .rd-cap-line{width:2.75rem;opacity:1} } /* ---------- the President deck on the home page ---------------------- Batch 35: the two messages used to sit in a two-column grid, so the page opened with two walls of text. One at a time now. The track is a flex row as wide as the number of messages and slides by whole viewport widths; `touch-action:pan-y` keeps a vertical scroll working while a sideways drag is read as a swipe. */ .leader-deck{position:relative;overflow:hidden;} .leader-track{display:flex;align-items:flex-start;transition:transform .6s cubic-bezier(.16,1,.3,1);touch-action:pan-y;} .leader-slide{flex:0 0 100%;min-width:100%;} .leader-dots{display:flex;justify-content:center;gap:.45rem;margin-top:1.35rem;} .leader-dot{width:.45rem;height:.45rem;padding:0;border:0;border-radius:9999px;background:#cbd5e1;cursor:pointer;transition:width .3s ease,background .3s ease;} .leader-dot.on{width:1.6rem;background:#1d4ed8;} @media (prefers-reduced-motion:reduce){.leader-track{transition:none;}} .brand-word{display:flex;flex-direction:column;gap:.2rem;line-height:1;} .brand-name{white-space:nowrap;font-size:clamp(.92rem,3vw,1.3rem);line-height:1;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#0f172a;text-shadow:none;} .brand-duet,.brand-title-duet{color:#0f766e !important;text-shadow:0 1px 0 rgba(255,255,255,.8);} .brand-tag{white-space:nowrap;font-size:.5rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:#64748b;} @media (max-width:1023px){ .brand-tag{white-space:normal;font-size:.42rem;letter-spacing:.04em;line-height:1.3;max-width:11.5rem;} } @media (max-width:359px){ .brand-tag{display:none;} } @media (min-width:1024px) and (max-width:1279px){ .brand-tag{font-size:.45rem;letter-spacing:.05em;} } .mobile-nav-item{display:flex;align-items:center;gap:.65rem;width:100%;text-align:left;padding:.8rem 1rem;border-radius:12px;color:#334155;font-weight:700;} .mobile-nav-item:hover{background:rgba(14,165,233,.12);color:#0c4a6e;} .mobile-nav-item.active{background:rgba(14,165,233,.16);color:#0c4a6e;} /* ---------- Sub-pages (this site has no popups) ---------- */ .subpage-bar{position:sticky;top:5rem;z-index:30;background:rgba(248,250,252,.94);backdrop-filter:blur(10px);border-bottom:1px solid #e2e8f0;} .subpage-bar.on-dark{background:rgba(2,6,23,.94);border-bottom-color:rgba(255,255,255,.10);} .subpage-back{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.05rem;border-radius:9999px;background:#fff;border:1px solid #e2e8f0;font-size:.8rem;font-weight:700;color:#334155;box-shadow:0 1px 2px rgba(15,23,42,.06);transition:background .2s,color .2s,border-color .2s;cursor:pointer;white-space:nowrap;} .subpage-back:hover{background:#2563eb;border-color:#2563eb;color:#fff;} .subpage-back.on-dark{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);color:#e2e8f0;} .subpage-back.on-dark:hover{background:#2563eb;border-color:#2563eb;color:#fff;} .lb-ctrl{width:2.75rem;height:2.75rem;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.14);transition:background .2s;cursor:pointer;} .lb-ctrl:hover{background:rgba(255,255,255,.24);} /* Prev/next arrows flanking the photo itself, not just in the toolbar. */ .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:3rem;height:3rem;border-radius:9999px; display:flex;align-items:center;justify-content:center;z-index:5;cursor:pointer;color:#fff; background:rgba(2,6,23,.68);border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); transition:background .2s,border-color .2s;} .lb-nav:hover{background:rgba(37,99,235,.92);border-color:rgba(147,197,253,.6);} .lb-nav:active{transform:translateY(-50%) scale(.93);} .lb-nav-prev{left:.35rem;} .lb-nav-next{right:.35rem;} @media (min-width:640px){ .lb-nav-prev{left:-.75rem;} .lb-nav-next{right:-.75rem;} } /* ---------- Mobile + accessibility polish ---------- */ /* Horizontal clipping belongs on the html element, NOT on body: on body it turns body into a scroll container, which silently breaks position:sticky for the navbar and the sub-page back bars. */ html{overflow-x:clip;} @supports not (overflow:clip){ html{overflow-x:hidden;} } *{-webkit-tap-highlight-color:transparent;} /* iOS Safari zooms the whole page when a focused field is smaller than 16px. */ @media (max-width:640px){ input:not([type=checkbox]):not([type=radio]), select, textarea{font-size:16px !important;} .subpage-back{min-height:2.75rem;} } /* Visible keyboard focus (mouse users never see it) */ :focus-visible{outline:2px solid #2563eb;outline-offset:2px;border-radius:8px;} .form-input:focus-visible{outline:none;} /* Field-level validation: only the wrong box is marked, the rest of the form keeps everything the user typed. */ .alumni-page-btn{min-width:2.5rem;height:2.75rem;padding:0 .7rem;border-radius:.85rem; display:inline-flex;align-items:center;justify-content:center;gap:.3rem; font-size:.85rem;font-weight:700;color:#334155;background:#fff; border:1px solid #e2e8f0;cursor:pointer;transition:.18s;} .alumni-page-btn:hover:not(:disabled){border-color:#3b82f6;color:#1d4ed8;background:#eff6ff;} .alumni-page-btn:disabled{opacity:.42;cursor:not-allowed;} .alumni-page-btn.is-current{background:linear-gradient(135deg,#2563eb,#0ea5e9);border-color:transparent; color:#fff;box-shadow:0 6px 16px -6px rgba(37,99,235,.7);} /* ---------- Notice line ------------------------------------------- One line, right to left, and it stops while the pointer or the keyboard is on it -- a notice nobody can finish reading is no notice at all. Motion is dropped entirely when the visitor has asked the system for less of it. */ .rd-marquee{overflow:hidden;position:relative;display:flex;align-items:center;min-height:2.75rem;} .rd-marquee-track{display:inline-flex;align-items:center;gap:3rem;white-space:nowrap; padding-left:100%;animation:rd-marquee-run 34s linear infinite;} .rd-marquee:hover .rd-marquee-track, .rd-marquee:focus-within .rd-marquee-track{animation-play-state:paused;} @keyframes rd-marquee-run{from{transform:translateX(0);}to{transform:translateX(-100%);}} @media (prefers-reduced-motion: reduce){ .rd-marquee{min-height:0;} .rd-marquee-track{animation:none;padding-left:0;white-space:normal; flex-wrap:wrap;gap:.35rem 1.25rem;padding:.6rem 0;} } /* ---------- A sliding rail ---------------------------------------- Buttons move it, but the scrolling itself is the browser's own: that is what keeps the thumb swipe, the trackpad and the keyboard working without a line of JavaScript pretending to be a carousel. */ /* ---- the PDACC page's own little nav, crest and contact cards ---- */ .rd-pd-navbtn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .9rem; border-radius:1rem;border:1px solid #e2e8f0;background:#fff;color:#475569; font-size:11px;font-weight:800;cursor:pointer;transition:all .18s ease;white-space:nowrap;} .rd-pd-navbtn:hover{border-color:#a5b4fc;color:#4338ca;background:#eef2ff;} .rd-pd-navbtn.is-fb{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff;} .rd-pd-navbtn.is-fb:hover{background:#dbeafe;} /* On a 375px phone the three buttons measured 320px against 319px of room, so the last one wrapped onto a third line of its own and the strip stood 153px tall -- with the header, 29% of the screen, permanently. Trimming the side padding gives back 24px and puts all three on one line. */ @media (max-width:430px){ .rd-pd-navbtn{padding:.5rem .65rem;} } /* The strip stays under the site header while the PDACC page scrolls, so every page it names is one tap away. The offset lives here rather than in the markup as a Tailwind arbitrary value: style.css is generated output and never carried the arbitrary top the markup used to ask for, so the computed top was `auto`, and a sticky box with no offset never sticks. (The dead class is not named here on purpose -- a harness asserts it appears nowhere in the source, and a comment counts.) It parks flush against the header, not a few pixels below it: a gap is a window, and the page scrolling underneath shows through it. The header is 80.8px tall, so 80px leaves a hair of overlap that the header's own z-index covers. */ .rd-pd-nav{position:sticky;top:80px; transition:box-shadow .3s ease,background .3s ease;} /* From xl up the header shows its second row, the `.nav-strip` menu, and is 130px tall instead of 81px. Without this the strip parks behind it. */ @media (min-width:1280px){ .rd-pd-nav{top:129px;} } /* The ribbon sits under the strip, so it scrolls away with the page. It gets a little air above it now that the strip is no longer over it. */ .rd-pd-nav + .rd-pd27{margin-top:2px} /* The Admission guide is the exception: it has its own tab strip that already sticks at the same offset, and two bars stacked would take a third of a phone screen. So the PDACC strip scrolls away there. The way back is not lost -- the site header stays on screen and carries PDACC in its menu. */ #pdacc-nav-sub{position:static;} .rd-pd-navbtn.is-key{border-color:transparent;color:#fff; background:linear-gradient(135deg,#4338ca,#1e1b4b);} .rd-pd-navbtn.is-key:hover{color:#fff;border-color:transparent; background:linear-gradient(135deg,#3730a3,#312e81);} .rd-pd-navbtn:focus-visible{outline:2px solid #6366f1;outline-offset:2px;} /* the big card that opens the admission guide */ .rd-pd-guide{width:100%;display:flex;align-items:center;gap:1rem;text-align:left; padding:1.15rem 1.25rem;border-radius:1.4rem;border:1px solid #e2e8f0; background:linear-gradient(135deg,#f8faff,#fff);cursor:pointer; box-shadow:0 20px 40px -34px rgba(30,27,75,.5); transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s;} .rd-pd-guide:hover{transform:translateY(-3px);border-color:#a5b4fc; box-shadow:0 26px 48px -30px rgba(30,27,75,.55);} .rd-pd-guide:focus-visible{outline:2px solid #6366f1;outline-offset:3px;} .rd-pd-guide strong{display:block;font-size:1.02rem;font-weight:800;color:#1e1b4b;} .rd-pd-guide em{display:block;margin-top:.3em;font-style:normal;font-size:.82rem; line-height:1.85;color:#5b6480;} .rd-pd-guide-i{flex:0 0 auto;width:3rem;height:3rem;border-radius:1rem; display:inline-flex;align-items:center;justify-content:center;color:#fff; background:linear-gradient(135deg,#4338ca,#1e1b4b);} .rd-pd-guide>[data-lucide]{color:#6366f1;} @media (prefers-reduced-motion:reduce){ .rd-pd-guide{transition:none;} .rd-pd-guide:hover{transform:none;} } .rd-pd-crest{width:2.5rem;height:2.5rem;border-radius:.9rem;border:1px solid #e2e8f0; background:#fff;overflow:hidden;display:inline-flex;align-items:center; justify-content:center;flex:0 0 auto;} .rd-pd-crest.is-big{width:4.5rem;height:4.5rem;border-radius:1.4rem;} .rd-pd-crest img{width:100%;height:100%;object-fit:contain;padding:.15rem;} .rd-pd-contact{display:flex;align-items:center;gap:.75rem;padding:1rem 1.15rem; border-radius:1.25rem;border:1px solid #e2e8f0;background:#fff;color:#334155; text-align:left;cursor:pointer;width:100%;transition:all .18s ease; box-shadow:0 1px 2px rgba(15,23,42,.04);} .rd-pd-contact:hover{border-color:#a5b4fc;color:#3730a3;transform:translateY(-1px); box-shadow:0 12px 30px -18px rgba(15,23,42,.45);} .rd-pd-contact strong{display:block;font-size:13px;font-weight:800;} .rd-pd-contact em{display:block;font-style:normal;font-size:11px;font-weight:700; opacity:.7;word-break:break-word;} .rd-pd-contact.is-fb{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8;} .rd-rail-wrap{position:relative;} .rd-rail{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;padding:.25rem .25rem 1rem;-webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none;} .rd-rail::-webkit-scrollbar{display:none;} .rd-rail > *{scroll-snap-align:start;flex:0 0 85%;min-width:0;} @media (min-width:640px){.rd-rail > *{flex-basis:47%;}} @media (min-width:1024px){.rd-rail > *{flex-basis:31.4%;}} .rd-rail-btn{position:absolute;top:36%;z-index:5;width:2.75rem;height:2.75rem; display:inline-flex;align-items:center;justify-content:center;border-radius:9999px; background:#fff;border:1px solid #e2e8f0;color:#334155;cursor:pointer; box-shadow:0 12px 28px -14px rgba(15,23,42,.45);transition:.2s;} .rd-rail-btn:hover{border-color:#93c5fd;color:#1d4ed8;transform:translateY(-1px);} .rd-rail-btn:disabled{opacity:.3;pointer-events:none;} .rd-rail-prev{left:-.4rem;} .rd-rail-next{right:-.4rem;} @media (min-width:1024px){.rd-rail-prev{left:-1.3rem;}.rd-rail-next{right:-1.3rem;}} @media (prefers-reduced-motion:reduce){.rd-rail{scroll-behavior:auto;}} /* ---------- "Latest News" card ------------------------------------ The shape DUET's own site uses: picture on top, title under it, the date at the bottom-left and VIEW MORE at the bottom-right. */ .rd-news-card{display:flex;flex-direction:column;height:100%;background:#fff; border:1px solid #e2e8f0;border-radius:1rem;overflow:hidden;transition:.2s;} .rd-news-card:hover{border-color:#93c5fd;transform:translateY(-2px); box-shadow:0 18px 40px -24px rgba(15,23,42,.45);} .rd-news-thumb{position:relative;aspect-ratio:16/10;background:#f1f5f9;overflow:hidden; display:flex;align-items:center;justify-content:center;} /* A Drive link that answers with nothing used to leave a plain grey rectangle on the card. The monogram now sits underneath the picture, so the frame always reads as a card even when the picture never arrives. */ .rd-news-thumb::after{content:'RANGDHANU';position:absolute;inset:0;z-index:0;display:flex; align-items:center;justify-content:center;text-align:center; background:linear-gradient(135deg,#eef2ff,#f8fafc 48%,#e0f2fe); font-size:.6rem;font-weight:800;letter-spacing:.3em;color:#94a3b8;} .rd-news-thumb img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;} .rd-news-thumb.is-logo{background:linear-gradient(135deg,#f8fafc,#eff6ff);} .rd-news-thumb.is-logo img{object-fit:contain;padding:1.4rem;} .rd-news-tag{position:absolute;top:.6rem;left:.6rem;display:inline-flex;align-items:center; gap:.3rem;padding:.2rem .55rem;border-radius:.55rem;background:rgba(15,23,42,.78); color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;} .rd-news-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between; gap:.5rem;padding:.65rem 1rem;border-top:1px solid #f1f5f9;background:#f8fafc;} .rd-news-title{text-align:left;font-weight:800;line-height:1.35;color:#0f172a; background:none;border:0;padding:0;cursor:pointer;} .rd-news-title:hover{color:#1d4ed8;} /* Two-line trim without relying on a Tailwind plugin. */ .rd-clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .rd-clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .rd-file-frame{width:100%;height:min(78vh,860px);border:0;display:block;background:#f1f5f9;} .form-input.is-invalid{border-color:#e11d48;background:#fff1f2;box-shadow:0 0 0 3px rgba(225,29,72,.14);} .form-input.is-invalid:focus{border-color:#e11d48;box-shadow:0 0 0 3px rgba(225,29,72,.2);} .field-error{display:none;margin-top:.35rem;font-size:.75rem;font-weight:600;color:#e11d48;line-height:1.45;} .field-error.show{display:block;} #mobile-menu{max-height:calc(100vh - 5rem);overflow-y:auto;overscroll-behavior:contain;} @supports (height:100dvh){ #mobile-menu{max-height:calc(100dvh - 5rem);} } #page-photo img{-webkit-user-select:none;user-select:none;touch-action:pan-y;} /* MEMBER DIRECTORY CARDS The grid used to snap in fully formed the moment the fetch landed, which read as a jolt on a page where everything else fades. The cards now rise the way .page-view does, so the arrival matches the rest of the site. The stagger is per row of three rather than per card: eighteen separate delays would finish nearly a second apart and start to feel slow, while a row at a time still reads as filling in. Delays stay short on purpose -- the last row is only .10s behind the first, so nobody waits for motion. No prefers-reduced-motion rule is needed here; the catch-all at the end of this file already flattens every animation on the page. */ @keyframes rdCardIn{0%{opacity:0;transform:translateY(12px) scale(.985)}100%{opacity:1;transform:none}} #alumni-grid>.alumni-card{animation:rdCardIn .5s cubic-bezier(.16,1,.3,1) both;} #alumni-grid>.alumni-card:nth-child(n+4){animation-delay:.02s;} #alumni-grid>.alumni-card:nth-child(n+7){animation-delay:.04s;} #alumni-grid>.alumni-card:nth-child(n+10){animation-delay:.06s;} #alumni-grid>.alumni-card:nth-child(n+13){animation-delay:.08s;} #alumni-grid>.alumni-card:nth-child(n+16){animation-delay:.10s;} /* The photo carries its own fade because it lands after its card -- Drive is a second request, and a picture appearing with a snap inside a card that already faded in was the jolt moved rather than removed. The class is dropped by an onload handler, so a cached image is never held back. */ #alumni-grid .alumni-card img,#page-profile .rd-photo-in{transition:opacity .45s ease;} .rd-photo-in{opacity:0;} .rd-photo-in.rd-photo-ready{opacity:1;} @media (prefers-reduced-motion:reduce){ /* !important because Tailwind's .scroll-smooth class outranks a bare html selector */ html,html.scroll-smooth{scroll-behavior:auto !important;} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;} button:active,a:active{transform:none;} } /* Two icon buttons now sit in the brand row on a phone: sign in, then the menu. At 375 px the pair ran a few pixels past the edge, so on the narrowest screens both boxes lose a little padding. */ @media (max-width:430px){ #mobile-member-btn,#mobile-menu-btn{padding:.55rem;} #mobile-member-btn svg,#mobile-menu-btn svg{width:1.35rem;height:1.35rem;} } /* MY PROFILE cover, on the Edit tab. The gradients below are only what shows in the moment before rdMypCover runs; from then on the box carries either the member's own cover or cover-default.jpg, the same file the Profile tab stands on. The ratio is 851/315 -- .rd-mp-cover's ratio, not a rounded version of it. It used to be a fixed h-32 sm:h-44, so one picture was cropped one way on Edit and another way on Profile, and the position saved on one tab did not look like the position seen on the other. */ .rd-cover{ aspect-ratio:851/315; overflow:hidden; background-color:#0f172a; background-image: radial-gradient(120% 90% at 12% 0%,rgba(56,132,255,.38) 0%,rgba(15,23,42,0) 62%), repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,rgba(255,255,255,0) 1px 9px); background-size:cover,auto; background-position:center; } /* The sign-in confirmation: one line under the header, in the page flow. It is not fixed, not a layer and has no backdrop, so it cannot become the popup the site does not have. Hidden it takes no height at all. */ .rd-flash{ display:flex;align-items:center;justify-content:center;gap:.5rem; padding:.5rem 1rem; background:#ecfdf5; border-bottom:1px solid #a7f3d0; color:#047857; font-size:.8125rem;font-weight:800; line-height:1.25rem; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; animation:rdFlashIn .25s ease-out both; } .rd-flash.hidden{display:none;} @keyframes rdFlashIn{from{opacity:0;transform:translateY(-.35rem)}to{opacity:1;transform:none}} /* The drawn cover: PROUD MEMBER. No photo is fetched for it, so it is on screen with the page and costs nothing. The two corner arcs, the brush streaks and the letters are all one blue -- the Association's own -- so the band never reads as a flag or an arc of colours. Everything is sized in vw inside its own box, which is why one drawing fits a phone and a desktop without a second copy. */ .rd-proud{ position:absolute;inset:0;overflow:hidden; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.15em; background-color:#f1f7ff; background-image: radial-gradient(78% 130% at -10% -26%,#1d6fe0 0 33%,rgba(29,111,224,0) 34%), radial-gradient(58% 96% at 106% 122%,#1d6fe0 0 38%,rgba(29,111,224,0) 39%), radial-gradient(60% 100% at -4% 8%,#7cb6ff 0 26%,rgba(124,182,255,0) 27%), repeating-linear-gradient(118deg,rgba(59,130,246,.10) 0 .5rem,rgba(255,255,255,0) .5rem 1.7rem); /* The site loads three families and no more: Noto Sans Bengali for Bengali, Plus Jakarta Sans for Latin text, Space Grotesk for numerals and short display words. This used to name two families that are never loaded, so PROUD MEMBER was drawn in whatever the device happened to have -- a different face per visitor. The names are left out of this comment on purpose: a harness asserts they appear nowhere. */ font-family:'Plus Jakarta Sans','Noto Sans Bengali',system-ui,sans-serif; line-height:.92; text-align:center; user-select:none; } .rd-proud-1,.rd-proud-2{ font-weight:900;font-style:italic;letter-spacing:.02em; text-transform:uppercase;white-space:nowrap; } .rd-proud-1{ font-size:clamp(1.15rem,5.4vw,2.6rem); color:#1d6fe0; text-shadow:0 .06em .12em rgba(29,111,224,.22); } .rd-proud-2{ position:relative; font-size:clamp(1.7rem,8.2vw,4rem); color:#fff; text-shadow: .045em 0 0 #1d6fe0,-.045em 0 0 #1d6fe0,0 .045em 0 #1d6fe0,0 -.045em 0 #1d6fe0, .032em .032em 0 #1d6fe0,-.032em .032em 0 #1d6fe0, .032em -.032em 0 #1d6fe0,-.032em -.032em 0 #1d6fe0, 0 .16em .2em rgba(29,111,224,.3); } /* The crown sits on the last letter, so it moves with the word instead of drifting off on a narrow screen. */ .rd-proud-crown{ position:absolute;top:-.62em;right:-.5em; width:.5em;height:.5em;color:#1d6fe0; } .rd-proud-tag{ margin-top:.5em; max-width:92%; padding:.18em .8em .26em; border-radius:9999px; background:#1d6fe0;color:#fff; /* The tag line under it is Bengali, so it leads with the Bengali face. */ font-family:'Noto Sans Bengali','Plus Jakarta Sans',sans-serif; font-weight:700;line-height:1.35; font-size:clamp(.5rem,2.2vw,.85rem); box-shadow:0 .12em .3em rgba(29,111,224,.35); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* An uploaded cover replaces the drawing, so the two never show through each other. */ .rd-cover.rd-cover-photo > .rd-proud{display:none;} .rd-cover.rd-cover-photo{ background-image:none; background-color:#0f172a; background-size:cover; background-position:center; background-repeat:no-repeat; } /* Only the camera badge on the avatar is left here. The cover's own button is now one of the .rd-mp-cbtn pills the Profile tab uses, because the cover carries two of them -- Cover and Use default -- and .rd-cover-btn pinned itself to the bottom right corner, where a second button would have landed on top of the first. */ .rd-photo-btn{ position:absolute;right:-.35rem;bottom:-.35rem;padding:.45rem; display:inline-flex;align-items:center;gap:.4rem; cursor:pointer;font-size:.75rem;font-weight:700; background:rgba(255,255,255,.92);color:#0f172a; border:1px solid rgba(15,23,42,.08); border-radius:9999px;box-shadow:0 2px 8px rgba(15,23,42,.18); transition:background .15s ease; } .rd-photo-btn:hover{background:#fff;} /* "Who can see this" sits under its own field, small enough to stay out of the way and close enough that nobody mistakes which field it governs. */ .rd-vis-row{ display:flex;align-items:center;gap:.4rem;margin-top:.4rem; font-size:.7rem;font-weight:700;color:#64748b; } .rd-vis-select{ flex:1 1 auto;min-width:0; border:1px solid #e2e8f0;border-radius:.6rem; padding:.25rem 1.5rem .25rem .5rem; font-size:.7rem;font-weight:700;color:#334155; background:#f8fafc;cursor:pointer; text-overflow:ellipsis; } .rd-vis-select:focus{outline:none;border-color:#93c5fd;background:#fff;} /* ---------------- social media accounts ---------------------------- Two shapes, one look: the editable row on the registration form and My Profile, and the read only chip another member taps. */ .rd-soc-row{ display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem; padding:.4rem;border:1px solid #e2e8f0;border-radius:.9rem;background:#f8fafc; } .rd-soc-row.is-bad{border-color:#fca5a5;background:#fef2f2;} .rd-soc-mark{ width:2rem;height:2rem;flex:0 0 auto;border-radius:.6rem; display:flex;align-items:center;justify-content:center; background:#fff;border:1px solid #e2e8f0;color:#475569; } .rd-soc-mark svg{width:1.05rem;height:1.05rem;} .rd-soc-net{ flex:0 0 auto;width:6.5rem; border:1px solid #e2e8f0;border-radius:.6rem;background:#fff; padding:.4rem .5rem;font-size:.75rem;font-weight:700;color:#334155;cursor:pointer; } .rd-soc-url{ flex:1 1 auto;min-width:0; border:1px solid #e2e8f0;border-radius:.6rem;background:#fff; padding:.4rem .6rem;font-size:.8rem;color:#0f172a; } .rd-soc-net:focus,.rd-soc-url:focus{outline:none;border-color:#93c5fd;} .rd-soc-del{ width:2rem;height:2rem;flex:0 0 auto;border-radius:.6rem; display:flex;align-items:center;justify-content:center; background:#fff;border:1px solid #e2e8f0;color:#94a3b8;cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease; } .rd-soc-del:hover,.rd-soc-del:focus-visible{background:#fef2f2;border-color:#fca5a5;color:#dc2626;} .rd-soc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;} .rd-soc-add{ display:inline-flex;align-items:center;gap:.35rem; padding:.4rem .8rem;border-radius:.7rem; border:1px dashed #93c5fd;background:#eff6ff;color:#1d4ed8; font-size:.75rem;font-weight:800;cursor:pointer; transition:background .15s ease,border-color .15s ease; } .rd-soc-add:hover:not(:disabled){background:#dbeafe;border-color:#60a5fa;} .rd-soc-add:disabled{opacity:.5;cursor:not-allowed;} .rd-soc-note{font-size:.7rem;font-weight:700;color:#94a3b8;} .rd-soc-err{font-size:.75rem;font-weight:700;color:#dc2626;margin-top:.5rem;} /* The chip carries the platform's own colour, so the row of logos reads at a glance without a label being needed at all. */ .rd-soc-chips{display:flex;flex-wrap:wrap;gap:.5rem;} .rd-soc-chip{ display:inline-flex;align-items:center;gap:.45rem; padding:.5rem .85rem;border-radius:.8rem; border:1px solid #e2e8f0;background:#f8fafc;color:#334155; font-size:.78rem;font-weight:800;text-decoration:none; transition:background .15s ease,border-color .15s ease,color .15s ease; } .rd-soc-chip svg{width:1.05rem;height:1.05rem;} .rd-soc-chip.is-facebook{color:#1877f2;border-color:#c7ddfb;background:#eff6ff;} .rd-soc-chip.is-linkedin{color:#0a66c2;border-color:#c3dcf5;background:#eff6ff;} .rd-soc-chip.is-x{color:#0f172a;border-color:#d8dee7;background:#f1f5f9;} .rd-soc-chip:hover,.rd-soc-chip:focus-visible{background:#fff;border-color:currentColor;} @media (max-width:480px){ .rd-soc-row{flex-wrap:wrap;} .rd-soc-net{width:auto;flex:1 1 5rem;} .rd-soc-url{flex:1 1 100%;order:3;} } /* ============================================================ organization.html -- the Association's own reference document. That page is not part of the single-page app: it is a plain static document with its own address, so a crawler and a reader both get one URL that is only about the organization. Its styles live here rather than in a