@import url('tab-bar-variants.css');
/* tab-menu.css — tab menu widget */
/* tab-menu.css START */
.tab-menu-widget { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; --tab-accent: var(--site-accent, #2563eb); --tab-accent-soft: color-mix(in srgb, var(--tab-accent) 11%, var(--site-surface, #f8fafc)); --tab-accent-glow: color-mix(in srgb, var(--tab-accent) 24%, transparent); --tab-border: color-mix(in srgb, var(--site-border, #e2e8f0) 88%, var(--tab-accent) 12%); --tab-track: color-mix(in srgb, var(--site-surface, #f8fafc) 94%, var(--site-bg, #fff)); --tab-text: var(--widget-body-text, var(--site-on-surface, var(--site-text, #0f172a))); --tab-muted: var(--widget-body-muted, var(--site-on-surface-muted, var(--site-muted, #64748b))); --tab-panel-bg: var(--site-surface, #f8fafc); --tab-panel-bg-soft: color-mix(in srgb, var(--tab-panel-bg) 88%, var(--site-bg, #fff)); --tab-radius: 16px; --tab-ease: cubic-bezier(0.22, 1, 0.36, 1); --board-cat-accent: var(--tab-accent); --board-cat-accent-soft: var(--tab-accent-soft); --board-cat-accent-glow: var(--tab-accent-glow); --board-cat-border: var(--tab-border); --board-cat-track: var(--tab-track); --board-cat-text: var(--tab-text); --board-cat-muted: var(--tab-muted); --board-cat-radius: 14px; }
.tab-menu-header { margin-bottom: clamp(12px, 2.5vw, 18px); }
.tab-menu-heading { margin: 0; font-size: clamp(1.08rem, 2.4vw, 1.32rem); font-weight: 700; letter-spacing: -0.03em; color: var(--tab-text); line-height: 1.25; }
.tab-menu-bar { margin-bottom: 0; position: relative; }
.tab-menu-tab.is-active { color: var(--tab-accent); }
.tab-menu-panels { background: var(--tab-panel-bg); border-radius: 0 0 var(--tab-radius) var(--tab-radius); box-sizing: border-box; color: var(--tab-text); border: 1px solid var(--tab-border); box-shadow: 0 12px 32px color-mix(in srgb, var(--site-text, #0f172a) 6%, transparent); }
.tab-menu-panel { padding: clamp(20px, 3vw, 28px) clamp(18px, 2.8vw, 26px); box-sizing: border-box; color: var(--tab-text); line-height: var(--site-line-height, 1.8); animation: tab-menu-panel-in 0.28s var(--tab-ease); background: transparent; }
.tab-menu-panel.grid-widget-html.sun-editor-editable,
.tab-menu-panel-body.grid-widget-html.sun-editor-editable,
.has-tab-menu .tab-menu-panel-body.sun-editor-editable { --se-edit-font-color: var(--tab-text); --se-edit-font-pre: var(--tab-muted); --se-edit-font-quote: var(--tab-muted); --se-edit-background-color: transparent; --se-edit-background-pre: color-mix(in srgb, var(--tab-panel-bg) 88%, var(--site-bg, #fff)); --se-edit-border-light: var(--tab-border); --se-edit-border-dark: var(--tab-border); --se-edit-border-dark-n1: var(--tab-border); --se-edit-border-dark-n2: var(--tab-border); --se-edit-border-table: var(--tab-border); --se-edit-anchor: var(--site-link, var(--tab-accent)); --se-edit-anchor-on-font: var(--site-link, var(--tab-accent)); --se-edit-anchor-on-back: color-mix(in srgb, var(--tab-accent) 14%, transparent); --se-edit-hr-color: var(--tab-border); --se-main-font-color: var(--tab-text); color: var(--tab-text); background-color: transparent; }
.tab-menu-panel :where(p, li, span, div, h1, h2, h3, h4, h5, h6):not([style*="color"]) { color: inherit; }
.tab-menu-panel a:not([style*="color"]) { color: var(--site-link, var(--tab-accent)); }
.tab-menu-panel[hidden] { display: none !important; }
.tab-menu-panel-empty { margin: 0; color: var(--tab-muted); font-size: 0.92rem; }
.tab-menu-panel img { max-width: 100%; height: auto; border-radius: 8px; }
.grid-widget.has-tab-menu { padding: 14px; box-sizing: border-box; }
.grid-widget.is-widget-full-width.has-tab-menu { padding: 0; }
.grid-widget.is-widget-bg-set.has-tab-menu .tab-menu-widget { --tab-panel-bg: color-mix(in srgb, var(--widget-body-text, var(--site-text)) 6%, transparent); --tab-panel-bg-soft: color-mix(in srgb, var(--widget-body-text, var(--site-text)) 10%, transparent); --tab-border: color-mix(in srgb, var(--widget-body-text, var(--site-text)) 20%, transparent); --board-cat-border: var(--tab-border); }
@keyframes tab-menu-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.tab-menu-widget.is-variant-underline .tab-menu-panels { border-top: 0; border-radius: 0 0 var(--tab-radius) var(--tab-radius); }
.tab-menu-widget.is-variant-pill .tab-menu-panels { border-radius: var(--tab-radius); margin-top: 16px; }
.tab-menu-widget.is-variant-glass .tab-menu-panels { border-radius: var(--tab-radius); margin-top: 14px; border-color: color-mix(in srgb, var(--tab-border) 70%, transparent); }
.tab-menu-widget.is-variant-segment .tab-menu-panels { border-radius: var(--tab-radius); margin-top: 14px; }
.tab-menu-widget.is-variant-minimal .tab-menu-panels { border-radius: var(--tab-radius); margin-top: 12px; border-color: color-mix(in srgb, var(--tab-border) 75%, transparent); box-shadow: 0 8px 24px color-mix(in srgb, var(--site-text, #0f172a) 5%, transparent); }
@media (max-width: 768px) {
.tab-menu-panel { padding: 18px 16px; }
.responsive-grid.page-grid > .grid-widget.has-tab-menu,
.grid-widget.has-tab-menu { min-width: 0; max-width: 100%; overflow-x: hidden; }
.grid-widget.is-widget-full-width.has-tab-menu { max-width: 100vw; overflow-x: hidden; }
.tab-menu-widget.is-variant-underline .tab-menu-bar,
.tab-menu-widget.is-variant-segment .tab-menu-bar,
.tab-menu-widget.is-variant-minimal .tab-menu-bar { align-items: stretch; }
}
/* tab-menu.css END */