*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#0b1730;background:#f7f9fd;line-height:1.65}a{color:inherit;text-decoration:none}.container{width:min(1440px,calc(100% - 48px));margin:auto}.announcement{background:linear-gradient(100deg,#075cf5,#147dff);color:#fff}.announcement-inner{min-height:52px;display:flex;align-items:center;gap:9px;font-size:14px}.announcement strong{color:#ffe94a}.announcement-icon{font-size:18px}.announcement-link{border:1px solid rgba(255,255,255,.5);padding:5px 14px;border-radius:999px;margin-left:8px}.top-links{margin-left:auto;display:flex;align-items:center;gap:12px}.top-links i{opacity:.45;font-style:normal}.social-mini{width:25px;height:25px;border-radius:50%;background:rgba(0,0,0,.2);display:grid;place-items:center;font-size:12px}.main-header{min-height:124px;background:#fff;display:flex;align-items:center;gap:30px;padding:20px 32px;border-radius:0 0 16px 16px;box-shadow:0 10px 30px rgba(17,45,86,.09)}.brand{display:flex;align-items:center;gap:13px;min-width:230px}.brand-mark{width:58px;height:58px;display:grid;place-items:center;font-size:45px;font-weight:900;font-style:italic;color:#fff;background:linear-gradient(135deg,#0c74ff,#15b7e9);clip-path:polygon(15% 10%,85% 10%,65% 38%,92% 38%,65% 90%,8% 90%,35% 53%,8% 53%)}.brand-copy{display:flex;flex-direction:column;line-height:1.15}.brand-copy strong{font-size:30px}.brand-copy small{font-size:12px;color:#71809b;margin-top:5px}.primary-nav{flex:1}.nav-list{display:flex;align-items:center;justify-content:center;gap:24px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:650}.nav-list li{white-space:nowrap}.nav-list a{display:block;padding:12px 0}.nav-list .current-menu-item a,.nav-list a:hover{color:var(--z-accent)}.header-actions{display:flex;align-items:center;gap:10px}.header-search{height:54px;width:245px;border-radius:30px;background:#f4f7fc;display:flex;padding:5px;border:1px solid #e7edf7}.header-search input{min-width:0;flex:1;border:0;background:transparent;padding:0 12px;outline:0}.header-search button,.login-button{border:0;background:var(--z-accent);color:#fff;border-radius:25px;height:44px;padding:0 16px;font-weight:700}.icon-button{border:0;background:#f4f7fc;width:44px;height:44px;border-radius:50%;font-size:20px}.login-button{display:flex;align-items:center;gap:6px}.menu-toggle{display:none}.site-main{min-height:400px;padding-bottom:60px}.hero{margin-top:34px;min-height:380px;border-radius:25px;background:radial-gradient(circle at 80% 30%,#155dce,#052878 65%,#031a55);color:#fff;display:flex;align-items:center;padding:50px 70px;overflow:hidden;position:relative}.hero-content{position:relative;z-index:2;max-width:610px}.eyebrow{display:inline-block;background:#176fe5;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:4px 14px;font-size:13px}.hero h1{font-size:48px;line-height:1.1;margin:20px 0}.hero h1 span{color:#15a4ff}.hero p{font-size:17px;color:#dbe7ff;max-width:520px}.hero-button{display:inline-flex;gap:18px;align-items:center;background:#fff;color:#0d65e8;border-radius:10px;padding:12px 20px;font-weight:750;margin-top:10px}.hero-art{margin-left:auto;width:310px;height:250px;position:relative}.book{position:absolute;right:10px;width:220px;height:32px;border-radius:6px;transform:rotate(-3deg);box-shadow:0 8px 15px #00194f66}.book-1{bottom:28px;background:#ef9b22}.book-2{bottom:63px;background:#f1f3fa}.book-3{bottom:98px;background:#4fc5df}.cap{position:absolute;right:45px;top:40px;font-size:105px;color:#0a62e5;transform:rotate(15deg);filter:drop-shadow(0 10px 8px #00194f66)}.section{margin-top:42px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.section-heading h2{font-size:22px;margin:0}.section-heading a{color:var(--z-accent);font-weight:650}.class-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.class-card{background:#fff;border:1px solid #e5ebf4;border-radius:15px;padding:24px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 6px 18px rgba(19,48,88,.05);font-weight:650}.class-card b{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:#fff;background:#178af4}.class-card.c2 b{background:#35b94a}.class-card.c3 b{background:#7c4dff}.class-card.c4 b{background:#ff981b}.resource-list{background:#fff;border:1px solid #e2e9f3;border-radius:16px;overflow:hidden}.resource-list a{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid #e8edf4}.resource-list a:last-child{border-bottom:0}.resource-list b{width:40px;height:40px;border-radius:9px;background:#087cf3;color:#fff;display:grid;place-items:center}.resource-list span{display:flex;flex-direction:column;flex:1}.resource-list small{color:#6e7b91}.resource-list i{font-size:24px;color:#62708a}.content-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;padding-top:40px}.page-header h1{font-size:34px}.post-card{display:grid;grid-template-columns:220px 1fr;gap:22px;background:#fff;padding:18px;border-radius:16px;border:1px solid #e5ebf4;margin-bottom:18px}.post-card img{width:100%;height:150px;object-fit:cover;border-radius:12px}.post-card h2{margin:5px 0;font-size:23px}.post-meta{font-size:13px;color:#6d7b91}.read-link{color:var(--z-accent);font-weight:700}.sidebar .widget{background:#fff;padding:20px;border:1px solid #e5ebf4;border-radius:16px;margin-bottom:18px}.widget-title{margin-top:0}.zevruno-single-post{background:#fff;border-radius:18px;padding:32px;border:1px solid #e5ebf4}.single-header h1{font-size:42px;line-height:1.2}.author-line{display:flex;align-items:center;gap:10px;font-weight:650}.author-line img{border-radius:50%}.verified{background:#1680ff;color:#fff;border-radius:50%;font-size:10px;padding:2px 5px}.featured-image img{width:100%;border-radius:15px}.entry-content{font-size:17px}.empty-state{padding:100px 20px;text-align:center}.empty-state>div{max-width:600px;margin:auto}.empty-state span{font-size:90px;font-weight:900;color:var(--z-accent)}.site-footer{position:relative;background:linear-gradient(145deg,#031a3e,#04112a);color:#dce7fb;padding-top:80px}.footer-wave{position:absolute;top:-25px;left:0;width:100%;height:45px;background:radial-gradient(80px 25px at 10% 100%,transparent 70%,#06204a 72%);opacity:.8}.footer-grid{display:grid;grid-template-columns:1.25fr 1fr 1.25fr 1.1fr 1.25fr;gap:45px;padding-bottom:55px}.footer-brand .brand{margin-bottom:20px}.footer-brand .brand-copy strong{color:#fff}.footer-brand p{color:#aebed7;max-width:330px}.made-badge{display:inline-block;background:#102c57;border:1px solid #28518a;border-radius:999px;padding:7px 14px;color:#fff}.social-row{display:flex;gap:12px;margin-top:22px}.social-row a{width:40px;height:40px;border-radius:50%;background:#0b3569;display:grid;place-items:center;color:#fff;font-weight:700}.footer-col h3,.newsletter h3{font-size:18px;color:#fff;margin:0 0 16px}.footer-col h3:after,.newsletter h3:after{content:"";display:block;width:45px;height:3px;border-radius:3px;background:var(--z-accent);margin-top:8px}.footer-col ul{list-style:none;padding:0;margin:0}.footer-col li{margin:10px 0}.footer-col a{color:#b9c8de}.footer-col a:hover{color:#fff}.newsletter{background:#071e41;border:1px solid #173b69;border-radius:18px;padding:20px}.newsletter p{color:#aebed7;font-size:14px}.newsletter form{display:flex;height:52px;border:1px solid #2a486e;border-radius:9px;overflow:hidden}.newsletter input{flex:1;min-width:0;background:transparent;border:0;padding:0 13px;color:#fff;outline:0}.newsletter button{width:55px;border:0;background:var(--z-accent);color:#fff;font-size:20px}.trust-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:11px}.trust-row span{color:#d7e3f6}.footer-bottom{border-top:1px solid #18385f;min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:13px;color:#aabbd3;position:relative}.footer-quote{font-style:italic}.back-top{width:48px;height:48px;border:0;border-radius:50%;background:#102d54;color:#fff;font-size:22px;cursor:pointer}html.dark-mode,body.dark-mode,.dark-mode{background:#07111f;color:#e7eefb}.dark-mode .main-header,.dark-mode .class-card,.dark-mode .resource-list,.dark-mode .post-card,.dark-mode .zevruno-single-post,.dark-mode .sidebar .widget{background:#0c192b;border-color:#20334d;color:#e7eefb}.dark-mode .header-search,.dark-mode .icon-button{background:#122238;color:#fff}.dark-mode .header-search input{color:#fff}.dark-mode .post-card h2 a{color:#fff}
@media(max-width:1180px){.nav-list{gap:13px}.main-header{gap:16px}.header-search{width:190px}.footer-grid{grid-template-columns:1.2fr 1fr 1fr 1fr}.newsletter{grid-column:span 4}.footer-quote{display:none}}
@media(max-width:800px){.container{width:min(100% - 28px,520px)}.announcement-inner{min-height:72px;flex-wrap:wrap;padding:10px 0}.announcement-link{margin-left:auto}.top-links{display:none}.main-header{min-height:92px;padding:14px 12px;border-radius:0;gap:12px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:4px;border:0;background:transparent;width:40px;height:40px}.menu-toggle span{width:25px;height:2px;background:#0c1a30}.brand{min-width:0;flex:1}.brand-mark{width:47px;height:47px;font-size:37px}.brand-copy strong{font-size:25px}.brand-copy small{font-size:10px}.primary-nav{position:absolute;top:164px;left:0;right:0;background:#fff;display:none;z-index:20;padding:10px 14px;box-shadow:0 15px 30px #09224720}.primary-nav.is-open{display:block}.nav-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.nav-list a{padding:12px}.header-actions{display:flex;flex-wrap:wrap;width:100%;order:3}.main-header{flex-wrap:wrap}.header-search{flex:1;width:auto}.login-button{height:44px}.hero{margin-top:20px;min-height:430px;padding:30px 25px;display:block}.hero h1{font-size:38px}.hero-art{width:100%;height:160px;margin-top:10px}.book{right:20px;width:190px}.cap{right:40px;top:10px;font-size:75px}.class-grid{grid-template-columns:repeat(2,1fr)}.content-wrap{grid-template-columns:1fr}.sidebar{display:none}.post-card{grid-template-columns:1fr}.post-card img{height:190px}.zevruno-single-post{padding:22px}.single-header h1{font-size:32px}.site-footer{padding-top:60px}.footer-grid{grid-template-columns:1fr;gap:0;padding-bottom:30px}.footer-brand{padding-bottom:30px}.footer-col{border-top:1px solid #1b385d;padding:0}.footer-col h3{padding:17px 0;margin:0;font-size:17px}.footer-col h3:after{display:none}.footer-col ul{display:none}.footer-col h3:before{content:"⌄";float:right}.newsletter{grid-column:auto;margin-top:20px}.footer-bottom{padding:22px 0 70px;display:flex;flex-direction:column;align-items:flex-start}.back-top{position:absolute;right:0;bottom:20px}}
@media(max-width:430px){.container{width:calc(100% - 20px)}.announcement-inner{font-size:12px}.announcement-link{font-size:11px}.main-header{width:100%;padding-left:14px;padding-right:14px}.hero{border-radius:20px}.hero h1{font-size:34px}.hero p{font-size:15px}.section{margin-top:30px}.class-card{padding:18px 8px;font-size:13px}.resource-list small{font-size:11px}.footer-brand .brand-copy strong{font-size:27px}}/* Sidebar Modifications */
.sidebar-sticky { position: sticky; top: 20px; align-self: start; }
.sidebar-glass .widget { background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05); }
.dark-mode .sidebar-glass .widget { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); }
.sidebar-dark .widget { background: #0c192b; color: #e7eefb; border-color: #20334d; }
.sidebar-dark .widget-title { color: #fff; }
.sidebar-dark a { color: #b9c8de; }
.sidebar-dark a:hover { color: #fff; }
.content-wrap.sidebar-left { grid-template-columns: 300px minmax(0, 1fr); }
.content-wrap.sidebar-left .content-area { order: 2; }
.content-wrap.sidebar-left .sidebar { order: 1; }
/* Recent Posts Widget Styles */
.zevruno-recent-posts-minimal { list-style: none; padding: 0; margin: 0; }
.zevruno-recent-posts-minimal li { margin-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 12px; }
.zevruno-recent-posts-minimal li:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
.zevruno-recent-posts-minimal a { font-weight: 600; color: inherit; text-decoration: none; }
.zevruno-recent-posts-minimal a:hover { color: var(--z-accent, #0d65e8); }
.zevruno-recent-posts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.recent-grid-item { display: flex; flex-direction: column; }
.recent-grid-thumb img { width: 100%; height: 80px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.recent-grid-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.recent-grid-item time { font-size: 11px; color: #71809b; }
.dark-mode .zevruno-recent-posts-minimal li { border-bottom-color: rgba(255,255,255,0.05); }
.sidebar-dark .zevruno-recent-posts-minimal li { border-bottom-color: rgba(255,255,255,0.05); }
.sidebar-dark .recent-grid-item time { color: #aebed7; }
.zevruno-recent-posts-minimal .verified-badge,
.sidebar-post-list .verified-badge,
.zevruno-recent-posts-grid .verified-badge { width: 14px; height: 14px; margin-left: 3px; vertical-align: -2px; }
/* Custom Widget Styles */
.zevruno-sidebar-search { display: flex; position: relative; }
.zevruno-sidebar-search .search-field { width: 100%; padding: 12px 45px 12px 16px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; font-size: 14px; background: #fff; }
.sidebar-dark .zevruno-sidebar-search .search-field { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #fff; }
.zevruno-sidebar-search .search-submit { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: transparent; border: none; padding: 8px; cursor: pointer; color: #71809b; display: grid; place-items: center; border-radius: 6px; }
.zevruno-sidebar-search .search-submit:hover { color: #1680ff; background: rgba(22, 128, 255, 0.1); }
.zevruno-widget-newsletter { padding: 4px 0; }
.zevruno-widget-newsletter p { font-size: 13px; color: #71809b; margin: 0 0 14px; line-height: 1.5; }
.zevruno-widget-newsletter form { display: flex; flex-direction: column; gap: 10px; }
.zevruno-widget-newsletter input[type="email"] { width: 100%; padding: 12px 16px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; font-size: 14px; background: #fff; }
.zevruno-widget-newsletter button { width: 100%; padding: 12px; background: #1680ff; color: #fff; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.zevruno-widget-newsletter button:hover { background: #0f62cc; }
.zevruno-widget-social { display: flex; flex-wrap: wrap; gap: 8px; }
.zevruno-widget-social .social-icon { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; background: #f0f4f8; color: #475569; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.sidebar-dark .zevruno-widget-social .social-icon { background: rgba(255,255,255,0.05); color: #b9c8de; }
.zevruno-widget-social .social-icon:hover { background: #1680ff; color: #fff; }
.zevruno-widget-social .social-facebook:hover { background: #1877F2; }
.zevruno-widget-social .social-twitter:hover { background: #1DA1F2; }
.zevruno-widget-social .social-instagram:hover { background: #E1306C; }
.zevruno-widget-social .social-youtube:hover { background: #FF0000; }
.zevruno-widget-social .social-linkedin:hover { background: #0A66C2; }
.zevruno-widget-social .social-pinterest:hover { background: #E60023; }
.zevruno-widget-author { text-align: center; padding: 10px 0; }
.zevruno-widget-author .author-avatar { display: inline-block; margin-bottom: 12px; }
.zevruno-widget-author .author-avatar img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.zevruno-widget-author .author-name { margin: 0 0 6px; font-size: 17px; }
.zevruno-widget-author .author-name a { color: inherit; text-decoration: none; }
.zevruno-widget-author .author-name .verified-badge { width: 16px; height: 16px; vertical-align: -3px; }
.zevruno-widget-author .author-bio { font-size: 13px; color: #71809b; line-height: 1.6; margin: 0 0 16px; }
.zevruno-widget-author .author-link { display: inline-block; padding: 8px 20px; background: #f0f4f8; color: #1680ff; border-radius: 20px; font-size: 13px; font-weight: 600; text-decoration: none; }
.zevruno-widget-author .author-link:hover { background: #1680ff; color: #fff; }
.zevruno-widget-categories { display: flex; flex-direction: column; gap: 8px; }
.zevruno-widget-categories a { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #f4f7f9; border-radius: 8px; color: #475569; text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s; }
.sidebar-dark .zevruno-widget-categories a { background: rgba(255,255,255,0.04); color: #b9c8de; }
.zevruno-widget-categories a:hover { background: #1680ff; color: #fff; }
.zevruno-widget-categories .cat-count { background: #fff; color: #1680ff; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.sidebar-dark .zevruno-widget-categories .cat-count { background: rgba(255,255,255,0.1); color: #fff; }
/* =========================================================
ZEVRUNO 1.8 — GLOBAL LAYOUT + SINGLE POST ARCHITECTURE
========================================================= */
/* Root document must never inherit article/card styling. */
html,
body {
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
padding: 0;
overflow-x: hidden;
}
body.single-post {
/* WordPress body class — root reset only, never an article component. */
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
img,
video,
iframe,
svg,
embed,
object {
max-width: 100%;
}
img,
video {
height: auto;
}
iframe {
border: 0;
}
.site-header,
.site-footer {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
display: block;
position: relative;
}
.site-header {
z-index: 100;
}
.site-header .announcement {
width: 100%;
margin: 0;
}
.site-header .announcement-inner {
width: min(1440px, calc(100% - 48px));
margin: 0 auto;
min-width: 0;
}
.site-header > .main-header {
width: 100%;
max-width: none;
margin: 0;
position: relative;
border-radius: 0 0 16px 16px;
}
.site-main {
width: 100%;
max-width: none;
margin: 0;
min-width: 0;
}
/* Header is structurally independent from every page/content wrapper. */
.site-header .main-header,
.site-header .announcement,
.site-header .announcement-inner {
min-width: 0;
}
/* Announcement: one line on phones, no horizontal scrolling. */
.site-header .announcement-inner {
display: flex;
align-items: center;
gap: 8px;
min-height: 52px;
overflow: hidden;
}
.site-header .announcement-inner > strong,
.site-header .announcement-icon {
flex: 0 0 auto;
}
.site-header .announcement-text-wrapper {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
.site-header .behavior-truncate .announcement-text-wrapper {
white-space: nowrap;
}
.site-header .behavior-truncate .announcement-text-span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.site-header .behavior-marquee .announcement-text-wrapper {
white-space: nowrap;
display: flex;
}
.site-header .behavior-marquee .announcement-text-span {
display: inline-block;
white-space: nowrap;
padding-left: 100%;
animation: zevruno-marquee 15s linear infinite;
}
@keyframes zevruno-marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.site-header .announcement-link {
flex: 0 0 auto;
margin-left: auto;
}
.site-header .top-links {
flex: 0 0 auto;
}
/* Main header navigation must be anchored to this header, not the viewport. */
.site-header .main-header {
position: relative;
}
@media (max-width: 800px) {
.site-header,
.site-header .announcement,
.site-header > .main-header {
width: 100%;
max-width: none;
margin: 0;
border-left: 0;
border-right: 0;
border-radius: 0;
}
.site-header .announcement-inner {
width: 100%;
max-width: none;
margin: 0;
min-height: 52px;
padding: 8px 16px;
flex-wrap: nowrap;
}
.site-header .announcement-link {
margin-left: 4px;
}
.site-header > .main-header {
min-height: 92px;
padding: 14px 16px;
box-shadow: 0 8px 24px rgba(17,45,86,.07);
}
.site-header .primary-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
max-width: none;
margin: 0;
display: none;
z-index: 1002;
background: #fff;
padding: 10px 14px;
box-shadow: 0 15px 30px rgba(9,34,71,.12);
border-radius: 0 0 16px 16px;
}
.site-header .primary-nav.is-open {
display: block;
}
.site-header .nav-backdrop {
display: none;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(4,18,43,.18);
pointer-events: none;
}
.site-header .nav-backdrop[aria-hidden="false"] {
display: block;
pointer-events: auto;
}
.site-header .primary-nav {
z-index: 1002;
}
.site-header .menu-toggle {
position: relative;
z-index: 1003;
}
body.menu-open {
overflow: hidden;
}
}
/* =========================================================
SINGLE POST — UNIQUE COMPONENT CLASS
Never use .single-post here because WordPress owns body.single-post.
========================================================= */
.post-view-layout {
width: min(1280px, 100%);
max-width: 1280px;
margin: 0 auto;
padding: 28px 20px 60px;
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 30px;
align-items: start;
}
.zevruno-single-post {
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
overflow-wrap: anywhere;
word-break: normal;
}
.zevruno-single-post .post-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 9px;
min-width: 0;
margin: 0 0 22px;
color: #71809b;
font-size: 14px;
}
.zevruno-single-post .post-breadcrumb a {
color: var(--z-accent);
font-weight: 700;
}
.zevruno-single-post .single-header {
margin: 0 0 26px;
}
.zevruno-single-post .single-header h1 {
margin: 0;
max-width: 100%;
font-size: clamp(34px, 4.5vw, 54px);
line-height: 1.08;
letter-spacing: -.025em;
overflow-wrap: anywhere;
}
.zevruno-single-post .post-excerpt {
margin: 14px 0 0;
color: #66758f;
font-size: 17px;
line-height: 1.65;
}
.zevruno-single-post .author-line {
width: fit-content;
max-width: 100%;
margin-top: 22px;
padding: 10px 16px 10px 10px;
display: flex;
align-items: center;
gap: 11px;
background: #f7f9fd;
border: 1px solid #e1e8f2;
border-radius: 999px;
}
.zevruno-single-post .author-line > img {
width: 48px;
height: 48px;
flex: 0 0 48px;
border-radius: 50%;
}
.zevruno-single-post .author-details {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.zevruno-single-post .author-details strong {
font-size: 15px;
line-height: 1.3;
}
.zevruno-single-post .author-details small,
.zevruno-single-post .post-meta-details {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2px 6px;
color: #7c899e;
font-size: 13px;
line-height: 1.35;
}
.zevruno-single-post .post-meta-dot {
color: #a0aec0;
font-weight: bold;
}
.zevruno-single-post .post-meta-updated {
color: #0b63d6;
font-weight: 500;
}
.zevruno-single-post .post-meta-reading-time {
display: inline-flex;
align-items: center;
gap: 3px;
}
.dark-mode .zevruno-single-post .post-meta-updated {
color: #4da3ff;
}
.dark-mode .zevruno-single-post .post-meta-details {
color: #9cb1cf;
}
.verified-badge {
display: inline-flex;
width: 20px;
height: 20px;
margin-left: 4px;
vertical-align: -4px;
position: relative;
flex: 0 0 20px;
line-height: 0;
cursor: help;
-webkit-tap-highlight-color: transparent;
}
.verified-badge-icon {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.verified-badge-seal {
fill: #1557e8;
}
.verified-badge-check {
fill: none;
stroke: #fff;
stroke-width: 4.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.verified-badge:hover::after,
.verified-badge:focus-visible::after {
content: attr(title);
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
transform: translateX(-50%);
z-index: 30;
background: #101828;
color: #fff;
border-radius: 7px;
padding: 5px 8px;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
box-shadow: 0 5px 18px rgba(0,0,0,.18);
pointer-events: none;
}
@media (max-width: 600px) {
.verified-badge {
width: 19px;
height: 19px;
margin-left: 3px;
vertical-align: -4px;
}
}
.zevruno-single-post .featured-image {
width: 100%;
max-width: 100%;
margin: 0 0 28px;
padding: 0;
}
.zevruno-single-post .featured-image img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
border-radius: 16px;
}
.zevruno-single-post .featured-image figcaption {
margin-top: 8px;
color: #7b889d;
font-size: 12px;
}
.zevruno-single-post .entry-content {
width: 100%;
max-width: 100%;
min-width: 0;
color: #17243b;
font-size: 17px;
line-height: 1.78;
overflow-wrap: anywhere;
}
.zevruno-single-post .entry-content > * {
max-width: 100%;
}
.zevruno-single-post .entry-content p {
margin: 0 0 1.15em;
}
.zevruno-single-post .entry-content h2,
.zevruno-single-post .entry-content h3,
.zevruno-single-post .entry-content h4 {
overflow-wrap: anywhere;
}
.zevruno-single-post .entry-content h2 {
font-size: clamp(25px, 3.5vw, 34px);
line-height: 1.2;
margin: 1.5em 0 .55em;
}
.zevruno-single-post .entry-content h3 {
font-size: clamp(21px, 3vw, 29px);
line-height: 1.25;
margin: 1.35em 0 .5em;
}
.zevruno-single-post .entry-content ul,
.zevruno-single-post .entry-content ol {
padding-left: 1.4em;
margin-top: .7em;
margin-bottom: 1.1em;
}
.zevruno-single-post .entry-content blockquote {
margin: 1.25em 0;
padding: 16px 18px;
border-left: 4px solid var(--z-accent);
background: #f4f7fc;
border-radius: 0 12px 12px 0;
overflow-wrap: anywhere;
}
.zevruno-single-post .entry-content img,
.zevruno-single-post .entry-content video,
.zevruno-single-post .entry-content iframe,
.zevruno-single-post .entry-content svg {
max-width: 100%;
}
.zevruno-single-post .entry-content img {
height: auto;
}
.zevruno-single-post .entry-content iframe {
width: 100%;
max-width: 100%;
}
.zevruno-single-post .entry-content pre {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: pre;
padding: 16px;
border-radius: 10px;
}
.zevruno-single-post .entry-content code {
overflow-wrap: normal;
}
.zevruno-single-post .entry-content table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-collapse: collapse;
}
.zevruno-single-post .post-footer {
margin-top: 34px;
padding-top: 20px;
border-top: 1px solid #e3eaf4;
}
.zevruno-single-post .post-tags,
.zevruno-single-post .post-share {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 12px;
}
.zevruno-single-post .post-tags a,
.zevruno-single-post .post-share a {
padding: 6px 10px;
border-radius: 999px;
background: #f2f6fb;
color: #245eaa;
font-size: 12px;
overflow-wrap: anywhere;
}
.post-view-layout .sidebar {
min-width: 0;
}
@media (max-width: 1024px) {
.post-view-layout {
grid-template-columns: minmax(0, 1fr);
width: min(960px, 100%);
padding: 24px 18px 48px;
}
.post-view-layout .sidebar {
display: none;
}
}
@media (max-width: 800px) {
.post-view-layout {
display: block;
width: 100%;
max-width: none;
margin: 0 auto;
padding: 18px 16px 40px;
}
.zevruno-single-post .single-header h1 {
font-size: clamp(32px, 8.5vw, 46px);
}
.zevruno-single-post .entry-content {
font-size: 17px;
line-height: 1.75;
}
}
@media (max-width: 520px) {
.site-header .announcement-inner {
padding-left: 16px;
padding-right: 16px;
font-size: 13px;
}
.site-header .announcement-link {
padding: 5px 12px;
font-size: 12px;
}
.post-view-layout {
padding: 14px 16px 32px;
}
.zevruno-single-post .post-breadcrumb {
font-size: 13px;
margin-bottom: 15px;
}
.zevruno-single-post .single-header h1 {
font-size: clamp(29px, 9vw, 38px);
line-height: 1.1;
letter-spacing: -.02em;
}
.zevruno-single-post .author-line {
width: 100%;
max-width: 100%;
border-radius: 20px;
padding: 9px 12px 9px 9px;
}
.zevruno-single-post .featured-image {
margin-bottom: 24px;
}
.zevruno-single-post .featured-image img {
border-radius: 14px;
}
.zevruno-single-post .entry-content {
font-size: 16px;
line-height: 1.72;
}
.zevruno-single-post .entry-content h2 {
font-size: 24px;
}
.zevruno-single-post .entry-content h3 {
font-size: 20px;
}
}
@media (max-width: 380px) {
.site-header .announcement-inner {
padding-left: 12px;
padding-right: 12px;
gap: 6px;
font-size: 12px;
}
.site-header .announcement-link {
padding: 5px 10px;
font-size: 11px;
}
.post-view-layout {
padding-left: 12px;
padding-right: 12px;
}
.zevruno-single-post .single-header h1 {
font-size: 28px;
}
.zevruno-single-post .entry-content {
font-size: 15.5px;
}
}
/* Dark mode uses the unique article component, never body.single-post. */
.dark-mode .zevruno-single-post .author-line {
background: #10223a;
border-color: #223955;
}
.dark-mode .zevruno-single-post .entry-content {
color: #ccd8ea;
}
.dark-mode .zevruno-single-post .entry-content blockquote {
background: #10233d;
color: #b9c9df;
}
.dark-mode .zevruno-single-post .post-footer {
border-color: #20344f;
}
.dark-mode .zevruno-single-post .post-tags a,
.dark-mode .zevruno-single-post .post-share a {
background: #132944;
color: #c8d8ed;
}
/* =========================================================
ZEVRUNO 1.9 — SINGLE POST SUPPORTING COMPONENTS
Uses the existing Zevruno design system; no global component redesign.
========================================================= */
.post-view-layout .zevruno-single-sidebar {
display: block;
min-width: 0;
width: 100%;
position: sticky;
top: 24px;
}
.post-view-layout .zevruno-single-sidebar .widget {
min-width: 0;
margin-bottom: 18px;
background: #fff;
border: 1px solid #e5ebf4;
border-radius: 16px;
padding: 20px;
box-shadow: 0 6px 18px rgba(19,48,88,.05);
}
.post-view-layout .zevruno-single-sidebar .widget:last-child {
margin-bottom: 0;
}
.post-view-layout .zevruno-single-sidebar .widget-title {
margin: 0 0 14px;
font-size: 18px;
line-height: 1.3;
overflow-wrap: anywhere;
}
.zevruno-single-sidebar .search-form {
display: flex;
width: 100%;
min-width: 0;
gap: 7px;
}
.zevruno-single-sidebar .search-form label {
flex: 1 1 auto;
min-width: 0;
}
.zevruno-single-sidebar .search-field {
width: 100%;
min-width: 0;
height: 44px;
border: 1px solid #e0e7f1;
border-radius: 10px;
padding: 0 12px;
outline: 0;
background: #f7f9fd;
color: #17243b;
}
.zevruno-single-sidebar .search-submit {
flex: 0 0 auto;
height: 44px;
border: 0;
border-radius: 10px;
padding: 0 13px;
background: var(--z-accent);
color: #fff;
font-weight: 700;
cursor: pointer;
}
.sidebar-post-list,
.sidebar-category-list {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-post-item {
display: flex;
align-items: flex-start;
gap: 11px;
min-width: 0;
padding: 11px 0;
border-bottom: 1px solid #e8edf4;
}
.sidebar-post-item:first-child {
padding-top: 0;
}
.sidebar-post-item:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.sidebar-post-thumb {
display: block;
flex: 0 0 58px;
width: 58px;
height: 48px;
overflow: hidden;
border-radius: 9px;
background: #eef3fa;
}
.sidebar-post-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebar-post-item > div {
min-width: 0;
flex: 1 1 auto;
}
.sidebar-post-title {
display: block;
font-size: 14px;
line-height: 1.4;
font-weight: 700;
color: #17243b;
overflow-wrap: anywhere;
}
.sidebar-post-item time {
display: block;
margin-top: 4px;
color: #78869b;
font-size: 11px;
line-height: 1.3;
}
.sidebar-category-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid #e8edf4;
min-width: 0;
}
.sidebar-category-list li:last-child {
border-bottom: 0;
}
.sidebar-category-list a {
color: #245eaa;
font-weight: 650;
overflow-wrap: anywhere;
min-width: 0;
}
.sidebar-category-list .count {
flex: 0 0 auto;
color: #7b889d;
font-size: 12px;
}
.zevruno-single-post .post-tags {
align-items: flex-start;
gap: 10px;
}
.zevruno-single-post .post-section-label {
flex: 0 0 auto;
padding-top: 6px;
font-size: 14px;
line-height: 1.4;
}
.zevruno-single-post .post-tag-list {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
gap: 7px;
min-width: 0;
}
.zevruno-single-post .post-tags a {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 6px 11px;
border: 1px solid #dce7f5;
border-radius: 999px;
background: #f2f6fb;
color: var(--z-accent);
font-size: 12px;
line-height: 1.35;
font-weight: 650;
overflow-wrap: anywhere;
}
.zevruno-single-post .post-tags a:hover {
border-color: var(--z-accent);
}
.zevruno-single-post .post-navigation {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 14px;
margin-top: 24px;
}
.zevruno-single-post .post-navigation-item {
min-width: 0;
}
.zevruno-single-post .post-navigation-item > a {
display: flex;
flex-direction: column;
min-width: 0;
height: 100%;
padding: 15px 17px;
border: 1px solid #e1e8f2;
border-radius: 14px;
background: #fff;
color: #17243b;
overflow: hidden;
}
.zevruno-single-post .post-navigation-item > a:hover {
border-color: #c8d8ee;
}
.zevruno-single-post .post-navigation-next > a {
text-align: right;
align-items: flex-end;
}
.zevruno-single-post .post-navigation-label {
display: block;
margin-bottom: 6px;
color: var(--z-accent);
font-size: 12px;
line-height: 1.3;
font-weight: 750;
}
.zevruno-single-post .post-navigation-item strong {
display: block;
max-width: 100%;
font-size: 14px;
line-height: 1.45;
font-weight: 700;
overflow-wrap: anywhere;
}
.zevruno-single-post .related-posts {
margin-top: 34px;
padding-top: 24px;
border-top: 1px solid #e3eaf4;
}
.zevruno-single-post .related-posts .section-heading {
margin-bottom: 15px;
}
.zevruno-single-post .related-posts .section-heading h2 {
margin: 0;
font-size: 22px;
line-height: 1.25;
}
.zevruno-single-post .related-post-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
min-width: 0;
}
.zevruno-single-post .related-post-card {
min-width: 0;
overflow: hidden;
border: 1px solid #e5ebf4;
border-radius: 14px;
background: #fff;
}
.zevruno-single-post .related-post-image {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #eef3fa;
}
.zevruno-single-post .related-post-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.zevruno-single-post .related-post-body {
min-width: 0;
padding: 13px;
}
.zevruno-single-post .related-post-body time {
display: block;
margin-bottom: 5px;
color: #78869b;
font-size: 11px;
line-height: 1.3;
}
.zevruno-single-post .related-post-body h3 {
margin: 0;
font-size: 15px;
line-height: 1.4;
overflow-wrap: anywhere;
}
.zevruno-single-post .related-post-body h3 a {
color: #17243b;
}
.zevruno-single-post .comments-area {
min-width: 0;
margin-top: 36px;
padding-top: 26px;
border-top: 1px solid #e3eaf4;
overflow-wrap: anywhere;
}
.zevruno-single-post .comments-header {
margin-bottom: 18px;
}
.zevruno-single-post .comments-area h2 {
margin: 0;
font-size: 22px;
line-height: 1.3;
}
.zevruno-single-post .comment-list {
list-style: none;
margin: 0;
padding: 0;
}
.zevruno-single-post .comment-list .comment {
min-width: 0;
padding: 16px 0;
border-bottom: 1px solid #e3eaf4;
}
.zevruno-single-post .comment-list .comment-body {
min-width: 0;
}
.zevruno-single-post .comment-list .comment-meta {
color: #71809b;
font-size: 13px;
}
.zevruno-single-post .comment-list .comment-author {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
margin-bottom: 7px;
}
.zevruno-single-post .comment-list .comment-author .avatar {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 50%;
}
.zevruno-single-post .comment-list .comment-author .fn {
min-width: 0;
font-weight: 700;
overflow-wrap: anywhere;
}
.zevruno-single-post .comment-list .comment-content {
min-width: 0;
color: #27364e;
overflow-wrap: anywhere;
}
.zevruno-single-post .comment-list .comment-content p {
margin: 0 0 10px;
}
.zevruno-single-post .comment-list .children {
list-style: none;
margin: 10px 0 0;
padding: 0 0 0 28px;
}
.zevruno-single-post .comment-list .reply a,
.zevruno-single-post .comments-area .comment-navigation a {
color: var(--z-accent);
font-size: 13px;
font-weight: 700;
}
.zevruno-single-post .comment-form-wrap {
margin-top: 24px;
}
.zevruno-single-post .comment-respond {
min-width: 0;
}
.zevruno-single-post .comment-respond h3 {
margin: 0 0 15px;
font-size: 20px;
}
.zevruno-single-post .comment-form {
display: grid;
gap: 12px;
min-width: 0;
}
.zevruno-single-post .comment-form p {
margin: 0;
}
.zevruno-single-post .comment-form label {
display: block;
margin-bottom: 5px;
font-size: 13px;
font-weight: 650;
}
.zevruno-single-post .comment-form input[type="text"],
.zevruno-single-post .comment-form input[type="email"],
.zevruno-single-post .comment-form input[type="url"],
.zevruno-single-post .comment-form textarea {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
border: 1px solid #dfe7f1;
border-radius: 10px;
background: #f7f9fd;
color: #17243b;
padding: 10px 12px;
font: inherit;
outline: 0;
}
.zevruno-single-post .comment-form textarea {
min-height: 140px;
resize: vertical;
}
.zevruno-single-post .comment-form input:focus,
.zevruno-single-post .comment-form textarea:focus {
border-color: var(--z-accent);
}
.zevruno-single-post .comment-form .submit {
width: fit-content;
max-width: 100%;
border: 0;
border-radius: 10px;
background: var(--z-accent);
color: #fff;
padding: 10px 17px;
font-weight: 750;
cursor: pointer;
}
.zevruno-single-post .comments-area .comment-navigation {
margin-top: 16px;
}
@media (max-width: 1024px) and (min-width: 801px) {
.post-view-layout {
grid-template-columns: minmax(0, 1fr) 280px;
width: min(1024px, 100%);
padding: 24px 18px 48px;
gap: 24px;
}
.post-view-layout .zevruno-single-sidebar {
display: block;
position: static;
}
.zevruno-single-post .related-post-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 800px) {
.post-view-layout {
display: flex;
flex-direction: column;
width: 100%;
max-width: none;
padding: 18px 16px 40px;
gap: 28px;
}
.post-view-layout .zevruno-single-sidebar {
width: 100%;
position: static;
order: 2;
}
.zevruno-single-post {
order: 1;
}
.post-view-layout .zevruno-single-sidebar .widget {
margin-bottom: 16px;
}
.zevruno-single-post .related-post-grid {
grid-template-columns: 1fr;
}
.zevruno-single-post .post-navigation {
grid-template-columns: 1fr;
}
.zevruno-single-post .post-navigation-next > a {
text-align: left;
align-items: flex-start;
}
}
@media (max-width: 520px) {
.post-view-layout {
padding: 14px 16px 32px;
}
.zevruno-single-post .post-navigation-item > a {
padding: 13px 14px;
}
.zevruno-single-post .post-tags {
display: block;
}
.zevruno-single-post .post-section-label {
display: block;
margin-bottom: 8px;
}
.zevruno-single-post .post-tag-list {
width: 100%;
}
.zevruno-single-post .comments-area {
margin-top: 30px;
padding-top: 22px;
}
.zevruno-single-post .comment-list .children {
padding-left: 16px;
}
.zevruno-single-sidebar .search-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
}
}
@media (max-width: 380px) {
.post-view-layout {
padding-left: 12px;
padding-right: 12px;
}
.post-view-layout .zevruno-single-sidebar .widget {
padding: 16px;
}
.zevruno-single-post .related-post-body {
padding: 12px;
}
.zevruno-single-post .comments-area h2,
.zevruno-single-post .related-posts .section-heading h2 {
font-size: 20px;
}
}
/* Existing dark-mode system: only the new supporting components are extended. */
.dark-mode .post-view-layout .zevruno-single-sidebar .widget,
.dark-mode .zevruno-single-post .post-navigation-item > a,
.dark-mode .zevruno-single-post .related-post-card {
background: #0c192b;
border-color: #20334d;
color: #e7eefb;
}
.dark-mode .zevruno-single-sidebar .search-field,
.dark-mode .zevruno-single-post .comment-form input[type="text"],
.dark-mode .zevruno-single-post .comment-form input[type="email"],
.dark-mode .zevruno-single-post .comment-form input[type="url"],
.dark-mode .zevruno-single-post .comment-form textarea {
background: #122238;
border-color: #29415f;
color: #e7eefb;
}
.dark-mode .sidebar-post-title,
.dark-mode .zevruno-single-post .post-navigation-item > a,
.dark-mode .zevruno-single-post .related-post-body h3 a {
color: #e7eefb;
}
.dark-mode .sidebar-post-item,
.dark-mode .sidebar-category-list li,
.dark-mode .zevruno-single-post .post-navigation-item > a,
.dark-mode .zevruno-single-post .related-posts,
.dark-mode .zevruno-single-post .comments-area,
.dark-mode .zevruno-single-post .comment-list .comment {
border-color: #20344f;
}
.dark-mode .sidebar-category-list a,
.dark-mode .zevruno-single-post .post-tags a {
color: #bcd9ff;
}
.dark-mode .zevruno-single-post .post-tags a {
background: #132944;
border-color: #29415f;
}
.dark-mode .zevruno-single-post .comment-list .comment-content {
color: #ccd8ea;
}
/* =========================================================
ZEVRUNO 1.9 — SMART SEARCH RESULTS
Uses the existing Zevruno search/card design language.
========================================================= */
.zevruno-search-header {
margin-bottom: 22px;
}
.zevruno-search-header h1 {
margin-bottom: 5px;
}
.search-kicker {
display: inline-block;
margin-bottom: 4px;
color: var(--z-accent);
font-size: 13px;
font-weight: 750;
letter-spacing: .04em;
text-transform: uppercase;
}
.search-summary {
margin: 0;
color: #71809b;
font-size: 14px;
}
.search-results-list {
min-width: 0;
}
.search-result-card {
min-width: 0;
}
.search-result-image {
min-width: 0;
display: block;
overflow: hidden;
border-radius: 12px;
}
.search-result-image img {
display: block;
width: 100%;
height: 150px;
object-fit: cover;
}
.search-result-content {
min-width: 0;
}
.search-result-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
.search-result-category {
display: inline-flex;
max-width: 100%;
padding: 3px 9px;
border-radius: 999px;
background: #eef5ff;
color: var(--z-accent);
font-size: 11px;
font-weight: 700;
overflow-wrap: anywhere;
}
.search-result-card h2,
.search-result-card p {
overflow-wrap: anywhere;
}
.search-empty-state {
padding: 64px 24px;
text-align: center;
background: #fff;
border: 1px solid #e5ebf4;
border-radius: 16px;
}
.search-empty-icon {
width: 64px;
height: 64px;
margin: 0 auto 15px;
display: grid;
place-items: center;
border-radius: 50%;
background: #eef5ff;
color: var(--z-accent);
font-size: 31px;
font-weight: 800;
}
.search-empty-state h2 {
margin: 0 0 8px;
font-size: 24px;
}
.search-empty-state p {
max-width: 560px;
margin: 0 auto;
color: #71809b;
overflow-wrap: anywhere;
}
.search-empty-home {
display: inline-flex;
margin-top: 20px;
padding: 10px 16px;
border-radius: 10px;
background: var(--z-accent);
color: #fff;
font-weight: 700;
}
.dark-mode .search-summary {
color: #aebdd2;
}
.dark-mode .search-empty-state {
background: #0c192b;
border-color: #20334d;
color: #e7eefb;
}
.dark-mode .search-empty-state p {
color: #aebdd2;
}
.dark-mode .search-empty-icon,
.dark-mode .search-result-category {
background: #132944;
}
@media (max-width: 800px) {
.zevruno-search-header h1 {
font-size: 28px;
}
.search-empty-state {
padding: 48px 18px;
}
}
@media (max-width: 480px) {
.search-result-card {
padding: 14px;
}
.search-result-image img {
height: 190px;
}
.search-empty-state h2 {
font-size: 21px;
}
}
/* =========================================================
ZEVRUNO 1.13.0 — Native Menu Controls
Keeps the existing visual language; adds submenu behavior
required by WordPress-managed menus.
========================================================= */
.site-header .top-menu {
display:flex;
align-items:center;
gap:12px;
margin-left:auto;
font-size:13px;
}
.site-header .top-menu > a,
.site-header .top-menu > li > a {
color:inherit;
white-space:nowrap;
}
.site-header .top-menu i {
opacity:.45;
font-style:normal;
}
.site-header .top-menu ul {
list-style:none;
margin:0;
padding:0;
}
.site-header .nav-list {
list-style:none;
}
.site-header .nav-list .menu-item-has-children {
position:relative;
}
.site-header .nav-list .sub-menu {
position:absolute;
top:100%;
left:0;
min-width:210px;
margin:0;
padding:8px;
list-style:none;
background:#fff;
border:1px solid #e3eaf4;
border-radius:12px;
box-shadow:0 14px 30px rgba(9,34,71,.13);
opacity:0;
visibility:hidden;
transform:translateY(6px);
transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
z-index:1100;
}
.site-header .nav-list .sub-menu a {
display:block;
padding:9px 11px;
border-radius:8px;
white-space:nowrap;
}
.site-header .nav-list .sub-menu a:hover {
background:#f3f7fd;
}
.site-header .nav-list .menu-item-has-children:hover > .sub-menu,
.site-header .nav-list .menu-item-has-children:focus-within > .sub-menu {
opacity:1;
visibility:visible;
transform:translateY(0);
}
.site-header .nav-list .sub-menu .sub-menu {
top:-8px;
left:calc(100% + 2px);
}
.dark-mode .site-header .nav-list .sub-menu {
background:#0c192b;
border-color:#20334d;
}
.dark-mode .site-header .nav-list .sub-menu a:hover {
background:#122238;
}
.footer-col .footer-menu,
.footer-col .footer-menu ul {
list-style:none;
margin:0;
padding:0;
}
.footer-col .footer-menu li {
margin:0;
padding:0;
}
.footer-col .footer-menu a {
display:block;
}
.footer-col .footer-menu .sub-menu {
list-style:none;
margin:0 0 0 12px;
padding:0;
}
@media(max-width:800px){
.site-header .top-menu {
display:none;
}
.site-header .nav-list {
display:flex;
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
gap:0;
}
.site-header .nav-list > li {
width:100%;
}
.site-header .nav-list > li > a {
padding:11px 8px;
border-bottom:1px solid #edf1f6;
}
.site-header .nav-list .sub-menu {
position:static;
min-width:0;
padding:0 0 0 12px;
border:0;
border-radius:0;
box-shadow:none;
opacity:1;
visibility:visible;
transform:none;
background:transparent;
}
.site-header .nav-list .sub-menu a {
padding:9px 8px;
}
.dark-mode .site-header .nav-list > li > a {
border-color:#20334d;
}
}
/* =========================================================
ZEVRUNO 1.13.0 — Responsive Menu & Footer Accordion Fix
========================================================= */
@media (max-width: 800px) {
.site-header .primary-nav .nav-list .menu-item-has-children > a {
padding-right: 48px;
}
.site-header .primary-nav .menu-item-has-children {
position: relative;
}
.site-header .primary-nav .submenu-toggle {
position: absolute;
top: 4px;
right: 0;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 0;
border-radius: 8px;
background: transparent;
color: inherit;
cursor: pointer;
z-index: 2;
}
.site-header .primary-nav .submenu-toggle::before {
content: '⌄';
font-size: 18px;
line-height: 1;
transition: transform .18s ease;
}
.site-header .primary-nav .menu-item-has-children.submenu-open > .submenu-toggle::before {
transform: rotate(180deg);
}
.site-header .primary-nav .nav-list .menu-item-has-children > .sub-menu {
display: none;
}
.site-header .primary-nav .nav-list .menu-item-has-children.submenu-open > .sub-menu {
display: block;
}
.site-footer .footer-col > h3 {
position: relative;
padding-right: 48px;
cursor: pointer;
}
.site-footer .footer-col > h3::before {
content: '⌄';
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 8px;
background: rgba(255,255,255,.06);
transition: transform .18s ease;
}
.site-footer .footer-col.is-open > h3::before {
transform: translateY(-50%) rotate(180deg);
}
.site-footer .footer-col > .footer-menu,
.site-footer .footer-col > ul {
display: none;
padding-bottom: 12px;
}
.site-footer .footer-col.is-open > .footer-menu,
.site-footer .footer-col.is-open > ul {
display: block;
}
.site-footer .footer-col .footer-menu .sub-menu {
margin-left: 12px;
}
}
@media (min-width: 801px) {
.site-header .primary-nav .submenu-toggle {
display: none;
}
}
@media (max-width: 800px) {
/* Ensure footer menus become visible when their column is opened. */
.site-footer .footer-col.is-open > .footer-menu,
.site-footer .footer-col.is-open > ul {
display: block !important;
visibility: visible;
opacity: 1;
}
}
/* Keep the Customizer partial edit pencil attached to the complete footer. */
.site-footer {
position: relative;
}
@media (max-width:800px){
.site-footer .footer-col > h3::before { display:none !important; }
}
/* =========================================================
ZEVRUNO 1.13.0 — NATIVE FOOTER WIDGET AREAS
Stable, responsive styling for Footer 1–8.
========================================================= */
.site-footer .footer-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 34px;
align-items: start;
width: 100%;
}
.site-footer .footer-widget-area {
min-width: 0;
max-width: 100%;
color: #dce7fb;
overflow-wrap: anywhere;
word-break: break-word;
}
.site-footer .footer-widget {
min-width: 0;
max-width: 100%;
margin: 0 0 24px;
}
.site-footer .footer-widget:last-child {
margin-bottom: 0;
}
.site-footer .footer-widget-title,
.site-footer .footer-widget .widget-title {
font-size: 18px;
line-height: 1.35;
color: #fff;
margin: 0 0 14px;
}
.site-footer .footer-widget-title::after,
.site-footer .footer-widget .widget-title::after {
content: "";
display: block;
width: 45px;
height: 3px;
border-radius: 3px;
background: var(--z-accent);
margin-top: 8px;
}
.site-footer .footer-widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer .footer-widget li {
margin: 9px 0;
min-width: 0;
}
.site-footer .footer-widget a {
color: #b9c8de;
overflow-wrap: anywhere;
}
.site-footer .footer-widget a:hover,
.site-footer .footer-widget a:focus {
color: #fff;
}
.site-footer .footer-widget p {
color: #aebed7;
}
.site-footer .footer-widget img,
.site-footer .footer-widget video,
.site-footer .footer-widget iframe,
.site-footer .footer-widget embed,
.site-footer .footer-widget object {
display: block;
max-width: 100%;
height: auto;
}
.site-footer .footer-widget input,
.site-footer .footer-widget select,
.site-footer .footer-widget textarea,
.site-footer .footer-widget button {
max-width: 100%;
box-sizing: border-box;
}
.site-footer .footer-widget table {
display: block;
max-width: 100%;
overflow-x: auto;
}
.site-footer .footer-widget .sub-menu {
padding-left: 16px;
margin-top: 6px;
}
@media (max-width: 1199px) {
.site-footer .footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px;
}
}
@media (max-width: 767px) {
.site-footer .footer-grid {
grid-template-columns: 1fr;
gap: 0;
padding-bottom: 30px;
}
.site-footer .footer-widget-area {
width: 100%;
border-top: 1px solid #1b385d;
padding: 20px 0;
}
.site-footer .footer-widget-area:first-child {
border-top: 0;
}
.site-footer .footer-widget {
margin-bottom: 20px;
}
.site-footer .footer-widget-title,
.site-footer .footer-widget .widget-title {
font-size: 17px;
margin-bottom: 12px;
}
}
@media (max-width: 480px) {
.site-footer .footer-grid {
gap: 0;
}
.site-footer .footer-widget-area {
padding: 18px 0;
}
.site-footer .footer-widget li {
margin: 8px 0;
}
}
.brand-logo{display:block;width:auto;max-width:230px;max-height:58px;height:auto;object-fit:contain}
/* =========================================================
ZEVRUNO 1.13.0 — FOOTER FINAL RESPONSIVE LAYOUT
Native Footer 1–8 widgets + optional Footer Menu.
========================================================= */
/* Keep short pages from ending with a visible body-colored strip
* beneath the footer while preserving normal document flow on long pages. */
html,
body {
min-height: 100%;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
body > .site-main {
width: 100%;
flex: 1 0 auto;
}
.site-footer {
flex: 0 0 auto;
width: 100%;
margin: 0;
padding-bottom: 0;
}
.site-footer .footer-grid {
padding-top: 0;
padding-bottom: 36px;
}
.site-footer .footer-bottom {
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0;
padding: 0 0 24px;
border-top: 1px solid #18385f;
text-align: center;
position: relative;
}
.site-footer .footer-menu-nav {
width: 100%;
padding: 20px 0 14px;
text-align: center;
}
.site-footer .footer-menu,
.site-footer .footer-menu ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 22px;
list-style: none;
margin: 0;
padding: 0;
}
.site-footer .footer-menu li {
margin: 0;
padding: 0;
min-width: 0;
}
.site-footer .footer-menu a {
display: inline-block;
color: #b9c8de;
font-size: 14px;
line-height: 1.5;
padding: 4px 0;
overflow-wrap: anywhere;
}
.site-footer .footer-menu a:hover,
.site-footer .footer-menu a:focus {
color: #fff;
}
.site-footer .footer-menu .sub-menu {
display: flex;
margin: 0;
padding: 0;
}
.site-footer .footer-bottom-row {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
padding: 8px 60px 0;
}
.site-footer .footer-powered {
color: #aebed7;
font-size: 14px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.site-footer .footer-copyright {
color: #dce7fb;
font-size: 14px;
line-height: 1.5;
font-weight: 500;
overflow-wrap: anywhere;
}
.site-footer .footer-quote {
color: #aebed7;
font-size: 13px;
line-height: 1.5;
font-style: italic;
max-width: 720px;
}
.site-footer .back-top {
position: absolute;
right: 0;
bottom: 22px;
}
@media (max-width: 800px) {
.site-footer .footer-grid {
padding-bottom: 18px;
}
.site-footer .footer-bottom {
padding-bottom: 22px;
}
.site-footer .footer-menu-nav {
padding: 18px 0 12px;
}
.site-footer .footer-menu,
.site-footer .footer-menu ul {
gap: 5px 16px;
}
.site-footer .footer-menu a {
font-size: 13px;
padding: 3px 0;
}
.site-footer .footer-bottom-row {
padding: 8px 52px 0;
gap: 6px;
}
.site-footer .footer-powered,
.site-footer .footer-copyright {
font-size: 13px;
}
.site-footer .footer-quote {
display: none;
}
.site-footer .back-top {
right: 0;
bottom: 18px;
}
}
@media (max-width: 480px) {
.site-footer .footer-menu {
gap: 4px 14px;
}
.site-footer .footer-menu a {
font-size: 12px;
}
.site-footer .footer-bottom-row {
padding-left: 48px;
padding-right: 48px;
}
.site-footer .footer-copyright {
width: 100%;
}
}
/* ZEVRUNO 1.11 — Footer Menu widget area + bottom copyright */
.site-footer {
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
}
.site-footer .footer-bottom {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
margin-top: auto;
padding: 0 0 24px;
text-align: center;
}
.site-footer .footer-menu-widget-area {
width: 100%;
margin: 0;
padding: 20px 0 12px;
border-top: 1px solid #18385f;
text-align: center;
}
.site-footer .footer-menu-inner,
.site-footer .footer-menu-widget {
width: 100%;
min-width: 0;
}
.site-footer .footer-menu-widget {
margin: 0 0 10px;
}
.site-footer .footer-menu-widget .menu,
.site-footer .footer-menu-widget ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px 20px;
list-style: none;
margin: 0;
padding: 0;
}
.site-footer .footer-menu-widget li {
margin: 0;
padding: 0;
}
.site-footer .footer-menu-widget a {
display: inline-block;
color: #b9c8de;
line-height: 1.5;
overflow-wrap: anywhere;
}
.site-footer .footer-bottom-row {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 7px;
padding: 8px 60px 0;
text-align: center;
}
.site-footer .footer-copyright {
order: 3;
width: 100%;
color: #dce7fb;
font-size: 14px;
line-height: 1.5;
font-weight: 500;
text-align: center;
overflow-wrap: anywhere;
}
@media (max-width: 800px) {
.site-footer .footer-menu-widget-area { padding: 18px 0 10px; }
.site-footer .footer-menu-widget .menu,
.site-footer .footer-menu-widget ul { gap: 7px 14px; }
.site-footer .footer-bottom { padding-bottom: 18px; }
.site-footer .footer-bottom-row { padding: 8px 48px 0; }
.site-footer .footer-quote { display: none; }
}
@media (max-width: 480px) {
.site-footer .footer-menu-widget .menu,
.site-footer .footer-menu-widget ul { gap: 6px 12px; }
.site-footer .footer-menu-widget a,
.site-footer .footer-copyright,
.site-footer .footer-powered { font-size: 13px; }
.site-footer .footer-bottom-row {
padding-left: 36px;
padding-right: 36px;
}
}
/* =========================================================
ZEVRUNO 1.13.0 — MODERN FOOTER VISUAL
Uses the existing Zevruno dark-navy + blue accent palette.
Native Footer 1–8 + Footer Menu widget areas.
========================================================= */
.site-footer {
--zevruno-footer-bg: #011635;
--zevruno-footer-bg-deep: #001432;
--zevruno-footer-border: #19385f;
--zevruno-footer-text: #b9c8de;
--zevruno-footer-muted: #aebed7;
--zevruno-footer-accent: var(--z-accent, #2f6fff);
width: 100%;
margin: 0;
padding: 0;
background: linear-gradient(180deg, var(--zevruno-footer-bg) 0%, var(--zevruno-footer-bg-deep) 100%);
color: var(--zevruno-footer-text);
overflow-x: hidden;
}
.site-footer .footer-wave {
display: none;
}
.site-footer .footer-grid {
width: min(1440px, calc(100% - 48px));
margin: 0 auto;
padding: 56px 0 46px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 42px;
align-items: start;
}
.site-footer .footer-widget-area {
min-width: 0;
max-width: 100%;
color: var(--zevruno-footer-text);
overflow-wrap: anywhere;
word-break: break-word;
}
.site-footer .footer-widget {
min-width: 0;
max-width: 100%;
margin: 0 0 24px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.site-footer .footer-widget:last-child {
margin-bottom: 0;
}
.site-footer .footer-widget-title,
.site-footer .footer-widget .widget-title {
margin: 0 0 18px;
padding: 0;
color: #fff;
font-size: 20px;
line-height: 1.3;
font-weight: 700;
}
.site-footer .footer-widget-title::after,
.site-footer .footer-widget .widget-title::after {
content: "";
display: block;
width: 42px;
height: 3px;
margin-top: 10px;
border-radius: 999px;
background: var(--zevruno-footer-accent);
}
.site-footer .footer-widget ul,
.site-footer .footer-widget ol {
list-style: none;
margin: 0;
padding: 0;
}
.site-footer .footer-widget li {
margin: 0;
padding: 0;
min-width: 0;
}
.site-footer .footer-widget li + li {
margin-top: 13px;
}
.site-footer .footer-widget a {
color: var(--zevruno-footer-text);
text-decoration: none;
overflow-wrap: anywhere;
transition: color .18s ease, opacity .18s ease;
}
.site-footer .footer-widget a:hover,
.site-footer .footer-widget a:focus {
color: #fff;
text-decoration: none;
}
.site-footer .footer-widget p {
color: var(--zevruno-footer-muted);
}
.site-footer .footer-widget img,
.site-footer .footer-widget video,
.site-footer .footer-widget iframe,
.site-footer .footer-widget embed,
.site-footer .footer-widget object {
max-width: 100%;
height: auto;
}
.site-footer .footer-widget input,
.site-footer .footer-widget select,
.site-footer .footer-widget textarea,
.site-footer .footer-widget button {
max-width: 100%;
box-sizing: border-box;
}
.site-footer .footer-widget table {
display: block;
max-width: 100%;
overflow-x: auto;
}
/* Footer Menu: native widget area, visually separated from the columns. */
.site-footer .footer-bottom {
width: min(1440px, calc(100% - 48px));
margin: 0 auto;
padding: 0 0 24px;
border-top: 1px solid var(--zevruno-footer-border);
position: relative;
text-align: center;
}
.site-footer .footer-menu-widget-area {
width: 100%;
margin: 0;
padding: 22px 0 18px;
border-bottom: 1px solid var(--zevruno-footer-border);
}
.site-footer .footer-menu-inner,
.site-footer .footer-menu-widget {
width: 100%;
min-width: 0;
}
.site-footer .footer-menu-widget {
margin: 0;
}
/* Navigation Menu widget looks like the reference footer menu. */
.site-footer .footer-menu-widget .widget_nav_menu .widget-title {
display: none;
}
.site-footer .footer-menu-widget .menu,
.site-footer .footer-menu-widget > ul,
.site-footer .footer-menu-widget ul.menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
column-gap: 0;
row-gap: 5px;
list-style: none;
margin: 0;
padding: 0;
}
.site-footer .footer-menu-widget .menu > li,
.site-footer .footer-menu-widget > ul > li,
.site-footer .footer-menu-widget ul.menu > li {
position: relative;
margin: 0;
padding: 0;
}
.site-footer .footer-menu-widget .menu > li + li::before,
.site-footer .footer-menu-widget > ul > li + li::before,
.site-footer .footer-menu-widget ul.menu > li + li::before {
content: "•";
display: inline-block;
margin: 0 17px;
color: var(--zevruno-footer-accent);
}
.site-footer .footer-menu-widget a {
color: var(--zevruno-footer-text);
font-size: 15px;
line-height: 1.5;
}
.site-footer .footer-menu-widget a:hover,
.site-footer .footer-menu-widget a:focus {
color: #fff;
}
/* Prevent nested menu lists from becoming a second horizontal footer bar. */
.site-footer .footer-menu-widget .sub-menu {
display: none;
}
/* Bottom metadata and copyright. Copyright is deliberately the final item. */
.site-footer .footer-meta {
min-width: 0;
padding: 18px 64px 7px;
color: var(--zevruno-footer-muted);
font-size: 13px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.site-footer .footer-powered,
.site-footer .footer-quote {
display: inline;
}
.site-footer .footer-quote {
margin-left: 8px;
}
.site-footer .footer-copyright-row {
width: 100%;
margin: 0;
padding: 5px 64px 0;
text-align: center;
}
.site-footer .footer-copyright {
display: block;
width: 100%;
color: #dce7fb;
font-size: 14px;
line-height: 1.5;
font-weight: 500;
overflow-wrap: anywhere;
}
.site-footer .back-top {
right: 0;
bottom: 18px;
}
/* Tablet: still multi-column, but tighter. */
@media (max-width: 1100px) {
.site-footer .footer-grid {
width: min(100% - 40px, 980px);
gap: 30px;
}
.site-footer .footer-widget-title,
.site-footer .footer-widget .widget-title {
font-size: 18px;
}
}
/* Mobile: stack naturally; no accordion and no horizontal overflow. */
@media (max-width: 767px) {
.site-footer .footer-grid {
width: calc(100% - 28px);
grid-template-columns: 1fr;
gap: 0;
padding: 24px 0 8px;
}
.site-footer .footer-widget-area {
width: 100%;
padding: 20px 0;
border-top: 1px solid var(--zevruno-footer-border);
}
.site-footer .footer-widget-area:first-child {
border-top: 0;
}
.site-footer .footer-widget {
margin-bottom: 0;
}
.site-footer .footer-widget-title,
.site-footer .footer-widget .widget-title {
font-size: 18px;
margin-bottom: 14px;
}
.site-footer .footer-bottom {
width: calc(100% - 28px);
padding-bottom: 22px;
}
.site-footer .footer-menu-widget-area {
padding: 18px 0 16px;
}
.site-footer .footer-menu-widget .menu > li + li::before,
.site-footer .footer-menu-widget > ul > li + li::before,
.site-footer .footer-menu-widget ul.menu > li + li::before {
margin: 0 10px;
}
.site-footer .footer-menu-widget a {
font-size: 14px;
}
.site-footer .footer-meta {
padding: 15px 42px 6px;
font-size: 12px;
}
.site-footer .footer-quote {
display: none;
}
.site-footer .footer-copyright-row {
padding: 5px 34px 0;
}
.site-footer .footer-copyright {
font-size: 13px;
}
.site-footer .back-top {
right: 0;
bottom: 15px;
}
}
/* Very small phones: compact, readable, and safe at 320px width. */
@media (max-width: 390px) {
.site-footer .footer-grid,
.site-footer .footer-bottom {
width: calc(100% - 20px);
}
.site-footer .footer-menu-widget .menu > li + li::before,
.site-footer .footer-menu-widget > ul > li + li::before,
.site-footer .footer-menu-widget ul.menu > li + li::before {
margin: 0 7px;
}
.site-footer .footer-menu-widget a {
font-size: 13px;
}
.site-footer .footer-meta {
padding-left: 30px;
padding-right: 30px;
}
.site-footer .footer-copyright-row {
padding-left: 24px;
padding-right: 24px;
}
}
/* ZEVRUNO 1.13.0 — FOOTER MODERN FINAL OVERRIDE */
.site-footer {
background: #011635 !important;
color: #b9c8de !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
.site-footer .footer-grid {
width: min(1400px, calc(100% - 48px)) !important;
margin: 0 auto !important;
padding: 52px 0 44px !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 42px !important;
align-items: start !important;
}
/* Let the native Footer 1–8 containers remain editable in Customizer,
while their widgets form the visual columns. */
@media (min-width: 768px) {
.site-footer .footer-widget-area {
display: contents !important;
}
.site-footer .footer-widget {
min-width: 0 !important;
max-width: 100% !important;
margin: 0 0 26px !important;
padding: 0 !important;
}
}
.site-footer .footer-widget-title,
.site-footer .footer-widget .widget-title {
color: #fff !important;
font-size: 20px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
margin: 0 0 18px !important;
padding: 0 !important;
}
.site-footer .footer-widget-title::after,
.site-footer .footer-widget .widget-title::after {
content: "" !important;
display: block !important;
width: 42px !important;
height: 3px !important;
margin-top: 10px !important;
border-radius: 99px !important;
background: #2f6fff !important;
}
.site-footer .footer-widget ul,
.site-footer .footer-widget ol {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.site-footer .footer-widget li {
margin: 0 0 13px !important;
padding: 0 !important;
}
.site-footer .footer-widget a {
color: #b9c8de !important;
text-decoration: none !important;
overflow-wrap: anywhere;
}
.site-footer .footer-widget a:hover,
.site-footer .footer-widget a:focus {
color: #fff !important;
}
/* Bottom area */
.site-footer .footer-bottom {
width: min(1400px, calc(100% - 48px)) !important;
margin: 0 auto !important;
padding: 0 0 22px !important;
border-top: 1px solid #19385f !important;
text-align: center !important;
min-height: 0 !important;
}
.site-footer .footer-menu-widget-area {
width: 100% !important;
margin: 0 !important;
padding: 20px 0 16px !important;
border-bottom: 1px solid #19385f !important;
}
.site-footer .footer-menu-widget .widget-title {
display: none !important;
}
.site-footer .footer-menu-widget .menu,
.site-footer .footer-menu-widget ul.menu,
.site-footer .footer-menu-widget > ul {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.site-footer .footer-menu-widget .menu > li,
.site-footer .footer-menu-widget ul.menu > li,
.site-footer .footer-menu-widget > ul > li {
margin: 0 !important;
padding: 0 !important;
}
.site-footer .footer-menu-widget .menu > li + li::before,
.site-footer .footer-menu-widget ul.menu > li + li::before,
.site-footer .footer-menu-widget > ul > li + li::before {
content: "•" !important;
display: inline-block !important;
color: #2f6fff !important;
margin: 0 17px !important;
}
.site-footer .footer-menu-widget a {
color: #b9c8de !important;
font-size: 15px !important;
line-height: 1.5 !important;
}
.site-footer .footer-meta {
padding: 16px 64px 5px !important;
color: #aebed7 !important;
font-size: 13px !important;
text-align: center !important;
}
.site-footer .footer-copyright-row {
width: 100% !important;
margin: 0 !important;
padding: 4px 64px 0 !important;
text-align: center !important;
}
.site-footer .footer-copyright {
display: block !important;
width: 100% !important;
color: #dce7fb !important;
font-size: 14px !important;
font-weight: 500 !important;
text-align: center !important;
overflow-wrap: anywhere;
}
@media (max-width: 1199px) and (min-width: 768px) {
.site-footer .footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 34px !important;
}
}
/* Mobile: widget columns become clean accordion sections. */
@media (max-width: 767px) {
.site-footer .footer-grid {
width: calc(100% - 28px) !important;
padding: 20px 0 6px !important;
display: block !important;
}
.site-footer .footer-widget-area {
display: block !important;
width: 100% !important;
border-top: 1px solid #19385f !important;
padding: 0 !important;
}
.site-footer .footer-widget-area:first-child {
border-top: 0 !important;
}
.site-footer .footer-widget {
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid #19385f !important;
}
.site-footer .footer-widget-title,
.site-footer .footer-widget .widget-title {
position: relative !important;
cursor: pointer !important;
margin: 0 !important;
padding: 17px 42px 17px 0 !important;
font-size: 17px !important;
line-height: 1.4 !important;
user-select: none;
}
.site-footer .footer-widget-title::after,
.site-footer .footer-widget .widget-title::after {
content: "+" !important;
position: absolute !important;
right: 4px !important;
top: 50% !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
transform: translateY(-50%) !important;
background: transparent !important;
color: #fff !important;
font-size: 24px !important;
font-weight: 300 !important;
}
.site-footer .footer-widget.is-open > .footer-widget-title::after,
.site-footer .footer-widget.is-open > .widget-title::after {
content: "−" !important;
}
.site-footer .footer-widget:not(.is-open) > *:not(.footer-widget-title):not(.widget-title) {
display: none !important;
}
.site-footer .footer-widget.is-open > *:not(.footer-widget-title):not(.widget-title) {
display: block !important;
padding-bottom: 16px !important;
}
.site-footer .footer-bottom {
width: calc(100% - 28px) !important;
padding-bottom: 18px !important;
}
.site-footer .footer-menu-widget-area {
padding: 18px 0 14px !important;
}
.site-footer .footer-menu-widget a {
font-size: 14px !important;
}
.site-footer .footer-menu-widget .menu > li + li::before,
.site-footer .footer-menu-widget ul.menu > li + li::before,
.site-footer .footer-menu-widget > ul > li + li::before {
margin: 0 10px !important;
}
.site-footer .footer-meta {
padding: 14px 30px 4px !important;
}
.site-footer .footer-quote {
display: none !important;
}
.site-footer .footer-copyright-row {
padding: 5px 22px 0 !important;
}
.site-footer .footer-copyright {
font-size: 13px !important;
}
}
@media (max-width: 390px) {
.site-footer .footer-grid,
.site-footer .footer-bottom {
width: calc(100% - 20px) !important;
}
}
/* =========================================================
ZEVRUNO 1.13.0 — FOOTER WIDGET CONTROLS
Native Widgets remain fully editable in Customize → Widgets.
========================================================= */
/* Per-area colors are injected safely by PHP as CSS custom properties. */
.site-footer .footer-widget-area {
color: var(--zevruno-widget-text, #aebed7);
}
.site-footer .footer-widget-area .footer-widget-title,
.site-footer .footer-widget-area .widget-title {
color: var(--zevruno-widget-title, #ffffff) !important;
}
.site-footer .footer-widget-area .footer-widget-title::after,
.site-footer .footer-widget-area .widget-title::after {
background: var(--zevruno-footer-accent, var(--z-accent, #2f6fff)) !important;
}
.site-footer .footer-widget-area .footer-widget p,
.site-footer .footer-widget-area .footer-widget span,
.site-footer .footer-widget-area .footer-widget label,
.site-footer .footer-widget-area .footer-widget .textwidget {
color: var(--zevruno-widget-text, #aebed7);
}
.site-footer .footer-widget-area .footer-widget a {
color: var(--zevruno-widget-link, #b9c8de) !important;
}
.site-footer .footer-widget-area .footer-widget a:hover,
.site-footer .footer-widget-area .footer-widget a:focus {
color: var(--zevruno-widget-hover, #ffffff) !important;
}
/* Configurable dropdown: each widget opens independently. */
.site-footer .footer-widget-area.footer-widget-layout-dropdown .footer-widget {
position: relative;
}
.site-footer .footer-widget-area.footer-widget-layout-dropdown .footer-widget > .footer-widget-title,
.site-footer .footer-widget-area.footer-widget-layout-dropdown .footer-widget > .widget-title {
cursor: pointer;
user-select: none;
padding-right: 28px !important;
position: relative;
}
.site-footer .footer-widget-area.footer-widget-layout-dropdown .footer-widget > .footer-widget-title::before,
.site-footer .footer-widget-area.footer-widget-layout-dropdown .footer-widget > .widget-title::before {
content: "+";
position: absolute;
right: 0;
top: 0;
color: var(--zevruno-widget-title, #ffffff);
font-size: 22px;
line-height: 1.1;
font-weight: 400;
opacity: .9;
}
.site-footer .footer-widget-area.footer-widget-layout-dropdown .footer-widget.is-open > .footer-widget-title::before,
.site-footer .footer-widget-area.footer-widget-layout-dropdown .footer-widget.is-open > .widget-title::before {
content: "−";
}
.site-footer .footer-widget-area.footer-widget-layout-dropdown .footer-widget > [data-zevruno-widget-content] {
display: none;
}
.site-footer .footer-widget-area.footer-widget-layout-dropdown .footer-widget.is-open > [data-zevruno-widget-content] {
display: block;
}
/* Keep the simple option completely normal — no fake click affordance. */
.site-footer .footer-widget-area.footer-widget-layout-simple .footer-widget > .footer-widget-title,
.site-footer .footer-widget-area.footer-widget-layout-simple .footer-widget > .widget-title {
cursor: default;
}
/* The Footer Menu remains a normal native widget area. */
.site-footer .footer-menu-widget-area .widget-title {
color: #fff;
}
/* Mobile remains touch-friendly. */
@media (max-width: 767px) {
.site-footer .footer-widget-area.footer-widget-layout-dropdown .footer-widget > .footer-widget-title,
.site-footer .footer-widget-area.footer-widget-layout-dropdown .footer-widget > .widget-title {
min-height: 42px;
display: flex;
align-items: center;
margin-bottom: 0 !important;
padding: 8px 30px 8px 0 !important;
}
.site-footer .footer-widget-area.footer-widget-layout-dropdown .footer-widget > .footer-widget-title::after,
.site-footer .footer-widget-area.footer-widget-layout-dropdown .footer-widget > .widget-title::after {
display: none;
}
.site-footer .footer-widget-area.footer-widget-layout-dropdown .footer-widget.is-open > .footer-widget-title,
.site-footer .footer-widget-area.footer-widget-layout-dropdown .footer-widget.is-open > .widget-title {
margin-bottom: 12px !important;
}
.site-footer .footer-widget-area.footer-widget-layout-dropdown .footer-widget > [data-zevruno-widget-content] {
padding-bottom: 4px;
}
}
/* ZEVRUNO 1.13.1 — FOOTER DROPDOWN SAFE FIX */
.site-footer [data-zevruno-footer-panel][hidden] {
display: none !important;
}
.site-footer [data-zevruno-footer-toggle] {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.site-footer [data-zevruno-footer-toggle]:focus-visible {
outline: 2px solid var(--z-accent, #2f6fff);
outline-offset: 4px;
}
@media (max-width: 767px) {
.site-footer [data-zevruno-footer-toggle] {
user-select: none;
}
}
/* ZEVRUNO 1.13.4 — flat footer: no dropdown/accordion */
.site-footer .footer-widget-area .widget > .widget-title,
.site-footer .footer-widget-area .footer-widget-title {
cursor: default !important;
user-select: text;
padding-right: 0 !important;
}
.site-footer .footer-widget-area .widget > .widget-title::before,
.site-footer .footer-widget-area .widget > .widget-title::after,
.site-footer .footer-widget-area .footer-widget-title::before,
.site-footer .footer-widget-area .footer-widget-title::after {
content: none !important;
}
.site-footer .footer-widget-area .widget > ul,
.site-footer .footer-widget-area .widget > div,
.site-footer .footer-widget-area .widget > p,
.site-footer .footer-widget-area .widget > form,
.site-footer .footer-widget-area .widget > nav {
display: block !important;
}
.site-footer .footer-about {
min-width: 0;
}
.site-footer .footer-about .footer-widget-title,
.site-footer .footer-widget-area .widget-title {
color: var(--zevruno-widget-title, #fff);
font-size: 18px;
line-height: 1.3;
margin: 0 0 16px;
}
.site-footer .footer-about .footer-widget-title::after,
.site-footer .footer-widget-area .widget-title::after {
content: "";
display: block;
width: 45px;
height: 3px;
border-radius: 3px;
background: var(--z-accent, #1677ff);
margin-top: 8px;
}
.site-footer .footer-about-text,
.site-footer .footer-about-text p,
.site-footer .footer-widget-area .widget,
.site-footer .footer-widget-area .widget p {
color: var(--zevruno-widget-text, #aebed7);
}
.site-footer .footer-about-text p {
margin: 0 0 10px;
}
.site-footer .footer-social-row {
margin-top: 20px;
flex-wrap: wrap;
}
.site-footer .footer-grid {
align-items: start;
}
.site-footer .footer-widget-area {
min-width: 0;
}
.site-footer .footer-widget-area li {
list-style: none;
}
.site-footer .footer-widget-area a {
color: var(--zevruno-widget-link, #b9c8de);
}
.site-footer .footer-widget-area a:hover {
color: var(--zevruno-widget-hover, #fff);
}
.site-footer .footer-menu-widget-area {
width: 100%;
text-align: center;
padding: 18px 0;
border-top: 1px solid #18385f;
border-bottom: 1px solid #18385f;
}
.site-footer .footer-menu-widget-area ul {
display: flex !important;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 8px 26px;
list-style: none;
margin: 0;
padding: 0;
}
.site-footer .footer-menu-widget-area li {
margin: 0;
}
.site-footer .footer-menu-widget-area a {
color: #c7d5e9;
text-decoration: none;
}
.site-footer .footer-menu-widget-area a:hover {
color: var(--z-accent, #1677ff);
}
.site-footer .footer-bottom {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
gap: 0;
min-height: 0;
padding-top: 0;
}
.site-footer .footer-meta {
order: 2;
width: 100%;
text-align: center;
padding: 14px 0 8px;
}
.site-footer .footer-copyright-row {
order: 3;
width: 100%;
text-align: center;
padding: 10px 0 24px;
}
.site-footer .footer-copyright {
color: #c7d5e9;
}
.site-footer .back-top {
position: absolute;
right: 0;
bottom: 18px;
}
@media (max-width: 800px) {
.site-footer {
padding-top: 52px;
}
.site-footer .footer-grid {
grid-template-columns: 1fr !important;
gap: 0;
padding-bottom: 18px;
}
.site-footer .footer-about,
.site-footer .footer-widget-area {
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #18385f;
}
.site-footer .footer-about {
padding-top: 0;
}
.site-footer .footer-widget-area .widget {
display: block !important;
}
.site-footer .footer-widget-area .widget > ul,
.site-footer .footer-widget-area .widget > div,
.site-footer .footer-widget-area .widget > p,
.site-footer .footer-widget-area .widget > form,
.site-footer .footer-widget-area .widget > nav {
display: block !important;
}
.site-footer .footer-menu-widget-area {
text-align: center;
padding: 16px 0;
}
.site-footer .footer-menu-widget-area ul {
gap: 7px 18px;
}
.site-footer .footer-meta {
text-align: center;
padding: 14px 30px 8px;
}
.site-footer .footer-copyright-row {
padding: 8px 30px 70px;
}
.site-footer .back-top {
right: 8px;
bottom: 18px;
}
}
@media (max-width: 480px) {
.site-footer .footer-menu-widget-area ul {
gap: 8px 14px;
}
}
/* =========================================================
ZEVRUNO 1.13.4 — FINAL FLAT FOOTER / RESPONSIVE OVERRIDE
- No footer dropdown/accordion on any screen.
- Native widget content is always visible.
- Footer 1–8 and About Us stack cleanly on mobile.
========================================================= */
.site-footer .footer-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
align-items: start !important;
gap: 42px 38px !important;
width: min(1400px, calc(100% - 48px)) !important;
margin: 0 auto !important;
padding: 58px 0 42px !important;
}
.site-footer .footer-about,
.site-footer .footer-widget-area {
min-width: 0 !important;
width: auto !important;
}
.site-footer .footer-widget {
min-width: 0 !important;
margin: 0 0 24px !important;
padding: 0 !important;
}
.site-footer .footer-widget-title,
.site-footer .footer-widget .widget-title,
.site-footer .footer-about .footer-widget-title {
display: block !important;
margin: 0 0 14px !important;
color: var(--zevruno-widget-title, #fff) !important;
}
.site-footer .footer-widget-title::before,
.site-footer .footer-widget-title::after,
.site-footer .footer-widget .widget-title::before,
.site-footer .footer-widget .widget-title::after {
content: none !important;
display: none !important;
}
/* Critical: never hide widget content on mobile. */
.site-footer .footer-widget > *:not(.footer-widget-title):not(.widget-title),
.site-footer .footer-widget.is-open > *:not(.footer-widget-title):not(.widget-title),
.site-footer .footer-col ul,
.site-footer .footer-widget ul,
.site-footer .footer-widget ol,
.site-footer .footer-widget p,
.site-footer .footer-widget form,
.site-footer .footer-widget .menu {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.site-footer .footer-widget ul,
.site-footer .footer-widget ol,
.site-footer .footer-widget .menu {
padding-left: 0 !important;
}
.site-footer .footer-widget li {
margin: 0 0 9px !important;
min-width: 0 !important;
overflow-wrap: anywhere;
}
.site-footer .footer-widget a {
overflow-wrap: anywhere;
word-break: normal;
}
.site-footer .footer-menu-widget-area {
width: 100% !important;
}
.site-footer .footer-menu-widget .menu,
.site-footer .footer-menu-widget > ul,
.site-footer .footer-menu-widget ul.menu {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
height: auto !important;
max-height: none !important;
}
@media (max-width: 1100px) {
.site-footer .footer-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 34px 28px !important;
}
}
@media (max-width: 800px) {
.site-footer .footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 22px !important;
width: calc(100% - 28px) !important;
padding: 42px 0 24px !important;
}
.site-footer .footer-about {
grid-column: 1 / -1 !important;
padding-bottom: 26px !important;
}
.site-footer .footer-widget-area {
border-top: 1px solid rgba(185, 200, 222, .16) !important;
padding: 22px 0 4px !important;
}
.site-footer .footer-widget {
margin-bottom: 18px !important;
}
.site-footer .footer-widget-title,
.site-footer .footer-widget .widget-title {
font-size: 17px !important;
line-height: 1.35 !important;
}
.site-footer .footer-widget li {
margin-bottom: 8px !important;
}
.site-footer .footer-menu-widget-area {
padding: 17px 0 14px !important;
}
.site-footer .footer-bottom {
width: calc(100% - 28px) !important;
}
}
@media (max-width: 520px) {
.site-footer .footer-grid {
grid-template-columns: 1fr !important;
width: calc(100% - 24px) !important;
gap: 0 !important;
padding-top: 34px !important;
}
.site-footer .footer-about,
.site-footer .footer-widget-area {
grid-column: auto !important;
padding: 20px 0 !important;
}
.site-footer .footer-about {
padding-top: 0 !important;
}
.site-footer .footer-widget {
margin-bottom: 14px !important;
}
.site-footer .footer-widget-title,
.site-footer .footer-widget .widget-title {
font-size: 18px !important;
}
.site-footer .footer-widget li,
.site-footer .footer-widget a {
font-size: 14px !important;
line-height: 1.55 !important;
}
.site-footer .footer-bottom {
width: calc(100% - 24px) !important;
}
.site-footer .footer-menu-widget .menu,
.site-footer .footer-menu-widget > ul,
.site-footer .footer-menu-widget ul.menu {
gap: 5px 14px !important;
}
}
/* =========================================================
ZEVRUNO 1.13.5 — FINAL CUSTOMIZER / FLAT FOOTER SAFETY
========================================================= */
html, body { overflow-x: hidden !important; overflow-y: auto !important; }
.site-footer .footer-widget-area,
.site-footer .footer-widget,
.site-footer .footer-widget > ul,
.site-footer .footer-widget > ol,
.site-footer .footer-widget > p,
.site-footer .footer-widget > div,
.site-footer .footer-widget > form,
.site-footer .footer-widget > nav,
.site-footer .footer-widget .menu {
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.site-footer .footer-widget-title::before,
.site-footer .footer-widget-title::after,
.site-footer .footer-widget .widget-title::before,
.site-footer .footer-widget .widget-title::after {
content: none !important;
}
@media (max-width: 800px) {
.site-footer .footer-grid {
grid-template-columns: 1fr !important;
width: min(100% - 28px, 720px) !important;
gap: 0 !important;
padding: 34px 0 22px !important;
}
.site-footer .footer-about,
.site-footer .footer-widget-area {
grid-column: auto !important;
width: 100% !important;
padding: 20px 0 !important;
border-bottom: 1px solid rgba(185,200,222,.16) !important;
}
.site-footer .footer-about { padding-top: 0 !important; }
.site-footer .footer-widget { margin: 0 0 18px !important; }
.site-footer .footer-widget:last-child { margin-bottom: 0 !important; }
.site-footer .footer-widget ul,
.site-footer .footer-widget ol,
.site-footer .footer-widget .menu,
.site-footer .footer-widget p,
.site-footer .footer-widget form,
.site-footer .footer-widget nav { display: block !important; }
.site-footer .footer-menu-widget .menu,
.site-footer .footer-menu-widget > ul,
.site-footer .footer-menu-widget ul.menu { display: flex !important; }
.site-footer .footer-bottom { width: min(100% - 28px, 720px) !important; }
}
/* =========================================================
ZEVRUNO 1.13.6 — MOBILE FLAT FOOTER CONTENT RESTORE
Root-cause fix: an older 1.13.0 mobile accordion rule was still
loaded earlier in this stylesheet and used !important to hide all
widget siblings until .is-open. Dropdown/accordion was removed,
so that legacy rule must be explicitly neutralized at the end.
========================================================= */
@media (max-width: 767px) {
.site-footer .footer-widget-area .footer-widget:not(.is-open) > *:not(.footer-widget-title):not(.widget-title),
.site-footer .footer-widget-area .footer-widget.is-open > *:not(.footer-widget-title):not(.widget-title) {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
padding-bottom: 0 !important;
}
.site-footer .footer-widget-area .footer-widget > .widget-title,
.site-footer .footer-widget-area .footer-widget > .footer-widget-title {
cursor: default !important;
}
.site-footer .footer-widget-area .footer-widget > .widget-title::after,
.site-footer .footer-widget-area .footer-widget > .footer-widget-title::after,
.site-footer .footer-widget-area .footer-widget > .widget-title::before,
.site-footer .footer-widget-area .footer-widget > .footer-widget-title::before {
content: none !important;
display: none !important;
}
/* Navigation menus and recent-post lists must remain visible. */
.site-footer .footer-widget-area .footer-widget ul,
.site-footer .footer-widget-area .footer-widget ol,
.site-footer .footer-widget-area .footer-widget .menu,
.site-footer .footer-widget-area .footer-widget .textwidget,
.site-footer .footer-widget-area .footer-widget nav,
.site-footer .footer-widget-area .footer-widget form,
.site-footer .footer-widget-area .footer-widget > div {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
}
/* =========================================================
ZEVRUNO 1.14.0 — FINAL FOOTER LAYOUT + CUSTOM SPACING CONTROLS
- About Us title/text/social always stay in one column.
- Footer widgets are flat/static on desktop and mobile.
- Native WordPress widget content is never hidden by legacy accordion CSS.
- Per-widget typography, colors and spacing come from Customizer CSS vars.
========================================================= */
.site-footer .footer-about {
display: block !important;
grid-column: auto !important;
align-self: start !important;
padding-top: var(--zevruno-about-pad-top, 0px) !important;
padding-bottom: var(--zevruno-about-pad-bottom, 0px) !important;
color: var(--zevruno-about-text-color, #aebed7) !important;
}
.site-footer .footer-about .footer-widget-title {
display: block !important;
color: var(--zevruno-about-title-color, #fff) !important;
font-size: var(--zevruno-about-title-size, 20px) !important;
margin: 0 0 var(--zevruno-about-title-gap, 14px) !important;
}
.site-footer .footer-about .footer-widget-title::before,
.site-footer .footer-about .footer-widget-title::after {
content: none !important;
display: none !important;
}
.site-footer .footer-about-text,
.site-footer .footer-about-text p {
color: var(--zevruno-about-text-color, #aebed7) !important;
font-size: var(--zevruno-about-text-size, 15px) !important;
line-height: 1.6 !important;
margin: 0 !important;
}
.site-footer .footer-about .footer-social-row {
margin-top: var(--zevruno-about-social-gap, 20px) !important;
}
.site-footer .footer-widget-area {
min-width: 0 !important;
text-align: var(--zevruno-widget-align, left) !important;
padding-top: var(--zevruno-widget-pad-top, 0px) !important;
padding-bottom: var(--zevruno-widget-pad-bottom, 0px) !important;
}
.site-footer .footer-widget-area .footer-widget {
margin-bottom: var(--zevruno-widget-gap, 24px) !important;
}
.site-footer .footer-widget-area .footer-widget-title,
.site-footer .footer-widget-area .widget-title {
color: var(--zevruno-widget-title, #fff) !important;
font-size: var(--zevruno-widget-title-size, 20px) !important;
line-height: 1.3 !important;
margin-bottom: var(--zevruno-widget-title-gap, 14px) !important;
}
.site-footer .footer-widget-area .footer-widget-title::before,
.site-footer .footer-widget-area .footer-widget-title::after,
.site-footer .footer-widget-area .widget-title::before,
.site-footer .footer-widget-area .widget-title::after {
content: none !important;
display: none !important;
}
.site-footer .footer-widget-area .footer-widget,
.site-footer .footer-widget-area .footer-widget p,
.site-footer .footer-widget-area .footer-widget li,
.site-footer .footer-widget-area .footer-widget a,
.site-footer .footer-widget-area .footer-widget .textwidget {
font-size: var(--zevruno-widget-content-size, 15px) !important;
line-height: var(--zevruno-widget-line-height, 1.55) !important;
}
.site-footer .footer-widget-area .footer-widget p,
.site-footer .footer-widget-area .footer-widget .textwidget {
color: var(--zevruno-widget-text, #aebed7) !important;
}
.site-footer .footer-widget-area .footer-widget a {
color: var(--zevruno-widget-link, #b9c8de) !important;
}
.site-footer .footer-widget-area .footer-widget a:hover,
.site-footer .footer-widget-area .footer-widget a:focus {
color: var(--zevruno-widget-hover, #fff) !important;
}
/* Kill every legacy mobile accordion selector from earlier theme revisions. */
.site-footer .footer-col > h3::before,
.site-footer .footer-widget-area .widget > .widget-title::before,
.site-footer .footer-widget-area .widget > .widget-title::after {
display: none !important;
content: none !important;
}
.site-footer .footer-widget-area .footer-widget > *,
.site-footer .footer-widget-area .footer-widget > ul,
.site-footer .footer-widget-area .footer-widget > ol,
.site-footer .footer-widget-area .footer-widget > p,
.site-footer .footer-widget-area .footer-widget > div,
.site-footer .footer-widget-area .footer-widget > nav,
.site-footer .footer-widget-area .footer-widget > form,
.site-footer .footer-widget-area .footer-widget .menu {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.site-footer .footer-widget-area .footer-widget .menu {
display: block !important;
}
@media (min-width: 768px) {
.site-footer .footer-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
align-items: start !important;
}
.site-footer .footer-about {
display: block !important;
}
.site-footer .footer-widget-area {
display: block !important;
}
}
@media (max-width: 767px) {
.site-footer .footer-grid {
grid-template-columns: 1fr !important;
width: min(100% - 28px, 720px) !important;
gap: 0 !important;
}
.site-footer .footer-about,
.site-footer .footer-widget-area {
width: 100% !important;
grid-column: auto !important;
}
.site-footer .footer-widget-area {
border-top: 1px solid rgba(185,200,222,.16) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.site-footer .footer-about {
border-top: 0 !important;
}
.site-footer .footer-widget-area .footer-widget-title,
.site-footer .footer-widget-area .widget-title {
font-size: var(--zevruno-widget-title-size, 18px) !important;
}
.site-footer .footer-widget-area .footer-widget,
.site-footer .footer-widget-area .footer-widget p,
.site-footer .footer-widget-area .footer-widget li,
.site-footer .footer-widget-area .footer-widget a,
.site-footer .footer-widget-area .footer-widget .textwidget {
font-size: var(--zevruno-widget-content-size, 14px) !important;
}
}
/* =========================================================
ZEVRUNO 1.15.0 — MULTIPLE HEADER + FOOTER DESIGN PRESETS
Header: 1 Classic (default), 2 Compact, 3 Centered, 4 Bold.
Footer: 1 Classic (default), 2 Minimal, 3 Split, 4 Glass.
Presets are CSS/layout only; widget/menu data is untouched.
========================================================= */
/* ---------- HEADER 2: COMPACT ---------- */
.zevruno-header-design-compact .main-header{
min-height:88px;
padding:14px 28px;
gap:22px;
border-radius:0 0 12px 12px;
}
.zevruno-header-design-compact .brand{min-width:190px;gap:10px}
.zevruno-header-design-compact .brand-mark{width:46px;height:46px;font-size:34px}
.zevruno-header-design-compact .brand-copy strong{font-size:24px}
.zevruno-header-design-compact .header-search{height:46px;width:205px}
.zevruno-header-design-compact .nav-list{gap:17px;font-size:14px}
.zevruno-header-design-compact .nav-list a{padding:8px 0}
/* ---------- HEADER 3: CENTERED ---------- */
.zevruno-header-design-centered .main-header{
min-height:155px;
flex-wrap:wrap;
justify-content:center;
gap:10px 26px;
padding:18px 30px 16px;
}
.zevruno-header-design-centered .brand{
width:100%;
min-width:0;
justify-content:center;
text-align:center;
}
.zevruno-header-design-centered .primary-nav{
flex:0 1 auto;
order:3;
width:100%;
}
.zevruno-header-design-centered .nav-list{justify-content:center;gap:28px}
.zevruno-header-design-centered .header-actions{position:absolute;right:28px;top:82px}
.zevruno-header-design-centered .menu-toggle{display:none}
/* ---------- HEADER 4: BOLD / MODERN ---------- */
.zevruno-header-design-bold .main-header{
background:linear-gradient(135deg,#041d48,#062b68);
color:#fff;
min-height:108px;
border-radius:0;
box-shadow:none;
}
.zevruno-header-design-bold .brand-copy strong,
.zevruno-header-design-bold .nav-list a{color:#fff}
.zevruno-header-design-bold .brand-copy small{color:#b9c9e2}
.zevruno-header-design-bold .nav-list .current-menu-item a,
.zevruno-header-design-bold .nav-list a:hover{color:#38bdf8}
.zevruno-header-design-bold .header-search{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}
.zevruno-header-design-bold .header-search input{color:#fff}
.zevruno-header-design-bold .header-search input::placeholder{color:#b9c9e2}
.zevruno-header-design-bold .icon-button{background:rgba(255,255,255,.1);color:#fff}
.zevruno-header-design-bold .login-button{background:#1677ff}
/* ---------- FOOTER 2: MINIMAL ---------- */
.site-footer.zevruno-footer-design-minimal{
padding-top:48px;
background:#031b3b;
}
.site-footer.zevruno-footer-design-minimal .footer-wave{display:none}
.site-footer.zevruno-footer-design-minimal .footer-grid{
gap:28px;
padding-bottom:34px;
}
.site-footer.zevruno-footer-design-minimal .footer-widget-area{
border-left:1px solid rgba(185,200,222,.14);
padding-left:24px;
}
.site-footer.zevruno-footer-design-minimal .footer-about{
border-left:0;
padding-left:0;
}
.site-footer.zevruno-footer-design-minimal .footer-widget-title,
.site-footer.zevruno-footer-design-minimal .widget-title{
font-weight:700;
}
.site-footer.zevruno-footer-design-minimal .footer-menu-widget-area{
border-top:1px solid rgba(185,200,222,.16);
border-bottom:1px solid rgba(185,200,222,.16);
padding:18px 0;
}
.site-footer.zevruno-footer-design-minimal .footer-meta{
display:none;
}
/* ---------- FOOTER 3: SPLIT ---------- */
.site-footer.zevruno-footer-design-split{
background:linear-gradient(160deg,#041a3b,#061f46);
padding-top:58px;
}
.site-footer.zevruno-footer-design-split .footer-grid{
grid-template-columns:minmax(220px,1.25fr) repeat(3,minmax(0,1fr)) !important;
gap:30px;
}
.site-footer.zevruno-footer-design-split .footer-about{
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:26px !important;
}
.site-footer.zevruno-footer-design-split .footer-widget-area{
padding:8px 4px;
}
.site-footer.zevruno-footer-design-split .footer-bottom{
margin-top:12px;
}
.site-footer.zevruno-footer-design-split .footer-menu-widget-area{
background:rgba(255,255,255,.025);
border-radius:12px;
padding:4px 14px;
}
/* ---------- FOOTER 4: GLASS / MODERN ---------- */
.site-footer.zevruno-footer-design-glass{
background:
radial-gradient(circle at 15% 0%,rgba(22,119,255,.22),transparent 32%),
radial-gradient(circle at 90% 25%,rgba(21,183,233,.12),transparent 30%),
linear-gradient(145deg,#020e25,#061a38);
padding-top:62px;
}
.site-footer.zevruno-footer-design-glass .footer-grid{
gap:18px;
}
.site-footer.zevruno-footer-design-glass .footer-about,
.site-footer.zevruno-footer-design-glass .footer-widget-area{
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.10);
border-radius:18px;
padding:22px !important;
backdrop-filter:blur(8px);
}
.site-footer.zevruno-footer-design-glass .footer-widget-area .footer-widget{
margin-bottom:18px !important;
}
.site-footer.zevruno-footer-design-glass .footer-menu-widget-area{
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.10);
border-radius:14px;
padding:10px 18px;
}
.site-footer.zevruno-footer-design-glass .footer-bottom{
border-top-color:rgba(255,255,255,.12);
}
/* Mobile behavior for every preset */
@media (max-width:767px){
.zevruno-header-design-centered .main-header{
min-height:92px;
flex-wrap:nowrap;
justify-content:flex-start;
padding:14px 18px;
}
.zevruno-header-design-centered .brand{
width:auto;
justify-content:flex-start;
text-align:left;
}
.zevruno-header-design-centered .primary-nav{order:initial;width:auto}
.zevruno-header-design-centered .header-actions{position:static}
.zevruno-header-design-compact .main-header,
.zevruno-header-design-bold .main-header{
min-height:82px;
padding:12px 16px;
}
.site-footer.zevruno-footer-design-minimal .footer-widget-area{
border-left:0;
border-top:1px solid rgba(185,200,222,.14);
padding-left:0;
padding-top:20px;
}
.site-footer.zevruno-footer-design-split .footer-grid{
grid-template-columns:1fr !important;
}
.site-footer.zevruno-footer-design-split .footer-about,
.site-footer.zevruno-footer-design-glass .footer-about,
.site-footer.zevruno-footer-design-glass .footer-widget-area{
padding:20px !important;
}
.site-footer.zevruno-footer-design-glass .footer-grid{
gap:14px;
}
}
/* Customizer preview transition */
.site-header[class*="zevruno-header-design-"],
.site-footer[class*="zevruno-footer-design-"]{
transition:background .2s ease,box-shadow .2s ease,padding .2s ease;
}
/* =========================================================
ZEVRUNO 1.15.3 — HEADER 5: POLISHED RESPONSIVE UTILITY
Desktop: Logo → Menu → compact search → optional actions.
Mobile: Menu → Logo → Search → Dark mode → Login.
WordPress menu opens below the mobile utility row.
========================================================= */
.zevruno-header-design-one-line {
--z5-border: #e7edf5;
--z5-surface: #ffffff;
--z5-muted-surface: #f5f8fc;
--z5-text: #0b1730;
--z5-muted: #6d7b91;
}
.zevruno-header-design-one-line .main-header {
position: relative;
width: 100%;
min-height: 82px;
display: flex;
align-items: center;
gap: clamp(14px, 1.8vw, 28px);
padding: 14px clamp(18px, 3vw, 42px);
background: var(--z5-surface);
border-bottom: 1px solid var(--z5-border);
border-radius: 0 0 16px 16px;
box-shadow: 0 8px 24px rgba(17,45,86,.07);
}
/* Desktop order: logo → menu → search/actions. */
.zevruno-header-design-one-line .brand {
order: 1;
flex: 0 1 auto;
min-width: 190px;
max-width: 270px;
gap: 11px;
}
.zevruno-header-design-one-line .brand-logo {
display: block;
width: auto;
max-width: 185px;
max-height: 54px;
object-fit: contain;
}
.zevruno-header-design-one-line .brand-mark {
width: 50px;
height: 50px;
font-size: 38px;
flex: 0 0 50px;
}
.zevruno-header-design-one-line .brand-copy {
min-width: 0;
}
.zevruno-header-design-one-line .brand-copy strong {
display: block;
font-size: clamp(22px, 2vw, 29px);
line-height: 1.05;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zevruno-header-design-one-line .brand-copy small {
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zevruno-header-design-one-line .primary-nav {
order: 2;
flex: 1 1 auto;
min-width: 0;
width: auto;
}
.zevruno-header-design-one-line .nav-list {
display: flex;
align-items: center;
justify-content: flex-start;
gap: clamp(10px, 1.25vw, 21px);
min-width: 0;
font-size: 14px;
line-height: 1.2;
}
.zevruno-header-design-one-line .nav-list > li {
flex: 0 0 auto;
}
.zevruno-header-design-one-line .nav-list > li > a {
padding: 10px 0;
white-space: nowrap;
}
.zevruno-header-design-one-line .header-actions {
order: 3;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
min-width: 0;
}
.zevruno-header-design-one-line .header-search {
width: 190px;
height: 42px;
flex: 0 1 190px;
margin: 0;
padding: 3px 4px 3px 11px;
border-radius: 22px;
background: var(--z5-muted-surface);
border: 1px solid var(--z5-border);
}
.zevruno-header-design-one-line .header-search input {
min-width: 0;
width: 100%;
font-size: 13px;
color: var(--z5-text);
}
.zevruno-header-design-one-line .header-search button {
width: 36px;
height: 36px;
flex: 0 0 36px;
padding: 0;
border-radius: 50%;
font-size: 18px;
line-height: 1;
}
.zevruno-header-design-one-line .header-search button svg,
.zevruno-header-design-one-line .login-button svg {
width: 19px;
height: 19px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.zevruno-header-design-one-line .icon-button,
.zevruno-header-design-one-line .login-button {
flex: 0 0 auto;
}
.zevruno-header-design-one-line .icon-button {
width: 42px;
height: 42px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid var(--z5-border);
background: var(--z5-muted-surface);
color: var(--z5-text);
cursor: pointer;
}
.zevruno-header-design-one-line .login-button {
height: 42px;
min-width: 78px;
padding: 0 13px;
justify-content: center;
border-radius: 22px;
white-space: nowrap;
}
.zevruno-header-design-one-line .menu-toggle {
display: none;
}
/* Intermediate desktop widths: protect the header from crowding. */
@media (max-width: 1250px) and (min-width: 801px) {
.zevruno-header-design-one-line .main-header {
gap: 12px;
padding-left: 18px;
padding-right: 18px;
}
.zevruno-header-design-one-line .brand {
min-width: 170px;
max-width: 220px;
}
.zevruno-header-design-one-line .brand-copy strong {
font-size: 23px;
}
.zevruno-header-design-one-line .brand-copy small {
display: none;
}
.zevruno-header-design-one-line .nav-list {
gap: 10px;
font-size: 13px;
}
.zevruno-header-design-one-line .header-search {
width: 155px;
flex-basis: 155px;
}
.zevruno-header-design-one-line .login-button span {
display: none;
}
.zevruno-header-design-one-line .login-button {
min-width: 42px;
width: 42px;
padding: 0;
border-radius: 50%;
}
}
/* Mobile: a clean single utility row. The menu is opened separately. */
@media (max-width: 800px) {
.zevruno-header-design-one-line .main-header {
min-height: 68px;
height: auto;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0;
padding: 9px 12px;
border-radius: 0;
box-shadow: 0 5px 18px rgba(17,45,86,.08);
}
.zevruno-header-design-one-line .menu-toggle {
order: 1;
display: flex;
flex: 0 0 42px;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
padding: 0;
margin: 0;
border: 0;
border-radius: 10px;
background: transparent;
cursor: pointer;
z-index: 1003;
}
.zevruno-header-design-one-line .menu-toggle span {
display: block;
width: 24px;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: transform .18s ease, opacity .18s ease;
}
.zevruno-header-design-one-line .menu-toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.zevruno-header-design-one-line .menu-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.zevruno-header-design-one-line .menu-toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.zevruno-header-design-one-line .brand {
order: 2;
flex: 1 1 auto;
min-width: 0;
max-width: none;
gap: 8px;
padding: 0 8px;
}
.zevruno-header-design-one-line .brand-logo {
max-width: 132px;
max-height: 42px;
}
.zevruno-header-design-one-line .brand-mark {
width: 42px;
height: 42px;
flex-basis: 42px;
font-size: 32px;
}
.zevruno-header-design-one-line .brand-copy strong {
font-size: 20px;
line-height: 1.05;
}
.zevruno-header-design-one-line .brand-copy small {
display: none;
}
.zevruno-header-design-one-line .header-actions {
order: 3;
flex: 0 0 auto;
width: auto;
gap: 5px;
}
.zevruno-header-design-one-line .header-search {
width: 40px;
height: 40px;
flex: 0 0 40px;
padding: 0;
border-radius: 50%;
background: var(--z5-muted-surface);
}
.zevruno-header-design-one-line .header-search.mobile-search-open {
position: absolute;
top: calc(100% + 8px);
left: 12px;
right: 12px;
width: auto;
height: 48px;
flex: none;
z-index: 1004;
border-radius: 24px;
padding: 4px 5px 4px 13px;
background: var(--z5-surface);
box-shadow: 0 14px 30px rgba(9,34,71,.16);
}
.zevruno-header-design-one-line .header-search.mobile-search-open input {
position: static;
width: 100%;
height: 38px;
opacity: 1;
pointer-events: auto;
padding: 0 8px;
border: 0;
outline: 0;
font-size: 14px;
}
.zevruno-header-design-one-line .header-search.mobile-search-open button {
width: 40px;
height: 40px;
flex-basis: 40px;
background: var(--z-accent);
color: #fff;
}
.zevruno-header-design-one-line .header-search input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
border: 0;
opacity: 0;
pointer-events: none;
}
.zevruno-header-design-one-line .header-search button {
width: 40px;
height: 40px;
flex-basis: 40px;
background: transparent;
color: var(--z5-text);
border-radius: 50%;
}
.zevruno-header-design-one-line .icon-button {
width: 40px;
height: 40px;
border-radius: 50%;
}
.zevruno-header-design-one-line .login-button {
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
}
.zevruno-header-design-one-line .login-button span {
display: none;
}
/* Mobile navigation is hidden until the hamburger is pressed. */
.zevruno-header-design-one-line .primary-nav,
.zevruno-header-design-one-line .main-header.nav-collapsed .primary-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
max-width: none;
display: none;
margin: 0;
padding: 8px 14px 12px;
background: var(--z5-surface);
border-top: 1px solid var(--z5-border);
border-radius: 0 0 16px 16px;
box-shadow: 0 18px 35px rgba(9,34,71,.14);
z-index: 1002;
}
.zevruno-header-design-one-line .primary-nav.is-open {
display: block;
}
.zevruno-header-design-one-line .nav-list {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
width: 100%;
font-size: 15px;
}
.zevruno-header-design-one-line .nav-list > li {
width: 100%;
}
.zevruno-header-design-one-line .nav-list > li > a {
min-height: 46px;
display: flex;
align-items: center;
padding: 11px 10px;
border-bottom: 1px solid #edf1f6;
}
.zevruno-header-design-one-line .nav-list .sub-menu {
position: static;
min-width: 0;
padding: 0 0 0 12px;
border: 0;
border-radius: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
background: transparent;
}
.zevruno-header-design-one-line .nav-list .sub-menu a {
padding: 10px 10px;
white-space: normal;
}
.zevruno-header-design-one-line .nav-backdrop[aria-hidden="false"] {
display: block;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(4,18,43,.22);
}
}
@media (max-width: 560px) {
.zevruno-header-design-one-line .main-header {
padding-left: 8px;
padding-right: 8px;
}
.zevruno-header-design-one-line .menu-toggle {
flex-basis: 38px;
width: 38px;
}
.zevruno-header-design-one-line .brand {
padding-left: 5px;
padding-right: 5px;
}
.zevruno-header-design-one-line .brand-copy strong {
font-size: 18px;
}
.zevruno-header-design-one-line .brand-mark {
width: 38px;
height: 38px;
flex-basis: 38px;
font-size: 29px;
}
.zevruno-header-design-one-line .header-actions {
gap: 3px;
}
.zevruno-header-design-one-line .header-search,
.zevruno-header-design-one-line .header-search button,
.zevruno-header-design-one-line .icon-button,
.zevruno-header-design-one-line .login-button {
width: 36px;
height: 36px;
}
.zevruno-header-design-one-line .header-search {
flex-basis: 36px;
}
.zevruno-header-design-one-line .header-search button {
flex-basis: 36px;
}
}
/* Very narrow phones: preserve all enabled controls without overflow. */
@media (max-width: 390px) {
.zevruno-header-design-one-line .brand-copy strong {
font-size: 16px;
}
.zevruno-header-design-one-line .brand-mark {
display: none;
}
.zevruno-header-design-one-line .brand {
padding-left: 3px;
padding-right: 3px;
}
}
/* Dark mode for the complete Header 5 surface. */
.dark-mode .zevruno-header-design-one-line .main-header {
background: #0c192b;
border-color: #20334d;
}
.dark-mode .zevruno-header-design-one-line .primary-nav {
background: #0c192b;
border-color: #20334d;
}
.dark-mode .zevruno-header-design-one-line .header-search,
.dark-mode .zevruno-header-design-one-line .icon-button {
background: #122238;
border-color: #29415f;
color: #fff;
}
.dark-mode .zevruno-header-design-one-line .header-search input {
color: #fff;
}
.dark-mode .zevruno-header-design-one-line .nav-list > li > a {
border-color: #20334d;
}
/* 1.15.4 final responsive corrections: Header 5 owns its own layout so the
legacy mobile header rules cannot make search/login wrap onto new rows. */
.zevruno-header-design-one-line .main-header,
.zevruno-header-design-one-line .brand,
.zevruno-header-design-one-line .header-actions {
box-sizing: border-box;
}
.zevruno-header-design-one-line .brand-logo,
.zevruno-header-design-one-line .brand-mark,
.zevruno-header-design-one-line .brand-copy {
flex-shrink: 1;
}
@media (max-width: 800px) {
.zevruno-header-design-one-line .main-header {
position: relative !important;
flex-wrap: nowrap !important;
overflow: visible;
}
.zevruno-header-design-one-line .brand {
flex: 1 1 auto !important;
width: auto !important;
}
.zevruno-header-design-one-line .header-actions {
flex: 0 0 auto !important;
width: auto !important;
flex-wrap: nowrap !important;
}
.zevruno-header-design-one-line .primary-nav {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
}
}
@media (max-width: 480px) {
.zevruno-header-design-one-line .main-header {
padding-left: 6px !important;
padding-right: 6px !important;
}
.zevruno-header-design-one-line .menu-toggle {
flex: 0 0 38px !important;
width: 38px !important;
}
.zevruno-header-design-one-line .brand {
padding-left: 4px !important;
padding-right: 4px !important;
}
.zevruno-header-design-one-line .brand-logo {
max-width: 120px !important;
max-height: 38px !important;
}
.zevruno-header-design-one-line .header-search,
.zevruno-header-design-one-line .header-search button,
.zevruno-header-design-one-line .icon-button,
.zevruno-header-design-one-line .login-button {
width: 36px !important;
min-width: 36px !important;
height: 36px !important;
}
}
/* Zevruno 1.15.6 — Header 5 light/dark action visibility hardening.
Keep Login visually explicit in both themes and do not let inherited
anchor/button rules make the control disappear. */
.zevruno-header-design-one-line .login-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px;
background: #087cf3 !important;
color: #ffffff !important;
border: 1px solid #087cf3 !important;
opacity: 1 !important;
visibility: visible !important;
text-decoration: none !important;
box-shadow: none;
}
.zevruno-header-design-one-line .login-button:hover,
.zevruno-header-design-one-line .login-button:focus-visible {
background: #0568d8 !important;
color: #ffffff !important;
}
.zevruno-header-design-one-line .login-button svg {
color: #ffffff !important;
stroke: #ffffff !important;
fill: none !important;
opacity: 1 !important;
visibility: visible !important;
}
.zevruno-header-design-one-line .login-button span {
color: #ffffff !important;
}
.dark-mode .zevruno-header-design-one-line .login-button {
background: #1685ff !important;
color: #ffffff !important;
border-color: #1685ff !important;
}
.dark-mode .zevruno-header-design-one-line .login-button:hover,
.dark-mode .zevruno-header-design-one-line .login-button:focus-visible {
background: #3a9aff !important;
color: #ffffff !important;
}
.dark-mode .zevruno-header-design-one-line .login-button svg,
.dark-mode .zevruno-header-design-one-line .login-button span {
color: #ffffff !important;
stroke: #ffffff !important;
}
/* Zevruno 1.15.5 — mobile search dialog and centered utility controls. */
.zevruno-header-design-one-line .mobile-search-trigger { display:none; }
.mobile-search-dialog { display:none; }
@media (max-width:800px) {
.zevruno-header-design-one-line .header-search { display:none !important; }
.zevruno-header-design-one-line .mobile-search-trigger {
width:40px;
height:40px;
min-width:40px;
flex:0 0 40px;
display:grid;
place-items:center;
padding:0;
margin:0;
border:1px solid var(--z5-border);
border-radius:50%;
background:var(--z5-muted-surface);
color:var(--z5-text);
cursor:pointer;
line-height:0;
}
.zevruno-header-design-one-line .mobile-search-trigger svg {
width:21px;
height:21px;
display:block;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
/* Force every icon control to center its SVG, including login. */
.zevruno-header-design-one-line .icon-button,
.zevruno-header-design-one-line .login-button {
display:grid !important;
place-items:center !important;
align-content:center;
justify-content:center;
line-height:1;
}
.zevruno-header-design-one-line .login-button svg,
.zevruno-header-design-one-line .icon-button svg {
margin:0 !important;
}
.zevruno-header-design-one-line .login-button span { display:none !important; }
.mobile-search-dialog {
position:fixed;
inset:0;
z-index:10000;
display:block;
visibility:hidden;
opacity:0;
pointer-events:none;
transition:opacity .2s ease, visibility .2s ease;
}
.mobile-search-dialog.is-open {
visibility:visible;
opacity:1;
pointer-events:auto;
}
.mobile-search-backdrop {
position:absolute;
inset:0;
background:rgba(3,18,43,.62);
backdrop-filter:blur(4px);
}
.mobile-search-panel {
position:relative;
width:min(92vw,560px);
margin:clamp(28px,10vh,90px) auto 0;
padding:32px 22px 26px;
background:var(--z5-surface,#fff);
color:var(--z5-text,#0b1730);
border:1px solid var(--z5-border,#e5ebf4);
border-radius:24px;
box-shadow:0 28px 80px rgba(0,18,55,.30);
transform:translateY(-12px) scale(.98);
transition:transform .22s ease;
}
.mobile-search-dialog.is-open .mobile-search-panel { transform:translateY(0) scale(1); }
.mobile-search-close {
position:absolute;
top:14px;
right:14px;
width:40px;
height:40px;
display:grid;
place-items:center;
border:0;
border-radius:50%;
background:var(--z5-muted-surface,#f4f7fc);
color:var(--z5-text,#0b1730);
cursor:pointer;
}
.mobile-search-close svg { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round; }
.mobile-search-title { text-align:center;font-size:26px;font-weight:800;line-height:1.2;margin:2px 40px 5px; }
.mobile-search-panel > p { text-align:center;color:#6f7c92;margin:0 20px 22px;font-size:14px; }
.mobile-search-form {
height:58px;
display:flex;
align-items:center;
gap:8px;
padding:5px 6px 5px 16px;
border:1px solid #dbe4f0;
border-radius:30px;
background:#f7f9fd;
}
.mobile-search-form input {
min-width:0;
flex:1;
height:46px;
border:0;
outline:0;
background:transparent;
color:inherit;
font-size:16px;
}
.mobile-search-form button {
width:48px;
height:48px;
flex:0 0 48px;
display:grid;
place-items:center;
border:0;
border-radius:50%;
background:var(--z-accent,#087cf3);
color:#fff;
cursor:pointer;
}
.mobile-search-form button svg { width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.mobile-search-popular { margin-top:24px; }
.mobile-search-popular strong { display:block;font-size:13px;margin-bottom:10px; }
.mobile-search-popular > div { display:flex;flex-wrap:wrap;gap:8px; }
.mobile-search-popular button {
border:1px solid #dbe4f0;
background:#f8faff;
color:inherit;
border-radius:999px;
padding:7px 13px;
font-size:13px;
cursor:pointer;
}
.mobile-search-popular button:active { transform:scale(.98); }
.dark-mode .mobile-search-panel { background:#0c192b;color:#e7eefb;border-color:#20334d; }
.dark-mode .mobile-search-panel > p { color:#aebbd0; }
.dark-mode .mobile-search-form { background:#122238;border-color:#29415f; }
.dark-mode .mobile-search-popular button,.dark-mode .mobile-search-close { background:#122238;color:#e7eefb;border-color:#29415f; }
}
@media (max-width:480px) {
.zevruno-header-design-one-line .mobile-search-trigger,
.zevruno-header-design-one-line .icon-button,
.zevruno-header-design-one-line .login-button { width:38px !important;height:38px !important;min-width:38px !important;flex-basis:38px !important; display:grid !important; place-items:center !important; }
.zevruno-header-design-one-line .mobile-search-trigger svg { width:20px;height:20px; }
.mobile-search-panel { padding-left:18px;padding-right:18px; }
}
/* =========================================================
* Zevruno 1.15.9 — Advanced dynamic breadcrumbs
* ========================================================= */
.zevruno-breadcrumb {
width: min(1280px, calc(100% - 48px));
margin: 0 auto;
padding: 10px 0 0;
color: #71809b;
font-size: 13px;
line-height: 1.45;
}
.zevruno-breadcrumb + .container.content-wrap {
padding-top: 16px;
}
.zevruno-single-post .zevruno-breadcrumb {
width: 100%;
margin: 0;
padding: 0 0 4px;
}
/* Align Index/Archive/Search closer to Single Post layout */
.container.content-wrap {
width: min(1280px, calc(100% - 48px));
}
.page-header {
padding: 0 10px;
margin-bottom: 24px;
}
.post-card {
padding: 30px;
border-radius: 20px;
}
@media (max-width: 800px) {
.post-card {
padding: 18px;
border-radius: 16px;
}
}
.zevruno-breadcrumb-list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px 8px;
margin: 0;
padding: 0;
list-style: none;
}
.zevruno-breadcrumb-item { min-width: 0; }
.zevruno-breadcrumb-item a {
color: var(--z-accent, #2563eb);
font-weight: 650;
text-decoration: none;
transition: color .18s ease, opacity .18s ease;
}
.zevruno-breadcrumb-item a:hover,
.zevruno-breadcrumb-item a:focus-visible { text-decoration: underline; }
.zevruno-breadcrumb-item.is-current span {
color: #52617b;
font-weight: 600;
display: inline-block;
max-width: min(58vw, 680px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
.zevruno-breadcrumb-separator {
color: #a0acc0;
font-size: 17px;
line-height: 1;
user-select: none;
}
.dark-mode .zevruno-breadcrumb,
body.dark-mode .zevruno-breadcrumb { color: #94a3b8; }
.dark-mode .zevruno-breadcrumb-item.is-current span,
body.dark-mode .zevruno-breadcrumb-item.is-current span { color: #cbd5e1; }
.dark-mode .zevruno-breadcrumb-separator,
body.dark-mode .zevruno-breadcrumb-separator { color: #64748b; }
@media (max-width: 800px) {
.zevruno-breadcrumb {
width: min(100% - 28px, 520px);
padding-top: 10px;
font-size: 12px;
}
.zevruno-breadcrumb-list { gap: 4px 6px; }
.zevruno-breadcrumb-item.is-current span { max-width: 48vw; }
}
/* =========================================================
ZEVRUNO 1.15.14 — Responsive single-post sharing
Mobile: compact row directly under author.
Desktop: sidebar card with vertical share actions.
========================================================= */
.zevruno-share { --zevruno-share-size:44px; --zevruno-share-gap:12px; background:transparent; border:1px solid transparent; border-radius:16px; box-shadow:none; }
.zevruno-share-title { display:flex; align-items:center; gap:9px; margin:0 0 16px; font-size:18px; line-height:1.3; }
.zevruno-share-heading-icon { color:var(--z-accent); font-size:22px; font-weight:800; }
.zevruno-share-grid { display:flex; align-items:flex-start; gap:var(--zevruno-share-gap); }
.zevruno-share-item { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:7px; min-width:58px; color:#17243b; text-decoration:none; }
.zevruno-share-icon { width:var(--zevruno-share-size); height:var(--zevruno-share-size); border-radius:50%; display:grid; place-items:center; color:#fff; flex:0 0 var(--zevruno-share-size); box-shadow:0 3px 10px rgba(20,52,92,.12); }
.zevruno-share-icon svg { width:54%; height:54%; fill:currentColor; }
.zevruno-share-label { font-size:11px; font-weight:650; line-height:1.2; text-align:center; white-space:nowrap; }
.zevruno-share-whatsapp .zevruno-share-icon { background:#18c55b; }
.zevruno-share-facebook .zevruno-share-icon { background:#1877f2; }
.zevruno-share-x .zevruno-share-icon { background:#111827; }
.zevruno-share-telegram .zevruno-share-icon { background:#249bd7; }
.zevruno-share-copy .zevruno-share-icon { background:#687386; }
.zevruno-share-mobile { margin-top:16px; padding:16px 12px 14px; }
.zevruno-share-mobile .zevruno-share-grid { justify-content:space-between; width:100%; }
.zevruno-share-mobile .zevruno-share-item { flex:1 1 0; min-width:0; }
.zevruno-share-desktop { padding:20px; margin-bottom:18px; }
.zevruno-share-desktop .zevruno-share-grid { flex-direction:column; align-items:stretch; gap:10px; }
.zevruno-share-desktop .zevruno-share-item { min-width:0; width:100%; flex-direction:row; justify-content:flex-start; gap:12px; }
.zevruno-share-desktop .zevruno-share-label { font-size:13px; text-align:left; }
.zevruno-share-desktop .zevruno-share-icon { width:var(--zevruno-share-size); height:var(--zevruno-share-size); flex-basis:var(--zevruno-share-size); }
.zevruno-share-item:hover .zevruno-share-icon { transform:translateY(-1px); box-shadow:0 6px 14px rgba(20,52,92,.18); }
.zevruno-share-item:focus-visible { outline:3px solid rgba(21,87,232,.25); outline-offset:4px; border-radius:12px; }
@media (max-width: 800px) {
.zevruno-share-desktop { display:none !important; }
.zevruno-share-mobile { display:block; }
.zevruno-single-post .author-line { text-decoration:none; color:inherit; }
}
@media (min-width: 801px) {
.zevruno-share-mobile { display:none !important; }
.zevruno-share-desktop { display:block; }
}
@media (max-width: 520px) {
.zevruno-share-mobile { padding:14px 8px 12px; border-radius:16px; }
.zevruno-share-label { font-size:10px; }
}
.dark-mode .zevruno-share { background:transparent; border-color:transparent; color:#e7eefb; }
.dark-mode .zevruno-share-item { color:#e7eefb; }
.dark-mode .zevruno-share-x .zevruno-share-icon { background:#fff; color:#111827; }
/* =========================================================
ZEVRUNO 1.15.14 — Desktop author-row sharing + Telegram hardening
========================================================= */
.zevruno-author-share-row {
width: 100%;
margin-top: 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.zevruno-author-share-row .author-line {
margin-top: 0;
flex: 0 1 auto;
min-width: 0;
}
.zevruno-share-desktop-author {
flex: 0 0 auto;
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
margin: 0;
}
.zevruno-share-desktop-author .zevruno-share-grid {
flex-direction: row;
align-items: flex-start;
gap: var(--zevruno-share-gap);
}
.zevruno-share-desktop-author .zevruno-share-item {
min-width: 44px;
width: auto;
flex: 0 0 auto;
gap: 5px;
}
.zevruno-share-desktop-author .zevruno-share-icon {
width: var(--zevruno-share-size);
height: var(--zevruno-share-size);
flex-basis: var(--zevruno-share-size);
}
.zevruno-share-desktop-author .zevruno-share-label {
font-size: 9px;
max-width: 64px;
overflow: hidden;
text-overflow: ellipsis;
}
.zevruno-share-telegram .zevruno-share-icon svg {
display: block;
width: 56%;
height: 56%;
min-width: 16px;
min-height: 16px;
fill: currentColor;
}
@media (max-width: 800px) {
.zevruno-author-share-row {
display: block;
margin-top: 22px;
}
.zevruno-author-share-row .author-line {
margin-top: 0;
}
.zevruno-share-desktop-author { display: none !important; }
}
@media (min-width: 801px) {
.zevruno-share-mobile { display: none !important; }
.zevruno-share-desktop-author { display: block; }
}
.dark-mode .zevruno-share-desktop-author {
background: transparent;
border-color: transparent;
}
/* 1.15.14 author/share composite card: one clean desktop card, stacked mobile card. */
@media (min-width: 801px) {
.zevruno-author-share-row {
padding: 10px 14px 10px 10px;
background: #f7f9fd;
border: 1px solid #e1e8f2;
border-radius: 20px;
}
.zevruno-author-share-row .author-line {
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
width: auto;
}
}
@media (max-width: 800px) {
.zevruno-author-share-row {
padding: 9px 12px 9px 9px;
background: #f7f9fd;
border: 1px solid #e1e8f2;
border-radius: 20px;
}
.zevruno-author-share-row .author-line {
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
}
}
.dark-mode .zevruno-author-share-row {
background: #10223a;
border-color: #223955;
}
.dark-mode .zevruno-author-share-row .author-line {
background: transparent;
border-color: transparent;
}
/* Zevruno 1.15.15 — Telegram share icon rendering fix */
.zevruno-share-telegram .zevruno-share-icon svg,
.zevruno-share-telegram .zevruno-share-icon svg path {
display: block;
width: 56%;
height: 56%;
min-width: 16px;
min-height: 16px;
max-width: 30px;
max-height: 30px;
fill: currentColor !important;
stroke: none !important;
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================
* Zevruno Interactive 404 Page Styling
* ========================================================= */
.zevruno-404-wrap {
padding: 30px 0 60px;
}
.zevruno-404-hero {
text-align: center;
max-width: 680px;
margin: 0 auto 50px;
padding: 40px 24px;
background: #ffffff;
border: 1px solid #e2eaf4;
border-radius: 24px;
box-shadow: 0 10px 30px rgba(17,45,86,.06);
}
.zevruno-404-badge {
display: inline-block;
font-size: clamp(60px, 12vw, 100px);
font-weight: 900;
line-height: 1;
background: linear-gradient(135deg, #0c74ff, #15b7e9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 12px;
letter-spacing: -2px;
}
.zevruno-404-title {
font-size: clamp(24px, 4vw, 34px);
margin: 0 0 12px;
color: #0b1730;
}
.zevruno-404-text {
font-size: 16px;
color: #62728c;
line-height: 1.6;
margin: 0 auto 28px;
max-width: 520px;
}
.zevruno-404-search-box {
max-width: 480px;
margin: 0 auto 24px;
}
.zevruno-404-search-form {
display: flex;
align-items: center;
background: #f4f7fc;
border: 1px solid #dce4ef;
border-radius: 999px;
padding: 6px 6px 6px 18px;
transition: border-color .2s, box-shadow .2s;
}
.zevruno-404-search-form:focus-within {
border-color: #0c74ff;
box-shadow: 0 0 0 3px rgba(12,116,255,.15);
}
.zevruno-404-search-form input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
font-size: 15px;
color: #0b1730;
outline: none;
}
.zevruno-404-search-form button {
display: inline-flex;
align-items: center;
gap: 6px;
border: 0;
background: #0c74ff;
color: #fff;
font-weight: 700;
font-size: 14px;
padding: 10px 18px;
border-radius: 999px;
cursor: pointer;
transition: background .2s;
}
.zevruno-404-search-form button:hover {
background: #095ecf;
}
.zevruno-404-actions {
margin-top: 10px;
}
.zevruno-404-section {
margin-bottom: 45px;
}
.zevruno-404-section-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 20px;
margin: 0 0 18px;
color: #0b1730;
}
.zevruno-category-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.zevruno-category-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #ffffff;
border: 1px solid #e1e8f2;
border-radius: 999px;
color: #17213a;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all .2s;
box-shadow: 0 3px 10px rgba(17,45,86,.03);
}
.zevruno-category-chip:hover {
border-color: #0c74ff;
color: #0c74ff;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(12,116,255,.12);
}
.zevruno-chip-count {
display: inline-grid;
place-items: center;
padding: 2px 8px;
border-radius: 999px;
background: #eaf4ff;
color: #0c74ff;
font-size: 12px;
font-weight: 700;
}
.zevruno-404-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.zevruno-404-card {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid #e1e8f2;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 5px 18px rgba(17,45,86,.04);
transition: transform .2s, box-shadow .2s;
}
.zevruno-404-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(17,45,86,.09);
}
.zevruno-404-card-thumb {
display: block;
aspect-ratio: 16/9;
overflow: hidden;
}
.zevruno-404-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.zevruno-404-card-body {
padding: 18px;
display: flex;
flex-direction: column;
flex: 1;
}
.zevruno-404-card-body time {
font-size: 12px;
color: #7c8798;
margin-bottom: 6px;
}
.zevruno-404-card-body h3 {
margin: 0 0 8px;
font-size: 17px;
line-height: 1.35;
}
.zevruno-404-card-body h3 a {
color: #17213a;
text-decoration: none;
}
.zevruno-404-card-body p {
color: #687386;
font-size: 14px;
line-height: 1.55;
margin: 0 0 14px;
flex: 1;
}
.zevruno-404-card-link {
color: #0c74ff;
font-weight: 700;
font-size: 14px;
text-decoration: none;
}
@media (max-width: 800px) {
.zevruno-404-grid {
grid-template-columns: 1fr;
}
}
/* Dark mode 404 adjustments */
.dark-mode .zevruno-404-hero,
.dark-mode .zevruno-category-chip,
.dark-mode .zevruno-404-card {
background: #0c192b;
border-color: #20334d;
color: #e7eefb;
}
.dark-mode .zevruno-404-title,
.dark-mode .zevruno-404-section-title,
.dark-mode .zevruno-404-card-body h3 a {
color: #e7eefb;
}
.dark-mode .zevruno-404-text,
.dark-mode .zevruno-404-card-body p {
color: #9cb1cf;
}
.dark-mode .zevruno-404-search-form {
background: #122238;
border-color: #243c5e;
}
.dark-mode .zevruno-404-search-form input {
color: #fff;
}
.dark-mode .zevruno-chip-count {
background: #17345b;
color: #5bb3ff;
}
/* =========================================================
* Zevruno Demo Ads Mode — Placeholder Styles
* ========================================================= */
.zevruno-demo-ad {
display: block;
width: 100%;
margin: 20px 0;
font-family: inherit;
}
.zevruno-demo-ad-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
background: repeating-linear-gradient(
-45deg,
#f0f5ff,
#f0f5ff 8px,
#e8effe 8px,
#e8effe 16px
);
border: 2px dashed #a8c0f0;
border-radius: 12px;
padding: 22px 24px;
min-height: 90px;
position: relative;
transition: background .2s;
}
.zevruno-demo-ad-inner.zevruno-demo-ad-rect {
flex-direction: column;
min-height: 250px;
max-width: 300px;
margin: 0 auto;
}
.zevruno-demo-ad-badge {
position: absolute;
top: 8px;
right: 10px;
background: #4285f4;
color: #fff;
font-size: 10px;
font-weight: 800;
padding: 2px 8px;
border-radius: 999px;
letter-spacing: .5px;
text-transform: uppercase;
}
.zevruno-demo-ad-icon {
flex-shrink: 0;
}
.zevruno-demo-ad-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.zevruno-demo-ad-title {
font-size: 15px;
font-weight: 700;
color: #2a4a8a;
}
.zevruno-demo-ad-size {
font-size: 12px;
color: #6e88b8;
font-weight: 500;
}
.zevruno-demo-ad-label {
text-align: center;
font-size: 11px;
color: #8099c0;
margin-top: 5px;
font-style: italic;
}
/* Dark mode demo ads */
.dark-mode .zevruno-demo-ad-inner {
background: repeating-linear-gradient(
-45deg,
#0d2240,
#0d2240 8px,
#0f2848 8px,
#0f2848 16px
);
border-color: #2a4a8a;
}
.dark-mode .zevruno-demo-ad-title {
color: #7eb8ff;
}
.dark-mode .zevruno-demo-ad-size,
.dark-mode .zevruno-demo-ad-label {
color: #5580a8;
}
/* =========================================================
* Back to Top Button — Animated
* ========================================================= */
.zevruno-back-top {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 9999;
width: 48px;
height: 48px;
border-radius: 50%;
border: 0;
background: linear-gradient(135deg, #0c74ff, #15b7e9);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 4px 18px rgba(12, 116, 255, .35);
/* Hidden by default — shown via JS .is-visible class */
opacity: 0;
transform: translateY(20px) scale(0.85);
pointer-events: none;
transition: opacity .25s ease, transform .25s ease, box-shadow .2s;
}
.zevruno-back-top.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.zevruno-back-top:hover {
box-shadow: 0 8px 24px rgba(12, 116, 255, .5);
transform: translateY(-3px) scale(1.06);
}
.zevruno-back-top.is-pressed {
transform: scale(0.9);
box-shadow: 0 2px 10px rgba(12, 116, 255, .3);
}
/* Pulse ring on hover */
.zevruno-back-top::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid rgba(12, 116, 255, .4);
animation: zevruno-btt-pulse 2s ease-in-out infinite;
opacity: 0;
transition: opacity .2s;
}
.zevruno-back-top.is-visible:hover::after {
opacity: 1;
}
@keyframes zevruno-btt-pulse {
0%, 100% { transform: scale(1); opacity: .5; }
50% { transform: scale(1.45); opacity: 0; }
}
@media (max-width: 800px) {
.zevruno-back-top {
width: 42px;
height: 42px;
bottom: 18px;
right: 16px;
}
}
/* =========================================================
* Skeleton Loading Shimmer
* ========================================================= */
@keyframes zevruno-shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
.zevruno-skeleton {
position: relative;
overflow: hidden;
}
.zevruno-skeleton img {
opacity: 0;
transition: opacity .3s;
}
.zevruno-skeleton::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
90deg,
#e8edf4 0px,
#f4f7fb 40%,
#e8edf4 80%
);
background-size: 800px 100%;
animation: zevruno-shimmer 1.4s ease-in-out infinite;
border-radius: inherit;
}
.dark-mode .zevruno-skeleton::before {
background: linear-gradient(
90deg,
#112036 0px,
#1a3050 40%,
#112036 80%
);
background-size: 800px 100%;
}
/* =========================================================
* Post Views Counter — inline badge
* ========================================================= */
.post-meta-views {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: #6d7b91;
font-weight: 500;
}
.post-meta-views svg {
vertical-align: middle;
flex-shrink: 0;
opacity: .75;
}
/* =========================================================
* Toast Notifications
* ========================================================= */
.zevruno-toast {
position: fixed;
bottom: 90px;
left: 50%;
transform: translate(-50%, 20px);
z-index: 10000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s, transform 0.3s;
}
.zevruno-toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
.zevruno-toast-inner {
background: #111827;
color: #fff;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
display: flex;
align-items: center;
gap: 8px;
}
.zevruno-toast-error .zevruno-toast-inner {
background: #dc2626;
}
/* =========================================================
* Comment Form Fixes
* ========================================================= */
.comment-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid #d0dbe9;
border-radius: 8px;
font-family: inherit;
font-size: 15px;
}
.comment-form .form-submit {
margin-top: 10px;
}
.comment-form .submit {
background: #0c74ff !important;
color: #fff !important;
border: 0 !important;
padding: 12px 24px !important;
border-radius: 8px !important;
font-size: 15px !important;
font-weight: 600 !important;
cursor: pointer !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
transition: background 0.2s !important;
}
.comment-form .submit:hover {
background: #005ce6 !important;
}
/* Light & Dark Logo Toggling */
.brand-logo-dark {
display: none !important;
}
html.dark-mode .brand-logo-light.has-dark-variant {
display: none !important;
}
html.dark-mode .brand-logo-dark {
display: inline-block !important;
}
/* --- New Features (v1.1) --- */
/* Sticky Header */
body.is-scrolled .main-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 1000 !important;
box-shadow: 0 4px 20px rgba(17,45,86,0.1) !important;
animation: slideDown 0.3s ease !important;
}
html.dark-mode body.is-scrolled .main-header {
box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}
@keyframes slideDown {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
/* Reading Progress Bar */
.reading-progress-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: rgba(0,0,0,0.05);
z-index: 10;
}
html.dark-mode .reading-progress-container {
background: rgba(255,255,255,0.05);
}
.reading-progress-bar {
height: 100%;
width: 0%;
background: var(--z-accent, #1680ff);
transition: width 0.1s linear;
}
/* Notification Bell Dropdown */
.notification-dropdown-wrapper {
position: relative;
}
.notification-badge {
position: absolute;
top: 10px;
right: 12px;
width: 8px;
height: 8px;
background: #ff3b30;
border-radius: 50%;
box-shadow: 0 0 0 2px #f4f7fc;
}
html.dark-mode .notification-badge {
box-shadow: 0 0 0 2px #122238;
}
.notification-panel {
position: absolute;
top: calc(100% + 15px);
right: -10px;
width: 320px;
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(17,45,86,0.15);
border: 1px solid #e5ebf4;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
}
.notification-panel.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
html.dark-mode .notification-panel {
background: #0c192b;
border-color: #20334d;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.notification-header {
padding: 14px 18px;
border-bottom: 1px solid #e5ebf4;
font-size: 14px;
}
html.dark-mode .notification-header {
border-bottom-color: #20334d;
}
.notification-list {
display: flex;
flex-direction: column;
max-height: 350px;
overflow-y: auto;
}
.notification-item {
padding: 14px 18px;
border-bottom: 1px solid #f4f7fc;
display: flex;
flex-direction: column;
gap: 5px;
transition: background 0.2s;
text-decoration: none;
}
html.dark-mode .notification-item {
border-bottom-color: rgba(255,255,255,0.02);
}
.notification-item:hover {
background: #f4f7fc;
}
html.dark-mode .notification-item:hover {
background: rgba(255,255,255,0.05);
}
.notif-title {
font-size: 14px;
font-weight: 600;
line-height: 1.4;
color: inherit;
}
.notif-time {
font-size: 12px;
color: #71809b;
}
html.dark-mode .notif-time {
color: #8e9db5;
}
@media (max-width: 800px) {
.notification-panel {
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
width: 100%;
border-radius: 20px 20px 0 0;
transform: translateY(100%);
}
}
/* ==========================================================================
Zevruno Table of Contents (TOC) Widget
========================================================================== */
.zevruno-toc-widget {
--toc-accent: #2563eb;
--toc-bg: #f8faff;
--toc-border: #e2e8f4;
--toc-link: #374264;
--toc-link-hover: #2563eb;
--toc-active-bg: #eff4ff;
--toc-active-color: #1d4ed8;
--toc-active-border: #2563eb;
--toc-muted: #6b7a99;
--toc-radius: 12px;
border: 1px solid var(--toc-border);
border-radius: var(--toc-radius);
background: var(--toc-bg);
overflow: hidden;
font-size: 14px;
line-height: 1.5;
}
.dark-mode .zevruno-toc-widget {
--toc-bg: #1a2035;
--toc-border: #2a3550;
--toc-link: #c8d4ef;
--toc-link-hover: #7aa2f7;
--toc-active-bg: #1e2d50;
--toc-active-color: #7aa2f7;
--toc-active-border: #5584e8;
--toc-muted: #6b7a99;
}
/* Non-collapsible title (rendered via before_title/after_title) */
.zevruno-toc-widget .widget-title {
display: flex;
align-items: center;
gap: 7px;
margin: 0;
padding: 14px 16px 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--toc-accent);
border-bottom: 1px solid var(--toc-border);
background: transparent;
}
.zevruno-toc-icon {
flex-shrink: 0;
color: var(--toc-accent);
vertical-align: middle;
}
/* Collapsible toggle button */
.zevruno-toc-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 14px 16px 12px;
background: transparent;
border: none;
border-bottom: 1px solid var(--toc-border);
cursor: pointer;
font-family: inherit;
font-size: 13px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--toc-accent);
gap: 8px;
}
.zevruno-toc-toggle:hover {
background: rgba(37, 99, 235, .05);
}
.zevruno-toc-title-text {
display: flex;
align-items: center;
gap: 7px;
}
.zevruno-toc-chevron {
flex-shrink: 0;
transition: transform .25s ease;
color: var(--toc-muted);
}
.zevruno-toc-collapsible[data-toc-open="true"] .zevruno-toc-chevron,
.zevruno-toc-collapsible.is-open .zevruno-toc-chevron {
transform: rotate(180deg);
}
/* Nav container — hidden when collapsed */
.zevruno-toc-nav {
overflow: hidden;
transition: max-height .28s ease, opacity .22s ease;
}
.zevruno-toc-collapsible .zevruno-toc-nav {
max-height: 0;
opacity: 0;
}
.zevruno-toc-collapsible[data-toc-open="true"] .zevruno-toc-nav,
.zevruno-toc-collapsible.is-open .zevruno-toc-nav {
max-height: 9999px;
opacity: 1;
}
/* Lists */
.zevruno-toc-list,
.zevruno-toc-sub {
list-style: none;
margin: 0;
padding: 0;
}
.zevruno-toc-list {
padding: 10px 0 8px;
}
.zevruno-toc-sub {
padding: 0;
}
/* Items */
.zevruno-toc-item {
position: relative;
}
.zevruno-toc-link {
display: block;
padding: 5px 16px 5px 32px;
color: var(--toc-link);
text-decoration: none;
transition: color .18s ease, background .18s ease;
border-left: 2px solid transparent;
word-break: break-word;
font-size: 13.5px;
}
.zevruno-toc-link:hover {
color: var(--toc-link-hover);
background: rgba(37, 99, 235, .05);
border-left-color: rgba(37, 99, 235, .3);
}
/* Depth indentation */
.zevruno-toc-depth-1 > .zevruno-toc-link { padding-left: 16px; font-weight: 600; }
.zevruno-toc-depth-2 > .zevruno-toc-link { padding-left: 30px; }
.zevruno-toc-depth-3 > .zevruno-toc-link { padding-left: 44px; font-size: 13px; color: var(--toc-muted); }
.zevruno-toc-depth-2 > .zevruno-toc-link::before {
content: '–';
margin-right: 5px;
opacity: .5;
}
.zevruno-toc-depth-3 > .zevruno-toc-link::before {
content: '·';
margin-right: 5px;
opacity: .6;
font-size: 16px;
}
/* Active (scroll-spy) */
.zevruno-toc-item.is-active > .zevruno-toc-link {
color: var(--toc-active-color);
background: var(--toc-active-bg);
border-left-color: var(--toc-active-border);
font-weight: 600;
}
/* Sub-list nested left line */
.zevruno-toc-sub {
border-left: 1px solid var(--toc-border);
margin-left: 22px;
margin-top: 2px;
margin-bottom: 2px;
}
.dark-mode .zevruno-toc-sub {
border-left-color: #2a3550;
}
/* ==========================================================================
Zevruno Exam Countdown Widget
========================================================================== */
.zevruno-exam-countdown-list {
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px 0 4px;
}
/* Individual exam card */
.zevruno-exam-card {
--cd-accent: #2563eb;
--cd-card-bg: #f0f5ff;
--cd-card-border: #c7d9fc;
--cd-name-color: #1e3a8a;
--cd-date-color: #4b6cb7;
--cd-unit-bg: #2563eb;
--cd-unit-color: #ffffff;
--cd-unit-label: #64748b;
--cd-sep-color: #93aad4;
background: var(--cd-card-bg);
border: 1px solid var(--cd-card-border);
border-radius: 10px;
padding: 12px 14px;
transition: box-shadow .2s ease;
}
.zevruno-exam-card:hover {
box-shadow: 0 3px 12px rgba(37, 99, 235, .13);
}
.dark-mode .zevruno-exam-card {
--cd-card-bg: #16213a;
--cd-card-border: #1e3a6e;
--cd-name-color: #93c5fd;
--cd-date-color: #6b8fc7;
--cd-unit-bg: #1d4ed8;
--cd-unit-color: #e8f0fe;
--cd-unit-label: #94a3b8;
--cd-sep-color: #3a5a9a;
}
/* Past exam */
.zevruno-exam-past {
--cd-card-bg: #f1f5f9;
--cd-card-border: #cbd5e1;
--cd-name-color: #64748b;
opacity: .75;
}
.dark-mode .zevruno-exam-past {
--cd-card-bg: #111827;
--cd-card-border: #1f2937;
--cd-name-color: #6b7280;
}
/* Today highlight */
.zevruno-exam-today {
--cd-card-bg: #fef9c3;
--cd-card-border: #fde047;
--cd-name-color: #854d0e;
}
.dark-mode .zevruno-exam-today {
--cd-card-bg: #2d2200;
--cd-card-border: #7c5c00;
--cd-name-color: #fbbf24;
}
/* Card header row */
.zevruno-exam-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
margin-bottom: 10px;
}
.zevruno-exam-name {
font-size: 13.5px;
font-weight: 700;
color: var(--cd-name-color);
line-height: 1.35;
flex: 1;
}
.zevruno-exam-date {
font-size: 11.5px;
color: var(--cd-date-color);
white-space: nowrap;
font-weight: 500;
padding-top: 1px;
}
/* Countdown display — 4 units */
.zevruno-cd-display {
display: flex;
align-items: center;
gap: 4px;
}
.zevruno-cd-unit {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
background: var(--cd-unit-bg);
border-radius: 7px;
padding: 6px 4px 5px;
min-width: 0;
}
.zevruno-cd-unit b {
display: block;
font-size: 20px;
font-weight: 800;
color: var(--cd-unit-color);
line-height: 1;
letter-spacing: -.5px;
font-variant-numeric: tabular-nums;
}
.zevruno-cd-unit span {
font-size: 9.5px;
color: var(--cd-unit-color);
opacity: .78;
text-transform: uppercase;
letter-spacing: .04em;
font-weight: 600;
margin-top: 2px;
}
.zevruno-cd-sep {
font-size: 18px;
font-weight: 700;
color: var(--cd-sep-color);
align-self: flex-start;
padding-top: 4px;
flex-shrink: 0;
}
/* Completed badge */
.zevruno-exam-done {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: #22c55e;
font-weight: 600;
}
.dark-mode .zevruno-exam-done {
color: #4ade80;
}
/* Today badge */
.zevruno-exam-today-badge {
font-size: 13px;
font-weight: 700;
color: #92400e;
text-align: center;
padding: 4px 0 2px;
letter-spacing: .01em;
}
.dark-mode .zevruno-exam-today-badge {
color: #fbbf24;
}
/* Responsive — tighter on very small screens */
@media (max-width: 380px) {
.zevruno-cd-unit b { font-size: 17px; }
.zevruno-cd-unit span { font-size: 8.5px; }
}
/* ==========================================================================
Zevruno MCQ Practice Mode
========================================================================== */
.zpq-wrap {
--zpq-accent: #2563eb;
--zpq-accent-dark: #1d4ed8;
--zpq-radius: 16px;
--zpq-bg: #ffffff;
--zpq-card-bg: #f8faff;
--zpq-border: #e2e8f4;
--zpq-text: #1e2a3b;
--zpq-muted: #64748b;
--zpq-correct-bg: #dcfce7;
--zpq-correct: #16a34a;
--zpq-wrong-bg: #fee2e2;
--zpq-wrong: #dc2626;
--zpq-exp-bg: #eff6ff;
--zpq-exp-border: #bfdbfe;
--zpq-exp-color: #1e40af;
background: var(--zpq-bg);
border: 1px solid var(--zpq-border);
border-radius: var(--zpq-radius);
overflow: hidden;
font-size: 15px;
line-height: 1.6;
color: var(--zpq-text);
box-shadow: 0 2px 16px rgba(37,99,235,.07);
}
.dark-mode .zpq-wrap {
--zpq-bg: #111827;
--zpq-card-bg: #1a2236;
--zpq-border: #1f2d48;
--zpq-text: #e2e8f0;
--zpq-muted: #94a3b8;
--zpq-correct-bg: #052e16;
--zpq-correct: #4ade80;
--zpq-wrong-bg: #2d0a0a;
--zpq-wrong: #f87171;
--zpq-exp-bg: #1e2d50;
--zpq-exp-border: #2a4070;
--zpq-exp-color: #93c5fd;
}
/* ── Screens ── */
.zpq-screen { padding: 28px 24px; }
/* ── Buttons ── */
.zpq-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 11px 22px;
border: none;
border-radius: 9px;
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background .18s, transform .12s, box-shadow .18s;
text-decoration: none;
}
.zpq-btn:active { transform: scale(.97); }
.zpq-btn-start {
background: var(--zpq-accent);
color: #fff;
padding: 13px 28px;
font-size: 15px;
border-radius: 10px;
box-shadow: 0 4px 14px rgba(37,99,235,.3);
width: 100%;
justify-content: center;
margin-top: 20px;
}
.zpq-btn-start:hover { background: var(--zpq-accent-dark); box-shadow: 0 6px 20px rgba(37,99,235,.38); }
.zpq-btn-next, .zpq-btn-finish {
background: var(--zpq-accent);
color: #fff;
min-width: 120px;
justify-content: center;
}
.zpq-btn-next:hover, .zpq-btn-finish:hover { background: var(--zpq-accent-dark); }
.zpq-btn-review {
background: #f1f5f9;
color: #334155;
border: 1px solid #cbd5e1;
}
.dark-mode .zpq-btn-review { background: #1e2d48; color: #cbd5e1; border-color: #2a3f60; }
.zpq-btn-review:hover { background: #e2e8f0; }
.zpq-btn-retry {
background: transparent;
color: var(--zpq-accent);
border: 2px solid var(--zpq-accent);
}
.zpq-btn-retry:hover { background: var(--zpq-exp-bg); }
.zpq-btn-back-result {
background: transparent;
color: var(--zpq-muted);
border: 1px solid var(--zpq-border);
padding: 8px 14px;
font-size: 13px;
}
.zpq-btn-back-result:hover { color: var(--zpq-text); }
/* ── Start Screen ── */
.zpq-start { text-align: center; }
.zpq-start-icon { font-size: 42px; margin-bottom: 10px; line-height: 1; }
.zpq-title {
font-size: 20px;
font-weight: 800;
color: var(--zpq-text);
margin: 0 0 6px;
line-height: 1.3;
}
.zpq-subject {
font-size: 13px;
color: var(--zpq-muted);
margin: 0 0 16px;
}
.zpq-meta-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px 16px;
margin-bottom: 14px;
}
.zpq-meta-item {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 600;
color: var(--zpq-muted);
background: var(--zpq-card-bg);
border: 1px solid var(--zpq-border);
border-radius: 20px;
padding: 4px 12px;
}
.zpq-best-label {
display: block;
font-size: 12.5px;
color: var(--zpq-muted);
margin-bottom: 4px;
}
.zpq-best-label strong { color: var(--zpq-accent); }
/* Editor empty state */
.zpq-editor-empty {
background: #f8faff;
border: 2px dashed #c7d9fc;
border-radius: 12px;
padding: 24px;
text-align: center;
color: #64748b;
font-size: 14px;
}
/* ── Top bar (question screen) ── */
.zpq-topbar { margin-bottom: 20px; }
.zpq-progress-wrap {
height: 6px;
background: var(--zpq-border);
border-radius: 99px;
overflow: hidden;
margin-bottom: 10px;
}
.zpq-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--zpq-accent), #60a5fa);
border-radius: 99px;
transition: width .35s ease;
width: 0%;
}
.zpq-topbar-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.zpq-counter { font-size: 13px; font-weight: 700; color: var(--zpq-muted); }
.zpq-timer {
font-size: 14px;
font-weight: 700;
color: var(--zpq-accent);
font-variant-numeric: tabular-nums;
background: var(--zpq-exp-bg);
border: 1px solid var(--zpq-exp-border);
border-radius: 20px;
padding: 3px 12px;
min-width: 54px;
text-align: center;
}
.zpq-timer:empty { display: none; }
.zpq-timer-urgent { color: var(--zpq-wrong) !important; border-color: var(--zpq-wrong-bg) !important; background: var(--zpq-wrong-bg) !important; animation: zpq-pulse .8s infinite; }
@keyframes zpq-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .6; }
}
/* ── Question text ── */
.zpq-question-text {
font-size: 16px;
font-weight: 600;
color: var(--zpq-text);
line-height: 1.55;
margin: 0 0 18px;
}
/* ── Options ── */
.zpq-options {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 16px;
}
.zpq-option {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--zpq-card-bg);
border: 2px solid var(--zpq-border);
border-radius: 10px;
cursor: pointer;
font-family: inherit;
font-size: 14.5px;
font-weight: 500;
color: var(--zpq-text);
text-align: left;
transition: border-color .15s, background .15s, transform .1s;
width: 100%;
}
.zpq-option:hover:not(:disabled) {
border-color: var(--zpq-accent);
background: var(--zpq-exp-bg);
transform: translateX(3px);
}
.zpq-option:disabled { cursor: default; }
.zpq-opt-key {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
min-width: 28px;
background: var(--zpq-border);
border-radius: 50%;
font-size: 12px;
font-weight: 800;
color: var(--zpq-muted);
transition: background .15s, color .15s;
}
.zpq-option:hover:not(:disabled) .zpq-opt-key {
background: var(--zpq-accent);
color: #fff;
}
/* Correct answer highlight */
.zpq-opt-correct {
border-color: var(--zpq-correct) !important;
background: var(--zpq-correct-bg) !important;
}
.zpq-opt-correct .zpq-opt-key {
background: var(--zpq-correct) !important;
color: #fff !important;
}
/* Wrong answer highlight */
.zpq-opt-wrong {
border-color: var(--zpq-wrong) !important;
background: var(--zpq-wrong-bg) !important;
}
.zpq-opt-wrong .zpq-opt-key {
background: var(--zpq-wrong) !important;
color: #fff !important;
}
/* ── Explanation box ── */
.zpq-explanation {
display: flex;
align-items: flex-start;
gap: 8px;
background: var(--zpq-exp-bg);
border: 1px solid var(--zpq-exp-border);
border-radius: 9px;
padding: 11px 14px;
font-size: 13.5px;
color: var(--zpq-exp-color);
margin-bottom: 14px;
line-height: 1.5;
}
.zpq-explanation svg { flex-shrink: 0; margin-top: 2px; }
/* ── Action row ── */
.zpq-action-row {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 4px;
}
/* ── Result Screen ── */
.zpq-result { text-align: center; }
.zpq-result-badge { font-size: 48px; margin-bottom: 6px; line-height: 1; }
.zpq-result-title {
font-size: 22px;
font-weight: 800;
margin: 0 0 20px;
}
.zpq-grade-gold { color: #b45309; }
.zpq-grade-green { color: #15803d; }
.zpq-grade-blue { color: var(--zpq-accent); }
.zpq-grade-orange { color: #c2410c; }
.zpq-grade-red { color: var(--zpq-wrong); }
.dark-mode .zpq-grade-gold { color: #fbbf24; }
.dark-mode .zpq-grade-green { color: #4ade80; }
/* Score ring */
.zpq-score-ring {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
}
.zpq-ring-track { stroke: var(--zpq-border); }
.zpq-ring-fill { stroke: var(--zpq-accent); }
.zpq-score-ring[data-grade="gold"] .zpq-ring-fill { stroke: #f59e0b; }
.zpq-score-ring[data-grade="green"] .zpq-ring-fill { stroke: #22c55e; }
.zpq-score-ring[data-grade="orange"] .zpq-ring-fill { stroke: #f97316; }
.zpq-score-ring[data-grade="red"] .zpq-ring-fill { stroke: var(--zpq-wrong); }
.zpq-score-inner {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
}
.zpq-score-num {
font-size: 26px;
font-weight: 900;
color: var(--zpq-text);
line-height: 1;
}
.zpq-score-inner span {
font-size: 11px;
color: var(--zpq-muted);
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 600;
}
/* Result stats row */
.zpq-result-stats {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.zpq-stat {
display: flex;
flex-direction: column;
align-items: center;
background: var(--zpq-card-bg);
border: 1px solid var(--zpq-border);
border-radius: 10px;
padding: 12px 20px;
min-width: 72px;
}
.zpq-stat-val {
font-size: 22px;
font-weight: 800;
line-height: 1;
margin-bottom: 3px;
}
.zpq-stat span { font-size: 11.5px; color: var(--zpq-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.zpq-stat-correct .zpq-stat-val { color: var(--zpq-correct); }
.zpq-stat-wrong .zpq-stat-val { color: var(--zpq-wrong); }
.zpq-stat-time .zpq-stat-val { color: var(--zpq-accent); }
.zpq-result-actions {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
/* ── Review Screen ── */
.zpq-review { padding-top: 20px; }
.zpq-review-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--zpq-border);
}
.zpq-review-header h3 {
font-size: 16px;
font-weight: 800;
margin: 0;
color: var(--zpq-text);
}
.zpq-review-list { display: flex; flex-direction: column; gap: 14px; }
.zpq-rev-item {
border: 1px solid var(--zpq-border);
border-radius: 10px;
padding: 14px 16px;
background: var(--zpq-card-bg);
}
.zpq-rev-correct { border-left: 4px solid var(--zpq-correct); }
.zpq-rev-wrong { border-left: 4px solid var(--zpq-wrong); }
.zpq-rev-q {
font-size: 14px;
font-weight: 600;
color: var(--zpq-text);
margin: 0 0 10px;
display: flex;
gap: 8px;
align-items: flex-start;
line-height: 1.45;
}
.zpq-rev-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.zpq-rev-opts {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 8px;
}
.zpq-rev-opt {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
padding: 4px 10px;
border-radius: 6px;
background: var(--zpq-border);
color: var(--zpq-muted);
border: 1px solid transparent;
}
.zpq-rev-opt-key {
font-weight: 800;
font-size: 11px;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.08);
border-radius: 50%;
}
.zpq-rev-opt-correct {
background: var(--zpq-correct-bg);
color: var(--zpq-correct);
border-color: var(--zpq-correct);
font-weight: 600;
}
.zpq-rev-opt-chosen {
background: var(--zpq-wrong-bg);
color: var(--zpq-wrong);
border-color: var(--zpq-wrong);
}
.zpq-rev-tick { color: var(--zpq-correct); font-weight: 800; }
.zpq-rev-cross { color: var(--zpq-wrong); font-weight: 800; }
.zpq-rev-exp {
font-size: 13px;
color: var(--zpq-exp-color);
background: var(--zpq-exp-bg);
border: 1px solid var(--zpq-exp-border);
border-radius: 7px;
padding: 8px 12px;
margin: 4px 0 0;
line-height: 1.5;
}
/* ── Responsive ── */
@media (max-width: 480px) {
.zpq-screen { padding: 20px 16px; }
.zpq-title { font-size: 17px; }
.zpq-result-title { font-size: 18px; }
.zpq-question-text { font-size: 15px; }
.zpq-option { font-size: 13.5px; padding: 10px 12px; }
.zpq-result-stats { gap: 10px; }
.zpq-stat { padding: 10px 14px; min-width: 60px; }
.zpq-stat-val { font-size: 19px; }
.zpq-meta-row { gap: 6px 10px; }
}
/* ==========================================================================
MCQ Advanced — New Feature Styles
========================================================================== */
/* ── Confetti Canvas ── */
.zpq-confetti-canvas {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
display: none;
z-index: 10;
border-radius: var(--zpq-radius);
}
.zpq-wrap { position: relative; }
/* ── Exam Mode meta badge ── */
.zpq-meta-exam {
background: linear-gradient(135deg, #7c3aed22, #4f46e522);
border-color: #7c3aed44;
color: #7c3aed;
font-weight: 700;
}
.dark-mode .zpq-meta-exam { color: #a78bfa; border-color: #7c3aed55; }
/* ── Navigation Panel ── */
.zpq-nav-panel {
background: var(--zpq-card-bg);
border-bottom: 1px solid var(--zpq-border);
padding: 12px 16px;
}
.zpq-nav-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
flex-wrap: wrap;
gap: 6px;
}
.zpq-nav-answered {
font-size: 12.5px;
font-weight: 700;
color: var(--zpq-muted);
}
.zpq-nav-legend {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: var(--zpq-muted);
}
.zpq-nav-dot {
width: 10px; height: 10px;
border-radius: 3px;
display: inline-block;
}
.zpq-nav-dot--current { background: var(--zpq-accent); }
.zpq-nav-dot--answered { background: var(--zpq-correct); }
.zpq-nav-dot--marked { background: #f59e0b; }
.zpq-nav-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.zpq-nav-btn {
width: 34px; height: 34px;
border-radius: 7px;
border: 2px solid var(--zpq-border);
background: var(--zpq-bg);
color: var(--zpq-muted);
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all .15s;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
}
.zpq-nav-btn:hover { border-color: var(--zpq-accent); color: var(--zpq-accent); }
.zpq-nav-btn.zpq-nav-current { background: var(--zpq-accent); color: #fff; border-color: var(--zpq-accent); box-shadow: 0 2px 8px rgba(37,99,235,.3); }
.zpq-nav-btn.zpq-nav-answered { background: var(--zpq-correct-bg); color: var(--zpq-correct); border-color: var(--zpq-correct); }
.zpq-nav-btn.zpq-nav-skipped { background: var(--zpq-border); color: var(--zpq-muted); border-color: var(--zpq-border); opacity: .7; }
.zpq-nav-btn.zpq-nav-marked { background: #fef3c7; color: #92400e; border-color: #f59e0b; }
.dark-mode .zpq-nav-btn.zpq-nav-marked { background: #451a03; color: #fbbf24; }
/* ── Question meta row (diff + category) ── */
.zpq-question-meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.zpq-diff-badge {
display: inline-block;
font-size: 11.5px;
font-weight: 700;
padding: 3px 10px;
border-radius: 20px;
letter-spacing: .03em;
}
.zpq-diff-easy { background: #dcfce7; color: #15803d; }
.zpq-diff-medium { background: #fef9c3; color: #854d0e; }
.zpq-diff-hard { background: #fee2e2; color: #991b1b; }
.dark-mode .zpq-diff-easy { background: #052e16; color: #4ade80; }
.dark-mode .zpq-diff-medium { background: #422006; color: #fbbf24; }
.dark-mode .zpq-diff-hard { background: #2d0a0a; color: #f87171; }
.zpq-cat-tag {
display: inline-block;
font-size: 11.5px;
font-weight: 600;
padding: 3px 10px;
border-radius: 20px;
background: var(--zpq-exp-bg);
color: var(--zpq-exp-color);
border: 1px solid var(--zpq-exp-border);
}
/* ── Question Image ── */
.zpq-question-img-wrap {
margin-bottom: 14px;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--zpq-border);
background: var(--zpq-card-bg);
text-align: center;
}
.zpq-question-img {
max-width: 100%;
max-height: 280px;
object-fit: contain;
display: block;
margin: 0 auto;
cursor: zoom-in;
}
/* ── Multi-select checkbox on options ── */
.zpq-opt-check {
width: 18px; height: 18px;
min-width: 18px;
border-radius: 4px;
border: 2px solid var(--zpq-border);
background: var(--zpq-bg);
display: none; /* shown by JS when multi-answer */
align-items: center;
justify-content: center;
transition: border-color .15s, background .15s;
}
.zpq-option.zpq-opt-selected .zpq-opt-check {
background: var(--zpq-accent);
border-color: var(--zpq-accent);
}
.zpq-option.zpq-opt-selected .zpq-opt-check::after {
content: '✓';
font-size: 11px;
color: #fff;
font-weight: 800;
}
/* Selected state (exam mode / multi-select before grading) */
.zpq-opt-selected {
border-color: var(--zpq-accent) !important;
background: var(--zpq-exp-bg) !important;
}
.zpq-opt-selected .zpq-opt-key {
background: var(--zpq-accent) !important;
color: #fff !important;
}
/* ── Per-question timer ── */
.zpq-pq-timer {
font-size: 13px;
font-weight: 700;
color: var(--zpq-accent);
background: var(--zpq-exp-bg);
border: 1px solid var(--zpq-exp-border);
border-radius: 20px;
padding: 3px 10px;
min-width: 36px;
text-align: center;
font-variant-numeric: tabular-nums;
margin-right: 6px;
}
.zpq-pq-timer.zpq-pq-urgent {
color: var(--zpq-wrong) !important;
background: var(--zpq-wrong-bg) !important;
border-color: var(--zpq-wrong-bg) !important;
animation: zpq-pulse .6s infinite;
}
.zpq-topbar-right {
display: flex;
align-items: center;
gap: 4px;
}
/* ── Skip / Mark / Prev buttons ── */
.zpq-btn-skip {
background: transparent;
color: var(--zpq-muted);
border: 1px solid var(--zpq-border);
padding: 8px 14px;
font-size: 13px;
}
.zpq-btn-skip:hover { color: var(--zpq-text); border-color: var(--zpq-muted); }
.zpq-btn-mark {
background: transparent;
color: #92400e;
border: 1px solid #f59e0b55;
padding: 8px 14px;
font-size: 13px;
}
.zpq-btn-mark:hover { background: #fef9c3; }
.dark-mode .zpq-btn-mark { color: #fbbf24; border-color: #f59e0b44; }
.dark-mode .zpq-btn-mark:hover { background: #451a03; }
.zpq-btn-mark.zpq-btn-marked { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.dark-mode .zpq-btn-mark.zpq-btn-marked { background: #451a03; color: #fbbf24; }
.zpq-btn-prev {
background: transparent;
color: var(--zpq-muted);
border: 1px solid var(--zpq-border);
padding: 9px 16px;
font-size: 13px;
}
.zpq-btn-prev:hover { color: var(--zpq-text); border-color: var(--zpq-accent); }
/* Rearrange action row for new buttons */
.zpq-action-row {
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
/* ── Score History Table ── */
.zpq-history-wrap {
background: var(--zpq-card-bg);
border: 1px solid var(--zpq-border);
border-radius: 10px;
margin: 14px 0;
overflow: hidden;
text-align: left;
}
.zpq-history-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--zpq-border);
}
.zpq-history-title {
font-size: 13px;
font-weight: 700;
color: var(--zpq-text);
}
.zpq-btn-clear-history {
background: transparent;
border: 1px solid var(--zpq-border);
color: var(--zpq-muted);
border-radius: 6px;
padding: 4px 10px;
font-size: 11.5px;
cursor: pointer;
font-family: inherit;
font-weight: 600;
transition: color .15s, border-color .15s;
}
.zpq-btn-clear-history:hover { color: var(--zpq-wrong); border-color: var(--zpq-wrong); }
.zpq-history-table-wrap { overflow-x: auto; }
.zpq-history-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
.zpq-history-table th,
.zpq-history-table td {
padding: 7px 12px;
text-align: left;
border-bottom: 1px solid var(--zpq-border);
}
.zpq-history-table th {
font-weight: 700;
color: var(--zpq-muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .05em;
background: var(--zpq-bg);
}
.zpq-history-table tbody tr:last-child td { border-bottom: none; }
.zpq-history-table .zpq-hist-pass td { color: var(--zpq-correct); font-weight: 600; }
.zpq-history-table .zpq-hist-fail td { color: var(--zpq-muted); }
/* ── Breakdown Bars (difficulty / category) ── */
.zpq-breakdown {
background: var(--zpq-card-bg);
border: 1px solid var(--zpq-border);
border-radius: 10px;
padding: 14px 16px;
margin: 14px 0;
text-align: left;
}
.zpq-breakdown-title {
font-size: 13px;
font-weight: 700;
color: var(--zpq-text);
margin: 0 0 12px;
}
.zpq-bar-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.zpq-bar-row:last-child { margin-bottom: 0; }
.zpq-bar-label {
font-size: 12.5px;
font-weight: 600;
color: var(--zpq-text);
min-width: 80px;
flex-shrink: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zpq-bar-track {
flex: 1;
height: 8px;
background: var(--zpq-border);
border-radius: 99px;
overflow: hidden;
}
.zpq-bar-fill {
height: 100%;
border-radius: 99px;
transition: width .6s ease;
}
.zpq-bar-good { background: var(--zpq-correct); }
.zpq-bar-mid { background: #f59e0b; }
.zpq-bar-bad { background: var(--zpq-wrong); }
.zpq-bar-pct {
font-size: 12px;
font-weight: 700;
color: var(--zpq-muted);
min-width: 36px;
text-align: right;
flex-shrink: 0;
}
/* ── Share button + toast ── */
.zpq-btn-share {
background: linear-gradient(135deg, #0ea5e9, #6366f1);
color: #fff;
border: none;
}
.zpq-btn-share:hover { opacity: .9; }
.zpq-share-toast {
margin-top: 10px;
display: inline-block;
background: var(--zpq-correct-bg);
color: var(--zpq-correct);
border: 1px solid var(--zpq-correct);
border-radius: 8px;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
}
/* ── Review screen extras ── */
.zpq-rev-skipped { border-left: 4px solid var(--zpq-muted) !important; opacity: .8; }
.zpq-rev-img {
width: 100%;
max-height: 200px;
object-fit: contain;
border-radius: 7px;
border: 1px solid var(--zpq-border);
margin-bottom: 10px;
background: var(--zpq-card-bg);
}
.zpq-rev-diff {
display: inline-block;
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 12px;
background: var(--zpq-card-bg);
border: 1px solid var(--zpq-border);
color: var(--zpq-muted);
margin-top: 6px;
}
.zpq-rev-cat {
display: inline-block;
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 12px;
background: var(--zpq-exp-bg);
border: 1px solid var(--zpq-exp-border);
color: var(--zpq-exp-color);
margin-top: 6px;
}
/* ── Responsive updates for new elements ── */
@media (max-width: 480px) {
.zpq-nav-btn { width: 30px; height: 30px; font-size: 11px; border-radius: 6px; }
.zpq-bar-label { min-width: 60px; font-size: 11.5px; }
.zpq-history-table th, .zpq-history-table td { padding: 6px 8px; }
.zpq-breakdown { padding: 12px 12px; }
.zpq-result-actions { flex-direction: column; align-items: stretch; }
.zpq-btn-share, .zpq-btn-review, .zpq-btn-retry { justify-content: center; }
}
/* ═══════════════════════════════════════════════════════════════════════════
ZEVRUNO GEO & SEO COMPONENTS (FAQ & KEY TAKEAWAYS)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Key Takeaways / Quick TL;DR Box ── */
.zevruno-takeaways-box {
margin: 24px 0 28px;
padding: 20px 24px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, rgba(147, 51, 234, 0.03) 100%);
border: 1px solid rgba(59, 130, 246, 0.2);
border-left: 4px solid #3b82f6;
border-radius: 10px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}
.dark-mode .zevruno-takeaways-box {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(147, 51, 234, 0.06) 100%);
border-color: rgba(99, 102, 241, 0.3);
border-left-color: #60a5fa;
}
.zevruno-takeaways-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.zevruno-takeaways-icon {
font-size: 1.25rem;
line-height: 1;
}
.zevruno-takeaways-title {
font-size: 1.05rem;
font-weight: 700;
color: #1e293b;
letter-spacing: -0.01em;
}
.dark-mode .zevruno-takeaways-title {
color: #f1f5f9;
}
.zevruno-takeaways-body {
font-size: 0.95rem;
line-height: 1.65;
color: #334155;
}
.dark-mode .zevruno-takeaways-body {
color: #cbd5e1;
}
.zevruno-takeaways-body ul {
margin: 0;
padding-left: 20px;
}
.zevruno-takeaways-body li {
margin-bottom: 6px;
}
.zevruno-takeaways-body li:last-child {
margin-bottom: 0;
}
/* ── FAQ Accordion System ── */
.zevruno-faq-container {
margin: 36px 0;
padding: 24px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}
.dark-mode .zevruno-faq-container {
background: #111827;
border-color: #1f2937;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.zevruno-faq-heading {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 20px;
color: #0f172a;
}
.dark-mode .zevruno-faq-heading {
color: #f8fafc;
}
.zevruno-faq-heading .faq-icon {
font-size: 1.3rem;
}
.zevruno-faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.zevruno-faq-item {
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #f8fafc;
overflow: hidden;
transition: all 0.25s ease;
}
.dark-mode .zevruno-faq-item {
border-color: #1f2937;
background: #1a2234;
}
.zevruno-faq-item[open] {
border-color: rgba(59, 130, 246, 0.4);
background: #ffffff;
}
.dark-mode .zevruno-faq-item[open] {
border-color: rgba(96, 165, 250, 0.4);
background: #151d2f;
}
.zevruno-faq-summary {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
font-size: 0.98rem;
font-weight: 600;
color: #1e293b;
cursor: pointer;
list-style: none;
user-select: none;
}
.zevruno-faq-summary::-webkit-details-marker {
display: none;
}
.dark-mode .zevruno-faq-summary {
color: #e2e8f0;
}
.zevruno-faq-summary:hover {
color: #2563eb;
}
.dark-mode .zevruno-faq-summary:hover {
color: #60a5fa;
}
.faq-chevron {
flex-shrink: 0;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
color: #64748b;
}
.zevruno-faq-item[open] .faq-chevron {
transform: rotate(180deg);
color: #2563eb;
}
.dark-mode .zevruno-faq-item[open] .faq-chevron {
color: #60a5fa;
}
.zevruno-faq-answer {
padding: 0 18px 16px;
font-size: 0.93rem;
line-height: 1.65;
color: #475569;
border-top: 1px solid rgba(226, 232, 240, 0.6);
padding-top: 12px;
}
.dark-mode .zevruno-faq-answer {
color: #94a3b8;
border-top-color: rgba(31, 41, 55, 0.6);
}
.zevruno-faq-answer p:last-child {
margin-bottom: 0;
}