/* Theme Name: GeneratePress (MySDMoms) Theme URI: https://mysdmoms.com Description: Child theme of GeneratePress for the MySDMoms site. Bouquet palette + Cormorant Garamond + DM Sans editorial system, translating the My SD Moms design handoff (2026-05-20) into WordPress. Overrides GP's header.php, footer.php, and index for the homepage; other templates inherit GP defaults with the new design tokens applied site-wide. Author: Audacy Station Tools Author URI: https://gitlab.com/audacy-inc/station-tools/mysdmoms1 Template: generatepress Version: 2.0.0 License: Proprietary Text Domain: mysdmoms1 */ /* ============================================================ DESIGN TOKENS — Bayside palette + Romantic typography Per Ben's 2026-05-20 tweak selection: palette: bayside · type: romantic · density: comfortable logoMark: sun · navStyle: topics · accentBoost: off ============================================================ */ :root { --cream: #F4F8FB; --cream-deep: #DCE9F0; --paper: #FAFCFD; --sand: #F2D6BD; --sand-soft: #F7E4D2; --sage: #6EC1E4; /* sky-blue accent (the palette renamed via variables) */ --sage-deep: #3A8FB5; --forest: #0E3A52; /* deep navy */ --forest-ink: #062335; --coral: #F08C72; --coral-deep: #D66A50; --sky: #BDDFEE; --line: rgba(14, 58, 82, 0.16); --line-soft: rgba(14, 58, 82, 0.08); --muted: rgba(14, 58, 82, 0.60); /* Romantic pairing: Italiana display serif + DM Sans body. Italiana has no true italic — browsers synthesize a slant when needed (acceptable for the dek; Italiana is a display face anyway). */ --serif: 'Italiana', 'Times New Roman', serif; --sans: 'DM Sans', system-ui, -apple-system, sans-serif; --mono: 'DM Mono', ui-monospace, monospace; --density: 1; /* comfortable */ } /* ============================================================ Base — overrides GP's body defaults to match design ============================================================ */ html, body { background: var(--cream); color: var(--forest-ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } ::selection { background: var(--coral); color: var(--paper); } :focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; border-radius: 2px; } /* Editorial headings — Cormorant Garamond, tight tracking, near-flat line-height */ h1, h2, h3, h4, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; line-height: 1.05; color: var(--forest-ink); } /* Reset GP's default header/footer chrome we're replacing */ .site-header, .main-navigation, .site-footer .footer-widgets, .site-info { display: none; } /* Global box-sizing — keep padding inside declared widths so our 1320px container is actually 1320px outer, not 1320 + 112. */ *, *::before, *::after { box-sizing: border-box; } /* Container — 1320px outer, 56px gutters → 1208px content area. */ .msdm-container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 56px; } /* Masthead variant — full viewport width, just inset by gutters. Editorial mastheads span the full page so the wordmark sits confidently in the top-left and the CTA in the top-right. */ .msdm-container--masthead { max-width: none; padding: 0 48px; } @media (max-width: 1080px) { .msdm-container { padding: 0 40px; } } @media (max-width: 720px) { .msdm-container { padding: 0 24px; } } /* Shared placeholder gradient (used when featured images are missing) */ .ph { position: relative; background: linear-gradient(135deg, var(--sand-soft) 0%, var(--sand) 50%, var(--coral) 100%); overflow: hidden; } .ph::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 16px, rgba(255,255,255,0) 16px 32px); } .ph.sage { background: linear-gradient(135deg, var(--sand-soft) 0%, var(--sage) 60%, var(--sage-deep) 100%); } .ph.sky { background: linear-gradient(135deg, var(--sand-soft) 0%, var(--sky) 60%, var(--sage) 100%); } .ph.coral { background: linear-gradient(135deg, var(--sand-soft) 0%, var(--coral) 70%, var(--coral-deep) 100%); } .ph.dawn { background: linear-gradient(160deg, var(--sand-soft) 0%, var(--coral) 50%, var(--sky) 100%); } .ph.dusk { background: linear-gradient(180deg, var(--sand) 0%, var(--sky) 50%, var(--sage-deep) 100%); } .ph.sand { background: linear-gradient(135deg, var(--cream-deep) 0%, var(--sand) 60%, var(--sand) 100%); } /* Image-as-placeholder: when we have a real featured image, drop it into a .ph wrapper and the image overlays the gradient. */ .ph img { position: relative; width: 100%; height: 100%; object-fit: cover; z-index: 1; } /* ============================================================ TYPE-ONLY CARD — fallback when a post has no featured image and no inline image to extract. Renders as a tinted card with the post's title set large in Italiana, looking intentional rather than broken. Used in both Hero and ArticleGrid. ============================================================ */ .msdm-typecard { display: flex; align-items: center; justify-content: center; position: relative; } .msdm-typecard__inner { position: relative; z-index: 2; padding: 32px; text-align: center; max-width: 90%; } .msdm-typecard__eyebrow { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--paper); opacity: 0.85; margin-bottom: 16px; } .msdm-typecard__title { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 32px); font-weight: 400; line-height: 1.1; color: var(--paper); text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18); } .msdm-typecard--hero .msdm-typecard__title { font-size: clamp(34px, 4.4vw, 56px); } .msdm-typecard--hero .msdm-typecard__inner { padding: 56px 40px; } /* Soft vignette behind the title for legibility over busy gradients */ .msdm-typecard::after { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse at center, color-mix(in srgb, var(--forest-ink) 28%, transparent) 0%, transparent 70% ); z-index: 1; pointer-events: none; } /* ============================================================ NAV — Sticky editorial header (announcement bar + main row) Logo | inline topics | search | "Join the Club" ============================================================ */ .msdm-header { position: sticky; top: 0; z-index: 50; background: var(--cream); border-bottom: 1px solid transparent; transition: background 220ms ease, border-color 220ms ease; } .msdm-header.is-scrolled { background: color-mix(in srgb, var(--cream) 92%, transparent); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); border-bottom-color: var(--line-soft); } /* Sponsor strip — replaces the old announcement bar. A subtle dark band above the masthead that surfaces the Audacy SD market stations + Kaiser as the headline sponsor. The same coral-tinted skyline silhouette runs behind the row as a unifying accent. */ .msdm-sponsors { background: var(--forest); color: var(--paper); position: relative; overflow: hidden; } .msdm-sponsors__skyline { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; color: color-mix(in srgb, var(--coral) 16%, transparent); pointer-events: none; line-height: 0; } .msdm-sponsors__skyline .msdm-skyline { display: block; width: 100%; } .msdm-sponsors__inner { position: relative; display: flex; align-items: center; justify-content: center; gap: 22px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; } .msdm-sponsors__kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 70%, transparent); white-space: nowrap; } .msdm-sponsors__stations { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; } .msdm-sponsors__stations li { margin: 0; line-height: 0; } /* Each station stacks two PNGs: a white-monochrome version that's visible by default (reads as a unified row on the dark band) and the full-color original underneath that fades in on hover. The is the positioning context; both images absolutely overlap. We size by the natural aspect of the color image to keep heights consistent without hardcoding per-logo widths. */ .msdm-sponsors__stations a { display: inline-block; position: relative; height: 22px; line-height: 0; } .msdm-sponsors__stations a img { display: block; height: 22px; width: auto; max-width: none; transition: opacity 200ms ease; } .msdm-sponsors__stations a .is-mono { position: absolute; inset: 0; opacity: 0.82; } .msdm-sponsors__stations a .is-color { opacity: 0; /* hidden by default, but still sizes the link */ } .msdm-sponsors__stations a:hover .is-mono, .msdm-sponsors__stations a:focus-visible .is-mono { opacity: 0; } .msdm-sponsors__stations a:hover .is-color, .msdm-sponsors__stations a:focus-visible .is-color { opacity: 1; } /* Kaiser ships as a white-BG JPG, so the invert trick would erase it. Instead, give it a tiny paper-colored chip so the original logo reads cleanly on the dark band without us recoloring it. */ .msdm-sponsors__kaiser { display: inline-flex; align-items: center; background: var(--paper); border-radius: 4px; padding: 4px 8px; transition: transform 160ms ease; } .msdm-sponsors__kaiser:hover, .msdm-sponsors__kaiser:focus-visible { transform: scale(1.04); } .msdm-sponsors__kaiser img { display: block; height: 22px; width: auto; max-width: none; } .msdm-sponsors__divider { width: 1px; height: 18px; background: color-mix(in srgb, var(--coral) 40%, transparent); } /* (kaiser styling unified above) */ /* Phone — collapse the kickers and divider, keep logos in a wrapping row so we still surface the brand presence even on small screens. */ @media (max-width: 720px) { .msdm-sponsors__inner { gap: 14px; padding-top: 8px; padding-bottom: 8px; } .msdm-sponsors__kicker, .msdm-sponsors__divider { display: none; } .msdm-sponsors__stations { gap: 14px; flex-wrap: wrap; justify-content: center; } .msdm-sponsors__stations img, .msdm-sponsors__kaiser img { height: 18px; } .msdm-sponsors__kaiser img { height: 20px; } } /* Horizon band — full-width SD skyline silhouette between nav and hero, matching the standalone design's component. Sits below the sticky header so it doesn't tag along on scroll. */ .msdm-horizon { position: relative; background: linear-gradient(180deg, transparent 0%, var(--cream-deep) 100%); padding-top: 24px; margin-bottom: -1px; border-bottom: 1px solid var(--line); } .msdm-horizon__inner { max-width: 1600px; margin: 0 auto; color: var(--sage-deep); opacity: 0.42; } .msdm-horizon__inner .msdm-skyline { display: block; width: 100%; } .msdm-nav-row { display: flex; align-items: center; gap: 28px; padding: 18px 0; transition: padding 220ms ease; } .msdm-header.is-scrolled .msdm-nav-row { padding: 12px 0; } /* Sunrise logo lockup — coral half-disc clipped at horizon + 5 rays, beside an italic serif wordmark with a tracked-out tagline below. */ .msdm-logo { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; line-height: 1; color: var(--forest-ink); text-decoration: none; } .msdm-logo__mark { display: block; flex-shrink: 0; } .msdm-logo__mark svg { display: block; } .msdm-logo__text { display: flex; flex-direction: column; gap: 2px; } .msdm-logo__name { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 28px; letter-spacing: -0.01em; line-height: 1; } .msdm-logo__name .msdm-logo__sd { font-style: normal; font-weight: 600; } .msdm-logo__tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } /* Category strip — inline nav of topics. min-width:0 + overflow:hidden so the flex item shrinks when sibling logo+utility cluster need room. */ .msdm-cats { display: flex; gap: 4px; align-items: center; flex: 1 1 auto; min-width: 0; justify-content: center; list-style: none; margin: 0; padding: 0; overflow: hidden; } .msdm-cats li { display: flex; } .msdm-cat { font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--forest-ink); padding: 8px 12px; border-radius: 6px; white-space: nowrap; transition: background 160ms ease, color 160ms ease; position: relative; background: none; border: none; cursor: pointer; } /* Underline grows from left on hover — matches the design's ::after sliding bar. */ .msdm-cat::after { content: ''; position: absolute; left: 12px; right: 100%; bottom: 4px; height: 1px; background: var(--coral); transition: right 220ms ease; } .msdm-cat:hover, .msdm-cat:focus-visible { background: var(--cream-deep); } .msdm-cat:hover::after, .msdm-cat:focus-visible::after { right: 12px; } .msdm-cat.is-current { color: var(--coral-deep); } .msdm-cat--more { color: var(--muted); display: none; align-items: center; gap: 6px; } .msdm-cat--more::after { display: none; } /* Right utility cluster — search + CTA. flex-shrink:0 anchors it on the right so the nav strip yields space, never the other way around. */ .msdm-utils { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } /* Search field — pill-shaped input with magnifier icon + ⌘K hint. The whole pill is the focus surface; clicking anywhere puts the caret in the input. Form element wraps so Enter submits a real WP search at /?s=… */ .msdm-search { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; width: 280px; max-width: 280px; cursor: text; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; margin: 0; /* form default */ } .msdm-search:hover { border-color: var(--sage); background: color-mix(in srgb, var(--paper) 80%, var(--cream-deep)); } .msdm-search:focus-within { border-color: var(--sage-deep); background: var(--paper); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage-deep) 18%, transparent); } .msdm-search svg { color: var(--muted); flex-shrink: 0; } .msdm-search:focus-within svg { color: var(--sage-deep); } /* The input itself — strip ALL native chrome: - WebKit/Safari search clear-X + decoration - Edge/IE reveal button - Native search round corners - Default outline/focus ring (we move it to the parent pill) */ .msdm-search input[type="search"], .msdm-search input[type="text"] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 0; margin: 0; font-size: 14px; font-family: var(--sans); font-weight: 400; color: var(--forest-ink); line-height: 1.4; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .msdm-search input::-webkit-search-cancel-button, .msdm-search input::-webkit-search-decoration, .msdm-search input::-webkit-search-results-button, .msdm-search input::-webkit-search-results-decoration { -webkit-appearance: none; display: none; } .msdm-search input::-ms-clear, .msdm-search input::-ms-reveal { display: none; width: 0; height: 0; } .msdm-search input::placeholder { color: var(--muted); opacity: 1; font-weight: 400; } .msdm-search input:focus::placeholder { color: color-mix(in srgb, var(--muted) 60%, transparent); } /* Keycap hint — DM Mono pill matching the design */ .msdm-search kbd { font-family: var(--mono); font-size: 10.5px; font-weight: 500; padding: 2px 7px; background: var(--cream-deep); border-radius: 4px; color: var(--muted); letter-spacing: 0.04em; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); box-shadow: inset 0 -1px 0 var(--line-soft); flex-shrink: 0; } .msdm-cta { font-family: var(--sans); font-size: 13px; font-weight: 500; padding: 10px 18px; background: var(--forest); color: var(--paper) !important; border-radius: 999px; transition: background 160ms ease; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; } .msdm-cta:hover { background: var(--forest-ink); } .msdm-cta__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--coral); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 28%, transparent); } /* Logo scroll-shrink — design pushes 32→26 on scroll. We don't re-render the SVG, just scale the whole wordmark down. */ .msdm-header.is-scrolled .msdm-logo { transform: scale(0.84); transform-origin: left center; } .msdm-logo { transition: transform 220ms ease; } /* Mobile toggle (hamburger) — hidden by default, shown on phone. */ .msdm-mobile-toggle { display: none; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--forest-ink); align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .msdm-mobile-toggle .msdm-icon-close { display: none; } .msdm-header.is-drawer-open .msdm-mobile-toggle .msdm-icon-bars { display: none; } .msdm-header.is-drawer-open .msdm-mobile-toggle .msdm-icon-close { display: block; } /* Mobile / overflow drawer. Slides down from below the sticky header. Hidden via [hidden] until JS toggles it. */ .msdm-drawer { position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); box-shadow: 0 20px 40px rgba(47, 62, 54, 0.08); border-top: 1px solid var(--line-soft); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform 320ms cubic-bezier(.4, 0, .2, 1), opacity 220ms ease; max-height: calc(100vh - 100px); overflow-y: auto; z-index: 49; } .msdm-drawer[hidden] { display: block; } /* keep visible for transition */ .msdm-header.is-drawer-open .msdm-drawer { transform: translateY(0); opacity: 1; pointer-events: auto; } .msdm-drawer__inner { padding: 24px 32px 32px; } .msdm-drawer__search { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; background: var(--cream-deep); border: none; border-radius: 999px; margin-bottom: 24px; font-size: 14px; color: var(--muted); font-family: inherit; cursor: pointer; } .msdm-drawer__kicker { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 8px; } .msdm-drawer__list { list-style: none; padding: 0; margin: 0 0 24px; } .msdm-drawer__list li { margin: 0; } .msdm-drawer__list a { display: block; font-family: var(--serif); font-size: 24px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); color: var(--forest-ink); } .msdm-drawer__list--more a { font-family: var(--sans); font-size: 16px; padding: 8px 0; color: var(--muted); border-bottom: none; } .msdm-drawer__cta { display: inline-flex; margin-top: 8px; } /* Responsive cascade — matches the design's tiered breakpoints. 1180: shrink search field to an icon (kdb hint + input hidden) 1080: hide last topic, show "More" inline 980: hide one more topic 880: full mobile mode — cats off, search icon off, drawer on */ @media (max-width: 1180px) { .msdm-search { width: auto; max-width: none; padding: 8px 12px; } .msdm-search input, .msdm-search kbd { display: none; } } @media (max-width: 1080px) { .msdm-cats li:nth-last-child(2) { display: none; } /* Events */ .msdm-cat--more { display: inline-flex !important; } } @media (max-width: 980px) { .msdm-cats li:nth-last-child(3) { display: none; } /* Tools */ } @media (max-width: 880px) { .msdm-cats { display: none; } .msdm-search { display: none; } .msdm-cta { display: none; } .msdm-mobile-toggle { display: inline-flex; } .msdm-nav-row { gap: 16px; } } /* ============================================================ HERO — Cover Story (editorial split layout) ============================================================ */ .msdm-hero { padding-top: calc(48px * var(--density)); padding-bottom: calc(80px * var(--density)); } .msdm-hero__meta { display: flex; align-items: center; justify-content: space-between; padding-bottom: 28px; border-bottom: 1px solid var(--line-soft); margin-bottom: 40px; flex-wrap: wrap; gap: 14px; } .msdm-hero__meta-left { display: flex; align-items: center; gap: 18px; } .msdm-tag { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; padding: 6px 10px; background: var(--forest); color: var(--paper); border-radius: 2px; } .msdm-tag--muted { background: transparent; color: var(--muted); padding: 6px 0; } .msdm-hero__weather { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); } .msdm-hero__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; } @media (max-width: 880px) { .msdm-hero__grid { grid-template-columns: 1fr; gap: 36px; } } /* Promo strip — used to live in the global announce bar, now sits in the hero above the grid. Inline pill on a soft cream-deep band with a coral indicator dot, mono kicker, and italic serif copy. */ .msdm-promo { display: flex; align-items: center; gap: 16px; margin: 12px 0 28px; padding: 12px 22px; background: var(--cream-deep); border: 1px solid var(--line-soft); border-radius: 999px; color: var(--forest-ink); text-decoration: none; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; } .msdm-promo:hover, .msdm-promo:focus-visible { background: color-mix(in srgb, var(--coral) 8%, var(--cream-deep)); border-color: color-mix(in srgb, var(--coral) 40%, var(--line)); } .msdm-promo__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--coral); box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 22%, transparent); flex-shrink: 0; } .msdm-promo__kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral-deep); white-space: nowrap; } .msdm-promo__msg { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--forest-ink); flex: 1; min-width: 0; } .msdm-promo__msg strong { font-weight: 600; font-style: normal; } .msdm-promo__cta { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--coral-deep); white-space: nowrap; } @media (max-width: 720px) { .msdm-promo { gap: 12px; padding: 10px 16px; } .msdm-promo__kicker { display: none; } .msdm-promo__msg { font-size: 15px; } } .msdm-hero__cat { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--coral-deep); margin-bottom: 20px; } .msdm-hero__title { font-size: clamp(38px, 5.6vw, 72px); font-weight: 500; margin-bottom: 24px; text-wrap: pretty; color: var(--forest-ink); } .msdm-hero__title a { color: inherit; } .msdm-hero__title a:hover { color: var(--sage-deep); } .msdm-hero__dek { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: var(--muted); max-width: 540px; margin-bottom: 36px; text-wrap: pretty; } .msdm-hero__byline { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; } .msdm-hero__avatar { width: 44px; height: 44px; border-radius: 999px; background: linear-gradient(135deg, var(--sand) 0%, var(--coral) 100%); border: 1px solid var(--line-soft); flex-shrink: 0; overflow: hidden; } .msdm-hero__avatar img { width: 100%; height: 100%; object-fit: cover; } .msdm-hero__author { font-size: 14px; font-weight: 500; } .msdm-hero__meta-line { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-top: 2px; } .msdm-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; background: var(--coral); color: var(--forest-ink) !important; font-family: var(--sans); font-size: 14px; font-weight: 500; border-radius: 999px; transition: background 160ms ease, color 160ms ease; } .msdm-btn:hover { background: var(--coral-deep); color: var(--paper) !important; } .msdm-btn svg { stroke: currentColor; } .msdm-hero__media-wrap { position: relative; isolation: isolate; overflow: visible; } .msdm-hero__media { aspect-ratio: 4 / 5; border-radius: 4px; position: relative; z-index: 1; overflow: hidden; } .msdm-hero__media img { z-index: 1; } .msdm-hero__pull { position: absolute !important; bottom: 24px; left: -24px; z-index: 50; background: var(--paper); padding: 16px 20px; max-width: 240px; box-shadow: 0 16px 40px rgba(47,62,54,0.12); border-radius: 4px; } .msdm-hero__pull-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--coral-deep); margin-bottom: 6px; } .msdm-hero__pull-quote { font-family: var(--serif); font-size: 17px; font-style: italic; line-height: 1.3; color: var(--forest-ink); } @media (max-width: 880px) { .msdm-hero__pull { position: static; max-width: none; margin-top: 16px; } } /* ============================================================ ARTICLE GRID — "The Reading Room" Filter chips + 3-up cards (lead card spans 2x2) ============================================================ */ .msdm-articles { padding: calc(96px * var(--density)) 0; } .msdm-articles__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 36px; } .msdm-articles__kicker { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--coral-deep); margin-bottom: 12px; } .msdm-articles__title { font-size: clamp(34px, 4.2vw, 56px); max-width: 680px; text-wrap: balance; } .msdm-articles__archive { font-family: var(--sans); font-size: 14px; font-weight: 500; padding-bottom: 4px; border-bottom: 1px solid var(--forest-ink); } .msdm-chips { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 28px; margin-bottom: 40px; border-bottom: 1px solid var(--line-soft); list-style: none; } .msdm-chip { padding: 10px 18px; font-size: 13px; font-weight: 500; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--forest-ink); transition: all 180ms ease; cursor: pointer; font-family: var(--sans); } .msdm-chip:hover { background: var(--cream-deep); } .msdm-chip.is-on { background: var(--forest-ink); color: var(--paper); border-color: var(--forest-ink); } .msdm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(48px * var(--density)) 32px; } @media (max-width: 920px) { .msdm-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .msdm-grid { grid-template-columns: 1fr; } } .msdm-card { display: block; } .msdm-card a { display: block; color: inherit; } .msdm-card__media { aspect-ratio: 4 / 5; border-radius: 4px; margin-bottom: 18px; overflow: hidden; transition: transform 600ms cubic-bezier(.4,0,.2,1); } .msdm-card a:hover .msdm-card__media { transform: scale(1.005); } /* ----- Lead card — magazine-style horizontal split ----- The lead spans 2 grid columns × 2 rows in the Reading Room grid. Inside the card, the becomes its own 2-col grid so the image sits left and the title / excerpt / byline stack vertically on the right — same visual weight as the design's Cover Story hero. */ .msdm-card--large { grid-column: span 2; /* No row span — the magazine-style split lays out at image height, so spanning 2 rows would leave a void below the lead. */ } .msdm-card--large > a { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0 44px; align-items: center; } .msdm-card--large .msdm-card__media { aspect-ratio: 4 / 5; margin-bottom: 0; width: 100%; max-width: 100%; height: auto; min-width: 0; } .msdm-card--large .msdm-card__body { display: flex; flex-direction: column; gap: 18px; } .msdm-card--large .msdm-card__title { margin-bottom: 0; } .msdm-card--large .msdm-card__excerpt { margin-bottom: 0; max-width: none; font-size: 16px; line-height: 1.55; } .msdm-card--large .msdm-card__meta { margin-top: 6px; } /* Stack the lead vertically when there's no room for side-by-side. */ @media (max-width: 920px) { .msdm-card--large { grid-column: span 2; grid-row: auto; } .msdm-card--large > a { display: block; } .msdm-card--large .msdm-card__media { aspect-ratio: 4 / 3.4; margin-bottom: 18px; } .msdm-card--large .msdm-card__body { gap: 14px; } } @media (max-width: 600px) { .msdm-card--large { grid-column: span 1; } } .msdm-card a:hover .msdm-card__media { transform: scale(1.005); } .msdm-card__tag { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; padding: 5px 9px; background: rgba(251,248,242,0.92); color: var(--forest-ink); border-radius: 2px; } .msdm-card__title { font-size: clamp(20px, 1.6vw, 24px); margin-bottom: 10px; color: var(--forest-ink); transition: color 220ms ease; text-wrap: pretty; } .msdm-card--large .msdm-card__title { font-size: clamp(28px, 3vw, 38px); } .msdm-card a:hover .msdm-card__title { color: var(--sage-deep); } .msdm-card__excerpt { font-size: 14.5px; color: var(--muted); margin-bottom: 14px; text-wrap: pretty; } .msdm-card--large .msdm-card__excerpt { max-width: 560px; } .msdm-card__meta { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .msdm-card__meta-dot { opacity: 0.4; } /* ============================================================ SEARCH — Results page (refine input + grid + empty state) ============================================================ */ .msdm-search-head { padding: calc(56px * var(--density)) 0 calc(40px * var(--density)); border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--cream-deep) 0%, var(--cream) 100%); } .msdm-search-head__inner { max-width: 760px; margin: 0 auto; text-align: center; } .msdm-search-head__title { font-size: clamp(34px, 4.4vw, 56px); margin: 8px 0 16px; color: var(--forest-ink); text-wrap: pretty; } .msdm-search-head__title em { font-style: italic; color: var(--coral-deep); } .msdm-search-head__desc { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--muted); margin: 0 0 24px; } .msdm-search-head__meta { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 24px; } .msdm-search-head__meta strong { color: var(--forest-ink); font-family: var(--sans); font-size: 13px; font-weight: 500; margin-right: 4px; } /* Big refine-search input — variant of header pill, sized up so it anchors the page. Adds a Submit button beside the field. */ .msdm-search--big { max-width: 560px; width: 100%; margin: 0 auto; padding: 6px 6px 6px 18px; gap: 12px; } .msdm-search--big svg { width: 18px; height: 18px; } .msdm-search--big input[type="search"], .msdm-search--big input[type="text"] { font-size: 16px; padding: 14px 0; } .msdm-search__submit { flex-shrink: 0; background: var(--forest-ink); color: var(--paper); border: none; border-radius: 999px; padding: 12px 22px; font-family: var(--sans); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 160ms ease; } .msdm-search__submit:hover { background: var(--forest); } /* Highlight wrapper for matched terms in title + excerpt */ .msdm-mark { background: color-mix(in srgb, var(--coral) 26%, transparent); color: inherit; padding: 0 2px; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* Empty state — friendly message + suggested topic pills */ .msdm-search__empty { padding: 64px 24px; text-align: center; max-width: 620px; margin: 0 auto; } .msdm-search__empty-mark { font-size: 48px; color: var(--coral); line-height: 1; margin-bottom: 20px; } .msdm-search__empty-title { font-size: clamp(24px, 2.8vw, 36px); margin-bottom: 16px; color: var(--forest-ink); text-wrap: pretty; } .msdm-search__empty-title em { font-style: italic; color: var(--coral-deep); } .msdm-search__empty-text { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--muted); margin: 0 0 24px; } .msdm-search__suggest { justify-content: center; } /* ============================================================ ARCHIVE — Category / Tag / Author / Date / Search list pages Editorial header + 8/4 main+aside grid + pagination. ============================================================ */ .msdm-archive-head { padding: calc(56px * var(--density)) 0 calc(32px * var(--density)); border-bottom: 1px solid var(--line-soft); } .msdm-archive-head__inner { max-width: 820px; margin: 0 auto; text-align: center; } .msdm-archive-head__title { font-size: clamp(40px, 5.4vw, 72px); margin: 8px 0 16px; text-wrap: pretty; color: var(--forest-ink); } .msdm-archive-head__desc { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; color: var(--muted); max-width: 620px; margin: 0 auto 24px; text-wrap: pretty; } .msdm-archive-head__meta { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); } .msdm-archive-head__meta strong { color: var(--forest-ink); font-weight: 500; font-family: var(--sans); font-size: 13px; margin-right: 4px; } .msdm-archive { padding: calc(56px * var(--density)) 0; } .msdm-archive__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: flex-start; } @media (max-width: 980px) { .msdm-archive__layout { grid-template-columns: 1fr; gap: 48px; } } /* Main grid — 2-up cards on archive (vs 3-up on home, since the sidebar takes the third column's worth of space) */ .msdm-grid--archive { grid-template-columns: repeat(2, 1fr); } @media (max-width: 600px) { .msdm-grid--archive { grid-template-columns: 1fr; } } /* Sidebar / right rail */ .msdm-archive__aside { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 32px; } @media (max-width: 980px) { .msdm-archive__aside { position: static; } } .msdm-aside__block { display: flex; flex-direction: column; gap: 14px; } .msdm-aside__kicker { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--coral-deep); padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); } /* Search pill — variant of the header search */ .msdm-search--aside { width: 100%; max-width: none; } /* Recent stories list — thumb + title rows */ .msdm-aside__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .msdm-aside__item { display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); transition: background 160ms ease; } .msdm-aside__list li:last-child .msdm-aside__item { border-bottom: none; } .msdm-aside__item:hover .msdm-aside__title { color: var(--coral-deep); } .msdm-aside__thumb { width: 72px; height: 72px; border-radius: 4px; overflow: hidden; position: relative; } .msdm-aside__thumb img { width: 100%; height: 100%; object-fit: cover; } .msdm-aside__cat { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 4px; } .msdm-aside__title { font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.25; color: var(--forest-ink); transition: color 160ms ease; text-wrap: pretty; } .msdm-aside__date { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-top: 4px; } /* Topic pills */ .msdm-aside__tags { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; } .msdm-aside__tag { display: inline-block; padding: 6px 12px; font-size: 12px; font-weight: 500; border-radius: 999px; border: 1px solid var(--line); color: var(--forest-ink); transition: all 160ms ease; } .msdm-aside__tag:hover { background: var(--cream-deep); border-color: var(--sage); } .msdm-aside__tag.is-current { background: var(--forest-ink); color: var(--paper); border-color: var(--forest-ink); } /* Pagination */ .msdm-pagination { margin-top: calc(56px * var(--density)); padding-top: 32px; border-top: 1px solid var(--line-soft); display: flex; justify-content: center; } .msdm-pagination .nav-links { display: flex; gap: 6px; align-items: center; } .msdm-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--forest-ink); border: 1px solid var(--line); border-radius: 999px; transition: all 160ms ease; } .msdm-pagination .page-numbers:hover { background: var(--cream-deep); border-color: var(--sage); } .msdm-pagination .page-numbers.current { background: var(--forest-ink); color: var(--paper); border-color: var(--forest-ink); } .msdm-pagination .page-numbers.dots { border-color: transparent; } .msdm-pagination .prev, .msdm-pagination .next { padding: 0 18px; } .msdm-archive__empty { padding: 80px 32px; text-align: center; font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 22px; } /* ============================================================ SINGLE POST — Editorial article template Hero header (eyebrow + Italiana title + dek + byline) → full-bleed hero image → centered 720px reading column → author bio strip → "More from [Category]" related-posts grid. ============================================================ */ .msdm-single { padding-top: calc(48px * var(--density)); } .msdm-single__header { max-width: 840px; margin: 0 auto; text-align: center; } .msdm-single__eyebrow { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--coral-deep); margin-bottom: 28px; } .msdm-single__eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 4px; } .msdm-single__eyebrow a:hover { color: var(--forest-ink); } .msdm-single__title { font-size: clamp(36px, 5.4vw, 68px); margin-bottom: 24px; text-wrap: pretty; color: var(--forest-ink); } .msdm-single__dek { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.45; color: var(--muted); max-width: 640px; margin: 0 auto 36px; text-wrap: pretty; } .msdm-single__byline { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 48px; text-align: left; } .msdm-single__hero { width: 100%; max-width: 1180px; margin: 0 auto calc(48px * var(--density)); aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; } .msdm-single__hero img { width: 100%; height: 100%; object-fit: cover; display: block; } .msdm-single__body { max-width: 720px; margin: 0 auto; padding-bottom: calc(64px * var(--density)); font-family: var(--sans); font-size: 18px; line-height: 1.7; color: var(--forest-ink); } .msdm-single__body p, .msdm-single__body ul, .msdm-single__body ol, .msdm-single__body blockquote, .msdm-single__body figure, .msdm-single__body table { margin: 0 0 1.4em; } .msdm-single__body h2 { font-size: clamp(28px, 2.8vw, 40px); margin: 2em 0 0.6em; } .msdm-single__body h3 { font-size: clamp(22px, 2vw, 28px); margin: 1.6em 0 0.5em; } .msdm-single__body h4 { font-size: 18px; font-family: var(--sans); font-weight: 600; letter-spacing: 0; margin: 1.4em 0 0.4em; } .msdm-single__body a { color: var(--sage-deep); border-bottom: 1px solid color-mix(in srgb, var(--sage-deep) 35%, transparent); transition: border-color 160ms ease, color 160ms ease; } .msdm-single__body a:hover { color: var(--coral-deep); border-bottom-color: var(--coral-deep); } .msdm-single__body blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2vw, 28px); line-height: 1.4; color: var(--forest); padding-left: 28px; border-left: 3px solid var(--coral); margin-left: 0; margin-right: 0; } .msdm-single__body img, .msdm-single__body figure { border-radius: 4px; margin-left: auto; margin-right: auto; } .msdm-single__body ul, .msdm-single__body ol { padding-left: 1.4em; } .msdm-single__body li { margin-bottom: 0.4em; } .msdm-single__body strong { font-weight: 600; color: var(--forest); } /* Author bio strip — soft band between body and related posts */ .msdm-author-bio { background: var(--cream-deep); padding: calc(56px * var(--density)) 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .msdm-author-bio__inner { display: flex; align-items: flex-start; gap: 32px; max-width: 820px; margin: 0 auto; } .msdm-author-bio__avatar { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 999px; overflow: hidden; background: linear-gradient(135deg, var(--sand) 0%, var(--coral) 100%); } .msdm-author-bio__avatar img { width: 100%; height: 100%; object-fit: cover; } .msdm-author-bio__kicker { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--coral-deep); margin-bottom: 8px; } .msdm-author-bio__name { font-size: clamp(24px, 2.4vw, 32px); margin: 0 0 12px; color: var(--forest-ink); } .msdm-author-bio__text { font-size: 16px; line-height: 1.6; color: var(--forest-ink); margin: 0 0 14px; max-width: 620px; } .msdm-author-bio__link { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--coral-deep); padding-bottom: 2px; border-bottom: 1px solid var(--coral-deep); } .msdm-author-bio__link:hover { color: var(--forest-ink); border-bottom-color: var(--forest-ink); } @media (max-width: 640px) { .msdm-author-bio__inner { flex-direction: column; gap: 20px; } } /* Related posts — same component as the homepage Reading Room */ .msdm-related { padding: calc(80px * var(--density)) 0; } .msdm-related__head { margin-bottom: 40px; } .msdm-related__title { font-size: clamp(28px, 3vw, 40px); max-width: 680px; text-wrap: balance; } .msdm-grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 920px) { .msdm-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .msdm-grid--3 { grid-template-columns: 1fr; } } /* ============================================================ FOOTER — Dark forest, newsletter + link cols ============================================================ */ .msdm-footer { background: var(--forest); color: var(--paper); padding-top: calc(96px * var(--density)); padding-bottom: 32px; } .msdm-footer__newsletter { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; padding-bottom: 72px; border-bottom: 1px solid rgba(251,248,242,0.12); } .msdm-footer__kicker { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--coral); margin-bottom: 14px; } .msdm-footer__title { font-size: clamp(32px, 4vw, 52px); color: var(--paper); max-width: 560px; text-wrap: balance; } .msdm-footer__lead { font-family: var(--serif); font-style: italic; font-size: 18px; color: rgba(251,248,242,0.8); margin-bottom: 24px; text-wrap: pretty; } .msdm-newsletter-form { display: flex; background: var(--paper); border-radius: 999px; padding: 6px; gap: 6px; } .msdm-newsletter-form input { flex: 1; border: none; outline: none; padding: 12px 18px; font-family: var(--sans); font-size: 14px; background: transparent; color: var(--forest-ink); } .msdm-newsletter-form button { background: var(--coral); color: var(--forest-ink); padding: 12px 22px; border-radius: 999px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; font-family: var(--sans); transition: background 160ms ease, color 160ms ease; } .msdm-newsletter-form button:hover { background: var(--coral-deep); color: var(--paper); } .msdm-footer__caption { margin-top: 14px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(251,248,242,0.5); } /* Single-row footer grid: brand block (logo + description + socials stacked) on the left, then 4 equal link columns. All start at the same vertical baseline so column headings line up. */ .msdm-footer__cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; padding: 64px 0 56px; align-items: start; } .msdm-footer__brand { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.5; color: rgba(251,248,242,0.7); max-width: 100%; /* respect the grid col, don't push it wider */ margin: 20px 0 0; text-wrap: pretty; } .msdm-socials { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; } .msdm-socials a { padding: 8px 14px; border: 1px solid rgba(251,248,242,0.18); border-radius: 999px; font-size: 12px; color: rgba(251,248,242,0.8); } .msdm-socials a:hover { color: var(--coral); border-color: var(--coral); } .msdm-footer__col-title { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--coral); margin-bottom: 18px; } /* Reset