/* Theme Name: The Blackbird Residency Theme URI: https://theblackbirdresidency.com Author: Nicole V Riggs Description: Custom theme for The Blackbird Residency — an artist residency in Bozeman, Montana. Built from the approved design. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: blackbird */ /* ========================================================= The Blackbird Residency — site styles Brand palette + typography as documented in the handoff. ========================================================= */ /* ---- Optima (display font) ------------------------------- When you license Optima, drop the web-font files into /fonts (e.g. Optima.woff2 / Optima-Italic.woff2) and the @font-face blocks below will pick them up automatically. Until then, the stack falls back to Candara / Segoe UI / Georgia, exactly as the design specifies. ----------------------------------------------------------- */ @font-face { font-family: "Optima"; src: url("fonts/Optima.woff2") format("woff2"), url("fonts/Optima.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Optima"; src: url("fonts/Optima-Italic.woff2") format("woff2"), url("fonts/Optima-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; } :root { /* Brand palette */ --ink: #171410; --charcoal: #2E2A26; --charcoal-2: #2c2722; /* the slightly warmer charcoal used in body copy */ --body-text: #43403a; --sage: #7C7763; --sage-sky: #9AA59F; --linen: #E8E2D6; /* the single light ground — page backgrounds, cards, panels */ --stone-light:#DDD8CE; /* subtle inset fill — e.g. form fields on the linen ground */ --cream: #F4EFE8; /* light text/foreground on dark (sage) grounds */ --oxblood: #6B2228; --gold: #B8821E; --gold-bright:#E9C25E; --warm-grey: #9A9080; --stone: #C8BFB0; --field: var(--stone-light); /* form fields: stone-light inset on the linen page */ --field-border:var(--stone); /* stone hairline border */ /* Type */ --display: Optima, "Optima Nova LT Pro", Candara, "Segoe UI", Georgia, serif; --body: Montserrat, system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--linen); overflow-x: hidden; } a { text-decoration: none; color: inherit; } img { max-width: 100%; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; } /* ---------- Announcement bar ---------- */ .announce { background: var(--oxblood); color: var(--cream); text-align: center; padding: 11px 20px; font-size: 12.5px; font-weight: 400; letter-spacing: .06em; } .announce a { color: var(--gold-bright); font-weight: 500; border-bottom: 1px solid rgba(233, 194, 94, .5); padding-bottom: 1px; } /* Hide the bar by adding class "no-announce" to */ body.no-announce .announce { display: none; } /* ---------- Header / nav ---------- */ .site-header { position: absolute; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 26px 56px; top: 40px; /* sits below the announcement bar */ } body.no-announce .site-header { top: 0; } .site-header .logo img { height: 46px; width: auto; display: block; } .nav { display: flex; align-items: center; gap: 40px; } .nav a.navlink { color: var(--ink); font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; transition: color .15s ease; } .nav a.navlink:hover { color: var(--oxblood); } /* The current page's nav item is highlighted gold-bright over the hero */ .nav a.navlink.is-active { color: var(--gold-bright); } /* Contact button in nav */ .nav .btn-contact { border: 1px solid rgba(23, 20, 16, .4); color: var(--ink); font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 10px 20px; border-radius: 2px; transition: background .15s ease, color .15s ease, border-color .15s ease; } .nav .btn-contact:hover { background: var(--oxblood); border-color: var(--oxblood); color: var(--cream); } .nav .btn-contact.is-active { background: var(--oxblood); border-color: var(--oxblood); color: var(--cream); } /* Mobile menu toggle (hidden on desktop) */ .nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; width: 44px; height: 44px; } .nav-toggle span { display: block; width: 24px; height: 2px; margin: 5px auto; background: var(--ink); transition: background .15s ease; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 16px 30px; border-radius: 2px; border: 1px solid transparent; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .btn-gold { background: var(--gold-bright); color: var(--ink); } .btn-gold:hover { background: var(--cream); } .btn-outline-light { border-color: rgba(239, 233, 223, .5); color: var(--cream); background: transparent; } .btn-outline-light:hover { border-color: var(--gold-bright); color: var(--gold-bright); } .btn-oxblood { background: var(--oxblood); color: var(--cream); border: none; font-size: 12.5px; letter-spacing: .12em; padding: 15px 32px; } .btn-oxblood:hover { background: var(--ink); } /* ---------- Hero ---------- */ .hero { position: relative; text-align: center; } .hero-home { min-height: 92vh; display: flex; align-items: center; justify-content: center; background: var(--sage); } .hero-home .hero-inner { padding: 120px 32px 80px; max-width: 1000px; } .hero-sage { background: var(--sage); padding: 200px 56px 96px; } .hero-sagesky { background: var(--sage-sky); padding: 150px 56px 60px; } /* Uniform sizing for the interior page heroes (About, Residencies, Community): one fixed band height with vertically-centered content, so differing subhead lengths no longer make some heroes taller than others. */ .hero-page { min-height: 509px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120px 56px 64px; } .hero-inner { position: relative; z-index: 2; margin: 0 auto; max-width: 900px; } .eyebrow { font-size: 12.5px; font-weight: 500; letter-spacing: .36em; text-transform: uppercase; } .eyebrow-gold { color: var(--gold-bright); } .eyebrow-oxblood{ color: var(--oxblood); } .hero h1 { letter-spacing: -.015em; line-height: 1; margin: 0; } .hero-home h1 { font-size: 104px; line-height: .96; color: var(--cream); } .hero-home h1 .accent { font-style: italic; color: var(--gold-bright); } .hero h1 .italic { font-style: italic; } /* Interior page-title sizes (the home hero keeps its own 104px above) */ .hero-sagesky h1 { font-size: 72px; } /* Contact */ .hero-page h1 { font-size: 82px; } /* About, Residencies, Community (overrides the line above for About) */ .hero-light h1 { color: var(--cream); } .hero-ink h1 { color: var(--ink); } .hero-eyebrow { margin-bottom: 26px; } .hero-home .hero-eyebrow { margin-bottom: 30px; } .hero-sagesky .hero-eyebrow { margin-bottom: 22px; } .hero-sub { font-family: var(--body); font-weight: 300; font-size: 20px; line-height: 1.6; color: rgba(244, 239, 232, .86); max-width: 760px; margin: 30px auto 0; } /* Dark subhead on the lighter sage-sky heroes (About, Community) */ .hero-ink .hero-sub { color: var(--charcoal-2); } .hero-home .hero-sub { font-size: 19px; line-height: 1.6; max-width: 560px; margin-top: 34px; } .hero-actions { display: flex; gap: 16px; justify-content: center; margin-top: 42px; flex-wrap: wrap; } /* ---------- Generic section / layout helpers ---------- */ .section { padding: 120px 56px; } .wrap { max-width: 1120px; margin: 0 auto; } .wrap-narrow { max-width: 920px; margin: 0 auto; } .wrap-720 { max-width: 720px; margin: 0 auto; } .center { text-align: center; } /* Eyebrow with a gold rule before it */ .rule-eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 38px; } .rule-eyebrow .rule { height: 1px; width: 48px; background: var(--gold); flex: none; } .rule-eyebrow .label { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--oxblood); } /* ---------- Mission (home) ---------- */ .mission { background: var(--linen); padding: 120px 56px; } .mission .statement { font-family: var(--display); font-size: 33px; line-height: 1.4; letter-spacing: -.005em; color: var(--charcoal-2); margin: 0 0 46px; max-width: 20ch; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .two-col p { font-weight: 300; font-size: 17px; line-height: 1.75; color: var(--body-text); margin: 0; } /* ---------- Two-path cards (home) ---------- */ .paths { background: var(--linen); padding: 8px 56px 96px; } .paths .grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; } .card { border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; } .card .topbar { height: 6px; } .topbar-gold { background: var(--gold-bright); } .topbar-gold-deep { background: var(--gold); } .card .card-body { padding: 52px 44px 46px; flex: 1; display: flex; flex-direction: column; } .card-sage { background: var(--sage); color: var(--cream); } .card-sagesky { background: var(--sage-sky); color: var(--charcoal-2); } .card .card-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 14px; } .card-sage .card-eyebrow { color: var(--gold-bright); } .card-sagesky .card-eyebrow { color: var(--oxblood); } .card h3 { font-size: 30px; margin: 0 0 14px; } .card-sagesky h3 { color: var(--ink); } .card p { font-weight: 300; font-size: 16px; line-height: 1.7; margin: 0 0 26px; } .card-sage p { color: rgba(244, 239, 232, .85); } .card-sagesky p { color: var(--charcoal-2); } .card .italic { font-style: italic; } .arrow-link { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding-bottom: 4px; margin-top: auto; transition: color .15s ease, border-color .15s ease; } .card-sage .arrow-link { color: var(--cream); border-bottom: 1px solid rgba(244, 239, 232, .4); } .card-sage .arrow-link:hover { color: var(--gold-bright); border-color: var(--gold-bright); } .card-sagesky .arrow-link { color: var(--ink); border-bottom: 1px solid rgba(23, 20, 16, .35); } .card-sagesky .arrow-link:hover { color: var(--oxblood); border-color: var(--oxblood); } /* ---------- Centered Optima intro (residencies / community) ---------- */ .lead-intro { background: var(--linen); padding: 96px 56px 40px; } .lead-intro p { font-family: var(--display); font-size: 23px; line-height: 1.5; color: var(--charcoal-2); margin: 0; } /* ---------- Belief quote (about) ---------- */ .belief { background: var(--linen); padding: 88px 56px 32px; text-align: center; } .belief p { font-family: var(--display); font-size: 34px; line-height: 1.45; letter-spacing: -.01em; color: var(--ink); margin: 0 auto; } .belief .gold { font-style: italic; color: var(--gold); } /* ---------- Founder's statement (about) ---------- */ .statement-section { background: var(--linen); padding: 64px 56px 40px; } .statement-section p.body { font-weight: 300; font-size: 17px; line-height: 1.85; color: var(--charcoal-2); margin: 0 0 20px; } .pullquote { margin: 40px 0; padding: 6px 0 6px 30px; border-left: 2px solid var(--gold); } .pullquote p { font-family: var(--display); font-style: italic; font-size: 23px; line-height: 1.42; color: var(--oxblood); margin: 0; } .signature { margin-top: 40px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .signature .name { font-family: var(--display); font-style: italic; font-size: 22px; color: var(--ink); } .signature .role { font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--warm-grey); } /* ---------- Residency / program panels (residencies + community) ---------- */ .panel-section { background: var(--linen); padding: 48px 56px; } .panel-section.last { padding-bottom: 88px; } .panel { max-width: 1120px; margin: 0 auto; border-radius: 5px; overflow: hidden; } .panel-sage { background: var(--sage); } .panel-sagesky { background: var(--sage-sky); } .panel .split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } /* Community uses asymmetric splits */ .split-85-115 { grid-template-columns: .85fr 1.15fr; } .split-115-85 { grid-template-columns: 1.15fr .85fr; } .panel-narrative { padding: 56px 50px; } .panel-narrative.on-sage { color: var(--cream); } .panel-narrative.on-sagesky { color: var(--ink); } .panel-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 16px; } .on-sage .panel-eyebrow { color: var(--gold-bright); } .on-sagesky .panel-eyebrow { color: var(--oxblood); } .panel-title { font-size: 58px; line-height: 1; margin: 0 0 8px; } .on-sagesky .panel-title { color: var(--ink); } /* Community program titles are a touch smaller */ .panel-title-md { font-size: 48px; line-height: 1.02; margin: 0 0 10px; } .panel-title-sm { font-size: 46px; line-height: 1.04; margin: 0 0 10px; } .panel-tag { font-family: var(--display); font-style: italic; font-size: 20px; margin-bottom: 26px; } .panel-tag-sm { font-size: 18px; margin-bottom: 0; } .on-sage .panel-tag { color: var(--gold-bright); } .on-sagesky .panel-tag { color: var(--oxblood); } .panel-narrative p.body { font-weight: 300; font-size: 16.5px; line-height: 1.75; margin: 0 0 28px; } .on-sage p.body { color: rgba(244, 239, 232, .88); } .on-sagesky p.body { color: var(--charcoal-2); } /* Pills / inline badges */ .pill { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-radius: 2px; padding: 10px 18px; } .pill-outline-gold { color: var(--gold-bright); border: 1px solid rgba(233, 194, 94, .5); } .pill-oxblood { background: var(--oxblood); color: var(--cream); letter-spacing: .12em; padding: 14px 24px; } .eligibility { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: #4a443c; margin-top: 16px; } /* Linen list panel inside residency cards */ .panel-list { background: var(--linen); padding: 56px 50px; color: var(--charcoal-2); display: flex; flex-direction: column; gap: 30px; justify-content: center; border: 1px solid var(--stone); } .panel-list h4 { font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--oxblood); margin: 0 0 16px; } .panel-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .panel-list li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.55; } .panel-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } /* Narrative copy block (community panels, justified center) */ .panel-copy { background: var(--linen); padding: 56px 50px; color: var(--charcoal-2); display: flex; flex-direction: column; justify-content: center; gap: 18px; border: 1px solid var(--stone); } .panel-copy p { font-weight: 300; font-size: 16.5px; line-height: 1.78; margin: 0; } .panel-narrative.centered { display: flex; flex-direction: column; justify-content: center; } /* ---------- Bridge closing (community) ---------- */ .bridge { background: var(--linen); padding: 40px 56px 104px; text-align: center; } .bridge img { height: 54px; width: auto; margin: 0 auto 28px; display: block; } .bridge p { font-family: var(--display); font-size: 30px; line-height: 1.4; letter-spacing: -.01em; color: var(--ink); max-width: 20ch; margin: 0 auto; } .bridge .italic { font-style: italic; } /* ---------- Contact ---------- */ .contact-body { background: var(--linen); padding: 80px 56px 96px; } .contact-grid { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; } .contact-intro { font-family: var(--display); font-size: 25px; line-height: 1.45; color: var(--charcoal-2); margin: 0 0 32px; } .contact-details { display: flex; flex-direction: column; gap: 22px; } .detail-label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--oxblood); margin-bottom: 7px; } .detail-value { font-size: 16px; color: var(--charcoal-2); line-height: 1.6; } a.detail-value, .contact-details a { font-size: 16px; color: var(--charcoal-2); border-bottom: 1px solid rgba(23, 20, 16, .25); padding-bottom: 2px; transition: color .15s ease, border-color .15s ease; } .contact-details a:hover { color: var(--oxblood); border-color: var(--oxblood); } .contact-form { display: flex; flex-direction: column; gap: 22px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .field { display: flex; flex-direction: column; gap: 9px; } .field label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--oxblood); } .field input, .field textarea { font-family: var(--body); font-size: 15px; font-weight: 300; color: var(--ink); background: var(--field); border: 1px solid var(--field-border); border-radius: 3px; padding: 14px 16px; } .field textarea { resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--warm-grey); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--oxblood); } .contact-form button { align-self: flex-start; } /* ---------- Footer ---------- */ .site-footer { background: var(--sage); color: var(--ink); padding: 48px 56px 36px; } .site-footer.spaced { margin-top: 60px; } .footer-top { max-width: 1120px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; flex-wrap: wrap; } .footer-brand { max-width: 340px; } .footer-brand img { height: 50px; width: auto; display: block; margin-bottom: 22px; } .footer-brand p { font-size: 14px; line-height: 1.7; font-weight: 300; margin: 0; color: var(--ink); } .footer-cols { display: flex; gap: 64px; flex-wrap: wrap; } .footer-col { display: flex; flex-direction: column; gap: 13px; } .footer-col .col-label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--oxblood); margin-bottom: 4px; } .footer-col a { font-size: 14px; color: var(--ink); transition: color .15s ease; } .footer-col a:hover { color: var(--oxblood); } .footer-bottom { max-width: 1120px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid rgba(23, 20, 16, .22); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); } /* ========================================================= Responsive ========================================================= */ @media (max-width: 860px) { .site-header { padding: 20px 24px; } /* Mobile nav: hamburger reveals a stacked panel */ .nav-toggle { display: block; } .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--linen); border-top: 1px solid var(--stone); box-shadow: 0 12px 30px rgba(23, 20, 16, .12); padding: 8px 0; display: none; } .nav.open { display: flex; } .nav a.navlink, .nav .btn-contact { color: var(--ink); padding: 16px 24px; border: none; border-radius: 0; background: none; text-align: left; } /* On the light dropdown panel, gold-bright would be illegible — use oxblood */ .nav .btn-contact.is-active, .nav a.navlink.is-active { color: var(--oxblood); } } @media (max-width: 768px) { .section { padding: 80px 24px; } .mission, .paths, .panel-section, .contact-body, .lead-intro, .belief, .statement-section, .bridge, .hero-sage, .hero-sagesky { padding-left: 24px; padding-right: 24px; } .hero-home h1 { font-size: clamp(44px, 13vw, 72px); } .hero-sage h1, .hero-sagesky h1 { font-size: clamp(40px, 11vw, 64px); } .hero-sage { padding-top: 150px; } .hero-sagesky { padding-top: 130px; } .mission .statement { font-size: 26px; max-width: none; } .belief p { font-size: 26px; } .lead-intro p { font-size: 20px; } .contact-intro { font-size: 22px; } /* Collapse all two-column grids */ .two-col, .paths .grid, .panel .split, .split-85-115, .split-115-85, .contact-grid, .field-row { grid-template-columns: 1fr; } .two-col { gap: 28px; } .contact-grid { gap: 40px; } /* Keep the narrative above the list on residency panels regardless of source order */ .panel .split { display: flex; flex-direction: column; } .panel .split .order-first { order: -1; } .panel-title { font-size: 46px; } .panel-title-md { font-size: 38px; } .panel-title-sm { font-size: 36px; } .panel-narrative, .panel-list, .panel-copy { padding: 40px 28px; } .footer-top { gap: 32px; } } /* ========================================================= Resident Artists ========================================================= */ /* ---- Listing grid ---- */ .residents-archive { background: var(--linen); padding: 64px 56px 96px; } .residents-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; } .resident-card { border: 1px solid var(--stone); border-radius: 5px; overflow: hidden; background: var(--linen); display: flex; flex-direction: column; color: inherit; transition: border-color .15s ease; } .resident-card:hover { border-color: var(--gold); } .resident-card-photo { aspect-ratio: 4 / 5; background: var(--stone-light); display: flex; align-items: center; justify-content: center; overflow: hidden; } .resident-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .resident-card-photo .ph, .resident-photo .ph { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--warm-grey); } .resident-card-body { padding: 16px 18px 18px; } .resident-card-name { font-family: var(--display); font-weight: 400; font-size: 21px; color: var(--ink); margin: 0; line-height: 1.1; } .resident-card-meta { margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--oxblood); } /* ---- Profile ---- */ .resident-profile { background: var(--linen); padding: 150px 56px 60px; } .resident-inner { max-width: 1040px; margin: 0 auto; } .resident-name { font-family: var(--display); font-weight: 400; font-size: 56px; letter-spacing: -.015em; color: var(--ink); margin: 10px 0 36px; line-height: 1; } .resident-grid-profile { display: grid; grid-template-columns: 290px 1fr; gap: 50px; align-items: start; } .resident-photo { aspect-ratio: 4 / 5; background: var(--stone-light); border: 1px solid var(--stone); border-radius: 5px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .resident-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .resident-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 26px; } .meta-pill { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 7px 13px; border-radius: 3px; background: var(--stone-light); color: #5a5446; } .meta-pill.program { background: transparent; border: 1px solid var(--oxblood); color: var(--oxblood); } .meta-ig { font-size: 14px; color: var(--oxblood); border-bottom: 1px solid rgba(107, 34, 40, .4); padding-bottom: 2px; } .resident-bio { font-weight: 300; font-size: 17px; line-height: 1.8; color: var(--body-text); } .resident-bio p { margin: 0 0 18px; } .resident-quote { background: var(--sage-sky); padding: 76px 56px; text-align: center; } .quote-rule { display: block; width: 48px; height: 2px; background: var(--gold); margin: 0 auto 26px; } .quote-text { font-family: var(--display); font-style: italic; font-size: 30px; line-height: 1.45; color: var(--ink); max-width: 680px; margin: 0 auto; } .quote-attr { margin-top: 22px; letter-spacing: .18em; font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--oxblood); } @media (max-width: 768px) { .residents-archive { padding: 48px 24px 64px; } .resident-profile { padding: 130px 24px 48px; } .resident-name { font-size: 40px; } .resident-grid-profile { grid-template-columns: 1fr; gap: 28px; } .resident-photo { max-width: 280px; } .resident-quote { padding: 56px 24px; } .quote-text { font-size: 24px; } } /* ========================================================= Contact Form 7 integration (styled to match the design) ========================================================= */ /* The form carries .contact-form (display:flex, gap:22px). Keep CF7's hidden inputs out of that flex flow so they don't add empty gaps. */ .contact-form input[type="hidden"] { display: none; } .contact-form .wpcf7-form-control-wrap { display: block; } .contact-form input.wpcf7-form-control, .contact-form textarea.wpcf7-form-control { width: 100%; } .contact-form .wpcf7-submit { align-self: flex-start; } .contact-form .wpcf7-spinner { align-self: flex-start; margin: 0; } /* Validation + response messages, in the brand palette */ .contact-form .wpcf7-not-valid-tip { display: block; color: var(--oxblood); font-size: 12px; font-weight: 500; margin-top: 6px; } .contact-form input.wpcf7-not-valid, .contact-form textarea.wpcf7-not-valid { border-color: var(--oxblood); } .contact-form .wpcf7-response-output { margin: 0; padding: 13px 18px; font-size: 14px; line-height: 1.5; border: 1px solid var(--stone); border-radius: 3px; color: var(--charcoal-2); } .wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }