/* ========================================================================= ICAAIIA 2026 — main.css International Conference on Applied Artificial Intelligence for Interdisciplinary Applications · Balagrae University, Libya Mobile-first. Base rules describe the phone; media queries add width. Palette sampled directly from the conference logo: navy #0B1A55 and teal #0A7290, with the gold of the Balagrae University crest reserved for one job — marking what is time-critical. Contents 1. Tokens and reset 2. Typography and primitives 3. Buttons 4. Header and navigation 5. Hero 6. Countdown 7. Important dates 8. Cards and topics 9. Submission steps and downloads 10. Committees 11. Tables, notices, prose blocks 12. Contact form 13. Footer 14. Motion, print, accessibility ========================================================================= */ /* ------------------------------------------------------------------------- 1. Tokens and reset ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- 0. Cairo — self-hosted so the site never waits on Google Fonts, which is slow and sometimes blocked on Libyan connections. Subset to Latin + Arabic with shaping preserved, so Arabic committee names and any Arabic content render correctly. font-display: swap shows text immediately in the system font, then upgrades to Cairo once it loads. ------------------------------------------------------------------------- */ @font-face { font-family: "Cairo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cairo-regular.woff2") format("woff2"); } @font-face { font-family: "Cairo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cairo-medium.woff2") format("woff2"); } @font-face { font-family: "Cairo"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cairo-semibold.woff2") format("woff2"); } @font-face { font-family: "Cairo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cairo-bold.woff2") format("woff2"); } :root { --navy: #0B1A55; --navy-deep: #060F36; --navy-soft: #142A78; --teal: #0A7290; --teal-light: #16A0C0; --teal-tint: #E6F3F7; --gold: #C9932B; --gold-light: #E8B84B; --gold-tint: #FBF3DF; --ink: #16192B; --muted: #5B6478; --line: #DDE3EE; --mist: #F4F7FC; --white: #FFFFFF; --mono: ui-monospace, "SFMono-Regular", "Roboto Mono", "DejaVu Sans Mono", monospace; --sans: "Cairo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(11, 26, 85, .06), 0 8px 24px rgba(11, 26, 85, .07); --shadow-lg: 0 14px 44px rgba(11, 26, 85, .18); --maxw: 1140px; --section-y: clamp(2.75rem, 7vw, 5rem); --pad-x: clamp(1rem, 4vw, 2rem); --header-h: 72px; color-scheme: light; } /* ------------------------------------------------------------------------- Dark theme. Every colour on the site is a token, so the whole palette re-skins by overriding the tokens here — no component rule needs touching. Set on by the theme toggle (js/main.js) and persisted in a cookie so the choice survives a reload with no flash of the wrong theme. ------------------------------------------------------------------------- */ html[data-theme="dark"] { --navy: #0E1E4A; /* surfaces that were deep navy become mid slabs */ --navy-deep: #0A1636; --navy-soft: #17285F; --teal: #35B4D4; /* brighter, so links stay legible on dark ground */ --teal-light: #4CC6E4; --teal-tint: #14304A; --gold: #E0B845; --gold-light: #F0CC63; --gold-tint: #2A2412; --ink: #E7ECF5; /* body text */ --muted: #9AA6BE; --line: #26324F; --mist: #131B30; /* the "off-white" band becomes a darker slab */ --white: #111A2E; /* card / page background */ --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35); --shadow-lg: 0 14px 44px rgba(0, 0, 0, .5); color-scheme: dark; } /* The page background and text follow the tokens, so this one rule flips the whole document ground. */ html[data-theme="dark"] body { background: #0A1120; } /* Header uses a translucent white; in dark mode make it a translucent slab. */ html[data-theme="dark"] .site-header { background: rgba(12, 18, 34, .9); } /* Sponsor logos are designed for a light plate. Keep the plate light even in dark mode so the brands render on the background they were made for. */ html[data-theme="dark"] .partners__item { background: #F4F7FC; } /* The hero photograph already sits under a dark gradient, so it needs no change — but lift the overlay slightly so text stays crisp. */ html[data-theme="dark"] .hero::after { background: linear-gradient(180deg, rgba(6,12,28,.92) 0%, rgba(6,12,28,.72) 50%, rgba(6,12,28,.96) 100%); } /* Form status messages keep their own accessible light-on-colour palette in both themes; nudge them so they are not glaring on a dark page. */ html[data-theme="dark"] .form__status.is-ok { background: #123524; color: #7EE0A8; } html[data-theme="dark"] .form__status.is-error { background: #3A1714; color: #F0A79C; } html[data-theme="dark"] .field.has-error input, html[data-theme="dark"] .field.has-error select, html[data-theme="dark"] .field.has-error textarea { border-color: #E06A5A; } html[data-theme="dark"] .field__error { color: #F0A79C; } /* ========================================================================== إصلاحات الوضع الداكن (الأزرار، المؤقت، والشعارات) ========================================================================== */ /* 1. إصلاح نصوص الأزرار لتكون بيضاء دائمًا في الوضع الداكن */ html[data-theme="dark"] .btn--primary, html[data-theme="dark"] .btn--primary:visited, html[data-theme="dark"] .btn--primary:hover, html[data-theme="dark"] .btn--primary:focus-visible, html[data-theme="dark"] .btn--ghost, html[data-theme="dark"] .btn--ghost:visited, html[data-theme="dark"] .btn--ghost:hover { color: #FFFFFF !important; } html[data-theme="dark"] .btn--ghost { border-color: rgba(255, 255, 255, 0.6) !important; } /* 2. إصلاح ألوان المؤقت الزمني (الأرقام والنصوص) */ html[data-theme="dark"] .countdown { color: #FFFFFF !important; } html[data-theme="dark"] .countdown__deadline strong, html[data-theme="dark"] .unit__value { color: #FFFFFF !important; } html[data-theme="dark"] .unit__label { color: rgba(255, 255, 255, 0.7) !important; } html[data-theme="dark"] .unit[data-unit="seconds"] .unit__value, html[data-theme="dark"] .countdown.is-urgent .unit__value { color: var(--gold-light) !important; } /* 3. إبراز الشعار (العلوي وفي وسط الصفحة) بوضع خلفية بيضاء خفيفة له */ html[data-theme="dark"] .brand img, html[data-theme="dark"] .split__figure img[src*="logo-icaaiia.png"] { background-color: #F4F7FC !important; border-radius: 50% !important; padding: 5px !important; } html[data-theme="dark"] .split__figure img[src*="logo-icaaiia.png"] { padding: 15px !important; } /* 4. التأكد من أن اسم المؤتمر في الأعلى لونه أبيض ليظهر بشكل واضح */ html[data-theme="dark"] .brand__name { color: #FFFFFF !important; } /* ------------------------------------------------------------------ Dark mode text colour fixes. In light mode headings use color: var(--navy) — a deep #0B1A55. In dark mode --navy resolves to #0E1E4A which is nearly black against the dark background, making headings invisible. We override every navy/ink-coloured text class here so nothing is lost in the dark. ------------------------------------------------------------------ */ /* Page headings */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: var(--ink); } /* #E7ECF5 — near-white */ /* The hero h1 is always against a photograph with a dark overlay; it already reads well in both themes, so leave it as the explicit white it has. */ html[data-theme="dark"] .hero h1 { color: #FFFFFF; } /* Brand name in the header */ html[data-theme="dark"] .brand__name { color: var(--ink); } /* Nav links */ html[data-theme="dark"] .site-nav__link { color: var(--ink); } html[data-theme="dark"] .site-nav__link:hover { background: rgba(255,255,255,.06); } html[data-theme="dark"] .site-nav__link[aria-current="page"] { color: var(--teal); } /* Toggle buttons */ html[data-theme="dark"] .nav-toggle, html[data-theme="dark"] .tool-btn { color: var(--ink); } html[data-theme="dark"] .nav-toggle__bars, html[data-theme="dark"] .nav-toggle__bars::before, html[data-theme="dark"] .nav-toggle__bars::after { background: var(--ink); } /* Cards and committee names */ html[data-theme="dark"] .person__name { color: var(--ink); } html[data-theme="dark"] .card h3 { color: var(--ink); } html[data-theme="dark"] .step__title { color: var(--ink); } html[data-theme="dark"] .chip__name { color: var(--ink); } html[data-theme="dark"] .dl__main strong { color: var(--ink); } /* Timeline */ html[data-theme="dark"] .timeline__label { color: var(--ink); } /* Table header cells */ html[data-theme="dark"] .table tbody th { color: var(--ink); } /* Section headings with the gold underline rule */ html[data-theme="dark"] .h2-rule { color: var(--ink); } /* Group/roster titles */ html[data-theme="dark"] .group__title { color: var(--teal); } html[data-theme="dark"] .roster__name { color: var(--ink); } html[data-theme="dark"] .roster__toggle { color: var(--ink); } /* Notice boxes: lighten the title */ html[data-theme="dark"] .notice__title { color: var(--ink); } html[data-theme="dark"] .notice--blind { background: rgba(42,36,18,.7); color: #D4C06E; } html[data-theme="dark"] .notice--info { background: rgba(20,48,74,.7); color: #9DD6EA; } /* Form labels */ html[data-theme="dark"] .field label { color: var(--ink); } /* Footer copyright */ html[data-theme="dark"] .footer-bar__copy { color: var(--ink); } /* Step numbers remain visible on the dark card */ html[data-theme="dark"] .step__num { background: var(--teal); color: #FFFFFF; } /* Give theme and direction changes a gentle cross-fade rather than a hard snap. Excluded from prefers-reduced-motion further down. */ html { transition: none; } body, .site-header, .card, .step, .person, .roster, .countdown, .partners__item, .notice, .dl, .chip, .form input, .form select, .form textarea { transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Sub-pixel rounding in a few grid tracks can push the document a fraction of a pixel past the viewport, which shows as a stray horizontal scrollbar on phones. 'clip' removes it without breaking position: sticky the way overflow-x: hidden would. */ overflow-x: clip; } body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--ink); background: var(--white); scroll-padding-top: calc(var(--header-h) + 1rem); } img { max-width: 100%; height: auto; display: block; } a { color: var(--teal); } /* ------------------------------------------------------------------------- 2. Typography and primitives ------------------------------------------------------------------------- */ .section { max-width: var(--maxw); margin-inline: auto; padding-block: var(--section-y); padding-inline: var(--pad-x); } .bg-mist { background: var(--mist); } h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.015em; color: var(--navy); margin: 0 0 .5em; } h1 { font-size: clamp(1.9rem, 6vw, 3rem); font-weight: 800; } h2 { font-size: clamp(1.5rem, 4.5vw, 2.25rem); font-weight: 700; } h3 { font-size: clamp(1.1rem, 3vw, 1.35rem); font-weight: 700; } /* One hairline gold rule under every section heading — the recurring mark that ties the pages together. */ .h2-rule::after { content: ""; display: block; width: 3rem; height: 3px; margin-top: .6rem; background: var(--gold); border-radius: 2px; } p { margin: 0 0 1.1rem; } .eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin: 0 0 .7rem; } .lede { font-size: clamp(1rem, 2.4vw, 1.125rem); color: var(--muted); max-width: 64ch; margin-bottom: 2rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; top: 0; inset-inline-start: 0; z-index: 200; background: var(--gold); color: var(--navy); padding: .75rem 1.25rem; font-weight: 700; text-decoration: none; /* Hidden by moving up out of view rather than sideways, so it never widens the document — a left:-9999px trick expands the page in RTL. */ transform: translateY(-150%); transition: transform .15s ease; } .skip-link:focus { transform: translateY(0); } /* ------------------------------------------------------------------------- 3. Buttons ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .85rem 1.6rem; border: 0; border-radius: 999px; font: inherit; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .btn--primary, .btn--primary:visited { background: var(--navy); color: var(--white); box-shadow: 0 6px 18px rgba(11, 26, 85, .3); } .btn--primary:hover, .btn--primary:focus-visible { background: var(--navy-soft); color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(11, 26, 85, .4); } .btn--gold, .btn--gold:visited { background: var(--gold); color: var(--navy); box-shadow: 0 6px 18px rgba(201, 147, 43, .35); } .btn--gold:hover, .btn--gold:focus-visible { background: var(--gold-light); color: var(--navy); transform: translateY(-2px); } .btn--ghost, .btn--ghost:visited { background: transparent; color: var(--white); border: 2px solid rgba(255, 255, 255, .55); } .btn--ghost:hover, .btn--ghost:focus-visible { background: rgba(255, 255, 255, .12); border-color: var(--white); color: var(--white); } .btn--large { padding: 1.05rem 2.2rem; font-size: clamp(1rem, 2.6vw, 1.125rem); } .btn__icon { width: 1.15em; height: 1.15em; flex: none; } .cta { margin-block: 1.75rem; } .cta--center { text-align: center; } .cta__note { margin: .8rem 0 0; font-size: .875rem; color: var(--muted); } :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } /* ------------------------------------------------------------------------- 4. Header and navigation ------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--line); } .site-header__inner { max-width: 1280px; margin-inline: auto; padding: .6rem var(--pad-x); display: flex; align-items: center; /* flex-wrap: wrap lets the nav panel occupy its own full-width row below the logo and buttons on mobile. Without wrap, flex-basis:100% on .site-nav cannot create a new row and the nav squashes into the middle of the bar. */ flex-wrap: wrap; gap: 0 1rem; min-height: var(--header-h); } /* min-width:0 lets the brand shrink inside the flex row. Without it the strapline sets a floor on the header width and pushes the menu button a fraction of a pixel past the viewport, which is enough to produce a horizontal scrollbar on a phone. */ .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-inline-end: auto; min-width: 0; } .brand img { width: 44px; height: 44px; } .brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .brand__name { font-weight: 800; font-size: 1.05rem; color: var(--navy); letter-spacing: -.01em; } .brand__tag { font-size: .68rem; color: var(--muted); letter-spacing: .02em; /* Prevent the strapline overflowing or forcing the brand block wider than the logo + name already require. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-toggle { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .8rem; background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-weight: 600; font-size: .875rem; color: var(--navy); cursor: pointer; } .nav-toggle__bars { position: relative; width: 18px; height: 2px; background: var(--navy); } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--navy); } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } /* ------------------------------------------------------------------------- Header tools — language and theme toggles. Two compact buttons that sit between the nav and the submit CTA. Each shows what it switches TO, not the current state: the label reads "عربية" when the page is English, and "English" when the page is Arabic. ------------------------------------------------------------------------- */ .header-tools { display: flex; align-items: center; gap: .4rem; margin-inline-start: .5rem; } .tool-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .7rem; background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-weight: 700; font-size: .8125rem; color: var(--navy); cursor: pointer; line-height: 1; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } .tool-btn:hover { background: var(--teal-tint); border-color: var(--teal); } .tool-btn__icon { width: 1.05rem; height: 1.05rem; flex: none; } /* The theme toggle swaps which icon shows via the data-theme attribute on , so there is never a wrong-looking icon after a reload. */ .tool-btn__sun { display: none; } html[data-theme="dark"] .tool-btn__sun { display: block; } html[data-theme="dark"] .tool-btn__moon { display: none; } /* On small screens the language button keeps its text (it is short) but the theme button drops to icon-only to save room. */ @media (max-width: 400px) { .tool-btn__label-theme { display: none; } .header-tools { gap: .3rem; margin-inline-start: .3rem; } .tool-btn { padding: .5rem .55rem; } } /* Mobile: the menu is a panel below the bar. It is hidden with [hidden], which JavaScript sets — so with JS off the menu simply stays open and the site remains fully navigable. */ .site-nav { /* flex-basis:100% makes this item start on a fresh row in the wrapped flex container, so it always spans the full header width below the logo row. */ flex: 0 0 100%; width: 100%; border-top: 1px solid var(--line); padding-block: .5rem .8rem; /* A tiny top margin separates the nav from the logo row visually. */ margin-top: .25rem; } .site-nav[hidden] { display: none; } .site-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; } .site-nav__link { display: block; padding: .65rem .75rem; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--navy); } .site-nav__link:hover { background: var(--mist); } .site-nav__link[aria-current="page"] { background: var(--teal-tint); color: var(--teal); } .header-cta { display: none; } @media (min-width: 1240px) { .brand__tag { white-space: nowrap; } .nav-toggle { display: none; } /* Reset the mobile full-row treatment: on desktop the nav is an inline item in the header row, not a wrapped 100%-width panel. Both flex and width must be reset, or width:100% from the mobile rule forces it to wrap. */ .site-nav { flex: 0 1 auto; width: auto; border-top: 0; padding: 0; margin-top: 0; } .site-nav[hidden] { display: block; } /* Desktop ignores the toggle state. */ .site-nav__list { display: flex; gap: 0; align-items: center; } /* nowrap keeps each label on one line; without it the items break into two rows and the bar doubles in height. Tight padding fits all nine. */ .site-nav__link { padding: .5rem .5rem; font-size: .8125rem; white-space: nowrap; } .site-nav__link[aria-current="page"] { background: transparent; color: var(--teal); } .site-nav__link[aria-current="page"]::after { content: ""; display: block; height: 2px; margin-top: 3px; background: var(--gold); border-radius: 2px; } } /* Between the menu breakpoint and 1360px the bar is full: drop the strapline, then bring back the submit button once there is genuinely room for it. */ @media (min-width: 1240px) and (max-width: 1360px) { .brand__tag { display: none; } } @media (min-width: 1500px) { .header-cta { display: inline-flex; margin-inline-start: .6rem; padding: .6rem 1.05rem; font-size: .8125rem; white-space: nowrap; } } /* ------------------------------------------------------------------------- 5. Hero ------------------------------------------------------------------------- */ .hero { position: relative; color: var(--white); background: var(--navy-deep); overflow: hidden; } .hero__media { position: absolute; inset: 0; background-image: url("../images/hero-benghazi.jpg"); background-size: cover; background-position: center; opacity: .55; } /* Gradient keeps text legible over the photograph at every width. */ .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,15,54,.9) 0%, rgba(6,15,54,.62) 50%, rgba(6,15,54,.92) 100%); } .hero__inner { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto; padding: clamp(3rem, 9vw, 5.5rem) var(--pad-x); /* Centre the hero text block on the opening page. */ text-align: center; } .hero h1 { color: var(--white); /* Full conference name is long — no hard ch limit; let it wrap naturally. */ margin-inline: auto; } .hero__meta { justify-content: center; } .hero__lede { margin-inline: auto; } .hero__actions { justify-content: center; } .hero__meta { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin: 0 0 1.5rem; padding: 0; list-style: none; } .hero__meta li { padding: .35rem .85rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; font-size: .8125rem; font-weight: 600; color: rgba(255, 255, 255, .92); } .hero__lede { font-size: clamp(1rem, 2.6vw, 1.1875rem); color: rgba(255, 255, 255, .84); max-width: 58ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } /* ------------------------------------------------------------------------- 6. Countdown The signature element: the clock plus a rail showing how much of the submission window (10 Aug – 20 Sep) has already gone. ------------------------------------------------------------------------- */ .countdown { position: relative; overflow: hidden; max-width: var(--maxw); margin: 0 auto; padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem); border-radius: var(--radius); background: radial-gradient(120% 140% at 12% 0%, var(--navy-soft) 0%, transparent 55%), linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: var(--white); box-shadow: var(--shadow-lg); text-align: center; } .countdown::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%); } .countdown .eyebrow { color: var(--gold-light); } .countdown__deadline { margin: 0 0 1.5rem; font-size: clamp(.95rem, 2.4vw, 1.0625rem); color: rgba(255,255,255,.72); } .countdown__deadline strong { display: block; margin-top: .2rem; color: var(--white); font-size: clamp(1.1rem, 3vw, 1.375rem); } .countdown__clock { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; max-width: 640px; margin-inline: auto; } .unit { padding: 1rem .5rem .75rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); } /* Tabular figures stop the digits jumping width as they change. */ .unit__value { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(2rem, 9vw, 3.25rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; } .unit__label { display: block; margin-top: .45rem; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .unit[data-unit="seconds"] .unit__value { color: var(--gold-light); } .countdown.is-urgent .unit__value { color: var(--gold-light); } .countdown.is-urgent .rail__fill { background: var(--gold); } .rail { margin-top: 1.75rem; } .rail__track { height: 6px; border-radius: 999px; background: rgba(255,255,255,.15); overflow: hidden; } .rail__fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--teal-light) 0%, var(--gold-light) 100%); transition: width .8s cubic-bezier(.2,.7,.2,1); } .rail__ends { display: flex; justify-content: space-between; gap: .75rem; margin-top: .6rem; font-size: .75rem; color: rgba(255,255,255,.62); } .rail__ends [data-rail-note] { color: var(--gold-light); font-weight: 600; } .countdown__closed { margin: 1.5rem 0 0; padding: .9rem 1rem; border-radius: var(--radius-sm); background: rgba(255,255,255,.1); font-weight: 600; } @media (min-width: 640px) { .countdown__clock { grid-template-columns: repeat(4, 1fr); gap: 1rem; } } /* ------------------------------------------------------------------------- 7. Important dates No 01/02/03 markers — the dates themselves carry the order. The markers encode state instead: done, happening now, still ahead. ------------------------------------------------------------------------- */ .timeline { list-style: none; margin: 0; padding-inline-start: 1.75rem; position: relative; } .timeline::before { content: ""; position: absolute; inset-inline-start: 5px; top: .6rem; bottom: .6rem; width: 2px; background: var(--line); } .timeline__item { position: relative; padding-bottom: 1.75rem; } .timeline__item:last-child { padding-bottom: 0; } .timeline__marker { position: absolute; inset-inline-start: -1.75rem; top: .5rem; width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 3px solid var(--line); } .timeline__item.is-past .timeline__marker { background: var(--line); border-color: var(--line); } .timeline__item.is-current .timeline__marker { border-color: var(--gold); box-shadow: 0 0 0 5px var(--gold-tint); } .timeline__item.is-upcoming .timeline__marker { border-color: var(--teal); } .timeline__date { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .875rem; font-weight: 700; color: var(--teal); } .timeline__label { margin: .15rem 0 .1rem; font-size: clamp(1rem, 2.6vw, 1.1875rem); font-weight: 700; } .timeline__note { margin: 0; font-size: .875rem; color: var(--muted); } /* Past milestones stay visible but struck through: an author still needs to see what they missed. */ .timeline__item.is-past .timeline__date { color: var(--muted); } .timeline__item.is-past .timeline__label { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; } @media (min-width: 720px) { .timeline__item { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); } .timeline__item:last-child { border-bottom: 0; margin-bottom: 0; } .timeline__body { display: grid; grid-template-columns: 12rem 1fr; column-gap: 2.5rem; align-items: start; } .timeline__date { grid-column: 1; grid-row: 1 / span 2; padding-top: .2rem; } .timeline__label { grid-column: 2; grid-row: 1; } .timeline__note { grid-column: 2; grid-row: 2; } } /* ------------------------------------------------------------------------- 8. Cards, topics, features ------------------------------------------------------------------------- */ .grid { display: grid; gap: 1rem; } @media (min-width: 960px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } } .card { padding: 1.4rem 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .card h3 { margin-top: 0; } .card p:last-child { margin-bottom: 0; } .topic-card { border-top: 4px solid var(--teal); } .topic-card__list { margin: 0; padding-inline-start: 1.1rem; color: var(--muted); font-size: .9375rem; } .topic-card__list li { margin-bottom: .35rem; } /* ------------------------------------------------------------------------- 9. Submission steps and downloads Here the numbering is earned — the steps genuinely must happen in order. ------------------------------------------------------------------------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; } .step { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: clamp(1.25rem, 4vw, 1.75rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .step__num { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--navy); color: var(--white); font-family: var(--mono); font-size: 1.125rem; font-weight: 700; } .step__body > :first-child { margin-top: 0; } .step__body > p { color: var(--muted); } .step__body > :last-child { margin-bottom: 0; } .downloads { display: grid; gap: .75rem; margin-bottom: 1rem; } .dl { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .9rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--mist); color: var(--ink); text-decoration: none; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; } .dl:hover { transform: translateY(-2px); background: var(--white); } .dl--word:hover { border-color: var(--teal); } .dl--latex:hover { border-color: var(--gold); } /* The file-type badge does the distinguishing, so the two read as a pair of options rather than two competing calls to action. */ .dl__kind { display: grid; place-items: center; min-width: 3.4rem; padding: .4rem .5rem; border-radius: 6px; font-family: var(--mono); font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: var(--white); } .dl--word .dl__kind { background: var(--teal); } .dl--latex .dl__kind { background: var(--navy); } .dl__main strong { display: block; font-size: .9375rem; color: var(--navy); } .dl__main small { display: block; font-size: .8125rem; color: var(--muted); } @media (min-width: 720px) { .downloads { grid-template-columns: 1fr 1fr; } } /* ------------------------------------------------------------------------- 10. Committees ------------------------------------------------------------------------- */ .group { margin-bottom: 2rem; } .group__title { margin: 0 0 .9rem; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); } .people { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; } .person { padding: 1.1rem 1.25rem; background: var(--white); border: 1px solid var(--line); border-inline-start: 4px solid var(--teal); border-radius: var(--radius-sm); box-shadow: var(--shadow); } .person__name { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--navy); } .person__aff { margin: .2rem 0 0; font-size: .875rem; color: var(--muted); } .roster { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); overflow: hidden; margin-bottom: .75rem; } .roster__toggle { width: 100%; display: flex; align-items: center; gap: .75rem; padding: 1rem 1.15rem; background: none; border: 0; font: inherit; text-align: start; color: var(--navy); cursor: pointer; } .roster__toggle:hover { background: var(--mist); } .roster__name { flex: 1; font-weight: 700; font-size: 1rem; } .roster__count { font-family: var(--mono); font-size: .75rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; background: var(--teal-tint); color: var(--teal); } .roster__chev { width: 1.25rem; height: 1.25rem; flex: none; transition: transform .22s ease; } .roster__toggle[aria-expanded="true"] .roster__chev { transform: rotate(180deg); } .roster__panel { padding: 0 1.15rem 1.15rem; } .roster__panel[hidden] { display: none; } .chips { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .chip { padding: .6rem .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--mist); } .chip__name { display: block; font-weight: 600; font-size: .9375rem; } .chip__aff { display: block; font-size: .8125rem; color: var(--muted); } @media (min-width: 640px) { .people, .chips { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .people, .chips { grid-template-columns: repeat(3, 1fr); } } /* ------------------------------------------------------------------------- 11. Tables, notices, prose blocks ------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: .9375rem; } .table th, .table td { padding: .85rem 1rem; text-align: start; border-bottom: 1px solid var(--line); } .table thead th { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom-width: 2px; } .table tbody th { font-weight: 600; color: var(--navy); } .table td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .table tr.is-past { color: var(--muted); } .table tr.is-current { background: var(--gold-tint); } .notice { padding: 1.05rem 1.2rem; border-radius: var(--radius-sm); font-size: .9375rem; margin-bottom: 1.25rem; } .notice > :last-child { margin-bottom: 0; } .notice__title { display: block; font-weight: 700; color: var(--navy); margin-bottom: .25rem; } .notice--blind { background: var(--gold-tint); border-inline-start: 4px solid var(--gold); } .notice--info { background: var(--teal-tint); border-inline-start: 4px solid var(--teal); } .checklist { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .6rem; } .checklist li { position: relative; padding-inline-start: 1.9rem; } .checklist li::before { content: ""; position: absolute; inset-inline-start: 0; top: .5rem; width: 1.05rem; height: .55rem; border-inline-start: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: rotate(-45deg); } .criteria { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; } .criteria li { padding: .8rem 1rem; border-inline-start: 3px solid var(--teal); background: var(--mist); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .9375rem; } .criteria strong { color: var(--navy); } /* min-width:0 stops a long unbreakable list item inside a column from setting a floor on the grid track width. */ .split { display: grid; gap: 1.5rem; align-items: center; } .split > * { min-width: 0; } /* Indexing databases. One column on a narrow phone, two once there is room — a fixed two-column rule overflows at 320px. */ .db-list { margin: 0; padding-inline-start: 1.1rem; color: var(--muted); font-size: .9375rem; } .db-list li { margin-bottom: .35rem; break-inside: avoid; } @media (min-width: 560px) { .db-list { columns: 2; column-gap: 2rem; } } .split__figure { text-align: center; } .split__figure img { margin-inline: auto; max-width: 220px; } @media (min-width: 860px) { .split { grid-template-columns: 1.6fr 1fr; gap: 3rem; } } /* ------------------------------------------------------------------------- 12. Contact form ------------------------------------------------------------------------- */ .form { display: grid; gap: 1.1rem; max-width: 760px; } .field { display: grid; gap: .4rem; } .field label { font-size: .875rem; font-weight: 600; color: var(--navy); } .optional { font-weight: 400; color: var(--muted); } .form input[type="text"], .form input[type="email"], .form select, .form textarea { width: 100%; padding: .8rem .95rem; font: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .18s ease, box-shadow .18s ease; } .form input:focus, .form select:focus, .form textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); outline: none; } .form textarea { resize: vertical; min-height: 8rem; } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #C0392B; } .field__error { margin: 0; font-size: .8125rem; font-weight: 600; color: #C0392B; } .field__error[hidden] { display: none; } /* Honeypot sits off-screen rather than display:none — some bots skip hidden fields but happily fill positioned ones. */ .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .form__status { margin: 0; padding: .9rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .9375rem; } .form__status[hidden] { display: none; } .form__status.is-ok { background: #E7F6EC; color: #14663A; border-inline-start: 4px solid #1E9E5A; } .form__status.is-error { background: #FDECEA; color: #922B21; border-inline-start: 4px solid #C0392B; } @media (min-width: 720px) { .form { grid-template-columns: 1fr 1fr; } .field--wide, .form__actions, .form__status { grid-column: 1 / -1; } } .contact-cards { display: grid; gap: 1rem; margin-bottom: 2.5rem; } @media (min-width: 720px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } } /* ------------------------------------------------------------------------- 13. Footer ------------------------------------------------------------------------- */ .site-footer { background: var(--navy-deep); color: rgba(255, 255, 255, .78); padding-block: clamp(2.25rem, 6vw, 3.25rem); } .site-footer__inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); } /* Partners row layout. Left side (in normal flow): Hosted by, then Gold Sponsor. Right side (.partners__right): Research group + Proceedings, pushed to the far end of the row so they sit at the bottom-right of the footer. */ .partners { display: grid; gap: 2rem; } @media (min-width: 860px) { .partners { grid-template-columns: auto auto 1fr; align-items: start; gap: 2rem 3rem; } /* The right-hand block holds Research group + Proceedings side by side and is pushed to the end of the row. */ .partners__right { grid-column: 3; justify-self: end; display: flex; gap: 2.5rem; align-items: start; } } /* Below 860px everything stacks; the right block becomes two stacked groups. */ .partners__right { display: flex; flex-wrap: wrap; gap: 2rem; } .partners__label { margin: 0 0 .9rem; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); } .partners__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; } /* Logos arrive in every colour. A white plate keeps each brand legible and correctly coloured against the navy instead of flattening it. */ .partners__item { background: var(--white); border-radius: var(--radius-sm); padding: .75rem 1.1rem; display: grid; place-items: center; min-width: 104px; min-height: 78px; } .partners__item img { max-height: 56px; width: auto; } /* IJCA crest badge — square-ish, sits on its own white plate. */ .partners__item--ijca { min-width: 118px; min-height: 96px; padding: .6rem .9rem; } .partners__item--ijca img { max-height: 84px; width: auto; } html[data-theme="dark"] .partners__item--ijca { background: #F4F7FC; } .partners__wordmark { font-weight: 800; font-size: .95rem; color: var(--navy); letter-spacing: .02em; text-align: center; } /* Gold Sponsor tier. The gold label and the gold frame around each plate mark the level of support. The plates are noticeably larger than the other partner tiles so the sponsorship reads as the highest level. */ .partners__label--gold { color: var(--gold-light); } .partners__item--gold { padding: 1.1rem 1.6rem; min-width: 168px; min-height: 124px; box-shadow: 0 0 0 2px var(--gold-light), var(--shadow); } .partners__item--gold img { max-height: 92px; width: auto; } .footer-cols { display: grid; gap: 1.75rem; margin-top: 2.5rem; } .footer-cols h3 { color: var(--white); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .7rem; } .footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } .footer-cols a { color: rgba(255,255,255,.78); text-decoration: none; font-size: .9375rem; } .footer-cols a:hover { color: var(--gold-light); text-decoration: underline; } @media (min-width: 720px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } } /* The Microsoft CMT acknowledgment. Microsoft verifies this text in the page source, so it must stay plain — no bold, no italics, no JavaScript. */ .cmt-acknowledgment { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .8125rem; line-height: 1.7; color: rgba(255, 255, 255, .68); max-width: 90ch; } .footer-bar { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .14); display: grid; gap: .4rem; font-size: .875rem; } .footer-bar__copy { margin: 0; font-weight: 700; color: var(--white); } .footer-bar__meta { margin: 0; color: rgba(255,255,255,.6); } @media (min-width: 720px) { .footer-bar { grid-template-columns: 1fr auto; align-items: center; } .footer-bar__meta { text-align: end; } } /* ------------------------------------------------------------------------- 13b. Right-to-left (Arabic) Most of the layout flips automatically because the CSS uses logical properties (margin-inline, inset-inline, text-align: start). These few rules handle the pieces that cannot: mirrored icons and the nav underline anchor. ------------------------------------------------------------------------- */ [dir="rtl"] { /* Cairo is already the primary family; Arabic renders with correct shaping. */ letter-spacing: 0; } /* The external-link and submit arrows point the wrong way once mirrored, so flip them back to keep them pointing "outward/forward" in reading order. */ [dir="rtl"] .btn__icon { transform: scaleX(-1); } /* The countdown clock and important-dates numbers stay left-to-right even in Arabic — a date and a timer are read the same way in both scripts. */ [dir="rtl"] .unit__value, [dir="rtl"] .timeline__date, [dir="rtl"] .table td.num { direction: ltr; unicode-bidi: isolate; } /* Keep the hero meta pills and hero actions starting from the reading edge. */ /* NOTE: The hero is centred so we do NOT override justify-content here in RTL — justify-content: center already works correctly in both LTR and RTL. */ /* ------------------------------------------------------------------------- 14. Motion, print, accessibility ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .btn:hover, .dl:hover { transform: none; } } @media print { .site-header, .hero__actions, .countdown, .cta, .form__actions, .nav-toggle { display: none; } .roster__panel[hidden] { display: block !important; } .site-footer { background: none; color: #000; } .partners__item { border: 1px solid #999; } .step, .card, .person, .roster { box-shadow: none; border: 1px solid #999; break-inside: avoid; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75rem; } }