/* ========================================================================== City of Coyote Flats — component styles Reproduces the measured source system in assets/css/tokens.css. Every colour, size, radius and duration is referenced through a token. Literal values here would both duplicate the system and trip the token discipline gate. ========================================================================== */ /* --- Fonts: self-hosted, latin subset only -------------------------------- */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/poppins-300.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--page-bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-light); line-height: var(--lh-body); } img, picture, svg, iframe { max-width: 100%; } img { height: auto; display: block; } /* --- Skip link ------------------------------------------------------------ */ .skip-link { position: absolute; left: var(--space-2); top: calc(var(--space-8) * -1); z-index: 100; background: var(--white); color: var(--brand-blue); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-weight: var(--fw-bold); text-decoration: none; transition: top var(--dur-fast) var(--ease); } .skip-link:focus { top: var(--space-2); } /* --- Focus: the source has none. This is the accessibility floor. --------- */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--brand-red); outline-offset: 2px; border-radius: var(--radius-sm); } .on-photo :where(a, button):focus-visible { outline-color: var(--white); } /* --- Layout: one container, backgrounds go full bleed --------------------- */ .section { padding-inline: var(--gutter); } .section > .inner { max-width: var(--container); margin-inline: auto; } .section--wide > .inner { max-width: var(--container-wide); } .section--bleed { padding-inline: 0; } .section--bleed > .inner { padding-inline: var(--gutter); } .prose { max-width: var(--measure); } /* --- Typography ----------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-head); margin: 0 0 var(--space-4); } h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-h1); } h2 { font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-h2); } h3 { font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: var(--lh-h3); } h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: var(--lh-h4); } p { margin: 0 0 var(--space-4); } a { color: var(--brand-blue); } a:hover { font-weight: var(--fw-bold); } /* the source's one hover rule */ /* --- Header + nav over photography ---------------------------------------- */ /* The photograph belongs to the top of the page, not to one section: the source runs it continuously behind the logo, the nav and the hero. Painting it on keeps it unbroken; each .masthead section lays its own scrim over its slice of it. */ .masthead { position: relative; color: var(--white); background-size: cover; background-position: center; } /* Header and nav sit ON the photograph, as the source has them: one cover-sized image backs the whole top region instead of a body background that runs out partway down a tall hero. */ .masthead-top, [data-section="nav"] { position: absolute; left: 0; right: 0; z-index: 20; background: none; } .masthead-top { top: 18px; pointer-events: none; } /* Only the bar itself ignores pointer events; everything interactive inside it must take them back or the menu button cannot be tapped at all. */ .masthead-top .brandbar__logo, .masthead-top .nav__toggle { pointer-events: auto; } [data-section="nav"] { top: 30px; } .masthead-top::before, [data-section="nav"]::before { display: none; } .hero, .page-title { padding-top: 210px; } /* Source sets white type straight onto photography with no scrim. Text over an image cannot be contrast-checked mechanically, so a scrim is the only way to guarantee AA rather than assume it. */ .masthead::before { content: ""; position: absolute; inset: 0; background: var(--scrim); } .masthead > * { position: relative; } .masthead a { color: var(--white); } .brandbar { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding-block: var(--space-3); } .brandbar img { width: 118px; height: auto; } .nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; } /* The logo sits centred between the second and third nav items on the source, so the row needs a gap wide enough to hold it. */ @media (min-width: 1025px) { .nav__list > li:nth-child(2) { margin-right: 150px; } } .nav__list a { font-size: var(--fs-nav); font-weight: var(--fw-medium); letter-spacing: var(--ls-nav); text-transform: capitalize; text-decoration: none; display: inline-block; padding-block: var(--space-2); } .nav__list a[aria-current="page"] { font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 6px; } .nav__toggle { display: none; background: none; border: 0; color: var(--white); font: inherit; font-size: var(--fs-h4); cursor: pointer; padding: var(--space-2); } /* --- Page title band: desktop and tablet only (source: hide-for-small) ----- */ .page-title { padding-bottom: var(--space-5); } .page-title h1 { margin: 0; color: var(--white); } .breadcrumb { padding-block: var(--space-3); font-size: var(--fs-small); background: var(--page-bg); } .breadcrumb ol { list-style: none; display: flex; gap: var(--space-2); margin: 0; padding: 0; } /* --- Hero (homepage) ------------------------------------------------------- */ .hero { display: grid; align-items: center; padding-bottom: var(--space-6); text-align: center; } .hero__title { font-size: clamp(var(--fs-h1), 6vw, var(--fs-display)); line-height: var(--lh-display); font-weight: var(--fw-bold); color: var(--white); margin: 0; } .hero__eyebrow { font-size: clamp(var(--fs-h4), 2.5vw, var(--fs-h3)); font-weight: var(--fw-medium); color: var(--white); margin: 0 0 var(--space-2); } /* --- Content panels -------------------------------------------------------- */ .band { padding-block: var(--space-5) var(--space-7); background: var(--page-bg); } .band--alt { padding-block: var(--space-6) var(--space-7); } .panel { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-5); } .panel > :last-child { margin-bottom: 0; } .grid { display: grid; gap: var(--space-5); } @media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } } /* --- Tables: source has no responsive treatment; wide tables overflowed ---- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { border-collapse: collapse; width: 100%; min-width: 32rem; } caption { text-align: left; font-weight: var(--fw-bold); padding-bottom: var(--space-3); } /* Source cells are 1px 10px. Kept tight to match, with just enough vertical room to stay a comfortable tap target. */ th, td { text-align: left; padding: var(--space-1) 10px; border-bottom: var(--border-hairline) solid var(--border-subtle); line-height: 1.4; } th { font-weight: var(--fw-bold); } td { font-weight: var(--fw-light); } /* --- Buttons --------------------------------------------------------------- */ .btn { display: inline-block; background: var(--brand-red); color: var(--white); font-weight: var(--fw-bold); text-decoration: none; padding: var(--space-3) var(--space-5); border-radius: var(--radius); border: 0; cursor: pointer; font-size: var(--fs-body); font-family: inherit; transition: opacity var(--dur-fast) var(--ease); } .btn:hover { opacity: 0.9; } .btn--ghost { background: transparent; color: var(--brand-blue); border: var(--border-hairline) solid var(--brand-blue); } /* --- Forms ----------------------------------------------------------------- */ .field { margin-bottom: var(--space-4); } .field label { display: block; font-weight: var(--fw-medium); margin-bottom: var(--space-2); } .field input:not([type="checkbox"]), .field textarea { width: 100%; font: inherit; padding: var(--space-3); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--white); color: var(--text); } .field textarea { min-height: 8rem; } /* Consent checkbox sits inline with its label. Without this it inherited the full-width input rule and rendered as a 350px-wide checkbox. */ .field--check { display: flex; align-items: flex-start; gap: var(--space-2); } .field--check label { margin: 0; font-weight: var(--fw-light); } .field--check input { flex: 0 0 auto; margin-top: 0.25em; } .field .req { color: var(--brand-red); } .field-error { color: var(--brand-red); font-weight: var(--fw-medium); margin-top: var(--space-2); } .form-status { margin-top: var(--space-4); font-weight: var(--fw-medium); } .form-status[data-state="error"] { color: var(--brand-red); } /* Spam honeypot. left:-9999px extends the document's scroll area, which the runtime check correctly flagged as a 7px horizontal overflow on every page. Clipping hides it without creating a scroll region. */ .hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Modal ----------------------------------------------------------------- */ .modal[hidden] { display: none; } .modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--gutter); background: var(--scrim-strong); } .modal__panel { background: var(--surface); border-radius: var(--radius); max-width: 40rem; width: 100%; max-height: 90vh; overflow-y: auto; padding: var(--space-5); box-shadow: var(--shadow); } .modal__head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); } .modal__close { background: none; border: 0; font-size: var(--fs-h3); cursor: pointer; color: var(--text); line-height: 1; padding: var(--space-2); } /* --- Footer ---------------------------------------------------------------- */ /* 15px solid red rule across the top of the blue band, measured from source */ .site-footer { background: var(--brand-blue); color: var(--white); padding-block: var(--space-6); border-top: 15px solid var(--brand-red); } .site-footer a { color: var(--white); } .site-footer h2 { font-size: var(--fs-h4); font-weight: var(--fw-bold); } .footer-cols { display: grid; gap: var(--space-5); } @media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1025px) { .footer-cols { grid-template-columns: 1fr 1fr 1.4fr 0.8fr; } } /* Do not let a nowrap button set the column's minimum width — at tablet the donate column is narrower than the button and pushed the page sideways. */ .footer-donate .btn { display: inline-block; max-width: 100%; } .footer-copy { opacity: 0.85; } .footer-note { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--rule-on-blue); } /* --- Embeds ---------------------------------------------------------------- */ /* Embeds are sized by explicit height, never aspect-ratio. A ratio combined with any height (min-, max- or fixed) makes the browser compute the WIDTH from the height, which pushed the map to 1440px inside a 1312px column and the calendar to 720px inside a 390px phone. */ .embed { position: relative; width: 100%; } .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* --- Responsive: source breakpoints --------------------------------------- */ @media (max-width: 767px) { /* Source marks the interior page-title band hide-for-small */ .page-title { display: none; } /* The header is a normal bar on small screens, not an overlay: the drawer needs to push the page rather than float over a hero it no longer sits on. */ .masthead-top { position: static; pointer-events: auto; background: var(--brand-blue); } .masthead-top::before { display: none; } [data-section="nav"] { position: static; } .hero, .page-title { padding-top: var(--space-5); } .brandbar { justify-content: space-between; } .brandbar img { width: 88px; } .nav__toggle { display: block; } .nav__list { display: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--brand-red); padding: var(--space-3) var(--space-4); margin-inline: calc(var(--gutter) * -1); } .nav__list[data-open="true"] { display: flex; } .nav__list a, .nav__group-btn { padding-block: var(--space-3); width: 100%; text-align: left; color: var(--white); } .nav__list > li:nth-child(2) { margin-right: 0; } .nav__sub a { padding-block: var(--space-2); } .brandbar { position: relative; } .hero { min-height: 48vh; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --- Masthead photography, measured from the source ----------------------- */ /* /submit-request had no background image at all, which is why its white nav rendered white-on-white. It is an interior page and gets the interior treatment the other twelve already use. */ .section.masthead--home { background-image: url("../img/pexels-photo-998065-1920w.jpeg"); } .section.masthead--interior { background-image: url("../img/old-windmill-with-trees-and-bluebonnets-in-the-tex-2025-01-09-09-01-23-utc-2880w.jpg"); } .section.masthead--news { background-image: url("../img/shot-of-a-white-cow-grazing-in-a-green-meadow-at-2025-02-11-23-59-28-utc-2880w.jpeg"); } /* Calendar section: photograph under a white wash, as the source has it. */ .band--photo { position: relative; background-image: url("../img/pexels-photo-1435554-1920w.jpeg"); background-size: cover; background-position: center; } .band--photo::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.62); } .band--photo > .inner { position: relative; } /* --- Nav dropdown groups ------------------------------------------------- Sub-lists are visible by default so the whole nav works with JS disabled. JS adds data-collapsible, and only then do they collapse. */ .nav__group { position: relative; } .nav__group-btn { background: none; border: 0; color: inherit; font: inherit; font-size: var(--fs-nav); font-weight: var(--fw-medium); letter-spacing: var(--ls-nav); text-transform: capitalize; cursor: pointer; padding: var(--space-2) 0; } .nav__sub { list-style: none; margin: 0; padding: 0; } .nav__sub[data-collapsible="true"] { display: none; } .nav__group-btn[aria-expanded="true"] + .nav__sub[data-collapsible="true"] { display: block; } @media (min-width: 768px) { .nav__sub[data-collapsible="true"] { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 15rem; background: var(--brand-blue); padding: var(--space-3); border-radius: var(--radius); box-shadow: var(--shadow); } .nav__sub a { display: block; padding-block: var(--space-2); } } @media (max-width: 767px) { .nav__sub { padding-left: var(--space-4); } .nav__group-btn { width: 100%; text-align: left; } } /* --- Mobile overflow ------------------------------------------------------- Grid and flex children default to min-width:auto, so a long word, a URL or a wide table pushes the whole page sideways instead of shrinking. The source has this bug; the runtime check catches it. */ .grid > *, .footer-cols > * { min-width: 0; } .breadcrumb ol { flex-wrap: wrap; } .section .inner { overflow-wrap: anywhere; } .site-footer p, .site-footer li { overflow-wrap: anywhere; } .vgm-credit { flex-wrap: wrap; max-width: 100%; } /* --- VGM design credit --------------------------------------------------- Moved out of the partial: