/* ============================================================================= ICFEC 2027 — stylesheet ----------------------------------------------------------------------------- All visual design is driven by the variables below. To recolour the whole site, change --brand and --brand-2. ========================================================================== */ :root { /* Brand colours --------------------------------------------------------- */ --brand: #2563eb; /* primary blue */ --brand-2: #06b6d4; /* cyan, used in gradients */ --brand-deep: #1d4ed8; --accent: #f59e0b; /* amber: deadlines, highlights */ /* Surfaces — LIGHT THEME ---------------------------------------------- */ --ink: #0b1424; --ink-soft: #475569; --ink-faint: #5f6d80; /* AA (>=4.9:1) on white, --bg-alt and --surface-2 */ --line: #e4eaf1; --line-soft: #eef2f7; --bg: #ffffff; --bg-alt: #f6f8fc; --surface: #ffffff; /* cards, tables, opaque navbar */ --surface-2: #fbfcfe; /* table headers */ --nav-bg: rgba(255,255,255,.85); --dark: #060d1f; /* header and footer: dark in both themes */ --dark-2: #0d1730; color-scheme: light; /* Shapes --------------------------------------------------------------- */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --shadow-sm: 0 1px 2px rgba(11,20,36,.05), 0 4px 12px rgba(11,20,36,.05); --shadow-md: 0 2px 4px rgba(11,20,36,.04), 0 12px 32px rgba(11,20,36,.08); --shadow-lg: 0 4px 8px rgba(11,20,36,.04), 0 24px 60px rgba(11,20,36,.12); --wrap: 1160px; --nav-h: 70px; /* How far the key-facts strip rises over the hero. Both the strip and the "scroll" cue use it: tying them to a single variable keeps them from overlapping. */ --hl-overlap: 52px; --ease: cubic-bezier(.22,.68,.26,1); } /* ----------------------------------------------------------------------------- DARK THEME The same variables as the block above, redefined. The only place to touch to change the colours of the dark version. Note: no @media (prefers-color-scheme: dark) is needed here. The inline script in the of index.html writes data-theme="dark" or "light" before the page is painted, taking into account both the user's choice and the operating system setting. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { --brand: #5b93f7; --brand-2: #22d3ee; --brand-deep: #3b7ae4; --brand-light: #14243f; --ink: #e9eff8; --ink-soft: #a6b7cd; --ink-faint: #94a7bf; /* AA on dark backgrounds */ --line: #1f2d45; --line-soft: #17233a; --bg: #0a1120; --bg-alt: #0d1628; --surface: #111b2e; --surface-2: #0e1728; --nav-bg: rgba(10,17,32,.82); --dark: #050c1b; --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.28); --shadow-md: 0 2px 4px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4); --shadow-lg: 0 4px 8px rgba(0,0,0,.3), 0 24px 60px rgba(0,0,0,.5); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } /* The hidden attribute must win over class-level display rules. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); } body { margin: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 17px; line-height: 1.7; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, .nav__acronym, .btn, .tag { font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; } img { max-width: 100%; display: block; } a { color: var(--brand); } svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } ::selection { background: var(--brand); color: #fff; } /* ----------------------------------------------------------------------------- ACCESSIBILITY WCAG 2.1 AA requirements, mandated by Italian Law 4/2004 ("Legge Stanca") for public-sector websites, universities included. -------------------------------------------------------------------------- */ /* Focus ring for keyboard users (WCAG 2.4.7). :focus-visible does not trigger on mouse clicks, so it stays out of the way. */ :focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; } /* Over the hero and on dark bands, a light ring is needed for contrast. */ .hero :focus-visible, .section--dark :focus-visible, .footer :focus-visible, .nav:not(.is-scrolled) :focus-visible { outline-color: #fff; } /* Screen readers only: text that is not shown but is announced. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Skip link: the first element reached with Tab, lets users bypass the navigation (WCAG 2.4.1). Invisible until it receives focus. */ .skip-link { position: absolute; top: 8px; left: 8px; z-index: 100; padding: 12px 22px; border-radius: 10px; /* Fixed blue, not var(--brand): in the dark theme the lighter blue would give 3:1 against white, below the AA threshold. >= 4.5:1 is required. */ background: #1d4ed8; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; transform: translateY(-150%); transition: transform .2s var(--ease); } .skip-link:focus { transform: translateY(0); } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .wrap--narrow { max-width: 840px; } .muted { color: var(--ink-faint); font-size: 15px; } .lead { font-size: 18.5px; color: var(--ink-soft); } /* Gradient text (hero title) */ .grad { background: linear-gradient(100deg, #7dd3fc 0%, #38bdf8 35%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================== NAVBAR == */ .nav { position: sticky; top: 0; z-index: 60; height: var(--nav-h); transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; border-bottom: 1px solid transparent; } /* Transparent over the hero, opaque once scrolled */ .nav:not(.is-scrolled) { background: transparent; } .nav:not(.is-scrolled) .nav__acronym { color: #fff; } .nav:not(.is-scrolled) .nav__menu > a { color: rgba(255,255,255,.82); } .nav:not(.is-scrolled) .nav__menu > a:hover { color: #fff; } .nav:not(.is-scrolled) .nav__toggle { border-color: rgba(255,255,255,.35); } .nav:not(.is-scrolled) .nav__toggle span { background: #fff; } .nav.is-scrolled { background: var(--nav-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--line); box-shadow: 0 1px 20px rgba(11,20,36,.06); } .nav__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; gap: 24px; } .nav__brand { display: flex; align-items: baseline; gap: 9px; text-decoration: none; } .nav__ieee { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-style: italic; letter-spacing: -.02em; font-size: 21px; background: linear-gradient(95deg, var(--brand) 0%, var(--brand-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .nav__acronym { font-weight: 700; letter-spacing: .06em; font-size: 15.5px; color: var(--ink); transition: color .3s; } .nav__menu { margin-left: auto; display: flex; align-items: center; gap: 26px; } .nav__menu > a { position: relative; text-decoration: none; color: var(--ink-soft); font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: color .18s; } .nav__menu > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); } .nav__menu > a:hover { color: var(--brand); } .nav__menu > a.is-active { color: var(--brand); font-weight: 600; } .nav__menu > a.is-active::after { transform: scaleX(1); } .nav__cta { padding: 9px 20px; border-radius: 999px; background: linear-gradient(95deg, var(--brand) 0%, var(--brand-2) 130%); color: #fff !important; font-weight: 600 !important; box-shadow: 0 6px 18px rgba(37,99,235,.3); transition: transform .18s var(--ease), box-shadow .18s var(--ease); } .nav__cta::after { display: none; } .nav__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37,99,235,.4); } /* Light/dark theme switch */ .nav__theme { flex: none; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; background: none; border: 1px solid var(--line); border-radius: 11px; color: var(--ink-soft); cursor: pointer; transition: color .2s, border-color .2s, background .2s; } .nav__theme:hover { color: var(--brand); border-color: var(--brand); } .nav__theme svg { width: 18px; height: 18px; } .nav:not(.is-scrolled) .nav__theme { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.28); } .nav:not(.is-scrolled) .nav__theme:hover { color: #fff; border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.1); } /* Show the icon of where you are going, not where you are. */ .nav__theme-sun { display: none; } .nav__theme-moon { display: block; } :root[data-theme="dark"] .nav__theme-sun { display: block; } :root[data-theme="dark"] .nav__theme-moon { display: none; } .nav__toggle { display: none; width: 44px; height: 40px; padding: 11px 9px; background: none; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; flex-direction: column; justify-content: space-between; } .nav__toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ================================================================ HERO == */ .hero { position: relative; min-height: min(100vh, 880px); margin-top: calc(var(--nav-h) * -1); display: grid; place-items: center; overflow: hidden; background: var(--dark); } /* Background. To use a photo: save it as assets/img/hero.jpg and uncomment the background-image line. The gradient stays as a fallback. */ .hero__bg { position: absolute; inset: 0; background: radial-gradient(90% 70% at 15% 0%, #16337a 0%, transparent 60%), radial-gradient(70% 60% at 90% 20%, #0e5f86 0%, transparent 55%), radial-gradient(80% 80% at 50% 110%, #1e1b4b 0%, transparent 60%), var(--dark); /* background-image: url("../img/hero.jpg"); */ background-size: cover; background-position: center; } /* Animated node network, drawn by main.js (theme: edge computing) */ .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .85; } /* Soft glow behind the title */ .hero__glow { position: absolute; left: 50%; top: 42%; width: min(1000px, 120vw); aspect-ratio: 1; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(56,189,248,.18) 0%, rgba(56,189,248,0) 62%); pointer-events: none; } .hero__overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6,13,31,.72) 0%, rgba(6,13,31,.28) 40%, rgba(6,13,31,.92) 100%); } /* Rotating photos (data/site.js -> heroImages), cross-faded. */ .hero__slides { position: absolute; inset: 0; } .hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s var(--ease); } .hero__slide.is-active { opacity: 1; } /* Over photos the veil must be darker: at .62 even a pure white patch of sky behind the text stays above 4.5:1 against white (WCAG AA). The node network is toned down so it does not compete with the photo. */ .hero--photos .hero__overlay { background: linear-gradient(180deg, rgba(6,13,31,.78) 0%, rgba(6,13,31,.62) 45%, rgba(6,13,31,.94) 100%); } .hero--photos .hero__canvas { opacity: .35; } .hero--photos .hero__glow { opacity: .5; } .hero__content { position: relative; z-index: 2; text-align: center; color: #fff; padding: calc(var(--nav-h) + 70px) 24px 110px; max-width: 1000px; } .hero__badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 7px 18px 7px 14px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.88); text-transform: uppercase; } .hero__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: pulse 2.4s infinite; } .hero__badge-sep { width: 1px; height: 13px; background: rgba(255,255,255,.25); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); } 70% { box-shadow: 0 0 0 9px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } } .hero__title { margin: 0 0 22px; font-size: clamp(34px, 6.2vw, 68px); line-height: 1.08; font-weight: 800; letter-spacing: -.035em; } .hero__lede { margin: 0 auto 34px; max-width: 640px; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; color: rgba(255,255,255,.75); } .hero__lede:empty { display: none; } .hero__meta { list-style: none; margin: 0 0 38px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .hero__meta li { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px); border-radius: 999px; padding: 9px 20px; font-size: 15px; font-weight: 500; } .hero__meta svg { width: 17px; height: 17px; color: var(--brand-2); } .hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .countdown { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 34px; padding: 11px 22px; border-radius: 999px; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.35); color: #fde68a; font-size: 14.5px; } .countdown__label { text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; font-weight: 600; opacity: .85; } .countdown__value b { font-size: 19px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; } /* "Scroll" cue: a stylised mouse wheel with a dot moving down. Always sits above the key-facts strip, never under it. */ .hero__scroll { position: absolute; z-index: 2; bottom: calc(var(--hl-overlap) + 22px); left: 50%; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.35); border-radius: 999px; display: grid; justify-items: center; padding-top: 8px; } .hero__scroll span { width: 3px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.8); animation: wheel 1.9s var(--ease) infinite; } @keyframes wheel { 0% { opacity: 0; transform: translateY(-3px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } } /* ============================================================= BUTTONS == */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s var(--ease); } .btn svg { width: 17px; height: 17px; transition: transform .2s var(--ease); } .btn:hover svg { transform: translateX(3px); } .btn--primary { background: linear-gradient(95deg, var(--brand) 0%, var(--brand-2) 130%); color: #fff; box-shadow: 0 8px 24px rgba(37,99,235,.35); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(37,99,235,.45); } .btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.3); backdrop-filter: blur(8px); } .btn--ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); } .btn--outline { background: var(--surface); color: var(--brand); border-color: var(--line); box-shadow: var(--shadow-sm); } .btn--outline:hover { border-color: var(--brand); background: #f5f8ff; transform: translateY(-2px); } /* ========================================================== HIGHLIGHTS == */ .highlights-wrap { position: relative; z-index: 3; margin-top: calc(var(--hl-overlap) * -1); } .highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .highlight { padding: 26px 28px; border-right: 1px solid var(--line-soft); } .highlight:last-child { border-right: 0; } .highlight__label { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); } .highlight__value { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; } /* ============================================================ SECTIONS == */ .section { padding: 104px 0; } .section--alt { background: var(--bg-alt); } .section--dark { position: relative; background: radial-gradient(70% 90% at 85% 0%, #16337a 0%, transparent 60%), var(--dark); color: rgba(255,255,255,.76); } /* In the dark theme the band barely stands out from the page: two hairlines. */ :root[data-theme="dark"] .section--dark { border-block: 1px solid var(--line); } .section--dark .section__title { color: #fff; } .section--dark .section__eyebrow { color: var(--brand-2); } .section--dark strong { color: #fff; } .section__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); } .section__eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); } .section__title { margin: 0 0 22px; font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; } .section__subtitle { margin: -10px 0 38px; color: var(--ink-soft); max-width: 68ch; } .subheading { margin: 56px 0 26px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); padding-bottom: 14px; border-bottom: 1px solid var(--line); } /* Reveal-on-scroll animation */ .reveal { opacity: 0; transform: translateY(24px); } .reveal.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); } /* Variant without movement, for position:sticky elements: a transform on them (or on an ancestor) breaks the sticking and makes the element jump 24px when the animation ends. Opacity has no such side effect. */ .reveal--fade, .reveal--fade.is-in { transform: none; } /* ======================================== HOME: announcements + dates == */ .home-grid { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; } .announcements { list-style: none; margin: 0; padding: 0; } .announcements li { position: relative; padding: 22px 0 22px 26px; border-bottom: 1px solid var(--line); } .announcements li::before { content: ""; position: absolute; left: 0; top: 30px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-2)); } .announcements li:first-child::before { top: 8px; } .announcements li:first-child { padding-top: 0; } .announcements li:last-child { border-bottom: 0; } .announcements h3 { margin: 0 0 4px; font-size: 17.5px; font-weight: 700; letter-spacing: -.01em; } .announcements time { display: block; margin-bottom: 8px; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; } .announcements p { margin: 0 0 10px; color: var(--ink-soft); font-size: 15.5px; } .announcements p:last-child { margin-bottom: 0; } /* Announcement body generated from Markdown: lists, links, code. */ .announcement__body ul { margin: 0 0 10px; padding-left: 20px; color: var(--ink-soft); font-size: 15.5px; } .announcement__body li { margin-bottom: 4px; } .announcement__body a { font-weight: 500; } .announcement__body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; padding: 1px 6px; border-radius: 5px; background: var(--bg-alt); border: 1px solid var(--line); color: var(--ink); } /* The wrapper spans the full height of the grid row (the grid uses align-items:start, so it must be requested explicitly): it gives the card room to stay stuck once the announcements list grows. */ .dates-col { align-self: stretch; } .dates-card { position: sticky; top: calc(var(--nav-h) + 24px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 30px 30px 24px; overflow: hidden; } .dates-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--accent)); } .dates-card__title { margin: 0 0 20px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; } .dates-card__note { margin: 18px 0 0; font-size: 12.5px; color: var(--ink-faint); } .dates { list-style: none; margin: 0; padding: 0; } .dates li { padding: 14px 0; border-top: 1px solid var(--line-soft); } .dates li:first-child { border-top: 0; padding-top: 0; } .dates .d-label { font-size: 11.5px; color: var(--ink-faint); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .dates .d-value { margin-top: 3px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; } .dates .d-old { margin-right: 9px; color: var(--ink-faint); font-weight: 500; text-decoration: line-through; } .dates .d-value.is-extended { color: #dc2626; } /* ================================================================= CFP == */ .topics { margin: 26px 0 34px; padding: 0; list-style: none; } .topics li { position: relative; padding: 12px 0 12px 34px; border-bottom: 1px solid var(--line-soft); transition: padding-left .25s var(--ease), color .25s; } .topics li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 12px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .25s var(--ease); } .topics li:hover { padding-left: 40px; } .topics li:hover::before { width: 18px; } .cfp-download { margin-top: 32px; } /* ========================================================== SUBMISSION == */ .paper-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 8px 0 40px; } .paper-type { padding: 22px 24px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); transition: transform .25s var(--ease), border-color .25s, background .25s; } .paper-type:hover { transform: translateY(-3px); border-color: rgba(56,189,248,.5); background: rgba(255,255,255,.08); } .paper-type__pages { font-family: "Plus Jakarta Sans", sans-serif; font-size: 40px; font-weight: 800; letter-spacing: -.04em; line-height: 1; background: linear-gradient(135deg, #7dd3fc, #a78bfa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .paper-type__label { margin-left: 7px; font-size: 13px; color: rgba(255,255,255,.55); } .paper-type h3 { margin: 8px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; } .submit-box { margin-top: 44px; padding: 28px 32px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .submit-box h3 { margin: 0 0 3px; font-size: 20px; color: #fff; letter-spacing: -.02em; } .submit-box p { margin: 0; color: rgba(255,255,255,.6); font-size: 15px; } /* =========================================================== ATTENDEES == */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; } .card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 30px; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: #d3e0f5; } .card:hover::before { transform: scaleX(1); } .card h3 { margin: 0 0 12px; font-size: 20px; letter-spacing: -.02em; } .card p { margin: 0 0 20px; color: var(--ink-soft); font-size: 15.5px; flex: 1; } .card a { font-weight: 600; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .card a:hover { gap: 10px; } /* ============================================================= PROGRAM == */ .day { margin-bottom: 52px; } .day__title { margin: 0 0 22px; padding-bottom: 12px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; border-bottom: 2px solid var(--line); } .session { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); margin-bottom: 20px; overflow: hidden; } .session__head { padding: 20px 24px; border-bottom: 1px solid var(--line-soft); } .session__tags { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; } .tag { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; background: linear-gradient(95deg, var(--brand), var(--brand-2)); color: #fff; } .tag--time { background: var(--bg-alt); color: var(--ink-soft); border: 1px solid var(--line); font-variant-numeric: tabular-nums; } .session__title { margin: 0; font-size: 18.5px; font-weight: 700; letter-spacing: -.02em; } .session__meta { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); } .session__meta b { color: var(--ink-faint); font-weight: 600; text-transform: uppercase; font-size: 11.5px; letter-spacing: .08em; } .session table { width: 100%; border-collapse: collapse; } .session th { text-align: left; padding: 12px 24px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); background: var(--surface-2); border-bottom: 1px solid var(--line-soft); } .session td { padding: 15px 24px; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-size: 15px; } .session tr:last-child td { border-bottom: 0; } .session td:first-child { font-weight: 600; width: 58%; } .session td:last-child { color: var(--ink-soft); } .table-scroll { overflow-x: auto; } /* ========================================================== COMMITTEES == */ .role-block { margin-bottom: 44px; } .role-block__title { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); } .role-block__title::after { content: ""; flex: 1; height: 1px; background: var(--line); } .people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px 26px; } .people-grid--compact { gap: 16px 26px; } .person { padding: 4px 0 4px 16px; border-left: 2px solid var(--line); transition: border-color .25s, transform .25s var(--ease); } .person:hover { border-left-color: var(--brand-2); transform: translateX(3px); } .person__name { margin: 0; font-weight: 700; font-size: 16px; letter-spacing: -.01em; } .person__aff { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-faint); line-height: 1.5; } /* ================================= TEXT PAGES (privacy, accessibility) == */ .nav__menu--doc > a { font-size: 14px; } .doc { padding-top: 8px; } .doc__title { margin: 0 0 10px; font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; letter-spacing: -.03em; } .doc__updated { margin: 0 0 44px; padding-bottom: 24px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink-faint); } .doc h2 { margin: 52px 0 16px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; } .doc h3 { margin: 36px 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink-soft); } .doc p { margin: 0 0 18px; } .doc ul { margin: 0 0 20px; padding-left: 22px; } .doc li { margin-bottom: 10px; } .doc code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; padding: 2px 7px; border-radius: 5px; background: var(--bg-alt); border: 1px solid var(--line); } .doc strong { font-weight: 650; } .footer__bottom--doc a { color: #b8c7da; text-decoration: none; font-weight: 600; } .footer__bottom--doc a:hover { color: #fff; } /* ============================================================== FOOTER == */ .footer { position: relative; overflow: hidden; background: var(--dark); color: #93a4bb; padding: 72px 0 28px; font-size: 15px; } .footer__glow { position: absolute; left: 50%; top: -40%; width: 900px; aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle, rgba(37,99,235,.22) 0%, transparent 62%); pointer-events: none; } .footer__inner { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; } .footer__title { display: flex; align-items: baseline; gap: 9px; margin: 0 0 8px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 21px; font-weight: 800; color: #fff; letter-spacing: .04em; } .footer__sub { margin: 0; color: #94a7bf; font-size: 14.5px; } .footer__label { margin: 0 0 14px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #8ba1bb; font-weight: 600; } .footer__links { display: flex; flex-direction: column; gap: 9px; } .footer__links a, .footer__contact a { color: #b8c7da; text-decoration: none; font-size: 14.5px; transition: color .2s; } .footer__links a:hover, .footer__contact a:hover { color: #fff; } .footer__contact a { font-weight: 600; color: #fff; } /* Bottom row: copyright on the left, credit in the centre, legal links on the right. Grid rather than flex with space-between: the latter spreads the empty space, so the middle block would drift towards the side with the shorter text. With "1fr auto 1fr" both side columns are equally wide and the centre is truly centred, however long copyright and links are. */ .footer__bottom { position: relative; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.09); font-size: 13px; color: #8ba1bb; display: grid; gap: 18px; justify-items: center; text-align: center; } @media (min-width: 700px) { .footer__bottom { grid-template-columns: 1fr auto 1fr; align-items: center; text-align: left; } .footer__bottom > :nth-child(1) { justify-self: start; } .footer__bottom > :nth-child(2) { justify-self: center; } .footer__bottom > :nth-child(3) { justify-self: end; } /* Text pages have only two items. */ .footer__bottom--doc { grid-template-columns: 1fr auto; } .footer__bottom--doc > :nth-child(2) { justify-self: end; } } /* "Powered by FCRLab" credit ------------------------------------------- */ .powered { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #8ba1bb; } .powered a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #b8c7da; opacity: .88; transition: opacity .2s var(--ease), transform .2s var(--ease); } .powered a:hover { opacity: 1; transform: translateY(-1px); } /* The footer is dark in both themes: the logo only needs sizing. */ .powered img { height: 26px; width: auto; display: block; } .powered .powered__name { font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .01em; text-transform: none; color: #fff; } /* ======================================================== PLACEHOLDERS == */ /* Highlights in yellow everything still marked "TODO", so the site cannot be published with a field forgotten. It disappears on its own once the text is replaced. */ .todo { background: #fff3cd; color: #7a5b00; border-bottom: 1px dashed #c9a227; border-radius: 4px; padding: 0 4px; font-style: normal; } .section--dark .todo, .hero .todo, :root[data-theme="dark"] .todo { background: rgba(253,230,138,.18); color: #fde68a; border-bottom-color: rgba(253,230,138,.5); } /* "TBC" pill: data present but not yet confirmed. Remove it in data/site.js by deleting the tentative line. */ .tbc { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 7px; border-radius: 5px; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .09em; line-height: 1.5; color: #92610a; background: #fef3c7; border: 1px solid #fcd34d; cursor: help; } .hero .tbc, .section--dark .tbc, :root[data-theme="dark"] .tbc { color: #fcd34d; background: rgba(252,211,77,.14); border-color: rgba(252,211,77,.4); } /* ========================================================== RESPONSIVE == */ @media (max-width: 1040px) { .home-grid { grid-template-columns: 1fr; gap: 48px; } .dates-card { position: static; } .footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .nav__toggle { display: flex; } /* The menu is out of the flow: the theme switch pushes everything right. */ .nav__inner { gap: 12px; } .nav__theme { margin-left: auto; } .nav__menu { position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 18px 36px rgba(11,20,36,.14); padding: 10px 24px 22px; display: none; } .nav__menu.is-open { display: flex; } /* Text pages have a single link: it stays in the bar, no hamburger. */ .nav__menu--doc { display: flex; position: static; flex-direction: row; margin-left: auto; padding: 0; background: none; border: 0; box-shadow: none; } .nav__menu--doc > a { padding: 0; border-bottom: 0; } /* In the open menu, links are always dark, even over the hero */ .nav:not(.is-scrolled) .nav__menu > a { color: var(--ink-soft); } .nav__menu > a { padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; } .nav__menu > a::after { display: none; } .nav__cta { margin-top: 16px; text-align: center; justify-content: center; border-bottom: 0 !important; } .section { padding: 72px 0; } /* On narrow screens the strip rises less. Changing it here moves the "scroll" cue accordingly. */ :root { --hl-overlap: 34px; } .highlight { border-right: 0; border-bottom: 1px solid var(--line-soft); } .highlight:last-child { border-bottom: 0; } .footer__inner { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 560px) { body { font-size: 16px; } /* The badge would wrap: on phones only the edition is kept. */ .hero__badge-sep, .hero__badge-extra { display: none; } .hero__content { padding-top: calc(var(--nav-h) + 48px); padding-bottom: 90px; } .submit-box, .card, .dates-card { padding: 24px; } } /* Respect the preferences of users who turn animations off */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } } @media print { .nav, .hero__scroll, .hero__actions, .countdown, .footer__bottom, .hero__canvas { display: none !important; } .section, .section--alt, .section--dark { padding: 20px 0; background: #fff; color: #000; } .section--dark .section__title, .section--dark strong { color: #000; } .reveal { opacity: 1; transform: none; } body { font-size: 12pt; } } /* Legal links in the bottom row (privacy, accessibility). */ .footer__legal { display: flex; gap: 20px; flex-wrap: wrap; } .footer__legal a { color: #b8c7da; text-decoration: none; font-size: 13px; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; } .footer__legal a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.4); }