/* Seasonal Commerce Theme - Uses CSS variables set on in `frontend/layouts/app.blade.php` - Scoped to `.seasonal-commerce` so it won't affect non-commerce pages */ .seasonal-commerce { --commerce-accent: var(--season-accent, #4CAF50); --commerce-accent-2: var(--season-accent-2, #81C784); --commerce-accent-rgb: var(--season-accent-rgb, 76, 175, 80); --commerce-soft: var(--season-soft, #E6F4EA); --commerce-soft-2: var(--season-soft-2, #d4edda); --commerce-border: rgba(var(--commerce-accent-rgb), 0.18); --commerce-ring: rgba(var(--commerce-accent-rgb), 0.18); } /* Global seasonal utilities (used by commerce components like cart sidebar) */ .text-seasonal { color: var(--season-accent, #4CAF50) !important; } .bg-seasonal-soft { background-color: var(--season-soft, #E6F4EA) !important; } .border-seasonal { border-color: rgba(var(--season-accent-rgb, 76, 175, 80), 0.18) !important; } .btn-seasonal { background-color: var(--season-accent, #4CAF50) !important; border-color: var(--season-accent, #4CAF50) !important; color: #fff !important; } .btn-seasonal:hover, .btn-seasonal:focus { background-color: var(--season-accent-2, #81C784) !important; border-color: var(--season-accent-2, #81C784) !important; color: #fff !important; } .btn-outline-seasonal { color: var(--season-accent, #4CAF50) !important; border-color: rgba(var(--season-accent-rgb, 76, 175, 80), 0.55) !important; background: transparent !important; } .btn-outline-seasonal:hover, .btn-outline-seasonal:focus { color: #fff !important; background-color: var(--season-accent, #4CAF50) !important; border-color: var(--season-accent, #4CAF50) !important; } /* Lightweight page section styling */ .seasonal-commerce .commerce-hero { background: linear-gradient(135deg, var(--commerce-soft) 0%, var(--commerce-soft-2) 100%); border: 1px solid var(--commerce-border); } /* Override Bootstrap "primary" inside commerce scope to follow seasonal accent */ .seasonal-commerce .text-primary { color: var(--commerce-accent) !important; } .seasonal-commerce .border-primary { border-color: var(--commerce-accent) !important; } .seasonal-commerce .bg-primary { background-color: var(--commerce-accent) !important; } .seasonal-commerce .badge.bg-primary { background-color: var(--commerce-accent) !important; } .seasonal-commerce .btn-primary { background-color: var(--commerce-accent) !important; border-color: var(--commerce-accent) !important; } .seasonal-commerce .btn-primary:hover, .seasonal-commerce .btn-primary:focus { background-color: var(--commerce-accent-2) !important; border-color: var(--commerce-accent-2) !important; } .seasonal-commerce .btn-outline-primary { color: var(--commerce-accent) !important; border-color: var(--commerce-accent) !important; } .seasonal-commerce .btn-outline-primary:hover, .seasonal-commerce .btn-outline-primary:focus { color: #fff !important; background-color: var(--commerce-accent) !important; border-color: var(--commerce-accent) !important; } /* Focus rings consistent with home */ .seasonal-commerce .form-control:focus, .seasonal-commerce .form-select:focus, .seasonal-commerce .btn:focus { border-color: rgba(var(--commerce-accent-rgb), 0.55) !important; box-shadow: 0 0 0 0.2rem var(--commerce-ring) !important; } /* Tabs/accents */ .seasonal-commerce .nav-tabs .nav-link.active { color: var(--commerce-accent) !important; border-bottom-color: transparent !important; } .seasonal-commerce .nav-tabs .nav-link:hover { color: var(--commerce-accent) !important; } /* Table "primary" highlight row */ .seasonal-commerce .table-primary { --bs-table-bg: rgba(var(--commerce-accent-rgb), 0.10); --bs-table-color: var(--bs-body-color); } /* Cards: subtler borders */ .seasonal-commerce .card { border-color: rgba(0, 0, 0, 0.08); } .seasonal-commerce .card-header { border-bottom-color: rgba(0, 0, 0, 0.06); } /* ============================================================================= Blog article detail (`.blog-show-page`) — default, pillar, solar-term Relies on `body` inline CSS variables: --season-accent, --season-soft, etc. ============================================================================= */ /* —— Base: featured image + sticky sidebar —— */ .blog-show-page .blog-featured-img { display: block; width: 100%; max-width: 100%; height: auto; max-height: min(88vh, 1000px); } .blog-show-page .blog-show-sidebar { position: static; } @media (min-width: 992px) { .blog-show-page .blog-show-sidebar { position: sticky; top: 1.25rem; align-self: flex-start; } } /* —— Pillar: reading width, H2 rhythm, reading progress —— */ .blog-show-page--pillar .article-content--pillar { max-width: 46rem; margin-left: auto; margin-right: auto; font-size: 1.0625rem; line-height: 1.78; color: #2d2d2d; } .blog-show-page--pillar .article-content--pillar > h2 { font-size: 1.35rem; padding-bottom: 0.5rem; margin-top: 2.25rem; border-bottom: 1px solid rgba(var(--season-accent-rgb, 76, 175, 80), 0.2); letter-spacing: -0.01em; } .blog-show-page--pillar .article-content--pillar > h2:first-of-type { margin-top: 0; } .blog-show-page--pillar .article-content--pillar > h3 { font-size: 1.15rem; margin-top: 1.5rem; color: #333; } .article-read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1080; pointer-events: none; background: transparent; } .article-read-progress__bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--season-accent, #4CAF50), var(--season-accent-2, #81C784)); transition: width 0.12s ease-out; } /* TOC: desktop sidebar + mobile sheet */ .article-toc .article-toc-link { display: inline-block; padding: 0.3rem 0 0.3rem 0.5rem; margin-left: -0.5rem; color: #444; border-left: 3px solid transparent; line-height: 1.4; border-radius: 0 4px 4px 0; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .article-toc .article-toc-link:hover, .article-toc .article-toc-link:focus-visible { color: var(--season-accent, #4CAF50); background: rgba(var(--season-accent-rgb, 76, 175, 80), 0.06); border-left-color: rgba(var(--season-accent-rgb, 76, 175, 80), 0.45); outline: none; } .article-toc li.is-active > .article-toc-link { border-left-color: var(--season-accent, #4CAF50); color: var(--season-accent, #4CAF50); font-weight: 600; background: rgba(var(--season-accent-rgb, 76, 175, 80), 0.08); } .article-toc-mobile__toggle { background: #fff; color: #333; min-height: 3rem; -webkit-tap-highlight-color: transparent; } .article-toc-mobile__toggle:hover, .article-toc-mobile__toggle:focus-visible { background: rgba(var(--season-accent-rgb, 76, 175, 80), 0.06); color: #222; outline: none; box-shadow: none; } .article-toc-mobile__toggle .fa-chevron-down { transition: transform 0.2s ease; color: #888; } .article-toc-mobile__toggle:not(.collapsed) .fa-chevron-down { transform: rotate(180deg); color: var(--season-accent, #4CAF50); } @media (min-width: 992px) { .article-toc-mobile { display: none !important; } } /* —— Shared article body —— */ .blog-show-page .article-content { font-size: 1.0625rem; line-height: 1.75; color: #333; } .blog-show-page .article-content h1, .blog-show-page .article-content h2, .blog-show-page .article-content h3, .blog-show-page .article-content h4, .blog-show-page .article-content h5, .blog-show-page .article-content h6 { margin-top: 1.75rem; margin-bottom: 0.75rem; font-weight: 600; scroll-margin-top: 5.5rem; } .blog-show-page .article-content > h2:first-child, .blog-show-page .article-content > h3:first-child, .blog-show-page .article-content > h4:first-child { margin-top: 0; } .blog-show-page .article-content p { margin-bottom: 1.25rem; } .blog-show-page .article-content p:has(> img:only-child) { margin-top: 0; margin-bottom: 0.75rem; line-height: 0; } .blog-show-page .article-content p:has(> img:only-child) img { margin: 0.35rem 0; } .blog-show-page .article-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 0.5rem 0 0.75rem; display: block; } .blog-show-page .article-content > img:first-child, .blog-show-page .article-content > figure:first-child { margin-top: 0; } .blog-show-page .article-content figure { margin: 0.5rem 0 0.75rem; } .blog-show-page .article-content figure img { margin: 0; } .blog-show-page .article-content h2 + img, .blog-show-page .article-content h3 + img, .blog-show-page .article-content h4 + img, .blog-show-page .article-content h2 + figure, .blog-show-page .article-content h3 + figure, .blog-show-page .article-content h4 + figure, .blog-show-page .article-content p + img { margin-top: 0.35rem; } .blog-show-page .article-content ul, .blog-show-page .article-content ol { margin-bottom: 1.5rem; padding-left: 1.35rem; } .blog-show-page .article-content li { margin-bottom: 0.35rem; } .blog-show-page .article-content li::marker { color: rgba(var(--season-accent-rgb, 76, 175, 80), 0.75); } .blog-show-page .article-content blockquote { border-left: 4px solid var(--season-accent, #4CAF50); padding: 0.75rem 0 0.75rem 1.5rem; margin: 1.5rem 0; font-style: italic; color: #555; background: rgba(var(--season-accent-rgb, 76, 175, 80), 0.04); border-radius: 0 8px 8px 0; } .blog-show-page .article-content code { background-color: #f0f0f0; padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.9em; } .blog-show-page .article-content pre { background-color: #f4f4f4; padding: 1rem; border-radius: 8px; overflow-x: auto; margin-bottom: 1.5rem; border: 1px solid rgba(0, 0, 0, 0.06); } .blog-show-page .article-content pre code { background: none; padding: 0; } /* —— Solar-term: lead paragraph —— */ .blog-show-page--solar_term .article-content--solar-term .lead, .blog-show-page--solar_term .article-content--solar-term > p:first-of-type { font-size: 1.125rem; line-height: 1.75; color: #2a2a2a; } .blog-show-page--solar_term .article-content--solar-term > h2 { font-size: 1.3rem; margin-top: 2rem; color: #222; } .blog-show-page--solar_term .article-content--solar-term > h2:first-of-type { margin-top: 0; } /* —— Editor utilities: callout, micro-plan, sensory, disclaimer (HTML 中 class 即可) —— */ .blog-show-page .article-content .article-callout { margin: 1.5rem 0; padding: 1rem 1.15rem 1.1rem 1.15rem; border-left: 4px solid var(--season-accent, #4CAF50); background: linear-gradient(90deg, rgba(var(--season-accent-rgb, 76, 175, 80), 0.08) 0%, rgba(255, 255, 255, 0) 40%); border-radius: 0 10px 10px 0; font-size: 0.98rem; line-height: 1.65; color: #3a3a3a; } .blog-show-page .article-content .article-callout p:last-child { margin-bottom: 0; } .blog-show-page .article-content .article-callout__label { display: block; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--season-accent, #4CAF50); margin-bottom: 0.5rem; } .blog-show-page .article-content .article-micro-plan { margin: 1.75rem 0; padding: 1.25rem 1.25rem 1.35rem; border: 1px solid rgba(var(--season-accent-rgb, 76, 175, 80), 0.22); border-radius: 12px; background: rgba(var(--season-accent-rgb, 76, 175, 80), 0.06); } .blog-show-page .article-content .article-micro-plan__title { font-size: 1rem; font-weight: 700; margin: 0 0 1rem; color: #222; letter-spacing: -0.02em; } .blog-show-page .article-content .article-micro-plan__list { list-style: none; padding-left: 0; margin: 0; } .blog-show-page .article-content .article-micro-plan__list > li { padding: 0.65rem 0; border-top: 1px dashed rgba(0, 0, 0, 0.08); margin-bottom: 0; } .blog-show-page .article-content .article-micro-plan__list > li:first-child { border-top: none; padding-top: 0; } .blog-show-page .article-content .article-micro-plan__label { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--season-accent, #4CAF50); margin-bottom: 0.35rem; } .blog-show-page .article-content .article-sensory { margin: 1.5rem 0; } .blog-show-page .article-content .article-sensory__item { height: 100%; padding: 1rem 1.05rem; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.06); background: #fafafa; font-size: 0.97rem; line-height: 1.55; } .blog-show-page .article-content .article-sensory__tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: var(--season-accent, #4CAF50); padding: 0.2rem 0.5rem; border-radius: 4px; margin-bottom: 0.5rem; } .blog-show-page .article-content .article-disclaimer { margin-top: 1.75rem; padding: 0.9rem 1rem; font-size: 0.875rem; line-height: 1.55; color: #666; background: #f5f5f5; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.06); } /* —— Solar term strip (partial) —— */ .solar-term-strip { background: linear-gradient(135deg, var(--season-soft, #E6F4EA) 0%, rgba(255, 255, 255, 0.98) 100%); border: 1px solid rgba(var(--season-accent-rgb, 76, 175, 80), 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } .solar-term-strip__inner { padding: 1.3rem 1.4rem 1.35rem; } .solar-term-strip__eyebrow { letter-spacing: 0.08em; color: var(--season-accent, #4CAF50); } .solar-term-strip__title-en { font-size: 1.25rem; color: #1e1e1e; } .solar-term-strip__title-zh { font-family: 'Ma Shan Zheng', 'Montserrat', sans-serif; font-size: 1.55rem; color: #2c2c2c; } .solar-term-strip__badge { background: rgba(var(--season-accent-rgb, 76, 175, 80), 0.16) !important; color: #252525 !important; font-weight: 600; } .solar-term-strip__hint { line-height: 1.55; } /* —— FAQ block —— */ .article-faq__accordion .accordion-item { background: transparent; } .article-faq__accordion .accordion-button { font-size: 0.98rem; line-height: 1.45; padding-top: 0.95rem; padding-bottom: 0.95rem; } .article-faq__accordion .accordion-button:not(.collapsed) { background: rgba(var(--season-accent-rgb, 76, 175, 80), 0.09); color: #1a1a1a; box-shadow: none; } .article-faq__accordion .accordion-button.collapsed { background: #fff; color: #333; } .article-faq__accordion .accordion-button:focus { box-shadow: none; border-color: transparent; } .article-faq__accordion .accordion-button:focus-visible { outline: 2px solid rgba(var(--season-accent-rgb, 76, 175, 80), 0.5); outline-offset: -2px; } .article-faq__answer { font-size: 0.97rem; line-height: 1.65; color: #555; max-width: 52rem; } /* —— Related + category list —— */ .blog-show-page .list-group-borderless .list-group-item { border: none; padding: 0.5rem 0; } .blog-show-page .blog-related-item { transition: background 0.15s ease; border-radius: 10px; } .blog-show-page .blog-related-item:hover { background: rgba(var(--season-accent-rgb, 76, 175, 80), 0.07); } .blog-show-page .blog-related-title:hover { color: var(--season-accent, #4CAF50) !important; } /* —— Article meta row —— */ .blog-show-page .article-meta-row { gap: 0.25rem; border-bottom-color: #ececec !important; }