/* Responsive layer. Loaded last so it can refine every screen size: small phones, phones, foldables, tablets, laptops, desktops, large and ultra-wide monitors, landscape phones, touch and mouse devices, and devices with notches. */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} img,video,iframe,canvas{max-width:100%} .entry-content img,.entry-content video{height:auto} .entry-content iframe{width:100%} .entry-content table{display:block;max-width:100%;overflow-x:auto} .entry-content pre,.entry-content code{overflow-x:auto;max-width:100%} .entry-content .alignwide,.entry-content .alignfull{max-width:100%;margin-left:0;margin-right:0} .entry-content .alignleft,.entry-content .alignright{max-width:50%} @media (max-width:600px){.entry-content .alignleft,.entry-content .alignright{float:none;max-width:100%;margin:0 0 16px}} p,li,dd,td,summary,h1,h2,h3{overflow-wrap:break-word} /* Decorative rings and glows run past the edges. Clip them so the page can never scroll sideways, without creating scroll containers (so the sticky bylaws contents list keeps working). */ main,footer,section,.hero,.pbanner,header.top,.util,.tick{overflow-x:clip} @supports not (overflow:clip){main,footer,section,.pbanner{overflow-x:hidden}} /* Notches and rounded corners in landscape */ .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))} footer{padding-bottom:env(safe-area-inset-bottom,0px)} /* Heading inside the donate panel: the global gradient must not show as a box behind white text */ .donate h2{background-image:none!important;-webkit-text-fill-color:#fff;color:#fff} .donate h2::after{-webkit-text-fill-color:#ffe0a3} /* Header: logo left, menu right when there is room, tidy wrap when there is not */ header.top .wrap nav{margin-left:auto} nav ul{justify-content:flex-end} @media (min-width:861px) and (max-width:1359px){nav a{padding:9px 10px;font-size:15px}header.top .wrap nav{flex:1 1 100%}nav ul{justify-content:center}} /* Large screens: use the space instead of a narrow column in the middle */ @media (min-width:1280px){.wrap{max-width:1240px}} @media (min-width:1360px){.wrap{max-width:1340px}} @media (min-width:1360px) and (max-width:1599px){nav a{padding:9px 10px;font-size:15px}} @media (min-width:1600px){.wrap{max-width:1420px}body{font-size:17.5px}.hero{min-height:520px}} @media (min-width:2000px){.wrap{max-width:1640px}body{font-size:19px}.hero{min-height:600px}.slide h1,.slide .h1{font-size:clamp(58px,3.4vw,84px)}} @media (min-width:2600px){.wrap{max-width:1960px}body{font-size:21px}} /* Tablets */ @media (min-width:601px) and (max-width:1023px){ .dstats{grid-template-columns:repeat(2,1fr)} .cgrid{grid-template-columns:repeat(2,1fr)} } /* Phones */ @media (max-width:600px){ .util .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap;gap:12px;padding-top:6px;padding-bottom:6px} .util .wrap::-webkit-scrollbar{display:none} .util .wrap>span:first-child{display:none} .util .wrap>span:last-child{flex-wrap:nowrap} .dstats{grid-template-columns:1fr 1fr;gap:10px;margin-top:-26px} .dstats div{padding:14px} .dstats b{font-size:22px;overflow-wrap:anywhere;word-break:break-word} .cgrid{grid-template-columns:1fr} .btools>*{flex:1 1 auto;min-width:0} .btools input[type=search]{flex:1 1 100%} .btn{padding:12px 20px} .cact{flex-wrap:wrap} .pbanner{padding:40px 0 52px} } @media (max-width:480px){ .quick{grid-template-columns:1fr 1fr} .quick a:last-child:nth-child(odd){grid-column:1/-1} .btn.o{margin-left:0;margin-top:8px} .acts .btn{flex:1 1 auto;text-align:center} } /* Very small phones and folded foldables */ @media (max-width:359px){ .wrap{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))} .dstats{grid-template-columns:1fr} .logo b{font-size:13px} .slide h1,.slide .h1{font-size:28px} .amts{grid-template-columns:1fr 1fr} } /* Phones turned sideways: short screens need a shorter hero and a smaller floating button */ @media (max-height:520px) and (orientation:landscape){ .hero{min-height:360px} .slide .wrap{padding-top:28px;padding-bottom:48px} .float{bottom:calc(8px + env(safe-area-inset-bottom,0px))} .float a{padding:8px 14px} dialog.viewer{height:96vh} } /* Touch devices: finger-sized targets, and no zoom when a field is focused on iOS */ @media (pointer:coarse){ nav a,.btn,.cp,.cfilter button,.btoc a,summary,.dots button{min-height:44px} nav a,.cfilter button,.btoc a{display:flex;align-items:center} .cp{padding-left:14px;padding-right:14px} .dots button{min-width:24px} } @media (max-width:860px){ input,select,textarea{font-size:16px} nav.open{max-height:calc(100dvh - 120px);overflow-y:auto;-webkit-overflow-scrolling:touch} .float{margin-bottom:0} footer{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))} } /* Certificate viewer: full screen on phones */ @media (max-width:600px){ dialog.viewer{width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100dvh;margin:0;border-radius:0} } /* Receipt and donation steps must never be wider than the screen */ .rcpt,.pend,.pay,.pay .box,.give,.chkbox{max-width:100%} .rcpt dl{display:grid;grid-template-columns:minmax(110px,max-content) 1fr;gap:6px 14px} .rcpt dd{margin:0;min-width:0} @media (max-width:480px){.rcpt dl{grid-template-columns:1fr}.rcpt dt{margin-top:6px}.pay table td{display:block;width:100%}.pay table td:first-child{padding-bottom:0;opacity:.8}} /* Wide tables (donations in admin, bank details) scroll inside themselves */ .pay table{width:100%} table{max-width:100%} /* Less motion on small and low-power screens */ @media (max-width:860px){.blob,.hero::before{animation:none}.fx{transition-duration:.45s}} /* Outline buttons made from