/* * base.css — clean element + button styling derived from live's design tokens * (see tokens.css). On clean pages this is the base layer (no main.css); on the * intentional set:html dump pages it loads after main.css/overrides.css and * imposes the current live design over the captured theme. */ /* ---- Structural basics ---- * Formerly inherited from the 3.4 MB Squarespace main.css bundle. Provided here so * clean pages render correctly without it. Values match what main.css set (root * 16px, bumping to 17px at >=992px; border-box; body margin reset), so the dump * pages that still load main.css are unchanged. */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; } @media (min-width: 992px) { html { font-size: 17px; } } body { margin: 0; } /* ---- Utility: visually hidden ---- * Site-wide sr-only helper. Its main job is the "(opens in a new tab)" note we * put inside external links (WCAG 3.2.5 — warn before a new window opens), both * from components (Button, page copy) and from postbuild.mjs's external-link * pass, which stamps it into content/markdown links it can't reach at source. * Same rules the Header/Footer/SeasonalPopup already use locally; kept global so * markup outside those components can share it. Not purged: PurgeCSS only runs * over the legacy main.css bundle, never base.css. */ .tc-vh { position: absolute; /* Pinned to the containing block's left edge rather than left to its static position. An absolutely-positioned box escapes any ancestor's overflow clipping, so a note parked at the end of a line that already sits at the right edge (e.g. the long substack URL on the home page) would push the document's scrollWidth past the viewport at 320px. left:0 makes this helper structurally incapable of causing horizontal overflow; it is clipped to nothing either way, and screen readers follow DOM order, not visual position. */ left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---- Default link colour -------------------------------------------------- A link written in page copy with no class of its own used to fall through to the browser's default blue (#0000EE) — visibly off-brand on the home page (the phone number, "Newsletter", the Substack address) and on /shop. Wrapped in :where() so this rule carries ZERO specificity: anything that styles a link — Prose, cards, buttons, nav, footer — still wins outright, and this only fills the gap where nothing else applies. Owner directive, 2026-09. */ :where(a:not([class])) { color: var(--color-accent-text); } /* ---- Typography ---- */ html, body { font-family: var(--font-body); color: var(--color-ink); } /* Slightly larger general body type for the older-target audience (the forms already run ~1.125rem). Set on , not :root, so the rem-based heading clamps are unaffected. Conservative bump: ~17px (→ ~18px at >=992px). */ body { font-size: 1.0625rem; line-height: 1.65; } h1, h2, h3, h4, h5, h6, .sqs-html-content h1, .sqs-html-content h2, .sqs-html-content h3, .sqs-html-content h4 { font-family: var(--font-heading); font-weight: var(--fw-heading); text-transform: var(--tt-heading); line-height: var(--lh-heading); } /* Live type scale (fluid). Element-level so section colour rules still win. */ h1, .sqs-html-content h1 { font-size: var(--fs-h1); } h2, .sqs-html-content h2 { font-size: var(--fs-h2); } h3, .sqs-html-content h3 { font-size: var(--fs-h3); } h4, .sqs-html-content h4 { font-size: var(--fs-h4); } /* ---- Buttons: one unified style matching live (cyan pill, Pontano, uppercase) ---- */ .sqs-button-element--primary, a.sqs-button-element--primary, .sqs-block-button-element, a.sqs-block-button-element, .tc-header-cta, .btn.btn-primary, .mobile-cta, .newsletter-form-button, button.sqs-system-button.sqs-button-element--primary, .form-wrapper button[type="submit"], .form-button-wrapper button { background-color: var(--color-accent) !important; color: var(--color-ink) !important; border: none !important; border-radius: var(--btn-pill-radius) !important; padding: 2.2em 3.3em !important; /* match live (~34px / 51px) */ font-family: "Pontano Sans", var(--font-body) !important; font-weight: 400 !important; font-size: 0.95rem !important; line-height: 1 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background-color 0.2s ease !important; } .sqs-button-element--primary:hover, a.sqs-button-element--primary:hover, .sqs-block-button-element:hover, .tc-header-cta:hover, .btn.btn-primary:hover, .mobile-cta:hover, .newsletter-form-button:hover, button.sqs-system-button.sqs-button-element--primary:hover, .form-wrapper button[type="submit"]:hover { background-color: var(--color-accent-hover) !important; color: var(--color-ink) !important; } /* ============================================= BLOG POSTS + NEWS INDEX (v2 content collection) Clean, token-driven layouts for markdown posts. ============================================= */ /* ---- Single post ---- */ .tc-post { max-width: 760px; margin: 0 auto; padding: clamp(1.5rem, 1rem + 2vw, 3rem) 1.25rem 4rem; } /* The "Visit my Substack" pill that opens every newsletter page. Sits above the hero so it is the first thing after the header, per owner directive. Centred and given its own breathing room so it reads as an invitation rather than a caption on the photo below it. */ .tc-post-substack { margin: 0 0 1.75rem; text-align: center; } .tc-post-hero { margin: 0 0 2rem; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--color-accent-light); } .tc-post-hero img { width: 100%; height: 100%; object-fit: cover; display: block; } .tc-post-head { text-align: center; margin-bottom: 2.5rem; } .tc-post-cat { color: var(--color-accent-text); font-family: "Pontano Sans", var(--font-body); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; margin: 0 0 0.75rem; } .tc-post-title { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; line-height: 1.15; font-size: var(--fs-h2); color: var(--color-ink); margin: 0 0 1rem; } .tc-post-date { color: var(--color-ink-soft); font-size: 0.95rem; } /* ---- Post body (rendered markdown) ---- */ .tc-post-body { font-family: var(--font-body); color: var(--color-ink); font-size: 1.075rem; line-height: 1.8; } .tc-post-body > * + * { margin-top: 1.4rem; } .tc-post-body h2, .tc-post-body h3, .tc-post-body h4 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; line-height: 1.25; margin-top: 2.4rem; } .tc-post-body h2 { font-size: 1.7rem; } .tc-post-body h3 { font-size: 1.35rem; } .tc-post-body a { color: var(--color-accent-text); text-decoration: underline; } .tc-post-body a:hover { color: var(--color-accent-text); } .tc-post-body img { width: 100%; height: auto; border-radius: 12px; display: block; margin: 1.8rem 0; } .tc-post-body ul, .tc-post-body ol { padding-left: 1.4rem; } .tc-post-body li + li { margin-top: 0.5rem; } .tc-post-body blockquote { border-left: 4px solid var(--color-accent); margin: 1.8rem 0; padding: 0.4rem 0 0.4rem 1.25rem; color: var(--color-ink-soft); font-style: italic; } .tc-post-body strong { font-weight: 700; } .tc-post-footer { margin-top: 3rem; text-align: center; } .tc-post-back { color: var(--color-accent-text); text-transform: uppercase; letter-spacing: 0.08em; font-family: "Pontano Sans", var(--font-body); text-decoration: none; font-size: 0.9rem; } .tc-post-back:hover { color: var(--color-accent-text); } /* ---- News index ---- */ .tc-news-index { max-width: 1140px; margin: 0 auto; padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 1.25rem 4rem; } .tc-news-head { text-align: center; margin-bottom: 2.5rem; } .tc-news-head h1 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: var(--fs-h1); color: var(--color-ink); margin: 0 0 0.5rem; } .tc-news-head p { color: var(--color-ink-soft); font-size: 1.1rem; } /* ---- /news: latest-from-Substack banner ------------------------------------- Sits between the page heading and the archive grid. Deliberately quiet: a tinted band and a text CTA rather than a pill button, so it introduces the newsletter without out-shouting the archive below it or the header's Book Now. The card is absent entirely when the build-time feed fetch fails — see web/src/utils/substack.ts. */ .tc-latest { background: var(--color-accent-light); border-radius: 16px; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); margin: 0 0 2.5rem; } .tc-latest__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.25rem; margin: 0 0 1rem; } .tc-latest__top h2 { margin: 0; font-size: var(--fs-h4, 1.2rem); text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-ink); } .tc-latest__home { color: var(--color-accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .tc-latest__card { background: var(--color-bg); border-radius: 12px; padding: 1.25rem 1.25rem 1.1rem; } .tc-latest__title { margin: 0 0 0.35rem; font-size: 1.35rem; line-height: 1.25; } .tc-latest__title a { color: var(--color-ink); text-decoration: none; } .tc-latest__title a:hover, .tc-latest__title a:focus-visible { text-decoration: underline; } .tc-latest__date { display: block; color: var(--color-ink-soft); font-size: 0.85rem; margin: 0 0 0.6rem; } .tc-latest__summary { margin: 0 0 0.9rem; color: var(--color-ink-soft); line-height: var(--lh-body); } .tc-latest__cta, .tc-latest__fallback a { color: var(--color-accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .tc-latest__fallback { margin: 0; color: var(--color-ink-soft); } /* Archive heading: separates the Substack banner from the site's own back catalogue, so the grid below reads as "everything else", not as more Substack. */ .tc-archive-h { font-size: var(--fs-h4, 1.2rem); text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-ink); margin: 0 0 1.25rem; } .tc-news-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .tc-news-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.07); transition: transform 0.2s ease, box-shadow 0.2s ease; } .tc-news-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.12); } .tc-news-card a { text-decoration: none; color: inherit; display: block; } .tc-news-card-img { aspect-ratio: 16 / 10; background: var(--color-accent-light); } .tc-news-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .tc-news-card-body { padding: 1.25rem 1.4rem 1.6rem; } .tc-news-card-cat { color: var(--color-accent-text); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; font-family: "Pontano Sans", var(--font-body); } .tc-news-card-title { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: 1.15rem; line-height: 1.25; color: var(--color-ink); margin: 0.5rem 0; } .tc-news-card-date { color: var(--color-ink-soft); font-size: 0.85rem; } .tc-news-card-excerpt { color: var(--color-ink-soft); font-size: 0.95rem; line-height: 1.6; margin-top: 0.6rem; } /* ---- Desktop nav dropdown: flat, square, 17px ---------------------------- Left-aligned since the header nav moved off the right edge (it is centred between the logo and "Book now" now that the top menu shows down to 880px): a right-aligned submenu hanging under a centred "About" read as detached from its trigger. This is the winning declaration — overrides-chrome.css loads earlier and already says left. */ .site-nav .dropdown-menu { box-shadow: none !important; border: none !important; border-radius: 0 !important; padding: 8px 17px !important; min-width: 0 !important; width: max-content !important; text-align: left !important; background: #fff !important; } .site-nav .dropdown-menu .dropdown-item, .site-nav .dropdown-menu .dropdown-item a, .site-nav .dropdown-menu .dropdown-link { text-align: left !important; font-family: var(--font-body) !important; font-size: 17px !important; padding: 2px 0 !important; color: var(--color-ink) !important; -webkit-text-fill-color: var(--color-ink) !important; } .site-nav .dropdown-menu .dropdown-link:hover, .site-nav .dropdown-menu .dropdown-item a:hover { color: var(--color-accent-text) !important; -webkit-text-fill-color: var(--color-accent-text) !important; } /* ============================================= EVENTS (v2 content collection) ============================================= */ .tc-events-index { max-width: 900px; margin: 0 auto; padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 1.25rem 4rem; } .tc-events-head { text-align: center; margin-bottom: 2.5rem; } .tc-events-head h1 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: var(--fs-h1); color: var(--color-ink); margin: 0 0 0.5rem; } .tc-events-head p { color: var(--color-ink-soft); font-size: 1.1rem; } .tc-events-section-title { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; color: var(--color-ink); margin: 2.5rem 0 1.25rem; border-bottom: 2px solid var(--color-accent-light); padding-bottom: 0.5rem; } .tc-events-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; } .tc-event-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,0.07); transition: transform 0.2s ease, box-shadow 0.2s ease; } .tc-event-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.12); } .tc-event-card a { display: grid; grid-template-columns: 84px 200px 1fr; align-items: stretch; text-decoration: none; color: inherit; } .tc-event-card a.is-noimage { grid-template-columns: 84px 1fr; } .tc-event-datetag { background: var(--color-accent); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem 0.5rem; text-align: center; } .tc-event-mon { font-family: "Pontano Sans", var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; } .tc-event-day { font-family: var(--font-heading); font-weight: 700; font-size: 2rem; line-height: 1; } .tc-event-thumb { overflow: hidden; } .tc-event-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .tc-event-info { padding: 1.1rem 1.4rem; } .tc-event-title { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: 1.15rem; line-height: 1.25; color: var(--color-ink); margin: 0 0 0.4rem; } .tc-event-when { color: var(--color-accent-text); font-size: 0.9rem; font-weight: 600; margin: 0 0 0.2rem; } .tc-event-datecount { font-family: "Pontano Sans", var(--font-body); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.9; margin-top: 0.35rem; } .tc-event-repeat { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--color-accent-light); color: var(--color-accent-text); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: 1px; } .tc-event-loc { color: var(--color-ink-soft); font-size: 0.9rem; margin: 0 0 0.5rem; } .tc-event-excerpt { color: var(--color-ink-soft); font-size: 0.92rem; line-height: 1.55; margin: 0; } /* Event detail meta */ .tc-event-meta { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.25rem; color: var(--color-ink-soft); } .tc-event-meta a { color: var(--color-accent-text); } .tc-event-actions { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .tc-event-place { display: flex; flex-direction: column; gap: 0.1rem; } .tc-event-venue-link { display: flex; flex-direction: column; gap: 0.1rem; } .tc-event-venue { font-weight: 600; } .tc-event-venue-note { font-size: 0.9em; } @media (max-width: 640px) { .tc-event-card a { grid-template-columns: 70px 1fr; } .tc-event-thumb { display: none; } } /* ============================================= BANNER SLIDESHOW (driven by static/js/nav.js) Override the Squarespace JS-runtime transform positioning (inactive slides were shoved to translateX(-9999px)); stack slides + crossfade the current one. ============================================= */ .user-items-list-banner-slideshow .slideshow-wrapper, .user-items-list-banner-slideshow .slideshow-holder, .user-items-list-banner-slideshow .user-items-list-banner-slideshow__slides { position: relative !important; } .user-items-list-banner-slideshow .slide.list-item { position: absolute !important; top: 0; left: 0; right: 0; transform: none !important; opacity: 0; visibility: hidden; transition: opacity 0.7s ease; pointer-events: none; } .user-items-list-banner-slideshow .slide.list-item.tc-slide-current { position: relative !important; opacity: 1; visibility: visible; pointer-events: auto; } /* keep the arrow controls above the slides + clickable */ .user-items-list-banner-slideshow [class*="arrow-button"], .user-items-list-banner-slideshow .arrow-container { z-index: 5 !important; pointer-events: auto !important; }