/* ========================================================================= Magnolia Cycles · Theme stylesheet Light + dark, switched via [data-theme="light"] / [data-theme="dark"] on . Mirrored in WordPress theme at /wp-theme/magnolia-cycles/assets/css/theme.css ========================================================================= */ /* ----- Color tokens ----- */ :root, :root[data-theme="dark"] { --bg: #0e1214; --bg-surface: #141d22; --bg-surface-2: #1a2126; --border-subtle:#1a2126; --border: #2c3a42; --border-strong:#3d4f57; --text-faint: #3d4f57; --text-muted: #5c6e76; --text-soft: #8a9ba3; --text-body: #c8c4be; --text-strong: #f0ede8; --accent: #7b9dac; --accent-bright:#a3bfca; --on-accent: #0e1214; --photo-filter: saturate(0.85) contrast(1.05) brightness(0.95); --photo-overlay-end: rgba(14,18,20,0.85); --photo-overlay-mid: rgba(14,18,20,0); --photo-overlay-right: rgba(14,18,20,0.6); --scrollbar-thumb: #2c3a42; --status-good: #6f9c7b; --status-sold: #b8826a; color-scheme: dark; } :root[data-theme="light"] { --bg: #faf7f2; --bg-surface: #f0ede8; --bg-surface-2: #e8e4dc; --border-subtle:#e2dccd; --border: #d4ceb8; --border-strong:#b8ad94; --text-faint: #b8ad94; --text-muted: #8b8576; --text-soft: #5c6e76; --text-body: #2d3438; --text-strong: #0e1214; --accent: #4a6571; --accent-bright:#2a4a55; --on-accent: #faf7f2; --photo-filter: saturate(0.95) contrast(1.02); --photo-overlay-end: rgba(250,247,242,0.78); --photo-overlay-mid: rgba(250,247,242,0); --photo-overlay-right: rgba(250,247,242,0.55); --scrollbar-thumb: #d4ceb8; --status-good: #3d7050; --status-sold: #8a5037; color-scheme: light; } /* Smooth visual transition when toggling — but no animation on first paint */ html.theme-ready, html.theme-ready body, html.theme-ready *::before, html.theme-ready *::after { transition: background-color 360ms ease, color 360ms ease, border-color 360ms ease, fill 360ms ease, stroke 360ms ease; } /* ----- Reset / base ----- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text-body); font-family: 'Lora', Georgia, serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } button, a, input, textarea, select { font: inherit; } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); } /* ----- Page hero (sub-pages) ----- */ .page-hero { padding: 168px 64px 96px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 24px; max-width: 1280px; } .page-hero__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); } .page-hero__title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(48px, 7vw, 104px); line-height: 1.02; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-strong); max-width: 16ch; } .page-hero__title em { font-style: italic; text-transform: lowercase; letter-spacing: 0.01em; color: var(--accent-bright); } .page-hero__lede { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.45; color: var(--text-body); max-width: 720px; margin-top: 12px; } /* ----- Generic two-column section ----- */ .section { padding: 96px 64px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 280px 1fr; gap: 80px; max-width: 1280px; } .section__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); padding-top: 8px; } .section__content { max-width: 720px; } .section__head { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-strong); margin-bottom: 24px; } .section__body, .section p { font-family: 'Lora', serif; font-size: 16px; line-height: 1.8; color: var(--text-body); margin-bottom: 18px; } .section p em { color: var(--accent-bright); font-style: italic; } .section ul { padding-left: 0; list-style: none; margin: 12px 0 18px; } .section li { font-family: 'Lora', serif; font-size: 16px; line-height: 1.7; color: var(--text-body); padding: 12px 0; border-top: 1px solid var(--border-subtle); display: flex; gap: 16px; } .section li::before { content: ''; flex: 0 0 6px; height: 6px; border: 1px solid var(--accent); border-radius: 50%; margin-top: 9px; } /* ----- Service menu grid ----- */ .menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; background: var(--border); border: 1px solid var(--border); margin-top: 16px; } .menu-grid__item { background: var(--bg); padding: 28px 28px; display: flex; flex-direction: column; gap: 8px; } .menu-grid__name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; color: var(--text-strong); letter-spacing: 0.04em; display: flex; justify-content: space-between; align-items: baseline; } .menu-grid__price { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent-bright); letter-spacing: 0.04em; } .menu-grid__desc { font-family: 'Lora', serif; font-size: 14px; line-height: 1.7; color: var(--text-soft); } /* ----- CTA band ----- */ .cta-band { padding: 96px 64px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; background: var(--bg-surface); border-bottom: 1px solid var(--border); } .cta-band__head { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(32px, 4vw, 56px); line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-strong); } .cta-band__head em { font-style: italic; text-transform: lowercase; color: var(--accent-bright); letter-spacing: 0.01em; } .cta-band__body { font-family: 'Lora', serif; font-size: 16px; line-height: 1.7; color: var(--text-soft); max-width: 520px; } /* ----- Pill links / buttons ----- */ .pill-link { display: inline-flex; align-items: center; height: 50px; padding: 0 36px; background: transparent; border: 1px solid var(--accent); border-radius: 9999px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-strong); text-decoration: none; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; } .pill-link:hover { background: var(--accent); color: var(--on-accent); } .pill-link--solid { background: var(--accent); color: var(--on-accent); } .pill-link--solid:hover { background: var(--accent-bright); border-color: var(--accent-bright); } .pill-link--ghost { border-color: var(--border-strong); color: var(--text-body); } .pill-link--ghost:hover { background: transparent; color: var(--text-strong); border-color: var(--accent); } /* ----- Homepage Fit teaser ----- */ .fit-teaser { display: grid; grid-template-columns: 1fr 1.1fr; background: var(--bg-surface); border-top: 1px solid var(--border); min-height: 80vh; } .fit-teaser__text { padding: 96px 64px 96px 80px; display: flex; flex-direction: column; justify-content: center; } .fit-teaser__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 28px; } .fit-teaser__head { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(40px, 5.4vw, 76px); line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-strong); margin-bottom: 32px; } .fit-teaser__head em { font-style: italic; text-transform: lowercase; letter-spacing: 0.01em; color: var(--accent-bright); } .fit-teaser__lede { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: 22px; line-height: 1.5; color: var(--text-body); max-width: 480px; margin-bottom: 28px; } .fit-teaser__body { font-family: 'Lora', serif; font-size: 16px; line-height: 1.75; color: var(--text-soft); max-width: 480px; margin-bottom: 40px; } .fit-teaser__quote-cell { padding: 96px 80px 96px 64px; display: flex; flex-direction: column; justify-content: center; gap: 32px; border-left: 1px solid var(--border); } .fit-teaser__quote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(28px, 3vw, 40px); line-height: 1.4; color: var(--text-strong); letter-spacing: 0.01em; max-width: 520px; } .fit-teaser__quote::before { content: '\201C'; font-size: 80px; line-height: 0.5; color: var(--border-strong); display: block; margin-bottom: 24px; } .fit-teaser__quote-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); } /* ----- Homepage Fabrication teaser ----- */ .fab-teaser { position: relative; min-height: 90vh; background: var(--bg); border-top: 1px solid var(--border); display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; } .fab-teaser__photo { position: relative; overflow: hidden; background: var(--bg-surface); } .fab-teaser__photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--photo-filter); } .fab-teaser__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 50%, var(--photo-overlay-right) 100%); } .fab-teaser__text { padding: 96px 80px 96px 64px; display: flex; flex-direction: column; justify-content: center; } .fab-teaser__num { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; color: var(--text-muted); margin-bottom: 28px; } .fab-teaser__head { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(40px, 5.4vw, 76px); line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-strong); margin-bottom: 32px; } .fab-teaser__head em { font-style: italic; text-transform: lowercase; color: var(--accent-bright); letter-spacing: 0.01em; } .fab-teaser__body { font-family: 'Lora', serif; font-size: 16px; line-height: 1.75; color: var(--text-soft); max-width: 480px; margin-bottom: 36px; } .fab-teaser__specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 40px; max-width: 480px; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .fab-teaser__spec { padding: 18px 0; border-right: 1px solid var(--border-subtle); padding-right: 16px; } .fab-teaser__spec:last-child { border-right: 0; padding-left: 16px; padding-right: 0; } .fab-teaser__spec:nth-child(2) { padding-left: 16px; } .fab-teaser__spec-num { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 300; color: var(--text-strong); letter-spacing: 0.04em; line-height: 1; margin-bottom: 6px; } .fab-teaser__spec-lbl { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); } /* ----- Homepage Used Bikes teaser ----- */ .used-teaser { background: var(--bg-surface); border-top: 1px solid var(--border); padding: 100px 48px; } .used-teaser__head-row { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: 32px; margin-bottom: 48px; gap: 24px; flex-wrap: wrap; } .used-teaser__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; } .used-teaser__head { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-strong); } .used-teaser__head em { font-style: italic; text-transform: lowercase; color: var(--accent-bright); letter-spacing: 0.01em; } .used-teaser__sub { font-family: 'Lora', serif; font-size: 15px; line-height: 1.7; color: var(--text-soft); max-width: 360px; } .used-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--border); border: 1px solid var(--border); } .used-grid--four { grid-template-columns: repeat(4, 1fr); } .used-card { background: var(--bg); padding: 24px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; } .used-card__photo { aspect-ratio: 4 / 3; background: var(--bg-surface-2); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .used-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--photo-filter); } .used-card__placeholder { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.22em; color: var(--text-faint); } .used-card__status { position: absolute; top: 12px; right: 12px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 10px; background: var(--bg); color: var(--status-good); border: 1px solid var(--border); } .used-card__status--sold { color: var(--status-sold); } .used-card__meta { display: flex; justify-content: space-between; align-items: baseline; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); } .used-card__name { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 400; color: var(--text-strong); letter-spacing: 0.03em; line-height: 1.15; } .used-card__price { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; color: var(--accent-bright); letter-spacing: 0.02em; } .used-card__specs { font-family: 'Lora', serif; font-size: 13px; line-height: 1.65; color: var(--text-soft); } .used-teaser__more { display: flex; justify-content: center; padding-top: 40px; } .used-empty { grid-column: 1 / -1; background: var(--bg); padding: 72px 32px; text-align: center; } .used-empty__lead { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 300; color: var(--text-strong); letter-spacing: 0.03em; margin-bottom: 12px; } .used-empty__sub { font-family: 'Lora', serif; font-size: 14px; line-height: 1.7; color: var(--text-muted); max-width: 440px; margin: 0 auto; } .used-empty__sub a { color: var(--accent-bright); text-decoration: none; } .used-empty__sub a:hover { text-decoration: underline; } /* ----- Homepage Events teaser ----- */ .events-teaser { background: var(--bg); border-top: 1px solid var(--border); padding: 100px 48px; display: grid; grid-template-columns: 360px 1fr; gap: 64px; } .events-teaser__intro h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-strong); margin-bottom: 24px; } .events-teaser__intro h2 em { font-style: italic; text-transform: lowercase; color: var(--accent-bright); letter-spacing: 0.01em; } .events-teaser__intro p { font-family: 'Lora', serif; font-size: 15px; line-height: 1.75; color: var(--text-soft); margin-bottom: 28px; } .events-teaser__intro .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 24px; } .events-teaser__list { display: flex; flex-direction: column; border-top: 1px solid var(--border); } .event-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--border-subtle); align-items: center; } .event-row__date { font-family: 'Cormorant Garamond', serif; font-weight: 300; color: var(--text-strong); } .event-row__date-month { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; } .event-row__date-day { font-size: 40px; line-height: 1; letter-spacing: 0.02em; } .event-row__name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; color: var(--text-strong); letter-spacing: 0.03em; margin-bottom: 4px; } .event-row__desc { font-family: 'Lora', serif; font-size: 14px; line-height: 1.6; color: var(--text-soft); } .event-row__time { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; white-space: nowrap; } /* ----- Recurring rides (Events page) ----- */ .recurring { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--border); border: 1px solid var(--border); max-width: 1280px; margin: 0 64px; } .recurring__item { background: var(--bg); padding: 32px 32px; display: flex; flex-direction: column; gap: 12px; } .recurring__day { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); } .recurring__name { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 300; color: var(--text-strong); letter-spacing: 0.04em; } .recurring__time { font-family: 'Lora', serif; font-style: italic; font-size: 14px; color: var(--accent-bright); } .recurring__desc { font-family: 'Lora', serif; font-size: 14px; line-height: 1.7; color: var(--text-soft); } /* ----- Calendar embed wrapper ----- */ .calendar-wrap { max-width: 1280px; margin: 0 64px 96px; border: 1px solid var(--border); background: var(--bg-surface); padding: 32px; } .calendar-wrap__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .calendar-wrap__title { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 400; color: var(--text-strong); letter-spacing: 0.04em; } .calendar-wrap__hint { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); } .calendar-frame { width: 100%; height: 720px; border: 0; background: #fff; } :root[data-theme="dark"] .calendar-frame { filter: invert(1) hue-rotate(180deg); } /* ----- Used Bikes archive page ----- */ .used-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 24px 64px; max-width: 1280px; flex-wrap: wrap; gap: 16px; border-bottom: 1px solid var(--border); } .used-toolbar__filters { display: flex; gap: 8px; flex-wrap: wrap; } .used-toolbar__chip { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; background: transparent; border: 1px solid var(--border); color: var(--text-soft); padding: 8px 16px; cursor: pointer; transition: all 180ms ease; } .used-toolbar__chip[aria-pressed="true"], .used-toolbar__chip:hover { border-color: var(--accent); color: var(--text-strong); } .used-toolbar__chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); } .used-toolbar__count { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); } .used-listing { padding: 48px 48px 96px; } .used-listing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--border); border: 1px solid var(--border); } @media (max-width: 1100px) { .used-listing__grid { grid-template-columns: repeat(2, 1fr); } } /* ----- Single used bike (gallery + details) ----- */ .bike-detail { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; border-bottom: 1px solid var(--border); padding-top: 56px; } .bike-detail__gallery { padding: 48px 32px 48px 64px; display: flex; flex-direction: column; gap: 16px; } .bike-detail__hero { aspect-ratio: 4 / 3; background: var(--bg-surface); border: 1px solid var(--border); position: relative; overflow: hidden; } .bike-detail__hero img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); } .bike-detail__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .bike-detail__thumb { aspect-ratio: 1; background: var(--bg-surface); border: 1px solid var(--border); overflow: hidden; cursor: pointer; } .bike-detail__thumb img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); } .bike-detail__thumb[aria-current="true"] { border-color: var(--accent); } .bike-detail__info { padding: 48px 64px 48px 32px; display: flex; flex-direction: column; gap: 24px; border-left: 1px solid var(--border); } .bike-detail__breadcrumb { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); } .bike-detail__breadcrumb a { color: var(--accent); text-decoration: none; } .bike-detail__name { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(36px, 4.4vw, 52px); line-height: 1.05; letter-spacing: 0.03em; color: var(--text-strong); } .bike-detail__price-row { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .bike-detail__price { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 300; color: var(--accent-bright); letter-spacing: 0.02em; } .bike-detail__status { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--status-good); color: var(--status-good); } .bike-detail__status--sold { border-color: var(--status-sold); color: var(--status-sold); } .bike-detail__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border-subtle); } .bike-detail__spec { padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); display: flex; justify-content: space-between; gap: 16px; } .bike-detail__spec:nth-child(2n) { border-right: 0; } .bike-detail__spec:nth-last-child(-n+2) { border-bottom: 0; } .bike-detail__spec-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); } .bike-detail__spec-value { font-family: 'Lora', serif; font-size: 14px; color: var(--text-strong); } .bike-detail__desc { font-family: 'Lora', serif; font-size: 15px; line-height: 1.75; color: var(--text-body); } /* ----- Responsive ----- */ @media (max-width: 1100px) { .events-teaser { grid-template-columns: 1fr; } } @media (max-width: 900px) { .fit-teaser, .fab-teaser { grid-template-columns: 1fr; } .fit-teaser__text, .fit-teaser__quote-cell, .fab-teaser__text { padding: 64px 32px; } .fit-teaser__quote-cell { border-left: 0; border-top: 1px solid var(--border); } .fab-teaser__photo { min-height: 50vh; } .used-grid, .used-grid--four { grid-template-columns: repeat(2, 1fr); } .used-listing__grid { grid-template-columns: 1fr; } .bike-detail { grid-template-columns: 1fr; } .bike-detail__gallery { padding: 32px; } .bike-detail__info { padding: 32px; border-left: 0; border-top: 1px solid var(--border); } } @media (max-width: 800px) { .page-hero { padding: 120px 32px 64px; } .section { grid-template-columns: 1fr; gap: 24px; padding: 64px 32px; } .menu-grid { grid-template-columns: 1fr; } .cta-band { padding: 64px 32px; } .recurring { grid-template-columns: 1fr; margin: 0 32px; } .calendar-wrap { margin: 0 32px 64px; padding: 16px; } .used-teaser, .events-teaser { padding: 64px 24px; } .used-grid, .used-grid--four { grid-template-columns: 1fr; } } /* ----- Hybrid-editability guards --------------------------------------- Pages whose content lives in the block editor (post-content with class mc-structured) rely on theme.css classes for ALL spacing. Neutralize browser default margins so native blocks render identically to the original hand-written markup. :where() keeps specificity at zero so any class rule (e.g. .section p { margin-bottom: 18px }) still wins. */ .mc-structured :where(h1,h2,h3,h4,h5,h6,p,ul,ol,figure) { margin: 0; } .mc-structured :where(ul,ol) { padding: 0; } /* ----- Custom Fabrication page (moved from template for hybrid editability) ----- */ .fab-photo { width: 100%; max-width: 1280px; aspect-ratio: 16/7; overflow: hidden; border-bottom: 1px solid var(--border); } .fab-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.05); } .timeline { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 16px; } .timeline__step { display: grid; grid-template-columns: 80px 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid var(--border-subtle); } .timeline__num { font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 300; color: var(--accent); letter-spacing: 0.04em; line-height: 1; } .timeline__title { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 400; color: var(--text-strong); letter-spacing: 0.04em; margin-bottom: 8px; } .timeline__desc { font-family: 'Lora', serif; font-size: 15px; line-height: 1.7; color: var(--text-muted); } .mc-quote { border-left: 2px solid var(--accent); padding: 8px 0 8px 28px; margin: 24px 0; } .mc-quote p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 20px; line-height: 1.55; color: var(--text-body); } .mc-quote cite { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); font-style: normal; display: block; margin-top: 10px; } /* ----- About page styles (moved from template) ----- */ .visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1280px; border: 1px solid var(--border); background: var(--border); margin: 0 64px; } .visit-grid__cell { background: var(--bg); padding: 48px; } .visit-grid__head { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; } .visit-grid__big { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 300; color: var(--text-strong); letter-spacing: 0.04em; line-height: 1.4; } .visit-grid__sub { font-family: 'Lora', serif; font-size: 15px; line-height: 1.7; color: var(--text-muted); margin-top: 12px; } .awards { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; } .awards__row { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--border-subtle); } .awards__year { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 300; color: var(--accent); letter-spacing: 0.04em; } .awards__title { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--text-strong); letter-spacing: 0.04em; } .awards__source { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; } @media (max-width: 800px) { .visit-grid { grid-template-columns: 1fr; margin: 0 32px; } .visit-grid__cell { padding: 28px; } } /* ----- Meet the Team (About) ----- */ .team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 24px; } .team-card { display: flex; flex-direction: column; gap: 14px; } .team-card__photo { aspect-ratio: 4/5; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border); } .team-card__photo img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); } .team-card__name { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 400; color: var(--text-strong); letter-spacing: 0.04em; } .team-card__role { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); } .team-card__bio { font-family: 'Lora', serif; font-size: 15px; line-height: 1.75; color: var(--text-soft); } @media (max-width: 800px) { .team-grid { grid-template-columns: 1fr; } } /* ----- Full-width band section (events page etc.) ----- */ .band { padding: 64px 0; border-bottom: 1px solid var(--border); } .band--last { border-bottom: 0; padding-bottom: 0; } .band__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); padding: 0 64px 32px; } @media (max-width: 800px) { .band__label { padding: 0 32px 24px; } } /* ----- Blog (Journal) ----- */ .post-hero { padding: 168px 64px 48px; border-bottom: 1px solid var(--border); max-width: 1280px; } .post-hero__date { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 20px; } .post-hero__title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(40px, 5.5vw, 80px); line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-strong); max-width: 20ch; } .blog-prose-wrap { padding: 64px; } .blog-prose { max-width: 720px; } .blog-prose p { font-family: 'Lora', serif; font-size: 17px; line-height: 1.85; color: var(--text-body); margin: 0 0 1.5em; } .blog-prose h2, .blog-prose h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; letter-spacing: 0.04em; color: var(--text-strong); margin: 1.8em 0 0.7em; } .blog-prose h2 { font-size: 32px; } .blog-prose h3 { font-size: 26px; } .blog-prose a { color: var(--accent-bright); } .blog-prose ul, .blog-prose ol { margin: 0 0 1.5em; padding-left: 1.2em; } .blog-prose li { font-family: 'Lora', serif; font-size: 17px; line-height: 1.8; color: var(--text-body); margin-bottom: 0.5em; } .blog-prose blockquote { border-left: 2px solid var(--accent); padding: 8px 0 8px 28px; margin: 2em 0; } .blog-prose blockquote p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; line-height: 1.5; margin: 0; } .blog-prose figure { margin: 2.2em 0; } .blog-prose img { max-width: 100%; height: auto; border: 1px solid var(--border); } .archive-list { padding: 48px 64px 96px; max-width: 1280px; } .archive-item { display: block; padding: 32px 0; border-bottom: 1px solid var(--border-subtle); text-decoration: none; } .archive-item__date { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); } .archive-item h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(26px, 3vw, 40px); letter-spacing: 0.03em; color: var(--text-strong); margin: 8px 0 10px; } .archive-item h2 a { color: inherit; text-decoration: none; } .archive-item h2 a:hover { color: var(--accent-bright); } .archive-item p { font-family: 'Lora', serif; font-size: 15px; line-height: 1.7; color: var(--text-soft); max-width: 680px; } @media (max-width: 800px) { .post-hero { padding: 130px 32px 40px; } .blog-prose-wrap { padding: 40px 32px; } .archive-list { padding: 32px 32px 64px; } } /* ----- Brands strip (homepage) + brands grid (brands page/shortcode) ----- */ .brands-strip { padding: 56px 64px; border-bottom: 1px solid var(--border); text-align: center; background: var(--bg); } .brands-strip__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 28px; } .brands-strip__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 44px; max-width: 1080px; margin: 0 auto; } .brands-strip__name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); transition: color 200ms ease; } .brands-strip__name:hover { color: var(--text-strong); } .brands-strip__logo { height: 26px; width: auto; max-width: 170px; object-fit: contain; opacity: 0.7; transition: opacity 200ms ease; } .brands-strip__logo:hover { opacity: 1; } [data-theme="dark"] .brands-strip__logo { filter: brightness(0) invert(1); } [data-theme="light"] .brands-strip__logo { filter: brightness(0); } .brands-strip__more { display: inline-block; margin-top: 32px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-bright); text-decoration: none; } .brands-strip__more:hover { color: var(--text-strong); } .brands-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); max-width: 1100px; margin: 0 auto; } .brand-card { background: var(--bg); padding: 44px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-decoration: none; min-height: 180px; transition: background 200ms ease; } .brand-card:hover { background: var(--bg-surface); } .brand-card__logo { display: flex; align-items: center; justify-content: center; height: 56px; } .brand-card__logo img { height: 44px; width: auto; max-width: 180px; object-fit: contain; opacity: 0.85; } [data-theme="dark"] .brand-card__logo img { filter: brightness(0) invert(1); } [data-theme="light"] .brand-card__logo img { filter: brightness(0); } .brand-card__wordmark { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-strong); text-align: center; line-height: 1.15; } .brand-card__visit { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); transition: color 200ms ease; text-decoration: none; } .brand-card:hover .brand-card__visit { color: var(--accent-bright); } @media (max-width: 900px) { .brands-grid { grid-template-columns: repeat(2, 1fr); } .brands-strip { padding: 40px 20px; } .brands-strip__row { gap: 18px 30px; } .brands-strip__name { font-size: 18px; } } @media (max-width: 520px) { .brands-grid { grid-template-columns: 1fr; } }