diff --git a/igny8-wp-plugin/templates/assets/css/igny8-content-template.css b/igny8-wp-plugin/templates/assets/css/igny8-content-template.css index d4866834..d5afa30c 100644 --- a/igny8-wp-plugin/templates/assets/css/igny8-content-template.css +++ b/igny8-wp-plugin/templates/assets/css/igny8-content-template.css @@ -35,11 +35,11 @@ /* === Header Styles === */ .igny8-header { background: var(--wp--preset--color--base, #ffffff); - border: 1px solid rgba(0, 0, 0, 0.08); + border: 2px solid rgba(0, 0, 0, 0.12); border-radius: var(--igny8-border-radius); padding: var(--igny8-spacing); margin-bottom: var(--igny8-spacing); - box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.15); } .igny8-header-back { @@ -163,9 +163,10 @@ padding: 0.25rem 0.75rem; border-radius: var(--igny8-border-radius-xs); font-size: 0.75rem; - background: rgba(0, 0, 0, 0.05); + background: rgba(0, 0, 0, 0.08); color: inherit; line-height: 1.4; + border: 1px solid rgba(0, 0, 0, 0.12); } /* === SEO Section === */ @@ -228,11 +229,11 @@ /* === Featured Image === */ .igny8-featured-image-block { background: var(--wp--preset--color--base, #ffffff); - border: 1px solid rgba(0, 0, 0, 0.08); + border: 2px solid rgba(0, 0, 0, 0.12); border-radius: var(--igny8-border-radius); overflow: hidden; margin-bottom: var(--igny8-spacing); - box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05); } .igny8-featured-header { @@ -291,10 +292,16 @@ .igny8-content-section, .igny8-content-fallback { background: var(--wp--preset--color--base, #ffffff); - border: 1px solid rgba(0, 0, 0, 0.08); + border: 2px solid rgba(0, 0, 0, 0.12); border-radius: var(--igny8-border-radius); overflow: hidden; - box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05); + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.igny8-content-section:hover { + transform: translateY(-2px); + box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08); } .igny8-intro-section, @@ -304,12 +311,13 @@ .igny8-section-label { font-size: 0.7rem; - font-weight: 600; + font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; - opacity: 0.6; - margin-bottom: 1.5rem; + opacity: 0.5; + margin-bottom: 0.5rem; display: block; + color: rgba(59, 130, 246, 0.8); } .igny8-section-container { @@ -327,14 +335,16 @@ display: inline-flex; align-items: center; justify-content: center; - width: 2.5rem; - height: 2.5rem; + width: 3rem; + height: 3rem; border-radius: 50%; - background: rgba(59, 130, 246, 0.1); - color: rgba(37, 99, 235, 1); - font-weight: 600; - font-size: 0.875rem; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9)); + color: #ffffff; + font-weight: 700; + font-size: 1.125rem; flex-shrink: 0; + box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); + border: 2px solid rgba(255, 255, 255, 0.9); } .igny8-section-heading-wrapper { @@ -474,11 +484,12 @@ /* === In-Article Images === */ .igny8-image-figure { - border: 1px solid rgba(0, 0, 0, 0.08); + border: 2px solid rgba(0, 0, 0, 0.12); border-radius: var(--igny8-border-radius-md); overflow: hidden; - background: rgba(0, 0, 0, 0.02); + background: var(--wp--preset--color--base, #ffffff); margin: 0; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); } .igny8-in-article-image { @@ -549,8 +560,9 @@ margin-top: 1.5rem; padding: 1.5rem; background: var(--wp--preset--color--base, #ffffff); - border: 1px solid rgba(0, 0, 0, 0.08); + border: 2px solid rgba(0, 0, 0, 0.12); border-radius: var(--igny8-border-radius-xs); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .igny8-metadata-table { diff --git a/igny8-wp-plugin/templates/parts/igny8-content-sections.php b/igny8-wp-plugin/templates/parts/igny8-content-sections.php index 5f2d1619..b534309d 100644 --- a/igny8-wp-plugin/templates/parts/igny8-content-sections.php +++ b/igny8-wp-plugin/templates/parts/igny8-content-sections.php @@ -41,8 +41,33 @@ if (!defined('ABSPATH')) {
@@ -52,13 +77,11 @@ if (!defined('ABSPATH')) {
-
@@ -74,7 +97,7 @@ if (!defined('ABSPATH')) {
- +