/* ============================================ Betty Ivy's Puzzle Compendium — Enchanted Herbarium Theme ============================================ */ /* Google Fonts — add this to your : */ :root { --ivy-forest: #1a2f23; --ivy-forest-light: #2a4033; --ivy-gold: #c9a84c; --ivy-gold-dark: #a88a3c; --ivy-gold-light: #d4b85c; --ivy-cream: #f5efe0; --ivy-cream-dark: #eee8d5; --ivy-parchment: #e8e0cc; --ivy-ink: #3a3028; --ivy-ink-dark: #1e1a14; --ivy-rose: #8b5e5e; --ivy-muted: #5a4a3a; --ivy-sage: #a89e8a; --ivy-moss: #6a7a6a; --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Source Serif 4', Georgia, serif; } /* ─── Reset & Base ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--ivy-cream); color: var(--ivy-ink); line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--ivy-ink-dark); line-height: 1.15; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } /* ─── Container ─── */ .bi-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .bi-container { padding: 0 1.5rem; } } @media (min-width: 1024px) { .bi-container { padding: 0 2rem; } } /* ─── Parchment Texture ─── */ .bi-parchment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); } /* ─── Wax Seal Button ─── */ .bi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 2rem; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.02em; color: var(--ivy-cream); background: var(--ivy-forest); border: 2px solid var(--ivy-gold); cursor: pointer; transition: all 0.3s ease; text-decoration: none; } .bi-btn:hover { background: var(--ivy-forest-light); box-shadow: 0 0 20px rgba(201,168,76,0.3); transform: translateY(-1px); } .bi-btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ivy-cream); border: 1px solid rgba(201,168,76,0.5); background: transparent; cursor: pointer; transition: all 0.3s ease; text-decoration: none; } .bi-btn-outline:hover { border-color: var(--ivy-gold); } /* ─── Tracking Utilities ─── */ .bi-track-wide { letter-spacing: 0.3em; } .bi-track-med { letter-spacing: 0.2em; } .bi-uppercase { text-transform: uppercase; } .bi-italic { font-style: italic; } /* ─── Navbar ─── */ .bi-nav { position: sticky; top: 0; z-index: 50; background: rgba(245,239,224,0.95); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(201,168,76,0.3); } .bi-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; } .bi-nav-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .bi-nav-logo-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ivy-forest); border-radius: 50%; background: var(--ivy-forest); color: var(--ivy-cream); } .bi-nav-logo-text { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--ivy-forest); } .bi-nav-logo-sub { display: block; font-family: var(--font-body); font-size: 0.7rem; color: var(--ivy-rose); letter-spacing: 0.15em; text-transform: uppercase; } .bi-nav-links { display: flex; align-items: center; gap: 2rem; } .bi-nav-links a { font-family: var(--font-display); font-size: 1.1rem; color: var(--ivy-muted); transition: color 0.2s; } .bi-nav-links a:hover, .bi-nav-links a.active { color: var(--ivy-forest); font-weight: 600; } .bi-nav-links a.active { border-bottom: 2px solid var(--ivy-gold); padding-bottom: 0.25rem; } @media (max-width: 768px) { .bi-nav-links { display: none; } } /* ─── Hero ─── */ .bi-hero { position: relative; overflow: hidden; } .bi-hero-bg { position: absolute; inset: 0; } .bi-hero-bg img { width: 100%; height: 100%; object-fit: cover; } .bi-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(26,47,35,0.7), rgba(26,47,35,0.5), rgba(245,239,224,1)); } .bi-hero-content { position: relative; z-index: 10; padding: 5rem 0 8rem; max-width: 640px; } .bi-hero-label { color: var(--ivy-gold); font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 1rem; } .bi-hero h1 { font-size: 3.5rem; color: var(--ivy-cream); margin-bottom: 1.5rem; } .bi-hero h1 span { color: var(--ivy-gold); font-style: italic; } .bi-hero p { font-size: 1.125rem; color: #d4c5a0; line-height: 1.7; margin-bottom: 2rem; max-width: 32rem; } .bi-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; } @media (min-width: 768px) { .bi-hero h1 { font-size: 4.5rem; } .bi-hero-content { padding: 7rem 0 10rem; } } /* ─── Section Headers ─── */ .bi-section-dark { padding: 5rem 0; background: var(--ivy-forest); position: relative; overflow: hidden; } .bi-section-dark .bi-bg-overlay { position: absolute; inset: 0; opacity: 0.1; } .bi-section-dark .bi-bg-overlay img { width: 100%; height: 100%; object-fit: cover; } .bi-section-light { padding: 5rem 0; background: var(--ivy-cream); } .bi-section-header { text-align: center; margin-bottom: 3rem; } .bi-section-header .bi-label { color: var(--ivy-rose); font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 0.5rem; } .bi-section-dark .bi-section-header .bi-label { color: var(--ivy-gold); } .bi-section-header h2 { font-size: 2.5rem; } .bi-section-dark .bi-section-header h2 { color: var(--ivy-cream); } @media (min-width: 768px) { .bi-section-header h2 { font-size: 3rem; } } /* ─── Featured Puzzle ─── */ .bi-featured { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; } @media (min-width: 1024px) { .bi-featured { grid-template-columns: 3fr 2fr; } } .bi-review-box { background: var(--ivy-cream-dark); border: 1px solid rgba(201,168,76,0.2); padding: 2rem; } @media (min-width: 768px) { .bi-review-box { padding: 2.5rem; } } .bi-review-label { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; color: var(--ivy-rose); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1rem; } .bi-review-box p { color: var(--ivy-ink); line-height: 1.8; margin-bottom: 1.5rem; } .bi-review-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .bi-text-link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; color: var(--ivy-forest); border-bottom: 1px solid var(--ivy-gold); padding-bottom: 2px; transition: border-color 0.2s; } .bi-text-link:hover { border-color: var(--ivy-forest); } /* ─── Puzzle Preview Cards ─── */ .bi-preview-stack { display: flex; flex-direction: column; gap: 1.5rem; } .bi-preview-card { position: relative; overflow: hidden; border: 1px solid rgba(201,168,76,0.3); display: block; } .bi-preview-card img { width: 100%; height: 12rem; object-fit: cover; transition: transform 0.5s; } .bi-preview-card:hover img { transform: scale(1.05); } .bi-preview-card .bi-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,47,35,0.8), transparent); } .bi-preview-card .bi-card-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; } .bi-preview-card .bi-card-label { color: var(--ivy-gold); font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.25rem; } .bi-preview-card .bi-card-desc { color: var(--ivy-cream); font-size: 0.875rem; } /* ─── How It Works ─── */ .bi-steps { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .bi-steps { grid-template-columns: repeat(3, 1fr); } } .bi-step { text-align: center; padding: 2rem; } .bi-step-icon { width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ivy-gold); border-radius: 50%; color: var(--ivy-gold); } .bi-step h3 { font-size: 1.5rem; color: var(--ivy-cream); margin-bottom: 0.75rem; } .bi-step p { color: var(--ivy-sage); line-height: 1.7; } /* ─── Book Cards Grid ─── */ .bi-card-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .bi-card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .bi-card-grid { grid-template-columns: repeat(4, 1fr); } } .bi-card-grid-3 { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .bi-card-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .bi-card-grid-3 { grid-template-columns: repeat(3, 1fr); } } .bi-book-card { display: block; background: var(--ivy-cream-dark); border: 1px solid rgba(201,168,76,0.25); overflow: hidden; transition: all 0.3s; } .bi-book-card:hover { border-color: rgba(201,168,76,0.6); box-shadow: 0 4px 20px rgba(201,168,76,0.1); } .bi-book-card-img { position: relative; height: 12rem; overflow: hidden; } .bi-book-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .bi-book-card:hover .bi-book-card-img img { transform: scale(1.05); } .bi-book-card-img .bi-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,47,35,0.6), transparent); } .bi-book-card-img .bi-tags { position: absolute; top: 0.75rem; left: 0.75rem; display: flex; gap: 0.5rem; } .bi-book-card-img .bi-tag { display: inline-block; padding: 0.25rem 0.5rem; font-family: var(--font-display); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; } .bi-tag-week { background: rgba(26,47,35,0.8); color: var(--ivy-gold); } .bi-tag-genre { background: rgba(139,94,94,0.8); color: var(--ivy-cream); } .bi-book-card-body { padding: 1.25rem; } .bi-book-card-body .bi-genre { font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; color: var(--ivy-rose); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.25rem; } .bi-book-card-body h3 { font-size: 1.125rem; margin-bottom: 0.25rem; transition: color 0.2s; } .bi-book-card:hover .bi-book-card-body h3 { color: var(--ivy-forest-light); } .bi-book-card-body .bi-author { font-size: 0.875rem; color: var(--ivy-muted); } .bi-book-card-body .bi-stats { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; font-size: 0.75rem; color: var(--ivy-rose); } /* ─── Newsletter ─── */ .bi-newsletter { text-align: center; max-width: 32rem; margin: 0 auto; } .bi-newsletter h2 { font-size: 2.5rem; color: var(--ivy-cream); margin-bottom: 1rem; } .bi-newsletter p { color: var(--ivy-sage); font-size: 1.125rem; line-height: 1.7; margin-bottom: 2rem; } .bi-newsletter-form { display: flex; flex-direction: column; gap: 0.75rem; } @media (min-width: 640px) { .bi-newsletter-form { flex-direction: row; } } .bi-newsletter-form input { flex: 1; padding: 0.75rem 1rem; background: var(--ivy-forest-light); border: 1px solid rgba(201,168,76,0.3); color: var(--ivy-cream); font-family: var(--font-body); font-size: 1rem; } .bi-newsletter-form input::placeholder { color: var(--ivy-moss); } .bi-newsletter-form input:focus { outline: none; border-color: var(--ivy-gold); } /* ─── Footer ─── */ .bi-footer { border-top: 1px solid rgba(201,168,76,0.3); background: var(--ivy-forest); color: var(--ivy-cream); padding: 3rem 0; } .bi-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .bi-footer-grid { grid-template-columns: repeat(3, 1fr); } } .bi-footer-logo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .bi-footer-logo-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ivy-gold); border-radius: 50%; } .bi-footer-logo-text { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--ivy-gold); } .bi-footer p { font-size: 0.875rem; color: var(--ivy-sage); line-height: 1.7; } .bi-footer h4 { font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; color: var(--ivy-gold); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1rem; } .bi-footer-links { display: flex; flex-direction: column; gap: 0.5rem; } .bi-footer-links a { font-size: 0.875rem; color: var(--ivy-sage); transition: color 0.2s; } .bi-footer-links a:hover { color: var(--ivy-cream); } .bi-footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(201,168,76,0.2); display: flex; flex-direction: column; align-items: center; gap: 1rem; font-size: 0.75rem; color: var(--ivy-moss); } @media (min-width: 640px) { .bi-footer-bottom { flex-direction: row; justify-content: space-between; } } /* ─── Puzzle Page ─── */ .bi-puzzle-header { padding: 3rem 0; background: var(--ivy-forest); } .bi-puzzle-header .bi-back { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ivy-gold); font-family: var(--font-display); margin-bottom: 1.5rem; transition: color 0.2s; } .bi-puzzle-header .bi-back:hover { color: var(--ivy-cream); } .bi-puzzle-header .bi-meta { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 768px) { .bi-puzzle-header .bi-meta { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .bi-puzzle-header .bi-label { color: var(--ivy-gold); font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 0.5rem; } .bi-puzzle-header h1 { font-size: 2.5rem; color: var(--ivy-cream); margin-bottom: 0.5rem; } @media (min-width: 768px) { .bi-puzzle-header h1 { font-size: 3rem; } } .bi-puzzle-header .bi-author { font-size: 1.125rem; color: var(--ivy-sage); } /* ─── Tabs ─── */ .bi-tabs { display: flex; gap: 0; border-bottom: 1px solid rgba(201,168,76,0.3); background: var(--ivy-cream-dark); } .bi-tab { padding: 1rem 1.5rem; font-family: var(--font-display); font-size: 1.1rem; color: var(--ivy-muted); border: none; background: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.2s; } .bi-tab:hover { color: var(--ivy-forest); } .bi-tab.active { color: var(--ivy-forest); font-weight: 600; border-bottom-color: var(--ivy-gold); } /* ─── Word Search Grid ─── */ .bi-ws-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 1024px) { .bi-ws-layout { grid-template-columns: 2fr 1fr; } } .bi-ws-grid-wrap { background: var(--ivy-cream-dark); border: 1px solid rgba(201,168,76,0.25); padding: 1rem; overflow-x: auto; } @media (min-width: 768px) { .bi-ws-grid-wrap { padding: 1.5rem; } } .bi-ws-grid { display: inline-grid; gap: 0; } .bi-ws-cell { width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; font-family: 'Courier New', monospace; font-size: 0.875rem; font-weight: 700; color: var(--ivy-ink); user-select: none; transition: background 0.2s; } @media (min-width: 768px) { .bi-ws-cell { width: 2rem; height: 2rem; font-size: 1rem; } } .bi-ws-cell.highlighted { background: rgba(201,168,76,0.3); } .bi-ws-wordlist { background: var(--ivy-cream-dark); border: 1px solid rgba(201,168,76,0.25); padding: 1.5rem; } .bi-ws-wordlist h3 { font-size: 1.25rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .bi-ws-words { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1rem; } .bi-ws-word { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; } .bi-ws-word input { width: 1rem; height: 1rem; accent-color: var(--ivy-forest); } .bi-ws-word.found span { text-decoration: line-through; color: rgba(139,94,94,0.6); } .bi-ws-count { margin-top: 1rem; font-size: 0.75rem; color: var(--ivy-rose); } /* ─── Crossword Interactive Grid ─── */ .bi-cw-interactive { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 1024px) { .bi-cw-interactive { grid-template-columns: 3fr 2fr; } } .bi-cw-grid-area { } .bi-cw-grid-wrap { background: var(--ivy-cream-dark); border: 1px solid rgba(201,168,76,0.25); padding: 0.75rem; overflow-x: auto; } @media (min-width: 768px) { .bi-cw-grid-wrap { padding: 1.25rem; } } .bi-cw-grid { display: inline-grid; gap: 0; } .bi-cw-empty { width: 2rem; height: 2rem; } @media (min-width: 768px) { .bi-cw-empty { width: 2.5rem; height: 2.5rem; } } .bi-cw-cell { width: 2rem; height: 2rem; position: relative; border: 1px solid rgba(58,48,40,0.4); background: #fff; transition: background 0.15s; } @media (min-width: 768px) { .bi-cw-cell { width: 2.5rem; height: 2.5rem; } } .bi-cw-cell.bi-cw-active { background: rgba(201,168,76,0.2); } .bi-cw-cell.bi-cw-correct { background: rgba(34,197,94,0.15); } .bi-cw-cell.bi-cw-wrong { background: rgba(239,68,68,0.15); } .bi-cw-num { position: absolute; top: 1px; left: 2px; font-size: 0.55rem; font-weight: 700; color: var(--ivy-forest); font-family: var(--font-display); line-height: 1; z-index: 2; pointer-events: none; } @media (min-width: 768px) { .bi-cw-num { font-size: 0.6rem; } } .bi-cw-input { width: 100%; height: 100%; text-align: center; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; background: transparent; border: none; outline: none; font-family: 'Courier New', monospace; color: var(--ivy-forest); } @media (min-width: 768px) { .bi-cw-input { font-size: 0.95rem; } } .bi-cw-input:focus { outline: 2px solid var(--ivy-gold); outline-offset: -2px; } .bi-cw-clues-area { display: flex; flex-direction: column; gap: 1.5rem; } .bi-clue.bi-clue-active { background: rgba(201,168,76,0.15); border-radius: 4px; } /* ─── Crossword Clues ─── */ .bi-cw-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .bi-cw-layout { grid-template-columns: repeat(2, 1fr); } } .bi-cw-panel { background: var(--ivy-cream-dark); border: 1px solid rgba(201,168,76,0.25); padding: 1.5rem; } @media (min-width: 768px) { .bi-cw-panel { padding: 2rem; } } .bi-cw-panel h3 { font-size: 1.25rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; } .bi-cw-panel h3 .bi-arrow { color: var(--ivy-gold); font-size: 1.25rem; } .bi-clue { display: flex; gap: 0.75rem; margin-bottom: 1rem; padding: 0.5rem; margin-left: -0.5rem; margin-right: -0.5rem; transition: background 0.15s; } .bi-clue:hover { background: rgba(201,168,76,0.05); } .bi-clue-num { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; color: var(--ivy-gold); min-width: 2rem; } .bi-clue-text { font-size: 0.875rem; color: var(--ivy-ink); line-height: 1.6; } .bi-clue-len { font-size: 0.75rem; color: var(--ivy-rose); margin-top: 0.25rem; } /* ─── Blog Post ─── */ .bi-blog { max-width: 48rem; margin: 0 auto; padding: 4rem 0; } .bi-blog .bi-review-label { margin-bottom: 1.5rem; } .bi-blog h2 { font-size: 2rem; margin-bottom: 0.5rem; } @media (min-width: 768px) { .bi-blog h2 { font-size: 2.5rem; } } .bi-blog .bi-author { font-size: 1.125rem; color: var(--ivy-muted); margin-bottom: 2rem; } .bi-blog .bi-quote { border-left: 4px solid var(--ivy-gold); padding-left: 1.5rem; } .bi-blog .bi-quote p { font-size: 1.125rem; color: var(--ivy-ink); line-height: 1.9; } .bi-blog .bi-review-actions { margin-top: 2rem; } /* ─── About Page ─── */ .bi-about-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; } @media (min-width: 1024px) { .bi-about-layout { grid-template-columns: 3fr 2fr; } } .bi-about-content { background: var(--ivy-cream-dark); border: 1px solid rgba(201,168,76,0.25); padding: 2rem; } @media (min-width: 768px) { .bi-about-content { padding: 2.5rem; } } .bi-about-content h2 { font-size: 1.875rem; margin-bottom: 1.5rem; } .bi-about-content p { line-height: 1.8; margin-bottom: 1.25rem; } .bi-about-features { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; } @media (min-width: 640px) { .bi-about-features { grid-template-columns: repeat(3, 1fr); } } .bi-about-feature { background: var(--ivy-cream-dark); border: 1px solid rgba(201,168,76,0.25); padding: 1.5rem; text-align: center; } .bi-about-feature-icon { width: 3rem; height: 3rem; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ivy-gold); border-radius: 50%; color: var(--ivy-gold); } .bi-about-feature h3 { font-size: 1.125rem; margin-bottom: 0.5rem; } .bi-about-feature p { font-size: 0.875rem; color: var(--ivy-muted); } .bi-about-sidebar .bi-specimen { position: relative; overflow: hidden; border: 1px solid rgba(201,168,76,0.3); margin-bottom: 2rem; } .bi-about-sidebar .bi-specimen img { width: 100%; height: 16rem; object-fit: cover; } .bi-about-sidebar .bi-specimen .bi-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,47,35,0.6), transparent); } .bi-about-sidebar .bi-specimen .bi-specimen-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; } .bi-about-sidebar .bi-stats-box { background: var(--ivy-cream-dark); border: 1px solid rgba(201,168,76,0.25); padding: 1.5rem; margin-bottom: 2rem; } .bi-about-sidebar .bi-stats-box h3 { font-size: 1.125rem; margin-bottom: 1rem; } .bi-stat-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(201,168,76,0.15); padding-bottom: 0.5rem; margin-bottom: 0.75rem; } .bi-stat-row .bi-stat-label { font-size: 0.875rem; color: var(--ivy-muted); } .bi-stat-row .bi-stat-value { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; } .bi-contact-box { background: var(--ivy-forest); padding: 1.5rem; } .bi-contact-box h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--ivy-gold); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .bi-contact-box p { font-size: 0.875rem; color: var(--ivy-sage); margin-bottom: 1rem; } /* ─── More Coming Box ─── */ .bi-more-coming { text-align: center; margin-top: 4rem; } .bi-more-coming-inner { display: inline-block; border: 2px dashed rgba(201,168,76,0.4); padding: 2rem 3rem; } .bi-more-coming h3 { font-size: 1.5rem; margin-bottom: 0.5rem; } .bi-more-coming p { color: var(--ivy-muted); } /* ─── SVG Icons (inline) ─── */ .bi-icon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .bi-icon-sm { width: 0.75rem; height: 0.75rem; } .bi-icon-md { width: 1rem; height: 1rem; } .bi-icon-lg { width: 1.25rem; height: 1.25rem; } .bi-icon-xl { width: 1.5rem; height: 1.5rem; } /* ─── Scrollbar ─── */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--ivy-cream); } ::-webkit-scrollbar-thumb { background: var(--ivy-gold); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--ivy-gold-dark); }