/* Theme Name: YMOD Theme URI: https://youngmenofdistinction.org/ Author: Catchafire Volunteer Project Description: Editorial, block-editor-first WordPress theme for Young Men of Distinction, Young Ladies of Distinction, and Young People of Distinction. Version: 0.5.8 License: GPL-2.0-or-later Text Domain: ymod */ /* ---------- Tokens (mirrors theme.json) ---------- */ :root { --ink: #121212; --parchment: #f7f2e9; --red: #a61f27; --red-deep: #7d171d; --ash: #6b6259; --linen: #e7decf; --white: #fff; --font-display: 'Fraunces', ui-serif, Georgia, serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --shadow: 0 24px 60px rgba(18, 18, 18, .12); } /* ---------- Reset ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--parchment); font-family: var(--font-body); font-size: 1.05rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; height: auto; } a { color: var(--red); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--red-deep); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .has-ink-background-color a:focus-visible, .has-ink-background-color button:focus-visible, .site-footer a:focus-visible, .site-footer button:focus-visible { outline-color: var(--parchment); } h1, h2, h3, h4, .wp-block-heading { font-family: var(--font-display); color: var(--ink); line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 .5em; } p { margin: 0 0 1em; } .container { width: min(1160px, calc(100% - 48px)); margin: 0 auto; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .skip-link { position: absolute; left: -999px; top: 10px; background: var(--red); color: var(--white); padding: 10px 16px; z-index: 99; border-radius: 4px; } .skip-link:focus { left: 10px; } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * , *:before, *:after { transition-duration: .001ms !important; animation-duration: .001ms !important; } } /* ---------- Eyebrow / mono labels ---------- */ .ymod-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; font-weight: 600; color: var(--red-deep); margin: 0 0 .9em; padding-left: 34px; position: relative; } .ymod-eyebrow:before { content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 1px; background: var(--red); transform: translateY(-50%); } .ymod-hero .ymod-eyebrow, .has-ink-background-color .ymod-eyebrow { color: var(--parchment); } .ymod-hero .ymod-eyebrow:before, .has-ink-background-color .ymod-eyebrow:before { background: var(--red); } /* ---------- Header ---------- */ .site-header { background: rgba(247,242,233,.94); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--linen); } .header-inner { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 13px; color: var(--ink); text-decoration: none; line-height: 1.1; } .brand-mark { height: 46px; width: auto; } .brand span { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; } .brand span span { display: block; margin-top: 4px; font-family: var(--font-mono); font-weight: 500; color: var(--red); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; } .nav-toggle span:not(.visually-hidden) { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; margin: 0 auto; } .nav-menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 26px; list-style: none; margin: 0; padding: 0; font-family: var(--font-body); } .nav-menu > li { position: relative; } .nav-menu > li > a { color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 600; padding: 6px 0; } .nav-menu > li > a:hover { color: var(--red); } .nav-menu li.menu-item-has-children > a:after { content: "▾"; font-size: .65em; margin-left: 4px; color: var(--ash); } .nav-menu > li:last-child > a { background: var(--red); color: var(--white); padding: 10px 18px; border-radius: 999px; } .nav-menu > li:last-child > a:hover { background: var(--red-deep); color: var(--white); } .nav-menu .sub-menu { position: absolute; top: calc(100% + 10px); left: -16px; z-index: 30; min-width: 240px; margin: 0; padding: 10px; list-style: none; background: var(--white); border: 1px solid var(--linen); border-radius: 12px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; } .nav-menu li:hover > .sub-menu, .nav-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .nav-menu .sub-menu li { margin: 0; } .nav-menu .sub-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: .88rem; font-weight: 600; color: var(--ink); text-decoration: none; } .nav-menu .sub-menu a:hover { background: var(--parchment); color: var(--red); } /* ---------- Buttons ---------- */ .wp-block-button__link, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 26px; border: 0; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: .96rem; text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--red); color: var(--white) !important; } .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--red-deep); } /* Reversed button — crisp white on ink, the "shirt against the suit" primary action for buttons that sit on dark sections (hero, CTA band). */ .wp-block-button .wp-block-button__link.has-white-background-color { background: var(--white) !important; color: var(--ink) !important; } .wp-block-button .wp-block-button__link.has-white-background-color:hover { background: var(--parchment) !important; } .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; border: 1.5px solid currentColor; color: inherit !important; } .wp-block-button.is-style-outline .wp-block-button__link:hover { background: rgba(255,255,255,.1); } /* An outline button given an explicit text color (e.g. parchment, for one that sits on a dark section) must win over the plain "inherit" default above — same specificity-tie problem as the white-background button fix, same fix shape. */ .wp-block-button.is-style-outline .wp-block-button__link.has-parchment-color { color: var(--parchment) !important; } .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.6em 0 0; } /* ---------- Hero (cover pattern — full-bleed photo background) ---------- */ /* .wp-block-cover is a plain block box (not a flex item — it's alignfull inside an unconstrained
), so padding placed directly on IT resolves against its own real width reliably. Inset by the same amount .container uses, so the text's left edge lines up with the header logo and every other section on the page. The inner container itself just gets a max-width so the text column doesn't stretch wide. */ .ymod-hero.wp-block-cover { min-height: 620px; padding-left: max(24px, calc((100% - 1160px) / 2)); padding-right: max(24px, calc((100% - 1160px) / 2)); } .ymod-hero .wp-block-cover__image-background { object-fit: cover; } .ymod-hero .wp-block-cover__inner-container { width: auto; max-width: 560px; margin: 0; } .ymod-hero h1 { color: var(--parchment); font-size: clamp(2.4rem, 4.6vw, 4.2rem); max-width: 12ch; } .ymod-hero h1 em { font-style: italic; } .ymod-hero .wp-block-cover__inner-container > p { color: #e7ddd2; font-size: 1.12rem; max-width: 46ch; } @media (max-width: 780px) { .ymod-hero.wp-block-cover { min-height: 540px; padding-left: 16px; padding-right: 16px; } .ymod-hero .wp-block-cover__inner-container { max-width: 100%; } } /* ---------- Sections ---------- */ /* Scoped to direct children of
— the homepage's own bands. Interior pages now use Group blocks inside .content for the alumni and sponsorship card grids, and an unscoped rule here gave each of those a 92px top and bottom padding. */ main > .wp-block-group { padding-top: 92px; padding-bottom: 92px; } /* Top-level sections need the same side gutter as .container (24px / 16px on phones): the constrained layout centers a 1160px column but adds no padding of its own, so on narrow screens the homepage copy ran edge to edge. */ main > .wp-block-group { padding-left: 24px; padding-right: 24px; } .wp-block-group.ymod-cta-band { width: min(1160px, calc(100% - 48px)); max-width: none; margin: 90px auto; padding: 60px 56px; border-radius: 22px; } h2.wp-block-heading { font-size: clamp(1.9rem, 3.2vw, 2.75rem); } .wp-block-group.ymod-cta-band h2 { color: var(--parchment); max-width: 20ch; } /* The constrained group layout centers every child with margin:auto !important; the h2 is capped at 20ch so it was floating in the middle while the copy and button sat left. */ .wp-block-group.ymod-cta-band > * { margin-left: 0 !important; } .wp-block-group.ymod-cta-band p { color: #d9cabf; } /* ---------- Program index ---------- */ .ymod-program-index.wp-block-columns { gap: 0 !important; margin: 44px 0 0; } .ymod-program-index .wp-block-column { padding: 0 40px; border-left: 1px solid var(--linen); } .ymod-program-index .wp-block-column:first-child { border-left: 0; padding-left: 0; } .ymod-program-index .wp-block-column:last-child { padding-right: 0; } /* Each program's badge sits in a matched circular frame — a seal/medallion treatment (fitting for an org literally about "distinction") that gives all three programs equal visual weight regardless of their source art's own shape (YMOD's icon is a tall crown+tie; YLOD/YPOD are already circular illustrations). */ .ymod-program-mark { width: 104px; height: 104px; margin: 0 0 24px; border-radius: 50%; overflow: hidden; border: 3px solid var(--red); box-shadow: 0 8px 20px rgba(18,18,18,.14); background: var(--white); } .ymod-program-mark img { width: 100% !important; height: 100%; object-fit: contain; object-position: center; max-width: none; border-radius: 0; } .ymod-tag { color: var(--ash); } .ymod-program-index h3 { font-size: 1.4rem; } .ymod-program-index p a { font-weight: 700; text-decoration: none; } @media (max-width: 780px) { .ymod-program-index.wp-block-columns { flex-wrap: wrap !important; } .ymod-program-index .wp-block-column { border-left: 0 !important; border-top: 1px solid var(--linen); padding: 32px 0 0 !important; margin-top: 32px; flex-basis: 100% !important; } .ymod-program-index .wp-block-column:first-child { border-top: 0; margin-top: 0; padding-top: 0 !important; } } /* ---------- Quote / mission pullquote ---------- */ .wp-block-quote { border: 0; margin: 0; padding: 0; max-width: 780px; } .wp-block-quote p { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.35; color: var(--ink); margin: 0 0 .6em; } .wp-block-quote cite { font-family: var(--font-mono); font-style: normal; text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; color: var(--red-deep); } /* ---------- Stat row ---------- */ .ymod-stat-row.wp-block-columns { gap: 48px !important; margin: 0; } .ymod-stat-num { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 600; margin: 0; line-height: 1; color: var(--red); } .ymod-stat-label { color: var(--ash); margin: 6px 0 0; text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; } .has-ink-background-color .ymod-stat-num { color: var(--parchment); } .has-ink-background-color .ymod-stat-label { color: #cabfb2; } /* Compact variant: sits inline within a section (e.g. Alumni) rather than as its own full-width dark band — columns size to their content instead of stretching to fill the row, so the numbers sit close together instead of floating in space. */ .ymod-stat-row-inline.wp-block-columns { justify-content: flex-start; gap: 56px !important; margin: 30px 0 46px; } .ymod-stat-row-inline .wp-block-column { flex: 0 0 auto; } /* ---------- Steps timeline ---------- */ .ymod-steps.wp-block-columns { gap: 40px !important; position: relative; margin-top: 48px; } .ymod-steps .wp-block-column { position: relative; padding-top: 30px; } .ymod-steps .wp-block-column:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--linen); } .ymod-steps .wp-block-column:after { content: ""; position: absolute; top: -3px; left: 0; width: 34px; height: 8px; border-radius: 4px; background: var(--red); } .ymod-step-index { color: var(--red-deep); font-size: .8rem; letter-spacing: .1em; margin: 0 0 .4em; } .ymod-steps h3 { font-size: 1.3rem; } @media (max-width: 780px) { .ymod-steps.wp-block-columns { flex-wrap: wrap !important; } .ymod-steps .wp-block-column { flex-basis: 100% !important; } } /* ---------- Alumni spotlight ---------- */ .ymod-alumni-spotlight.wp-block-columns { gap: 22px !important; margin-top: 44px; } .ymod-alumni-card { padding: 30px 26px; background: var(--white); border: 1px solid var(--linen); border-radius: 16px; } .ymod-alumni-avatar { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 0 16px; border-radius: 50%; background: var(--parchment); border: 1px solid var(--linen); color: var(--ash); font-size: 1.15rem; font-weight: 600; } .ymod-alumni-card p:not(.ymod-alumni-avatar):first-of-type { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red-deep); margin-bottom: .5em; } .ymod-alumni-card p:last-child { color: var(--ash); margin: 0; font-size: .94rem; } /* The spotlight photo is a real Image block (it used to be a raw-HTML block, which meant the picture could not be swapped from the media library). 4:5 so the full-body and sign-holding graduation photos crop consistently — do not go back to circular avatars, they cut these shots to pieces. */ .ymod-alumni-card .wp-block-image { margin: 0 0 18px; } .ymod-alumni-card .wp-block-image img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; } /* ---------- Lists (approved-copy pages) ---------- */ ul:not(.nav-menu):not(.sub-menu):not(.footer-menu):not(.wp-block-buttons) { padding-left: 0; list-style: none; } .wp-block-list li, .content ul:not(.wp-block-gallery):not(.ymod-social__list) li { position: relative; padding: 7px 0 7px 30px; color: var(--ink); } .wp-block-list li:before, .content ul:not(.wp-block-gallery):not(.ymod-social__list) li:before { content: "\2713"; position: absolute; left: 0; top: 7px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #f4e0df; color: var(--red-deep); font-size: .68rem; font-weight: 900; } /* ---------- Editable card grids (alumni, sponsorship tiers, photo pairs) ---------- The Alumni and Become a Sponsor pages used to be one blob of inline-styled HTML, which the editor showed as a single Classic block — fine to look at, miserable to edit and easy for TinyMCE to mangle. The markup is now ordinary Group / Image / Heading / Paragraph / List blocks carrying these classes, so each card is a real block the client can edit, duplicate, reorder or delete. Keep the class names in sync with the "YMOD: Alumni Card" and "YMOD: Sponsorship Tier" patterns in functions.php. */ /* Group blocks add their own flow-layout margins between children; the grids and cards below position their own children, so those margins are cleared. */ .content .ymod-card-grid > *, .content .ymod-photo-pair > *, .content .ymod-alum > *, .content .ymod-tiers > *, .content .ymod-tier > *, .content .ymod-tier__head > * { margin-block-start: 0; } .content .ymod-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin: 1.6em 0 2em; } .content .ymod-photo-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 1.6em 0 2em; } .content .ymod-photo-pair figure { margin: 0; } .content .ymod-photo-pair img { display: block; width: 100%; height: auto; border-radius: 4px; } /* Alumni card */ .content .ymod-alum { background: var(--white); border: 1px solid var(--linen); border-radius: 16px; overflow: hidden; padding: 0 0 18px; } .content .ymod-alum .wp-block-image { margin: 0 0 14px; } .content .ymod-alum img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; } /* Prince Jacque's photo is a tall full-body shot; bias the crop toward the face. */ .content .ymod-alum--high img { object-position: 50% 40%; } .content .ymod-alum__year { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red-deep); margin: 0 18px .3em; } .content .ymod-alum__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; margin: 0 18px .3em; } .content .ymod-alum__school { color: var(--ash); font-size: .92rem; margin: 0 18px; } .content .ymod-alum__badge { display: inline-block; background: #fbeeed; color: var(--red-deep); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; margin: 12px 18px 0; } /* Sponsorship tier card */ .content .ymod-tiers { display: grid; gap: 18px; margin: 1.6em 0 2em; } .content .ymod-tier { display: flex; flex-wrap: wrap; gap: 22px; padding: 26px 24px; background: var(--white); border: 1px solid var(--linen); border-radius: 16px; } .content .ymod-tier__head { flex: 0 0 128px; } .content .ymod-tier__label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ash); margin: 0 0 2px; } .content .ymod-tier__price { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--ink); line-height: 1; margin: 0; } .content .ymod-tier__benefits { flex: 1 1 260px; margin: 0; } /* Top tier: tinted card, red rule, and a badge that straddles the top border. */ .content .ymod-tier--top { background: #fbeeed; border: 2px solid var(--red); position: relative; margin-top: 11px; } .content .ymod-tier--top .ymod-tier__price { color: var(--red-deep); } .content .ymod-tier--top .ymod-tier__badge { position: absolute; top: -11px; left: 24px; margin: 0; background: var(--red); color: var(--white); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; } /* ---------- Sponsor logo walls ---------- 44 supplied logos, mixed provenance: some arrive on white, some on black, some on a brand colour. Each file is pre-padded to a uniform 480x260 canvas in ITS OWN background colour, so every tile reads as one solid block instead of a dark rectangle floating on white. That means the card here must not impose a background — it only clips the corners and lets the artwork run edge to edge. Deliberately no grayscale/hover-colour trick: sponsors are paying for their brand to be seen, and desaturating it by default undercuts that. */ .content .ymod-sponsor-grid > *, .ymod-sponsor-strip > * { margin-block-start: 0; } .content .ymod-sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 1.6em 0 2.4em; } .content .ymod-sponsor-grid .wp-block-image { margin: 0; } .content .ymod-sponsor-grid img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 260; object-fit: contain; border: 1px solid var(--linen); border-radius: 10px; background: var(--white); } /* Homepage strip: a horizontal band, scrollable on narrow screens rather than reflowing into a tall wall that pushes the rest of the page down. */ .ymod-sponsor-strip { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .ymod-sponsor-strip .wp-block-image { margin: 0; flex: 0 0 auto; } .ymod-sponsor-strip img { display: block; width: 168px; height: 91px; object-fit: contain; border: 1px solid var(--linen); border-radius: 10px; background: var(--white); } @media (max-width: 640px) { .content .ymod-sponsor-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; } .ymod-sponsor-strip img { width: 136px; height: 74px; } } /* ---------- Interior page hero + content ---------- */ .page-hero { padding: 34px 0 26px; border-bottom: 1px solid var(--linen); } .page-hero > .container { max-width: 760px; } /* same measure as .content > .container so the title lines up with the body copy */ .page-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); } .page-hero .ymod-eyebrow { margin-bottom: .6em; } .content { padding: 60px 0 100px; } .content > .container { max-width: 760px; } .content h2 { margin: 1.5em 0 .5em; font-size: 1.7rem; } .content h3 { font-size: 1.25rem; } .content .wp-block-image img, .content .wp-block-gallery img { border-radius: 14px; } .content iframe { border-radius: 14px; } .content em { color: var(--ash); } /* ---------- Footer ---------- */ .site-footer { padding: 68px 0 28px; background: var(--ink); color: #cbbfb1; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; } .footer-brand .brand-mark { height: 40px; margin-bottom: 16px; } .site-footer h2 { color: var(--parchment); font-size: 1.3rem; margin: 0 0 10px; } .site-footer h3 { color: var(--parchment); font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 16px; } .site-footer a { color: #cbbfb1; text-decoration: none; } .site-footer a:hover { color: var(--white); } .footer-menu { list-style: none; margin: 0; padding: 0; } .footer-menu li { margin: 8px 0; } .footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: .84rem; font-family: var(--font-mono); } .footer-social { margin-top: 44px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.1); } /* The social band already draws the separator above the copyright line. */ .footer-social + .footer-bottom { margin-top: 26px; } /* ---------- Social links ---------- */ /* Shared by the footer band and the [ymod_social] shortcode, so the colours are written against whatever surface the list sits on: currentColor for the glyphs, a translucent border that works on ink and on parchment alike. */ .ymod-social__list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } .ymod-social__list li { margin: 0; } .ymod-social__link { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border: 1px solid currentColor; border-radius: 999px; font-size: .86rem; font-weight: 500; line-height: 1; text-decoration: none; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } .ymod-social__link svg { width: 17px; height: 17px; flex: none; } .ymod-social__link:hover, .ymod-social__link:focus-visible { background: var(--red); border-color: var(--red); color: var(--white); } /* On the ink footer the 1px border at full text colour reads too loud; dim it, and keep the label from inheriting .site-footer a's plain-text treatment. */ .site-footer .ymod-social__link { border-color: rgba(255,255,255,.18); } .site-footer .ymod-social__link:hover, .site-footer .ymod-social__link:focus-visible { border-color: var(--red); color: var(--white); } .content .ymod-social__link { border-color: rgba(18,18,18,.18); color: var(--ink); } .content .ymod-social__heading { margin-bottom: 14px; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .nav-toggle { display: flex; } #primary-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--parchment); border-bottom: 1px solid var(--linen); box-shadow: var(--shadow); padding: 10px 0 20px; } #primary-nav.is-open { display: block; } .nav-menu { flex-direction: column; align-items: flex-start; gap: 2px; padding: 0 24px; } .nav-menu > li { width: 100%; } .nav-menu > li > a { display: block; padding: 12px 0; } .nav-menu > li:last-child > a { display: inline-flex; margin-top: 8px; } .nav-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 0 0 0 14px; } .site-header.is-nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-header.is-nav-open .nav-toggle span:nth-child(2) { opacity: 0; } .site-header.is-nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .footer-grid { grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 640px) { .container { width: min(100% - 32px, 1160px); } main > .wp-block-group { padding-top: 64px; padding-bottom: 64px; } .wp-block-group.ymod-cta-band { width: calc(100% - 32px); padding: 40px 24px; margin: 56px auto; } main > .wp-block-group { padding-left: 16px; padding-right: 16px; } .ymod-eyebrow { font-size: .68rem; letter-spacing: .1em; } .ymod-social__link { padding: 13px 16px; } } /* ---------- Interior hero, wide variant (events pages) ---------- */ .page-hero--wide > .container { max-width: 1160px; } /* ---------- WPForms (contact form, sponsorship form) ---------- */ /* WPForms ships its own blue button + grey inputs. Both the modern-markup CSS variables and the classic selectors are overridden so the forms read as part of the site. */ .wpforms-container.wpforms-container { --wpforms-field-border-radius: 10px !important; --wpforms-field-border-color: var(--linen) !important; --wpforms-field-background-color: var(--white) !important; --wpforms-field-text-color: var(--ink) !important; --wpforms-field-size-font-size: 1rem !important; --wpforms-field-size-input-height: 50px !important; --wpforms-field-size-input-spacing: 20px !important; --wpforms-label-color: var(--ink) !important; --wpforms-label-sublabel-color: var(--ash) !important; --wpforms-label-error-color: var(--red) !important; --wpforms-label-size-font-size: .96rem !important; --wpforms-button-border-radius: 999px !important; --wpforms-button-background-color: var(--red) !important; --wpforms-button-background-color-alt: var(--red-deep) !important; --wpforms-button-text-color: var(--white) !important; --wpforms-button-size-font-size: .96rem !important; --wpforms-button-size-height: 50px !important; --wpforms-button-size-padding-h: 26px !important; } .content div.wpforms-container-full .wpforms-form .wpforms-field-label { font-family: var(--font-body); font-weight: 600; font-size: .96rem; color: var(--ink); } .content div.wpforms-container-full .wpforms-form .wpforms-field-sublabel { color: var(--ash); font-family: var(--font-body); } .content div.wpforms-container-full .wpforms-form input[type=text], .content div.wpforms-container-full .wpforms-form input[type=email], .content div.wpforms-container-full .wpforms-form input[type=tel], .content div.wpforms-container-full .wpforms-form input[type=number], .content div.wpforms-container-full .wpforms-form input[type=url], .content div.wpforms-container-full .wpforms-form select, .content div.wpforms-container-full .wpforms-form textarea { font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--white); border: 1px solid var(--linen); border-radius: 10px; padding: 12px 14px; box-shadow: none; } .content div.wpforms-container-full .wpforms-form input:focus, .content div.wpforms-container-full .wpforms-form select:focus, .content div.wpforms-container-full .wpforms-form textarea:focus { border-color: var(--ash); } /* Medium fields default to 60% width — use the whole reading column instead. */ .content div.wpforms-container-full .wpforms-form input.wpforms-field-medium, .content div.wpforms-container-full .wpforms-form select.wpforms-field-medium, .content div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium { max-width: 100%; } /* The submit button and the field borders are the two places WPForms wins on specificity even after the variables above are redefined — its own rules hard-code the blue and the grey, so these two need !important to land. */ .wpforms-container button[type=submit].wpforms-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 28px; line-height: 1; border: 0 !important; border-radius: 999px !important; background-color: var(--red) !important; background-image: none !important; color: var(--white) !important; font-family: var(--font-body) !important; font-weight: 700 !important; font-size: .96rem !important; transition: background-color .15s ease; } .wpforms-container button[type=submit].wpforms-submit:hover, .wpforms-container button[type=submit].wpforms-submit:focus { background-color: var(--red-deep) !important; color: var(--white) !important; } .wpforms-container .wpforms-field input[type=text], .wpforms-container .wpforms-field input[type=email], .wpforms-container .wpforms-field input[type=tel], .wpforms-container .wpforms-field input[type=number], .wpforms-container .wpforms-field input[type=url], .wpforms-container .wpforms-field select, .wpforms-container .wpforms-field textarea { border: 1px solid var(--linen) !important; border-radius: 10px !important; background-color: var(--white) !important; } .content div.wpforms-container-full .wpforms-confirmation-container-full { background: var(--white); border: 1px solid var(--linen); border-radius: 16px; padding: 24px 28px; } /* ---------- Forminator (mentee + mentor applications) ---------- Forminator ships a green button, a 45px sans-serif section title that competes with the page h1, and grey-filled inputs. Every declaration below needs !important, which is not laziness. Forminator does not style forms from a static stylesheet — it emits a per-form