:root { --ink:#172127; --muted:#53626b; --paper:#f3f5ef; --white:#fffefa; --blue:#1e5f74; --yellow:#f4bd42; --line:#cbd4cc; --error:#9d2d20; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font:400 1rem/1.55 Arial, Helvetica, sans-serif; } a { color:inherit; } .skip-link { position:absolute; left:1rem; top:-5rem; background:var(--ink); color:var(--white); padding:.65rem 1rem; z-index:2; } .skip-link:focus { top:1rem; } .site-header, main, footer { max-width:1200px; margin:auto; } .site-header { display:flex; justify-content:space-between; align-items:center; padding:1.4rem 2rem; } .brand { display:flex; align-items:center; gap:.6rem; font-weight:800; text-decoration:none; letter-spacing:-.03em; } .brand span { display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--yellow); font-size:.75rem; letter-spacing:0; } nav { display:flex; flex-wrap:wrap; gap:1.25rem; } nav a, .text-link { text-underline-offset:.35em; text-decoration-thickness:1px; } .hero { min-height:560px; display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; padding:4.5rem 2rem 5rem; } .kicker { color:var(--blue); font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin:0 0:.7rem; } h1, h2, h3, p { margin-top:0; } h1, h2, h3 { line-height:1; letter-spacing:-.04em; } h1 { max-width:9ch; font-size:clamp(3.5rem, 8vw, 6rem); margin-bottom:1.2rem; } h2 { font-size:clamp(2.25rem, 5vw, 4.3rem); max-width:13ch; margin-bottom:1rem; } h3 { font-size:1.55rem; margin-bottom:.55rem; text-transform:capitalize; } .lede { max-width:54ch; color:var(--muted); font-size:1.12rem; } .button { display:inline-flex; gap:.7rem; align-items:center; padding:.85rem 1.05rem; background:var(--ink); color:var(--white); border-radius:.75rem; font-weight:700; text-decoration:none; } .button:hover { background:var(--blue); } a:focus-visible { outline:3px solid var(--yellow); outline-offset:4px; } .signal-board { align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding:2rem; background:var(--ink); color:#dff4cc; border-radius:1rem; box-shadow:16px 18px 0 rgba(30,95,116,.2); } .signal-board p { font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:#adc99c; } .signal-board strong { max-width:7ch; font-size:clamp(2.25rem, 4vw, 3.8rem); line-height:.95; letter-spacing:-.04em; } .signal-board small { color:#adc99c; } .signal-line { display:flex; align-items:center; height:130px; gap:5px; margin:2rem 0; } .signal-line i { width:7%; height:var(--h); background:#b6ff78; transform-origin:center; animation:pulse 2.4s ease-in-out infinite; } .signal-line i:nth-child(1) { --h:12%; } .signal-line i:nth-child(2) { --h:55%; } .signal-line i:nth-child(3) { --h:28%; } .signal-line i:nth-child(4) { --h:87%; } .signal-line i:nth-child(5) { --h:42%; } .signal-line i:nth-child(6) { --h:70%; } .signal-line i:nth-child(7) { --h:22%; } .signal-line i:nth-child(8) { --h:60%; } .signal-line i:nth-child(9) { --h:30%; } .signal-line i:nth-child(10) { --h:78%; } @keyframes pulse { 50% { filter:brightness(.6); transform:scaleY(.75); } } .intro, .updates, .gallery, .visit { padding:5.5rem 2rem; } .intro { background:var(--yellow); max-width:none; padding-left:max(2rem, calc((100vw - 1200px)/2 + 2rem)); padding-right:max(2rem, calc((100vw - 1200px)/2 + 2rem)); } .intro p:last-child { max-width:65ch; } .section-heading { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:2rem; } .section-heading h2 { margin:0; } .data-status { margin:0; color:var(--muted); text-align:right; font-size:.9rem; } .data-status.error { color:var(--error); font-weight:700; } .news-list { border-top:1px solid var(--line); } .news-item { display:grid; grid-template-columns:180px minmax(0, 1fr); column-gap:2rem; padding:1.5rem 0; border-bottom:1px solid var(--line); } .news-item > p:not(.news-meta) { grid-column:2; max-width:60ch; margin-bottom:0; color:var(--muted); } .news-meta { grid-row:span 2; margin:0; color:var(--blue); font-size:.83rem; font-weight:700; } .news-item h3 { grid-column:2; } .gallery { background:var(--white); max-width:none; padding-left:max(2rem, calc((100vw - 1200px)/2 + 2rem)); padding-right:max(2rem, calc((100vw - 1200px)/2 + 2rem)); } .gallery-list { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem; } figure { margin:0; } figure:nth-child(2) { margin-top:3rem; } figure:nth-child(3) { margin-top:1rem; } figure img { display:block; width:100%; aspect-ratio:1/1.05; object-fit:cover; background:#dce6de; border-radius:.8rem; } figcaption { margin-top:.7rem; color:var(--muted); font-size:.9rem; text-transform:capitalize; } .empty { color:var(--muted); } .visit { max-width:850px; } .visit p:not(.kicker) { max-width:62ch; color:var(--muted); } .text-link { font-weight:700; } footer { padding:2rem; color:var(--muted); font-size:.9rem; } @media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; } } @media (max-width:700px) { .site-header { align-items:flex-start; gap:1rem; flex-direction:column; } nav { gap:.9rem; } .hero { min-height:auto; grid-template-columns:1fr; padding-top:3rem; gap:2rem; } .signal-board { min-height:360px; } .section-heading { display:block; } .data-status { text-align:left; margin-top:1rem; } .news-item { display:block; } .news-meta { margin-bottom:.7rem; } .news-item > p:not(.news-meta) { max-width:100%; } .gallery-list { grid-template-columns:1fr; gap:2rem; } figure:nth-child(n) { margin-top:0; } }