/* ============================================================ salon.css -- "Clean Editorial" theme for Aphorism.ru Fonts: Cormorant Garamond (serif quotes), Commissioner (UI) Loaded via Google Fonts in HTML ============================================================ */ /* ----- Reset & Base ----- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: 'Commissioner', 'Segoe UI', system-ui, sans-serif; font-weight: 400; line-height: 1.6; color: #1A1A1A; background-color: #F5F5F3; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: #2563EB; text-decoration: none; transition: color 0.15s ease; } a:hover { color: #1D4ED8; } img { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; } /* Alpine.js cloak */ [x-cloak] { display: none !important; } /* Dropdown / menu toggle helper */ .show { display: block !important; } /* ----- Typography ----- */ h1, h2, h3, h4, h5, h6 { font-family: 'Commissioner', 'Segoe UI', system-ui, sans-serif; font-weight: 700; line-height: 1.3; color: #1A1A1A; } /* ----- Layout Container ----- */ .container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } /* ============================================================ HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; background-color: #FFFFFF; border-bottom: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .header-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 60px; } .site-title { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; display: inline; } .logo { font-family: 'Commissioner', 'Segoe UI', system-ui, sans-serif; font-size: 1.3rem; font-weight: 700; color: #1A1A1A; letter-spacing: -0.01em; white-space: nowrap; transition: color 0.2s; } .logo:hover { color: #2563EB; } .logo span { color: #2563EB; } .main-nav { display: flex; align-items: center; gap: 4px; } .nav-link { display: inline-flex; align-items: center; padding: 6px 14px; font-family: 'Commissioner', 'Segoe UI', system-ui, sans-serif; font-size: 0.9rem; font-weight: 500; color: #6B7280; border-radius: 8px; transition: color 0.15s, background-color 0.15s; position: relative; } .nav-link:hover { color: #2563EB; background-color: #EFF6FF; } .nav-link.active { color: #2563EB; background-color: #EFF6FF; font-weight: 600; } .nav-link.active::after { content: ''; position: absolute; bottom: -1px; left: 14px; right: 14px; height: 2px; background-color: #2563EB; border-radius: 2px; } /* ----- Nav Dropdown (Искусство etc) ----- */ .nav-dropdown-wrap { position: relative; } .nav-dropdown-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 180px; background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; padding: 6px 0; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 200; } .nav-dropdown-menu.show { display: block; } .nav-dropdown-menu a { display: block; padding: 8px 16px; font-family: 'Commissioner', sans-serif; font-size: 0.85rem; color: #1A1A1A; transition: background 0.1s, color 0.1s; } .nav-dropdown-menu a:hover { background: #EFF6FF; color: #2563EB; } /* ----- Login Dropdown ----- */ .nav-login-wrap { position: relative; } .login-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 280px; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 200; } .login-dropdown.show { display: block; } .login-input { width: 100%; padding: 10px 12px; font-family: 'Commissioner', sans-serif; font-size: 0.875rem; border: 1px solid #E5E7EB; border-radius: 8px; margin-bottom: 10px; outline: none; transition: border-color 0.15s; color: #1A1A1A; background: #fff; } .login-input:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); } .login-input::placeholder { color: #9CA3AF; } .login-btn { width: 100%; padding: 10px; font-family: 'Commissioner', sans-serif; font-size: 0.875rem; font-weight: 600; color: #fff; background: #2563EB; border: none; border-radius: 8px; cursor: pointer; transition: background 0.15s; } .login-btn:hover { background: #1D4ED8; } .login-links { display: flex; justify-content: space-between; margin-top: 12px; font-size: 0.8rem; } .login-links a { color: #6B7280; transition: color 0.15s; } .login-links a:hover { color: #2563EB; } .login-divider { height: 1px; background: #E5E7EB; margin: 16px 0; } .login-new-link { display: block; text-align: center; font-family: 'Commissioner', sans-serif; font-size: 0.875rem; font-weight: 600; color: #2563EB; padding: 10px; border: 1px solid #2563EB; border-radius: 8px; transition: background 0.15s, color 0.15s; } .login-new-link:hover { background: #2563EB; color: #fff; } /* ----- Mobile Toggle ----- */ .mobile-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; gap: 5px; border-radius: 6px; transition: background-color 0.2s; } .mobile-toggle:hover { background-color: #EFF6FF; } .mobile-toggle span { display: block; width: 20px; height: 2px; background-color: #1A1A1A; border-radius: 2px; transition: transform 0.25s, opacity 0.25s; } /* Hamburger open state */ .mobile-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-toggle.open span:nth-child(2) { opacity: 0; } .mobile-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav { display: none; background-color: #FFFFFF; border-bottom: 1px solid #E5E7EB; padding: 12px 24px 16px; } .mobile-nav.show { display: flex; flex-direction: column; gap: 4px; } .mobile-nav .nav-link { width: 100%; padding: 10px 14px; font-size: 1rem; border-radius: 8px; } /* ============================================================ DROPDOWN PANELS (notifications, user menu) ============================================================ */ .dropdown-wrap { position: relative; } .dropdown-panel { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background-color: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04); padding: 8px 0; z-index: 200; } .dropdown-panel.show { display: block; animation: dropIn 0.18s ease-out; } .dropdown-panel a, .dropdown-panel button { display: block; width: 100%; text-align: left; padding: 8px 16px; font-size: 0.9rem; color: #6B7280; transition: background-color 0.15s, color 0.15s; } .dropdown-panel a:hover, .dropdown-panel button:hover { background-color: #EFF6FF; color: #1A1A1A; } .dropdown-panel .divider { height: 1px; background-color: #E5E7EB; margin: 6px 0; } @keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ MAIN CONTENT ============================================================ */ .site-main { flex: 1; padding: 36px 0 56px; } .page-title { font-family: 'Commissioner', 'Segoe UI', system-ui, sans-serif; font-size: 1.8rem; font-weight: 700; color: #1A1A1A; margin-bottom: 4px; letter-spacing: -0.02em; } .page-subtitle { font-size: 0.95rem; color: #6B7280; margin-bottom: 32px; } /* ============================================================ CARD FEED ============================================================ */ .card-feed { display: flex; flex-direction: column; gap: 24px; } /* ----- Individual Aphorism Card ----- */ .aph-card { background-color: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; padding: 28px 28px 22px; position: relative; box-shadow: none; transition: box-shadow 0.3s ease; animation: fadeInUp 0.4s ease-out both; } /* Stagger animation for sequential cards */ .aph-card:nth-child(1) { animation-delay: 0s; } .aph-card:nth-child(2) { animation-delay: 0.04s; } .aph-card:nth-child(3) { animation-delay: 0.08s; } .aph-card:nth-child(4) { animation-delay: 0.12s; } .aph-card:nth-child(5) { animation-delay: 0.16s; } .aph-card:nth-child(6) { animation-delay: 0.2s; } .aph-card:nth-child(7) { animation-delay: 0.24s; } .aph-card:nth-child(8) { animation-delay: 0.28s; } .aph-card:nth-child(9) { animation-delay: 0.32s; } .aph-card:nth-child(10) { animation-delay: 0.36s; } .aph-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } /* Decorative opening curly quote */ .aph-card::before { content: '\201C'; position: absolute; top: 4px; left: 20px; font-family: 'Cormorant Garamond', 'Georgia', serif; font-size: 6rem; line-height: 1; color: rgba(37, 99, 235, 0.08); pointer-events: none; user-select: none; } /* ----- Quote Text ----- */ .aph-text { font-family: 'Cormorant Garamond', 'Georgia', serif; font-size: 1.1rem; font-weight: 400; line-height: 1.55; color: #1A1A1A; margin-bottom: 20px; position: relative; z-index: 1; } .aph-text a { color: inherit; text-decoration: none; transition: color 0.15s; } .aph-text a:hover { color: #2563EB; } /* ----- Author Row ----- */ .aph-author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid #F3F4F6; } .aph-author-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #E5E7EB; flex-shrink: 0; } .aph-author-name { font-family: 'Commissioner', 'Segoe UI', system-ui, sans-serif; font-weight: 600; font-size: 0.875rem; color: #1A1A1A; transition: color 0.15s; } .aph-author-name::before { content: '\2014\00a0'; color: #2563EB; font-weight: 400; } .aph-author-name a { color: inherit; text-decoration: none; } .aph-author-name a:hover { color: #2563EB; } .aph-date { margin-left: auto; font-family: 'Commissioner', 'Segoe UI', system-ui, sans-serif; font-size: 0.8rem; color: #6B7280; white-space: nowrap; } /* ----- Card actions (reactions, share, etc.) ----- */ .aph-actions { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding-top: 12px; } .aph-action-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; color: #6B7280; padding: 4px 8px; border-radius: 6px; transition: color 0.15s, background-color 0.15s; } .aph-action-btn:hover { color: #2563EB; background-color: #EFF6FF; } .aph-action-btn.active { color: #2563EB; } /* ============================================================ PAGINATION ============================================================ */ .pagination-wrap { margin-top: 48px; display: flex; justify-content: center; } .pagination { display: flex; align-items: center; gap: 4px; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; font-size: 0.9rem; font-weight: 500; border-radius: 10px; transition: background-color 0.15s, color 0.15s; } .pagination a { color: #6B7280; } .pagination a:hover { background-color: #EFF6FF; color: #2563EB; } .pg-current { background-color: #2563EB; color: #FFFFFF !important; font-weight: 600; } .pg-dots { color: #6B7280; letter-spacing: 2px; cursor: default; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background-color: #1A1A1A; color: #9CA3AF; padding: 40px 0 28px; margin-top: auto; } .footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px; } .footer-inner a { color: #9CA3AF; transition: color 0.15s; } .footer-inner a:hover { color: #FFFFFF; } .site-footer .logo { color: #9CA3AF; font-size: 1.15rem; } .site-footer .logo:hover { color: #FFFFFF; } .footer-links { display: flex; gap: 20px; font-size: 0.85rem; } .footer-copy { width: 100%; text-align: center; font-size: 0.8rem; color: #6B7280; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); } /* ============================================================ ANIMATIONS ============================================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .aph-card { animation: none !important; } .aph-card:hover { box-shadow: none; } } /* ============================================================ UTILITY / FORM ELEMENTS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 20px; font-size: 0.9rem; font-weight: 600; border-radius: 10px; transition: background-color 0.15s, color 0.15s, box-shadow 0.15s; cursor: pointer; border: none; white-space: nowrap; } .btn-primary { background-color: #2563EB; color: #FFFFFF; } .btn-primary:hover { background-color: #1D4ED8; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25); } .btn-outline { background-color: transparent; color: #2563EB; border: 1.5px solid rgba(37, 99, 235, 0.35); } .btn-outline:hover { background-color: #EFF6FF; border-color: #2563EB; } /* Text input */ .input { width: 100%; padding: 12px 16px; font-size: 1rem; font-family: 'Commissioner', sans-serif; color: #1A1A1A; background-color: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .input:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .input::placeholder { color: #9CA3AF; } /* Badge (notification count) */ .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: 0.7rem; font-weight: 700; color: #FFFFFF; background-color: #2563EB; border-radius: 9px; } /* Visually hidden (accessibility) */ .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; } /* ============================================================ RESPONSIVE -- 768px breakpoint ============================================================ */ @media (max-width: 768px) { .main-nav { display: none; } .mobile-toggle { display: flex; } .header-inner { height: 50px; } .page-title { font-size: 1.5rem; } .aph-card { padding: 22px 20px 18px; } .aph-card::before { font-size: 4rem; top: 4px; left: 14px; } .aph-text { font-size: 1.05rem; } .aph-author { flex-wrap: wrap; } .aph-date { margin-left: 0; width: 100%; padding-left: 52px; } .footer-inner { flex-direction: column; align-items: center; text-align: center; } .footer-links { justify-content: center; } } @media (max-width: 480px) { .container { padding-left: 16px; padding-right: 16px; } .aph-card { padding: 18px 16px 14px; border-radius: 10px; } .aph-text { font-size: 1rem; } .pagination a, .pagination span { min-width: 34px; height: 34px; font-size: 0.85rem; } } /* ======================================== HOMEPAGE LAYOUT ======================================== */ .hp-layout { max-width: 1200px; margin: 0 auto; padding: 32px 24px 56px; display: grid !important; grid-template-columns: 1fr 340px !important; gap: 32px; align-items: start; } .hp-main { min-width: 0; } .hp-sidebar { min-width: 0; } @media (max-width: 960px) { .hp-layout { grid-template-columns: 1fr; gap: 24px; padding: 16px 16px 32px; } } /* Search */ .hp-search { margin-bottom: 32px; } .search-box { position: relative; } .search-input { width: 100%; padding: 14px 20px 14px 48px; font-family: 'Commissioner', sans-serif; font-size: 1rem; color: #1A1A1A; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; box-shadow: none; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .search-input:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .search-input::placeholder { color: #9CA3AF; } .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #9CA3AF; pointer-events: none; } /* Sections */ .hp-section { margin-bottom: 40px; position: relative; } /* No decorative separator between sections — clean spacing only */ .hp-section + .hp-section::before { content: none; } /* Primary section title (h2 in main) */ .hp-section-title { font-family: 'Commissioner', 'Segoe UI', system-ui, sans-serif; font-size: 1.4rem; font-weight: 700; color: #1A1A1A; margin-bottom: 20px; padding-bottom: 8px; border-bottom: 4px solid #2563EB; display: inline-block; } .hp-section-title::before { content: none; } /* Secondary section title (h3 in main) */ .hp-section h3:not(.hp-widget-title) { font-family: 'Commissioner', 'Segoe UI', system-ui, sans-serif; font-size: 1.15rem; font-weight: 600; color: #6B7280; margin-bottom: 14px; } .hp-more-links { display: flex; gap: 20px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #F3F4F6; } .hp-more-links a { font-size: 0.875rem; font-weight: 500; color: #2563EB; transition: color 0.15s; } .hp-more-links a::after { content: ' \2192'; opacity: 0; transition: opacity 0.15s, transform 0.15s; display: inline-block; transform: translateX(-4px); } .hp-more-links a:hover { color: #1D4ED8; } .hp-more-links a:hover::after { opacity: 1; transform: translateX(0); } /* Legacy content overrides for homepage */ .hp-quotes .row { margin-bottom: 8px; } .hp-quotes .col-md-12 { padding: 0; } .hp-quotes .col-md-12 a { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.1rem; line-height: 1.55; color: #1A1A1A; transition: color 0.15s; } .hp-quotes .col-md-12 a:hover { color: #2563EB; } .hp-quotes .col-md-12 i { font-size: 0.875rem; color: #6B7280; } .hp-quotes .col-md-12 i a { font-size: 0.875rem; color: #6B7280; } .hp-quotes .col-md-12 i a:hover { color: #2563EB; } /* Author feature blocks */ .hp-author-feature .row { margin-bottom: 6px; } .hp-author-feature img { border-radius: 50%; border: 2px solid #E5E7EB; object-fit: cover; } .hp-author-feature h2 { font-family: 'Commissioner', 'Segoe UI', system-ui, sans-serif; font-size: 1.2rem; font-weight: 600; margin: 0; } .hp-author-feature h2 a { color: #1A1A1A; } .hp-author-feature h2 a:hover { color: #2563EB; } .hp-author-feature .col-md-12 a { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.1rem; color: #1A1A1A; } .hp-author-feature .col-md-12 a:hover { color: #2563EB; } /* New aphorisms grid with photos */ .hp-quotes .col-md-1 img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .hp-quotes .col-md-4 { font-size: 0.875rem; color: #6B7280; } .hp-quotes .col-md-4 a { color: #6B7280; } .hp-quotes .col-md-4 a:hover { color: #2563EB; } .hp-quotes .col-md-7 a { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.1rem; color: #1A1A1A; } .hp-quotes .col-md-7 a:hover { color: #2563EB; } /* Sidebar widgets */ .hp-widget { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: none; transition: box-shadow 0.3s ease; } .hp-widget:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } /* Widget titles: uppercase, small, letter-spaced — editorial magazine feel */ .hp-widget-title { font-family: 'Commissioner', 'Segoe UI', sans-serif; font-size: 0.75rem; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #F3F4F6; } .hp-widget a { color: #1A1A1A; font-size: 0.875rem; transition: color 0.15s; } .hp-widget a:hover { color: #2563EB; } .hp-widget img { max-width: 100%; height: auto; border-radius: 10px; } .hp-widget .row { margin-bottom: 4px; } .hp-widget .col-md-4 { flex: 0 0 auto; max-width: 100%; } .hp-widget h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.1rem; font-weight: 500; margin: 0 0 8px; } .hp-widget ul { padding-left: 0; } .hp-widget li { padding: 6px 0; border-bottom: 1px solid #F3F4F6; font-size: 0.875rem; } .hp-widget li:last-child { border-bottom: none; } .hp-widget li a { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.05rem; } .hp-widget-more { display: block; margin-top: 12px; font-size: 0.85rem; font-weight: 500; color: #2563EB !important; transition: color 0.15s; } .hp-widget-more:hover { color: #1D4ED8 !important; } /* Featured quote (best of day) */ .hp-featured { background: #FFFFFF; border: 1px solid #E5E7EB; border-left: 4px solid #2563EB; border-radius: 12px; padding: 32px 36px; margin-bottom: 40px; position: relative; box-shadow: none; } .hp-featured::before { content: '\201C'; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 6rem; font-weight: 600; color: rgba(37, 99, 235, 0.08); position: absolute; top: -4px; left: 20px; line-height: 1; pointer-events: none; } .hp-featured .hp-section-title { color: #2563EB; border-bottom-color: transparent; } .hp-featured .hp-section-title::before { content: none; } .hp-featured-quote { position: relative; z-index: 1; } .hp-featured-quote a { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.45rem; font-weight: 500; line-height: 1.5; color: #1A1A1A; transition: color 0.15s; } .hp-featured-quote a:hover { color: #2563EB; } /* Best today list */ .hp-best-list ol { list-style: none; counter-reset: best; padding: 0; } .hp-best-list li { counter-increment: best; padding: 14px 0 14px 44px; border-bottom: 1px solid #F3F4F6; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.1rem; line-height: 1.5; position: relative; } .hp-best-list li:last-child { border-bottom: none; } .hp-best-list li::before { content: counter(best); position: absolute; left: 0; top: 14px; width: 30px; height: 30px; background: #D1D5DB; color: #fff; font-family: 'Commissioner', sans-serif; font-size: 0.8rem; font-weight: 600; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* Top 3 get blue numbers */ .hp-best-list li:nth-child(1)::before, .hp-best-list li:nth-child(2)::before, .hp-best-list li:nth-child(3)::before { background: #2563EB; } .hp-best-list li a { transition: color 0.15s; } .hp-best-list li a:hover { color: #2563EB; } /* Voting stats */ .hp-vote-stats { font-size: 0.9rem; color: #6B7280; line-height: 1.8; } /* Author rating in sidebar */ .hp-author-rating { list-style: none; padding: 0; counter-reset: rank; } .hp-author-rating li { counter-increment: rank; padding: 6px 0; border-bottom: 1px solid #F3F4F6; font-size: 0.875rem; } .hp-author-rating li:last-child { border-bottom: none; } .hp-author-rating li a { color: #1A1A1A; } .hp-author-rating li a:hover { color: #2563EB; } /* Picture aphorism */ .hp-picture img { width: 100%; height: auto; border-radius: 12px; margin-bottom: 8px; } /* Collector list */ .hp-collector-list { list-style: none; padding: 0; } .hp-collector-list li { padding: 6px 0; border-bottom: 1px solid #F3F4F6; font-size: 0.875rem; } .hp-collector-list li:last-child { border-bottom: none; } .hp-collector-list li a { color: #1A1A1A; } .hp-collector-list li a:hover { color: #2563EB; } /* Birthday people grid */ .hp-birthday-people table { width: 100%; border-collapse: collapse; } .hp-birthday-people td { padding: 8px 4px; text-align: center; vertical-align: top; font-size: 0.82rem; } .hp-birthday-people img { width: 70px !important; height: 70px; border-radius: 50%; object-fit: cover; border: 2px solid #E5E7EB; margin-bottom: 4px; } /* Hide no-photo placeholder entries */ .hp-birthday-people img[src*="no-photo"] { display: none; } .hp-birthday-people a:has(img[src*="no-photo"]) { display: none; } .hp-birthday-people a { color: #1A1A1A; display: block; } .hp-birthday-people a:hover { color: #2563EB; } /* Birthday authors (main) — 2 columns x 5 rows grid */ .hp-birthday-authors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; } .hp-birthday-authors img { border-radius: 50%; border: 2px solid #E5E7EB; object-fit: cover; } /* Born today items — horizontal row with photo left */ .hp-born-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #F3F4F6; } .hp-born-item:last-child { border-bottom: none; } .hp-born-item img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #E5E7EB; flex-shrink: 0; } .hp-born-info { display: flex; flex-direction: column; min-width: 0; } .hp-born-info a { font-family: 'Commissioner', 'Segoe UI', system-ui, sans-serif; font-size: 0.875rem; font-weight: 500; color: #1A1A1A; transition: color 0.15s; } .hp-born-info a:hover { color: #2563EB; } .hp-born-info small { color: #6B7280; font-size: 0.75rem; } .hp-born-desc { display: block; font-size: 0.75rem; color: #6B7280; line-height: 1.35; margin-top: 2px; max-height: 2.7em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Calendar widget */ .hp-widget table.dark { display: none; } .hp-widget table.light { width: 100% !important; border-collapse: collapse; } .hp-widget table.light > tbody > tr > td:first-child, .hp-widget table.light > tr > td:first-child { width: 0; font-size: 0; padding: 0; overflow: hidden; max-width: 0; } .hp-widget .calendar { text-align: center; padding: 3px 2px; font-size: 0.75rem; line-height: 1.3; vertical-align: top; white-space: nowrap; } .hp-widget .calendar a { display: inline; padding: 2px 4px; border-radius: 4px; font-size: 0.75rem; color: #1A1A1A; text-decoration: none; transition: background 0.15s, color 0.15s; } .hp-widget .calendar a:hover { background: #EFF6FF; color: #2563EB; } .hp-widget table img { display: none; } .hp-widget td[bgcolor] { background: none !important; } .hp-widget tr[bgcolor] { background: none !important; } .hp-widget font.header { font-family: 'Commissioner', 'Segoe UI', system-ui, sans-serif; font-size: 1rem; font-weight: 600; color: #1A1A1A; } /* Online count — large accent number */ .hp-online-count { font-family: 'Commissioner', 'Segoe UI', system-ui, sans-serif; font-size: 3rem; font-weight: 700; color: #2563EB; text-align: center; padding: 12px 0; letter-spacing: -0.02em; line-height: 1.1; } /* Footer SEO text */ .footer-seo { font-size: 0.8rem; color: #6B7280; margin-top: 12px; line-height: 1.5; } /* Breadcrumb nav */ .breadcrumb-nav { font-size: 0.85rem; color: #6B7280; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #E5E7EB; } .breadcrumb-nav a { color: #2563EB; transition: color 0.15s; } .breadcrumb-nav a:hover { color: #1D4ED8; } .breadcrumb-nav span { color: #1A1A1A; } /* Article page */ .article-content { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 32px; margin-bottom: 32px; } .article-title { font-family: 'Commissioner', sans-serif; font-size: 1.6rem; font-weight: 700; color: #1A1A1A; margin: 0 0 16px; line-height: 1.3; } .article-lead { font-size: 1.05rem; color: #6B7280; line-height: 1.5; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #F3F4F6; } .article-body { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem; line-height: 1.65; color: #1A1A1A; } .article-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0; } .article-body p { margin-bottom: 12px; } .article-tags { margin-top: 24px; padding-top: 16px; border-top: 1px solid #F3F4F6; } .tag { display: inline-block; padding: 4px 12px; font-family: 'Commissioner', sans-serif; font-size: 0.8rem; color: #2563EB; background: #EFF6FF; border-radius: 20px; margin: 0 6px 6px 0; transition: background 0.15s; } .tag:hover { background: #DBEAFE; } /* Comment form */ .comment-form { margin-top: 24px; } .comment-textarea { width: 100%; padding: 12px 16px; font-family: 'Commissioner', sans-serif; font-size: 0.9rem; border: 1px solid #E5E7EB; border-radius: 8px; outline: none; resize: vertical; margin-bottom: 12px; transition: border-color 0.15s; color: #1A1A1A; } .comment-textarea:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); } /* Quote card (used on day archive, today, etc) */ .quote-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 24px; margin-bottom: 16px; font-size: 0.9rem; color: #6B7280; line-height: 1.5; } .quote-card a:first-child { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.6rem; line-height: 1.45; display: block; margin-bottom: 8px; } .quote-card a { color: #1A1A1A; transition: color 0.15s; } .quote-card a:hover { color: #2563EB; } .quote-card i, .quote-card font { font-size: 0.85rem; color: #6B7280; } .quote-card i a, .quote-card font a { font-size: 0.85rem; color: #6B7280; } .quote-card i a:hover { color: #2563EB; } .quote-card img { border-radius: 50%; width: 40px; height: 40px; object-fit: cover; vertical-align: middle; margin-right: 8px; } /* Bootstrap glyphicon replacements */ .glyphicon { font-style: normal; cursor: pointer; } .glyphicon-thumbs-up::before { content: '\1F44D'; } .glyphicon-thumbs-up { position: relative; transition: transform 0.15s; } .glyphicon-thumbs-up:active { transform: scale(1.4); } .glyphicon-thumbs-up.sparked::after { content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; background: radial-gradient(circle, rgba(37,99,235,0.4) 0%, transparent 70%); border-radius: 50%; animation: sparkle-burst 0.6s ease-out forwards; pointer-events: none; } @keyframes sparkle-burst { 0% { transform: scale(0.3); opacity: 1; } 50% { transform: scale(1.8); opacity: 0.6; } 100% { transform: scale(2.5); opacity: 0; } } .glyphicon-thumbs-down::before { content: '\1F44E'; } .glyphicon-comment::before { content: '\1F4AC'; } .glyphicon-pencil::before { content: '\270F\FE0F'; } .glyphicon-heart::before { content: '\2764\FE0F'; } .glyphicon-remove::before { content: '\2716'; } .glyphicon-edit::before { content: '\270F'; } .glyphicon-plus::before { content: '+'; } .glyphicon-ban-circle::before { content: '\1F6AB'; } .glyphicon-grain::before { content: ''; } /* Social share — CSS buttons instead of images */ #share-buttons { display: flex; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #F3F4F6; } #share-buttons a { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; font-family: 'Commissioner', sans-serif; font-size: 0.75rem; font-weight: 600; border-radius: 6px; color: #fff; cursor: pointer; transition: opacity 0.15s; text-decoration: none; } #share-buttons a:hover { opacity: 0.85; } #share-buttons img { display: none !important; } /* VK */ #share-buttons a:nth-child(1) { background: #4C75A3; } #share-buttons a:nth-child(1)::after { content: 'VK'; } /* Facebook */ #share-buttons a:nth-child(2) { background: #1877F2; } #share-buttons a:nth-child(2)::after { content: 'FB'; } /* Mail.ru */ #share-buttons a:nth-child(3) { background: #FF9E00; } #share-buttons a:nth-child(3)::after { content: '@'; } /* OK */ #share-buttons a:nth-child(4) { background: #EE8208; } #share-buttons a:nth-child(4)::after { content: 'OK'; } /* Twitter */ #share-buttons a:nth-child(5) { background: #1A1A1A; } #share-buttons a:nth-child(5)::after { content: 'X'; } /* Author listing */ .author-list-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #F3F4F6; } .author-list-item:last-child { border-bottom: none; } .author-list-item img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid #E5E7EB; flex-shrink: 0; } .author-list-info { min-width: 0; } .author-list-name { font-size: 1.05rem; font-weight: 600; color: #1A1A1A; transition: color 0.15s; } .author-list-name:hover { color: #2563EB; } .author-list-desc { font-size: 0.82rem; color: #6B7280; line-height: 1.3; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Author page */ .author-header { display: flex; gap: 24px; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 24px; margin-bottom: 24px; } .author-photo { flex-shrink: 0; } .author-photo img { width: 200px; height: auto; border-radius: 12px; object-fit: cover; } .author-info { flex: 1; min-width: 0; } .author-name { font-family: 'Commissioner', sans-serif; font-size: 1.6rem; font-weight: 700; color: #1A1A1A; margin: 0 0 4px; } .author-name-eng { font-size: 0.9rem; color: #6B7280; margin-bottom: 8px; } .author-dates { font-size: 0.9rem; color: #6B7280; margin-bottom: 12px; } .author-dates a { color: #2563EB; } .author-bio { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.1rem; line-height: 1.5; color: #1A1A1A; font-style: italic; } .author-search { display: flex; gap: 8px; margin-bottom: 20px; } @media (max-width: 640px) { .author-header { flex-direction: column; align-items: center; text-align: center; } .author-photo img { width: 150px; } .author-search { flex-direction: column; } } /* Best weekly — ranked cards */ .best-card { display: flex; align-items: flex-start; gap: 16px; } .best-rank { font-family: 'Commissioner', sans-serif; font-size: 1.4rem; font-weight: 700; color: #D1D5DB; min-width: 36px; text-align: center; line-height: 1.2; flex-shrink: 0; padding-top: 2px; } .best-card:nth-child(-n+3) .best-rank { color: #2563EB; font-size: 1.6rem; } .best-body { flex: 1; min-width: 0; } .best-quote { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2rem; line-height: 1.4; color: #1A1A1A; display: block; margin-bottom: 8px; transition: color 0.15s; } .best-quote:hover { color: #2563EB; } .best-meta { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #6B7280; } .best-meta img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid #E5E7EB; } .best-meta a { color: #6B7280; transition: color 0.15s; } .best-meta a:hover { color: #2563EB; } .best-rating { background: #EFF6FF; color: #2563EB; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; } /* Archive list */ .archive-list { margin: 8px 0; } .archive-year { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; } .archive-year-title { font-family: 'Commissioner', sans-serif; font-size: 1.3rem; font-weight: 700; margin: 0 0 12px; } .archive-year-title a { color: #1A1A1A; transition: color 0.15s; } .archive-year-title a:hover { color: #2563EB; } .archive-months { display: flex; flex-wrap: wrap; gap: 8px; } .archive-month-link { display: inline-block; padding: 6px 14px; font-family: 'Commissioner', sans-serif; font-size: 0.85rem; font-weight: 500; color: #2563EB; background: #EFF6FF; border-radius: 8px; transition: background 0.15s, color 0.15s; } .archive-month-link:hover { background: #2563EB; color: #fff; } /* Aforikon grid */ .aforikon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0; } .aforikon-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; transition: box-shadow 0.15s; } .aforikon-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .aforikon-card img { width: 100%; height: 240px; object-fit: cover; display: block; } .aforikon-info { padding: 16px 20px; } .aforikon-info h2 { font-family: 'Commissioner', sans-serif; font-size: 1.05rem; font-weight: 600; margin: 0 0 6px; line-height: 1.3; } .aforikon-info h2 a { color: #1A1A1A; transition: color 0.15s; } .aforikon-info h2 a:hover { color: #2563EB; } .aforikon-date { font-size: 0.8rem; color: #6B7280; } .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 0; font-size: 0.9rem; } .pagination a { color: #2563EB; padding: 6px 10px; border-radius: 6px; transition: background 0.15s; } .pagination a:hover { background: #EFF6FF; } .pagination .pg-current { font-weight: 600; color: #1A1A1A; } .pagination .disabled { color: #D1D5DB; } @media (max-width: 640px) { .aforikon-grid { grid-template-columns: 1fr; } .aforikon-card img { height: 200px; } } /* Legacy grid for included content */ .row { display: flex; flex-wrap: wrap; margin: 0; max-width: 100%; overflow: hidden; word-break: break-word; } .col-md-1 { flex: 0 0 40px; max-width: 40px; padding-right: 8px; } .col-md-2 { flex: 0 0 16.666%; max-width: 16.666%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; padding-right: 8px; } .col-md-5 { flex: 0 0 41.666%; max-width: 41.666%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 1; min-width: 0; } .col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.333%; max-width: 83.333%; } .col-md-11 { flex: 0 0 91.666%; max-width: 91.666%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; } .link, .link1 { color: #2563EB; font-size: 0.875rem; font-weight: 500; transition: color 0.15s; } .link:hover, .link1:hover { color: #1D4ED8; } @media (max-width: 960px) { .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10 { flex: 0 0 100%; max-width: 100%; } .hp-section { margin-bottom: 32px; } .hp-section-title { font-size: 1.25rem; } .hp-featured { padding: 24px 20px; border-radius: 10px; } .hp-featured::before { font-size: 4.5rem; } .hp-featured-quote a { font-size: 1.25rem; } .hp-widget { padding: 20px; border-radius: 10px; } .hp-sidebar { display: flex; flex-direction: column; gap: 0; } .aph-card { padding: 20px; } .aph-card::before { font-size: 4rem; } } @media (max-width: 640px) { .container { padding-left: 16px; padding-right: 16px; } .hp-layout { padding: 12px 16px 32px; } .hp-section { margin-bottom: 28px; } .hp-section-title { font-size: 1.2rem; } .hp-featured { padding: 20px 16px; } .hp-featured::before { font-size: 4rem; } .hp-featured-quote a { font-size: 1.2rem; } .hp-widget { padding: 16px; } .aph-card { padding: 16px; border-radius: 10px; } .aph-card::before { font-size: 3.5rem; } .aph-text { font-size: 1rem; } }