@font-face { font-family: "Grand Hotel"; font-style: normal; font-weight: 400; font-display: optional; src: url("/assets/fonts/grand-hotel.woff2") format("woff2"); } @font-face { font-family: Lato; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/lato-regular.woff2") format("woff2"); } @font-face { font-family: Lato; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/lato-bold.woff2") format("woff2"); } @font-face { font-family: "Yanone Kaffeesatz"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/yanone-kaffeesatz-light.woff2") format("woff2"); } @font-face { font-family: "Yanone Kaffeesatz"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/yanone-kaffeesatz-regular.woff2") format("woff2"); } :root { --blue: #287abd; --ink: #292929; --paper: #fafafa; } * { box-sizing: border-box; } html, body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font: 16px/1.5 Lato, Arial, sans-serif; } a { color: var(--ink); text-decoration: underline; } header { background: var(--blue); border-bottom: 1px solid #17619f; box-shadow: 0 2px 10px #0003; } .nav-wrap { max-width: 1140px; margin: auto; min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 10px 0; } .brand img { display: block; width: 240px; height: auto; } .nav { display: flex; gap: 28px; align-items: center; } .nav a { color: #fff; text-decoration: none; text-transform: uppercase; font: 300 22px/1 "Yanone Kaffeesatz", sans-serif; } .nav a:hover { text-decoration: underline; } .content { max-width: 1140px; width: calc(100% - 40px); margin: 0 auto 72px; } .layout { display: grid; grid-template-columns: minmax(0, 750px) 300px; gap: 90px; margin-top: 60px; } .layout.full { display: block; } main h1 { font: 400 52px/1.1 "Grand Hotel", serif; margin: 0 0 24px; } .entry p { margin: 24px 0; } .entry ul { margin: 0; } .entry p + ul { margin-top: -24px; } .entry h2, .entry h3 { font: 300 32px/1.2 "Yanone Kaffeesatz", sans-serif; margin: 28px 0 12px; } .entry hr { border: 0; border-top: 1px solid #0002; margin: 30px 0; } .entry figure { margin: 24px 0; } .entry img { display: block; width: 100%; height: auto; } .entry figure + figure { margin-top: 24px; } .entry figure img { max-height: 520px; object-fit: cover; } .sidebar h2 { font: 300 30px/1 "Yanone Kaffeesatz", sans-serif; text-transform: uppercase; margin: 10px 0 30px; } .sidebar { margin-top: 0; } .sidebar section { margin: 0 0 58px; } .sidebar .green { color: green; font-weight: 700; } .map { width: 100%; height: 300px; border: 0; } .home-intro { margin-top: 0; } .home-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 24px 0; } .home-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .thoughts { text-align: center; margin: 24px; } .thoughts img { width: 150px; margin: auto; } footer { background: var(--blue); color: #fff; padding: 50px 0 18px; } .footer-inner { max-width: 1140px; margin: auto; } .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; gap: 20px; margin-bottom: 65px; } footer a { color: #fff; } footer p { text-align: center; font: 300 24px "Yanone Kaffeesatz", sans-serif; margin: 0; } .footer img { height: 30px; vertical-align: middle; } @media (max-width: 760px) { .nav-wrap { padding: 12px 20px; display: block; } .brand img { margin: auto; } .nav { justify-content: center; gap: 15px; margin-top: 20px; } .nav a { font-size: 22px; } .content { width: calc(100% - 24px); padding: 0; } .layout { display: block; margin-top: 35px; } .sidebar { margin-top: 55px; } main h1 { font-size: 44px; } .footer-inner { padding: 0 12px; } .home-gallery { gap: 4px; } } /* Equipment area cards */ .area-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0 40px; } .area-card { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; color: #fff; text-decoration: underline; background: #222; } .area-card::after { position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, #000b); content: ""; } .area-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 180ms ease; } .area-card span { position: absolute; z-index: 1; bottom: 28px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: clamp(1.5rem, 3vw, 2.4rem); text-shadow: 0 1px 4px #000; } .area-card:hover img, .area-card:focus-visible img { transform: scale(1.04); } @media (max-width: 560px) { .area-grid { width: calc(100% - 56px); margin-right: auto; margin-left: auto; grid-template-columns: 1fr; } }