:root{ --navy:#06121c; --navy-2:#0a1f2e; --navy-3:#0f2c40; --gold:#d8b46a; --gold-soft:#e7cf9e; --cyan:#39c4de; --cyan-soft:#7fdcee; --paper:#faf7f2; --ink:#13222c; --muted:#5c6b74; --line:#e5ded2; --radius:5px; --font-display:'Sora',system-ui,sans-serif; --font-editorial:'Fraunces',Georgia,serif; --font-text:'Source Sans 3',system-ui,sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--font-text);color:var(--ink);background:var(--paper);font-size:19px;line-height:1.72;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{max-width:100%} .skip-link{position:fixed;top:10px;left:12px;z-index:1000;padding:10px 16px; border-radius:var(--radius);background:#fff;color:var(--navy);font-family:var(--font-display); font-size:14px;font-weight:700;transform:translateY(-160%);transition:transform .18s} .skip-link:focus{transform:translateY(0);outline:3px solid var(--gold);outline-offset:2px} .wrap{max-width:1200px;margin:0 auto;padding:0 28px} h2.sec{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;color:var(--navy)} .kicker{font-family:var(--font-display);font-size:13.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#86682c;margin-bottom:14px} /* Densité verticale : 90 px en haut et en bas donnaient 180 px de vide entre deux sections, ce qui se lit comme un trou (p. ex. entre « quantum networks. » et « Scientific Scope »). 72 px laissent 144 px, encore aérés ; 54 px sur mobile, où 180 px coûtaient un demi-écran. */ section{padding:64px 0} @media (max-width:760px){section{padding:48px 0}} /* Deux sections de même fond qui se suivent : sans rupture de couleur, le rythme complet se lit comme un trou et donne l'impression d'être arrivé en bas de page. On resserre la seconde. */ section:not(.alt-band) + section:not(.alt-band){padding-top:40px} section.alt-band + section.alt-band{padding-top:40px} @media (max-width:760px){ section:not(.alt-band) + section:not(.alt-band), section.alt-band + section.alt-band{padding-top:30px} } .reveal{opacity:0;transform:translateY(13px);transition:opacity .42s ease,transform .42s ease} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}} /* ---------- nav ---------- */ nav.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:34px; padding:0 34px;height:74px;transition:background .35s ease,box-shadow .35s ease} nav.top.scrolled{background:rgba(6,18,28,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(216,180,106,.25)} .brand{font-family:var(--font-display);font-weight:800;font-size:22px;color:#fff;letter-spacing:.02em} .brand span{color:var(--gold)} .navlinks{display:flex;gap:26px;margin-left:auto} .navlinks a{font-family:var(--font-display);font-size:15.5px;font-weight:600;letter-spacing:.05em;color:#eaf3f7;position:relative;padding:6px 0} .navlinks a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold);transition:width .3s ease} .navlinks a:hover::after{width:100%} .nav-cta{background:var(--gold);color:var(--navy);font-family:var(--font-display);font-weight:700;font-size:13.5px; letter-spacing:.05em;padding:11px 24px;border-radius:var(--radius);transition:background .25s ease} .nav-cta:hover{background:var(--gold-soft)} .nav-portal{font-size:13.5px;font-weight:600;color:#cfe0e8;border:1.5px solid rgba(207,224,232,.55);padding:9px 16px;border-radius:var(--radius);transition:border-color .25s,color .25s} .nav-portal:hover{border-color:var(--cyan);color:var(--cyan-soft)} .burger{display:none} /* The Portal button drops first at intermediate widths; the burger takes over when the remaining navigation no longer fits comfortably on one line. */ @media (max-width:1400px){.navlinks{gap:20px}} @media (min-width:1120px) and (max-width:1279px){.nav-portal{display:none}} @media (max-width:1119px){ .navlinks,.nav-portal{display:none} .burger{display:block;margin-left:auto;color:#fff;background:none;border:1px solid rgba(255,255,255,.35);border-radius:var(--radius);padding:8px 12px;font-size:18px;cursor:pointer} nav.top.open .navlinks{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:rgba(6,18,28,.97);padding:26px 34px 40px;gap:18px;max-height:calc(100svh - 74px);overflow-y:auto;overscroll-behavior:contain} } /* ---------- hero ---------- */ .hero{position:relative;min-height:max(520px,calc(100svh - 236px));display:flex;flex-direction:column;justify-content:center;align-items:center; text-align:center;background:radial-gradient(1400px 700px at 70% -8%, #123a52 0%, transparent 55%), linear-gradient(165deg,#081a28 0%,var(--navy) 55%,#04101a 100%);overflow:hidden;color:#fff;padding:92px 28px 48px} .hero-poster,.hero-visual{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; opacity:.72;pointer-events:none} .hero-poster img{display:block;width:100%;height:100%;object-fit:cover;object-position:center} .hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background:linear-gradient(90deg,rgba(4,16,26,.72) 0%,rgba(4,16,26,.42) 43%,rgba(4,16,26,.08) 72%,rgba(4,16,26,.2) 100%)} .hero-inner{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;text-align:left} @media (max-width:720px){ .hero-poster,.hero-visual{opacity:.58} .hero::after{background:linear-gradient(90deg,rgba(4,16,26,.82),rgba(4,16,26,.5) 72%,rgba(4,16,26,.32))} } @media (prefers-reduced-motion:reduce){.hero-visual{display:none}} .hero .edition{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--gold-soft);margin-bottom:26px} .hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(58px,10vw,124px);line-height:.95;letter-spacing:-.03em} .hero h1 .y{color:var(--gold)} .hero h1 .edition{display:block;line-height:1.5;letter-spacing:.34em;max-width:640px} .hero h1 .brand{display:block} .hero .where{font-family:var(--font-display);font-size:clamp(15px,1.8vw,19px);font-weight:600;letter-spacing:.12em;color:#fff;margin-top:18px} .hero .where em{font-style:normal;color:var(--cyan-soft)} .hero .count{display:inline-block;margin-top:16px;padding:9px 22px;border:1.5px solid rgba(216,180,106,.55); border-radius:999px;font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--gold-soft);background:rgba(216,180,106,.08)} .hero .count:empty{display:none} .hero-cta{display:flex;gap:16px;justify-content:flex-start;flex-wrap:wrap;margin-top:44px;max-width:760px} .btn{font-family:var(--font-display);font-weight:700;font-size:14.5px;letter-spacing:.05em;padding:15px 32px;border-radius:var(--radius);transition:transform .25s ease,background .25s ease,border-color .25s ease;display:inline-block} .btn:hover{transform:translateY(-2px)} .btn-gold{background:var(--gold);color:var(--navy)} .btn-gold:hover{background:var(--gold-soft)} .btn-line{border:1.5px solid rgba(255,255,255,.5);color:#fff} .btn-line:hover{border-color:var(--cyan);color:var(--cyan-soft)} .scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#6d8593;font-size:22px;animation:hint 2.6s ease infinite} @keyframes hint{0%,100%{transform:translate(-50%,0);opacity:.5}50%{transform:translate(-50%,8px);opacity:1}} /* ---------- credibility strip ---------- */ .cred{background:var(--navy-2);color:#fff;padding:34px 0;border-top:1px solid rgba(216,180,106,.28);border-bottom:1px solid rgba(216,180,106,.28)} .cred .wrap{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap} .cred .item{text-align:center;flex:1;min-width:150px} .cred .n{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3vw,38px);color:var(--gold)} .cred .l{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#a9bcc7;margin-top:4px} /* ---------- speakers ---------- */ #speakers{background:var(--paper)} .spk-head{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:40px} .spk-note{font-family:var(--font-editorial);font-style:italic;color:var(--muted);font-size:17px;max-width:460px} .spk-nav{display:flex;gap:10px;justify-content:flex-end;margin-bottom:16px} .spk-arrow{width:46px;height:46px;border-radius:50%;border:1.5px solid #c9bda5;background:#fff;color:var(--navy); font-size:19px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s} .spk-arrow:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-2px)} .spk-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 52px)/3);gap:26px;overflow-x:auto; padding:6px 4px 22px;scroll-snap-type:x mandatory;scrollbar-width:none} .spk-row::-webkit-scrollbar{display:none} @media (max-width:1000px){.spk-row{grid-auto-columns:min(340px,84vw)}} .spk{scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s ease,box-shadow .35s ease} .spk:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(6,18,28,.12)} .spk .ph{aspect-ratio:16/10;background:linear-gradient(140deg,var(--navy-2),var(--navy-3));position:relative;overflow:hidden} .spk .ph iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .spk .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:6px;flex:1} .spk .name{font-family:var(--font-editorial);font-weight:500;font-size:23px;color:var(--navy)} .spk .aff{font-size:14px;color:var(--muted);letter-spacing:.02em} .spk .lecture{font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--ink);margin-top:8px;line-height:1.4;flex:1} .spk .link{margin-top:14px;font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.08em;color:#7a6636} .spk .link:hover{color:var(--navy)} /* ---------- frontiers ---------- */ #frontiers{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff} #frontiers h2.sec{color:#fff} #frontiers .kicker{color:var(--gold)} .fr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px;margin-top:46px} .fr{position:relative;border-radius:var(--radius);overflow:hidden;min-height:220px;display:flex;align-items:flex-end; padding:26px;border:1px solid rgba(216,180,106,.2);transition:transform .35s ease,border-color .35s ease} .fr:hover{transform:translateY(-5px);border-color:rgba(216,180,106,.6)} .fr .bg{position:absolute;inset:0;opacity:.9;transition:transform 1.2s ease} .fr:hover .bg{transform:scale(1.06)} .fr .t{position:relative;z-index:2;font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.3;text-shadow:0 2px 14px rgba(0,0,0,.5)} .fr .t small{display:block;font-weight:400;font-size:13px;color:#cfe2ea;margin-top:5px;letter-spacing:.04em} /* 1 · metasurfaces: periodic resonator array under an oblique field glow */ .bg-1{background:linear-gradient(180deg, rgba(6,18,28,.18) 0%, rgba(6,18,28,0) 32%, rgba(6,18,28,.08) 58%, rgba(6,18,28,.72) 100%), url("data:image/svg+xml,") center/cover no-repeat, #0d2a3d} /* 2 · photonic crystals: dot lattice with a forbidden band */ .bg-2{background:linear-gradient(180deg, rgba(6,18,28,.18) 0%, rgba(6,18,28,0) 32%, rgba(6,18,28,.08) 58%, rgba(6,18,28,.72) 100%), url("data:image/svg+xml,") center/cover no-repeat, #0d2a3d} /* 3 · plasmonics: nanoantenna gap: twin hotspots, sharp falloff */ .bg-3{background:linear-gradient(180deg, rgba(6,18,28,.18) 0%, rgba(6,18,28,0) 32%, rgba(6,18,28,.08) 58%, rgba(6,18,28,.72) 100%), url("data:image/svg+xml,") center/cover no-repeat, #0d2a3d} /* 4 · quantum photonics: discrete states: level lines and occupied dots */ .bg-4{background:linear-gradient(180deg, rgba(6,18,28,.18) 0%, rgba(6,18,28,0) 32%, rgba(6,18,28,.08) 58%, rgba(6,18,28,.72) 100%), url("data:image/svg+xml,") center/cover no-repeat, #0d2a3d} /* 5 · light–matter: two crossed wavefronts, interference moiré */ .bg-5{background:linear-gradient(180deg, rgba(6,18,28,.18) 0%, rgba(6,18,28,0) 32%, rgba(6,18,28,.08) 58%, rgba(6,18,28,.72) 100%), url("data:image/svg+xml,") center/cover no-repeat, #0d2a3d} /* 6 · multiphysics: layered anisotropic strata meeting a field */ .bg-6{background:linear-gradient(180deg, rgba(6,18,28,.18) 0%, rgba(6,18,28,0) 32%, rgba(6,18,28,.08) 58%, rgba(6,18,28,.72) 100%), url("data:image/svg+xml,") center/cover no-repeat, #0d2a3d} /* ---------- key dates : timeline horizontale ---------- */ .tl{display:flex;gap:0;margin-top:58px;position:relative;flex-wrap:wrap} .tl::before{content:"";position:absolute;top:11px;left:9%;right:9%;height:2px; background:linear-gradient(90deg,#d9cfbc,var(--gold),#d9cfbc)} .tl .step{flex:1;min-width:150px;position:relative;padding:40px 12px 0;text-align:center} .tl .dot{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:20px;height:20px; border-radius:50%;background:var(--paper);border:3px solid var(--gold)} .tl .step.next .dot{background:var(--gold);box-shadow:0 0 0 7px rgba(216,180,106,.22)} .tl .st{font-family:var(--font-display);font-weight:700;font-size:15.5px;color:var(--navy);line-height:1.3} .tl .sd{font-size:14.5px;color:var(--muted);margin-top:5px;letter-spacing:.02em} .tl .step.next .sd{color:#86682c;font-weight:700} @media (max-width:820px){ .tl{flex-direction:column;gap:26px;padding-left:14px} .tl::before{left:22px;right:auto;top:8px;bottom:8px;width:2px;height:auto; background:linear-gradient(180deg,#d9cfbc,var(--gold),#d9cfbc)} .tl .step{padding:0 0 0 44px;text-align:left;min-width:0} .tl .dot{left:13px;top:2px;transform:none} } /* ---------- key dates (editorial until the full timeline is fixed) ---------- */ #dates{background:var(--paper)} .dates-lead{font-family:var(--font-editorial);font-size:clamp(22px,2.8vw,30px);font-weight:300;color:var(--navy);margin-top:30px} .dates-lead strong{font-weight:500;color:#86682c} .dates-sub{color:var(--muted);font-size:17.5px;margin-top:14px} /* ---------- experience ---------- */ #experience{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .exp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:44px;margin-top:50px} .exp .num{font-family:var(--font-editorial);font-size:52px;font-weight:300;color:var(--gold);line-height:1} .exp h3{font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--navy);margin:14px 0 10px} .exp p{color:var(--muted);font-size:16px} /* ---------- destination ---------- */ #destination{position:relative;color:#fff;overflow:hidden;padding:130px 0; background: linear-gradient(100deg, rgba(4,16,26,.96) 0%, rgba(5,20,31,.88) 38%, rgba(6,23,35,.72) 68%, rgba(8,28,42,.62) 100%), image-set(url(images/niagara.webp) type("image/webp"), url(images/niagara.jpg) type("image/jpeg")) center 40%/cover no-repeat, #0a2233} .falls{position:absolute;inset:0;overflow:hidden} .falls i{position:absolute;top:-10%;bottom:-10%;width:2px;background:linear-gradient(180deg,transparent,rgba(127,220,238,.28) 30%,rgba(127,220,238,.07));animation:fall linear infinite} @keyframes fall{from{transform:translateY(-18%)}to{transform:translateY(18%)}} .mist{position:absolute;left:0;right:0;bottom:-40px;height:280px;background:radial-gradient(60% 100% at 50% 100%,rgba(127,220,238,.18),transparent 70%);filter:blur(8px)} #destination .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center} @media (max-width:900px){#destination .wrap{grid-template-columns:1fr}} #destination h2{font-family:var(--font-editorial);font-weight:300;font-size:clamp(34px,4.6vw,58px);line-height:1.1} #destination h2 b{font-weight:500;color:var(--gold-soft)} #destination .lead{color:#b9cdd8;font-size:17.5px;margin-top:24px;max-width:520px} .dest-facts{display:grid;gap:20px} .df{border-left:2px solid var(--gold);padding:4px 0 4px 20px} .df .t{font-family:var(--font-display);font-weight:700;font-size:16.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-soft)} .df .d{color:#d3e2ea;font-size:17.5px;margin-top:5px;line-height:1.6} /* ---------- partners ---------- */ #partners{background:var(--paper)} .pt-lead{max-width:820px;color:var(--muted);font-size:18.5px;margin-top:22px} .pt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:22px;margin:42px 0 40px} .pt-org{margin-top:48px;display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;color:var(--muted); font-size:14.5px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-display);font-weight:600} .pt-org img{max-width:170px;height:auto;flex:0 0 auto} @media (max-width:760px){ /* libellé sur sa propre ligne, logos centrés en dessous */ .pt-org{display:block;text-align:center;line-height:1.6} .pt-org .so-label{display:block;margin-bottom:18px} .pt-org img{display:block;margin:14px auto !important;max-width:150px !important;width:auto;height:auto} } .pt{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;transition:transform .3s ease,box-shadow .3s ease} .pt:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(6,18,28,.08)} .pt h3{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--navy)} .pt p{color:var(--muted);font-size:14.5px;margin-top:8px} .pt .org-logo{margin-top:16px;max-width:200px} .pt-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center} .btn-navy{background:var(--navy);color:#fff} .btn-navy:hover{background:var(--navy-3)} .btn-ghost{border:1.5px solid #c9bda5;color:var(--navy)} .btn-ghost:hover{border-color:var(--gold);color:#9a8354} /* ---------- footer ---------- */ footer{background:var(--navy);color:#8fa5b2;padding:60px 0 40px;font-size:14.5px} footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px} @media (max-width:900px){footer .wrap{grid-template-columns:1fr 1fr}} footer .brand{font-size:19px} footer h3,footer h4{font-family:var(--font-display);color:#fff;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px} footer a{display:block;padding:4px 0;transition:color .2s} footer a:hover{color:var(--gold-soft)} footer .base{grid-column:1/-1;border-top:1px solid rgba(143,165,178,.2);margin-top:20px;padding-top:22px; display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px} /* ---------- sub-pages (shared) ---------- */ .sub-hero{position:relative;background:radial-gradient(1100px 500px at 75% -10%, #123a52 0%, transparent 55%),linear-gradient(160deg,#081a28 0%,var(--navy) 60%,#04101a 100%);color:#fff;padding:170px 0 62px;overflow:hidden} .sub-hero .kicker{color:var(--gold)} .sub-hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,5.6vw,64px);letter-spacing:-.02em;line-height:1.05} .sub-hero .lead{font-family:var(--font-editorial);font-weight:300;font-size:clamp(18px,2vw,23px);color:#cfe2ea;margin-top:18px;max-width:720px} .prose{max-width:820px} .prose p{margin-bottom:18px;color:#33454f} .prose h3{font-family:var(--font-display);font-size:24px;color:var(--navy);margin:44px 0 14px} /* min() so a 300px track can still shrink: below ~340px the fixed minimum was wider than the gutter left, which pushed the chair cards 8px past the right edge on a 320px phone. Nothing changes above that width. */ .two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:26px;margin-top:44px} .info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 32px} .info-card h3{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--navy);margin-bottom:10px} .info-card p, .info-card li{color:var(--muted);font-size:16.5px} .info-card ul{padding-left:20px;margin-top:8px} .step-list{counter-reset:st;display:grid;gap:0;margin-top:44px;max-width:820px} .step-item{position:relative;padding:26px 0 26px 92px;border-bottom:1px solid var(--line)} .step-item::before{counter-increment:st;content:"0" counter(st);position:absolute;left:0;top:22px;font-family:var(--font-editorial);font-size:42px;font-weight:300;color:var(--gold)} .step-item h3{font-family:var(--font-display);font-size:20px;color:var(--navy);margin-bottom:6px} .step-item p{color:var(--muted);font-size:16.5px} .cta-band{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-3) 100%);color:#fff;text-align:center;padding:66px 24px} @media (max-width:760px){.cta-band{padding:50px 20px}} .cta-band h2{font-family:var(--font-editorial);font-weight:300;font-size:clamp(26px,3.4vw,40px)} .cta-band .hero-cta{margin-top:30px} /* ---------- co-chairs ---------- */ .chair-card{text-align:center} .chair-card img{width:150px;height:150px;object-fit:cover;border-radius:50%;margin-bottom:16px;border:3px solid var(--gold)} .chair-card p{line-height:1.5} .chair-card .chair-role{margin:0 0 7px;color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} #leadership{background:#fff;border-top:1px solid var(--line)} /* ---------- featured NEW theme card ---------- */ .fr-wide{grid-column:1/-1;min-height:150px;align-items:center;display:flex} .fr-wide .t{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .fr-new{background:var(--gold);color:var(--navy);font-family:var(--font-display);font-weight:800;font-size:12px; letter-spacing:.18em;padding:6px 14px;border-radius:999px} .bg-7{background: repeating-linear-gradient(180deg, rgba(216,180,106,.20) 0 3px, transparent 3px 26px), radial-gradient(rgba(127,220,238,.4) 1.4px, transparent 1.6px), linear-gradient(180deg,#0d2a3d 0%,#123a52 100%); background-size:auto, 22px 22px, auto} /* ---------- programme themes ---------- */ .theme{border-left:3px solid var(--gold);padding:6px 0 6px 28px;margin-top:40px;max-width:860px;scroll-margin-top:100px} .theme h3{font-family:var(--font-display);font-size:23px;color:var(--navy);margin-bottom:8px} .theme p{color:#33454f;font-size:17px} .theme-new{border-left-color:var(--cyan)} .theme-new .fr-new{display:inline-block;margin-bottom:10px} /* ---------- audit pass (08/2026) ---------- */ .navlinks a.active{color:var(--gold) !important} .navlinks a.active::after{width:100%;background:var(--gold)} .themes-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 54px;counter-reset:th} @media (max-width:900px){.themes-grid{grid-template-columns:1fr}} .themes-grid .theme{border-left:none;padding-left:0;margin-top:36px;max-width:none} .themes-grid .theme::before{counter-increment:th;content:"0" counter(th);display:block; font-family:var(--font-editorial);font-weight:300;font-size:40px;color:var(--gold);opacity:.65;line-height:1;margin-bottom:8px} .grid-2x2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))} @media (min-width:900px){.grid-2x2{grid-template-columns:1fr 1fr}} /* motifs de hero, très discrets */ .sub-hero{position:relative} .sub-hero .wrap{position:relative;z-index:2} .sub-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05} .hero-programme::after{background:repeating-radial-gradient(circle at 78% 120%, transparent 0 34px, #7fdcee 34px 36px)} .hero-submit::after{background:repeating-linear-gradient(0deg, transparent 0 30px, #7fdcee 30px 31px), repeating-linear-gradient(90deg, transparent 0 30px, #7fdcee 30px 31px)} .hero-about::after{background:repeating-radial-gradient(circle at 15% -30%, transparent 0 48px, #d8b46a 48px 50px)} .hero-partners::after{background:radial-gradient(#7fdcee 1.6px, transparent 1.8px), repeating-linear-gradient(60deg, transparent 0 46px, #d8b46a 46px 47px);background-size:46px 46px, auto} /* ---------- architecture 10 pages (08/2026) ---------- */ .alt-band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .discipline-tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} .discipline-tags span{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--navy); border:1.5px solid #d9cfbc;border-radius:999px;padding:9px 20px} .history-line{display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center;margin-top:48px} @media (max-width:820px){.history-line{grid-template-columns:1fr;text-align:center}} .h-end{text-align:center} .h-year{font-family:var(--font-editorial);font-weight:300;font-size:46px;color:var(--gold);line-height:1} .h-city{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--navy);margin-top:6px} .h-note{font-size:13.5px;color:var(--muted);margin-top:3px} .h-mid{position:relative;text-align:center;font-family:var(--font-editorial);font-style:italic;font-size:17px;color:var(--muted);padding:22px 10px} .h-mid::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--gold),#d9cfbc,var(--gold))} .formats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:26px;margin-top:44px} .format{border-top:3px solid var(--gold);padding-top:18px} .format h3{font-family:var(--font-display);font-size:18px;color:var(--navy);margin-bottom:8px} .format p{color:var(--muted);font-size:15.5px} .rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:22px;margin-top:36px} .rule{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px} .rule h3{font-family:var(--font-display);font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#86682c;margin-bottom:8px} .rule p{color:var(--ink);font-size:15.5px} .footer-5{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr !important} @media (max-width:1000px){.footer-5{grid-template-columns:1fr 1fr !important}} /* Six columns since the Industry column was added. The brand block keeps a wider share; the five link columns split the rest evenly. Below 1180px the six would crush, so it steps to three and then to two. */ .footer-6{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1fr !important} @media (max-width:1180px){.footer-6{grid-template-columns:1fr 1fr 1fr !important}} @media (max-width:760px){ /* 1fr ne descend pas sous le min-content : l'adresse électronique et la ligne de bas de page, soudée par des espaces insécables, élargissaient les deux colonnes à 375 px pour 334 px disponibles. Le débordement n'était masqué que par overflow-x:hidden. */ .footer-6{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important} footer .wrap{gap:28px} footer a,footer .base{overflow-wrap:break-word} } .hero-speakers::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05; background:radial-gradient(#d8b46a 2px, transparent 2.4px);background-size:38px 38px} /* ---------- committees ---------- */ .member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:16px} .member-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px} .member-card .m-name, .member-line .m-name{font-family:var(--font-display);font-weight:700;font-size:15.5px;color:var(--navy)} .member-card .m-aff, .member-line .m-aff{font-size:13.5px;color:var(--muted);margin-top:3px} .member-cols{columns:3;column-gap:44px} @media (max-width:1000px){.member-cols{columns:2}} @media (max-width:640px){.member-cols{columns:1}} .member-line{break-inside:avoid;padding:6px 0;border-bottom:1px solid #efe9dd} .speakers{counter-reset:spk} .speakers .member-line{counter-increment:spk;display:grid;grid-template-columns:30px 1fr;column-gap:6px;align-items:baseline} .speakers .member-line::before{content:counter(spk) ".";grid-row:1/3;font-family:var(--font-display);font-weight:700;font-size:13px;color:#86682c;padding-top:2px} .speakers .member-line .m-name{grid-column:2} .speakers .member-line .m-aff{grid-column:2} .member-line .m-name{line-height:1.25} .member-line .m-aff{line-height:1.35;margin-top:1px} .committee-note{margin-top:26px;font-size:14px;font-style:italic;color:var(--muted)} /* ---------- FAQ ---------- */ .faq-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px} .faq-tab{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.04em; padding:11px 22px;border-radius:999px;border:1.5px solid #d9cfbc;background:transparent;color:var(--navy); cursor:pointer;transition:all .2s} .faq-tab:hover{border-color:var(--gold)} .faq-tab.active{background:var(--navy);border-color:var(--navy);color:#fff} .faq-panel{display:none} .faq-panel.active{display:block} .faq-panel details{background:#fff;border:1px solid var(--line);border-radius:var(--radius); margin-bottom:14px;overflow:hidden} .faq-panel summary{cursor:pointer;list-style:none;padding:20px 24px;font-family:var(--font-display); font-weight:600;font-size:17px;color:var(--navy);position:relative;padding-right:52px} .faq-panel summary::-webkit-details-marker{display:none} .faq-panel summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%); font-family:var(--font-editorial);font-size:26px;font-weight:300;color:var(--gold);transition:transform .25s} .faq-panel details[open] summary::after{transform:translateY(-50%) rotate(45deg)} .faq-panel details p{padding:0 24px 18px;color:#33454f;font-size:16px} .faq-panel details p:first-of-type{padding-top:2px} .faq-contact{margin-top:54px;text-align:center;background:#fff;border:1px solid var(--line); border-radius:var(--radius);padding:40px} .faq-contact h3{font-family:var(--font-display);font-size:21px;color:var(--navy);margin-bottom:8px} .faq-contact p{color:var(--muted)} /* ---------- visa page ---------- */ .visa-notice{background:#fdf9ef;border:1.5px solid #e2cf9e;border-left:5px solid var(--gold); border-radius:var(--radius);padding:20px 24px;margin:26px 0;color:#5a4a22;font-size:16px} .visa-important{background:#0d2a3d;color:#cfe2ea;border-radius:var(--radius);padding:28px 32px;margin-top:44px} .visa-important h3{color:#fff !important} .visa-important p{color:#cfe2ea !important;margin-bottom:12px} .resource-card{display:block;text-decoration:none;transition:transform .25s,box-shadow .25s} .resource-card:hover{transform:translateY(-4px);box-shadow:var(--m-shadow, 0 10px 30px rgba(6,18,28,.1))} .resource-card .rc-go{display:inline-block;margin-top:12px;font-family:var(--font-display); font-weight:700;font-size:13px;letter-spacing:.06em;color:#86682c} /* no horizontal overflow, ever */ html, body{max-width:100%;overflow-x:hidden} img{max-width:100%;height:auto} /* ---------- media kit ---------- */ .code-box{background:#0d2a3d;color:#cfe2ea;border-radius:var(--radius);padding:16px 20px;margin-top:12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.6; overflow-x:auto;white-space:pre-wrap;word-break:break-all;border-left:4px solid var(--gold)} .code-box.small{font-size:12px;padding:12px 16px} .banner-row{margin-top:22px;display:grid;gap:34px} .banner-pair{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start} @media (max-width:820px){.banner-pair{grid-template-columns:1fr}} .banner-item img{max-width:100%;height:auto;border-radius:4px;box-shadow:var(--m-shadow,0 8px 24px rgba(6,18,28,.12))} .banner-gallery{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px;align-items:start} .banner-card{display:flex;flex-direction:column;gap:18px;min-width:0;padding:24px;border:1px solid #e7e0d5;border-radius:12px;background:#fff;box-shadow:0 10px 30px rgba(6,18,28,.07)} .banner-card.banner-wide{grid-column:1/-1} .banner-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px} .banner-card-head h4{font-family:var(--font-display);font-size:18px;color:var(--navy)} .banner-card-head p{margin-top:4px;font-size:13px;color:var(--muted)} .banner-card>a{display:flex;justify-content:center;align-items:center;padding:22px;border-radius:8px;background:#f3f0e9} .banner-card.banner-wide>a{min-height:170px} .banner-card.banner-medium>a,.banner-card.banner-vertical>a{height:540px} .banner-card img{display:block;max-width:100%;width:auto;height:auto;border-radius:4px;box-shadow:0 8px 24px rgba(6,18,28,.15)} .banner-card.banner-medium img{max-height:470px} .banner-card.banner-vertical img{max-height:500px} .banner-download,.copy-code{flex:0 0 auto;border:0;border-radius:999px;background:var(--gold);color:var(--navy);font-family:var(--font-display);font-size:12px;font-weight:700;padding:9px 13px;cursor:pointer} .banner-download:hover,.copy-code:hover{background:var(--gold-soft)} .banner-code{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:8px;background:#0d2a3d} .banner-code code{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#cfe2ea;font-size:11px} @media (max-width:900px){ .banner-gallery{grid-template-columns:1fr} .banner-card.banner-wide{grid-column:auto} .banner-card{padding:18px} .banner-card-head{flex-direction:column} .banner-card>a,.banner-card.banner-wide>a,.banner-card.banner-medium>a,.banner-card.banner-vertical>a{height:auto;min-height:180px} .banner-card img{max-height:520px} .banner-code{grid-template-columns:1fr} .banner-code code{white-space:normal;overflow-wrap:anywhere} .copy-code{justify-self:start} } .info-card p.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.7; color:#33454f;background:#faf7f2;border-radius:6px;padding:14px 16px;margin-top:10px} /* ---------- Call for Papers ---------- */ .cfp-status{margin-top:20px;display:inline-block;padding:11px 24px;border:1.5px solid rgba(216,180,106,.55); border-radius:999px;font-family:var(--font-display);font-size:14.5px;color:var(--gold-soft); background:rgba(216,180,106,.08)} .cfp-status strong{color:#fff} .track{margin-top:44px;padding-left:26px;border-left:3px solid var(--gold)} .track h3{font-family:var(--font-display);font-weight:700;font-size:23px;color:var(--navy);margin-bottom:8px} .track .tnum{display:inline-block;background:var(--navy);color:#fff;font-size:12.5px;letter-spacing:.1em; text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-right:12px;vertical-align:middle} .track .tlead{color:var(--muted);font-size:16.5px;max-width:860px} .tlist{columns:2;column-gap:44px;margin-top:16px;padding-left:20px;color:#33454f;font-size:15.5px;line-height:1.9} .tlist li{break-inside:avoid} @media (max-width:820px){.tlist{columns:1}} .crit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:24px;margin-top:36px} .crit{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px} .crit h3{font-family:var(--font-display);font-size:17px;color:var(--navy);margin-bottom:8px} .crit p{color:var(--muted);font-size:15.5px} /* ============================================================================ Dropdown navigation: added with the 2027 information architecture. Same materials as the rest of the header: navy glass, gold accent, Sora. Desktop: hover / keyboard focus opens the panel; the parent stays a real link. Mobile (≤1080px): panels render inline inside the burger column, so nothing depends on hover. ========================================================================== */ .navlinks{align-items:center} /* bare links and dropdown parents sit on one baseline */ .nav-item{position:relative;display:flex;align-items:center;height:74px} .nav-item>a{display:flex;align-items:center;gap:6px} .nav-item>a .caret{font-size:9px;opacity:.55;transform:translateY(1px)} .nav-item>.sub{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:238px; background:rgba(6,18,28,.97);backdrop-filter:blur(10px); border:1px solid rgba(216,180,106,.28);border-top:2px solid var(--gold); border-radius:0 0 var(--radius) var(--radius); padding:10px 0;display:none;flex-direction:column; box-shadow:0 22px 48px rgba(0,0,0,.4)} .nav-item:hover .sub,.nav-item:focus-within .sub{display:flex} .nav-item>.sub a{font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:.04em; color:#eaf3f7;padding:9px 24px;white-space:nowrap} .nav-item>.sub a::after{display:none} .nav-item>.sub a:hover{color:var(--gold-soft);background:rgba(216,180,106,.08)} /* anchors must clear the fixed 74px header */ [id]{scroll-margin-top:96px} /* Same threshold as the burger above. When these two drifted apart, the drawer opened between 1081px and 1119px while the submenus kept their desktop hover-only rules: the About items, Partners among them, were unreachable on a touch screen in that band. */ @media (max-width:1119px){ .nav-item{height:auto;flex-direction:column;align-items:flex-start} .nav-item>.sub{position:static;transform:none;display:flex;min-width:0;background:none; border:none;box-shadow:none;padding:6px 0 8px 18px;gap:2px} .nav-item>.sub a{padding:6px 0;font-size:14px;color:#b9cdd8} .nav-item>a .caret{display:none} } /* ============================================================================ Components added with the four 2027 pages (dates, symposia, tutorials, accommodation): same materials as the rest of the site. ========================================================================== */ /* A quiet "to be announced" panel: says the state of things without dressing an empty page up as a full one. */ .tba-panel{max-width:860px;margin-top:26px;padding:28px 32px;background:#fff; border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius); font-size:16.5px;color:#33454f} /* The warning card: the one card on the site allowed to raise its voice. */ .info-card.warn{border-left:3px solid #c25b1e;max-width:860px} .info-card.warn h3{color:#8a3c0f} /* Symposium jump list: one row per symposium, gold numeral, whole row clickable. */ .sym-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:14px;margin-top:40px} .sym-jump{display:flex;align-items:center;gap:16px;padding:16px 20px;background:#fff; border:1px solid var(--line);border-radius:var(--radius); font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--navy); transition:transform .25s,box-shadow .25s} .sym-jump:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(6,18,28,.1)} .sym-no{font-family:var(--font-editorial);font-size:22px;color:var(--gold);min-width:34px} .sym-chairs{list-style:none;padding:0;display:grid;gap:12px;font-size:15.5px} /* The longer "Registration" label pushed the burger off-screen on narrow phones; below 560px the button folds away: the same destination stays one tap away under Attend ▸ Registration. */ @media (max-width:560px){.nav-cta{display:none}} /* ============================================================================ symposia.html only: chair cards, topic chips, quiet TBA line. Page-scoped class names on purpose: nothing here reaches another page. ========================================================================== */ .sym-sub{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--gold);margin-top:44px} .sym-desc{max-width:860px;margin-top:18px;font-size:16.5px;line-height:1.75;color:#33454f} .sym-chair-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:16px;margin-top:20px} .sym-chair-card{display:flex;align-items:center;gap:16px;padding:14px 18px;background:#fff; border:1px solid var(--line);border-radius:var(--radius)} .alt-band .sym-chair-card{background:var(--paper)} .sym-chair-photo{width:76px;height:76px;border-radius:50%;object-fit:cover;flex-shrink:0; border:2px solid var(--gold-soft)} .sym-chair-id{display:flex;flex-direction:column;gap:3px;min-width:0} .sym-chair-id strong{font-family:var(--font-display);font-size:15.5px;color:var(--navy);line-height:1.25} .sym-chair-id span{font-size:13.5px;color:var(--muted);line-height:1.4} .chip-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;max-width:960px} .chip{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.02em; color:var(--navy-3);background:rgba(57,196,222,.09);border:1px solid rgba(57,196,222,.32); border-radius:999px;padding:7px 15px;line-height:1.35} .alt-band .chip{background:rgba(216,180,106,.1);border-color:rgba(216,180,106,.4)} .tba-line{margin-top:14px;font-size:15.5px;color:var(--muted);font-style:italic} .back-top{margin-top:34px;font-size:13.5px} .back-top a{color:var(--muted);letter-spacing:.06em;text-transform:uppercase; font-family:var(--font-display);font-weight:600} .back-top a:hover{color:var(--gold)} @media (max-width:480px){ .sym-chair-grid{grid-template-columns:1fr} .sym-chair-photo{width:60px;height:60px} } /* hub entry that is a status, not a destination: same card, no pointer, no lift */ .sym-jump.is-static{cursor:default;opacity:.75} .sym-jump.is-static:hover{transform:none;box-shadow:none} /* ============================================================================ CTA STATE: pre-open until 1 September 2026. Both variants exist in the markup; this block decides which one shows. THE SWITCH (opening day): run ops/META27-site/switch_cta.py open && deploy: it flips the hidden class below and bumps the stylesheet version everywhere. ========================================================================== */ .cta-preopen{display:none !important} .cta-note{display:block;width:100%;margin-top:6px;font-family:var(--font-display); font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8fa8b5} /* ============================================================================ Mobile menu fixes: from a real iPhone screenshot (15 Aug). 1. The open column inherited align-items:center from the desktop bar, so groups of different widths staggered into a staircase. Left-align all. 2. rgba(6,18,28,.97) let the hero bleed through on OLED: the panel is now fully opaque. 3. The menu can be taller than the screen: it scrolls inside itself instead of relying on the page behind it. ========================================================================== */ /* 1119px, like the burger and the submenus above: all three govern the same drawer. */ @media (max-width:1119px){ nav.top.open .navlinks{ /* nav. matches the original rule's specificity */ background:#06121c; align-items:flex-start; max-height:calc(100vh - 74px); overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:44px; box-shadow:0 30px 60px rgba(0,0,0,.5)} nav.top.open{background:#06121c} } /* Proceedings : la couverture de chaque édition à côté de son résumé. Une pile verticale sous 560px, sinon la vignette écrase le texte sur un téléphone. */ .proc-card{display:flex;gap:22px;align-items:flex-start} .proc-card .cover{flex:0 0 112px;display:block;line-height:0} .proc-card .cover img{width:112px;height:auto;border:1px solid var(--line);border-radius:6px; box-shadow:0 8px 22px rgba(12,26,36,.16);transition:transform .25s ease,box-shadow .25s ease} .proc-card .cover:hover img{transform:translateY(-3px);box-shadow:0 12px 28px rgba(12,26,36,.22)} .proc-card .txt{flex:1;min-width:0} @media(max-width:560px){ .proc-card{flex-direction:column;gap:16px} .proc-card .cover{flex-basis:auto} .proc-card .cover img{width:132px} } /* ============================================================================ UX phase 1 (Aug 2026): submission journey, audience orientation, archive labelling, verification notices, deep-link copy buttons. ========================================================================== */ /* Portal.html: Create account → Prepare manuscript → Submit and track. */ .journey-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:26px} .journey-step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px} .js-num{font-family:var(--font-editorial);font-size:34px;font-weight:300;color:var(--gold);line-height:1;margin-bottom:10px} .journey-step h3{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--navy);margin-bottom:8px} .journey-step p{color:var(--muted);font-size:15px} /* Home page: who are you: Authors / Participants / Partners. */ .audience-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:22px;margin-top:40px} .audience-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px; transition:transform .3s ease,box-shadow .3s ease} .audience-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(6,18,28,.08)} .audience-card h3{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--navy)} .audience-card p{color:var(--muted);font-size:14.5px;margin-top:8px;min-height:58px} .audience-card .link{display:inline-block;margin-top:14px;font-family:var(--font-display); font-size:13px;font-weight:700;letter-spacing:.08em;color:#7a6636} .audience-card .link:hover{color:var(--navy)} /* META 2026 archive labelling: a small, consistent tag rather than a caption buried in an iframe title attribute nobody reads. */ .badge-archive{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display); font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b5217; background:rgba(216,180,106,.14);border:1px solid rgba(216,180,106,.5);border-radius:999px; padding:4px 11px;margin-bottom:8px} p.kicker.badge-archive-kicker{display:inline-flex;align-items:center;gap:8px} /* Visa page: last-verified date line, ahead of the official-source warning card. */ .verify-date{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.06em; color:var(--muted)} /* Copy-to-clipboard buttons next to deep links (dates, anchors, registration). Same footprint as .btn-line so the two sit flush in a button row; state feedback via [data-copied]. */ .copy-btn{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.04em; padding:9px 16px;border-radius:var(--radius);border:1.5px solid #c9bda5;color:var(--navy); background:#fff;cursor:pointer;transition:border-color .2s,color .2s} .copy-btn:hover{border-color:var(--gold);color:#9a8354} .copy-btn[data-copied="1"]{border-color:#3f8f5f;color:#3f8f5f} /* ---------- mobile typography ---------- */ @media (max-width:380px){ .hero h1{font-size:46px} } @media (max-width:400px){ /* Registration's CTA label plus the gold border made the pill wrap its icon-like padding oddly on the narrowest phones; drop the horizontal padding a touch so text stays centred. */ .hero .count{padding:9px 16px;font-size:12.5px} } /* ============================================================================ NOTIFY: the "tell me when it opens" form (speakers, registration). Before 1 September most visitors are not ready to create an OJS account, and the mailto: it replaced only worked for people with a configured mail client. ========================================================================== */ .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .notify input[name="website"]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .notify{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center} .notify input[type="email"]{ flex:1 1 300px;max-width:360px;padding:14px 18px;font:inherit;font-size:16px; color:var(--navy,#0d1b2a);background:#fff;border:1px solid #cfd6dd;border-radius:999px; transition:border-color .18s,box-shadow .18s} .notify input[type="email"]::placeholder{color:#93a0ab} .notify input[type="email"]:focus{outline:none;border-color:var(--gold,#d8b46a); box-shadow:0 0 0 4px rgba(216,180,106,.22)} .notify .btn{flex:0 0 auto} .notify-note{flex:1 1 100%;margin:4px 0 0;font-size:14px;line-height:1.6;color:#5c6b74} @media (max-width:560px){ /* En colonne, flex-basis porte sur la HAUTEUR : le 300px du mode ligne donnait un champ e-mail haut de 300 px. La base doit repasser à auto quand l'axe principal bascule. */ .notify{flex-direction:column} .notify input[type="email"],.notify .btn{width:100%;max-width:none;flex:0 0 auto} .notify-note{flex:0 0 auto} .notify .btn{text-align:center} } /* ============================================================================ INLINE LINKS IN PROSE The base rule is a{color:inherit;text-decoration:none}, which is right for the nav, buttons and cards that are themselves links: and wrong for a link sitting inside a sentence, where it left the link indistinguishable from the text around it. Scoped to prose containers only, so nothing else is touched. ========================================================================== */ .journey-step p a:not(.btn), .info-card p a:not(.btn), .prose a:not(.btn), .lead a:not(.btn), .notify-note a:not(.btn), .dates-lead a:not(.btn){ color:#86682c;text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:3px;text-decoration-color:rgba(134,104,44,.45); transition:text-decoration-color .18s,color .18s} .journey-step p a:not(.btn):hover, .info-card p a:not(.btn):hover, .prose a:not(.btn):hover, .lead a:not(.btn):hover, .notify-note a:not(.btn):hover, .dates-lead a:not(.btn):hover{ color:#6d5223;text-decoration-color:#86682c} /* The file-format hint inside a download button. Inline, not block: as a block it added 21px to the button and left it standing taller than the two beside it in the same row. */ .btn-meta{margin-left:9px;font-size:12.5px;font-weight:400;letter-spacing:.02em;opacity:.7; white-space:nowrap} /* ---------- sponsorship tiers (sponsors.html) ---------- Three cards read across, cheapest first: a company sizes itself up from the entry package rather than down from the most expensive one. Platinum carries .featured, which is the only difference between the cards: same structure, same padding, so the row stays even. */ .tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr));gap:24px; margin-top:42px;align-items:stretch} .tier{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; display:flex;flex-direction:column} .tier.featured{border-color:rgba(216,180,106,.65);box-shadow:0 3px 20px rgba(6,18,28,.09)} .tier-head{background:var(--navy-2);color:#fff;padding:26px 30px 24px} .tier.featured .tier-head{background:var(--navy)} .tier-name{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--gold)} .tier-price{font-family:var(--font-display);font-size:34px;font-weight:700;line-height:1.15; margin-top:4px} .tier-sub{font-size:14.5px;color:#b9c6ce;margin-top:2px} .tier ul{list-style:none;padding:24px 30px 30px;flex:1} .tier li{position:relative;padding-left:19px;margin-bottom:10px;font-size:16px;line-height:1.5} .tier li:last-child{margin-bottom:0} .tier li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:2px; background:var(--gold)} /* ---------- add-on price table ---------- */ .addon-table{width:100%;border-collapse:collapse;margin-top:34px} .addon-table th{text-align:left;font-family:var(--font-display);font-size:12.5px; letter-spacing:.1em;text-transform:uppercase;color:#86682c;font-weight:600; padding:0 0 10px;border-bottom:2px solid var(--gold)} .addon-table td{padding:13px 0;border-bottom:1px solid var(--line);font-size:16.5px} .addon-table th:last-child,.addon-table td:last-child{text-align:right;padding-left:20px} .addon-table td:last-child{font-family:var(--font-display);font-weight:600;white-space:nowrap} .addon-note{margin-top:20px;color:var(--muted);font-size:16px} /* Definition pairs: used for the two pass types. */ .def-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:26px; margin-top:36px} .def h3{font-family:var(--font-display);font-size:18px;color:var(--navy);margin-bottom:6px} .def p{color:var(--muted)} .def-note{margin-top:26px;padding:16px 20px;border-left:4px solid var(--gold);background:#fbf5e8; color:#322816;font-size:16.5px} /* ---------- venue photography (attend.html) ---------- */ .venue-lead{max-width:850px;margin-top:24px} .venue-gallery{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:repeat(2,minmax(210px,1fr)); gap:18px;margin-top:38px} .venue-photo{position:relative;min-height:210px;overflow:hidden;border-radius:var(--radius);background:#dfe8ed} .venue-photo-wide{grid-row:1 / span 2;min-height:520px} .venue-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .venue-photo:hover img{transform:scale(1.015)} .venue-photo figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between; gap:14px;padding:28px 18px 13px;color:#fff;font-size:14px;font-weight:600; background:linear-gradient(transparent,rgba(3,14,23,.82))} .venue-photo figcaption span{font-size:12px;font-weight:400;text-align:right} .venue-photo figcaption a{text-decoration:underline;text-underline-offset:2px} .venue-panorama{position:relative;margin:30px 0 20px;overflow:hidden;border-radius:var(--radius);background:#dfe8ed;aspect-ratio:1920/650} .venue-panorama img{width:100%;height:100%;object-fit:cover;display:block} .venue-panorama figcaption{position:absolute;left:0;right:0;bottom:0;padding:38px 18px 14px;color:#fff;font-size:13px;font-weight:600;letter-spacing:.01em;background:linear-gradient(transparent,rgba(4,16,26,.78))} .venue-source{margin-top:14px;color:var(--muted);font-size:13.5px;line-height:1.55} .venue-source a{color:#6d5223;text-decoration:underline;text-underline-offset:2px} @media (max-width:760px){ .venue-panorama{aspect-ratio:4/3;margin-top:24px} .venue-panorama img{object-position:48% center} .venue-gallery{grid-template-columns:1fr;grid-template-rows:none} .venue-photo,.venue-photo-wide{grid-row:auto;min-height:0;aspect-ratio:16/10} .venue-photo figcaption{padding-top:36px} } /* ---------- photos d'archive META (réutilise .venue-photo) ---------- Une seule règle nouvelle par disposition. Le crédit de la légende porte l'édition : « META 2026, Dublin »: parce que ces photos ne sont pas de Niagara Falls et que la page ne doit pas laisser croire le contraire. */ .chart-figure{margin:32px 0 0;padding:18px 18px 12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)} .chart-figure img{display:block;width:100%;height:auto} .chart-figure figcaption{margin-top:12px;font-size:14px;color:var(--muted);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} .chart-figure figcaption strong{color:var(--ink);font-weight:600} .photo-single{margin-top:34px} /* le ratio doit porter sur la figure elle-même : c'est elle qui a overflow:hidden et dont l'image est en object-fit:cover, donc c'est elle qui recadre proprement. */ .photo-single .venue-photo{aspect-ratio:16/9;min-height:0} .photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px} .photo-pair .venue-photo{aspect-ratio:3/2;min-height:0} @media (max-width:760px){.photo-pair{grid-template-columns:1fr}} /* Cinq formats de présentation : en auto-fit la grille tombe à quatre colonnes vers 1144 px et laisse la cinquième carte seule sur sa rangée. On veut 3 + 2 avec la seconde rangée réellement centrée : six colonnes, chaque carte en couvre deux, et les deux dernières démarrent en colonne 2 et 4: ce qui laisse une demi-carte de marge de chaque côté. Modificateur volontairement opt-in : submit.html et workshop.html gardent l'auto-fit. */ @media (min-width:1000px){ .formats-grid.cols-3{grid-template-columns:repeat(6,1fr)} .formats-grid.cols-3>*{grid-column:span 2} .formats-grid.cols-3>*:nth-child(4){grid-column:2 / span 2} .formats-grid.cols-3>*:nth-child(5){grid-column:4 / span 2} } /* Encadré « Oral presentation requests » (programme.html) : variante d'.info-card teintée, pour se détacher de la bande blanche .alt-band sans prendre un aspect d'avertissement. */ .oral-request-note{margin:34px auto 0;max-width:860px;background:var(--paper)} /* Auditorium d'ouverture (home.html) : la photo prouve l'affluence mais ne doit pas dominer la page. Hauteur bornée sur desktop, cadrage descendu sur les rangées de public ; sur mobile on rend le ratio natif 3/2, rien n'est coupé. */ .photo-single.photo-contained .venue-photo{aspect-ratio:auto;height:420px} .photo-single.photo-contained .venue-photo img{object-position:50% 62%} @media (max-width:760px){.photo-single.photo-contained .venue-photo{height:auto;aspect-ratio:3/2}} /* Navigation interne de submit.html, la page la plus longue du site. */ .page-nav-band{border-bottom:1px solid var(--line);background:var(--paper)} .page-nav{display:flex;flex-wrap:wrap;gap:10px;padding:18px 0} .page-nav a{display:inline-block;padding:7px 15px;border:1px solid var(--line);border-radius:999px; background:#fff;color:var(--navy);font-family:var(--font-display);font-size:14px;font-weight:600; text-decoration:none;transition:border-color .2s ease,background .2s ease} .page-nav a:hover{border-color:var(--gold);background:var(--paper)} .page-nav a:focus-visible{outline:2px solid var(--gold);outline-offset:2px} @media (max-width:600px){.page-nav{gap:8px;padding:14px 0}.page-nav a{font-size:13px;padding:6px 13px}} /* ---------- diaporama photo (sponsors.html, submit.html) ---------- */ /* Les vues sont empilées en absolu dans une piste au ratio 16/9, comme les autres photos pleine largeur du site (.photo-single) : la hauteur ne bouge pas d'une vue à l'autre et le bloc ne dévore pas la page. La première vue porte is-active dans le HTML, de sorte que sans JavaScript on voit encore une photo. */ .slideshow{margin-top:34px} .ss-track{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#dfe8ed} /* aspect-ratio:auto est indispensable : sous 760 px, .venue-photo passe en 16/10 et la vue devenait plus haute que la piste 16/9, ce qui rognait la légende. La hauteur doit venir de la piste, pas du ratio hérité. */ .ss-slide{position:absolute;inset:0;height:100%;aspect-ratio:auto;min-height:0;border-radius:0; opacity:0;pointer-events:none;transition:opacity .5s ease} .ss-slide.is-active{opacity:1;pointer-events:auto} .ss-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px} .ss-btn{width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff; color:var(--navy);font-family:var(--font-display);font-size:15px;line-height:1;cursor:pointer; display:grid;place-items:center;transition:border-color .2s ease,background .2s ease} .ss-btn:hover{border-color:var(--gold);background:var(--paper)} .ss-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .ss-dots{display:flex;gap:8px} .ss-dot{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid #c3b490;background:transparent; cursor:pointer} .ss-dot[aria-current="true"]{background:var(--gold);border-color:var(--gold)} .ss-dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .ss-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (prefers-reduced-motion: reduce){.ss-slide{transition:none}} /* ---------- grille des lauréats (awards.html) ---------- */ /* Cinq photos : au-dessus de 1000 px, 3 + 2 avec la seconde rangée réellement centrée, selon le même procédé que .formats-grid.cols-3. */ .photo-trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:18px;margin-top:34px} .photo-trio .venue-photo{aspect-ratio:3/2;min-height:0} /* Cadres étroits : la légende sur deux colonnes se percutait, on l'empile. */ .photo-trio figcaption{flex-direction:column;align-items:flex-start;gap:2px;padding-top:34px} .photo-trio figcaption span{text-align:left} @media (min-width:1000px){ .photo-trio{grid-template-columns:repeat(6,1fr)} .photo-trio>*{grid-column:span 2} .photo-trio>*:nth-child(4){grid-column:2 / span 2} .photo-trio>*:nth-child(5){grid-column:4 / span 2} } /* ---------- APL Quantum, annonce du lauréat (awards.html) ---------- */ /* Visuel fourni par l'éditeur au format 1200x628 : il porte du texte, donc il est affiché entier: jamais recadré en 3/2 comme les photographies. */ .apq-winner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:30px; align-items:center;margin-top:38px} .apq-winner img{width:100%;height:auto;display:block;border-radius:var(--radius);border:1px solid var(--line)} .apq-winner h3{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--navy);margin-bottom:10px} .apq-winner p{color:var(--muted);font-size:16.5px} .apq-winner a{color:#86682c;font-weight:600} @media (max-width:760px){.apq-winner{grid-template-columns:1fr;gap:20px}} /* =========================================================================== SITE-WIDE TYPOGRAPHIC SYSTEM Adopted on the home page 20 September 2026 (v60) and extended here to the whole site, 20 September 2026 (v61). The division of labour, which is the whole point of the block: Sora identity and figures, and nothing else: the wordmark, large numbers, counters, and the few very short badges where a geometric face still earns its place. Source Sans 3 everything functional: navigation, H1/H2/H3, running text, buttons, forms, tables, cards, captions. Fraunces two editorial moments on the whole site: the destination headline on the home page, and the italic aside under the speakers. Never a name, never an interface, never a card. What is removed everywhere: Sora at 700/800 used as a general heading weight, uppercase runs tracked above 0.10em, and body line-height inherited by headings. Only font-family, font-size, font-weight, letter-spacing, line-height and text-transform are set below, plus the home page's own scope list and photograph. No colour is declared except on those two home components, which are new elements rather than recoloured ones. Rules that apply to one page only are prefixed `body.home`; everything else is site-wide by design. =========================================================================== */ /* --- navigation, buttons, and the skip link ------------------------------- */ .navlinks a{font-family:var(--font-text);font-size:16px;font-weight:600;letter-spacing:0} .nav-item>.sub a{font-family:var(--font-text);font-size:15px;font-weight:400;letter-spacing:0} .nav-cta{font-family:var(--font-text);font-weight:600;font-size:14.5px;letter-spacing:.01em} .btn{font-family:var(--font-text);font-weight:600;font-size:16px;letter-spacing:.01em} .skip-link{font-family:var(--font-text);font-weight:600} .cta-note{font-family:var(--font-text);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none} .page-nav a,.back-top a,.sym-jump,.ss-btn,.faq-tab{font-family:var(--font-text);font-weight:600;letter-spacing:.01em} .back-top a{text-transform:none} /* Every heading is a text-face heading. Stated once as a floor so that no page-specific rule elsewhere in this long stylesheet can quietly put a geometric display face back on an H1, H2 or H3; the rules below refine size and weight, not family. The home page's wordmark is a span inside its H1 and keeps Sora through its own rule. */ h1,h2,h3,h4,h5,h6{font-family:var(--font-text)} /* --- headings ------------------------------------------------------------- h2.sec inherited the body's 1.72 line-height, which is why long titles floated apart on every page. The sub-hero H1 of the inner pages was Sora 800; at 64px that is a product headline, not a page title. */ h2.sec{font-family:var(--font-text);font-weight:600;font-size:clamp(27px,3.3vw,40px); letter-spacing:-.005em;line-height:1.18} .sub-hero h1{font-family:var(--font-text);font-weight:600;font-size:clamp(32px,4.4vw,52px); letter-spacing:-.01em;line-height:1.14} .sub-hero .lead{font-family:var(--font-text);font-weight:400;font-size:clamp(17px,1.8vw,20px); line-height:1.55} .kicker{font-family:var(--font-text);font-size:13px;font-weight:600;letter-spacing:.1em} .prose h3{font-family:var(--font-text);font-weight:600;font-size:22px;line-height:1.25} /* --- cards, panels, lists, timelines, tables, forms, FAQ ------------------ Forty small headings across the site, all in Sora 600/700. As text faces they read at their actual size instead of shouting at it; the hierarchy between them is carried by size and weight, which is what those properties are for. */ .spk .name{font-family:var(--font-text);font-weight:600;font-size:22px;letter-spacing:0;line-height:1.25} .spk .lecture{font-family:var(--font-text);font-size:15.5px;font-weight:400;line-height:1.45} .spk .link{font-family:var(--font-text);font-size:14px;font-weight:600;letter-spacing:.01em} .tl .st{font-family:var(--font-text);font-weight:600;font-size:16px;line-height:1.3} .df .t{font-family:var(--font-text);font-weight:600;font-size:15px;letter-spacing:.08em} .pt h3{font-family:var(--font-text);font-size:17.5px;font-weight:600;line-height:1.3} .pt-org{font-family:var(--font-text);font-size:14px;font-weight:600;letter-spacing:.08em} .info-card h3{font-family:var(--font-text);font-size:20px;font-weight:600;letter-spacing:0;line-height:1.25} .audience-card h3{font-family:var(--font-text);font-size:17.5px;font-weight:600;line-height:1.3} .audience-card .link{font-family:var(--font-text);font-size:14px;font-weight:600;letter-spacing:.01em} .journey-step h3{font-family:var(--font-text);font-size:18.5px;font-weight:600;line-height:1.3} .exp h3{font-family:var(--font-text);font-weight:600;font-size:21px;line-height:1.25} .exp .num{font-family:var(--font-display);font-weight:700;font-size:40px;letter-spacing:-.02em} .fr .t{font-family:var(--font-text);font-weight:600;font-size:19.5px;line-height:1.28} .fr .t small{font-family:var(--font-text);font-weight:400;font-size:13.5px;letter-spacing:.01em} .step-item h3{font-family:var(--font-text);font-weight:600;font-size:19px;line-height:1.3} .theme h3{font-family:var(--font-text);font-weight:600;font-size:21px;line-height:1.25} .format h3{font-family:var(--font-text);font-weight:600;font-size:18px;line-height:1.3} .def h3{font-family:var(--font-text);font-weight:600;font-size:18px;line-height:1.3} .crit h3{font-family:var(--font-text);font-weight:600;font-size:17px;line-height:1.3} .track h3{font-family:var(--font-text);font-weight:600;font-size:22px;line-height:1.25} .faq-contact h3{font-family:var(--font-text);font-weight:600;font-size:21px;line-height:1.25} .banner-card-head h4{font-family:var(--font-text);font-weight:600;font-size:18px;line-height:1.3} .apq-winner h3{font-family:var(--font-text);font-weight:600;font-size:19px;line-height:1.25} .faq-panel summary{font-family:var(--font-text);font-weight:600;font-size:17px;line-height:1.35} .member-card .m-name,.member-line .m-name{font-family:var(--font-text);font-weight:600;font-size:16px} .sym-chair-id strong{font-family:var(--font-text);font-weight:600;font-size:15.5px} .resource-card .rc-go{font-family:var(--font-text);font-weight:600;font-size:14px;letter-spacing:.01em} .cfp-status{font-family:var(--font-text);font-weight:600;font-size:15px} .h-city{font-family:var(--font-text);font-weight:600;font-size:19px;line-height:1.3} .copy-btn,.banner-download,.copy-code{font-family:var(--font-text);font-weight:600;letter-spacing:.01em} .addon-table th{font-family:var(--font-text);font-weight:600;letter-spacing:.06em} .addon-table td:last-child{font-family:var(--font-text);font-weight:600} .fee-scroll{overflow-x:auto;margin-top:34px;border:1px solid var(--line);border-radius:var(--radius);background:#fff} .fee-table{margin-top:0;min-width:720px} .fee-table th,.fee-table td{padding:15px 18px;text-align:right} .fee-table th:first-child,.fee-table td:first-child{text-align:left} .fee-table th span{font-weight:400;text-transform:none;letter-spacing:0} @media (max-width:760px){ .fee-scroll{overflow:visible;border:0;background:transparent} .fee-table{display:block;min-width:0} .fee-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .fee-table tbody,.fee-table tr,.fee-table td{display:block;width:100%} .fee-table tbody{display:grid;gap:16px} .fee-table tr{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff} .fee-table td{display:flex;justify-content:space-between;gap:20px;padding:12px 16px;text-align:right;border-bottom:1px solid var(--line)} .fee-table td:first-child{display:block;padding:16px;font-size:18px;font-weight:600;color:var(--navy);background:var(--paper)} .fee-table td:last-child{border-bottom:0} .fee-table td[data-label]::before{content:attr(data-label);text-align:left;font-weight:400;color:var(--muted)} } .tier-name{font-family:var(--font-text);font-weight:600;letter-spacing:.08em} .chip,.discipline-tags span{font-family:var(--font-text);font-weight:600;letter-spacing:.01em} .rule h3{font-family:var(--font-text);font-weight:600;letter-spacing:.04em} footer h3,footer h4{font-family:var(--font-text);font-size:13px;font-weight:600;letter-spacing:.08em} /* --- figures and counters keep Sora -------------------------------------- These are the places a geometric face says something: a number read at a glance. Several of them were set in Fraunces at weight 300, which reads as a magazine masthead rather than as a figure. */ .tier-price{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em} .h-year{font-family:var(--font-display);font-weight:700;font-size:40px;letter-spacing:-.02em} .js-num{font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:-.02em} .sym-no{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.01em} .step-item::before{font-family:var(--font-display);font-weight:700;font-size:34px;letter-spacing:-.02em} .themes-grid .theme::before{font-family:var(--font-display);font-weight:700;font-size:32px;letter-spacing:-.02em} .faq-panel summary::after{font-family:var(--font-text);font-weight:400} .speakers .member-line::before{font-family:var(--font-text);font-weight:600;font-size:13px} .badge-archive{letter-spacing:.06em} .fr-new{letter-spacing:.1em} /* --- Fraunces, in two places on the whole site ---------------------------- The destination headline on the home page, and the italic aside under the speakers. `.h-mid` and `.cta-band h2` used it as a general editorial voice, which is precisely the overuse this system removes. */ .cta-band h2{font-family:var(--font-text);font-weight:600;letter-spacing:-.005em;line-height:1.2} .h-mid{font-family:var(--font-text);font-style:normal;font-size:16px} body.home #destination h2{font-family:var(--font-text);font-weight:600;letter-spacing:-.02em} /* =========================================================================== HOME PAGE ONLY =========================================================================== */ /* The hero. `.hero h1` declares clamp(58px,10vw,124px), but the wordmark inside it carries class="brand", and the header's own `.brand` rule (font-size 22px) is more specific than an inherited size: the conference title was rendering at the size of a menu item. */ body.home .hero h1 .edition{font-family:var(--font-text);font-size:15px;font-weight:600; letter-spacing:.02em;text-transform:none;line-height:1.45;max-width:640px} body.home .hero h1 .brand{font-family:var(--font-display);font-weight:800; font-size:clamp(40px,6.2vw,86px);line-height:1;letter-spacing:-.025em;margin-top:14px} body.home .hero .where{font-family:var(--font-text);font-size:clamp(16px,1.6vw,19px); font-weight:600;letter-spacing:.01em} body.home .hero .where em{font-family:var(--font-display);font-weight:600;letter-spacing:.01em} body.home .hero .count{font-family:var(--font-display);font-size:13.5px;font-weight:600;letter-spacing:.06em} /* The statistics band: Sora keeps the four figures, the caption loosens. */ body.home .cred .l{letter-spacing:.08em;font-size:13px;font-weight:600} /* The first content heading follows the credibility strip immediately. */ body.home #who{padding-top:32px} /* Source Sans 3 at 16px sets narrower than Sora 700 at 14.5px with tracking, so the .ics button stopped filling its line on a phone and the link beside it broke mid-phrase. */ body.home #dates p > a:not(.btn){white-space:nowrap} /* Scientific scope: a reference list rather than six identical tiles whose generated line art crossed their own titles on a phone. #frontiers is a navy band, so this list takes the colours the tiles used there. */ body.home .scope{margin-top:34px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px;list-style:none;padding:0;max-width:1040px} body.home .scope li{border-top:1px solid rgba(255,255,255,.13)} body.home .scope li:nth-child(-n+2){border-top:0} body.home .scope a{display:block;padding:20px 0;color:#fff;text-decoration:none; border-bottom:2px solid transparent;transition:border-color .2s ease} body.home .scope a:hover,body.home .scope a:focus-visible{border-bottom-color:var(--gold)} body.home .scope a:hover b,body.home .scope a:focus-visible b{color:var(--gold-soft)} body.home .scope b{display:block;font-family:var(--font-text);font-size:19px;font-weight:600;line-height:1.3} body.home .scope span{display:block;margin-top:5px;font-size:15.5px;line-height:1.5;color:#cfe2ea} @media (max-width:760px){ body.home .scope{grid-template-columns:1fr;gap:0} body.home .scope li:nth-child(2){border-top:1px solid rgba(255,255,255,.13)} body.home .scope a{padding:15px 0} } /* The venue photograph spans both columns of the destination band. */ body.home .dest-photo{grid-column:1/-1;margin-top:40px} body.home .dest-photo figcaption{color:#cfe2ea} /* =========================================================================== NARROW SCREENS =========================================================================== */ @media (max-width:720px){ body.home .hero h1 .edition{font-size:14px;line-height:1.4} body.home .hero h1 .brand{font-size:clamp(34px,10.5vw,54px);margin-top:10px} } @media (max-width:380px){ body.home .hero h1 .brand{font-size:34px} body.home .hero h1 .edition{font-size:13.5px;letter-spacing:.01em} h2.sec{font-size:26px} .sub-hero h1{font-size:30px} /* Keep the four credibility figures in a compact 2 x 2 grid instead of a four-row block. */ body.home .cred{padding:26px 0} body.home .cred .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 10px} body.home .cred .item{min-width:0} } /* The symposium sub-heading was Sora 700 tracked at 0.16em in capitals: the pattern this pass removes, and it appeared six times per page. */ .sym-sub{font-family:var(--font-text);font-weight:600;font-size:14px;letter-spacing:.08em} /* A button whose label is an email address cannot rely on word wrapping: at 320px the address alone is wider than the gutter leaves. */ .faq-contact .btn{max-width:100%;overflow-wrap:anywhere} @media (max-width:400px){.faq-contact .btn{padding-inline:16px;font-size:15px}} /* Proceedings volume covers. A row of real covers rather than a sentence asserting that the volumes exist; each one opens the published PDF. */ .vol-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:22px;margin-top:34px;max-width:760px} .vol{display:block;text-decoration:none;color:var(--navy)} .vol img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:3px; transition:border-color .2s ease} .vol:hover img,.vol:focus-visible img{border-color:var(--gold)} .vol b{display:block;margin-top:10px;font-family:var(--font-text);font-size:15.5px;font-weight:600} .vol span{display:block;margin-top:2px;font-size:14px;color:var(--muted)}