/* St. Mary's Observatory. A night sky in Marian blue, one gold star. It is its own small world rather than a page of the landing site, so it commits to a single dark look instead of following the site's light/dark toggle. */ :root { --night-top: #26437f; --night-mid: #11204a; --night-deep: #060a1c; --ivory: #f3ead3; --ivory-dim: rgba(243, 234, 211, .68); /* 4.6:1 against the lightest sky */ --gold: #f0cf78; --rose: #e9a8c6; --font: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif; } * { box-sizing: border-box; } html { background: var(--night-deep); } body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding-inline: 20px; color: var(--ivory); font-family: var(--font); /* transparent: the sky is painted by the fixed layer below */ background: transparent; overflow-x: hidden; } /* Stars: one 900px tile, seeded so the sky is the same on every visit. An earlier version stacked one-dot-per-tile layers, which lined up into rows. */ /* The sky is one fixed layer the size of the window: the glow of the gradient and the scattered stars together. It was on before, which sized the gradient to the whole page -- fine for the one-screen gate, but on the long churches explorer the glow ended up 1,500px down the page and the top of the screen went dim. Fixed, the content scrolls over a still sky. position:fixed rather than background-attachment:fixed, which iOS Safari ignores. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='900'%20height='900'%3E%3Ccircle%20cx='126'%20cy='186'%20r='0.5'%20fill='rgba(255,255,255,0.73)'/%3E%3Ccircle%20cx='870'%20cy='462'%20r='0.5'%20fill='rgba(255,255,255,0.8)'/%3E%3Ccircle%20cx='539'%20cy='461'%20r='0.7'%20fill='rgba(255,244,214,0.54)'/%3E%3Ccircle%20cx='138'%20cy='143'%20r='0.6'%20fill='rgba(233,168,198,0.38)'/%3E%3Ccircle%20cx='635'%20cy='142'%20r='0.5'%20fill='rgba(255,255,255,0.8)'/%3E%3Ccircle%20cx='821'%20cy='363'%20r='0.8'%20fill='rgba(255,255,255,0.49)'/%3E%3Ccircle%20cx='349'%20cy='137'%20r='0.5'%20fill='rgba(233,168,198,0.58)'/%3E%3Ccircle%20cx='812'%20cy='626'%20r='0.5'%20fill='rgba(255,244,214,0.84)'/%3E%3Ccircle%20cx='635'%20cy='362'%20r='1.0'%20fill='rgba(255,255,255,0.43)'/%3E%3Ccircle%20cx='381'%20cy='120'%20r='0.8'%20fill='rgba(255,255,255,0.84)'/%3E%3Ccircle%20cx='688'%20cy='534'%20r='1.0'%20fill='rgba(255,255,255,0.7)'/%3E%3Ccircle%20cx='570'%20cy='449'%20r='1.0'%20fill='rgba(255,244,214,0.59)'/%3E%3Ccircle%20cx='761'%20cy='443'%20r='0.6'%20fill='rgba(255,255,255,0.49)'/%3E%3Ccircle%20cx='258'%20cy='128'%20r='0.5'%20fill='rgba(255,255,255,0.8)'/%3E%3Ccircle%20cx='767'%20cy='559'%20r='0.8'%20fill='rgba(255,244,214,0.45)'/%3E%3Ccircle%20cx='802'%20cy='733'%20r='0.6'%20fill='rgba(255,255,255,0.4)'/%3E%3Ccircle%20cx='684'%20cy='363'%20r='0.6'%20fill='rgba(255,244,214,0.73)'/%3E%3Ccircle%20cx='675'%20cy='887'%20r='1.2'%20fill='rgba(255,255,255,0.53)'/%3E%3Ccircle%20cx='264'%20cy='14'%20r='0.5'%20fill='rgba(255,255,255,0.79)'/%3E%3Ccircle%20cx='640'%20cy='464'%20r='0.5'%20fill='rgba(255,255,255,0.53)'/%3E%3Ccircle%20cx='528'%20cy='816'%20r='1.0'%20fill='rgba(255,244,214,0.51)'/%3E%3Ccircle%20cx='251'%20cy='201'%20r='0.6'%20fill='rgba(255,244,214,0.77)'/%3E%3Ccircle%20cx='414'%20cy='234'%20r='0.7'%20fill='rgba(255,255,255,0.7)'/%3E%3Ccircle%20cx='847'%20cy='869'%20r='0.6'%20fill='rgba(255,255,255,0.4)'/%3E%3Ccircle%20cx='290'%20cy='281'%20r='1.2'%20fill='rgba(255,255,255,0.53)'/%3E%3Ccircle%20cx='365'%20cy='784'%20r='0.8'%20fill='rgba(255,255,255,0.68)'/%3E%3Ccircle%20cx='831'%20cy='505'%20r='0.6'%20fill='rgba(255,244,214,0.4)'/%3E%3Ccircle%20cx='450'%20cy='746'%20r='0.7'%20fill='rgba(255,255,255,0.48)'/%3E%3Ccircle%20cx='877'%20cy='759'%20r='0.7'%20fill='rgba(255,255,255,0.56)'/%3E%3Ccircle%20cx='607'%20cy='699'%20r='1.0'%20fill='rgba(255,255,255,0.46)'/%3E%3Ccircle%20cx='185'%20cy='557'%20r='1.2'%20fill='rgba(255,255,255,0.68)'/%3E%3Ccircle%20cx='630'%20cy='564'%20r='1.0'%20fill='rgba(255,255,255,0.74)'/%3E%3Ccircle%20cx='661'%20cy='468'%20r='0.8'%20fill='rgba(255,244,214,0.58)'/%3E%3Ccircle%20cx='74'%20cy='94'%20r='0.7'%20fill='rgba(233,168,198,0.61)'/%3E%3Ccircle%20cx='495'%20cy='61'%20r='0.7'%20fill='rgba(255,255,255,0.48)'/%3E%3Ccircle%20cx='883'%20cy='898'%20r='1.0'%20fill='rgba(255,255,255,0.54)'/%3E%3Ccircle%20cx='221'%20cy='155'%20r='0.7'%20fill='rgba(255,255,255,0.86)'/%3E%3Ccircle%20cx='14'%20cy='570'%20r='1.2'%20fill='rgba(255,255,255,0.5)'/%3E%3Ccircle%20cx='562'%20cy='83'%20r='1.0'%20fill='rgba(233,168,198,0.85)'/%3E%3Ccircle%20cx='891'%20cy='762'%20r='0.8'%20fill='rgba(233,168,198,0.7)'/%3E%3Ccircle%20cx='252'%20cy='2'%20r='0.7'%20fill='rgba(255,255,255,0.37)'/%3E%3Ccircle%20cx='425'%20cy='871'%20r='0.5'%20fill='rgba(255,244,214,0.53)'/%3E%3Ccircle%20cx='830'%20cy='533'%20r='0.6'%20fill='rgba(255,255,255,0.36)'/%3E%3Ccircle%20cx='858'%20cy='457'%20r='0.7'%20fill='rgba(233,168,198,0.47)'/%3E%3Ccircle%20cx='664'%20cy='813'%20r='1.0'%20fill='rgba(255,255,255,0.39)'/%3E%3Ccircle%20cx='849'%20cy='590'%20r='1.0'%20fill='rgba(255,255,255,0.7)'/%3E%3Ccircle%20cx='401'%20cy='452'%20r='0.7'%20fill='rgba(255,255,255,0.63)'/%3E%3Ccircle%20cx='504'%20cy='720'%20r='0.5'%20fill='rgba(233,168,198,0.42)'/%3E%3Ccircle%20cx='696'%20cy='642'%20r='1.2'%20fill='rgba(233,168,198,0.6)'/%3E%3Ccircle%20cx='468'%20cy='202'%20r='0.8'%20fill='rgba(255,255,255,0.66)'/%3E%3Ccircle%20cx='468'%20cy='263'%20r='0.5'%20fill='rgba(255,255,255,0.81)'/%3E%3Ccircle%20cx='688'%20cy='271'%20r='0.5'%20fill='rgba(255,244,214,0.5)'/%3E%3Ccircle%20cx='528'%20cy='348'%20r='0.8'%20fill='rgba(255,244,214,0.42)'/%3E%3Ccircle%20cx='333'%20cy='254'%20r='0.5'%20fill='rgba(255,255,255,0.76)'/%3E%3Ccircle%20cx='71'%20cy='687'%20r='0.8'%20fill='rgba(255,255,255,0.59)'/%3E%3Ccircle%20cx='401'%20cy='130'%20r='0.7'%20fill='rgba(255,255,255,0.36)'/%3E%3Ccircle%20cx='206'%20cy='22'%20r='0.8'%20fill='rgba(233,168,198,0.86)'/%3E%3Ccircle%20cx='65'%20cy='406'%20r='0.7'%20fill='rgba(255,255,255,0.42)'/%3E%3Ccircle%20cx='228'%20cy='366'%20r='0.8'%20fill='rgba(233,168,198,0.45)'/%3E%3Ccircle%20cx='110'%20cy='482'%20r='0.6'%20fill='rgba(255,255,255,0.45)'/%3E%3Ccircle%20cx='87'%20cy='532'%20r='0.8'%20fill='rgba(255,255,255,0.86)'/%3E%3Ccircle%20cx='603'%20cy='356'%20r='1.0'%20fill='rgba(233,168,198,0.64)'/%3E%3Ccircle%20cx='684'%20cy='291'%20r='0.5'%20fill='rgba(255,255,255,0.5)'/%3E%3Ccircle%20cx='887'%20cy='846'%20r='0.6'%20fill='rgba(255,255,255,0.56)'/%3E%3Ccircle%20cx='282'%20cy='868'%20r='1.2'%20fill='rgba(255,255,255,0.82)'/%3E%3Ccircle%20cx='472'%20cy='288'%20r='0.5'%20fill='rgba(233,168,198,0.52)'/%3E%3Ccircle%20cx='859'%20cy='375'%20r='1.0'%20fill='rgba(233,168,198,0.8)'/%3E%3Ccircle%20cx='65'%20cy='287'%20r='0.5'%20fill='rgba(255,255,255,0.4)'/%3E%3Ccircle%20cx='693'%20cy='183'%20r='1.0'%20fill='rgba(255,255,255,0.61)'/%3E%3Ccircle%20cx='338'%20cy='326'%20r='0.7'%20fill='rgba(255,255,255,0.51)'/%3E%3Ccircle%20cx='767'%20cy='433'%20r='0.5'%20fill='rgba(255,255,255,0.72)'/%3E%3Ccircle%20cx='564'%20cy='854'%20r='1.2'%20fill='rgba(233,168,198,0.56)'/%3E%3Ccircle%20cx='46'%20cy='619'%20r='0.5'%20fill='rgba(255,255,255,0.71)'/%3E%3Ccircle%20cx='62'%20cy='265'%20r='0.6'%20fill='rgba(255,255,255,0.42)'/%3E%3Ccircle%20cx='664'%20cy='61'%20r='0.7'%20fill='rgba(255,244,214,0.83)'/%3E%3Ccircle%20cx='194'%20cy='63'%20r='0.5'%20fill='rgba(255,255,255,0.45)'/%3E%3Ccircle%20cx='764'%20cy='825'%20r='1.2'%20fill='rgba(233,168,198,0.74)'/%3E%3Ccircle%20cx='357'%20cy='729'%20r='0.6'%20fill='rgba(255,255,255,0.55)'/%3E%3Ccircle%20cx='892'%20cy='810'%20r='0.5'%20fill='rgba(255,255,255,0.43)'/%3E%3Ccircle%20cx='372'%20cy='597'%20r='0.5'%20fill='rgba(255,255,255,0.42)'/%3E%3Ccircle%20cx='481'%20cy='7'%20r='1.2'%20fill='rgba(255,255,255,0.59)'/%3E%3Ccircle%20cx='878'%20cy='336'%20r='1.2'%20fill='rgba(255,255,255,0.7)'/%3E%3Ccircle%20cx='273'%20cy='297'%20r='0.8'%20fill='rgba(255,244,214,0.61)'/%3E%3Ccircle%20cx='193'%20cy='604'%20r='0.8'%20fill='rgba(255,255,255,0.47)'/%3E%3Ccircle%20cx='533'%20cy='73'%20r='0.5'%20fill='rgba(255,255,255,0.78)'/%3E%3Ccircle%20cx='783'%20cy='648'%20r='0.5'%20fill='rgba(233,168,198,0.88)'/%3E%3Ccircle%20cx='454'%20cy='586'%20r='1.0'%20fill='rgba(255,255,255,0.56)'/%3E%3Ccircle%20cx='869'%20cy='798'%20r='1.0'%20fill='rgba(233,168,198,0.74)'/%3E%3Ccircle%20cx='184'%20cy='400'%20r='0.6'%20fill='rgba(255,255,255,0.65)'/%3E%3Ccircle%20cx='533'%20cy='610'%20r='1.2'%20fill='rgba(255,255,255,0.54)'/%3E%3Ccircle%20cx='103'%20cy='656'%20r='1.2'%20fill='rgba(233,168,198,0.7)'/%3E%3Ccircle%20cx='156'%20cy='359'%20r='1.2'%20fill='rgba(255,255,255,0.43)'/%3E%3Ccircle%20cx='819'%20cy='300'%20r='0.6'%20fill='rgba(255,255,255,0.48)'/%3E%3Ccircle%20cx='103'%20cy='441'%20r='0.8'%20fill='rgba(255,255,255,0.77)'/%3E%3Ccircle%20cx='632'%20cy='383'%20r='0.8'%20fill='rgba(255,255,255,0.87)'/%3E%3C/svg%3E"), radial-gradient(ellipse 90% 70% at 50% 18%, var(--night-top) 0%, var(--night-mid) 48%, var(--night-deep) 100%); background-size: 900px 900px, 100% 100%; background-color: var(--night-deep); } main { position: relative; width: 100%; max-width: 34rem; text-align: center; padding-block: 3rem; } .star { display: block; margin: 0 auto 1.4rem; font-size: clamp(3.4rem, 12vw, 5rem); line-height: 1; color: var(--gold); text-shadow: 0 0 22px rgba(240, 207, 120, .55), 0 0 60px rgba(233, 168, 198, .25); } h1 { margin: 0; font-weight: normal; font-variant: small-caps; letter-spacing: .09em; font-size: clamp(1.7rem, 6.2vw, 2.6rem); line-height: 1.15; color: var(--ivory); } .subtitle { margin: .7rem 0 0; font-size: .82rem; letter-spacing: .06em; color: var(--ivory-dim); } /* ---- the gate ---- */ .gate { margin: 2.4rem auto 0; display: flex; gap: .6rem; justify-content: center; align-items: center; } /* the input and its eye toggle share one underline */ .gate .field { position: relative; display: inline-block; width: min(16rem, 70vw); } .gate input { width: 100%; padding: .55rem .2rem; font: inherit; font-size: 1.05rem; letter-spacing: .12em; text-align: center; color: var(--ivory); background: transparent; border: 0; border-bottom: 1px solid var(--ivory-dim); border-radius: 0; outline: none; transition: border-color .3s; } .gate input:focus { border-bottom-color: var(--gold); } .gate .field input { padding-inline: 2rem; } .gate .reveal { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1.9rem; height: 1.9rem; padding: .3rem; display: grid; place-items: center; color: var(--ivory-dim); background: transparent; border: 0; border-radius: 50%; cursor: pointer; } .gate .reveal:hover, .gate .reveal:focus-visible { color: var(--gold); outline: none; } .gate .reveal svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .gate .reveal .eye-shut { display: none; } .gate .reveal[aria-pressed="true"] .eye-open { display: none; } .gate .reveal[aria-pressed="true"] .eye-shut { display: block; } .gate input::placeholder { color: rgba(243, 234, 211, .35); letter-spacing: .04em; } .gate button { width: 2.4rem; height: 2.4rem; flex: none; font: inherit; font-size: 1.1rem; color: var(--gold); background: transparent; border: 1px solid rgba(240, 207, 120, .45); border-radius: 50%; cursor: pointer; transition: border-color .3s, background .3s; } .gate button:hover, .gate button:focus-visible { border-color: var(--gold); background: rgba(240, 207, 120, .08); outline: none; } .gate[aria-busy="true"] button { opacity: .45; cursor: progress; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---- the members' page ---- */ .section { margin-top: 2.6rem; } /* a list of links ends flush, unlike the events above it, so the next heading needs more room to read as a new section */ .links-section + .links-section { margin-top: 3.6rem; } .section h2 { margin: 0 0 1rem; font-weight: normal; font-variant: small-caps; letter-spacing: .14em; font-size: .95rem; color: var(--gold); } .links { list-style: none; margin: 0; padding: 0; } .links li + li { margin-top: .75rem; } .links a { font-size: 1.2rem; color: var(--ivory); text-decoration: none; border-bottom: 1px solid rgba(243, 234, 211, .3); padding-bottom: 2px; transition: color .25s, border-color .25s; } .links a:hover, .links a:focus-visible { color: var(--gold); border-bottom-color: var(--gold); outline: none; } /* forthcoming events */ .events { list-style: none; margin: 0; padding: 0; } .events li { padding: 1rem 0; border-top: 1px solid rgba(243, 234, 211, .14); } .events li:first-child { border-top: 0; padding-top: .2rem; } .events time { display: block; font-size: .82rem; letter-spacing: .06em; color: var(--gold); margin-bottom: .3rem; } .events .ev-title { font-size: 1.2rem; line-height: 1.3; } .events .ev-title a { color: var(--ivory); text-decoration: none; border-bottom: 1px solid rgba(243, 234, 211, .3); } .events .ev-title a:hover, .events .ev-title a:focus-visible { color: var(--gold); border-bottom-color: var(--gold); outline: none; } .events .ev-note { color: var(--ivory-dim); font-style: italic; font-size: 1rem; } .events .ev-venue { margin-top: .2rem; font-size: .92rem; color: var(--ivory-dim); } .events .ev-links { margin-top: .45rem; font-size: .88rem; } .events .ev-links a { color: var(--ivory-dim); text-decoration: none; border-bottom: 1px dotted currentColor; } .events .ev-links a:hover, .events .ev-links a:focus-visible { color: var(--gold); outline: none; } .events .ev-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem; } .events .ev-pending { color: var(--ivory-dim); font-style: italic; } .announcements { list-style: none; margin: 0; padding: 0; } .announcements li { padding: .9rem 0; border-top: 1px solid rgba(243, 234, 211, .14); line-height: 1.55; } .announcements time { display: block; font-size: .8rem; letter-spacing: .08em; color: var(--ivory-dim); margin-bottom: .2rem; } /* keyboard focus, everywhere: a colour change alone is too faint on links that are already gold, so anything reached by Tab also gets a fine dashed ring. :focus-visible keeps it off mouse clicks. !important because the component rules above clear the outline to style their own hover. */ a:focus-visible, button:focus-visible, summary:focus-visible, iframe:focus-visible { outline: 1px dashed var(--gold) !important; outline-offset: 3px; }