:root { /* =================================== PRIMITIVES — raw brand palette (never reference these directly in components) =================================== */ --raw-noir: #1A1A1A; --raw-ravens-wing: #2B2B2C; --raw-heather-dusk: #3C1A47; --raw-oxblood-plum: #5C2A4A; --raw-aged-brass: #B89B6D; --raw-parchment: #F4EFE6; --raw-brass-tarnished: #6E5D41; --raw-brass-candlelit: #D9BD8C; --raw-parchment-dim: #A79E8E; /* =================================== SEMANTIC TOKENS — mirror these names/values EXACTLY in Elementor's Global Colors panel =================================== */ /* Surface */ --color-surface-background: var(--raw-noir); --color-surface-card: var(--raw-ravens-wing); --color-surface-contrast: var(--raw-parchment); /* Brand */ --color-brand-primary: var(--raw-heather-dusk); --color-brand-secondary: var(--raw-oxblood-plum); --color-accent-brass: var(--raw-aged-brass); /* Text */ --color-text-heading: var(--raw-aged-brass); --color-text-heading-on-contrast: var(--raw-noir); --color-text-body: var(--raw-parchment); --color-text-body-on-contrast: var(--raw-ravens-wing); --color-text-body-muted: var(--raw-parchment-dim); /* Border / State */ --color-border-divider: var(--raw-brass-tarnished); --color-state-hover: var(--raw-brass-candlelit); /* =================================== FONTS =================================== */ --font-heading-display: 'Cormorant Garamond', serif; --font-heading-section: 'Cormorant Garamond', serif; --font-body-default: 'Lora', serif; --font-body-emphasis: 'Lora', serif; --font-accent-script: 'Alex Brush', cursive; --font-ui-labels: 'Cormorant Garamond', serif; } /* =================================== MINIMAL MODERN RESET =================================== */ *, *::before, *::after { box-sizing: border-box; } html { background-color: var(--color-surface-background); } body { margin: 0; min-height: 100vh; background-color: var(--color-surface-background); } img, picture, svg { display: block; max-width: 100%; } /* =================================== SKIP LINK (accessibility) Uses transform, NOT top:%, for reliable hiding — percentage-based `top` depends on parent height, which doesn't explicitly define. =================================== */ .tbcs-skip-link { position: absolute; top: 0; left: 0; z-index: 9999; padding: 0.75rem 1.25rem; background-color: var(--color-brand-primary); color: var(--color-text-body); font-family: var(--font-ui-labels); font-size: 0.95rem; text-decoration: none; white-space: nowrap; border-radius: 0 0 4px 0; transform: translateY(-100%); transition: transform 0.2s ease; } .tbcs-skip-link:focus { transform: translateY(0%); } /* =================================== SITE HEADER =================================== */ .tbcs-header { display: block; width: 100%; background-color: var(--color-surface-background); padding-block: clamp(1rem, 3vw, 1.5rem); padding-inline: clamp(1rem, 5vw, 2rem); } .tbcs-header__inner { display: flex; justify-content: center; align-items: center; max-width: 1200px; margin-inline: auto; } .tbcs-header__logo { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1.5vw, 1.75rem); letter-spacing: 0.03em; text-align: center; text-wrap: balance; } .tbcs-header__logo a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.5rem; color: var(--color-text-heading); text-decoration: none; transition: color 0.25s ease; } .tbcs-header__logo a:hover { color: var(--color-state-hover); } .tbcs-header__logo a:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 4px; border-radius: 2px; } /* =================================== SITE HEADER — NAVIGATION =================================== */ .tbcs-header__inner { position: relative; flex-direction: column; gap: 0.75rem; } .tbcs-header__nav { width: 100%; } .tbcs-nav__list { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2rem); margin: 0; padding: 0; list-style: none; } .tbcs-nav__list a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.5rem; font-family: var(--font-ui-labels); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--color-text-body); transition: color 0.25s ease; } .tbcs-nav__list a:hover { color: var(--color-state-hover); } .tbcs-nav__list a:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 4px; border-radius: 2px; } /* Highlights whichever page the visitor is currently on — WordPress adds this class automatically, no extra code needed */ .tbcs-nav__list .current-menu-item a { color: var(--color-text-heading); border-bottom: 2px solid var(--color-accent-brass); } @media (prefers-reduced-motion: reduce) { .tbcs-nav__list a { transition: none; } } /* =================================== SITE FOOTER =================================== */ .tbcs-footer { display: block; width: 100%; background-color: var(--color-surface-background); padding-block: clamp(1.5rem, 4vw, 2rem); padding-inline: clamp(1rem, 5vw, 2rem); border-top: 1px solid var(--color-border-divider); } .tbcs-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; max-width: 1200px; margin-inline: auto; } .tbcs-footer__cause { margin: 0; } .tbcs-footer__cause-link { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-body-default); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--color-text-body-muted); text-decoration: none; transition: color 0.25s ease; } .tbcs-footer__cause-link:hover { color: var(--color-accent-brass); } .tbcs-footer__cause-link:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 3px; border-radius: 2px; } .tbcs-footer__cause-icon { width: 13px; height: 13px; flex-shrink: 0; } .tbcs-footer__copyright { margin: 0; font-family: var(--font-body-default); font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem); color: var(--color-text-body-muted); text-align: center; line-height: 1.5; } /* =================================== DESKTOP ENHANCEMENT (≥1024px) =================================== */ @media (min-width: 1024px) { .tbcs-header { padding-block: 1.75rem; } .tbcs-footer { padding-block: 2rem; } } /* =================================== REDUCED MOTION (accessibility) =================================== */ @media (prefers-reduced-motion: reduce) { .tbcs-header__logo a, .tbcs-skip-link, .tbcs-footer__cause-link { transition: none; } } /* =================================== BLOG PAGE — HERO (title + subtitle) =================================== */ .tbcs-blog-hero { width: 100%; background-color: var(--color-brand-primary); padding-block: clamp(3rem, 8vw, 6rem); padding-inline: clamp(1.25rem, 5vw, 2rem); text-align: center; } .tbcs-blog-hero__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 3vw, 3.5rem); letter-spacing: 0.02em; color: var(--color-text-heading); text-wrap: balance; } .tbcs-blog-hero__subtitle { margin: clamp(0.75rem, 2vw, 1.25rem) auto 0; max-width: 42ch; font-family: var(--font-body-default); font-style: italic; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); line-height: 1.6; color: var(--color-text-body); text-wrap: balance; } /* =================================== BLOG LISTING — GRID + CARD =================================== */ .tbcs-blog-listing { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2rem); padding-block: clamp(2rem, 6vw, 4rem); } .tbcs-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(1.5rem, 3vw, 2rem); } .tbcs-card { position: relative; display: flex; flex-direction: column; background-color: var(--color-surface-card); border: 1px solid var(--color-border-divider); border-radius: 8px; overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .tbcs-card:hover { transform: translateY(-4px); border-color: var(--color-accent-brass); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); } .tbcs-card__thumb { width: 100%; aspect-ratio: 3 / 2; background-color: var(--color-surface-background); overflow: hidden; } .tbcs-card__thumb-img, .tbcs-card__thumb-fallback { width: 100%; height: 100%; object-fit: cover; display: block; } .tbcs-card__thumb-fallback { background: linear-gradient(135deg, var(--color-brand-primary), var(--color-surface-card)); } .tbcs-card__body { display: flex; flex-direction: column; gap: 0.6rem; padding: clamp(1.1rem, 3vw, 1.5rem); flex: 1; } .tbcs-card__categories { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.4rem; align-self: flex-start; } .tbcs-card__category { display: inline-flex; align-items: center; font-family: var(--font-ui-labels); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-accent-brass); text-decoration: none; border: 1px solid var(--color-border-divider); border-radius: 999px; padding: 0.2rem 0.7rem; transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease; } .tbcs-card__category:hover { border-color: var(--color-accent-brass); background-color: var(--color-surface-background); color: var(--color-state-hover); } .tbcs-card__category:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; } .tbcs-card__title { margin: 0; font-family: var(--font-heading-section); font-weight: 600; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); line-height: 1.3; color: var(--color-text-heading); text-wrap: balance; } .tbcs-card__title-link { color: inherit; text-decoration: none; } .tbcs-card__title-link::after { content: ''; position: absolute; inset: 0; z-index: 1; } .tbcs-card__title-link:hover { color: var(--color-state-hover); } .tbcs-card__title-link:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 4px; border-radius: 2px; } .tbcs-card__excerpt { margin: 0; font-family: var(--font-body-default); font-size: 0.95rem; line-height: 1.6; color: var(--color-text-body); } .tbcs-card__meta { margin: 0.4rem 0 0; font-family: var(--font-body-default); font-size: 0.8rem; color: var(--color-text-body-muted); } .tbcs-blog-listing__empty { text-align: center; font-family: var(--font-body-default); font-style: italic; color: var(--color-text-body-muted); } @media (prefers-reduced-motion: reduce) { .tbcs-card { transition: none; } } /* =================================== SINGLE POST =================================== */ .tbcs-post__hero { width: 100%; max-height: clamp(240px, 40vw, 480px); overflow: hidden; } .tbcs-post__hero-img { width: 100%; height: 100%; object-fit: cover; display: block; } .tbcs-post__container { max-width: 720px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2rem); padding-block: clamp(2rem, 6vw, 4rem); } .tbcs-post__back { margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); } .tbcs-post__back a { font-family: var(--font-ui-labels); font-size: 0.9rem; letter-spacing: 0.03em; color: var(--color-text-body-muted); text-decoration: none; transition: color 0.25s ease; } .tbcs-post__back a:hover { color: var(--color-state-hover); } .tbcs-post__back a:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 4px; border-radius: 2px; } .tbcs-post__header { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); } .tbcs-post__title { margin: 0 0 0.75rem; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(1.75rem, 1.3rem + 2.5vw, 3rem); line-height: 1.15; color: var(--color-text-heading); text-wrap: balance; } .tbcs-post__meta { margin: 0; font-family: var(--font-body-default); font-size: 0.9rem; color: var(--color-text-body-muted); } .tbcs-post__meta a { color: var(--color-text-body-muted); text-decoration: underline; text-underline-offset: 2px; } .tbcs-post__meta a:hover { color: var(--color-state-hover); } /* =================================== SINGLE POST — CONTENT TYPOGRAPHY Targets whatever HTML the Block Editor outputs =================================== */ .tbcs-post__content { font-family: var(--font-body-default); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.75; color: var(--color-text-body); } .tbcs-post__content > * + * { margin-top: 1.5em; } .tbcs-post__content h2 { font-family: var(--font-heading-section); font-weight: 600; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); color: var(--color-text-heading); line-height: 1.3; margin-top: 2em; } .tbcs-post__content h3 { font-family: var(--font-heading-section); font-weight: 600; font-size: clamp(1.2rem, 1.05rem + 0.75vw, 1.5rem); color: var(--color-text-heading); line-height: 1.35; margin-top: 1.75em; } .tbcs-post__content a { color: var(--color-accent-brass); text-decoration: underline; text-underline-offset: 3px; transition: color 0.25s ease; } .tbcs-post__content a:hover { color: var(--color-state-hover); } .tbcs-post__content blockquote { margin: 2em 0; padding: 0.25em 0 0.25em 1.5em; border-left: 3px solid var(--color-accent-brass); font-family: var(--font-body-emphasis); font-style: italic; font-size: 1.1em; color: var(--color-text-heading); } .tbcs-post__content img { width: 100%; height: auto; border-radius: 4px; } .tbcs-post__content ul, .tbcs-post__content ol { padding-left: 1.5em; } .tbcs-post__content li + li { margin-top: 0.5em; } @media (prefers-reduced-motion: reduce) { .tbcs-post__back a, .tbcs-post__content a { transition: none; } } /* =================================== UTILITY =================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* =================================== SINGLE BOOK =================================== */ .tbcs-book__container { max-width: 960px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2rem); padding-block: clamp(2rem, 6vw, 4rem); } .tbcs-book__back { margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); } .tbcs-book__back a { font-family: var(--font-ui-labels); font-size: 0.9rem; letter-spacing: 0.03em; color: var(--color-text-body-muted); text-decoration: none; transition: color 0.25s ease; } .tbcs-book__back a:hover { color: var(--color-state-hover); } .tbcs-book__back a:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 4px; border-radius: 2px; } .tbcs-book__layout { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; } .tbcs-book__cover { position: relative; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 4px; border: 1px solid var(--color-border-divider); } .tbcs-book__cover-img, .tbcs-book__cover-fallback { width: 100%; height: 100%; object-fit: cover; display: block; } .tbcs-book__cover-fallback { background: linear-gradient(135deg, var(--color-brand-primary), var(--color-surface-card)); } .tbcs-book__details { display: flex; flex-direction: column; gap: 0.85rem; } .tbcs-book__genres { display: flex; flex-wrap: wrap; gap: 0.5rem; align-self: flex-start; } .tbcs-book__room { display: inline-flex; align-items: center; font-family: var(--font-ui-labels); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-accent-brass); text-decoration: none; border: 1px solid var(--color-border-divider); border-radius: 999px; padding: 0.2rem 0.7rem; transition: border-color 0.25s ease, color 0.25s ease; } .tbcs-book__room:hover { border-color: var(--color-accent-brass); color: var(--color-state-hover); } .tbcs-book__room:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; } .tbcs-book__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem); line-height: 1.2; color: var(--color-text-heading); text-wrap: balance; } .tbcs-book__author { margin: 0; font-family: var(--font-body-default); font-style: italic; font-size: 1.05rem; color: var(--color-text-body); } .tbcs-book__author-link { color: inherit; text-decoration: underline; text-decoration-color: var(--color-border-divider); text-underline-offset: 2px; transition: color 0.25s ease, text-decoration-color 0.25s ease; } .tbcs-book__author-link:hover { color: var(--color-accent-brass); text-decoration-color: var(--color-accent-brass); } .tbcs-book__author-link:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; border-radius: 2px; } .tbcs-book__meta { margin: 0; font-family: var(--font-body-default); font-size: 0.9rem; color: var(--color-text-body-muted); } .tbcs-book__price { margin: 0.25rem 0 0; font-family: var(--font-heading-section); font-weight: 600; font-size: 1.4rem; color: var(--color-text-heading); } .tbcs-book__retailers { margin-top: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--color-border-divider); } .tbcs-book__disclosure { margin: 0 0 0.85rem; font-family: var(--font-body-default); font-style: italic; font-size: 0.8rem; color: var(--color-text-body-muted); } .tbcs-book__retailer-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; } .tbcs-book__retailer-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0.6rem 1.25rem; background-color: var(--color-brand-primary); color: var(--color-text-body); font-family: var(--font-ui-labels); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.03em; text-decoration: none; border-radius: 4px; transition: background-color 0.25s ease; } .tbcs-book__retailer-btn:hover { background-color: var(--color-state-hover); color: var(--color-text-heading-on-contrast); } .tbcs-book__retailer-btn:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 3px; } /* =================================== SINGLE BOOK — FEATURED IN COLLECTIONS =================================== */ .tbcs-book__collections { margin-top: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--color-border-divider); } .tbcs-book__collections-label { display: block; margin: 0 0 0.6rem; font-family: var(--font-ui-labels); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-body-muted); } .tbcs-book__collections-list { display: flex; flex-wrap: wrap; gap: 0.6rem; } .tbcs-book__collection-pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.9rem; font-family: var(--font-body-default); font-size: 0.85rem; color: var(--color-text-body); text-decoration: none; border: 1px solid var(--color-border-divider); border-radius: 999px; transition: border-color 0.25s ease, color 0.25s ease; } .tbcs-book__collection-pill:hover { border-color: var(--color-accent-brass); color: var(--color-state-hover); } .tbcs-book__collection-pill:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .tbcs-book__collection-pill { transition: none; } } .tbcs-book__synopsis { max-width: 720px; margin: clamp(2.5rem, 6vw, 4rem) auto 0; padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--color-border-divider); font-family: var(--font-body-default); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.75; color: var(--color-text-body); } .tbcs-book__synopsis > * + * { margin-top: 1.5em; } /* =================================== TABLET/MOBILE — stack cover above details =================================== */ @media (max-width: 640px) { .tbcs-book__layout { grid-template-columns: 1fr; } .tbcs-book__cover { max-width: 260px; margin-inline: auto; } } @media (prefers-reduced-motion: reduce) { .tbcs-book__back a, .tbcs-book__retailer-btn { transition: none; } } /* =================================== BOOKS ARCHIVE — HERO =================================== */ .tbcs-books-hero { width: 100%; background-color: var(--color-brand-primary); padding-block: clamp(3rem, 8vw, 6rem); padding-inline: clamp(1.25rem, 5vw, 2rem); text-align: center; } .tbcs-books-hero__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 3vw, 3.5rem); letter-spacing: 0.02em; color: var(--color-text-heading); text-wrap: balance; } .tbcs-books-hero__subtitle { margin: clamp(0.75rem, 2vw, 1.25rem) auto 0; max-width: 42ch; font-family: var(--font-body-default); font-style: italic; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); line-height: 1.6; color: var(--color-text-body); text-wrap: balance; } /* =================================== BOOKS ARCHIVE — GRID + CARD =================================== */ .tbcs-books-listing { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2rem); padding-block: clamp(2rem, 6vw, 4rem); } .tbcs-book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(1.25rem, 3vw, 2rem); } /* Two columns — the majority of modern phones */ @media (min-width: 380px) and (max-width: 599px) { .tbcs-book-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem 0.85rem; } .tbcs-book-card__body { padding: 0.65rem; gap: 0.3rem; } .tbcs-book-card__title { font-size: 0.88rem; } .tbcs-book-card__author, .tbcs-book-card__price { font-size: 0.75rem; } .tbcs-book-card__subjects { font-size: 0.68rem; } } /* One column — genuinely small devices only */ @media (max-width: 379px) { .tbcs-book-grid { grid-template-columns: 1fr; max-width: 280px; margin-inline: auto; gap: 1.75rem; } } .tbcs-book-card { position: relative; display: flex; flex-direction: column; background-color: var(--color-surface-card); border: 1px solid var(--color-border-divider); border-radius: 8px; overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .tbcs-book-card:hover { transform: translateY(-4px); border-color: var(--color-accent-brass); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25); } .tbcs-book-card__cover { position: relative; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; } .tbcs-book-card__cover-img, .tbcs-book-card__cover-fallback { width: 100%; height: 100%; object-fit: cover; display: block; } .tbcs-book-card__cover-fallback { background: linear-gradient(135deg, var(--color-brand-primary), var(--color-surface-card)); } .tbcs-book-card__body { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.85rem; } .tbcs-book-card__subjects { position: relative; z-index: 2; margin: 0.2rem 0 0; font-family: var(--font-body-default); font-size: 0.75rem; line-height: 1.5; color: var(--color-text-body-muted); } .tbcs-book-card__subject-link { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; transition: color 0.25s ease, text-decoration-color 0.25s ease; } .tbcs-book-card__subject-link:hover { color: var(--color-accent-brass); text-decoration-color: var(--color-accent-brass); } .tbcs-book-card__subject-link:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; border-radius: 2px; } .tbcs-book-card__title { margin: 0; font-family: var(--font-heading-section); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--color-text-heading); text-wrap: balance; } .tbcs-book-card__title-link { color: inherit; text-decoration: none; } .tbcs-book-card__title-link::after { content: ''; position: absolute; inset: 0; z-index: 1; } .tbcs-book-card__title-link:hover { color: var(--color-state-hover); } .tbcs-book-card__title-link:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 4px; border-radius: 2px; } .tbcs-book-card__author { position: relative; z-index: 2; margin: 0; font-family: var(--font-body-default); font-style: italic; font-size: 0.8rem; color: var(--color-text-body-muted); } .tbcs-book-card__author-link { color: inherit; text-decoration: underline; text-decoration-color: var(--color-border-divider); text-underline-offset: 2px; transition: color 0.25s ease, text-decoration-color 0.25s ease; } .tbcs-book-card__author-link:hover { color: var(--color-accent-brass); text-decoration-color: var(--color-accent-brass); } .tbcs-book-card__author-link:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; border-radius: 2px; } .tbcs-book-card__price { margin: 0.15rem 0 0; font-family: var(--font-heading-section); font-weight: 600; font-size: 0.95rem; color: var(--color-text-heading); } .tbcs-books-listing__empty { text-align: center; font-family: var(--font-body-default); font-style: italic; color: var(--color-text-body-muted); } .tbcs-about-bridge { margin: 0 0 clamp(2rem, 5vw, 3rem); padding-top: clamp(2rem, 5vw, 3rem); text-align: center; font-family: var(--font-body-default); font-style: italic; font-size: 0.95rem; color: var(--color-text-body-muted); border-top: 1px solid var(--color-border-divider); } /* =================================== PAGINATION =================================== */ .tbcs-pagination { margin-top: clamp(2.5rem, 6vw, 4rem); border: none; } .tbcs-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; border: none; background: none; } .tbcs-pagination li > .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 0.75rem; font-family: var(--font-ui-labels); font-size: 0.9rem; color: var(--color-text-body); text-decoration: none; border: 1px solid var(--color-border-divider); border-radius: 4px; transition: border-color 0.25s ease, color 0.25s ease; } .tbcs-pagination a.page-numbers:hover { border-color: var(--color-accent-brass); color: var(--color-state-hover); } .tbcs-pagination a.page-numbers:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; } .tbcs-pagination .page-numbers.current { background-color: var(--color-accent-brass); border-color: var(--color-accent-brass); color: var(--color-text-heading-on-contrast); } .tbcs-pagination .page-numbers.dots { border: none; color: var(--color-text-body-muted); } @media (prefers-reduced-motion: reduce) { .tbcs-book-card, .tbcs-book-card__tag, .tbcs-pagination .page-numbers { transition: none; } } /* =================================== MOBILE NAV TOGGLE Hidden by default (no-js baseline: full list always visible, centered row). Activates only inside .js, and only at/under the mobile breakpoint. =================================== */ .tbcs-nav__toggle { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; margin: 0; background: transparent; border: 1px solid var(--color-border-divider); border-radius: 4px; cursor: pointer; appearance: none; -webkit-appearance: none; line-height: 0; transition: border-color 0.25s ease; } .tbcs-nav__toggle:hover { border-color: var(--color-accent-brass); } .tbcs-nav__toggle:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; } .tbcs-nav__toggle-icon, .tbcs-nav__toggle-icon::before, .tbcs-nav__toggle-icon::after { content: ''; display: block; width: 20px; height: 2px; background-color: var(--color-text-body); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.25s ease; } .tbcs-nav__toggle-icon { position: relative; } .tbcs-nav__toggle-icon::before, .tbcs-nav__toggle-icon::after { position: absolute; left: 0; } .tbcs-nav__toggle-icon::before { transform: translateY(-6px); } .tbcs-nav__toggle-icon::after { transform: translateY(6px); } .tbcs-nav__toggle.is-open .tbcs-nav__toggle-icon { background-color: transparent; } .tbcs-nav__toggle.is-open .tbcs-nav__toggle-icon::before { transform: translateY(0) rotate(45deg); } .tbcs-nav__toggle.is-open .tbcs-nav__toggle-icon::after { transform: translateY(0) rotate(-45deg); } @media (max-width: 640px) { .js .tbcs-header__inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; } .js .tbcs-header__logo { margin: 0; } .js .tbcs-nav__toggle { display: inline-flex; } .js .tbcs-header__utility { order: 2; } .js .tbcs-header__nav { order: 3; flex-basis: 100%; width: 100%; } .js .tbcs-nav__list { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; width: 100%; gap: 0.35rem; max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.25s ease, margin-top 0.3s ease; } .js .tbcs-nav__list.is-open { max-height: 70vh; overflow-y: auto; margin-top: 1rem; padding-top: 1rem; padding-bottom: 0.5rem; opacity: 1; border-top: 1px solid var(--color-border-divider); } } @media (prefers-reduced-motion: reduce) { .tbcs-nav__toggle, .tbcs-nav__toggle-icon, .tbcs-nav__toggle-icon::before, .tbcs-nav__toggle-icon::after, .js .tbcs-nav__list { transition: none; } } /* =================================== SINGLE PRODUCT (Shop) =================================== */ .tbcs-merch__container { max-width: 960px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2rem); padding-block: clamp(2rem, 6vw, 4rem); } .tbcs-merch__back { margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); } .tbcs-merch__back a { font-family: var(--font-ui-labels); font-size: 0.9rem; letter-spacing: 0.03em; color: var(--color-text-body-muted); text-decoration: none; transition: color 0.25s ease; } .tbcs-merch__back a:hover { color: var(--color-state-hover); } .tbcs-merch__back a:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 4px; border-radius: 2px; } .tbcs-merch__layout { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; } .tbcs-merch__photo { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; border: 1px solid var(--color-border-divider); } .tbcs-merch__photo-img, .tbcs-merch__photo-fallback { width: 100%; height: 100%; object-fit: cover; display: block; } .tbcs-merch__photo-fallback { background: linear-gradient(135deg, var(--color-brand-primary), var(--color-surface-card)); } .tbcs-merch__details { display: flex; flex-direction: column; gap: 0.85rem; } .tbcs-merch__types { display: flex; flex-wrap: wrap; gap: 0.5rem; align-self: flex-start; } .tbcs-merch__room { display: inline-flex; align-items: center; font-family: var(--font-ui-labels); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-accent-brass); text-decoration: none; border: 1px solid var(--color-border-divider); border-radius: 999px; padding: 0.2rem 0.7rem; transition: border-color 0.25s ease, color 0.25s ease; } .tbcs-merch__room:hover { border-color: var(--color-accent-brass); color: var(--color-state-hover); } .tbcs-merch__room:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; } .tbcs-merch__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem); line-height: 1.2; color: var(--color-text-heading); text-wrap: balance; } .tbcs-merch__maker { margin: 0; font-family: var(--font-body-default); font-style: italic; font-size: 1.05rem; color: var(--color-text-body); } .tbcs-merch__meta { margin: 0; font-family: var(--font-body-default); font-size: 0.9rem; color: var(--color-text-body-muted); } .tbcs-merch__price { margin: 0.25rem 0 0; font-family: var(--font-heading-section); font-weight: 600; font-size: 1.4rem; color: var(--color-text-heading); } .tbcs-merch__retailers { margin-top: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--color-border-divider); } .tbcs-merch__disclosure { margin: 0 0 0.85rem; font-family: var(--font-body-default); font-style: italic; font-size: 0.8rem; color: var(--color-text-body-muted); } .tbcs-merch__retailer-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; } .tbcs-merch__retailer-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0.6rem 1.25rem; background-color: var(--color-brand-primary); color: var(--color-text-body); font-family: var(--font-ui-labels); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.03em; text-decoration: none; border-radius: 4px; transition: background-color 0.25s ease; } .tbcs-merch__retailer-btn:hover { background-color: var(--color-state-hover); color: var(--color-text-heading-on-contrast); } .tbcs-merch__retailer-btn:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 3px; } .tbcs-merch__description { max-width: 720px; margin: clamp(2.5rem, 6vw, 4rem) auto 0; padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--color-border-divider); font-family: var(--font-body-default); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.75; color: var(--color-text-body); } .tbcs-merch__description > * + * { margin-top: 1.5em; } @media (max-width: 640px) { .tbcs-merch__layout { grid-template-columns: 1fr; } .tbcs-merch__photo { max-width: 340px; margin-inline: auto; } } @media (prefers-reduced-motion: reduce) { .tbcs-merch__back a, .tbcs-merch__retailer-btn { transition: none; } } /* =================================== SHOP ARCHIVE — HERO =================================== */ .tbcs-shop-hero { width: 100%; background-color: var(--color-brand-primary); padding-block: clamp(3rem, 8vw, 6rem); padding-inline: clamp(1.25rem, 5vw, 2rem); text-align: center; } .tbcs-shop-hero__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 3vw, 3.5rem); letter-spacing: 0.02em; color: var(--color-text-heading); text-wrap: balance; } .tbcs-shop-hero__subtitle { margin: clamp(0.75rem, 2vw, 1.25rem) auto 0; max-width: 42ch; font-family: var(--font-body-default); font-style: italic; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); line-height: 1.6; color: var(--color-text-body); text-wrap: balance; } /* =================================== SHOP ARCHIVE — GRID + CARD =================================== */ .tbcs-shop-listing { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2rem); padding-block: clamp(2rem, 6vw, 4rem); } .tbcs-merch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: clamp(1.5rem, 3vw, 2rem); } .tbcs-merch-card { position: relative; display: flex; flex-direction: column; transition: transform 0.25s ease; } .tbcs-merch-card:hover { transform: translateY(-4px); } .tbcs-merch-card__photo { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; } .tbcs-merch-card__photo-img, .tbcs-merch-card__photo-fallback { width: 100%; height: 100%; object-fit: cover; display: block; } .tbcs-merch-card__photo-fallback { background: linear-gradient(135deg, var(--color-brand-primary), var(--color-surface-card)); } .tbcs-merch-card__body { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.85rem; } .tbcs-merch-card__types { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.5rem; align-self: flex-start; } .tbcs-merch-card__room { font-family: var(--font-ui-labels); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-accent-brass); text-decoration: none; transition: color 0.25s ease; } .tbcs-merch-card__room:hover { color: var(--color-state-hover); } .tbcs-merch-card__room:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; } .tbcs-merch-card__title { margin: 0; font-family: var(--font-heading-section); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--color-text-heading); text-wrap: balance; } .tbcs-merch-card__title-link { color: inherit; text-decoration: none; } .tbcs-merch-card__title-link::after { content: ''; position: absolute; inset: 0; z-index: 1; } .tbcs-merch-card__title-link:hover { color: var(--color-state-hover); } .tbcs-merch-card__title-link:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 4px; border-radius: 2px; } .tbcs-merch-card__maker { margin: 0; font-family: var(--font-body-default); font-style: italic; font-size: 0.8rem; color: var(--color-text-body-muted); } .tbcs-merch-card__price { margin: 0.15rem 0 0; font-family: var(--font-heading-section); font-weight: 600; font-size: 0.95rem; color: var(--color-text-heading); } .tbcs-shop-listing__empty { text-align: center; font-family: var(--font-body-default); font-style: italic; color: var(--color-text-body-muted); } @media (prefers-reduced-motion: reduce) { .tbcs-merch-card { transition: none; } } /* =================================== NAV DROPDOWN — ROOMS =================================== */ .tbcs-nav__list .menu-item-has-children { position: relative; } .tbcs-nav__list > .menu-item-has-children > a::after { content: '\25BE'; display: inline-block; margin-left: 0.3rem; font-size: 0.7em; transform: translateY(-1px); } .tbcs-nav__list .sub-menu { position: absolute; top: 100%; left: 50%; min-width: 190px; margin: 0.6rem 0 0; padding: 0.5rem; list-style: none; background-color: var(--color-surface-card); border: 1px solid var(--color-border-divider); border-radius: 8px; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 20; } .tbcs-nav__list .menu-item-has-children:hover > .sub-menu, .tbcs-nav__list .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .tbcs-nav__list .sub-menu a { justify-content: flex-start; min-height: 40px; padding: 0.4rem 0.75rem; font-weight: 500; letter-spacing: normal; text-transform: none; white-space: nowrap; border-radius: 4px; } .tbcs-nav__list .sub-menu a:hover { background-color: var(--color-surface-background); } @media (max-width: 640px) { .js .tbcs-nav__list > .menu-item-has-children > a::after { display: none; } .js .tbcs-nav__list > .menu-item-has-children { display: flex; flex-direction: column; align-items: center; align-self: stretch; } .js .tbcs-nav__list .sub-menu { position: static; display: flex; flex-direction: column; align-items: center; min-width: 0; width: 100%; margin: 0.4rem 0 0; padding: 0.5rem 0 0; opacity: 1; visibility: visible; pointer-events: auto; transform: none; background: transparent; border-top: 1px dashed var(--color-border-divider); transition: none; } .js .tbcs-nav__list .sub-menu a { white-space: normal; justify-content: center; font-size: 0.88rem; color: var(--color-text-body-muted); } .js .tbcs-nav__list .sub-menu a:hover { color: var(--color-state-hover); } } @media (max-width: 640px) { .js .tbcs-nav__list .menu-item-has-children:hover > .sub-menu, .js .tbcs-nav__list .menu-item-has-children:focus-within > .sub-menu { transform: none; transition: none; } } @media (prefers-reduced-motion: reduce) { .tbcs-nav__list .sub-menu { transition: none; } } /* =================================== COLLECTION — SINGLE PAGE HERO =================================== */ .tbcs-collection-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(320px, 55vw, 560px); padding: clamp(1.5rem, 5vw, 3rem); overflow: hidden; } .tbcs-collection-hero--no-image { background: radial-gradient(ellipse at top, var(--color-brand-primary) 0%, var(--color-surface-background) 75%); } .tbcs-collection-hero__media { position: absolute; inset: 0; } .tbcs-collection-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; } .tbcs-collection-hero__overlay { position: absolute; inset: 0; background: linear-gradient( to top, var(--color-surface-background) 0%, rgba(26, 26, 26, 0.55) 45%, rgba(26, 26, 26, 0.05) 85% ); } .tbcs-collection-hero__content { position: relative; width: 100%; max-width: 1200px; margin-inline: auto; text-align: center; } .tbcs-collection-hero__eyebrow { display: inline-block; margin-bottom: 0.6rem; font-family: var(--font-ui-labels); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-brass); } .tbcs-collection-hero__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(2.25rem, 1.6rem + 3.5vw, 4rem); letter-spacing: 0.02em; color: var(--color-text-heading); text-wrap: balance; } .tbcs-collection-hero__tagline { margin: clamp(0.5rem, 1.5vw, 0.85rem) auto 0; max-width: 42ch; font-family: var(--font-body-default); font-style: italic; font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem); color: var(--color-text-body); text-wrap: balance; } /* =================================== COLLECTION — INTRO + FACETS =================================== */ .tbcs-collection-intro { padding-block: clamp(2rem, 5vw, 3rem); padding-inline: clamp(1.25rem, 5vw, 2rem); border-bottom: 1px solid var(--color-border-divider); } .tbcs-collection-intro__inner { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 2rem); } .tbcs-collection-intro__text { text-align: center; font-family: var(--font-body-default); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem); line-height: 1.75; color: var(--color-text-body); } .tbcs-collection-facet { text-align: center; } .tbcs-collection-facet__label { display: block; margin: 0 0 0.75rem; font-family: var(--font-ui-labels); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-body-muted); } .tbcs-collection-facet__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; } .tbcs-collection-facet__pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.9rem; font-family: var(--font-body-default); font-size: 0.85rem; color: var(--color-text-body); text-decoration: none; border: 1px solid var(--color-border-divider); border-radius: 999px; transition: border-color 0.25s ease, color 0.25s ease; } .tbcs-collection-facet__pill:hover { border-color: var(--color-accent-brass); color: var(--color-state-hover); } .tbcs-collection-facet__pill:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 3px; } /* =================================== COLLECTION — BOOK GRID SECTION =================================== */ .tbcs-collection-books { padding-block: clamp(2.5rem, 6vw, 4rem); padding-inline: clamp(1.25rem, 5vw, 2rem); } .tbcs-collection-books__inner { max-width: 1200px; margin-inline: auto; } .tbcs-collection-books__empty { text-align: center; font-family: var(--font-body-default); font-style: italic; color: var(--color-text-body-muted); } @media (prefers-reduced-motion: reduce) { .tbcs-collection-facet__pill { transition: none; } } /* =================================== COLLECTIONS — INDEX PAGE HERO =================================== */ .tbcs-collections-hero { width: 100%; background-color: var(--color-brand-primary); padding-block: clamp(3rem, 8vw, 6rem); padding-inline: clamp(1.25rem, 5vw, 2rem); text-align: center; } .tbcs-collections-hero__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 3vw, 3.5rem); letter-spacing: 0.02em; color: var(--color-text-heading); text-wrap: balance; } .tbcs-collections-hero__subtitle { margin: clamp(0.75rem, 2vw, 1.25rem) auto 0; max-width: 42ch; font-family: var(--font-body-default); font-style: italic; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); line-height: 1.6; color: var(--color-text-body); text-wrap: balance; } /* =================================== COLLECTIONS — INDEX GRID + CARD =================================== */ .tbcs-collections-listing { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2rem); padding-block: clamp(2rem, 6vw, 4rem); } .tbcs-collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(1.5rem, 3vw, 2rem); } .tbcs-collection-card { display: flex; flex-direction: column; background-color: var(--color-surface-card); border: 1px solid var(--color-border-divider); border-radius: 8px; overflow: hidden; text-decoration: none; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .tbcs-collection-card:hover { transform: translateY(-4px); border-color: var(--color-accent-brass); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); } .tbcs-collection-card:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 3px; } .tbcs-collection-card__media { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background-color: var(--color-surface-background); } .tbcs-collection-card__img, .tbcs-collection-card__fallback { width: 100%; height: 100%; object-fit: cover; display: block; } .tbcs-collection-card__fallback { background: linear-gradient(135deg, var(--color-brand-primary), var(--color-surface-card)); } .tbcs-collection-card__body { display: flex; flex-direction: column; gap: 0.4rem; padding: clamp(1.1rem, 3vw, 1.5rem); } .tbcs-collection-card__title { margin: 0; font-family: var(--font-heading-section); font-weight: 600; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); line-height: 1.3; color: var(--color-text-heading); text-wrap: balance; } .tbcs-collection-card__tagline { margin: 0; font-family: var(--font-body-default); font-style: italic; font-size: 0.9rem; color: var(--color-text-body); } .tbcs-collection-card__count { margin: 0.2rem 0 0; font-family: var(--font-ui-labels); font-size: 0.75rem; letter-spacing: 0.03em; color: var(--color-text-body-muted); } .tbcs-collections-listing__empty { text-align: center; font-family: var(--font-body-default); font-style: italic; color: var(--color-text-body-muted); } @media (prefers-reduced-motion: reduce) { .tbcs-collection-card { transition: none; } } /* =================================== WHO WE ARE — HERO =================================== */ .tbcs-about-hero { width: 100%; background-color: var(--color-brand-primary); padding-block: clamp(3rem, 8vw, 6rem); padding-inline: clamp(1.25rem, 5vw, 2rem); text-align: center; } .tbcs-about-hero__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 3vw, 3.5rem); letter-spacing: 0.02em; color: var(--color-text-heading); text-wrap: balance; } .tbcs-about-hero__subtitle { margin: clamp(0.75rem, 2vw, 1.25rem) auto 0; max-width: 42ch; font-family: var(--font-body-default); font-style: italic; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); line-height: 1.6; color: var(--color-text-body); text-wrap: balance; } /* =================================== WHO WE ARE — ORIGIN MYTH =================================== */ .tbcs-about-myth { padding-top: clamp(1.5rem, 4vw, 2rem); padding-bottom: clamp(3rem, 7vw, 5rem); padding-inline: clamp(1.25rem, 5vw, 2rem); text-align: center; } .tbcs-about-myth__inner { max-width: 620px; margin-inline: auto; } .tbcs-about-myth__eyebrow { display: inline-block; margin-bottom: 1rem; font-family: var(--font-ui-labels); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-brass); } .tbcs-about-myth__text { margin: 0; font-family: var(--font-body-default); font-style: italic; font-size: clamp(1.15rem, 1rem + 0.75vw, 1.5rem); line-height: 1.7; color: var(--color-text-heading); text-wrap: balance; } .tbcs-about-myth__signature { margin: 1.25rem 0 0; font-family: var(--font-accent-script); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); color: var(--color-accent-brass); } /* =================================== WHO WE ARE — KEEPER CARDS =================================== */ .tbcs-about-keepers { padding-block: clamp(2.5rem, 6vw, 4rem); padding-inline: clamp(1.25rem, 5vw, 2rem); background-color: var(--color-surface-card); } .tbcs-about-keepers__inner { max-width: 1100px; margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(1.75rem, 4vw, 2.5rem); } .tbcs-keeper { display: flex; flex-direction: column; text-align: center; } .tbcs-keeper__portrait { width: 100%; max-width: 260px; aspect-ratio: 4 / 5; margin-inline: auto; overflow: hidden; border-radius: 6px; border: 1px solid var(--color-border-divider); } .tbcs-keeper__img { width: 100%; height: 100%; object-fit: cover; display: block; } .tbcs-keeper__body { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 1.1rem; } .tbcs-keeper__role { font-family: var(--font-ui-labels); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-accent-brass); } .tbcs-keeper__name { margin: 0; font-family: var(--font-heading-section); font-weight: 600; font-size: clamp(1.3rem, 1.1rem + 0.75vw, 1.6rem); color: var(--color-text-heading); } .tbcs-keeper__bio { margin: 0.3rem 0 0; font-family: var(--font-body-default); font-size: 0.95rem; line-height: 1.65; color: var(--color-text-body); } /* =================================== HOMEPAGE — HERO =================================== */ .tbcs-home-hero { position: relative; width: 100%; height: clamp(420px, 62vh, 640px); display: flex; align-items: center; justify-content: flex-start; overflow: hidden; } .tbcs-home-hero__media { position: absolute; inset: 0; } .tbcs-home-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; } .tbcs-home-hero__overlay { position: absolute; inset: 0; background: linear-gradient( to right, rgba(26, 26, 26, 0.72) 0%, rgba(26, 26, 26, 0.42) 40%, rgba(26, 26, 26, 0.12) 75% ); } .tbcs-home-hero__content { position: relative; z-index: 2; max-width: 620px; margin-inline-start: clamp(1.5rem, 7vw, 6rem); margin-inline-end: 1.5rem; padding-inline: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1rem, 2.5vw, 1.5rem); text-align: left; } .tbcs-home-hero__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 3.5vw, 3.75rem); line-height: 1.15; letter-spacing: 0.01em; color: var(--color-text-heading); text-wrap: balance; } .tbcs-home-hero__subtitle { margin: 0; max-width: 46ch; font-family: var(--font-body-default); font-style: italic; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); line-height: 1.6; color: var(--color-text-body); text-wrap: balance; } .tbcs-home-hero__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 2.25rem; margin-top: 0.25rem; background-color: var(--color-accent-brass); color: var(--color-text-heading-on-contrast); font-family: var(--font-ui-labels); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-radius: 2px; transition: background-color 0.25s ease, transform 0.25s ease; } .tbcs-home-hero__cta:hover { background-color: var(--color-state-hover); transform: translateY(-2px); } .tbcs-home-hero__cta:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .tbcs-home-hero__cta { transition: none; } } /* =================================== REUSABLE — SECTION CTA BUTTON Outlined brass, distinct from the Hero's solid CTA. Used across multiple homepage sections. =================================== */ .tbcs-section-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 2rem; background-color: transparent; color: var(--color-accent-brass); font-family: var(--font-ui-labels); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--color-accent-brass); border-radius: 2px; transition: background-color 0.25s ease, color 0.25s ease; } .tbcs-section-cta:hover { background-color: var(--color-accent-brass); color: var(--color-text-heading-on-contrast); } .tbcs-section-cta:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .tbcs-section-cta { transition: none; } } /* =================================== HOMEPAGE — FEATURED COLLECTIONS =================================== */ .tbcs-home-collections { padding-block: clamp(3rem, 7vw, 5rem); padding-inline: clamp(1.25rem, 5vw, 2rem); } .tbcs-home-collections__inner { max-width: 1160px; margin-inline: auto; } .tbcs-home-collections__header { text-align: center; margin-bottom: clamp(2rem, 5vw, 3rem); } .tbcs-home-collections__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem); color: var(--color-text-heading); text-wrap: balance; } .tbcs-home-collections__subtitle { margin: 0.6rem 0 0; font-family: var(--font-body-default); font-style: italic; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem); color: var(--color-text-body-muted); } .tbcs-home-collections__grid { display: grid; grid-template-columns: 1fr; justify-content: center; gap: clamp(1.5rem, 3vw, 2.25rem); } @media (min-width: 641px) { .tbcs-home-collections__grid { grid-template-columns: repeat(2, minmax(0, 340px)); } } @media (min-width: 1024px) { .tbcs-home-collections__grid { grid-template-columns: repeat(3, minmax(0, 340px)); } } .tbcs-home-collections__cta { margin: clamp(2rem, 5vw, 3rem) 0 0; text-align: center; } /* =================================== HOMEPAGE — FROM THE BLOG =================================== */ .tbcs-home-blog { padding-block: clamp(3rem, 7vw, 5rem); padding-inline: clamp(1.25rem, 5vw, 2rem); } .tbcs-home-blog__inner { max-width: 1160px; margin-inline: auto; } .tbcs-home-blog__header { text-align: center; margin-bottom: clamp(2rem, 5vw, 3rem); } .tbcs-home-blog__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem); color: var(--color-text-heading); text-wrap: balance; } .tbcs-home-blog__subtitle { margin: 0.6rem 0 0; font-family: var(--font-body-default); font-style: italic; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem); color: var(--color-text-body-muted); } .tbcs-home-blog__grid { display: grid; grid-template-columns: 1fr; justify-content: center; gap: clamp(1.75rem, 3vw, 2.25rem); } @media (min-width: 481px) { .tbcs-home-blog__grid { grid-template-columns: repeat(2, minmax(0, 260px)); } } @media (min-width: 1024px) { .tbcs-home-blog__grid { grid-template-columns: repeat(4, minmax(0, 260px)); } } .tbcs-home-blog-card { display: flex; flex-direction: column; gap: 0.5rem; } .tbcs-home-blog-card__image { width: 100%; overflow: hidden; border-radius: 4px; } .tbcs-home-blog-card__img, .tbcs-home-blog-card__fallback { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .tbcs-home-blog-card__img { transition: transform 0.4s ease; } .tbcs-home-blog-card__fallback { background: linear-gradient(135deg, var(--color-brand-primary), var(--color-surface-background)); } @media (hover: hover) { .tbcs-home-blog-card:hover .tbcs-home-blog-card__img { transform: scale(1.05); } } .tbcs-home-blog-card__title { position: relative; margin: 0.15rem 0 0; font-family: var(--font-heading-section); font-weight: 600; font-size: 1.02rem; line-height: 1.35; color: var(--color-text-heading); text-wrap: balance; } .tbcs-home-blog-card__link { color: inherit; text-decoration: none; } .tbcs-home-blog-card__link::after { content: ''; position: absolute; inset: -0.4rem; } .tbcs-home-blog-card__link:hover { color: var(--color-state-hover); } .tbcs-home-blog-card__link:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 4px; border-radius: 2px; } .tbcs-home-blog-card__meta { margin: 0; font-family: var(--font-body-default); font-size: 0.78rem; color: var(--color-text-body-muted); } .tbcs-home-blog__cta { margin: clamp(2rem, 5vw, 3rem) 0 0; text-align: center; } @media (prefers-reduced-motion: reduce) { .tbcs-home-blog-card__img { transition: none; } } /* =================================== HOMEPAGE — THE CABINET OF CURIOSITIES (Shop) =================================== */ .tbcs-home-shop { padding-block: clamp(3rem, 7vw, 5rem); background-color: var(--color-surface-card); } .tbcs-home-shop__header { text-align: center; max-width: 1160px; margin: 0 auto clamp(2rem, 5vw, 3rem); padding-inline: clamp(1.25rem, 5vw, 2rem); } .tbcs-home-shop__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem); color: var(--color-text-heading); text-wrap: balance; } .tbcs-home-shop__subtitle { margin: 0.6rem 0 0; font-family: var(--font-body-default); font-style: italic; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem); color: var(--color-text-body-muted); } .tbcs-home-shop__strip { display: flex; gap: clamp(1.25rem, 3vw, 1.75rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(1.25rem, 5vw, 2rem); -webkit-overflow-scrolling: touch; padding-inline: clamp(1.25rem, 5vw, 2rem); padding-bottom: 0.5rem; scrollbar-width: none; -ms-overflow-style: none; } .tbcs-home-shop__strip::-webkit-scrollbar { display: none; } .tbcs-specimen { flex: 0 0 auto; width: clamp(160px, 22vw, 210px); display: flex; flex-direction: column; gap: 0.6rem; text-decoration: none; scroll-snap-align: start; } .tbcs-specimen__frame { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background-color: var(--color-surface-background); border: 1px solid var(--color-border-divider); border-radius: 4px; } .tbcs-specimen__number { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2; padding: 0.15rem 0.5rem; background-color: rgba(26, 26, 26, 0.75); color: var(--color-accent-brass); font-family: var(--font-ui-labels); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 2px; } .tbcs-specimen__img, .tbcs-specimen__fallback { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .tbcs-specimen__fallback { background: linear-gradient(135deg, var(--color-brand-primary), var(--color-surface-card)); } @media (hover: hover) { .tbcs-specimen:hover .tbcs-specimen__img { transform: scale(1.06); } } .tbcs-specimen:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 3px; } .tbcs-specimen__label { display: flex; flex-direction: column; gap: 0.15rem; } .tbcs-specimen__title { margin: 0; font-family: var(--font-heading-section); font-weight: 600; font-size: 0.92rem; line-height: 1.3; color: var(--color-text-heading); text-wrap: balance; } .tbcs-specimen__meta { margin: 0; font-family: var(--font-body-default); font-size: 0.78rem; color: var(--color-text-body-muted); } .tbcs-home-shop__cta { margin: clamp(2rem, 5vw, 3rem) 0 0; padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--color-border-divider); text-align: center; } @media (prefers-reduced-motion: reduce) { .tbcs-specimen__img { transition: none; } } /* =================================== WHO WE ARE — BEFORE THE SHELVES (Journey) =================================== */ .tbcs-about-journey { padding-block: clamp(3rem, 7vw, 5rem); padding-inline: clamp(1.25rem, 5vw, 2rem); } .tbcs-about-journey__inner { max-width: 680px; margin-inline: auto; text-align: center; } .tbcs-about-journey__eyebrow { display: inline-block; margin-bottom: 1.25rem; font-family: var(--font-ui-labels); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-brass); } .tbcs-about-journey__text { display: flex; flex-direction: column; gap: 1.1rem; text-align: left; } .tbcs-about-journey__text p { margin: 0; font-family: var(--font-body-default); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem); line-height: 1.75; color: var(--color-text-body); } .tbcs-about-journey__lede { margin: 0 0 clamp(1.75rem, 4vw, 2.25rem); text-align: center; font-family: var(--font-heading-section); font-style: italic; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); color: var(--color-text-heading); } .tbcs-about-journey__heading { margin: clamp(1.75rem, 4vw, 2.25rem) 0 0; text-align: center; font-family: var(--font-heading-section); font-weight: 600; font-size: clamp(0.95rem, 0.85rem + 0.25vw, 1.1rem); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-brass); } /* =================================== WHO WE ARE — SALEM'S NOTE (on Keeper cards) =================================== */ .tbcs-keeper__note { margin: 0.6rem 0 0; padding-top: 0.6rem; border-top: 1px dashed var(--color-border-divider); font-family: var(--font-body-default); font-style: italic; font-size: 0.82rem; color: var(--color-text-body-muted); } /* =================================== WHO WE ARE — PETA CALLOUT =================================== */ .tbcs-about-cause { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; margin: 0.25rem 0; padding: clamp(1.5rem, 4vw, 2rem); background-color: var(--color-surface-card); border-left: 3px solid var(--color-accent-brass); border-radius: 4px; text-align: center; } .tbcs-about-cause__icon { width: 26px; height: 26px; color: var(--color-accent-brass); } .tbcs-about-cause__text { margin: 0; max-width: 48ch; font-family: var(--font-body-default); font-style: italic; font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1rem); line-height: 1.65; color: var(--color-text-body); } .tbcs-about-journey__intro { margin: 0 auto clamp(1rem, 3vw, 1.5rem); max-width: 52ch; font-family: var(--font-body-default); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem); line-height: 1.7; color: var(--color-text-body); text-wrap: balance; } /* =================================== GENERIC PAGE TEMPLATE (page.php) =================================== */ .tbcs-page-hero { width: 100%; background-color: var(--color-brand-primary); padding-block: clamp(2.5rem, 6vw, 4rem); padding-inline: clamp(1.25rem, 5vw, 2rem); text-align: center; } .tbcs-page-hero__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 2vw, 3rem); letter-spacing: 0.02em; color: var(--color-text-heading); text-wrap: balance; } .tbcs-page-body { width: 100%; } .tbcs-page-body__inner { max-width: 720px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2rem); padding-block: clamp(2rem, 6vw, 4rem); } /* =================================== AFFILIATE DISCLOSURE SNIPPET =================================== */ .tbcs-disclosure { margin-top: clamp(1.5rem, 4vw, 2.25rem); padding: 0.85rem 1.1rem; background-color: var(--color-surface-card); border-left: 3px solid var(--color-accent-brass); border-radius: 4px; } .tbcs-disclosure__text { margin: 0; font-family: var(--font-body-default); font-size: 0.82rem; line-height: 1.6; color: var(--color-text-body-muted); } .tbcs-disclosure__link { color: var(--color-accent-brass); text-decoration: underline; text-underline-offset: 2px; } .tbcs-disclosure__link:hover { color: var(--color-state-hover); } /* =================================== CONTACT PAGE =================================== */ .tbcs-contact__inner { max-width: 640px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2rem); padding-block: clamp(2rem, 6vw, 4rem); } .tbcs-contact__intro { margin: 0 0 clamp(1.75rem, 4vw, 2.5rem); text-align: center; font-family: var(--font-body-default); font-style: italic; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem); color: var(--color-text-body-muted); } .tbcs-contact__notice { margin: 0 0 clamp(1.5rem, 4vw, 2rem); padding: 0.9rem 1.1rem; border-radius: 4px; border-left: 3px solid var(--color-accent-brass); background-color: var(--color-surface-card); } .tbcs-contact__notice--error { border-left-color: var(--color-brand-secondary); } .tbcs-contact__notice p { margin: 0; font-family: var(--font-body-default); font-size: 0.92rem; color: var(--color-text-body); } .tbcs-contact__form { display: flex; flex-direction: column; gap: 1.25rem; } .tbcs-contact__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .tbcs-contact__field { display: flex; flex-direction: column; gap: 0.4rem; } .tbcs-contact__field label { font-family: var(--font-ui-labels); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-body-muted); } .tbcs-contact__field input, .tbcs-contact__field textarea { width: 100%; padding: 0.75rem 0.9rem; background-color: var(--color-surface-card); color: var(--color-text-body); font-family: var(--font-body-default); font-size: 0.95rem; border: 1px solid var(--color-border-divider); border-radius: 4px; resize: vertical; } .tbcs-contact__field input:focus-visible, .tbcs-contact__field textarea:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; border-color: var(--color-accent-brass); } .tbcs-contact__form .tbcs-section-cta { align-self: flex-start; appearance: none; -webkit-appearance: none; cursor: pointer; } .tbcs-footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.9rem; margin-bottom: 0.25rem; } .tbcs-footer__legal a { font-family: var(--font-body-default); font-size: 0.75rem; color: var(--color-text-body-muted); text-decoration: none; transition: color 0.25s ease; } .tbcs-footer__legal a:hover { color: var(--color-accent-brass); } .tbcs-footer__legal a:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; border-radius: 2px; } /* =================================== COOKIE CONSENT BANNER Visibility is decided entirely client-side (JS + cookie check) — never server-side — so cached HTML can never lock in a stale state. =================================== */ .tbcs-cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; transform: translateY(100%); opacity: 0; visibility: hidden; background-color: var(--color-surface-card); border-top: 1px solid var(--color-border-divider); transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s; } .tbcs-cookie-banner.is-visible { transform: translateY(0); opacity: 1; visibility: visible; } .tbcs-cookie-banner__inner { max-width: 1200px; margin-inline: auto; padding: 1rem clamp(1.25rem, 5vw, 2rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .tbcs-cookie-banner__text { margin: 0; max-width: 640px; font-family: var(--font-body-default); font-size: 0.85rem; line-height: 1.55; color: var(--color-text-body); } .tbcs-cookie-banner__text a { color: var(--color-accent-brass); text-decoration: underline; text-underline-offset: 2px; } .tbcs-cookie-banner__actions { display: flex; gap: 0.75rem; flex-shrink: 0; } .tbcs-cookie-banner__decline, .tbcs-cookie-banner__accept { min-height: 42px; padding: 0 1.25rem; font-family: var(--font-ui-labels); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 2px; cursor: pointer; appearance: none; -webkit-appearance: none; } .tbcs-cookie-banner__decline { background: transparent; color: var(--color-text-body-muted); border: 1px solid var(--color-border-divider); } .tbcs-cookie-banner__decline:hover { border-color: var(--color-accent-brass); color: var(--color-accent-brass); } .tbcs-cookie-banner__accept { background-color: var(--color-accent-brass); color: var(--color-text-heading-on-contrast); border: 1px solid var(--color-accent-brass); } .tbcs-cookie-banner__accept:hover { background-color: var(--color-state-hover); border-color: var(--color-state-hover); } .tbcs-cookie-banner__decline:focus-visible, .tbcs-cookie-banner__accept:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; } @media (max-width: 640px) { .tbcs-cookie-banner__inner { flex-direction: column; align-items: stretch; text-align: center; } .tbcs-cookie-banner__actions { justify-content: center; } } @media (prefers-reduced-motion: reduce) { .tbcs-cookie-banner { transition: none; } } /* =================================== SALEM'S PICK BADGE — corner ribbon =================================== */ .tbcs-pick-badge { position: absolute; top: 0; right: 0; z-index: 2; width: 120px; height: 120px; overflow: hidden; pointer-events: none; } .tbcs-pick-badge--large { width: 160px; height: 160px; } .tbcs-pick-badge__ribbon { position: absolute; top: 24px; right: -34px; width: 150px; padding-block: 0.35rem; background-color: var(--color-accent-brass); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); transform: rotate(45deg); text-align: center; } .tbcs-pick-badge--large .tbcs-pick-badge__ribbon { top: 32px; right: -40px; width: 190px; padding-block: 0.45rem; } .tbcs-pick-badge__ribbon::before, .tbcs-pick-badge__ribbon::after { content: ''; position: absolute; top: 100%; border-style: solid; } .tbcs-pick-badge__ribbon::before { left: 0; border-width: 5px 5px 5px 0; border-color: var(--color-brand-primary) transparent transparent transparent; } .tbcs-pick-badge__ribbon::after { right: 0; border-width: 5px 0 5px 5px; border-color: var(--color-brand-primary) transparent transparent transparent; } .tbcs-pick-badge__text { display: block; font-family: var(--font-ui-labels); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-heading-on-contrast); } .tbcs-pick-badge--large .tbcs-pick-badge__text { font-size: 0.82rem; } /* =================================== FILTER BAR — CHECKBOX FIELD =================================== */ .tbcs-filters__field--checkbox { flex-direction: row; align-items: center; justify-content: flex-start; } .tbcs-filters__field--checkbox label { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-body-default); font-size: 0.9rem; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--color-text-body); cursor: pointer; } .tbcs-filters__field--checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-accent-brass); cursor: pointer; } /* =================================== SEARCH — HERO + FORM =================================== */ .tbcs-search-hero { width: 100%; background-color: var(--color-brand-primary); padding-block: clamp(2.5rem, 6vw, 4rem); padding-inline: clamp(1.25rem, 5vw, 2rem); text-align: center; } .tbcs-search-hero__title { margin: 0 0 clamp(1.5rem, 4vw, 2rem); font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 2vw, 2.75rem); color: var(--color-text-heading); text-wrap: balance; word-break: break-word; } .tbcs-search-hero__form { display: flex; max-width: 560px; margin-inline: auto; border: 1px solid var(--color-border-divider); border-radius: 999px; background-color: var(--color-surface-background); overflow: hidden; } .tbcs-search-hero__form input[type="search"] { flex: 1; min-width: 0; padding: 0.85rem 1.25rem; background: transparent; border: none; color: var(--color-text-body); font-family: var(--font-body-default); font-size: 1rem; } .tbcs-search-hero__form input[type="search"]:focus { outline: none; } .tbcs-search-hero__form input[type="search"]::-webkit-search-cancel-button { display: none; } .tbcs-search-hero__submit { display: inline-flex; align-items: center; justify-content: center; width: 50px; flex-shrink: 0; background-color: var(--color-accent-brass); color: var(--color-text-heading-on-contrast); border: none; cursor: pointer; appearance: none; -webkit-appearance: none; } .tbcs-search-hero__submit svg { width: 18px; height: 18px; } .tbcs-search-hero__submit:hover { background-color: var(--color-state-hover); } .tbcs-search-hero__submit:focus-visible { outline: 2px solid var(--color-text-heading); outline-offset: -3px; } /* =================================== SEARCH — TYPE TABS =================================== */ .tbcs-search-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: clamp(1.25rem, 3vw, 1.75rem); } .tbcs-search-tabs__link { display: inline-flex; align-items: center; min-height: 38px; padding: 0 1.1rem; font-family: var(--font-ui-labels); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-body); text-decoration: none; border: 1px solid var(--color-border-divider); border-radius: 999px; transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease; } .tbcs-search-tabs__link:hover { border-color: var(--color-accent-brass); } .tbcs-search-tabs__link.is-active { background-color: var(--color-accent-brass); border-color: var(--color-accent-brass); color: var(--color-text-heading-on-contrast); } .tbcs-search-tabs__link:focus-visible { outline: 2px solid var(--color-text-heading); outline-offset: 2px; } /* =================================== SEARCH — RESULTS =================================== */ .tbcs-search-results { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2rem); padding-block: clamp(2rem, 6vw, 4rem); } .tbcs-search-section { margin-bottom: clamp(2.5rem, 6vw, 3.5rem); } .tbcs-search-section:last-child { margin-bottom: 0; } .tbcs-search-section__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: clamp(1.25rem, 3vw, 1.75rem); } .tbcs-search-section__title { margin: 0; font-family: var(--font-heading-section); font-weight: 600; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); color: var(--color-text-heading); } .tbcs-search-section__more { font-family: var(--font-ui-labels); font-size: 0.82rem; letter-spacing: 0.03em; color: var(--color-accent-brass); text-decoration: none; } .tbcs-search-section__more:hover { color: var(--color-state-hover); } .tbcs-search-results__empty { text-align: center; font-family: var(--font-body-default); font-style: italic; font-size: 1.05rem; color: var(--color-text-body-muted); } .tbcs-search-results__empty a { color: var(--color-accent-brass); text-decoration: underline; text-underline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .tbcs-search-tabs__link { transition: none; } } /* =================================== HEADER SEARCH TRIGGER Native

— works with zero JavaScript. =================================== */ .tbcs-header__utility { display: flex; align-items: center; gap: 0.5rem; } @media (min-width: 641px) { .tbcs-header__utility { position: absolute; top: 0; right: 0; margin-top: 0; } } .tbcs-search-trigger { position: relative; } .tbcs-search-trigger__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--color-text-body); border: 1px solid var(--color-border-divider); border-radius: 4px; cursor: pointer; list-style: none; transition: border-color 0.25s ease, color 0.25s ease; } .tbcs-search-trigger__icon::-webkit-details-marker { display: none; } .tbcs-search-trigger__icon::marker { content: ''; } .tbcs-search-trigger__icon svg { width: 18px; height: 18px; } .tbcs-search-trigger__icon:hover { border-color: var(--color-accent-brass); color: var(--color-accent-brass); } .tbcs-search-trigger__icon:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; } .tbcs-search-trigger__panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: 320px; max-width: calc(100vw - 2rem); padding: 0.75rem; background-color: var(--color-surface-card); border: 1px solid var(--color-border-divider); border-radius: 8px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35); } .tbcs-search-trigger__panel form { display: flex; background-color: var(--color-surface-background); border: 1px solid var(--color-border-divider); border-radius: 999px; overflow: hidden; } .tbcs-search-trigger__panel input[type="search"] { flex: 1; min-width: 0; padding: 0.6rem 1rem; background: transparent; border: none; color: var(--color-text-body); font-family: var(--font-body-default); font-size: 0.9rem; } .tbcs-search-trigger__panel input[type="search"]:focus { outline: none; } .tbcs-search-trigger__panel input[type="search"]::-webkit-search-cancel-button { display: none; } .tbcs-search-trigger__panel button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: 42px; flex-shrink: 0; background-color: var(--color-accent-brass); color: var(--color-text-heading-on-contrast); border: none; cursor: pointer; appearance: none; -webkit-appearance: none; } .tbcs-search-trigger__panel button[type="submit"] svg { width: 16px; height: 16px; } .tbcs-search-trigger__panel button[type="submit"]:hover { background-color: var(--color-state-hover); } .tbcs-search-trigger__panel button[type="submit"]:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .tbcs-search-trigger__icon { transition: none; } } .tbcs-search-trigger__icon-close { display: none; } .tbcs-search-trigger__icon.is-search-open .tbcs-search-trigger__icon-search { display: none; } .tbcs-search-trigger__icon.is-search-open .tbcs-search-trigger__icon-close { display: block; } /* =================================== SEARCH OVERLAY (JS-enhanced) Progressive enhancement over the header's

panel — intercepts its click, and also opens via Ctrl/Cmd+K. =================================== */ .tbcs-no-scroll { overflow: hidden; } .tbcs-search-kbd-hint { display: none; font-family: var(--font-ui-labels); font-size: 0.68rem; letter-spacing: 0.03em; color: var(--color-text-body-muted); white-space: nowrap; } @media (min-width: 641px) { .tbcs-search-kbd-hint { display: inline-flex; } } .tbcs-search-overlay { position: fixed; inset: 0; z-index: 600; display: flex; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; } .tbcs-search-overlay.is-open { opacity: 1; visibility: visible; } .tbcs-search-overlay__backdrop { position: absolute; inset: 0; background-color: rgba(26, 26, 26, 0.75); backdrop-filter: blur(3px); cursor: pointer; } .tbcs-search-overlay__panel { position: relative; z-index: 1; width: 100%; max-width: 640px; max-height: min(600px, 80vh); margin: 8vh 1.25rem 0; display: flex; flex-direction: column; background-color: var(--color-surface-card); border: 1px solid var(--color-border-divider); border-radius: 10px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5); overflow: hidden; transform: translateY(-12px); transition: transform 0.25s ease; } .tbcs-search-overlay.is-open .tbcs-search-overlay__panel { transform: translateY(0); } .tbcs-search-overlay__bar { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border-divider); flex-shrink: 0; } .tbcs-search-overlay__bar-icon { width: 20px; height: 20px; color: var(--color-text-body-muted); flex-shrink: 0; } .tbcs-search-overlay__bar input[type="search"] { flex: 1; min-width: 0; background: transparent; border: none; color: var(--color-text-heading); font-family: var(--font-body-default); font-size: 1.05rem; } .tbcs-search-overlay__bar input[type="search"]:focus { outline: none; } .tbcs-search-overlay__bar input[type="search"]::-webkit-search-cancel-button { display: none; } .tbcs-search-overlay__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; color: var(--color-text-body-muted); background: transparent; border: 1px solid var(--color-border-divider); border-radius: 4px; cursor: pointer; appearance: none; -webkit-appearance: none; } .tbcs-search-overlay__close svg { width: 14px; height: 14px; } .tbcs-search-overlay__close:hover { border-color: var(--color-accent-brass); color: var(--color-accent-brass); } .tbcs-search-overlay__close:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; } .tbcs-search-overlay__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--color-border-divider); flex-shrink: 0; } .tbcs-search-overlay__filter { display: inline-flex; align-items: center; min-height: 32px; padding: 0 0.85rem; font-family: var(--font-ui-labels); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-body-muted); background: transparent; border: 1px solid var(--color-border-divider); border-radius: 999px; cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; } .tbcs-search-overlay__filter:hover { border-color: var(--color-accent-brass); color: var(--color-accent-brass); } .tbcs-search-overlay__filter.is-active { background-color: var(--color-accent-brass); border-color: var(--color-accent-brass); color: var(--color-text-heading-on-contrast); } .tbcs-search-overlay__filter:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; } .tbcs-search-overlay__results { flex: 1; overflow-y: auto; padding: 0.5rem 0.75rem; } .tbcs-search-overlay__results.is-loading { opacity: 0.5; } .tbcs-search-overlay__hint { margin: 0; padding: 2rem 1rem; text-align: center; font-family: var(--font-body-default); font-style: italic; font-size: 0.9rem; color: var(--color-text-body-muted); } .tbcs-search-overlay__section { padding: 0.6rem 0.5rem 0.25rem; } .tbcs-search-overlay__section-label { margin: 0 0 0.4rem; padding: 0 0.25rem; font-family: var(--font-ui-labels); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-brass); } .tbcs-search-overlay__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: 6px; text-decoration: none; transition: background-color 0.15s ease; } .tbcs-search-overlay__item:hover, .tbcs-search-overlay__item:focus-visible { background-color: var(--color-surface-background); outline: none; } .tbcs-search-overlay__item-thumb { width: 40px; height: 40px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background-color: var(--color-surface-background); } .tbcs-search-overlay__item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .tbcs-search-overlay__item-thumb--empty { background: linear-gradient(135deg, var(--color-brand-primary), var(--color-surface-background)); } .tbcs-search-overlay__item-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .tbcs-search-overlay__item-title { font-family: var(--font-heading-section); font-weight: 600; font-size: 0.9rem; color: var(--color-text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tbcs-search-overlay__item-sub { font-family: var(--font-body-default); font-style: italic; font-size: 0.78rem; color: var(--color-text-body-muted); } .tbcs-search-overlay__viewall { display: block; margin: 0.5rem 0.25rem 0.75rem; padding: 0.6rem; text-align: center; font-family: var(--font-ui-labels); font-size: 0.78rem; letter-spacing: 0.03em; color: var(--color-accent-brass); text-decoration: none; border-top: 1px solid var(--color-border-divider); } .tbcs-search-overlay__viewall:hover { color: var(--color-state-hover); } .tbcs-search-overlay__footer { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.65rem 1.25rem; border-top: 1px solid var(--color-border-divider); flex-shrink: 0; } .tbcs-search-overlay__footer span { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-body-default); font-size: 0.72rem; color: var(--color-text-body-muted); } .tbcs-search-overlay__footer kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 0.3rem; font-family: var(--font-ui-labels); font-size: 0.65rem; color: var(--color-text-body); background-color: var(--color-surface-background); border: 1px solid var(--color-border-divider); border-radius: 3px; } @media (max-width: 640px) { .tbcs-search-overlay__panel { margin-top: 0; max-height: 100vh; height: 100%; border-radius: 0; } .tbcs-search-overlay__footer { display: none; } } @media (prefers-reduced-motion: reduce) { .tbcs-search-overlay, .tbcs-search-overlay__panel, .tbcs-search-overlay__filter, .tbcs-search-overlay__item { transition: none; } } /* =================================== CATEGORY ARCHIVE — HERO =================================== */ .tbcs-category-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(280px, 45vw, 460px); padding: clamp(1.5rem, 5vw, 3rem); overflow: hidden; } .tbcs-category-hero--no-image { background: radial-gradient(ellipse at top, var(--color-brand-primary) 0%, var(--color-surface-background) 75%); } .tbcs-category-hero__media { position: absolute; inset: 0; } .tbcs-category-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; } .tbcs-category-hero__overlay { position: absolute; inset: 0; background: linear-gradient( to top, var(--color-surface-background) 0%, rgba(26, 26, 26, 0.55) 45%, rgba(26, 26, 26, 0.05) 85% ); } .tbcs-category-hero__content { position: relative; width: 100%; max-width: 1200px; margin-inline: auto; text-align: center; } .tbcs-category-hero__eyebrow { display: inline-block; margin-bottom: 0.6rem; font-family: var(--font-ui-labels); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-brass); } .tbcs-category-hero__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 3vw, 3.25rem); letter-spacing: 0.02em; color: var(--color-text-heading); text-wrap: balance; } .tbcs-category-hero__tagline { margin: clamp(0.5rem, 1.5vw, 0.85rem) auto 0; max-width: 42ch; font-family: var(--font-body-default); font-style: italic; font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.3rem); color: var(--color-text-body); text-wrap: balance; } /* =================================== CATEGORY ARCHIVE — INTRO =================================== */ .tbcs-category-intro { padding-block: clamp(2rem, 5vw, 3rem); padding-inline: clamp(1.25rem, 5vw, 2rem); } .tbcs-category-intro__text { max-width: 640px; margin-inline: auto; text-align: center; font-family: var(--font-body-default); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem); line-height: 1.75; color: var(--color-text-body); } /* =================================== CATEGORY ARCHIVE — LISTING Reuses .tbcs-card-grid from the Journal build =================================== */ .tbcs-category-listing { padding-block: clamp(2.5rem, 6vw, 4rem); padding-inline: clamp(1.25rem, 5vw, 2rem); } .tbcs-category-listing__inner { max-width: 1200px; margin-inline: auto; } .tbcs-category-listing__empty { text-align: center; font-family: var(--font-body-default); font-style: italic; color: var(--color-text-body-muted); } /* =================================== CATEGORY ARCHIVE — OTHER CATEGORIES NAV =================================== */ .tbcs-category-nav { padding-block: clamp(2.5rem, 6vw, 3.5rem); padding-inline: clamp(1.25rem, 5vw, 2rem); border-top: 1px solid var(--color-border-divider); } .tbcs-category-nav__inner { max-width: 900px; margin-inline: auto; text-align: center; } .tbcs-category-nav__label { margin: 0 0 1rem; font-family: var(--font-ui-labels); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-body-muted); } .tbcs-category-nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem; margin: 0; padding: 0; list-style: none; } .tbcs-category-nav__link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.1rem; font-family: var(--font-heading-section); font-weight: 600; font-size: 0.95rem; color: var(--color-text-body); text-decoration: none; border: 1px solid var(--color-border-divider); border-radius: 999px; transition: border-color 0.25s ease, color 0.25s ease; } .tbcs-category-nav__link:hover { border-color: var(--color-accent-brass); color: var(--color-state-hover); } .tbcs-category-nav__link:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .tbcs-category-nav__link { transition: none; } } /* =================================== PRODUCT TYPE ARCHIVE — HERO =================================== */ .tbcs-ptype-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(280px, 45vw, 460px); padding: clamp(1.5rem, 5vw, 3rem); overflow: hidden; } .tbcs-ptype-hero--no-image { background: radial-gradient(ellipse at top, var(--color-brand-primary) 0%, var(--color-surface-background) 75%); } .tbcs-ptype-hero__media { position: absolute; inset: 0; } .tbcs-ptype-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; } .tbcs-ptype-hero__overlay { position: absolute; inset: 0; background: linear-gradient( to top, var(--color-surface-background) 0%, rgba(26, 26, 26, 0.55) 45%, rgba(26, 26, 26, 0.05) 85% ); } .tbcs-ptype-hero__content { position: relative; width: 100%; max-width: 1200px; margin-inline: auto; text-align: center; } .tbcs-ptype-hero__eyebrow { display: inline-block; margin-bottom: 0.6rem; font-family: var(--font-ui-labels); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-brass); } .tbcs-ptype-hero__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 3vw, 3.25rem); letter-spacing: 0.02em; color: var(--color-text-heading); text-wrap: balance; } .tbcs-ptype-hero__tagline { margin: clamp(0.5rem, 1.5vw, 0.85rem) auto 0; max-width: 42ch; font-family: var(--font-body-default); font-style: italic; font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.3rem); color: var(--color-text-body); text-wrap: balance; } /* =================================== PRODUCT TYPE ARCHIVE — INTRO =================================== */ .tbcs-ptype-intro { padding-block: clamp(2rem, 5vw, 3rem); padding-inline: clamp(1.25rem, 5vw, 2rem); } .tbcs-ptype-intro__text { max-width: 640px; margin-inline: auto; text-align: center; font-family: var(--font-body-default); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem); line-height: 1.75; color: var(--color-text-body); } /* =================================== PRODUCT TYPE ARCHIVE — LISTING Reuses .tbcs-merch-grid from the Shop build =================================== */ .tbcs-ptype-listing { padding-block: clamp(2.5rem, 6vw, 4rem); padding-inline: clamp(1.25rem, 5vw, 2rem); } .tbcs-ptype-listing__inner { max-width: 1200px; margin-inline: auto; } .tbcs-ptype-listing__empty { text-align: center; font-family: var(--font-body-default); font-style: italic; color: var(--color-text-body-muted); } /* =================================== PRODUCT TYPE ARCHIVE — OTHER TYPES NAV =================================== */ .tbcs-ptype-nav { padding-block: clamp(2.5rem, 6vw, 3.5rem); padding-inline: clamp(1.25rem, 5vw, 2rem); border-top: 1px solid var(--color-border-divider); } .tbcs-ptype-nav__inner { max-width: 900px; margin-inline: auto; text-align: center; } .tbcs-ptype-nav__label { margin: 0 0 1rem; font-family: var(--font-ui-labels); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-body-muted); } .tbcs-ptype-nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem; margin: 0; padding: 0; list-style: none; } .tbcs-ptype-nav__link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.1rem; font-family: var(--font-heading-section); font-weight: 600; font-size: 0.95rem; color: var(--color-text-body); text-decoration: none; border: 1px solid var(--color-border-divider); border-radius: 999px; transition: border-color 0.25s ease, color 0.25s ease; } .tbcs-ptype-nav__link:hover { border-color: var(--color-accent-brass); color: var(--color-state-hover); } .tbcs-ptype-nav__link:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .tbcs-ptype-nav__link { transition: none; } } /* =================================== HOMEPAGE — CABINET OF CURIOSITIES: DRAWERS Each drawer is one Product Type row within the Cabinet section. =================================== */ .tbcs-shop-drawer { padding-block: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--color-border-divider); } .tbcs-shop-drawer:first-of-type { border-top: none; padding-top: clamp(0.5rem, 2vw, 1rem); } .tbcs-shop-drawer__header { text-align: center; max-width: 640px; margin: 0 auto clamp(1.5rem, 4vw, 2rem); padding-inline: clamp(1.25rem, 5vw, 2rem); } .tbcs-shop-drawer__title { margin: 0; font-family: var(--font-accent-script); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.25rem); color: var(--color-accent-brass); line-height: 1.2; } .tbcs-shop-drawer__tagline { margin: 0.4rem 0 0; font-family: var(--font-body-default); font-style: italic; font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.05rem); color: var(--color-text-body-muted); } .tbcs-shop-drawer__more { margin: clamp(1.25rem, 3vw, 1.75rem) 0 0; text-align: center; padding-inline: clamp(1.25rem, 5vw, 2rem); } .tbcs-shop-drawer__more-link { font-family: var(--font-ui-labels); font-size: 0.85rem; letter-spacing: 0.03em; color: var(--color-accent-brass); text-decoration: none; transition: color 0.25s ease; } .tbcs-shop-drawer__more-link:hover { color: var(--color-state-hover); } .tbcs-shop-drawer__more-link:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 3px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { .tbcs-shop-drawer__more-link { transition: none; } } /* =================================== SINGLE BOOK — OTHER EDITIONS Reuses .tbcs-book-grid / Book Card from the catalog build =================================== */ .tbcs-book-editions { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--color-border-divider); } .tbcs-book-editions__title { margin: 0 0 clamp(1.5rem, 4vw, 2rem); text-align: center; font-family: var(--font-heading-section); font-weight: 600; font-size: clamp(1.3rem, 1.1rem + 0.75vw, 1.6rem); color: var(--color-text-heading); } /* =================================== BOOK — SERIES + IMPRINT/PUBLISHER =================================== */ .tbcs-book__series { font-size: 0.72em; font-weight: 400; color: var(--color-text-body-muted); } .tbcs-book-card__series { font-size: 0.8em; font-weight: 400; color: var(--color-text-body-muted); } .tbcs-book__imprint { margin: 0.3rem 0 0; font-family: var(--font-body-default); font-style: italic; font-size: 0.85rem; color: var(--color-text-body-muted); } .tbcs-book__imprint a { color: var(--color-text-body-muted); text-decoration: underline; text-decoration-color: var(--color-border-divider); text-underline-offset: 2px; transition: color 0.25s ease, text-decoration-color 0.25s ease; } .tbcs-book__imprint a:hover { color: var(--color-accent-brass); text-decoration-color: var(--color-accent-brass); } .tbcs-book__imprint a:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; border-radius: 2px; } /* =================================== BOOK — PRICE + DISCLAIMER =================================== */ .tbcs-book__price-block { margin-top: 0.25rem; } .tbcs-book__price-note { margin: 0.15rem 0 0; font-family: var(--font-body-default); font-style: italic; font-size: 0.75rem; color: var(--color-text-body-muted); } /* =================================== FILTER BAR — REDESIGN Overrides earlier .tbcs-filters* rules by cascade order. =================================== */ .tbcs-filters { display: block; margin-bottom: clamp(2rem, 5vw, 3rem); padding: clamp(1.5rem, 4vw, 2.25rem); background-color: var(--color-surface-card); border: 1px solid var(--color-border-divider); border-radius: 12px; } .tbcs-filters__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.25rem 1.5rem; } .tbcs-filters__field { display: flex; flex-direction: column; gap: 0.4rem; } .tbcs-filters__field label { font-family: var(--font-ui-labels); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-body-muted); } .tbcs-filters__field select { appearance: none; -webkit-appearance: none; -moz-appearance: none; min-height: 46px; padding: 0 2.25rem 0 0.9rem; background-color: var(--color-surface-background); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B89B6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 16px; color: var(--color-text-body); font-family: var(--font-body-default); font-size: 0.9rem; border: 1px solid var(--color-border-divider); border-radius: 6px; cursor: pointer; transition: border-color 0.25s ease; } .tbcs-filters__field select:hover { border-color: var(--color-accent-brass); } .tbcs-filters__field select:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; border-color: var(--color-accent-brass); } /* =================================== FILTER BAR — EDITOR'S CHOICE SPOTLIGHT =================================== */ .tbcs-filters__spotlight { display: flex; justify-content: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px dashed var(--color-border-divider); } .tbcs-filters__spotlight-toggle { position: relative; display: inline-flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1.5rem; background-color: var(--color-surface-background); border: 1px solid var(--color-accent-brass); border-radius: 999px; cursor: pointer; transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .tbcs-filters__spotlight-toggle:hover { background-color: rgba(184, 155, 109, 0.18); box-shadow: 0 8px 18px rgba(184, 155, 109, 0.3); transform: translateY(-2px); } .tbcs-filters__spotlight-toggle:has(input:checked):hover { background-color: var(--color-state-hover); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); } .tbcs-filters__spotlight-toggle input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .tbcs-filters__spotlight-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-accent-brass); transition: color 0.25s ease; } .tbcs-filters__spotlight-text { display: flex; flex-direction: column; gap: 0.1rem; max-width: 220px; line-height: 1.3; } .tbcs-filters__spotlight-title { font-family: var(--font-heading-section); font-weight: 600; font-size: 0.95rem; color: var(--color-text-heading); transition: color 0.25s ease; } .tbcs-filters__spotlight-desc { font-family: var(--font-body-default); font-style: italic; font-size: 0.78rem; color: var(--color-text-body-muted); transition: color 0.25s ease; } .tbcs-filters__spotlight-toggle:has(input:checked) { background-color: var(--color-accent-brass); } .tbcs-filters__spotlight-toggle:has(input:checked) .tbcs-filters__spotlight-icon, .tbcs-filters__spotlight-toggle:has(input:checked) .tbcs-filters__spotlight-title, .tbcs-filters__spotlight-toggle:has(input:checked) .tbcs-filters__spotlight-desc { color: var(--color-text-heading-on-contrast); } .tbcs-filters__spotlight-toggle:has(input:focus-visible) { outline: 2px solid var(--color-state-hover); outline-offset: 3px; } /* =================================== FILTER BAR — ACTIONS FOOTER =================================== */ .tbcs-filters__actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--color-border-divider); } .tbcs-filters__submit { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 2.25rem; background-color: var(--color-accent-brass); color: var(--color-text-heading-on-contrast); font-family: var(--font-ui-labels); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; border: none; border-radius: 2px; cursor: pointer; transition: background-color 0.25s ease, transform 0.25s ease; } .tbcs-filters__submit:hover { background-color: var(--color-state-hover); transform: translateY(-2px); } .tbcs-filters__submit:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 3px; } .tbcs-filters__clear { font-family: var(--font-body-default); font-size: 0.82rem; color: var(--color-text-body-muted); text-decoration: underline; text-underline-offset: 2px; } .tbcs-filters__clear:hover { color: var(--color-accent-brass); } @media (prefers-reduced-motion: reduce) { .tbcs-filters__field select, .tbcs-filters__spotlight-toggle, .tbcs-filters__spotlight-icon, .tbcs-filters__spotlight-title, .tbcs-filters__spotlight-desc, .tbcs-filters__submit { transition: none; } } .tbcs-merch__price-block { margin-top: 0.25rem; } .tbcs-merch__price-note { margin: 0.15rem 0 0; font-family: var(--font-body-default); font-style: italic; font-size: 0.75rem; color: var(--color-text-body-muted); } /* =================================== SUBJECT ARCHIVE — HERO =================================== */ .tbcs-subject-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(280px, 45vw, 460px); padding: clamp(1.5rem, 5vw, 3rem); overflow: hidden; } .tbcs-subject-hero--no-image { background: radial-gradient(ellipse at top, var(--color-brand-primary) 0%, var(--color-surface-background) 75%); } .tbcs-subject-hero__media { position: absolute; inset: 0; } .tbcs-subject-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; } .tbcs-subject-hero__overlay { position: absolute; inset: 0; background: linear-gradient( to top, var(--color-surface-background) 0%, rgba(26, 26, 26, 0.55) 45%, rgba(26, 26, 26, 0.05) 85% ); } .tbcs-subject-hero__content { position: relative; width: 100%; max-width: 1200px; margin-inline: auto; text-align: center; } .tbcs-subject-hero__eyebrow { display: inline-block; margin-bottom: 0.6rem; font-family: var(--font-ui-labels); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-brass); } .tbcs-subject-hero__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 3vw, 3.25rem); letter-spacing: 0.02em; color: var(--color-text-heading); text-wrap: balance; } .tbcs-subject-hero__tagline { margin: clamp(0.5rem, 1.5vw, 0.85rem) auto 0; max-width: 42ch; font-family: var(--font-body-default); font-style: italic; font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.3rem); color: var(--color-text-body); text-wrap: balance; } /* =================================== SUBJECT ARCHIVE — INTRO =================================== */ .tbcs-subject-intro { padding-block: clamp(2rem, 5vw, 3rem); padding-inline: clamp(1.25rem, 5vw, 2rem); } .tbcs-subject-intro__text { max-width: 640px; margin-inline: auto; text-align: center; font-family: var(--font-body-default); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem); line-height: 1.75; color: var(--color-text-body); } /* =================================== SUBJECT ARCHIVE — LISTING Reuses .tbcs-book-grid from the Books build =================================== */ .tbcs-subject-listing { padding-block: clamp(2.5rem, 6vw, 4rem); padding-inline: clamp(1.25rem, 5vw, 2rem); } .tbcs-subject-listing__inner { max-width: 1200px; margin-inline: auto; } .tbcs-subject-listing__empty { text-align: center; font-family: var(--font-body-default); font-style: italic; color: var(--color-text-body-muted); } /* =================================== SUBJECT ARCHIVE — OTHER SUBJECTS NAV =================================== */ .tbcs-subject-nav { padding-block: clamp(2.5rem, 6vw, 3.5rem); padding-inline: clamp(1.25rem, 5vw, 2rem); border-top: 1px solid var(--color-border-divider); } .tbcs-subject-nav__inner { max-width: 900px; margin-inline: auto; text-align: center; } .tbcs-subject-nav__label { margin: 0 0 1rem; font-family: var(--font-ui-labels); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-body-muted); } .tbcs-subject-nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem; margin: 0; padding: 0; list-style: none; } .tbcs-subject-nav__link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.1rem; font-family: var(--font-heading-section); font-weight: 600; font-size: 0.95rem; color: var(--color-text-body); text-decoration: none; border: 1px solid var(--color-border-divider); border-radius: 999px; transition: border-color 0.25s ease, color 0.25s ease; } .tbcs-subject-nav__link:hover { border-color: var(--color-accent-brass); color: var(--color-state-hover); } .tbcs-subject-nav__link:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .tbcs-subject-nav__link { transition: none; } } .tbcs-listing-note { margin: 0 0 clamp(1.5rem, 4vw, 2rem); text-align: center; font-family: var(--font-body-default); font-style: italic; font-size: 0.85rem; color: var(--color-text-body-muted); } /* =================================== SINGLE BOOK — OTHER EDITIONS (horizontal carousel) Reuses the existing Book Card, sized smaller and laid out as a scroll-snap strip instead of a grid. =================================== */ .tbcs-editions-strip { display: flex; gap: clamp(1rem, 3vw, 1.25rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0.25rem; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; scrollbar-width: none; -ms-overflow-style: none; } .tbcs-editions-strip::-webkit-scrollbar { display: none; } .tbcs-editions-strip .tbcs-book-card { flex: 0 0 clamp(125px, 32vw, 155px); width: clamp(125px, 32vw, 155px); scroll-snap-align: start; } .tbcs-editions-strip .tbcs-book-card__body { padding: 0.6rem; gap: 0.25rem; } .tbcs-editions-strip .tbcs-book-card__title { font-size: 0.82rem; } .tbcs-editions-strip .tbcs-book-card__author, .tbcs-editions-strip .tbcs-book-card__price { font-size: 0.72rem; } /* =================================== EDITIONS STRIP — DESKTOP SCROLL ARROWS Only shown to real mouse/desktop users (touch already swipes naturally). Keyboard fallback: the strip itself is focusable and arrow-key scrollable. =================================== */ .tbcs-editions-strip-wrap { position: relative; } .tbcs-editions-strip:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 3px; border-radius: 4px; } .tbcs-editions-strip__arrow { display: none; position: absolute; top: 50%; z-index: 3; align-items: center; justify-content: center; width: 52px; height: 52px; background-color: var(--color-surface-background); color: var(--color-accent-brass); border: 1.5px solid var(--color-accent-brass); border-radius: 50%; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transform: translateY(-50%); transition: background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.25s ease; } .tbcs-editions-strip__arrow svg { width: 24px; height: 24px; } .tbcs-editions-strip__arrow--prev { left: -20px; } .tbcs-editions-strip__arrow--next { right: -20px; } .tbcs-editions-strip__arrow:hover { background-color: var(--color-accent-brass); color: var(--color-text-heading-on-contrast); border-color: var(--color-accent-brass); transform: translateY(-50%) scale(1.08); } .tbcs-editions-strip__arrow:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; } .tbcs-editions-strip__arrow[disabled] { opacity: 0; pointer-events: none; } @media (hover: hover) and (pointer: fine) { .tbcs-editions-strip__arrow { display: flex; } } @media (prefers-reduced-motion: reduce) { .tbcs-editions-strip__arrow { transition: none; } } /* =================================== HOMEPAGE — COMING SOON Reuses the .tbcs-editions-strip carousel + Book Card, with a small date badge added per item, scoped to this section only. =================================== */ .tbcs-home-coming-soon { padding-block: clamp(3rem, 7vw, 5rem); padding-inline: clamp(1.25rem, 5vw, 2rem); } .tbcs-home-coming-soon__header { text-align: center; max-width: 640px; margin: 0 auto clamp(2rem, 5vw, 3rem); } .tbcs-home-coming-soon__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem); color: var(--color-text-heading); text-wrap: balance; } .tbcs-home-coming-soon__subtitle { margin: 0.6rem 0 0; font-family: var(--font-body-default); font-style: italic; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem); color: var(--color-text-body-muted); } .tbcs-home-coming-soon .tbcs-editions-strip-wrap { max-width: 1200px; margin-inline: auto; } .tbcs-coming-soon-item { position: relative; flex: 0 0 clamp(125px, 32vw, 155px); width: clamp(125px, 32vw, 155px); } .tbcs-coming-soon-item .tbcs-book-card { width: 100%; } .tbcs-coming-soon-item__date { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 0.2rem 0.6rem; background-color: var(--color-surface-background); color: var(--color-accent-brass); font-family: var(--font-ui-labels); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--color-accent-brass); border-radius: 4px; pointer-events: none; } .tbcs-home-coming-soon__cta { margin: clamp(2rem, 5vw, 3rem) 0 0; text-align: center; } .tbcs-book__pubdate { margin: 0.35rem 0 0; font-family: var(--font-body-default); font-size: 0.9rem; color: var(--color-text-body); } .tbcs-book__pubdate-label { margin-right: 0.35rem; color: var(--color-text-body-muted); } .tbcs-book__coming-soon { display: inline-flex; align-items: center; margin-left: 0.6rem; padding: 0.18rem 0.6rem; background-color: var(--color-accent-brass); color: var(--color-text-heading-on-contrast); font-family: var(--font-ui-labels); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 3px; } /* =================================== HOMEPAGE — EXPLICIT SECTION BACKGROUNDS Deliberate ABAB alternation across every section after the Hero, so reordering or adding sections can never silently break the rhythm. =================================== */ .tbcs-home-collections { background-color: var(--color-surface-background); } .tbcs-home-coming-soon { background-color: var(--color-surface-card); } .tbcs-home-blog { background-color: var(--color-surface-background); } .tbcs-home-shop { background-color: var(--color-surface-card); } /* =================================== READING ROOM — HERO =================================== */ .tbcs-reading-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(320px, 50vw, 480px); padding: clamp(1.5rem, 5vw, 3rem); overflow: hidden; } .tbcs-reading-hero--no-image { background: radial-gradient(ellipse at top, var(--color-brand-primary) 0%, var(--color-surface-background) 75%); } .tbcs-reading-hero__media { position: absolute; inset: 0; } .tbcs-reading-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; } .tbcs-reading-hero__overlay { position: absolute; inset: 0; background: linear-gradient( to top, var(--color-surface-background) 0%, rgba(26, 26, 26, 0.6) 45%, rgba(26, 26, 26, 0.1) 85% ); } .tbcs-reading-hero__content { position: relative; width: 100%; max-width: 720px; margin-inline: auto; text-align: center; } .tbcs-reading-hero__title { margin: 0; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(1.9rem, 1.4rem + 2.5vw, 3rem); color: var(--color-text-heading); text-wrap: balance; } .tbcs-reading-hero__author { margin: 0.4rem 0 0; font-family: var(--font-body-default); font-style: italic; font-size: 1.1rem; color: var(--color-text-body); } .tbcs-reading-excerpt { max-width: 720px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 2rem) clamp(1.25rem, 5vw, 2rem) 0; } .tbcs-reading-excerpt__text { margin: 0; text-align: center; font-family: var(--font-body-default); font-style: italic; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); line-height: 1.7; color: var(--color-text-body); text-wrap: balance; } /* =================================== READING ROOM — DISCLOSURE =================================== */ .tbcs-reading-disclosure { max-width: 720px; margin: 0 auto; padding: clamp(1.25rem, 4vw, 1.75rem) clamp(1.25rem, 5vw, 2rem) clamp(1.5rem, 4vw, 2rem); } .tbcs-reading-disclosure__text { margin: 0; padding: 0.85rem 1.1rem; background-color: var(--color-surface-card); border-left: 3px solid var(--color-accent-brass); border-radius: 4px; font-family: var(--font-body-default); font-style: italic; font-size: 0.82rem; line-height: 1.6; color: var(--color-text-body-muted); } .tbcs-reading-disclosure__text a { color: var(--color-accent-brass); text-decoration: underline; text-underline-offset: 2px; } .tbcs-reading-disclosure__text a:hover { color: var(--color-state-hover); } /* =================================== READING ROOM — NO-JS BASELINE Every chapter visible, stacked, fully readable without JavaScript. =================================== */ .tbcs-chapter__inner { max-width: 720px; margin-inline: auto; font-family: var(--font-body-default); font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem); line-height: 1.8; color: var(--color-text-body); } .tbcs-chapter__title { margin: 0 0 1.5rem; text-align: center; font-family: var(--font-heading-display); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); color: var(--color-text-heading); text-wrap: balance; } .tbcs-chapter:not(:first-child) .tbcs-chapter__inner { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--color-border-divider); } .js .tbcs-chapter:not(:first-child) .tbcs-chapter__inner { margin-top: 0; padding-top: 0; border-top: none; } .tbcs-chapter__body p { margin: 0 0 1.4em; } .tbcs-chapter__body > p:first-of-type::first-letter { float: left; font-family: var(--font-heading-display); font-weight: 700; font-size: 4.2em; line-height: 0.78; padding-right: 0.09em; padding-top: 0.06em; color: var(--color-accent-brass); } /* =================================== READING ROOM — TABLE OF CONTENTS Native

— works with zero JavaScript. =================================== */ .tbcs-reader__toc { max-width: 720px; margin: 0 auto clamp(1.5rem, 4vw, 2rem); padding-inline: clamp(1.25rem, 5vw, 2rem); text-align: center; } .tbcs-reader__toc-hint { max-width: 720px; margin: 0 auto 0.6rem; padding-inline: clamp(1.25rem, 5vw, 2rem); text-align: center; font-family: var(--font-body-default); font-style: italic; font-size: 0.85rem; color: var(--color-text-body-muted); } .tbcs-reader__toc-summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.25rem; font-family: var(--font-ui-labels); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-brass); background-color: var(--color-surface-card); border: 1px solid var(--color-border-divider); border-radius: 4px; cursor: pointer; } .tbcs-reader__toc-summary:hover { border-color: var(--color-accent-brass); } .tbcs-reader__toc-list { margin: 0.75rem 0 0; padding: 1rem 1.25rem; list-style: none; background-color: var(--color-surface-card); border: 1px solid var(--color-border-divider); border-radius: 4px; max-height: 320px; overflow-y: auto; } .tbcs-reader__toc-list li + li { margin-top: 0.4rem; } .tbcs-reader__toc-link { display: block; padding: 0.4rem 0.5rem; font-family: var(--font-body-default); font-size: 0.92rem; color: var(--color-text-body); text-decoration: none; border-radius: 3px; transition: background-color 0.2s ease, color 0.2s ease; } .tbcs-reader__toc-link:hover { background-color: var(--color-surface-background); color: var(--color-accent-brass); } .tbcs-reader__toc-link:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; } /* =================================== READING ROOM — JS-ENHANCED: one chapter visible at a time, full continuous text, no pagination inside it. =================================== */ .js .tbcs-reader__frame { max-width: 800px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem); background-color: var(--color-surface-card); border: 1px solid var(--color-border-divider); border-radius: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); } .js .tbcs-chapter { display: none; } .js .tbcs-chapter.is-active { display: block; } .tbcs-reader__nav-btn[disabled] { opacity: 0.35; cursor: not-allowed; } /* =================================== READING ROOM — CONTROLS =================================== */ .tbcs-reader__controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; max-width: 900px; margin: clamp(1.5rem, 4vw, 2rem) auto clamp(2.5rem, 6vw, 4rem); padding-inline: clamp(1.25rem, 5vw, 2rem); } .tbcs-reader__nav-btn { display: none; } .js .tbcs-reader__nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: var(--color-accent-brass); background-color: var(--color-surface-background); border: 1px solid var(--color-border-divider); border-radius: 50%; cursor: pointer; transition: background-color 0.25s ease, border-color 0.25s ease; } .tbcs-reader__nav-btn svg { width: 18px; height: 18px; } .js .tbcs-reader__nav-btn:hover { background-color: var(--color-accent-brass); color: var(--color-text-heading-on-contrast); border-color: var(--color-accent-brass); } .js .tbcs-reader__nav-btn:focus-visible { outline: 2px solid var(--color-state-hover); outline-offset: 2px; } .tbcs-reader__progress { display: none; } .js .tbcs-reader__progress { display: inline-block; font-family: var(--font-ui-labels); font-size: 0.8rem; letter-spacing: 0.03em; color: var(--color-text-body-muted); white-space: nowrap; }