/* ========================================================================== IEEE IUBAT Student Branch Built to the IEEE Brand Identity Guidelines + IEEE Digital Style Guide. Colour IEEE approved palette only (brand-experience.ieee.org) Type Open Sans — mandated for IEEE web. Min 15px, line-height >= 1.5 Buttons IEEE button design guidelines: pill, 2px border, bold, 400ms Wedge IEEE design system element, derived from the Master Brand diamond THEMING ------- Site chrome (meta-nav, header, footer) is always IEEE Blue, on every page. Anything inside `.theme-event` re-points four accent tokens to the IEEE greens and gold that match the event poster artwork. Same components, same type, same spacing, same wedge — only the accent colour moves. That is what keeps the event page feeling like part of this site rather than a separate microsite. Applied to: on the event page ========================================================================== */ /* --------------------------------------------------------------- 1. Tokens */ :root { /* IEEE primary */ --ieee-blue: #00629B; /* PMS 3015 C — primary brand colour */ --ieee-navy: #002855; /* PMS 295 C — dark palette */ --ieee-cyan: #00B5E2; /* Process Cyan C — bright palette */ --ieee-teal: #007377; /* PMS 322 C — dark palette */ /* IEEE greens — used by the event theme */ --ieee-green: #00843D; /* PMS 348 C — bright palette */ --ieee-green-dk: #006341; /* PMS 3425 C — dark palette */ --ieee-green-br: #78BE20; /* PMS 368 C — the student "green rule" */ /* IEEE golds and oranges */ --ieee-gold: #FFC72C; /* PMS 123 C */ --ieee-orange: #E87722; /* PMS 158 C */ /* Neutrals: approved tints of black, plus Cool Gray 9 C */ --ink: #000000; --text: #333333; /* 80% tint of black */ --muted: #75787B; /* Cool Gray 9 C */ --line: #D6DBE0; --shell: #F4F6F8; /* Accent tokens — the only things .theme-event changes */ --accent: var(--ieee-blue); --accent-dark: var(--ieee-navy); --accent-soft: rgba(0, 98, 155, .08); --accent-line: rgba(0, 98, 155, .28); --rule: var(--ieee-cyan); --font: "Open Sans", "Segoe UI", Tahoma, Arial, sans-serif; --wrap: 1220px; --r: 5px; --sh-1: 0 1px 2px rgba(0, 40, 85, .07), 0 4px 14px rgba(0, 40, 85, .06); --sh-2: 0 10px 28px rgba(0, 40, 85, .12); --sh-3: 0 22px 56px rgba(0, 40, 85, .22); --head-h: 84px; } .theme-event { --accent: var(--ieee-green); --accent-dark: var(--ieee-green-dk); --accent-soft: rgba(0, 132, 61, .09); --accent-line: rgba(0, 132, 61, .3); --rule: var(--ieee-green-br); } /* ---------------------------------------------------------------- 2. Reset */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 70px); } body { margin: 0; font-family: var(--font); font-size: 17px; /* IEEE minimum 15px */ line-height: 1.6; /* IEEE minimum 1.5 */ color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--ieee-blue); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-weight: 700; color: var(--ieee-navy); margin: 0 0 .5em; line-height: 1.2; letter-spacing: -.012em; } h1 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.12; } h2 { font-size: clamp(1.55rem, 2.9vw, 2.2rem); } h3 { font-size: 1.28rem; } h4 { font-size: 1.06rem; } p { margin: 0 0 1.1em; } ul { margin: 0 0 1.1em; padding-left: 1.2em; } li { margin-bottom: .4em; } strong { font-weight: 700; color: var(--ieee-navy); } :focus-visible { outline: 3px solid var(--ieee-cyan); outline-offset: 2px; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 400; background: var(--ieee-navy); color: #fff; padding: 10px 20px; font-weight: 700; transition: top .2s; } .skip-link:focus { top: 0; color: #fff; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(0); white-space: nowrap; border: 0; } .wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; } /* ------------------------------------------------------------- 3. Sections */ .section { padding: 80px 0; } .section--shell { background: var(--shell); } .eyebrow { display: flex; align-items: center; gap: 11px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; line-height: 1.5; } /* IEEE wedge mark rather than a plain rule */ .eyebrow::before { content: ""; flex: none; width: 26px; height: 8px; background: var(--accent); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%); } .pagehead .eyebrow { color: var(--rule); } .pagehead .eyebrow::before { background: var(--rule); } .head { max-width: 750px; margin-bottom: 44px; } .head p:last-child { margin-bottom: 0; } .lead { font-size: 1.1rem; } /* --------------------------------------------- 4. Buttons — IEEE spec --- Pill, 2px border matching the fill, bold, >=15px, Open Sans, 400ms. Labels are sentence case: IEEE permits all caps only for <= 2 words. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font); font-size: 16px; font-weight: 700; line-height: 1.3; padding: 12px 32px; border-radius: 50px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: background 400ms ease, color 400ms ease, border-color 400ms ease; min-height: 46px; } .btn:hover { text-decoration: none; } .btn svg { width: 17px; height: 17px; flex: none; } .btn--primary { background: var(--ieee-blue); border-color: var(--ieee-blue); color: #fff; } .btn--primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; } .btn--green { background: var(--ieee-green); border-color: var(--ieee-green); color: #fff; } .btn--green:hover { background: var(--ink); border-color: var(--ink); color: #fff; } .btn--ghost { background: #fff; border-color: var(--accent); color: var(--accent); } .btn--ghost:hover { border-color: var(--ink); color: var(--ink); } .btn--light { background: #fff; border-color: #fff; color: var(--ieee-navy); } .btn--light:hover { background: var(--ieee-cyan); border-color: var(--ieee-cyan); color: var(--ink); } .btn--outline-light { background: transparent; border-color: #fff; color: #fff; } .btn--outline-light:hover { background: #fff; color: var(--ieee-navy); } .btn--sm { padding: 9px 22px; font-size: 15px; min-height: 40px; } .hero__cta, .cta__row { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; } /* ------------------------------------------------------- 5. Alert bar --- */ .alert { background: var(--ieee-gold); color: var(--ink); font-size: .95rem; } .alert__in { display: flex; align-items: center; gap: 12px; padding: 11px 0; } .alert svg { width: 20px; height: 20px; flex: none; } .alert p { margin: 0; flex: 1; font-weight: 600; } .alert p strong { font-weight: 700; } .alert a { color: var(--ink); text-decoration: underline; } .alert__x { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink); padding: 0 4px; opacity: .7; transition: opacity 400ms ease; } .alert__x:hover { opacity: 1; } /* ------------------------------------------- 6. IEEE meta-navigation --- */ .metanav { background: var(--ieee-navy); font-size: 13px; } .metanav__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 8px 0; } .metanav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 22px; } .metanav li { margin: 0; } .metanav a { color: #A9C1D5; } .metanav a:hover { color: #fff; } .metanav em { font-style: italic; } /* ---------------------------------------------------------- 7. Header --- */ .header { position: sticky; top: 0; z-index: 120; background: #fff; border-bottom: 1px solid var(--line); transition: box-shadow 300ms ease; } .header.is-stuck { box-shadow: var(--sh-1); } .header__bar { min-height: var(--head-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .header__right { display: flex; align-items: center; gap: 22px; } /* Site identifier — upper left, contains IEEE, larger than the Master Brand */ .identifier { display: flex; align-items: center; gap: 13px; } .identifier:hover { text-decoration: none; } .identifier img { width: 54px; height: 54px; object-fit: contain; flex: none; } .identifier__txt { display: flex; flex-direction: column; line-height: 1.25; } .identifier__name { font-size: 1.1rem; font-weight: 700; color: var(--ieee-navy); letter-spacing: -.01em; } .identifier__tag { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* IEEE Master Brand — upper right, min 100x33, blue/black/white only */ .masterbrand { flex: none; display: block; } .masterbrand img { height: 33px; width: auto; } /* Primary navigation */ .nav { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; } .nav__item { margin: 0; position: relative; } .nav__link { display: flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--ieee-navy); background: none; border: 0; padding: 10px 13px; border-radius: 4px; cursor: pointer; transition: background 250ms ease; } .nav__link:hover { color: var(--ieee-blue); background: rgba(0, 98, 155, .07); text-decoration: none; } .nav__caret { width: 13px; height: 13px; transition: transform 250ms ease; } .nav__item.is-open .nav__caret { transform: rotate(180deg); } .nav__item.is-current>.nav__link { color: var(--ieee-blue); } .nav__item.is-current>.nav__link::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 3px; background: var(--ieee-cyan); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 5px 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 5px 100%); } /* Dropdown panel */ .nav__panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 20; list-style: none; margin: 0; padding: 8px; min-width: 290px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 250ms ease, visibility 250ms ease, transform 250ms ease; } .nav__panel::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--ieee-blue); -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); } .nav__item.is-open .nav__panel { opacity: 1; visibility: visible; transform: none; } .nav__panel li { margin: 0; } .nav__panel a { display: block; padding: 10px 14px; border-radius: 4px; font-size: 15px; font-weight: 600; color: var(--ieee-navy); transition: background 250ms ease; } .nav__panel a:hover { background: var(--shell); text-decoration: none; } .nav__panel small { display: block; font-size: .82rem; font-weight: 400; color: var(--muted); margin-top: 1px; } .nav__cta { margin: 0 0 0 10px; } .burger { display: none; width: 48px; height: 48px; border: 1px solid var(--line); background: #fff; border-radius: 4px; cursor: pointer; padding: 0; place-items: center; } .burger span { display: block; width: 20px; height: 2px; background: var(--ieee-navy); position: relative; } .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ieee-navy); transition: transform 250ms ease; } .burger span::before { top: -6px; } .burger span::after { top: 6px; } .burger[aria-expanded="true"] span { background: transparent; } .burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); } .burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); } /* -------------------------------------------------- 8. Event sub-nav --- */ .subnav { position: sticky; top: var(--head-h); z-index: 90; background: var(--accent-dark); border-bottom: 3px solid var(--rule); } .subnav__in { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; padding: 11px 0; } .subnav__title { font-size: .88rem; font-weight: 700; color: #fff; letter-spacing: .02em; } .subnav__links { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 6px; margin: 0; padding: 0; } .subnav__links li { margin: 0; } .subnav__links a { display: block; padding: 5px 12px; border-radius: 50px; font-size: .87rem; font-weight: 600; color: #C7DFCB; transition: background 300ms ease, color 300ms ease; } .subnav__links a:hover { color: #fff; background: rgba(255, 255, 255, .14); text-decoration: none; } .subnav__links a.is-active { color: var(--ink); background: var(--rule); } /* ------------------------------------------------------ 9. Breadcrumbs --- */ .crumbs { background: var(--shell); border-bottom: 1px solid var(--line); font-size: .86rem; } .crumbs ol { list-style: none; margin: 0; padding: 11px 0; display: flex; flex-wrap: wrap; gap: 2px 0; } .crumbs li { margin: 0; color: var(--muted); } .crumbs li+li::before { content: "/"; margin: 0 9px; color: var(--line); } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--ieee-blue); } .crumbs [aria-current="page"] { color: var(--ieee-navy); font-weight: 600; } /* ------------------------------------------------------------ 10. Hero --- */ .hero { background: var(--shell); padding: 62px 0 72px; position: relative; overflow: hidden; } .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: #fff; -webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%); clip-path: polygon(0 100%, 100% 0, 100% 100%); } .hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: center; } .hero__media img { width: 100%; border-radius: var(--r); object-fit: cover; aspect-ratio: 3/2; } .hero h1 span { display: block; color: var(--ieee-blue); } .hero__lead { font-size: 1.1rem; max-width: 580px; margin-bottom: 26px; } /* Interior page header */ .pagehead { background: var(--ieee-navy); color: #CEDCE7; padding: 48px 0 36px; } .pagehead h1 { color: #fff; margin-bottom: 10px; } .pagehead p { max-width: 700px; margin-bottom: 0; font-size: 1.06rem; } .pagehead__timer { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 28px; padding: 22px 28px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r); } .pagehead__timer .clock { margin-bottom: 0; min-width: 0; flex: 1; max-width: 480px; } .pagehead__timer h3 { color: #fff; } .pagehead__stats { margin-top: 32px; margin-bottom: 8px; } /* ── Testimonials ──────────────────────────────────────────────── */ blockquote{font-style:italic;color:var(--text);opacity:.92} .testimonials { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; } .testimonial { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 32px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); } .testimonial__av { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; border: 3px solid var(--accent); box-shadow: 0 0 0 5px rgba(255, 200, 0, .16), 0 8px 20px rgba(0, 40, 85, .12); margin-bottom: 24px; flex-shrink: 0; } .testimonial__av img { width: 100%; height: 100%; object-fit: cover; } .testimonial__quote { font-size: 1.05rem; line-height: 1.7; font-style: italic; color: var(--text); margin: 0 0 24px; flex: 1; position: relative; padding: 0 12px; } .testimonial__quote::before { content: '\201C'; position: absolute; top: -16px; left: -4px; font-size: 3.5rem; font-family: Georgia, serif; color: var(--accent); opacity: .35; line-height: 1; } .testimonial__info { display: flex; flex-direction: column; gap: 2px; } .testimonial__name { font-weight: 700; font-size: .95rem; } .testimonial__role { font-size: .85rem; color: var(--muted); } /* --------------------------------------------------- 6b. Contact form */ .contact-form { display: grid; gap: 14px; } .contact-form__intro { color: var(--muted); margin: 0 0 4px; } .field { display: flex; flex-direction: column; gap: 6px; } .field__label { font-size: .92rem; font-weight: 700; color: var(--text); } .field__input { font-family: var(--font); font-size: 15px; color: var(--text); background: #fff; border: 1.5px solid var(--line); border-radius: var(--r); padding: 10px 12px; outline: none; transition: border-color 200ms ease, box-shadow 200ms ease; } .field__input::placeholder { color: #9aa2a8; } .field__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field__input--area { resize: vertical; min-height: 130px; } .map-embed { display: block; width: 100%; height: 240px; border: 1px solid var(--line); border-radius: var(--r); background: var(--shell); margin-bottom: 22px; } @media (max-width: 700px) { .testimonials { grid-template-columns: 1fr; gap: 24px; } .testimonial { padding: 32px 24px; } .testimonial__av { width: 110px; height: 110px; } .poster-carousel { min-height: 250px; } .poster-card { width: clamp(80px, 26vw, 260px); } } /* ---------------------------------------- 11. Featured event promo card --- */ .event-banner { display: grid; grid-template-columns: 380px 1fr; gap: 32px; align-items: center; } .event-banner__poster { padding: 20px 30px; } .deck { position: relative; width: 100%; max-width: 360px; margin-left: auto; } .deck__item { border-radius: 7px; overflow: hidden; position: absolute; inset: 0; transition: transform .4s cubic-bezier(.25,.46,.45,.94); cursor: zoom-in; } .deck__item img { border-radius: 7px; width: 100%; } .deck__item:nth-child(1) { transform: rotate(-7deg) translate(-7%, 3%) scale(.9); z-index: 1; } .deck__item:nth-child(2) { transform: rotate(5deg) translate(8%, -2%) scale(.9); z-index: 2; } .deck__item:nth-child(3) { position: relative; inset: auto; transform: rotate(-1deg); z-index: 3; } .deck:hover .deck__item:nth-child(1) { transform: rotate(-11deg) translate(-13%, 4%) scale(.92); } .deck:hover .deck__item:nth-child(2) { transform: rotate(8deg) translate(13%, -3%) scale(.92); } .deck:hover .deck__item:nth-child(3) { transform: rotate(-1deg) scale(1.02); } .event-banner__flag { display: inline-block; background: var(--accent); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 6px 16px; border-radius: 4px; margin-bottom: 16px; } .event-banner__info h2 { margin-bottom: 14px; } .promo__meta { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; } .promo__meta li { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .92rem; font-weight: 600; color: var(--ieee-navy); } .promo__meta svg { width: 16px; height: 16px; color: var(--accent); flex: none; } /* Two-event homepage spotlight: BECITHCON + Region 10 HTA cards */ .event-spot { display: grid; grid-template-columns: 340px 1fr; gap: 32px; align-items: start; } .event-spot__deck { position: sticky; top: 24px; } .event-spot__cards { display: flex; flex-direction: column; gap: 26px; } .spotlight { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 28px 30px; box-shadow: var(--sh-1); display: flex; flex-direction: column; } .spotlight__title { margin: 0 0 12px; } .spotlight__lead { margin: 0 0 14px; color: var(--text); } .spotlight .event-banner__flag { margin-bottom: 14px; } .spotlight .hero__cta { margin-top: auto; padding-top: 8px; } /* ------------------------------------------------------- 12. Countdown --- */ .clock { display: flex; gap: 10px; margin-bottom: 16px; } .clock__u { flex: 1; min-width: 0; text-align: center; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r); padding: 14px 10px; } .clock__n { font-size: 2rem; font-weight: 700; color: var(--accent-dark); line-height: 1.2; font-variant-numeric: tabular-nums; } .clock__l { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .clock--over { font-size: .95rem; font-weight: 700; color: var(--accent-dark); margin: 0; } /* Countdown reversed out on navy — the accent tints have no contrast there */ .pagehead .clock__u { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .26); } .pagehead .clock__n { color: #fff; } .pagehead .clock__l { color: #B0C5D7; } .pagehead .clock--over { color: var(--ieee-gold); } /* ----------------------------------------------------------- 13. Cards --- */ .grid { display: grid; gap: 24px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px; position: relative; transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease; } .card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--accent); -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); opacity: 0; transition: opacity 300ms ease; } .card--green::before { background: var(--ieee-green); } .card:hover { border-color: var(--accent-line); box-shadow: var(--sh-2); } .card:hover::before { opacity: 1; } .card h3 { font-size: 1.14rem; margin-bottom: .4em; } .card p:last-child, .card ul:last-child { margin-bottom: 0; } .card__icon { width: 46px; height: 46px; margin-bottom: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%); } .card--green .card__icon { background: rgba(0, 132, 61, .1); color: var(--ieee-green); } .card--sm { padding: 20px 20px; } .card--sm h4 { margin-bottom: 6px; } .card--sm p { margin-bottom: 0; font-size: .88rem; } .card__icon svg { width: 22px; height: 22px; } /* Whole-card link */ .linkcard { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px; color: var(--text); transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease; } .linkcard:hover { border-color: var(--accent-line); box-shadow: var(--sh-2); text-decoration: none; } .linkcard h3 { display: flex; align-items: center; gap: 10px; font-size: 1.14rem; margin-bottom: .4em; } .linkcard h3 svg { width: 18px; height: 18px; color: var(--accent); transition: transform 300ms ease; } .linkcard:hover h3 svg { transform: translateX(4px); } .linkcard p:last-child { margin-bottom: 0; } /* Stats */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stat { text-align: center; padding: 16px 10px; } .stat__n { font-size: 2.6rem; font-weight: 700; color: var(--ieee-cyan); line-height: 1.15; } .stat__l { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #93AEC6; margin-top: 4px; } /* Stats rendered on white sections (e.g. the homepage strip) need darker text for WCAG AA contrast than the bright palette the navy .pagehead backdrop tolerates. The .pagehead version keeps the rules above. */ .section .stat__n { color: var(--ieee-navy); } .section .stat__l { color: var(--muted); } /* Tick lists */ .ticks { list-style: none; padding: 0; margin: 0 0 24px; } .ticks li { position: relative; padding-left: 30px; margin-bottom: 10px; } .ticks li::before { content: ""; position: absolute; left: 0; top: .42em; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat; } /* -------------------------------------------------- 14. Programme rail --- */ .rail { list-style: none; margin: 0; padding: 0; } .seg { position: relative; padding-left: 78px; padding-bottom: 40px; } .seg:last-child { padding-bottom: 0; } .seg::before { content: ""; position: absolute; left: 24px; top: 56px; bottom: -4px; width: 2px; background: var(--line); } .seg:last-child::before { display: none; } .seg__no { position: absolute; left: 0; top: 0; width: 50px; height: 50px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 1.28rem; font-weight: 700; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 13px 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 13px 100%); } .seg__kicker { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; } .seg>h3 { margin-bottom: 16px; } /* Talk cards follow the page accent; the Online / On site pill carries the distinction between segments, so the border does not need to. */ .talk { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; padding: 19px 22px; margin-bottom: 13px; } .talk--green { border-left-color: var(--ieee-green); } .talk__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; } .talk__no { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 3px 10px; border-radius: 3px; } .talk--green .talk__no { color: var(--ieee-green-dk); background: rgba(0, 132, 61, .1); } .talk h4 { margin: 0; font-size: 1.1rem; } .talk p { margin-bottom: 8px; font-size: .96rem; } .talk__by { display: flex; align-items: center; gap: 9px; font-size: .94rem; margin: 0; } .talk__by svg { width: 16px; height: 16px; color: var(--muted); flex: none; } /* ------------------------------------------------------------- 15. Tags --- */ .tags { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; } .tags li { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 50px; padding: 9px 18px; font-size: .94rem; font-weight: 600; color: var(--ieee-navy); transition: border-color 300ms ease, background 300ms ease, color 300ms ease; } .tags li:hover { border-color: var(--accent); color: var(--accent); } .step { background: #fff; border: 1px solid var(--line); border-bottom: 5px solid var(--line); padding: 24px 18px 22px; text-align: center; } .step__medal { width: 50px; height: 50px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; font-size: 1.45rem; font-weight: 700; } .step__rank { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .step__amt { font-size: 2rem; font-weight: 700; color: var(--ieee-navy); line-height: 1.2; margin: 2px 0 4px; } .step__amt span { font-size: .95rem; color: var(--muted); font-weight: 600; } .step__note { font-size: .88rem; margin: 0; color: var(--muted); } .step--1 { padding-top: 36px; border-bottom-color: var(--ieee-gold); box-shadow: var(--sh-2); } .step--1 .step__medal { background: var(--ieee-gold); color: var(--ink); } .step--2 { border-bottom-color: var(--muted); } .step--2 .step__medal { background: var(--muted); color: #fff; } .step--3 { border-bottom-color: var(--ieee-orange); } .step--3 .step__medal { background: var(--ieee-orange); color: #fff; } .step__stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 10px; } .step__stars svg { width: 18px; height: 18px; } .step--1 .step__stars svg { color: var(--ieee-gold); } .step--2 .step__stars svg { color: var(--muted); } .step--3 .step__stars svg { color: var(--ieee-orange); } .step__trophy { display: flex; justify-content: center; margin-bottom: 8px; } .step__trophy svg { width: 36px; height: 36px; color: var(--ieee-gold); filter: drop-shadow(0 2px 6px rgba(197,165,59,.35)); } /* --- podium arrangement (1st | Champion | 2nd, champion lifted) --- */ .podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 24px; max-width: 960px; margin: 0 auto; } .podium .step--1 { transform: translateY(-14px); box-shadow: var(--sh-3); } @media (max-width: 700px) { .podium { grid-template-columns: 1fr; gap: 16px; max-width: 420px; } .podium .step--1 { order: -1; transform: none; } } /* ------------------------------------------------------------ 17. Table --- */ .tablewrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .tablescroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; min-width: 640px; } caption { text-align: left; padding: 0 0 12px; color: var(--muted); font-size: .9rem; } thead th { background: var(--ieee-navy); color: #fff; text-align: left; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 14px 20px; } tbody th, tbody td { padding: 15px 20px; border-top: 1px solid var(--line); font-size: .97rem; text-align: left; vertical-align: top; } tbody th, td.cat { font-weight: 700; color: var(--ieee-navy); } tbody tr:nth-child(even) { background: #FAFBFC; } .fee { font-size: 1.28rem; font-weight: 700; color: var(--ieee-navy); } .fee--early { color: var(--accent); } .note { padding: 13px 20px; background: var(--shell); border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); margin: 0; } /* ---------------------------------------------------- 18. Payment/info --- */ .split { display: grid; grid-template-columns: 2fr 3fr; gap: 24px; } .pay { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px; text-align: left; } .pay--qr { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px; } .pay--qr .eyebrow { justify-content: flex-start; } .pay--qr .ticks { text-align: left; } .pay--qr__code { flex-shrink: 0; } .pay__num { font-size: 1.6rem; font-weight: 700; color: var(--ieee-navy); margin: 6px 0 4px; display: block; letter-spacing: -.01em; } .bkash { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: #E2136E; padding: 4px 12px; border-radius: 50px; } .copy { border: 2px solid var(--line); background: #fff; border-radius: 50px; font-family: var(--font); font-size: 14px; font-weight: 700; padding: 7px 18px; cursor: pointer; color: var(--ieee-navy); transition: border-color 400ms ease, background 400ms ease, color 400ms ease; } .copy:hover { border-color: var(--ink); color: var(--ink); } .callout { display: flex; gap: 15px; align-items: flex-start; background: rgba(255, 199, 44, .14); border: 1px solid rgba(255, 199, 44, .55); border-left: 4px solid var(--ieee-gold); border-radius: var(--r); padding: 20px 22px; } .callout--green { background: rgba(0, 132, 61, .07); border-color: rgba(0, 132, 61, .3); border-left-color: var(--ieee-green); } .callout svg { width: 22px; height: 22px; color: var(--ieee-orange); flex: none; margin-top: 4px; } .callout--green svg { color: var(--ieee-green); } .callout p:last-child { margin-bottom: 0; } .callout h4 { margin-bottom: .25em; } .grid + .callout { margin-top: 24px; } /* ------------------------------------------------------- 18b. Timeline --- */ .timeline { list-style: none; padding: 0; margin: 0 auto; max-width: 680px; position: relative; } .timeline::before { content: ""; position: absolute; left: 79px; top: 8px; bottom: 8px; width: 2px; background: var(--line); } .timeline__item { display: flex; gap: 24px; padding: 18px 0; position: relative; } .timeline__item::before { content: ""; position: absolute; left: 79px; top: 26px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--accent); transform: translateX(-4px); } .timeline__time { flex-shrink: 0; width: 68px; font-size: .82rem; font-weight: 700; color: var(--accent-dark); text-align: right; padding-top: 2px; } .timeline__body { flex: 1; min-width: 0; } .timeline__body h3 { font-size: 1rem; margin: 0 0 4px; color: var(--ieee-navy); } .timeline__body p { font-size: .9rem; margin: 0; color: var(--muted); } /* ---------------------------------------------------------- 19. Posters --- */ .poster-stage { padding: 48px 0 24px; } .poster-carousel { position: relative; min-height: 480px; } .poster-card { position: absolute; top: 50%; left: 50%; background: #fff; border: 1px solid var(--line); padding: 10px; margin: 0; cursor: zoom-in; transition: transform .6s cubic-bezier(.25,.46,.45,.94), box-shadow .45s ease, border-color .3s ease; width: clamp(200px, 26vw, 360px); } .poster-card img { display: block; width: 100%; height: auto; } .poster-card__cap { font-size: .86rem; font-weight: 700; text-align: center; color: var(--ieee-navy); padding: 12px 6px 4px; } /* --- fanned 3D carousel slots --- Each card is centred, then pushed to its slot with a real translateX so swapping classes visibly slides the posters left/right across the stage (the transform transition animates the travel). IMPORTANT: the shared parent carries NO `perspective` — in some browsers a parent perspective makes transformed children paint sorted by 3D depth instead of z-index, so the wrapping card could pass in FRONT of the centre card. Instead each card projects itself with an inline `perspective(...)`, so the cards are ordinary flattened boxes where z-index always wins. z-order is strict and asymmetric: centre (5) > right (1) > left (0). After every swap the card wrapping right->left lands in the LEFT slot (0) while the card exiting the centre lands in the RIGHT slot (1), so the wrap always crosses BEHIND both the incoming centre card and the exiting card — never above them (a left/right tie would make Chrome fall back to DOM order and the traveler would visibly pass in front for 2 of every 3 swaps). */ .poster-card--left { transform: translate(calc(-50% - 30vw), -50%) perspective(1200px) rotateY(35deg) scale(.8); z-index: 0; } .poster-card--center { transform: translate(-50%, calc(-50% - 22px)) perspective(1200px) rotateY(0deg) scale(1); z-index: 5; box-shadow: var(--sh-3); border-color: var(--accent-line); } .poster-card--right { transform: translate(calc(-50% + 30vw), -50%) perspective(1200px) rotateY(-35deg) scale(.8); z-index: 1; } /* --- hover: lift forward (transform only — the side cards never overlap the centre card, so no z-index bump is needed and none is allowed while the carousel is rotating) --- */ .poster-card--left:hover { transform: translate(calc(-50% - 30vw), -52%) perspective(1200px) rotateY(22deg) scale(.9); box-shadow: var(--sh-2); border-color: var(--accent-line); } .poster-card--center:hover { transform: translate(-50%, calc(-52% - 26px)) perspective(1200px) rotateY(0deg) scale(1.06); box-shadow: 0 28px 60px rgba(0,40,85,.24); } .poster-card--right:hover { transform: translate(calc(-50% + 30vw), -52%) perspective(1200px) rotateY(-22deg) scale(.9); box-shadow: var(--sh-2); border-color: var(--accent-line); } /* --- carousel slots --- Which card sits left/center/right is assigned by JS and rotated every few seconds; .poster-card's transition animates the transform between slots. No perspective/hover z tricks: each card is a flat, z-index-stacked box (centre above sides) so travel occlusion is bulletproof. */ /* --- hint line --- */ .poster-stage__hint { text-align: center; font-size: .86rem; color: var(--muted); margin-top: 28px; } /* --- orbit --- */ .orbit-stage { display: flex; justify-content: center; padding: 64px 0; position: relative; overflow: hidden; } .orbit-stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,40,85,.06) 0%, transparent 70%), radial-gradient(1px 1px at 20% 30%, rgba(0,40,85,.15), transparent), radial-gradient(1px 1px at 80% 20%, rgba(0,40,85,.12), transparent), radial-gradient(1px 1px at 40% 80%, rgba(0,40,85,.10), transparent), radial-gradient(1px 1px at 70% 60%, rgba(0,40,85,.08), transparent), radial-gradient(1px 1px at 10% 70%, rgba(0,40,85,.12), transparent), radial-gradient(1px 1px at 90% 50%, rgba(0,40,85,.10), transparent), radial-gradient(1px 1px at 50% 10%, rgba(0,40,85,.08), transparent), radial-gradient(1px 1px at 30% 50%, rgba(0,40,85,.14), transparent), radial-gradient(1px 1px at 60% 90%, rgba(0,40,85,.06), transparent); pointer-events: none; } .orbit { position: relative; width: 380px; height: 380px; } .orbit::before { content: ''; position: absolute; inset: 16px; border-radius: 50%; border: 3px solid transparent; background: conic-gradient(from 0deg, rgba(0,128,0,.25), rgba(218,165,32,.20), rgba(0,40,85,.20), rgba(0,128,0,.25)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ring-glow-spin 8s linear infinite; } @keyframes ring-glow-spin { to { transform: rotate(360deg); } } .orbit__ring { position: absolute; inset: 20px; border-radius: 50%; border: 2px solid rgba(0,40,85,.10); animation: ring-spin 30s linear infinite; } .orbit__ring::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px dashed rgba(0,40,85,.18); animation: ring-counter 30s linear infinite; } @keyframes ring-spin { to { transform: rotate(360deg); } } @keyframes ring-counter { to { transform: rotate(-360deg); } } .orbit__center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 130px; height: 130px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; z-index: 2; overflow: hidden; will-change: box-shadow; box-shadow: 0 0 0 4px rgba(0,40,85,.06), 0 0 30px rgba(0,40,85,.10), 0 0 60px rgba(0,40,85,.05); animation: center-pulse 4s ease-in-out infinite; } @keyframes center-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(0,40,85,.06), 0 0 30px rgba(0,40,85,.10), 0 0 60px rgba(0,40,85,.05); } 50% { box-shadow: 0 0 0 6px rgba(0,40,85,.08), 0 0 40px rgba(0,40,85,.14), 0 0 80px rgba(0,40,85,.07); } } .orbit__center img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .orbit__planet { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; transition: box-shadow .3s, transform .3s; box-shadow: 0 2px 8px rgba(0,40,85,.10), 0 0 20px rgba(0,40,85,.06); } .orbit__planet:hover { box-shadow: 0 4px 16px rgba(0,40,85,.16), 0 0 40px rgba(0,40,85,.12); z-index: 5; } .orbit__planet img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .orbit__label { position: absolute; top: 50%; left: 50%; width: 80px; margin-left: -40px; text-align: center; font-size: .72rem; font-weight: 700; color: var(--ieee-navy); letter-spacing: .06em; pointer-events: none; text-shadow: 0 1px 4px rgba(255,255,255,.9); } .orbit__label--1 { animation: orbit-label-1 12s linear infinite; } .orbit__label--2 { animation: orbit-label-2 12s linear infinite; } .orbit__label--3 { animation: orbit-label-3 12s linear infinite; } .orbit__label--4 { animation: orbit-label-4 12s linear infinite; } .orbit__label--5 { animation: orbit-label-5 12s linear infinite; } @keyframes orbit-label-1 { from { transform: rotate(0deg) translateX(170px) rotate(0deg) translateY(50px); } to { transform: rotate(360deg) translateX(170px) rotate(-360deg) translateY(50px); } } @keyframes orbit-label-2 { from { transform: rotate(72deg) translateX(170px) rotate(-72deg) translateY(50px); } to { transform: rotate(432deg) translateX(170px) rotate(-432deg) translateY(50px); } } @keyframes orbit-label-3 { from { transform: rotate(144deg) translateX(170px) rotate(-144deg) translateY(50px); } to { transform: rotate(504deg) translateX(170px) rotate(-504deg) translateY(50px); } } @keyframes orbit-label-4 { from { transform: rotate(216deg) translateX(170px) rotate(-216deg) translateY(50px); } to { transform: rotate(576deg) translateX(170px) rotate(-576deg) translateY(50px); } } @keyframes orbit-label-5 { from { transform: rotate(288deg) translateX(170px) rotate(-288deg) translateY(50px); } to { transform: rotate(648deg) translateX(170px) rotate(-648deg) translateY(50px); } } .orbit__planet--1 { animation: orbit-move-1 12s linear infinite; } .orbit__planet--2 { animation: orbit-move-2 12s linear infinite; } .orbit__planet--3 { animation: orbit-move-3 12s linear infinite; } .orbit__planet--4 { animation: orbit-move-4 12s linear infinite; } .orbit__planet--5 { animation: orbit-move-5 12s linear infinite; } @keyframes orbit-move-1 { from { transform: rotate(0deg) translateX(170px) rotate(0deg); } to { transform: rotate(360deg) translateX(170px) rotate(-360deg); } } @keyframes orbit-move-2 { from { transform: rotate(72deg) translateX(170px) rotate(-72deg); } to { transform: rotate(432deg) translateX(170px) rotate(-432deg); } } @keyframes orbit-move-3 { from { transform: rotate(144deg) translateX(170px) rotate(-144deg); } to { transform: rotate(504deg) translateX(170px) rotate(-504deg); } } @keyframes orbit-move-4 { from { transform: rotate(216deg) translateX(170px) rotate(-216deg); } to { transform: rotate(576deg) translateX(170px) rotate(-576deg); } } @keyframes orbit-move-5 { from { transform: rotate(288deg) translateX(170px) rotate(-288deg); } to { transform: rotate(648deg) translateX(170px) rotate(-648deg); } } .orbit:hover .orbit__planet, .orbit:hover .orbit__label, .orbit:hover .orbit__ring, .orbit:hover .orbit__ring::before, .orbit:hover::before { animation-play-state: paused; } @media (max-width: 940px) { .orbit { width: 300px; height: 300px; } .orbit__center { width: 100px; height: 100px; } .orbit__planet { width: 64px; height: 64px; margin: -32px 0 0 -32px; } @keyframes orbit-move-1 { from { transform: rotate(0deg) translateX(130px) rotate(0deg); } to { transform: rotate(360deg) translateX(130px) rotate(-360deg); } } @keyframes orbit-move-2 { from { transform: rotate(72deg) translateX(130px) rotate(-72deg); } to { transform: rotate(432deg) translateX(130px) rotate(-432deg); } } @keyframes orbit-move-3 { from { transform: rotate(144deg) translateX(130px) rotate(-144deg); } to { transform: rotate(504deg) translateX(130px) rotate(-504deg); } } @keyframes orbit-move-4 { from { transform: rotate(216deg) translateX(130px) rotate(-216deg); } to { transform: rotate(576deg) translateX(130px) rotate(-576deg); } } @keyframes orbit-move-5 { from { transform: rotate(288deg) translateX(130px) rotate(-288deg); } to { transform: rotate(648deg) translateX(130px) rotate(-648deg); } } .orbit__planet img { width: 100%; height: 100%; object-fit: cover; } @keyframes orbit-label-1 { from { transform: rotate(0deg) translateX(130px) rotate(0deg) translateY(42px); } to { transform: rotate(360deg) translateX(130px) rotate(-360deg) translateY(42px); } } @keyframes orbit-label-2 { from { transform: rotate(72deg) translateX(130px) rotate(-72deg) translateY(42px); } to { transform: rotate(432deg) translateX(130px) rotate(-432deg) translateY(42px); } } @keyframes orbit-label-3 { from { transform: rotate(144deg) translateX(130px) rotate(-144deg) translateY(42px); } to { transform: rotate(504deg) translateX(130px) rotate(-504deg) translateY(42px); } } @keyframes orbit-label-4 { from { transform: rotate(216deg) translateX(130px) rotate(-216deg) translateY(42px); } to { transform: rotate(576deg) translateX(130px) rotate(-576deg) translateY(42px); } } @keyframes orbit-label-5 { from { transform: rotate(288deg) translateX(130px) rotate(-288deg) translateY(42px); } to { transform: rotate(648deg) translateX(130px) rotate(-648deg) translateY(42px); } } } .lb { position: fixed; inset: 0; z-index: 400; background: rgba(0, 40, 85, .94); display: none; place-items: center; padding: 28px; } .lb.is-open { display: grid; } .lb img { max-width: min(92vw, 820px); max-height: 88vh; box-shadow: var(--sh-3); } .lb__x { position: absolute; top: 20px; right: 24px; width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); background: transparent; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background 400ms ease, color 400ms ease; } .lb__x:hover { background: #fff; color: var(--ieee-navy); } /* ----------------------------------------------------------- 20. People --- */ .person { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; text-align: center; transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease; } .person:hover { border-color: var(--accent-line); box-shadow: var(--sh-2); } .person__av { width: 80px; height: 80px; margin: 0 auto 14px; display: grid; place-items: center; background: var(--ieee-blue); color: #fff; font-size: 1.35rem; font-weight: 700; border-radius: 50%; overflow: hidden; } img.person__av { object-fit: cover; } .person__role { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; } .person h3 { margin-bottom: 10px; } .person__detail { font-size: .85rem; color: var(--muted); margin: 2px 0 6px; } .person__link { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .93rem; word-break: break-word; } .person__link svg { width: 14px; height: 14px; flex: none; color: var(--muted); } /* -------------------------------------------------------------- 21. CTA --- */ .cta { background: var(--accent); color: #E7F0F6; text-align: center; padding: 64px 0; } .cta h2 { color: #fff; } .cta p { max-width: 650px; margin-inline: auto; font-size: 1.06rem; } .cta .cta__row { justify-content: center; margin-top: 22px; } /* ----------------------------------------------------------- 22. Footer --- */ .footer { background: var(--ieee-navy); color: #B0C5D7; font-size: .95rem; } .footer__main { padding: 54px 0 38px; } .footer h4 { color: #fff; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; } .footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.1fr 1.3fr; gap: 40px; } .footer__id { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; } .footer__id img { width: 58px; height: 58px; object-fit: contain; flex: none; } .footer__id span { font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.3; } .footer ul { list-style: none; padding: 0; margin: 0; } .footer li { margin-bottom: 9px; } .footer a { color: #B0C5D7; } .footer a:hover { color: #fff; } .footer__line { display: flex; align-items: flex-start; gap: 8px; } .footer__line a { display: flex; align-items: flex-start; gap: 8px; color: inherit; } .footer__line svg { width: 15px; height: 15px; margin-top: 2px; flex: none; color: currentColor; opacity: .8; } .social { display: flex; gap: 10px; margin-top: 16px; } .social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; transition: background 400ms ease, color 400ms ease; } .social a:hover { background: var(--ieee-blue); } .social svg { width: 18px; height: 18px; } /* IEEE-required administrative links + legal block */ .footer__admin { border-top: 1px solid rgba(255, 255, 255, .13); padding: 18px 0; } .footer__admin ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; font-size: .86rem; } .footer__admin li { margin: 0; } .footer__admin li::after { content: "|"; color: #45647F; margin: 0 12px; } .footer__admin li:last-child::after { content: ""; margin: 0; } .footer__legal { border-top: 1px solid rgba(255, 255, 255, .13); padding: 20px 0 32px; text-align: center; font-size: .84rem; color: #8AA5BC; } .footer__legal p { margin: 0 auto 6px; max-width: 900px; } .footer__legal p:last-child { margin-bottom: 0; } .footer__legal a { text-decoration: underline; color: #B0C5D7; } /* ----------------------------------------------------------- 23. Reveal --- */ .rv { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; } .rv.in { opacity: 1; transform: none; } /* ------------------------------------------------------- 24. Responsive --- */ @media (max-width: 1140px) { .nav__link { padding: 10px 9px; font-size: 14px; } .nav__cta { margin-left: 4px; } .identifier__name { font-size: 1rem; } .header__right { gap: 14px; } } @media (max-width: 1024px) { .hero__grid { grid-template-columns: 1fr; gap: 40px; } .event-banner { grid-template-columns: 1fr; gap: 32px; text-align: center; } .event-banner__poster { max-width: 360px; margin-inline: auto; } .event-banner__info .promo__meta { justify-content: center; } .event-banner__info .clock { justify-content: center; } .event-banner__info .hero__cta { justify-content: center; } .event-spot { grid-template-columns: 1fr; gap: 24px; } .event-spot__deck { position: static; max-width: 360px; margin-inline: auto; } .event-spot__deck .deck { margin-inline: auto; } .grid--4 { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; } } @media (max-width: 940px) { :root { --head-h: 72px; } html { scroll-padding-top: calc(var(--head-h) + 16px); } .metanav { display: none; } .burger { display: grid; } .masterbrand { display: none; } .header__right { gap: 0; } .nav { position: fixed; inset: var(--head-h) 0 auto 0; z-index: 200; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 10px 24px 22px; box-shadow: var(--sh-2); transform: translateY(-120%); opacity: 0; visibility: hidden; transition: transform .3s ease, opacity .25s ease, visibility .25s; max-height: calc(100vh - var(--head-h)); overflow-y: auto; } .nav.is-open { transform: none; opacity: 1; visibility: visible; } .nav__item { width: 100%; } .nav__link { width: 100%; justify-content: space-between; padding: 14px 4px; font-size: 16px; border-radius: 0; border-bottom: 1px solid #EDF0F3; } .nav__item.is-current>.nav__link::after { display: none; } .nav__panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-bottom: 1px solid #EDF0F3; min-width: 0; padding: 4px 0 10px; display: none; } .nav__panel::before { display: none; } .nav__item.is-open .nav__panel { display: block; } .nav__panel a { padding: 10px 16px; } .nav__cta { margin: 14px 0 0; } .nav__cta .btn { width: 100%; } .subnav { position: static; } .subnav__title { width: 100%; } .section { padding: 58px 0; } .grid--2, .grid--3, .grid--4, .split { grid-template-columns: 1fr; } .pay--qr { padding: 24px 20px; } .pay--qr .ticks { text-align: left; } .poster-carousel { min-height: 300px; } .poster-card { width: clamp(92px, 28vw, 300px); } .timeline::before { left: 11px; } .timeline__item::before { left: 11px; } .timeline__time { width: auto; text-align: left; font-size: .76rem; } .timeline__item { flex-direction: column; gap: 4px; padding-left: 32px; } .poster-card--center { box-shadow: var(--sh-2); } .stats { grid-template-columns: repeat(2, 1fr); } .pagehead__timer { flex-direction: column; text-align: center; gap: 16px; padding: 18px 16px; } .step, .step--1 { padding-top: 24px; } .seg { padding-left: 58px; } .seg__no { width: 42px; height: 42px; font-size: 1.1rem; } .seg::before { left: 20px; top: 48px; } } @media (max-width: 560px) { .poster-stage { padding: 28px 0 16px; } /* Phone: a three-poster fan (or a rotating single poster) is awkward here — the narrow slivers overflow their captions and the auto-cycle reads as random (and backwards). So all three posters simply stack vertically, one after the next like the prizes cards: each static, full-width (≤360px), with its caption readable, in DOM order. No rotating, no dots. */ .poster-carousel { min-height: 0; display: block; } .poster-card, .poster-card--center, .poster-card--left, .poster-card--right { position: static; left: auto; right: auto; top: auto; bottom: auto; width: 100%; max-width: 360px; margin: 0 auto 20px; transform: none; z-index: auto; } .poster-card:last-child { margin-bottom: 0; } .poster-card:hover { transform: none; } body { font-size: 16px; } .wrap { width: calc(100% - 34px); } .identifier img { width: 44px; height: 44px; } .identifier__name { font-size: .95rem; } .identifier__tag { font-size: .62rem; letter-spacing: .05em; } .hero { padding: 40px 0 56px; } .btn { width: 100%; } .footer__grid { grid-template-columns: 1fr; } .footer__admin li::after { margin: 0 8px; } .alert__in { align-items: flex-start; } .card, .linkcard { padding: 22px 20px; } .orbit-stage { padding: 48px 0; } .orbit { transform: scale(.84); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .rv { opacity: 1; transform: none; } } @media print { .metanav, .alert, .header, .subnav, .footer__main, .lb, .cta { display: none; } .section { padding: 16px 0; } }