Many blog changes
This commit is contained in:
Peter
@@ -35,17 +35,27 @@ body {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
font-family: inherit;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
min-height: 48px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #179e83;
|
||||
color: white;
|
||||
color: white !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
background: #11725e;
|
||||
box-shadow: 0 4px 16px rgba(23, 158, 131, 0.3);
|
||||
color: white !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@@ -780,6 +790,41 @@ body {
|
||||
animation-delay: var(--animation-delay, 0s);
|
||||
}
|
||||
|
||||
/* Blog responsive styles */
|
||||
@media (max-width: 768px) {
|
||||
.featured-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.featured-article.main-feature {
|
||||
grid-row: span 1;
|
||||
}
|
||||
|
||||
.articles-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.newsletter-form .form-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.article-author {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.blog-categories h2,
|
||||
.blog-featured h2,
|
||||
.blog-recent h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.nav-menu {
|
||||
@@ -930,6 +975,648 @@ img {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Blog-specific styles */
|
||||
.blog-categories {
|
||||
padding: 80px 0;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.blog-categories h2 {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 60px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.blog-featured {
|
||||
padding: 80px 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.blog-featured h2 {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 60px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.featured-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.featured-article {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid #f0f0f0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.featured-article:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.featured-article.main-feature {
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.featured-article .article-image {
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.featured-article.main-feature .article-image {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.featured-article .article-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.featured-article:hover .article-image img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.featured-article .article-content {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.article-meta .category {
|
||||
background: #179e83;
|
||||
color: white;
|
||||
padding: 5px 12px;
|
||||
border-radius: 15px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.article-meta time {
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.article-meta .read-time {
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.featured-article h3 {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.featured-article h3 a {
|
||||
color: #1a1a1a;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.featured-article h3 a:hover {
|
||||
color: #179e83;
|
||||
}
|
||||
|
||||
.featured-article p {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding-top: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.article-footer .read-more {
|
||||
color: #179e83;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.article-footer .read-more:hover {
|
||||
color: #144784;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.blog-recent {
|
||||
padding: 80px 0;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.blog-recent h2 {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 60px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.articles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 30px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid #f0f0f0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.article-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.article-card h3 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.article-card h3 a {
|
||||
color: #1a1a1a;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.article-card h3 a:hover {
|
||||
color: #179e83;
|
||||
}
|
||||
|
||||
.article-card p {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.blog-pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.blog-newsletter {
|
||||
padding: 80px 0;
|
||||
background: linear-gradient(135deg, #144784 0%, #179e83 100%);
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.newsletter-content h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.newsletter-content p {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 40px;
|
||||
opacity: 0.95;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.newsletter-form .form-group {
|
||||
display: flex;
|
||||
max-width: 500px;
|
||||
margin: 0 auto 20px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.newsletter-form input {
|
||||
flex: 1;
|
||||
padding: 15px 20px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.newsletter-form .btn {
|
||||
padding: 15px 30px;
|
||||
border-radius: 50px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.newsletter-privacy {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.newsletter-privacy a {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Blog article styles */
|
||||
.blog-article {
|
||||
padding: 40px 0 80px;
|
||||
background: white;
|
||||
position: relative;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blog-article .container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.article-header {
|
||||
max-width: 800px;
|
||||
margin: 0 auto 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.article-subtitle {
|
||||
font-size: 1.3rem;
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.article-author {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.author-info strong {
|
||||
color: #1a1a1a;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.author-info p {
|
||||
color: #666;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.article-share a {
|
||||
color: #179e83;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #179e83;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.article-share a:hover {
|
||||
background: #179e83;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.article-image {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto 40px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.article-image img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.article-toc {
|
||||
max-width: 800px;
|
||||
margin: 0 auto 40px;
|
||||
background: #f8f9fa;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e1e5e9;
|
||||
}
|
||||
|
||||
.article-toc h2 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.article-toc ol {
|
||||
list-style: none;
|
||||
counter-reset: toc-counter;
|
||||
}
|
||||
|
||||
.article-toc li {
|
||||
counter-increment: toc-counter;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.article-toc li::before {
|
||||
content: counter(toc-counter) ". ";
|
||||
color: #179e83;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-toc a {
|
||||
color: #144784;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.article-toc a:hover {
|
||||
color: #179e83;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.7;
|
||||
background: white;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.article-content pre {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
margin: 25px 0;
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.article-content pre code {
|
||||
display: block;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 20px;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #495057;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.article-content code {
|
||||
background: #f1f3f4;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 0.9em;
|
||||
color: #d63384;
|
||||
}
|
||||
|
||||
.article-content pre code {
|
||||
background: transparent;
|
||||
padding: 20px;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
/* Code block copy button */
|
||||
.article-content pre {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.article-content pre:hover::before {
|
||||
content: '📋 Copy';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: #179e83;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.article-content pre[data-copied]:hover::before {
|
||||
content: '✅ Copied!';
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
.article-content pre:hover {
|
||||
border-color: #179e83;
|
||||
box-shadow: 0 2px 8px rgba(23, 158, 131, 0.1);
|
||||
}
|
||||
|
||||
.article-content h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
margin: 40px 0 20px;
|
||||
color: #1a1a1a;
|
||||
border-bottom: 2px solid #179e83;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.article-content h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin: 30px 0 15px;
|
||||
color: #144784;
|
||||
}
|
||||
|
||||
.article-content p {
|
||||
margin-bottom: 20px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.article-content ul,
|
||||
.article-content ol {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.article-content li {
|
||||
margin-bottom: 8px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.article-content a {
|
||||
color: #179e83;
|
||||
text-decoration: underline;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.article-content a:hover {
|
||||
color: #144784;
|
||||
}
|
||||
|
||||
.callout-box {
|
||||
background: #f8f9fa;
|
||||
border-left: 4px solid #179e83;
|
||||
padding: 20px;
|
||||
margin: 30px 0;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
.callout-box.legal-warning {
|
||||
background: #fff3cd;
|
||||
border-left-color: #f59e0b;
|
||||
}
|
||||
|
||||
.callout-box h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.comparison-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin: 30px 0;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.comparison-item {
|
||||
background: white;
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e1e5e9;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.comparison-item h4 {
|
||||
margin-bottom: 15px;
|
||||
color: #144784;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.best-practice-box {
|
||||
background: linear-gradient(135deg, #e8f5f3 0%, #f0f9ff 100%);
|
||||
border: 1px solid #179e83;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.best-practice-box h3 {
|
||||
margin-top: 0;
|
||||
color: #144784;
|
||||
}
|
||||
|
||||
/* Image optimization */
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Lazy loading support */
|
||||
img[loading="lazy"] {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
img[loading="lazy"].loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* WebP support with fallbacks */
|
||||
picture img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Focus improvements for keyboard navigation */
|
||||
a:focus-visible,
|
||||
button:focus-visible,
|
||||
input:focus-visible,
|
||||
textarea:focus-visible {
|
||||
outline: 2px solid #179e83;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 4px rgba(23, 158, 131, 0.1);
|
||||
}
|
||||
|
||||
/* Reading progress bar */
|
||||
.reading-progress {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
left: 0;
|
||||
width: 0%;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #179e83, #144784);
|
||||
z-index: 999;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* Category link styles */
|
||||
.category-link {
|
||||
background: #179e83;
|
||||
color: white !important;
|
||||
padding: 5px 12px;
|
||||
border-radius: 15px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.category-link:hover {
|
||||
background: #144784;
|
||||
color: white !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.loading::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -2171,6 +2858,134 @@ a:focus-visible {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Related Articles Section */
|
||||
.related-articles {
|
||||
padding: 60px 0;
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid #e1e5e9;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.related-articles h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 40px;
|
||||
color: #1a1a1a;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.related-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.related-card {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid #e1e5e9;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.related-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.related-card h3 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.related-card h3 a {
|
||||
color: #1a1a1a;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.related-card h3 a:hover {
|
||||
color: #179e83;
|
||||
}
|
||||
|
||||
.related-card p {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.related-card .read-time {
|
||||
color: #179e83;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Button text visibility fix */
|
||||
.btn * {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
.btn:visited,
|
||||
.btn:link,
|
||||
.btn:active {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-primary:visited,
|
||||
.btn-primary:link,
|
||||
.btn-primary:active {
|
||||
color: white !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.btn-primary:hover,
|
||||
.btn-primary:focus {
|
||||
color: white !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/* Expert Consultation CTA */
|
||||
.expert-consultation-cta {
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
border: 2px solid #179e83;
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
margin: 40px 0;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.expert-consultation-cta h3 {
|
||||
color: #144784;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.expert-consultation-cta p {
|
||||
color: #666;
|
||||
margin-bottom: 25px;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.expert-consultation-cta .btn {
|
||||
font-size: 1.1rem;
|
||||
padding: 15px 30px;
|
||||
min-width: 200px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Testimonials Grid */
|
||||
.testimonials {
|
||||
padding: 80px 0;
|
||||
@@ -2380,4 +3195,37 @@ a:focus-visible {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.related-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.related-card {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
.expert-consultation-cta {
|
||||
padding: 30px 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.article-content pre {
|
||||
margin: 20px -20px;
|
||||
border-radius: 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.article-content pre code {
|
||||
padding: 15px 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.article-content pre:hover::before {
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
font-size: 11px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
@@ -388,22 +388,51 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('Stats section not found');
|
||||
}
|
||||
|
||||
// Lazy Loading for Images
|
||||
// Enhanced Lazy Loading for Images with WebP support
|
||||
const images = document.querySelectorAll('img[loading="lazy"]');
|
||||
|
||||
// WebP support detection
|
||||
function supportsWebP() {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 1;
|
||||
canvas.height = 1;
|
||||
return canvas.toDataURL('image/webp').indexOf('webp') !== -1;
|
||||
}
|
||||
|
||||
if ('IntersectionObserver' in window) {
|
||||
const imageObserver = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src || img.src;
|
||||
|
||||
// Handle data-src for lazy loading
|
||||
if (img.dataset.src) {
|
||||
img.src = img.dataset.src;
|
||||
}
|
||||
|
||||
// Handle WebP support
|
||||
if (img.dataset.webp && supportsWebP()) {
|
||||
img.src = img.dataset.webp;
|
||||
}
|
||||
|
||||
img.classList.add('loaded');
|
||||
img.style.opacity = '1';
|
||||
imageObserver.unobserve(img);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
rootMargin: '50px 0px',
|
||||
threshold: 0.1
|
||||
});
|
||||
|
||||
images.forEach(img => imageObserver.observe(img));
|
||||
images.forEach(img => {
|
||||
// Set initial opacity for lazy images
|
||||
if (img.loading === 'lazy') {
|
||||
img.style.opacity = '0';
|
||||
img.style.transition = 'opacity 0.3s ease';
|
||||
}
|
||||
imageObserver.observe(img);
|
||||
});
|
||||
}
|
||||
|
||||
// Scroll to Top Button
|
||||
@@ -468,18 +497,38 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
window.removeEventListener('scroll', handleScrollTopButton);
|
||||
window.addEventListener('scroll', throttledScrollHandler);
|
||||
|
||||
// Preload critical resources
|
||||
function preloadResource(href, as = 'image') {
|
||||
// Preload critical resources with WebP support
|
||||
function preloadResource(href, as = 'image', type = null) {
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'preload';
|
||||
link.href = href;
|
||||
link.as = as;
|
||||
if (type) {
|
||||
link.type = type;
|
||||
}
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
|
||||
// Preload hero image and other critical assets
|
||||
// preloadResource('assets/images/hero-data-analytics.svg');
|
||||
// preloadResource('assets/images/logo.svg');
|
||||
// Preload critical images with WebP format preference
|
||||
function preloadCriticalImages() {
|
||||
const criticalImages = [
|
||||
'assets/images/ukds-main-logo.png',
|
||||
'assets/images/hero-data-analytics.svg'
|
||||
];
|
||||
|
||||
criticalImages.forEach(imagePath => {
|
||||
// Try WebP first if supported
|
||||
if (supportsWebP()) {
|
||||
const webpPath = imagePath.replace(/\.(jpg|jpeg|png)$/i, '.webp');
|
||||
preloadResource(webpPath, 'image', 'image/webp');
|
||||
} else {
|
||||
preloadResource(imagePath, 'image');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize critical image preloading
|
||||
preloadCriticalImages();
|
||||
|
||||
// Initialize tooltips (if needed)
|
||||
const tooltipElements = document.querySelectorAll('[data-tooltip]');
|
||||
@@ -545,5 +594,24 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
}
|
||||
|
||||
// Performance monitoring
|
||||
if ('performance' in window) {
|
||||
window.addEventListener('load', function() {
|
||||
setTimeout(() => {
|
||||
const perfData = performance.getEntriesByType('navigation')[0];
|
||||
if (perfData) {
|
||||
console.log('Page Load Performance:', {
|
||||
'DNS Lookup': Math.round(perfData.domainLookupEnd - perfData.domainLookupStart),
|
||||
'TCP Connection': Math.round(perfData.connectEnd - perfData.connectStart),
|
||||
'Request/Response': Math.round(perfData.responseEnd - perfData.requestStart),
|
||||
'DOM Processing': Math.round(perfData.domComplete - perfData.domLoading),
|
||||
'Total Load Time': Math.round(perfData.loadEventEnd - perfData.navigationStart)
|
||||
});
|
||||
}
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
|
||||
console.log('UK Data Services website initialized successfully');
|
||||
console.log('Performance optimizations: Lazy loading, WebP support, and preloading enabled');
|
||||
});
|
||||
Reference in New Issue
Block a user