:root { --idesa-primary: #3182ce;
--idesa-primary-dark: #2c5282;
--idesa-secondary: #4a5568;
--idesa-accent: #38a169; --idesa-text-primary: #1a202c;
--idesa-text-secondary: #4a5568;
--idesa-text-muted: #718096;
--idesa-text-light: #a0aec0; --idesa-bg-primary: #ffffff;
--idesa-bg-secondary: #f7fafc;
--idesa-bg-tertiary: #edf2f7; --idesa-border: #e2e8f0;
--idesa-border-dark: #cbd5e0; --idesa-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
--idesa-font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
--idesa-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; --idesa-text-xs: 0.75rem; --idesa-text-sm: 0.875rem; --idesa-text-base: 1rem; --idesa-text-lg: 1.125rem; --idesa-text-xl: 1.25rem; --idesa-text-2xl: 1.5rem; --idesa-text-3xl: 1.875rem; --idesa-text-4xl: 2.25rem; --idesa-text-5xl: 3rem;  --idesa-leading-none: 1;
--idesa-leading-tight: 1.25;
--idesa-leading-snug: 1.375;
--idesa-leading-normal: 1.5;
--idesa-leading-relaxed: 1.625;
--idesa-leading-loose: 2; --idesa-spacing-1: 0.25rem; --idesa-spacing-2: 0.5rem; --idesa-spacing-3: 0.75rem; --idesa-spacing-4: 1rem; --idesa-spacing-5: 1.25rem; --idesa-spacing-6: 1.5rem; --idesa-spacing-8: 2rem; --idesa-spacing-10: 2.5rem; --idesa-spacing-12: 3rem; --idesa-spacing-16: 4rem; --idesa-spacing-20: 5rem;  --idesa-radius-sm: 0.125rem; --idesa-radius: 0.25rem; --idesa-radius-md: 0.375rem; --idesa-radius-lg: 0.5rem; --idesa-radius-xl: 0.75rem; --idesa-radius-full: 9999px; --idesa-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--idesa-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--idesa-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--idesa-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--idesa-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --idesa-transition-fast: 150ms ease;
--idesa-transition: 250ms ease;
--idesa-transition-slow: 350ms ease; --idesa-z-dropdown: 1000;
--idesa-z-sticky: 1020;
--idesa-z-fixed: 1030;
--idesa-z-modal-backdrop: 1040;
--idesa-z-modal: 1050;
--idesa-z-popover: 1060;
--idesa-z-tooltip: 1070;
} *,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--idesa-font-sans);
font-size: var(--idesa-text-base);
line-height: var(--idesa-leading-relaxed);
color: var(--idesa-text-primary);
background-color: var(--idesa-bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border-style: none;
}
picture {
display: block;
}
figure {
margin: 0;
}
svg {
vertical-align: middle;
fill: currentColor;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
border: 0;
border-top: 1px solid var(--idesa-border);
margin: var(--idesa-spacing-8) 0;
} h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: var(--idesa-leading-tight);
color: var(--idesa-text-primary);
margin-top: 0;
margin-bottom: var(--idesa-spacing-4);
}
h1 {
font-size: var(--idesa-text-4xl);
}
h2 {
font-size: var(--idesa-text-3xl);
}
h3 {
font-size: var(--idesa-text-2xl);
}
h4 {
font-size: var(--idesa-text-xl);
}
h5 {
font-size: var(--idesa-text-lg);
}
h6 {
font-size: var(--idesa-text-base);
text-transform: uppercase;
letter-spacing: 0.05em;
}
p {
margin-bottom: var(--idesa-spacing-6);
}
a {
color: var(--idesa-primary);
text-decoration: none;
background-color: transparent;
transition: color var(--idesa-transition);
}
a:hover {
color: var(--idesa-primary-dark);
text-decoration: underline;
}
a:focus {
outline: 2px solid var(--idesa-primary);
outline-offset: 2px;
}
a:not([href]):not([class]) {
color: inherit;
text-decoration: none;
}
a:not([href]):not([class]):hover {
color: inherit;
text-decoration: none;
}
strong, b {
font-weight: 700;
}
em, i {
font-style: italic;
}
small {
font-size: var(--idesa-text-sm);
}
sub, sup {
font-size: var(--idesa-text-xs);
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
code, kbd, pre, samp {
font-family: var(--idesa-font-mono);
font-size: var(--idesa-text-sm);
}
code {
background-color: var(--idesa-bg-tertiary);
padding: 0.2em 0.4em;
border-radius: var(--idesa-radius);
color: var(--idesa-text-primary);
}
pre {
background-color: var(--idesa-bg-secondary);
padding: var(--idesa-spacing-4);
border-radius: var(--idesa-radius);
overflow-x: auto;
margin-bottom: var(--idesa-spacing-6);
line-height: var(--idesa-leading-relaxed);
}
pre code {
background-color: transparent;
padding: 0;
border-radius: 0;
color: inherit;
}
blockquote {
border-left: 4px solid var(--idesa-primary);
padding-left: var(--idesa-spacing-6);
margin: var(--idesa-spacing-8) 0;
font-style: italic;
color: var(--idesa-text-secondary);
}
blockquote p:last-child {
margin-bottom: 0;
}
cite {
display: block;
margin-top: var(--idesa-spacing-2);
font-size: var(--idesa-text-sm);
color: var(--idesa-text-muted);
font-style: normal;
} .container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--idesa-spacing-4);
}
@media (min-width: 640px) {
.container {
padding: 0 var(--idesa-spacing-6);
}
}
@media (min-width: 1024px) {
.container {
padding: 0 var(--idesa-spacing-8);
}
}
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-main {
flex: 1 0 auto;
width: 100%;
} .skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--idesa-primary);
color: white;
padding: var(--idesa-spacing-2) var(--idesa-spacing-4);
text-decoration: none;
z-index: var(--idesa-z-fixed);
transition: top var(--idesa-transition);
}
.skip-link:focus {
top: 0;
} .site-header {
background-color: var(--idesa-bg-primary);
border-bottom: 1px solid var(--idesa-border);
position: sticky;
top: 0;
z-index: var(--idesa-z-sticky);
box-shadow: var(--idesa-shadow-sm);
transition: all var(--idesa-transition);
}
.site-header.scrolled {
box-shadow: var(--idesa-shadow);
}
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--idesa-spacing-3) 0;
}
@media (min-width: 768px) {
.header-container {
padding: var(--idesa-spacing-4) 0;
}
} .site-branding {
display: flex;
align-items: center;
flex-shrink: 0;
}
.site-logo {
height: 40px;
width: auto;
max-width: 200px;
}
@media (min-width: 768px) {
.site-logo {
height: 48px;
}
}
.site-title {
font-size: var(--idesa-text-xl);
font-weight: 700;
margin: 0;
line-height: 1;
}
.site-title a {
color: var(--idesa-text-primary);
text-decoration: none;
}
.site-title a:hover {
color: var(--idesa-primary);
text-decoration: none;
}
.site-description {
font-size: var(--idesa-text-sm);
color: var(--idesa-text-muted);
margin: var(--idesa-spacing-1) 0 0;
display: none;
}
@media (min-width: 768px) {
.site-description {
display: block;
}
} .main-navigation {
display: flex;
align-items: center;
}
.main-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: var(--idesa-spacing-6);
}
.main-menu > li {
position: relative;
}
.main-menu > li > a {
color: var(--idesa-text-secondary);
font-weight: 500;
padding: var(--idesa-spacing-2) 0;
position: relative;
text-decoration: none;
transition: color var(--idesa-transition);
}
.main-menu > li > a:hover,
.main-menu > li > a:focus,
.main-menu > li.current-menu-item > a,
.main-menu > li.current-page-ancestor > a {
color: var(--idesa-primary);
text-decoration: none;
}
.main-menu > li > a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--idesa-primary);
transition: width var(--idesa-transition);
}
.main-menu > li > a:hover::after,
.main-menu > li.current-menu-item > a::after,
.main-menu > li.current-page-ancestor > a::after {
width: 100%;
} .main-menu .sub-menu,
.main-menu .children {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background-color: var(--idesa-bg-primary);
border: 1px solid var(--idesa-border);
border-radius: var(--idesa-radius);
box-shadow: var(--idesa-shadow-lg);
padding: var(--idesa-spacing-2) 0;
list-style: none;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all var(--idesa-transition);
z-index: var(--idesa-z-dropdown);
}
.main-menu li:hover > .sub-menu,
.main-menu li:hover > .children,
.main-menu li.focus > .sub-menu,
.main-menu li.focus > .children {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.main-menu .sub-menu li,
.main-menu .children li {
width: 100%;
}
.main-menu .sub-menu a,
.main-menu .children a {
display: block;
padding: var(--idesa-spacing-2) var(--idesa-spacing-4);
color: var(--idesa-text-secondary);
text-decoration: none;
transition: all var(--idesa-transition);
}
.main-menu .sub-menu a:hover,
.main-menu .children a:hover,
.main-menu .sub-menu a:focus,
.main-menu .children a:focus {
background-color: var(--idesa-bg-secondary);
color: var(--idesa-primary);
} .menu-toggle {
display: none;
background: none;
border: none;
padding: var(--idesa-spacing-2);
cursor: pointer;
margin-left: var(--idesa-spacing-2);
}
.menu-toggle span {
display: block;
width: 24px;
height: 2px;
background-color: var(--idesa-text-secondary);
transition: all var(--idesa-transition);
transform-origin: center;
}
.menu-toggle span + span {
margin-top: 5px;
}
.menu-toggle.active span:first-child {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:last-child {
transform: rotate(-45deg) translate(7px, -6px);
} .header-search {
margin-left: var(--idesa-spacing-4);
}
.search-form {
display: flex;
align-items: center;
}
.search-form label {
margin: 0;
}
.search-form .search-field {
padding: var(--idesa-spacing-2) var(--idesa-spacing-3);
border: 1px solid var(--idesa-border);
border-radius: var(--idesa-radius);
font-size: var(--idesa-text-sm);
width: 180px;
transition: all var(--idesa-transition);
}
.search-form .search-field:focus {
outline: none;
border-color: var(--idesa-primary);
box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
width: 220px;
}
.search-form .search-submit {
display: none;
} @media (max-width: 1023px) {
.menu-toggle {
display: block;
}
.main-navigation {
position: fixed;
top: 70px;
left: 0;
right: 0;
background-color: var(--idesa-bg-primary);
border-top: 1px solid var(--idesa-border);
box-shadow: var(--idesa-shadow-lg);
padding: var(--idesa-spacing-4);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all var(--idesa-transition);
z-index: var(--idesa-z-fixed);
}
.main-navigation.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.main-menu {
flex-direction: column;
gap: var(--idesa-spacing-3);
}
.main-menu .sub-menu,
.main-menu .children {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
border-left: 2px solid var(--idesa-border);
margin-left: var(--idesa-spacing-4);
margin-top: var(--idesa-spacing-2);
padding: var(--idesa-spacing-2) 0;
}
.header-search {
margin-left: 0;
margin-top: var(--idesa-spacing-4);
width: 100%;
}
.search-form .search-field {
width: 100%;
}
.search-form .search-field:focus {
width: 100%;
}
} .breadcrumbs {
padding: var(--idesa-spacing-4) 0;
margin-bottom: var(--idesa-spacing-8);
border-bottom: 1px solid var(--idesa-border);
}
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
gap: var(--idesa-spacing-2);
}
.breadcrumbs li {
display: flex;
align-items: center;
color: var(--idesa-text-muted);
font-size: var(--idesa-text-sm);
}
.breadcrumbs li:not(:last-child)::after {
content: '/';
margin-left: var(--idesa-spacing-2);
color: var(--idesa-text-light);
}
.breadcrumbs a {
color: var(--idesa-text-secondary);
text-decoration: none;
transition: color var(--idesa-transition);
}
.breadcrumbs a:hover {
color: var(--idesa-primary);
text-decoration: underline;
}
.breadcrumbs [aria-current="page"] {
color: var(--idesa-text-primary);
font-weight: 500;
}
.breadcrumbs .home-link {
display: flex;
align-items: center;
gap: var(--idesa-spacing-1);
}
.breadcrumbs .home-link svg {
width: 16px;
height: 16px;
color: var(--idesa-text-muted);
} .homepage-content,
.archive-content {
padding: var(--idesa-spacing-8) 0;
}
.archive-header {
margin-bottom: var(--idesa-spacing-8);
text-align: center;
}
.archive-title {
font-size: var(--idesa-text-3xl);
color: var(--idesa-text-primary);
margin-bottom: var(--idesa-spacing-2);
}
.archive-description {
font-size: var(--idesa-text-lg);
color: var(--idesa-text-secondary);
max-width: 800px;
margin: 0 auto;
} .featured-posts {
margin-bottom: var(--idesa-spacing-12);
}
.featured-posts .section-title {
font-size: var(--idesa-text-2xl);
color: var(--idesa-text-primary);
margin-bottom: var(--idesa-spacing-6);
padding-bottom: var(--idesa-spacing-3);
border-bottom: 2px solid var(--idesa-border);
}
.featured-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--idesa-spacing-8);
}
@media (min-width: 768px) {
.featured-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.featured-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.featured-post {
display: flex;
flex-direction: column;
height: 100%;
background-color: var(--idesa-bg-primary);
border-radius: var(--idesa-radius-lg);
overflow: hidden;
box-shadow: var(--idesa-shadow);
transition: transform var(--idesa-transition), box-shadow var(--idesa-transition);
}
.featured-post:hover {
transform: translateY(-4px);
box-shadow: var(--idesa-shadow-lg);
}
.featured-thumbnail {
position: relative;
overflow: hidden;
aspect-ratio: 16/9;
}
.featured-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--idesa-transition-slow);
}
.featured-post:hover .featured-thumbnail img {
transform: scale(1.05);
}
.featured-content {
padding: var(--idesa-spacing-6);
flex: 1;
display: flex;
flex-direction: column;
}
.featured-categories {
margin-bottom: var(--idesa-spacing-3);
}
.featured-title {
font-size: var(--idesa-text-xl);
margin-bottom: var(--idesa-spacing-4);
line-height: var(--idesa-leading-tight);
}
.featured-title a {
color: var(--idesa-text-primary);
text-decoration: none;
transition: color var(--idesa-transition);
}
.featured-title a:hover {
color: var(--idesa-primary);
text-decoration: none;
}
.featured-excerpt {
color: var(--idesa-text-secondary);
margin-bottom: var(--idesa-spacing-4);
flex: 1;
}
.featured-meta {
display: flex;
align-items: center;
gap: var(--idesa-spacing-4);
font-size: var(--idesa-text-sm);
color: var(--idesa-text-muted);
margin-top: auto;
} .articles-grid {
display: flex;
flex-direction: column;
gap: var(--idesa-spacing-8);
}
.article-card {
display: grid;
grid-template-columns: 1fr;
gap: var(--idesa-spacing-6);
padding-bottom: var(--idesa-spacing-8);
border-bottom: 1px solid var(--idesa-border);
}
@media (min-width: 768px) {
.article-card {
grid-template-columns: 300px 1fr;
gap: var(--idesa-spacing-8);
}
}
.article-thumbnail {
position: relative;
overflow: hidden;
border-radius: var(--idesa-radius);
aspect-ratio: 16/9;
}
.article-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--idesa-transition-slow);
}
.article-card:hover .article-thumbnail img {
transform: scale(1.05);
}
.article-content {
display: flex;
flex-direction: column;
}
.article-categories {
margin-bottom: var(--idesa-spacing-3);
}
.article-category {
display: inline-block;
background-color: var(--idesa-primary);
color: white;
font-size: var(--idesa-text-xs);
font-weight: 600;
padding: var(--idesa-spacing-1) var(--idesa-spacing-3);
border-radius: var(--idesa-radius-full);
margin-right: var(--idesa-spacing-2);
margin-bottom: var(--idesa-spacing-2);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: background-color var(--idesa-transition);
}
.article-category:hover {
background-color: var(--idesa-primary-dark);
color: white;
text-decoration: none;
}
.article-title {
font-size: var(--idesa-text-xl);
margin-bottom: var(--idesa-spacing-3);
line-height: var(--idesa-leading-tight);
}
.article-title a {
color: var(--idesa-text-primary);
text-decoration: none;
transition: color var(--idesa-transition);
}
.article-title a:hover {
color: var(--idesa-primary);
text-decoration: none;
}
.article-excerpt {
color: var(--idesa-text-secondary);
margin-bottom: var(--idesa-spacing-4);
flex: 1;
}
.article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--idesa-spacing-4);
font-size: var(--idesa-text-sm);
color: var(--idesa-text-muted);
}
.article-meta > span {
display: flex;
align-items: center;
gap: var(--idesa-spacing-1);
}
.article-meta svg {
width: 16px;
height: 16px;
color: var(--idesa-primary);
} .sticky {
position: relative;
border: 2px solid var(--idesa-primary);
border-radius: var(--idesa-radius-lg);
padding: var(--idesa-spacing-6);
background-color: var(--idesa-bg-secondary);
}
.sticky::before {
content: 'Unggulan';
position: absolute;
top: -12px;
left: var(--idesa-spacing-6);
background-color: var(--idesa-primary);
color: white;
font-size: var(--idesa-text-xs);
font-weight: 600;
padding: var(--idesa-spacing-1) var(--idesa-spacing-3);
border-radius: var(--idesa-radius-full);
text-transform: uppercase;
letter-spacing: 0.05em;
} .no-results {
text-align: center;
padding: var(--idesa-spacing-12) 0;
}
.no-results h2 {
font-size: var(--idesa-text-2xl);
color: var(--idesa-text-primary);
margin-bottom: var(--idesa-spacing-4);
}
.no-results p {
color: var(--idesa-text-secondary);
margin-bottom: var(--idesa-spacing-6);
max-width: 600px;
margin-left: auto;
margin-right: auto;
} .single-content {
padding: var(--idesa-spacing-8) 0;
}
.entry-header {
margin-bottom: var(--idesa-spacing-8);
}
.entry-title {
font-size: var(--idesa-text-4xl);
line-height: var(--idesa-leading-tight);
margin-bottom: var(--idesa-spacing-4);
color: var(--idesa-text-primary);
}
@media (min-width: 768px) {
.entry-title {
font-size: var(--idesa-text-5xl);
}
}
.entry-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--idesa-spacing-4);
margin-bottom: var(--idesa-spacing-6);
padding-bottom: var(--idesa-spacing-6);
border-bottom: 1px solid var(--idesa-border);
color: var(--idesa-text-muted);
font-size: var(--idesa-text-sm);
}
.entry-meta > span {
display: flex;
align-items: center;
gap: var(--idesa-spacing-2);
}
.entry-meta svg {
width: 16px;
height: 16px;
color: var(--idesa-primary);
}
.entry-meta a {
color: var(--idesa-text-secondary);
text-decoration: none;
transition: color var(--idesa-transition);
}
.entry-meta a:hover {
color: var(--idesa-primary);
text-decoration: underline;
}
.featured-image-container {
margin-bottom: var(--idesa-spacing-8);
}
.featured-image {
width: 100%;
height: auto;
border-radius: var(--idesa-radius-lg);
box-shadow: var(--idesa-shadow);
}
.entry-content {
font-size: var(--idesa-text-lg);
line-height: var(--idesa-leading-relaxed);
color: var(--idesa-text-secondary);
}
.entry-content > * {
margin-bottom: var(--idesa-spacing-6);
}
.entry-content > *:last-child {
margin-bottom: 0;
}
.entry-content h2 {
font-size: var(--idesa-text-3xl);
margin-top: var(--idesa-spacing-12);
margin-bottom: var(--idesa-spacing-4);
padding-bottom: var(--idesa-spacing-3);
border-bottom: 2px solid var(--idesa-border);
color: var(--idesa-text-primary);
}
.entry-content h3 {
font-size: var(--idesa-text-2xl);
margin-top: var(--idesa-spacing-8);
margin-bottom: var(--idesa-spacing-3);
color: var(--idesa-text-primary);
}
.entry-content h4 {
font-size: var(--idesa-text-xl);
margin-top: var(--idesa-spacing-6);
margin-bottom: var(--idesa-spacing-2);
color: var(--idesa-text-primary);
}
.entry-content img {
border-radius: var(--idesa-radius);
box-shadow: var(--idesa-shadow);
max-width: 100%;
height: auto;
}
.entry-content img.alignleft {
float: left;
margin-right: var(--idesa-spacing-6);
margin-bottom: var(--idesa-spacing-4);
}
.entry-content img.alignright {
float: right;
margin-left: var(--idesa-spacing-6);
margin-bottom: var(--idesa-spacing-4);
}
.entry-content img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.entry-content figure {
margin: var(--idesa-spacing-8) 0;
text-align: center;
}
.entry-content figure img {
margin-bottom: var(--idesa-spacing-4);
}
.entry-content figcaption {
font-size: var(--idesa-text-sm);
color: var(--idesa-text-muted);
font-style: italic;
text-align: center;
}
.entry-content blockquote {
border-left: 4px solid var(--idesa-primary);
padding: var(--idesa-spacing-6) var(--idesa-spacing-8);
margin: var(--idesa-spacing-8) 0;
background-color: var(--idesa-bg-secondary);
border-radius: 0 var(--idesa-radius) var(--idesa-radius) 0;
font-style: italic;
color: var(--idesa-text-primary);
position: relative;
}
.entry-content blockquote p {
font-size: var(--idesa-text-xl);
line-height: var(--idesa-leading-relaxed);
margin-bottom: 0;
}
.entry-content blockquote::before {
content: '"';
font-size: 4rem;
color: var(--idesa-primary);
opacity: 0.2;
position: absolute;
top: -1rem;
left: 1rem;
font-family: var(--idesa-font-serif);
font-weight: 700;
}
.entry-content ul,
.entry-content ol {
padding-left: var(--idesa-spacing-6);
margin: var(--idesa-spacing-6) 0;
}
.entry-content li {
margin-bottom: var(--idesa-spacing-2);
}
.entry-content li:last-child {
margin-bottom: 0;
}
.entry-content ul {
list-style-type: disc;
}
.entry-content ol {
list-style-type: decimal;
}
.entry-content ul ul,
.entry-content ol ul {
list-style-type: circle;
}
.entry-content ol ol,
.entry-content ul ol {
list-style-type: lower-roman;
}
.entry-content table {
width: 100%;
border-collapse: collapse;
margin: var(--idesa-spacing-8) 0;
font-size: var(--idesa-text-sm);
border: 1px solid var(--idesa-border);
}
.entry-content table th {
background-color: var(--idesa-bg-secondary);
font-weight: 600;
text-align: left;
padding: var(--idesa-spacing-3) var(--idesa-spacing-4);
border-bottom: 2px solid var(--idesa-border);
}
.entry-content table td {
padding: var(--idesa-spacing-3) var(--idesa-spacing-4);
border-bottom: 1px solid var(--idesa-border);
}
.entry-content table tr:last-child td {
border-bottom: none;
}
.entry-content pre {
background-color: #1a202c;
color: #e2e8f0;
padding: var(--idesa-spacing-6);
border-radius: var(--idesa-radius);
overflow-x: auto;
font-family: var(--idesa-font-mono);
font-size: var(--idesa-text-sm);
line-height: var(--idesa-leading-relaxed);
margin: var(--idesa-spacing-6) 0;
}
.entry-content code {
background-color: var(--idesa-bg-tertiary);
padding: 0.2em 0.4em;
border-radius: var(--idesa-radius);
color: var(--idesa-text-primary);
font-family: var(--idesa-font-mono);
font-size: var(--idesa-text-sm);
}
.entry-content pre code {
background-color: transparent;
padding: 0;
border-radius: 0;
color: inherit;
} .page-links {
margin: var(--idesa-spacing-8) 0;
padding: var(--idesa-spacing-6);
background-color: var(--idesa-bg-secondary);
border-radius: var(--idesa-radius);
border: 1px solid var(--idesa-border);
}
.page-links::before {
content: 'Halaman:';
display: block;
font-weight: 600;
margin-bottom: var(--idesa-spacing-3);
color: var(--idesa-text-secondary);
}
.page-number {
display: inline-block;
padding: var(--idesa-spacing-1) var(--idesa-spacing-3);
margin: 0 var(--idesa-spacing-1) var(--idesa-spacing-2) 0;
background-color: var(--idesa-bg-primary);
border: 1px solid var(--idesa-border);
border-radius: var(--idesa-radius);
color: var(--idesa-text-secondary);
text-decoration: none;
}
.page-number.current {
background-color: var(--idesa-primary);
color: white;
border-color: var(--idesa-primary);
}
a.page-number:hover {
background-color: var(--idesa-bg-tertiary);
text-decoration: none;
} .entry-footer {
margin-top: var(--idesa-spacing-8);
padding-top: var(--idesa-spacing-8);
border-top: 1px solid var(--idesa-border);
}
.post-tags {
margin-bottom: var(--idesa-spacing-6);
}
.post-tags strong {
display: inline-block;
margin-right: var(--idesa-spacing-3);
color: var(--idesa-text-secondary);
}
.post-tags a {
display: inline-block;
background-color: var(--idesa-bg-secondary);
color: var(--idesa-text-secondary);
padding: var(--idesa-spacing-1) var(--idesa-spacing-3);
border-radius: var(--idesa-radius-full);
font-size: var(--idesa-text-sm);
margin: 0 var(--idesa-spacing-1) var(--idesa-spacing-2) 0;
text-decoration: none;
transition: all var(--idesa-transition);
}
.post-tags a:hover {
background-color: var(--idesa-primary);
color: white;
text-decoration: none;
}
.share-buttons {
margin: var(--idesa-spacing-6) 0;
padding: var(--idesa-spacing-6);
background-color: var(--idesa-bg-secondary);
border-radius: var(--idesa-radius);
border: 1px solid var(--idesa-border);
}
.share-label {
display: block;
font-weight: 600;
margin-bottom: var(--idesa-spacing-3);
color: var(--idesa-text-secondary);
}
.share-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--idesa-radius);
margin-right: var(--idesa-spacing-2);
margin-bottom: var(--idesa-spacing-2);
text-decoration: none;
transition: all var(--idesa-transition);
}
.share-button svg {
width: 20px;
height: 20px;
}
.share-button.facebook {
background-color: #1877f2;
color: white;
}
.share-button.twitter {
background-color: #1da1f2;
color: white;
}
.share-button.whatsapp {
background-color: #25d366;
color: white;
}
.share-button.email {
background-color: var(--idesa-text-secondary);
color: white;
}
.share-button:hover {
opacity: 0.9;
text-decoration: none;
transform: translateY(-2px);
} .author-box {
display: flex;
gap: var(--idesa-spacing-6);
margin: var(--idesa-spacing-12) 0;
padding: var(--idesa-spacing-8);
background-color: var(--idesa-bg-secondary);
border-radius: var(--idesa-radius-lg);
border: 1px solid var(--idesa-border);
}
.author-avatar img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
.author-info {
flex: 1;
}
.author-title {
font-size: var(--idesa-text-sm);
color: var(--idesa-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--idesa-spacing-1);
}
.author-name {
font-size: var(--idesa-text-xl);
margin-bottom: var(--idesa-spacing-3);
color: var(--idesa-text-primary);
}
.author-bio {
color: var(--idesa-text-secondary);
margin-bottom: var(--idesa-spacing-4);
}
.author-posts {
display: inline-block;
background-color: var(--idesa-primary);
color: white;
padding: var(--idesa-spacing-2) var(--idesa-spacing-4);
border-radius: var(--idesa-radius);
font-size: var(--idesa-text-sm);
text-decoration: none;
transition: background-color var(--idesa-transition);
}
.author-posts:hover {
background-color: var(--idesa-primary-dark);
color: white;
text-decoration: none;
} .related-posts {
margin: var(--idesa-spacing-12) 0;
padding-top: var(--idesa-spacing-8);
border-top: 1px solid var(--idesa-border);
}
.related-posts h2 {
font-size: var(--idesa-text-2xl);
margin-bottom: var(--idesa-spacing-6);
color: var(--idesa-text-primary);
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--idesa-spacing-6);
}
.related-post {
display: flex;
flex-direction: column;
background-color: var(--idesa-bg-primary);
border-radius: var(--idesa-radius);
overflow: hidden;
border: 1px solid var(--idesa-border);
transition: transform var(--idesa-transition), box-shadow var(--idesa-transition);
}
.related-post:hover {
transform: translateY(-4px);
box-shadow: var(--idesa-shadow-md);
}
.related-post img {
width: 100%;
height: 150px;
object-fit: cover;
display: block;
}
.related-post-content {
padding: var(--idesa-spacing-4);
flex: 1;
display: flex;
flex-direction: column;
}
.related-post h3 {
font-size: var(--idesa-text-base);
margin-bottom: var(--idesa-spacing-2);
line-height: var(--idesa-leading-tight);
}
.related-post h3 a {
color: var(--idesa-text-primary);
text-decoration: none;
transition: color var(--idesa-transition);
}
.related-post h3 a:hover {
color: var(--idesa-primary);
text-decoration: none;
}
.related-meta {
font-size: var(--idesa-text-sm);
color: var(--idesa-text-muted);
margin-top: auto;
} .post-navigation {
display: flex;
flex-direction: column;
gap: var(--idesa-spacing-4);
margin: var(--idesa-spacing-8) 0;
padding: var(--idesa-spacing-6);
background-color: var(--idesa-bg-secondary);
border-radius: var(--idesa-radius);
border: 1px solid var(--idesa-border);
}
@media (min-width: 768px) {
.post-navigation {
flex-direction: row;
justify-content: space-between;
}
}
.nav-previous,
.nav-next {
flex: 1;
}
.nav-label {
display: block;
font-size: var(--idesa-text-sm);
color: var(--idesa-text-muted);
margin-bottom: var(--idesa-spacing-1);
}
.nav-previous a,
.nav-next a {
display: block;
color: var(--idesa-text-primary);
text-decoration: none;
font-weight: 500;
transition: color var(--idesa-transition);
}
.nav-previous a:hover,
.nav-next a:hover {
color: var(--idesa-primary);
text-decoration: underline;
}
.nav-next {
text-align: right;
} .reading-progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: var(--idesa-border);
z-index: var(--idesa-z-fixed);
}
.reading-progress-fill {
height: 100%;
background-color: var(--idesa-primary);
width: 0;
transition: width 0.1s ease;
} .page-content {
padding: var(--idesa-spacing-8) 0;
}
.page-title {
font-size: var(--idesa-text-4xl);
line-height: var(--idesa-leading-tight);
margin-bottom: var(--idesa-spacing-6);
color: var(--idesa-text-primary);
} .contact-form {
max-width: 600px;
margin: 0 auto;
} .error-404 {
text-align: center;
padding: var(--idesa-spacing-12) 0;
}
.error-404 .page-title {
font-size: var(--idesa-text-5xl);
margin-bottom: var(--idesa-spacing-4);
}
.error-404 p {
font-size: var(--idesa-text-lg);
color: var(--idesa-text-secondary);
margin-bottom: var(--idesa-spacing-8);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.search-form-404 {
max-width: 500px;
margin: 0 auto var(--idesa-spacing-8);
} .content-area {
display: grid;
grid-template-columns: 1fr;
gap: var(--idesa-spacing-8);
}
@media (min-width: 1024px) {
.content-area.has-sidebar {
grid-template-columns: 1fr 300px;
}
} .widget {
margin-bottom: var(--idesa-spacing-8);
}
.widget-title {
font-size: var(--idesa-text-lg);
font-weight: 600;
margin-bottom: var(--idesa-spacing-4);
padding-bottom: var(--idesa-spacing-2);
border-bottom: 2px solid var(--idesa-primary);
color: var(--idesa-text-primary);
}
.widget ul {
list-style: none;
margin: 0;
padding: 0;
}
.widget li {
padding: var(--idesa-spacing-3) 0;
border-bottom: 1px solid var(--idesa-border);
}
.widget li:last-child {
border-bottom: none;
}
.widget a {
color: var(--idesa-text-secondary);
text-decoration: none;
transition: color var(--idesa-transition);
}
.widget a:hover {
color: var(--idesa-primary);
text-decoration: underline;
}
.widget .current-menu-item > a,
.widget .current-cat > a {
color: var(--idesa-primary);
font-weight: 500;
} .widget_recent_entries .post-date {
display: block;
font-size: var(--idesa-text-sm);
color: var(--idesa-text-muted);
margin-top: var(--idesa-spacing-1);
} .widget_categories .children {
margin-left: var(--idesa-spacing-4);
margin-top: var(--idesa-spacing-2);
} .widget_search .search-form {
display: flex;
}
.widget_search .search-field {
flex: 1;
padding: var(--idesa-spacing-2) var(--idesa-spacing-3);
border: 1px solid var(--idesa-border);
border-right: none;
border-radius: var(--idesa-radius) 0 0 var(--idesa-radius);
font-size: var(--idesa-text-sm);
}
.widget_search .search-submit {
background-color: var(--idesa-primary);
color: white;
border: 1px solid var(--idesa-primary);
border-radius: 0 var(--idesa-radius) var(--idesa-radius) 0;
padding: var(--idesa-spacing-2) var(--idesa-spacing-4);
cursor: pointer;
transition: background-color var(--idesa-transition);
}
.widget_search .search-submit:hover {
background-color: var(--idesa-primary-dark);
} .tagcloud {
display: flex;
flex-wrap: wrap;
gap: var(--idesa-spacing-2);
}
.tag-cloud-link {
display: inline-block;
background-color: var(--idesa-bg-secondary);
color: var(--idesa-text-secondary);
padding: var(--idesa-spacing-1) var(--idesa-spacing-3);
border-radius: var(--idesa-radius-full);
font-size: var(--idesa-text-sm) !important;
text-decoration: none;
transition: all var(--idesa-transition);
}
.tag-cloud-link:hover {
background-color: var(--idesa-primary);
color: white;
text-decoration: none;
} .widget_calendar table {
width: 100%;
border-collapse: collapse;
}
.widget_calendar caption {
caption-side: top;
font-weight: 600;
margin-bottom: var(--idesa-spacing-2);
color: var(--idesa-text-primary);
}
.widget_calendar th,
.widget_calendar td {
text-align: center;
padding: var(--idesa-spacing-1);
border: 1px solid var(--idesa-border);
}
.widget_calendar th {
background-color: var(--idesa-bg-secondary);
font-weight: 600;
}
.widget_calendar .wp-calendar-nav {
display: flex;
justify-content: space-between;
margin-top: var(--idesa-spacing-2);
} .comments-area {
margin: var(--idesa-spacing-12) 0;
padding-top: var(--idesa-spacing-8);
border-top: 1px solid var(--idesa-border);
}
.comments-title {
font-size: var(--idesa-text-2xl);
margin-bottom: var(--idesa-spacing-6);
color: var(--idesa-text-primary);
}
.comment-list {
list-style: none;
margin: 0 0 var(--idesa-spacing-8);
padding: 0;
}
.comment {
margin-bottom: var(--idesa-spacing-6);
padding: var(--idesa-spacing-6);
background-color: var(--idesa-bg-secondary);
border-radius: var(--idesa-radius);
border: 1px solid var(--idesa-border);
}
.comment.depth-1 {
background-color: var(--idesa-bg-primary);
}
.comment .children {
list-style: none;
margin: var(--idesa-spacing-4) 0 0 var(--idesa-spacing-4);
padding: 0;
}
@media (min-width: 768px) {
.comment .children {
margin-left: var(--idesa-spacing-8);
}
}
.comment-body {
position: relative;
}
.comment-meta {
display: flex;
align-items: center;
margin-bottom: var(--idesa-spacing-4);
}
.comment-author {
display: flex;
align-items: center;
gap: var(--idesa-spacing-3);
}
.comment-author .avatar {
width: 50px;
height: 50px;
border-radius: 50%;
}
.comment-author .fn {
font-weight: 600;
color: var(--idesa-text-primary);
}
.comment-author .fn a {
color: inherit;
text-decoration: none;
}
.comment-author .fn a:hover {
color: var(--idesa-primary);
text-decoration: underline;
}
.comment-metadata {
display: flex;
align-items: center;
gap: var(--idesa-spacing-3);
font-size: var(--idesa-text-sm);
color: var(--idesa-text-muted);
margin-left: auto;
}
.comment-metadata a {
color: inherit;
text-decoration: none;
}
.comment-metadata a:hover {
color: var(--idesa-primary);
text-decoration: underline;
}
.comment-content {
line-height: var(--idesa-leading-relaxed);
color: var(--idesa-text-secondary);
}
.comment-content p:last-child {
margin-bottom: 0;
}
.comment-reply-link {
display: inline-block;
background-color: var(--idesa-primary);
color: white;
padding: var(--idesa-spacing-1) var(--idesa-spacing-3);
border-radius: var(--idesa-radius);
font-size: var(--idesa-text-sm);
text-decoration: none;
margin-top: var(--idesa-spacing-3);
transition: background-color var(--idesa-transition);
}
.comment-reply-link:hover {
background-color: var(--idesa-primary-dark);
color: white;
text-decoration: none;
} .comment-respond {
margin-top: var(--idesa-spacing-8);
padding: var(--idesa-spacing-6);
background-color: var(--idesa-bg-secondary);
border-radius: var(--idesa-radius);
border: 1px solid var(--idesa-border);
}
.comment-reply-title {
font-size: var(--idesa-text-xl);
margin-bottom: var(--idesa-spacing-4);
color: var(--idesa-text-primary);
}
.comment-reply-title small {
font-size: var(--idesa-text-sm);
margin-left: var(--idesa-spacing-2);
}
.comment-reply-title small a {
color: var(--idesa-text-muted);
text-decoration: none;
}
.comment-reply-title small a:hover {
color: var(--idesa-primary);
text-decoration: underline;
}
.comment-form {
display: grid;
gap: var(--idesa-spacing-4);
}
.comment-form label {
display: block;
margin-bottom: var(--idesa-spacing-1);
font-weight: 500;
color: var(--idesa-text-secondary);
}
.comment-form .required {
color: #e53e3e;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
padding: var(--idesa-spacing-2) var(--idesa-spacing-3);
border: 1px solid var(--idesa-border);
border-radius: var(--idesa-radius);
font-family: var(--idesa-font-sans);
font-size: var(--idesa-text-base);
transition: all var(--idesa-transition);
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
outline: none;
border-color: var(--idesa-primary);
box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}
.comment-form textarea {
min-height: 150px;
resize: vertical;
}
.comment-form .form-submit {
margin-bottom: 0;
}
.comment-form .submit {
background-color: var(--idesa-primary);
color: white;
border: none;
padding: var(--idesa-spacing-2) var(--idesa-spacing-6);
border-radius: var(--idesa-radius);
font-size: var(--idesa-text-base);
font-weight: 500;
cursor: pointer;
transition: background-color var(--idesa-transition);
}
.comment-form .submit:hover {
background-color: var(--idesa-primary-dark);
}
.comment-form .comment-form-cookies-consent {
display: flex;
align-items: center;
gap: var(--idesa-spacing-2);
}
.comment-form .comment-form-cookies-consent label {
margin-bottom: 0;
font-weight: normal;
} .site-footer {
background-color: var(--idesa-bg-secondary);
padding: var(--idesa-spacing-12) 0 var(--idesa-spacing-8);
margin-top: var(--idesa-spacing-12);
border-top: 1px solid var(--idesa-border);
}
.footer-widgets {
display: grid;
grid-template-columns: 1fr;
gap: var(--idesa-spacing-8);
margin-bottom: var(--idesa-spacing-8);
}
@media (min-width: 768px) {
.footer-widgets.footer-2-columns {
grid-template-columns: repeat(2, 1fr);
}
.footer-widgets.footer-3-columns {
grid-template-columns: repeat(3, 1fr);
}
.footer-widgets.footer-4-columns {
grid-template-columns: repeat(4, 1fr);
}
}
.footer-bottom {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: var(--idesa-spacing-4);
padding-top: var(--idesa-spacing-8);
border-top: 1px solid var(--idesa-border);
text-align: center;
}
@media (min-width: 768px) {
.footer-bottom {
flex-direction: row;
text-align: left;
}
}
.copyright {
color: var(--idesa-text-muted);
font-size: var(--idesa-text-sm);
}
.copyright a {
color: var(--idesa-text-secondary);
text-decoration: none;
}
.copyright a:hover {
color: var(--idesa-primary);
text-decoration: underline;
}
.footer-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--idesa-spacing-4);
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 768px) {
.footer-menu {
justify-content: flex-end;
}
}
.footer-menu a {
color: var(--idesa-text-secondary);
font-size: var(--idesa-text-sm);
text-decoration: none;
transition: color var(--idesa-transition);
}
.footer-menu a:hover {
color: var(--idesa-primary);
text-decoration: underline;
} .back-to-top {
position: fixed;
bottom: var(--idesa-spacing-4);
right: var(--idesa-spacing-4);
width: 50px;
height: 50px;
background-color: var(--idesa-primary);
color: white;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all var(--idesa-transition);
z-index: var(--idesa-z-fixed);
box-shadow: var(--idesa-shadow-md);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background-color: var(--idesa-primary-dark);
transform: translateY(-2px);
}
.back-to-top svg {
width: 24px;
height: 24px;
} .pagination {
margin: var(--idesa-spacing-12) 0;
padding-top: var(--idesa-spacing-8);
border-top: 1px solid var(--idesa-border);
}
.pagination ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
gap: var(--idesa-spacing-1);
}
.pagination li {
margin: 0;
}
.pagination a,
.pagination span {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 var(--idesa-spacing-3);
background-color: var(--idesa-bg-primary);
border: 1px solid var(--idesa-border);
border-radius: var(--idesa-radius);
color: var(--idesa-text-secondary);
text-decoration: none;
font-weight: 500;
transition: all var(--idesa-transition);
}
.pagination a:hover {
background-color: var(--idesa-bg-secondary);
border-color: var(--idesa-border-dark);
text-decoration: none;
}
.pagination .current {
background-color: var(--idesa-primary);
border-color: var(--idesa-primary);
color: white;
}
.pagination .dots {
background-color: transparent;
border-color: transparent;
}
.pagination .prev,
.pagination .next {
font-weight: 500;
} input, textarea, select {
font-family: var(--idesa-font-sans);
font-size: var(--idesa-text-base);
line-height: var(--idesa-leading-normal);
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
width: 100%;
padding: var(--idesa-spacing-2) var(--idesa-spacing-3);
border: 1px solid var(--idesa-border);
border-radius: var(--idesa-radius);
transition: all var(--idesa-transition);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--idesa-primary);
box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}
input[type="checkbox"],
input[type="radio"] {
margin-right: var(--idesa-spacing-2);
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
background-color: var(--idesa-primary);
color: white;
border: none;
padding: var(--idesa-spacing-2) var(--idesa-spacing-6);
border-radius: var(--idesa-radius);
font-size: var(--idesa-text-base);
font-weight: 500;
cursor: pointer;
transition: background-color var(--idesa-transition);
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
background-color: var(--idesa-primary-dark);
}
button:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
input[type="submit"]:disabled {
opacity: 0.5;
cursor: not-allowed;
}  .screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 14px;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
} .text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; } .text-primary { color: var(--idesa-primary); }
.text-secondary { color: var(--idesa-text-secondary); }
.text-muted { color: var(--idesa-text-muted); }
.text-light { color: var(--idesa-text-light); }
.text-white { color: white; } .bg-primary { background-color: var(--idesa-primary); }
.bg-secondary { background-color: var(--idesa-bg-secondary); }
.bg-tertiary { background-color: var(--idesa-bg-tertiary); }
.bg-white { background-color: white; } .mt-1 { margin-top: var(--idesa-spacing-1); }
.mt-2 { margin-top: var(--idesa-spacing-2); }
.mt-3 { margin-top: var(--idesa-spacing-3); }
.mt-4 { margin-top: var(--idesa-spacing-4); }
.mt-6 { margin-top: var(--idesa-spacing-6); }
.mt-8 { margin-top: var(--idesa-spacing-8); }
.mb-1 { margin-bottom: var(--idesa-spacing-1); }
.mb-2 { margin-bottom: var(--idesa-spacing-2); }
.mb-3 { margin-bottom: var(--idesa-spacing-3); }
.mb-4 { margin-bottom: var(--idesa-spacing-4); }
.mb-6 { margin-bottom: var(--idesa-spacing-6); }
.mb-8 { margin-bottom: var(--idesa-spacing-8); }
.p-1 { padding: var(--idesa-spacing-1); }
.p-2 { padding: var(--idesa-spacing-2); }
.p-3 { padding: var(--idesa-spacing-3); }
.p-4 { padding: var(--idesa-spacing-4); }
.p-6 { padding: var(--idesa-spacing-6); }
.p-8 { padding: var(--idesa-spacing-8); } .d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.d-none { display: none; }
@media (min-width: 640px) {
.d-sm-block { display: block; }
.d-sm-none { display: none; }
}
@media (min-width: 768px) {
.d-md-block { display: block; }
.d-md-none { display: none; }
}
@media (min-width: 1024px) {
.d-lg-block { display: block; }
.d-lg-none { display: none; }
} .flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; } .grid-1 { grid-template-columns: repeat(1, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); } .border { border: 1px solid var(--idesa-border); }
.border-top { border-top: 1px solid var(--idesa-border); }
.border-right { border-right: 1px solid var(--idesa-border); }
.border-bottom { border-bottom: 1px solid var(--idesa-border); }
.border-left { border-left: 1px solid var(--idesa-border); }
.border-none { border: none; } .rounded-sm { border-radius: var(--idesa-radius-sm); }
.rounded { border-radius: var(--idesa-radius); }
.rounded-md { border-radius: var(--idesa-radius-md); }
.rounded-lg { border-radius: var(--idesa-radius-lg); }
.rounded-xl { border-radius: var(--idesa-radius-xl); }
.rounded-full { border-radius: var(--idesa-radius-full); } .shadow-sm { box-shadow: var(--idesa-shadow-sm); }
.shadow { box-shadow: var(--idesa-shadow); }
.shadow-md { box-shadow: var(--idesa-shadow-md); }
.shadow-lg { box-shadow: var(--idesa-shadow-lg); }
.shadow-xl { box-shadow: var(--idesa-shadow-xl); }
.shadow-none { box-shadow: none; } .w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }
.w-auto { width: auto; } .h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.h-auto { height: auto; } .visible { visibility: visible; }
.invisible { visibility: hidden; } .overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; } .position-static { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; } .z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; } .adsense-area {
margin: var(--idesa-spacing-8) 0;
text-align: center;
background-color: var(--idesa-bg-secondary);
padding: var(--idesa-spacing-6);
border-radius: var(--idesa-radius);
border: 2px dashed var(--idesa-border);
}
.adsense-leaderboard {
margin: var(--idesa-spacing-8) auto;
max-width: 728px;
}
.adsense-in-content {
margin: var(--idesa-spacing-12) 0;
}
.adsense-sidebar {
margin: var(--idesa-spacing-6) 0;
}
.adsense-footer {
margin: var(--idesa-spacing-8) 0;
} .adsense-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 90px;
color: var(--idesa-text-muted);
font-size: var(--idesa-text-sm);
}
.adsense-placeholder::before {
content: 'Ad';
display: inline-block;
background-color: var(--idesa-primary);
color: white;
padding: var(--idesa-spacing-1) var(--idesa-spacing-3);
border-radius: var(--idesa-radius);
font-size: var(--idesa-text-xs);
font-weight: 600;
margin-bottom: var(--idesa-spacing-2);
}  @media (min-width: 576px) {
.container {
max-width: 540px;
}
} @media (min-width: 768px) {
.container {
max-width: 720px;
}
.featured-grid {
grid-template-columns: repeat(2, 1fr);
}
.related-grid {
grid-template-columns: repeat(2, 1fr);
}
} @media (min-width: 992px) {
.container {
max-width: 960px;
}
.featured-grid {
grid-template-columns: repeat(3, 1fr);
}
.related-grid {
grid-template-columns: repeat(3, 1fr);
}
} @media (min-width: 1200px) {
.container {
max-width: 1140px;
}
.featured-grid {
grid-template-columns: repeat(3, 1fr);
}
.related-grid {
grid-template-columns: repeat(4, 1fr);
}
} @media (max-width: 767px) {
.hide-mobile {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hide-tablet {
display: none !important;
}
}
@media (min-width: 992px) {
.hide-desktop {
display: none !important;
}
} @media (hover: none) and (pointer: coarse) {
.menu-toggle:focus,
.back-to-top:focus,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
outline: 2px solid var(--idesa-primary);
outline-offset: 2px;
}
.article-card:hover .article-thumbnail img,
.featured-post:hover .featured-thumbnail img,
.related-post:hover {
transform: none;
}
} @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;
}
} @media (prefers-contrast: high) {
:root {
--idesa-primary: #0056b3;
--idesa-text-primary: #000000;
--idesa-border: #000000;
}
a {
text-decoration: underline;
}
} @media (prefers-color-scheme: dark) {
:root {
--idesa-primary: #63b3ed;
--idesa-primary-dark: #4299e1;
--idesa-text-primary: #e2e8f0;
--idesa-text-secondary: #cbd5e0;
--idesa-text-muted: #a0aec0;
--idesa-bg-primary: #1a202c;
--idesa-bg-secondary: #2d3748;
--idesa-bg-tertiary: #4a5568;
--idesa-border: #4a5568;
--idesa-border-dark: #718096;
}
.site-header {
background-color: var(--idesa-bg-primary);
}
.article-card,
.featured-post,
.related-post,
.comment,
.comment-respond,
.share-buttons,
.author-box,
.post-navigation {
background-color: var(--idesa-bg-secondary);
}
.adsense-area {
background-color: var(--idesa-bg-tertiary);
}
} @media print {
*,
*::before,
*::after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
.site-header,
.breadcrumbs,
.main-navigation,
.header-search,
.menu-toggle,
.sidebar,
.share-buttons,
.author-box,
.related-posts,
.comments-area,
.site-footer,
.back-to-top,
.adsense-area,
.reading-progress-bar {
display: none !important;
}
body {
font-size: 12pt;
line-height: 1.5;
}
.container {
max-width: 100%;
padding: 0;
}
a,
a:visited {
text-decoration: underline;
}
a[href^="http"]:after {
content: " (" attr(href) ")";
font-size: 10pt;
color: #666;
}
abbr[title]:after {
content: " (" attr(title) ")";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
.entry-title {
font-size: 18pt;
margin-bottom: 0.5in;
}
.entry-content {
font-size: 12pt;
line-height: 1.6;
}
.article-meta {
font-size: 10pt;
color: #666;
margin-bottom: 0.25in;
}
}  @keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 0.5s ease forwards;
} @keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.slide-in-left {
animation: slideInLeft 0.3s ease forwards;
} @keyframes slideInRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.slide-in-right {
animation: slideInRight 0.3s ease forwards;
} @keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.scale-in {
animation: scaleIn 0.3s ease forwards;
} @keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.pulse {
animation: pulse 2s infinite;
} @keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid var(--idesa-border);
border-top-color: var(--idesa-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
} .stagger-item {
opacity: 0;
animation: fadeIn 0.5s ease forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }
.stagger-item:nth-child(6) { animation-delay: 0.6s; }
.stagger-item:nth-child(7) { animation-delay: 0.7s; }
.stagger-item:nth-child(8) { animation-delay: 0.8s; }
.stagger-item:nth-child(9) { animation-delay: 0.9s; }
.stagger-item:nth-child(10) { animation-delay: 1s; }
.share-buttons {
margin: 20px 0;
}
.share-link {
margin-right: 15px;
padding: 5px 10px;
background: #f5f5f5;
border-radius: 3px;
text-decoration: none;
}
.share-link:hover {
background: #e0e0e0;
} .featured-image-container {
margin: 25px 0 30px;
max-width: 100%;
overflow: hidden;
border-radius: 8px;
}
.featured-image {
display: block;
width: 100%;
height: auto;
max-width: 100%;
object-fit: contain; } .entry-content img {
max-width: 100%;
height: auto;
display: block;
margin: 20px auto;
} .entry-content figure,
.entry-content .wp-caption {
max-width: 100%;
margin: 20px 0;
overflow: hidden;
}
.entry-content figure img,
.entry-content .wp-caption img {
width: 100%;
height: auto;
} .featured-image-caption,
.wp-caption-text {
text-align: center;
font-size: 0.9em;
color: #666;
font-style: italic;
margin-top: 10px;
padding: 0 15px;
line-height: 1.4;
} .entry-content .aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.entry-content .alignleft {
float: left;
margin-right: 20px;
margin-bottom: 20px;
max-width: 50%;
}
.entry-content .alignright {
float: right;
margin-left: 20px;
margin-bottom: 20px;
max-width: 50%;
} .entry-content:after {
content: "";
display: table;
clear: both;
} @media (max-width: 767px) {
.featured-image-container {
margin: 20px -15px; border-radius: 0;
}
.entry-content .alignleft,
.entry-content .alignright {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.featured-image-caption,
.wp-caption-text {
font-size: 0.85em;
padding: 0 10px;
}
} .site-main,
.entry-content,
.single-content {
overflow-wrap: break-word;
word-wrap: break-word;
overflow: hidden;
} .entry-content img[width],
.entry-content img[height] {
height: auto !important;
max-width: 100% !important;
} .adsense-middle-content, 
.adsense-end-of-post {
background-color: #f9f9f9;
border-radius: 8px;
padding: 20px;
margin: 25px 0;
text-align: center;
clear: both;
}
.adsense-end-of-post {
border-top: 2px solid #eee;
margin-top: 30px;
padding-top: 25px;
}
.adsense-middle-content ins,
.adsense-end-of-post ins {
display: block;
margin: 0 auto;
max-width: 100%;
} @media (max-width: 768px) {
.adsense-middle-content, 
.adsense-end-of-post {
margin: 20px 0;
padding: 15px;
}
.adsense-end-of-post {
margin-top: 25px;
padding-top: 20px;
}
}
@media (max-width: 480px) {
.adsense-middle-content, 
.adsense-end-of-post {
margin: 15px 0;
padding: 12px;
}
.adsense-end-of-post {
margin-top: 20px;
padding-top: 15px;
}
}@media (max-width: 575.98px) { html {
font-size: 14px;
}
.container {
padding-left: 15px;
padding-right: 15px;
} .site-logo {
height: 35px;
}
.site-title {
font-size: 1.25rem;
}
.header-container {
padding: 10px 20px;
} .main-navigation {
width: 100%;
left: 0;
right: 0;
top: 55px;
}
.main-menu > li > a {
padding: 12px 0;
font-size: 1rem;
} .breadcrumbs {
padding: 15px 0;
margin-bottom: 5px;
overflow-x: auto;
white-space: nowrap;
}
.breadcrumbs ol {
display: inline-flex;
flex-wrap: nowrap;
} .featured-posts {
margin-bottom: 40px;
}
.featured-posts .section-title {
font-size: 1.5rem;
margin-bottom: 20px;
}
.featured-post {
margin-bottom: 25px;
}
.featured-title {
font-size: 1.25rem;
}
.articles-grid {
gap: 30px;
}
.article-card {
padding-bottom: 30px;
gap: 20px;
}
.article-title {
font-size: 1.25rem;
} .entry-title {
font-size: 1.75rem;
line-height: 1.3;
}
@media (max-width: 575.98px) {
.entry-meta {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 8px 15px; padding-bottom: 15px;
font-size: 0.9em; } .entry-meta > * {
white-space: nowrap; } .entry-meta .sep {
margin: 0 5px;
}
}
.entry-content {
font-size: 1rem;
line-height: 1.6;
}
.entry-content h2 {
font-size: 1.5rem;
margin-top: 40px;
}
.entry-content h3 {
font-size: 1.25rem;
}
.entry-content blockquote {
padding: 20px;
margin: 30px 0;
}
.entry-content blockquote p {
font-size: 1.125rem;
} .author-box {
flex-direction: column;
text-align: center;
padding: 25px;
gap: 20px;
}
.author-avatar img {
width: 80px;
height: 80px;
} .related-posts h2 {
font-size: 1.5rem;
}
.related-grid {
grid-template-columns: 1fr;
gap: 20px;
} .comments-area {
margin: 40px 0;
padding-top: 40px;
}
.comments-title {
font-size: 1.5rem;
}
.comment {
padding: 20px;
}
.comment-meta {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.comment-metadata {
margin-left: 0;
} .footer-widgets {
grid-template-columns: 1fr;
gap: 30px;
}
.footer-bottom {
flex-direction: column;
text-align: center;
gap: 20px;
}
.footer-menu {
justify-content: center;
} .widget {
margin-bottom: 30px;
} .pagination ul {
gap: 5px;
}
.pagination a,
.pagination span {
min-width: 35px;
height: 35px;
font-size: 0.875rem;
} .hide-mobile {
display: none !important;
}
} @media (min-width: 576px) and (max-width: 767.98px) {
.container {
max-width: 540px;
} .site-logo {
height: 38px;
} .featured-grid {
grid-template-columns: 1fr;
}
.article-card {
grid-template-columns: 1fr;
} .entry-title {
font-size: 2rem;
} .related-grid {
grid-template-columns: repeat(2, 1fr);
} .footer-widgets.footer-3-columns,
.footer-widgets.footer-4-columns {
grid-template-columns: repeat(2, 1fr);
}
} @media (min-width: 768px) and (max-width: 991.98px) {
.container {
max-width: 720px;
} .main-navigation {
top: 62px;
} .featured-grid {
grid-template-columns: repeat(2, 1fr);
}
.article-card {
grid-template-columns: 250px 1fr;
gap: 25px;
} .entry-title {
font-size: 2.25rem;
} .related-grid {
grid-template-columns: repeat(2, 1fr);
} .content-area.has-sidebar {
grid-template-columns: 1fr;
}
.sidebar {
margin-top: 50px;
} .footer-widgets.footer-3-columns {
grid-template-columns: repeat(3, 1fr);
}
.footer-widgets.footer-4-columns {
grid-template-columns: repeat(2, 1fr);
} .hide-tablet {
display: none !important;
}
} @media (min-width: 992px) and (max-width: 1199.98px) {
.container {
max-width: 960px;
} .featured-grid {
grid-template-columns: repeat(3, 1fr);
}
.article-card {
grid-template-columns: 280px 1fr;
} .entry-title {
font-size: 2.5rem;
} .related-grid {
grid-template-columns: repeat(3, 1fr);
} .content-area.has-sidebar {
grid-template-columns: 1fr 280px;
gap: 40px;
}
} @media (min-width: 1200px) {
.container {
max-width: 1140px;
} .featured-grid {
grid-template-columns: repeat(3, 1fr);
}
.article-card {
grid-template-columns: 300px 1fr;
} .entry-title {
font-size: 2.75rem;
} .related-grid {
grid-template-columns: repeat(4, 1fr);
} .content-area.has-sidebar {
grid-template-columns: 1fr 300px;
gap: 50px;
} .hide-desktop {
display: none !important;
}
} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.site-logo img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
} @media print {
.site-header,
.main-navigation,
.breadcrumbs,
.sidebar,
.share-buttons,
.author-box,
.related-posts,
.comments-area,
.site-footer,
.back-to-top,
.adsense-area,
.reading-progress-bar {
display: none !important;
}
.container {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}
.article-card,
.featured-post,
.single-content,
.page-content {
padding: 0 !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
}
a {
color: #000 !important;
text-decoration: underline !important;
}
a[href]:after {
content: " (" attr(href) ")";
font-size: 10pt;
color: #666;
}
.entry-content img {
max-width: 100% !important;
page-break-inside: avoid;
}
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid;
page-break-inside: avoid;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
} @media (prefers-color-scheme: dark) {
:root {
--idesa-primary: #63b3ed;
--idesa-primary-dark: #4299e1;
--idesa-text-primary: #e2e8f0;
--idesa-text-secondary: #cbd5e0;
--idesa-text-muted: #a0aec0;
--idesa-bg-primary: #1a202c;
--idesa-bg-secondary: #2d3748;
--idesa-bg-tertiary: #4a5568;
--idesa-border: #4a5568;
--idesa-border-dark: #718096;
}
.site-header {
background-color: var(--idesa-bg-primary);
border-bottom-color: var(--idesa-border);
}
.article-card,
.featured-post,
.related-post,
.comment,
.comment-respond,
.share-buttons,
.author-box,
.post-navigation,
.widget {
background-color: var(--idesa-bg-secondary);
border-color: var(--idesa-border);
}
.adsense-area {
background-color: var(--idesa-bg-tertiary);
border-color: var(--idesa-border);
}
.site-footer {
background-color: var(--idesa-bg-primary);
border-top-color: var(--idesa-border);
}
.footer-bottom {
border-top-color: var(--idesa-border);
}
} @media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.featured-post:hover,
.article-card:hover,
.related-post:hover,
.back-to-top:hover {
transform: none !important;
}
.featured-thumbnail img,
.article-thumbnail img {
transition: none !important;
}
} @media (prefers-contrast: high) {
:root {
--idesa-primary: #0056b3;
--idesa-primary-dark: #003d82;
--idesa-text-primary: #000000;
--idesa-text-secondary: #333333;
--idesa-border: #000000;
}
.site-header {
border-bottom-width: 2px;
}
.article-card {
border-bottom-width: 2px;
}
.entry-content h2 {
border-bottom-width: 3px;
}
.widget-title {
border-bottom-width: 3px;
}
a {
text-decoration: underline;
}
a:hover {
text-decoration-thickness: 2px;
}
} @media (hover: none) and (pointer: coarse) { .menu-toggle {
padding: 15px;
}
.main-menu > li > a {
padding: 15px 0;
}
.article-title a,
.featured-title a,
.related-post h3 a {
padding: 10px 0;
display: block;
}
.pagination a,
.pagination span {
min-width: 44px;
height: 44px;
}
.back-to-top {
width: 60px;
height: 60px;
bottom: 30px;
right: 30px;
} .featured-post:hover,
.article-card:hover,
.related-post:hover {
transform: none;
box-shadow: var(--idesa-shadow);
}
.featured-post:active,
.article-card:active,
.related-post:active {
transform: translateY(-2px);
box-shadow: var(--idesa-shadow-md);
}
.featured-thumbnail img,
.article-thumbnail img {
transition: none;
}
.featured-post:active .featured-thumbnail img,
.article-card:active .article-thumbnail img {
transform: scale(1.02);
}
} @media (max-width: 767.98px) and (orientation: landscape) {
.main-navigation {
max-height: 70vh;
overflow-y: auto;
}
.featured-thumbnail,
.article-thumbnail {
aspect-ratio: 16/9;
}
.entry-title {
font-size: 1.5rem;
}
} @media (max-width: 767.98px) and (orientation: portrait) {
.featured-thumbnail,
.article-thumbnail {
aspect-ratio: 4/3;
}
} @media (max-width: 359.98px) {
html {
font-size: 13px;
}
.container {
padding-left: 10px;
padding-right: 10px;
}
.site-logo {
height: 30px;
}
.article-meta {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.article-meta > span {
font-size: 0.75rem;
}
.pagination a,
.pagination span {
min-width: 30px;
height: 30px;
padding: 0 8px;
font-size: 0.75rem;
}
} @media (min-width: 1440px) {
.container {
max-width: 1320px;
}
.content-area.has-sidebar {
grid-template-columns: 1fr 350px;
}
} @media (min-width: 1920px) {
.container {
max-width: 1600px;
}
.article-card {
grid-template-columns: 400px 1fr;
}
.content-area.has-sidebar {
grid-template-columns: 1fr 400px;
gap: 60px;
}
} @media print and (max-width: 8.5in) {
body {
font-size: 11pt;
}
.entry-title {
font-size: 18pt;
margin-bottom: 20pt;
}
.entry-content {
font-size: 11pt;
line-height: 1.5;
}
.entry-content h2 {
font-size: 14pt;
margin-top: 30pt;
}
.entry-content h3 {
font-size: 12pt;
}
}
@media print and (min-width: 8.6in) {
body {
font-size: 12pt;
}
.entry-title {
font-size: 24pt;
margin-bottom: 30pt;
}
.entry-content {
font-size: 12pt;
line-height: 1.6;
}
.entry-content h2 {
font-size: 18pt;
margin-top: 40pt;
}
.entry-content h3 {
font-size: 16pt;
}
} @media (prefers-reduced-data: reduce) {
.featured-thumbnail img,
.article-thumbnail img,
.related-post img,
.author-avatar img,
.comment-author .avatar {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.featured-post,
.article-card,
.related-post {
box-shadow: none;
border: 1px solid var(--idesa-border);
}
.featured-post:hover,
.article-card:hover,
.related-post:hover {
transform: none;
box-shadow: none;
}
.featured-thumbnail img,
.article-thumbnail img {
transition: none;
}
} @media (hover: hover) and (pointer: fine) {
.featured-post:hover,
.article-card:hover,
.related-post:hover {
transform: translateY(-4px);
box-shadow: var(--idesa-shadow-lg);
}
.featured-post:hover .featured-thumbnail img,
.article-card:hover .article-thumbnail img {
transform: scale(1.05);
}
.back-to-top:hover {
transform: translateY(-2px);
}
.share-button:hover {
transform: translateY(-2px);
}
}.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg}