/* =========================================================
IPCI 2027 — International Pancreatitis Conclave India
Stylesheet · v1.0
Brand palette derived from the IPCI 2027 identity system.
========================================================= */
/* ---------- Tokens ---------- */
:root{
--navy-900:#062454;
--navy-800:#0A2E6B;
--navy:#0F3B8C;
--navy-600:#14479B;
--blue:#1560C4;
--blue-400:#3E8AE0;
--cyan:#07ADB5;
--purple:#723994;
--violet:#8040D4;
--orange:#FE5110;
--amber:#FE8810;
--ink:#16233F;
--ink-soft:#41527A;
--muted:#6B7A99;
--line:#D8E0EE;
--line-soft:#E9EEF6;
--bg:#FFFFFF;
--bg-tint:#F3F6FB;
--bg-panel:#E8EEF7;
--radius:14px;
--radius-sm:9px;
--shadow-sm:0 1px 2px rgba(6,36,84,.06), 0 4px 14px rgba(6,36,84,.05);
--shadow-md:0 10px 34px rgba(6,36,84,.10);
--wrap:1180px;
--gutter:24px;
--header-h:78px;
--sans:"Fustat","Poppins","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--navy-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.15;font-weight:700;letter-spacing:-.015em;color:var(--navy-900)}
h1{font-size:clamp(2.05rem,1.2rem + 3.4vw,3.75rem)}
h2{font-size:clamp(1.6rem,1.1rem + 1.9vw,2.5rem)}
h3{font-size:clamp(1.12rem,1rem + .5vw,1.4rem)}
h4{font-size:1.02rem}
p{margin:0 0 1.05em}
ul{margin:0 0 1em;padding-left:1.15em}
li{margin:.3em 0}
hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:860px}
section{padding-block:clamp(48px,6vw,88px)}
.section-tint{background:var(--bg-tint)}
.section-panel{background:var(--bg-panel)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200}
.skip-link:focus{left:8px;top:8px}
.eyebrow{
font-size:.775rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--blue);margin:0 0 .7rem;
}
.eyebrow-light{color:#8FBBF2}
.lede{font-size:clamp(1.03rem,.98rem + .35vw,1.19rem);color:var(--ink-soft);max-width:62ch}
.section-head{max-width:66ch;margin-bottom:clamp(26px,3vw,42px)}
.rule{width:62px;height:4px;border-radius:3px;background:linear-gradient(90deg,var(--navy),var(--cyan));margin:0 0 18px}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5em;
font:inherit;font-weight:600;font-size:.95rem;letter-spacing:.01em;
padding:.82em 1.5em;border-radius:999px;border:1.5px solid transparent;
cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
text-decoration:none;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 6px 18px rgba(254,81,16,.28)}
.btn-primary:hover{background:#e94709;color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-800);color:#fff}
.btn-outline{border-color:rgba(255,255,255,.55);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-outline-navy{border-color:var(--navy);color:var(--navy)}
.btn-outline-navy:hover{background:var(--navy);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* ---------- Header ---------- */
.site-header{
position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);
backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line-soft);
}
.header-inner{display:flex;align-items:center;gap:20px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:50px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{
color:var(--ink);font-size:.925rem;font-weight:600;padding:.55em .78em;border-radius:8px;
text-decoration:none;white-space:nowrap;
}
.nav a:hover{background:var(--bg-tint);color:var(--navy);text-decoration:none}
.nav a[aria-current="page"]{color:var(--navy);box-shadow:inset 0 -2.5px 0 var(--orange)}
.nav .btn{margin-left:10px;padding:.62em 1.15em;font-size:.9rem}
.nav-toggle{
display:none;margin-left:auto;background:none;border:1.5px solid var(--line);
border-radius:9px;padding:9px 11px;cursor:pointer;line-height:0;
}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px}
.nav-toggle span+span{margin-top:4.5px}
@media (max-width:1010px){
.nav-toggle{display:block}
.nav{
position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
gap:2px;background:#fff;border-bottom:1px solid var(--line);
padding:12px var(--gutter) 20px;box-shadow:var(--shadow-md);
}
.nav[hidden]{display:none}
.nav a{padding:.72em .6em}
.nav .btn{margin:8px 0 0;justify-content:center}
}
/* ---------- Hero ---------- */
.hero{
position:relative;color:#fff;background:var(--navy-900);
padding-block:clamp(64px,9vw,124px);overflow:hidden;
}
.hero::before{
content:"";position:absolute;inset:0;
background:var(--hero-img,none) center right/cover no-repeat;
opacity:.62;
}
.hero::after{
content:"";position:absolute;inset:0;
background:linear-gradient(100deg,rgba(6,36,84,.96) 0%,rgba(10,46,107,.88) 42%,rgba(10,46,107,.35) 100%);
}
.hero > .wrap{position:relative;z-index:2}
.hero h1{color:#fff;max-width:16ch}
.hero .lede{color:#D9E5F7;max-width:56ch}
.hero-kicker{
display:inline-flex;align-items:center;gap:.6em;flex-wrap:wrap;
background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.22);
border-radius:999px;padding:.5em 1.1em;font-size:.83rem;font-weight:600;
letter-spacing:.05em;text-transform:uppercase;color:#EAF2FF;margin-bottom:22px;
}
.hero-tagline{
margin-top:26px;font-size:.8rem;font-weight:700;letter-spacing:.22em;
text-transform:uppercase;color:#7FB6F0;
}
.page-hero{padding-block:clamp(52px,6vw,84px)}
.page-hero h1{max-width:22ch;font-size:clamp(1.9rem,1.2rem + 2.6vw,3rem)}
/* Fact bar under hero */
.factbar{background:var(--navy-800);color:#fff}
.factbar .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.16)}
.factbar .cell{background:var(--navy-800);padding:22px 26px}
.factbar .k{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#8FBBF2;margin:0 0 .35em}
.factbar .v{margin:0;font-weight:600;font-size:1.02rem;line-height:1.42;color:#fff}
@media (max-width:760px){.factbar .grid{grid-template-columns:1fr}}
/* ---------- Cards & grids ---------- */
.grid{display:grid;gap:20px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:940px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}
.card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:24px 22px;box-shadow:var(--shadow-sm);
}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}
.card-num{
display:inline-block;font-size:1.55rem;font-weight:700;color:var(--blue-400);
line-height:1;margin-bottom:.45rem;letter-spacing:-.02em;
}
.card-accent{border-top:3px solid var(--orange)}
.numbered{display:grid;gap:18px}
.numbered .item{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;
padding-bottom:18px;border-bottom:1px solid var(--line-soft)}
.numbered .item:last-child{border-bottom:0;padding-bottom:0}
.numbered .n{font-size:1.5rem;font-weight:700;color:var(--blue-400);line-height:1.1}
.numbered h3{font-size:1.06rem;margin-bottom:.22em}
.numbered p{margin:0;color:var(--ink-soft);font-size:.955rem}
/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:880px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:26px 22px;box-shadow:var(--shadow-sm);
}
.stat img{width:38px;height:38px;margin-bottom:14px}
.stat .num{font-size:clamp(1.85rem,1.4rem + 1.4vw,2.5rem);font-weight:700;color:var(--navy);line-height:1;letter-spacing:-.02em}
.stat .lbl{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:.55em;font-weight:600}
/* Chips / pills */
.chips{display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:0;list-style:none}
.chip{
display:inline-block;padding:.48em 1em;border-radius:8px;font-size:.9rem;font-weight:600;
background:#fff;border:1px solid var(--navy);color:var(--navy);
}
.chip-solid{background:var(--navy);color:#fff;border-color:var(--navy)}
/* Themed dark band */
.band-dark{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark p{color:#CFE0F6}
.band-dark .rule{background:linear-gradient(90deg,var(--amber),var(--orange))}
.band-dark .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);box-shadow:none}
.band-dark .card p{color:#CFE0F6}
.band-dark .card-num{color:var(--amber)}
.five{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media (max-width:940px){.five{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.five{grid-template-columns:repeat(2,1fr)}}
.five .item img{width:36px;height:36px;margin-bottom:12px}
.five .item h3{font-size:1.03rem;margin-bottom:.2em}
.five .item p{font-size:.9rem;margin:0}
/* Quote */
.quote{
background:var(--navy);color:#fff;border-radius:var(--radius);
padding:clamp(28px,4vw,46px);position:relative;
}
.quote blockquote{margin:0;font-size:clamp(1.08rem,1rem + .6vw,1.42rem);line-height:1.5;font-weight:500}
.quote cite{display:block;margin-top:1.1rem;font-style:normal;font-weight:600;color:var(--amber);font-size:.98rem}
/* Media split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,54px);align-items:center}
.split-media img{border-radius:var(--radius);box-shadow:var(--shadow-md);width:100%;height:auto}
@media (max-width:880px){.split{grid-template-columns:1fr}}
/* People */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:1000px){.people{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.people{grid-template-columns:repeat(2,1fr)}}
/* Two-up is kept all the way down: on a phone a 1-column list of 28
people is endless, and the portrait shrinks to a thumbnail. */
.person{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.person img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(100%) contrast(1.04);background:var(--bg-panel)}
.person .body{padding:16px 17px 19px}
.person .name{font-weight:700;color:var(--navy-900);font-size:1.02rem;line-height:1.25;margin:0 0 .3em}
.person .role{font-size:.855rem;color:var(--ink-soft);line-height:1.45;margin:0}
.person .tag{
display:inline-block;margin-bottom:.5em;font-size:.68rem;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:var(--orange);
}
.person-lead{grid-column:span 2}
@media (max-width:460px){.person-lead{grid-column:span 1}}
/* Table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.96rem}
caption{text-align:left;padding:16px 18px 0;color:var(--muted);font-size:.88rem}
thead th{
background:var(--navy);color:#fff;text-align:left;padding:14px 18px;
font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
}
tbody th{text-align:left;font-weight:600}
td,tbody th{padding:13px 18px;border-top:1px solid var(--line-soft)}
tbody tr:nth-child(odd) td,tbody tr:nth-child(odd) th{background:#FBFCFE}
.row-group th{
background:var(--bg-panel);color:var(--navy);font-size:.8rem;letter-spacing:.11em;
text-transform:uppercase;font-weight:700;
}
.price{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.price-best{color:var(--orange)}
/* Dates */
.dates{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
@media (max-width:760px){.dates{grid-template-columns:1fr}}
.dates .d{padding:24px 26px;border-right:1px solid var(--line-soft)}
.dates .d:last-child{border-right:0}
@media (max-width:760px){.dates .d{border-right:0;border-bottom:1px solid var(--line-soft)}.dates .d:last-child{border-bottom:0}}
.dates .k{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 .35em}
.dates .v{font-size:1.42rem;font-weight:700;color:var(--navy);margin:0;letter-spacing:-.01em}
/* Checklist */
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.ticks li{padding:.62em 0 .62em 1.9em;position:relative;border-bottom:1px solid var(--line-soft);font-weight:500}
.ticks li:last-child{border-bottom:0}
.ticks li::before{
content:"";position:absolute;left:0;top:1.08em;width:9px;height:9px;border-radius:50%;
background:var(--orange);
}
/* Notice */
.notice{
background:#FFF6F1;border:1px solid #FBD9C8;border-left:4px solid var(--orange);
border-radius:var(--radius-sm);padding:16px 20px;font-size:.94rem;color:#6C3418;
}
.notice p:last-child{margin-bottom:0}
.note-small{font-size:.85rem;color:var(--muted)}
/* ---------- Forms ---------- */
.form-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:clamp(22px,3vw,36px);box-shadow:var(--shadow-md);
}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.42em;color:var(--navy-900)}
.field .req{color:var(--orange)}
.field input,.field select,.field textarea{
width:100%;font:inherit;font-size:.97rem;color:var(--ink);background:#fff;
border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:.72em .9em;
transition:border-color .15s ease,box-shadow .15s ease;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,96,196,.14);outline:none;
}
.field .hint{font-size:.83rem;color:var(--muted);margin:.4em 0 0}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#D63A1E}
.field .err{display:none;font-size:.83rem;color:#C4321A;margin:.4em 0 0;font-weight:600}
.field.invalid .err{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.field-row{grid-template-columns:1fr}}
.form-status{margin-top:16px;padding:14px 18px;border-radius:var(--radius-sm);font-weight:600;font-size:.94rem}
.form-status[hidden]{display:none}
.form-status.ok{background:#EAF7EF;border:1px solid #BFE3CD;color:#1D6B3C}
.form-status.err{background:#FDF0ED;border:1px solid #F5C9BE;color:#A93417}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ---------- CTA band ---------- */
.cta-band{
background:linear-gradient(115deg,var(--navy-900),var(--navy-600) 58%,var(--blue));
color:#fff;text-align:center;
}
.cta-band h2{color:#fff}
.cta-band p{color:#D5E3F8;max-width:60ch;margin-inline:auto}
.cta-band .btn-row{justify-content:center}
/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900);color:#B9CBE6;font-size:.94rem}
.site-footer h4{color:#fff;font-size:.79rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:1em}
.site-footer a{color:#DCE8F8}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px;padding-block:56px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin:.42em 0}
.footer-logo{height:56px;width:auto;margin-bottom:16px}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.13);padding-block:20px;
display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.86rem;color:#8FA6C6;
}
/* ---------- Utility ---------- */
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.mt-2{margin-top:1.4rem}
.mt-3{margin-top:2.2rem}
.center{text-align:center}
.max-60{max-width:62ch}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
@media print{
.site-header,.nav,.cta-band,.btn-row,.form-card{display:none !important}
body{font-size:11pt}
.hero{background:#fff;color:#000}
.hero::before,.hero::after{display:none}
.hero h1,.hero .lede{color:#000}
}
/* =========================================================
BROCHURE-THEME LAYER
Mirrors the printed IPCI 2027 brochure: near-white network
ground, two-weight headings, solid navy panels overlapping
black-and-white photography, numbered 01/02 lists.
========================================================= */
body{background:#F7F9FC}
/* -- Two-weight headings: "About the Conclave" -- */
.h-split{font-weight:700;color:var(--navy-900)}
.h-split .thin{font-weight:300;color:#7A8CAC;display:block}
.h-split .thin-inline{font-weight:300;color:#7A8CAC}
@media (min-width:700px){.h-split .thin{display:inline}}
/* -- Faint low-poly network ground (brochure cover + navy panels) -- */
.net-light{
background-color:#F7F9FC;
background-image:url("../img/bg/network-pattern.svg");
background-size:1400px auto;background-position:center;background-repeat:repeat;
}
.band-dark.net-dark::before{
content:"";position:absolute;inset:0;
background:url("../img/bg/network-pattern.svg") center/1400px auto repeat;
opacity:.5;filter:brightness(3.2);pointer-events:none;
}
.band-dark.net-dark > .wrap{position:relative;z-index:2}
/* -- Cover-style hero (mirrors brochure page 1) -- */
.hero-cover{
position:relative;color:var(--navy-900);padding-block:clamp(44px,6vw,78px);
border-bottom:0;overflow:hidden;
}
.hero-cover .cover-grid{
display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(20px,4vw,48px);align-items:center;
}
@media (max-width:900px){.hero-cover .cover-grid{grid-template-columns:1fr;text-align:left}}
.cover-type .line-1{
display:block;font-size:clamp(1.25rem,.85rem + 1.7vw,2.1rem);font-weight:700;
letter-spacing:.055em;text-transform:uppercase;color:var(--navy);line-height:1.05;
}
.cover-type .line-2{
display:block;font-size:clamp(2.5rem,1.2rem + 6vw,5.1rem);font-weight:700;
color:var(--navy);line-height:.98;letter-spacing:-.025em;margin:.04em 0;
}
.cover-type .line-3{
display:block;font-size:clamp(1.05rem,.8rem + 1.1vw,1.6rem);font-weight:600;
letter-spacing:.19em;text-transform:uppercase;color:var(--navy);line-height:1.1;
}
.cover-mark{justify-self:center;width:min(100%,460px)}
.cover-mark img{width:100%;height:auto}
.cover-tagline{
margin:22px 0 0;font-size:clamp(.7rem,.62rem + .3vw,.86rem);font-weight:700;
letter-spacing:.2em;text-transform:uppercase;color:var(--blue);
}
/* -- Navy strip beneath cover: VENUE | DATES | THEME (brochure device) -- */
.coverbar{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.coverbar::before{
content:"";position:absolute;inset:0;
background:url("../img/bg/network-pattern.svg") center/1200px auto repeat;
opacity:.45;filter:brightness(3.4);
}
.coverbar .grid{
position:relative;z-index:2;display:grid;grid-template-columns:1.5fr 1fr 1.6fr;
gap:0;
}
@media (max-width:820px){.coverbar .grid{grid-template-columns:1fr}}
.coverbar .cell{padding:20px 26px;border-right:1px solid rgba(255,255,255,.22)}
.coverbar .cell:first-child{padding-left:0}
.coverbar .cell:last-child{border-right:0}
@media (max-width:820px){
.coverbar .cell{border-right:0;border-bottom:1px solid rgba(255,255,255,.2);padding-left:0}
.coverbar .cell:last-child{border-bottom:0}
}
.coverbar .k{margin:0 0 .3em;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#9EC4F2;font-weight:700}
.coverbar .v{margin:0;font-size:1.02rem;font-weight:600;line-height:1.4;color:#fff}
.coverbar .v strong{font-weight:700}
/* -- Interior page header (brochure interior page top) -- */
.page-head{background:#F7F9FC;padding-block:clamp(40px,5vw,66px);position:relative}
.page-head h1{margin-bottom:.28em}
.page-head .lede{max-width:64ch}
.page-head .crumb{
font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
font-weight:700;margin:0 0 .9rem;
}
.page-head .crumb a{color:var(--muted)}
/* -- Duotone / B&W photo band (brochure uses B&W imagery throughout) -- */
.photoband{
position:relative;height:clamp(180px,26vw,330px);overflow:hidden;background:var(--navy-900);
}
.photoband img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.05) brightness(.98)}
.photoband.tint img{filter:grayscale(100%) contrast(1.05) brightness(.7)}
/* -- Navy panel overlapping a photo (signature brochure layout) -- */
.overlap{position:relative;margin-top:clamp(-70px,-6vw,-40px);z-index:3}
.panel-navy{
background:var(--navy);color:#fff;border-radius:2px;padding:clamp(24px,3.4vw,40px);
box-shadow:var(--shadow-md);position:relative;overflow:hidden;
}
.panel-navy::before{
content:"";position:absolute;inset:0;
background:url("../img/bg/network-pattern.svg") center/1100px auto repeat;opacity:.4;filter:brightness(3.4);
}
.panel-navy > *{position:relative;z-index:2}
.panel-navy h2,.panel-navy h3{color:#fff}
.panel-navy p{color:#D2E1F6}
.panel-navy .eyebrow{color:#9EC4F2}
.panel-grey{
background:var(--bg-panel);border-radius:2px;padding:clamp(24px,3.4vw,40px);
}
.panel-grey .eyebrow{color:var(--navy)}
/* -- Vertical URL rail (brochure page-edge device) -- */
.rail{
position:fixed;left:10px;top:50%;transform:translateY(-50%) rotate(180deg);
writing-mode:vertical-rl;font-size:.68rem;letter-spacing:.22em;text-transform:lowercase;
color:#93A5C2;font-weight:600;z-index:50;pointer-events:auto;
}
.rail a{color:inherit;text-decoration:none}
.rail a:hover{color:var(--navy)}
@media (max-width:1320px){.rail{display:none}}
/* -- Brochure numbered list, grey numerals -- */
.numbered .n{color:#B7C4DA;font-weight:700}
.band-dark .numbered .n{color:#6E93C9}
.band-dark .numbered .item{border-bottom-color:rgba(255,255,255,.14)}
.band-dark .numbered h3{color:#fff}
.band-dark .numbered p{color:#CFE0F6}
/* -- Section corner page marker, like "PAGE – 01" -- */
.pagemark{
font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:#A8B7CE;font-weight:700;
}
/* =========================================================
PRINT-FIDELITY LAYER
The brochure is a print piece: square corners, hairline
rules, flat blocks, no drop shadows, no gradients in
furniture. This layer brings the web build in line with it.
========================================================= */
:root{
--radius:2px;
--radius-sm:2px;
--shadow-sm:none;
--shadow-md:none;
--bg-tint:#EFF3F8;
--bg-panel:#E3EAF4;
}
/* Flat blocks, hairline borders, square corners */
.card,.stat,.person,.table-wrap,.dates,.form-card,
.panel-navy,.panel-grey,.quote,.notice,.split-media img{
box-shadow:none;border-radius:2px;
}
.card,.stat{background:#fff;border:1px solid var(--line)}
.section-tint .card,.section-tint .stat{background:#fff}
/* Rules: solid navy bar, as printed — no gradient */
.rule{width:46px;height:3px;border-radius:0;background:var(--navy)}
.band-dark .rule{background:var(--amber)}
/* Headings sit above a hairline that runs the column, as in the brochure */
.section-head{
border-bottom:1px solid var(--line);
padding-bottom:18px;max-width:none;
}
.section-head .lede{max-width:66ch}
/* Buttons: printed chip geometry, not web pills */
.btn{border-radius:3px;box-shadow:none;letter-spacing:.02em}
.btn:hover{transform:none}
.btn-primary{box-shadow:none}
.chip{border-radius:3px}
/* Stat blocks read as the brochure's right-hand data column */
.stat{padding:22px 20px;border-left:3px solid var(--navy)}
.stat .num{color:var(--navy-900)}
/* Cards: thin top rule instead of a floating card */
.card{padding:22px 20px}
.card-accent{border-top:3px solid var(--orange)}
/* Table: square, ruled, print-like */
.table-wrap{border-radius:2px}
thead th{border-radius:0}
/* Form controls */
.field input,.field select,.field textarea{border-radius:2px}
.form-card{border-radius:2px}
/* Person cards: flat, square, greyscale — brochure grid */
.person{border-radius:2px}
.person img{border-radius:0}
/* Photo bands and panels sit flush, no rounding */
.photoband,.photoband img{border-radius:0}
.split-media img{border-radius:2px}
/* Quote block: navy field, square */
.quote{border-radius:2px}
/* Dark bands keep the network ground, no gradient CTA */
.cta-band{background:var(--navy)}
.cta-band::before{
content:"";position:absolute;inset:0;
background:url("../img/bg/network-pattern.svg") center/1300px auto repeat;
opacity:.45;filter:brightness(3.3);
}
.cta-band{position:relative;overflow:hidden}
.cta-band > .wrap{position:relative;z-index:2}
/* Hero (interior dark hero, if used) keeps flat navy */
.hero::after{background:linear-gradient(100deg,rgba(6,36,84,.96) 0%,rgba(10,46,107,.9) 55%,rgba(10,46,107,.55) 100%)}
/* Header: thinner, print-like hairline */
.site-header{background:#fff;backdrop-filter:none;border-bottom:1px solid var(--line)}
.nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--orange)}
.nav .btn{border-radius:3px}
/* Footer: flat navy, no rounding */
.site-footer{background:var(--navy-900)}
@media (max-width:1010px){
.nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--orange);border-radius:0}
}
/* =========================================================
CALL-TO-ACTION: NAVY
The brochure reserves orange for the logo mark alone; every
panel, bar and rule is navy. Primary buttons follow suit.
Orange survives only as the small accent (list bullets, the
current-page marker, quote attribution).
========================================================= */
.btn-primary{
background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:none;
}
.btn-primary:hover{background:var(--navy-800);color:#fff}
/* On navy grounds the filled button inverts to white so it still
reads as the one actionable element. */
.band-dark .btn-primary,
.cta-band .btn-primary,
.panel-navy .btn-primary,
.hero .btn-primary{
background:#fff;color:var(--navy);border-color:#fff;
}
.band-dark .btn-primary:hover,
.cta-band .btn-primary:hover,
.panel-navy .btn-primary:hover,
.hero .btn-primary:hover{
background:#E8EEF7;color:var(--navy-900);
}
/* The nav's link colour was overriding the button's own text colour. */
.nav a.btn.btn-primary{color:#fff}
.nav a.btn.btn-primary:hover{color:#fff;background:var(--navy-800)}
/* =========================================================
PORTRAIT ASPECT FIX
The width/height attributes on ![]()
map to a UA-level
height, and aspect-ratio is ignored whenever BOTH
dimensions are resolved — so the portrait boxes were
rendering 265x600 and object-fit was cropping heads off.
Letting height resolve from the ratio restores the square
crop the 1:1 source assets were composed for.
========================================================= */
.person img{height:auto;aspect-ratio:1/1}
.split-media img{height:auto}
/* Even 4-up patron grid — no double-width lead card */
.person-lead{grid-column:auto}
/* Date and venue on the cover banner, set as a ruled block
in the manner of the brochure's VENUE / DATES strip. */
.cover-date{
margin:22px 0 0;padding:2px 0 2px 16px;
border-left:3px solid var(--navy);
}
.cover-date .d{
display:block;font-size:clamp(1.15rem,.95rem + .9vw,1.6rem);
font-weight:700;color:var(--navy-900);line-height:1.15;letter-spacing:-.01em;
}
.cover-date .v{
display:block;margin-top:.22em;font-size:clamp(.86rem,.82rem + .18vw,.98rem);
color:var(--ink-soft);line-height:1.4;
}
/* Founder band — the origin of the work sits directly under the venue
bar on the home page, mirroring page 01 of the brochure. */
.founder-band{background:var(--bg-panel);padding-block:clamp(30px,4vw,52px)}
.founder{
display:grid;grid-template-columns:200px 1fr;gap:clamp(20px,3vw,38px);align-items:center;
}
.founder img{
width:200px;height:200px;object-fit:cover;border-radius:2px;
filter:grayscale(100%) contrast(1.04);background:#fff;
}
/* His name reads as one name: the honorific is not de-emphasised.
Size is left to the heading level so an h1 still reads as an h1. */
.founder-name{line-height:1.15;font-weight:700;color:var(--navy-900);letter-spacing:-.015em}
h2.founder-name{font-size:clamp(1.55rem,3.2vw,2.15rem)}
@media (max-width:720px){
.founder{grid-template-columns:1fr}
.founder img{width:150px;height:150px}
}
/* =========================================================
MOBILE LAYOUT PASS
On a phone every .split collapses to one column, so source
order becomes reading order. These rules fix the places
where that stranded an element, and shorten the long
portrait lists so they are navigable on a small screen.
========================================================= */
/* A paired portrait should lead its text block on a phone, not
trail after a button row. */
@media (max-width:880px){
.split-lead-media > div:last-child{order:-1}
.split-lead-media{gap:22px}
}
/* A note that belongs to the whole section, not to the column
it happens to sit in. */
.contact-note{margin-top:1.6rem;max-width:62ch}
@media (max-width:880px){.contact-note{margin-top:1.1rem}}
/* Portrait lists: a stacked card per person makes the committees
page thousands of pixels long on a phone. Below 620px each
person becomes a compact row instead — photo beside the name. */
@media (max-width:620px){
.people:not(.people-single){grid-template-columns:1fr 1fr;gap:14px 12px}
/* The portrait leads the card and fills its width, so every face is
~165px on a 390px screen instead of a 104px thumbnail, and grid rows
equalise the heights so the names line up across each row. */
.people:not(.people-single) .person{
display:flex;flex-direction:column;height:100%;
}
.people:not(.people-single) .person img{
width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
border-bottom:1px solid var(--line);
}
.people:not(.people-single) .person .body{padding:11px 12px 14px}
.people:not(.people-single) .person .name{font-size:.92rem;line-height:1.22}
.people:not(.people-single) .person .role{font-size:.755rem;line-height:1.38}
.people:not(.people-single) .person .tag{font-size:.6rem;letter-spacing:.11em;margin-bottom:.3em}
}
/* Single-portrait blocks (the secretary, the memorial) keep the
full card, centred. */
@media (max-width:880px){
.people-single{margin-inline:auto}
}
/* Stat blocks: two-up is cramped on a phone once the labels wrap. */
@media (max-width:540px){
.stats{grid-template-columns:1fr}
.stat{display:grid;grid-template-columns:44px 1fr;gap:0 14px;align-items:center;padding:18px 16px}
.stat img{margin-bottom:0}
.stat .num{grid-column:2;line-height:1.05}
.stat .lbl{grid-column:2;margin-top:.25em}
}
/* The "circle of five" gets too narrow at two-up on small phones. */
@media (max-width:440px){
.five{grid-template-columns:1fr;gap:14px}
.five .item{display:grid;grid-template-columns:40px 1fr;gap:0 14px}
.five .item img{margin-bottom:0;grid-row:span 3}
}
/* The navy panel that overlaps a photo band needs a smaller
overlap on a phone or it crowds the image. */
@media (max-width:720px){
.overlap{margin-top:-28px}
}
/* Hero: three buttons stack awkwardly — let them fill the width. */
@media (max-width:460px){
.hero-cover .btn-row .btn,
.cta-band .btn-row .btn{flex:1 1 100%;justify-content:center}
}
/* The menu button was the one control under the 44px minimum
touch target; everything else is already 52px. The display
value must stay inside the media query — set unscoped it
overrides the `display:none` that hides the button on desktop. */
.nav-toggle{min-height:44px;min-width:44px}
@media (max-width:1010px){
.nav-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center}
}
/* =========================================================
PARTNERS
Fixed-height tiles with contained logos, so a landscape
wordmark and a square mark sit on the same optical line
without anyone resizing artwork by hand.
========================================================= */
.partner-cat{margin-bottom:clamp(30px,4vw,48px)}
.partner-cat:last-child{margin-bottom:0}
.partner-cat-head{border-bottom:1px solid var(--line);padding-bottom:.7em;margin-bottom:1.1em}
.partner-cat-head h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:0 0 .25em}
.partner-cat-head p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.logo-slot{
display:flex;align-items:center;justify-content:center;
height:118px;padding:18px;background:#fff;
border:1px solid var(--line);border-radius:var(--radius);
}
.logo-slot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
transition:transform .25s ease}
a.logo-slot:hover img,a.logo-slot:focus-visible img{transform:scale(1.03)}
.logo-slot.is-empty{
background:var(--bg-panel);border-style:dashed;border-color:#C6D3E6;
}
.logo-slot.is-empty span{
font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#93A6C2;text-align:center;
}
@media (max-width:900px){.logos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){
.logos{grid-template-columns:repeat(2,1fr);gap:12px}
.logo-slot{height:96px;padding:14px}
}
/* =========================================================
VOICES — messages on "Why IPCI Matters"
========================================================= */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.voice{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:22px 22px 20px;box-shadow:var(--shadow-sm);
border-top:3px solid var(--navy-700);
}
.voice p.msg{margin:0 0 1em;font-size:.95rem;line-height:1.6;color:var(--ink)}
.voice .who{font-weight:700;color:var(--navy-900);font-size:.95rem;margin:0}
.voice .meta{margin:.15em 0 0;font-size:.82rem;color:var(--ink-soft);line-height:1.4}
.voices-empty{grid-column:1/-1;margin:0;padding:26px 0;text-align:center}
@media (max-width:900px){.voices{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.voices{grid-template-columns:1fr;gap:14px}.voice{padding:18px 17px 16px}}
/* Consent-style checkbox rows in forms */
.field-check{display:grid;grid-template-columns:22px 1fr;gap:0 10px;align-items:start}
.field-check input[type=checkbox]{width:20px;height:20px;margin-top:2px}
.field-check label{font-weight:400;font-size:.9rem;line-height:1.45}
/* =========================================================
REGISTRATION MODAL
A native