/* Blog Styles - Vocabito */ /* ── Breadcrumb ── */ .breadcrumb { padding: 5.5rem 0 0.8rem; font-size: 0.85rem; color: var(--text-muted); } .breadcrumb a { color: var(--primary-color); } .breadcrumb a:hover { text-decoration: underline; } /* ── Blog Listing Hero ── */ .blog-hero { padding: 7rem 0 3rem; text-align: center; } .blog-hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin-bottom: 0.8rem; } .blog-hero p { color: var(--text-muted); font-size: 1.1rem; max-width: 560px; margin: 0 auto; } /* ── Category Pills ── */ .category-filters { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin: 2rem 0 3rem; } .category-pill { padding: 0.5rem 1.2rem; border-radius: 2rem; border: 1.5px solid var(--glass-border); background: var(--card-bg); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: var(--font-sans); color: var(--text-muted); } .category-pill:hover, .category-pill.active { background: var(--primary-color); color: white; border-color: var(--primary-color); } /* ── Blog Card Grid ── */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; padding-bottom: 4rem; } .blog-card { background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: 2rem; backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); transition: all 0.3s; display: flex; flex-direction: column; } .blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); background: white; } .blog-card .card-category { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-color); margin-bottom: 0.8rem; } .blog-card h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.7rem; color: var(--text-main); } .blog-card .card-desc { color: var(--text-muted); font-size: 0.93rem; line-height: 1.55; flex: 1; } .blog-card .card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; font-size: 0.82rem; color: var(--text-muted); } .blog-card .read-more { color: var(--primary-color); font-weight: 600; font-size: 0.9rem; } /* ── Blog Post Layout ── */ .post-header { padding: 2rem 0 1.5rem; text-align: center; max-width: 780px; margin: 0 auto; } .post-category-label { display: inline-block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-color); margin-bottom: 0.8rem; } .post-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.15; margin-bottom: 1rem; } .post-meta { color: var(--text-muted); font-size: 0.88rem; } .post-content { max-width: 780px; margin: 0 auto; padding-bottom: 3rem; } .post-intro { font-size: 1.12rem; line-height: 1.7; color: var(--text-muted); margin-bottom: 2rem; } .post-content h2 { font-size: 1.6rem; font-weight: 700; margin: 2.5rem 0 1rem; color: var(--text-main); } .post-content h3 { font-size: 1.25rem; font-weight: 600; margin: 2rem 0 0.8rem; color: var(--text-main); } .post-content p { margin-bottom: 1.2rem; line-height: 1.7; color: var(--text-muted); } .post-content ul, .post-content ol { margin: 0.8rem 0 1.2rem 1.5rem; color: var(--text-muted); line-height: 1.7; } .post-content li { margin-bottom: 0.4rem; } .post-content dfn { font-style: normal; font-weight: 600; color: var(--text-main); } /* ── Vocab Table ── */ .vocab-table-wrapper { margin: 1.5rem 0 2rem; border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; background: var(--card-bg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); display: grid; grid-template-columns: 1fr 1fr auto; } .vocab-header { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; background: linear-gradient(135deg, rgba(224, 109, 79, 0.08), rgba(46, 141, 131, 0.06)); border-bottom: 1px solid var(--glass-border); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .vocab-header-text { display: contents; } .vocab-header-es { padding: 0.65rem 1rem 0.65rem 1.2rem; } .vocab-header-en { padding: 0.65rem 1rem; } .vocab-header-ph { padding: 0.65rem 1.2rem 0.65rem 1rem; text-align: right; } .vocab-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; transition: background 0.15s; border-bottom: 1px solid rgba(0, 0, 0, 0.04); } .vocab-row:last-child { border-bottom: none; } .vocab-row:nth-child(odd) { background: rgba(46, 141, 131, 0.025); } .vocab-row:hover { background: rgba(224, 109, 79, 0.06); } .vocab-text { display: contents; } .vocab-es { font-weight: 700; font-size: 1rem; color: var(--text-main); padding: 0.75rem 1rem 0.75rem 1.2rem; } .vocab-en { font-size: 0.9rem; color: var(--text-muted); padding: 0.75rem 1rem; } .vocab-audio-group { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-end; padding: 0.75rem 1.2rem 0.75rem 1rem; } .vocab-ph { display: flex; align-items: center; gap: 0.3rem; font-style: italic; font-size: 0.82rem; color: var(--accent-color); max-width: 220px; text-align: right; } .vocab-ph-icon { flex-shrink: 0; opacity: 0.75; } .audio-btn { width: 32px; height: 32px; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); cursor: pointer; transition: all 0.2s; position: relative; flex-shrink: 0; padding: 0; -webkit-appearance: none; appearance: none; } /* Play triangle via CSS */ .audio-btn::after { content: ''; position: absolute; top: 50%; left: 52%; transform: translate(-50%, -50%); width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent white; transition: all 0.15s; } /* Progress ring */ .audio-btn::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2.5px solid transparent; pointer-events: none; } .audio-btn:hover { transform: scale(1.1); box-shadow: 0 3px 12px rgba(224, 109, 79, 0.3); } /* Playing: triangle becomes square + ring spins */ .audio-btn.playing { background: linear-gradient(135deg, var(--accent-color), #3BA89E); } .audio-btn.playing::after { border: none; width: 9px; height: 9px; background: white; border-radius: 1.5px; left: 50%; } .audio-btn.playing::before { border-color: rgba(46, 141, 131, 0.2); border-top-color: var(--accent-color); animation: audio-spin var(--audio-duration, 1s) linear forwards; } @keyframes audio-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ── Tip Box ── */ .tip-box { margin: 1.5rem 0 2rem; padding: 1.3rem 1.5rem; border-radius: var(--radius-lg); border-left: 4px solid var(--accent-color); background: rgba(46, 141, 131, 0.07); } .tip-box.tip-warning { border-left-color: #E06D4F; background: rgba(224, 109, 79, 0.07); } .tip-label { display: block; font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-color); margin-bottom: 0.4rem; } .tip-warning .tip-label { color: var(--primary-color); } .tip-box p { margin-bottom: 0; color: var(--text-main); font-size: 0.95rem; } /* ── FAQ Section ── */ .faq-section { margin: 3rem 0; } .faq-section h2 { margin-bottom: 1.2rem; } .faq-item { border: 1px solid var(--glass-border); border-radius: var(--radius-lg); margin-bottom: 0.7rem; background: var(--card-bg); overflow: hidden; } .faq-item summary { padding: 1rem 1.3rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 1rem; color: var(--text-main); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 1.3rem; font-weight: 300; color: var(--primary-color); transition: transform 0.2s; } .faq-item[open] summary::after { content: '−'; } .faq-answer { padding: 0 1.3rem 1rem; } .faq-answer p { color: var(--text-muted); line-height: 1.65; } /* ── CTA Card ── */ .cta-card { margin: 2.5rem 0; padding: 2.5rem; background: linear-gradient(135deg, rgba(224, 109, 79, 0.1), rgba(46, 141, 131, 0.12)); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); text-align: center; } .cta-card h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.6rem; } .cta-card p { color: var(--text-muted); margin-bottom: 1.3rem; font-size: 1rem; } .cta-button img { height: 48px; } /* ── Related Posts ── */ .related-posts { margin: 3rem 0 2rem; padding-top: 2.5rem; border-top: 1px solid var(--glass-border); } .related-posts h2 { font-size: 1.4rem; margin-bottom: 1.5rem; } .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; } .related-card { background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 1.3rem; transition: all 0.2s; } .related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .related-card .card-category { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-color); } .related-card h3 { font-size: 1rem; font-weight: 600; margin: 0.4rem 0 0; line-height: 1.35; color: var(--text-main); } /* ── Widget Showcase ── */ .widget-showcase { margin: 2.5rem 0; padding: 1.8rem; background: linear-gradient(135deg, #FFF4E8, #FDE9D8); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); } .widget-showcase-inner { display: grid; grid-template-columns: auto 1fr; gap: 1.8rem; align-items: center; } /* ── Medium Widget Mock (iOS-accurate) ── */ .wm-widget { width: 320px; background: #FFF4E4; border-radius: 18px; padding: 14px 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13), 0 2px 6px rgba(0, 0, 0, 0.06); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', var(--font-sans); } /* Header row: word + speaker */ .wm-row-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; } .wm-word { font-family: 'New York', 'Georgia', var(--font-heading), serif; font-size: 1.55rem; font-weight: 700; color: #1E2323; line-height: 1.2; } .wm-btn-circle { width: 31px; height: 31px; border-radius: 50%; background: rgba(204, 138, 63, 0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: none; padding: 0; cursor: pointer; transition: all 0.2s; } .wm-btn-circle:hover { background: rgba(204, 138, 63, 0.22); transform: scale(1.08); } .wm-btn-circle.wm-playing { background: rgba(204, 138, 63, 0.28); animation: wm-pulse 0.6s ease-in-out; } @keyframes wm-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } /* Divider */ .wm-divider { height: 1px; background: rgba(204, 138, 63, 0.18); margin: 8px 40px 8px 0; } /* Pronunciation row */ .wm-row-pron { display: flex; align-items: center; gap: 5px; padding: 2px 0; } .wm-wave-icon { flex-shrink: 0; } .wm-pron-text { font-size: 0.88rem; font-weight: 600; font-style: italic; color: rgba(204, 138, 63, 0.86); line-height: 1; } /* Body row: translation + examples + refresh */ .wm-row-body { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .wm-body-left { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .wm-translation { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', var(--font-sans); font-size: 1.05rem; font-weight: 500; color: rgba(0, 0, 0, 0.7); line-height: 1.3; text-align: left; } .wm-example-target { font-size: 0.72rem; font-weight: 500; color: rgba(0, 0, 0, 0.55); line-height: 1.35; } .wm-example-source { font-size: 0.72rem; font-weight: 500; color: rgba(0, 0, 0, 0.46); line-height: 1.35; } .wm-btn-rect { width: 31px; height: 31px; border-radius: 8px; background: rgba(204, 138, 63, 0.12); border: 1px solid rgba(204, 138, 63, 0.28); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; padding: 0; cursor: pointer; transition: all 0.2s; } .wm-btn-rect:hover { background: rgba(204, 138, 63, 0.22); transform: scale(1.08); } .wm-btn-rect.wm-spinning svg { animation: wm-spin 0.4s ease-in-out; } @keyframes wm-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Widget content transitions */ .wm-word, .wm-pron-text, .wm-translation { transition: opacity 0.15s ease; } /* Showcase text side */ .widget-showcase-text h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.6rem; } .widget-showcase-text p { color: var(--text-muted); margin-bottom: 1.2rem; line-height: 1.6; } .widget-showcase-text .cta-button img { height: 44px; } @media (max-width: 768px) { .widget-showcase-inner { grid-template-columns: 1fr; text-align: center; } .wm-widget { margin: 0 auto; width: 290px; padding: 12px 14px; } .wm-word { font-size: 1.35rem; } } /* ── Blog Preview on Homepage ── */ .blog-preview { background: transparent; padding-top: 2rem; } .blog-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .blog-preview .blog-card { background: var(--card-bg); } .blog-preview .view-all-link { display: block; text-align: center; color: var(--primary-color); font-weight: 600; font-size: 1rem; } .blog-preview .view-all-link:hover { text-decoration: underline; } /* ── Responsive ── */ @media (max-width: 768px) { .blog-hero { padding: 6rem 0 2rem; } .blog-grid { grid-template-columns: 1fr; } .post-header { padding: 1.5rem 0 1rem; } .post-content { padding-left: 0.5rem; padding-right: 0.5rem; } .vocab-table-wrapper { display: block; } .vocab-header { display: none; } .vocab-row { display: grid; grid-template-columns: 1fr auto; padding: 0.75rem 0.9rem; gap: 0; } .vocab-text { display: contents; } .vocab-audio-group { display: contents; } .vocab-text .vocab-es { grid-column: 1; grid-row: 1; padding: 0; white-space: normal; } .vocab-ph { grid-column: 1; grid-row: 2; max-width: none; padding: 0.1rem 0; justify-content: flex-start; } .vocab-text .vocab-en { grid-column: 1; grid-row: 3; padding: 0.15rem 0 0; white-space: normal; font-size: 0.88rem; } .audio-btn { grid-column: 2; grid-row: 1 / 4; align-self: center; margin-left: 0.75rem; } .cta-card { padding: 1.8rem 1.2rem; } .related-grid { grid-template-columns: 1fr; } .breadcrumb { padding-top: 5rem; } }