/* ============================================================================= CYBER KENDRA — Main Stylesheet All colors via :root CSS variables — change once, applies everywhere. ============================================================================= */ /* ── Local Fonts — Ranade (Indian Type Foundry) ─────────────────────────────── */ /* Variable font: single file, handles wght 100–700 */ /* @font-face { font-family: 'Ranade'; src: url('../Fonts/WEB/fonts/Ranade-Variable.woff2') format('woff2'); font-weight: 100 700; font-display: swap; font-style: normal; } @font-face { font-family: 'Ranade'; src: url('../Fonts/WEB/fonts/Ranade-VariableItalic.woff2') format('woff2'); font-weight: 100 700; font-display: swap; font-style: italic; } @font-face { font-family: 'Ranade'; src: url('../Fonts/WEB/fonts/Ranade-Regular.woff2') format('woff2'), url('../Fonts/WEB/fonts/Ranade-Regular.woff') format('woff'); font-weight: 400; font-display: swap; font-style: normal; } @font-face { font-family: 'Ranade'; src: url('../Fonts/WEB/fonts/Ranade-Medium.woff2') format('woff2'), url('../Fonts/WEB/fonts/Ranade-Medium.woff') format('woff'); font-weight: 500; font-display: swap; font-style: normal; } @font-face { font-family: 'Ranade'; src: url('../Fonts/WEB/fonts/Ranade-Bold.woff2') format('woff2'), url('../Fonts/WEB/fonts/Ranade-Bold.woff') format('woff'); font-weight: 700; font-display: swap; font-style: normal; } */ /* JetBrains Mono — code blocks only (local or CDN) */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap'); /* ====:root Light Mode (default) ====: */ :root { /* Brand — same in both modes */ --clr-primary: #b7ec34; --clr-primary-dark: #85b208; --clr-primary-text: #1a2600; /* Backgrounds */ --clr-bg: #ffffff; --clr-surface: #ffffff; --clr-surface-alt: #e2e4d7; --clr-hero-overlay: rgba(0, 0, 0, 0.75); /* Text */ --clr-text: #1A1D15; --clr-text-muted: #45483e; --clr-text-dim: #8d937b; /* Borders */ --clr-border: #d8daca; --clr-border-dim: rgba(216, 218, 202, 0.4); /* Nav */ --clr-nav-bg: #ffffff; /* Footer */ --clr-footer-bg: #ffffff; --clr-footer-text: #45483e; /* Toggle icon */ --theme-icon: 'light_mode'; --sm: 4px; --md: 8px; --lg: 12px; --xl: 16px; } /* ── Dark Mode — [data-theme="dark"] on ───────────────────────────────── */ [data-theme="dark"] { /* Brand — accent stays lime green */ --clr-primary: #b7ec34; --clr-primary-dark: #d4ff52; --clr-primary-text: #1A1D15; /* Backgrounds — dark with olive/green tint */ --clr-bg: #191919; --clr-surface: #171a0f; --clr-surface-alt: #1e2314; --clr-hero-overlay: rgba(0, 0, 0, 0.82); /* Text — light cream */ --clr-text: #e4ead0; --clr-text-muted: #9aa882; --clr-text-dim: #5e6e48; /* Borders */ --clr-border: #2b3320; --clr-border-dim: rgba(43, 51, 32, 0.5); /* Nav */ --clr-nav-bg: #191919; /* Footer */ --clr-footer-bg: #191919; --clr-footer-text: #9aa882; } /* ── System preference fallback (only when no data-theme set) ────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --clr-primary: #b7ec34; --clr-primary-dark: #d4ff52; --clr-primary-text: #1A1D15; --clr-bg: #191919; --clr-surface: #171a0f; --clr-surface-alt: #1e2314; --clr-hero-overlay: rgba(0, 0, 0, 0.82); --clr-text: #e4ead0; --clr-text-muted: #9aa882; --clr-text-dim: #5e6e48; --clr-border: #2b3320; --clr-border-dim: rgba(43, 51, 32, 0.5); --clr-nav-bg: #191919; --clr-footer-bg: #191919; --clr-footer-text: #9aa882; } } /* ── Extended :root variables ────────────────────────────────────────────────── */ :root { /* Spacing */ --sp-1: 4px; --sp-2: 8px; --sp-4: 16px; --sp-6: 24px; --sp-10: 40px; --sp-20: 80px; --gutter: 20px; --max-w: 1280px; /* Typography */ --font-display: 'Space Grotesk', sans-serif; --font-ui: 'DM Sans', sans-serif; --font-body: 'Source Serif 4', serif; --font-mono: 'JetBrains Mono', monospace; /* Radius — sharp editorial style */ --radius: 0px; --radius-sm: 2px; } /* ── Reset ──────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-ui); font-size: 16px; background-color: var(--clr-bg); color: var(--clr-text); overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } ul { list-style: none; } ::selection { background: var(--clr-primary); color: #fff; } /* Scroll reveal */ [data-animate] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-animate].visible { opacity: 1; transform: translateY(0); } /* ============================================================================= NAVIGATION ============================================================================= */ .ck-nav { position: fixed; inset-block-start: 0; inset-inline: 0; padding: 0.5rem 0rem; z-index: 100; background: var(--clr-nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--clr-border); } .ck-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--sp-6); } /* Logo */ .ck-logo { width: 140px; } /* Nav links — desktop flex container */ .ck-nav__links { display: none; /* hidden until 768px, JS adds .is-open on mobile */ align-items: center; } [data-theme="dark"] #logo-dark, [data-theme="light"] #logo-light { display: block; } [data-theme="light"] #logo-dark, [data-theme="dark"] #logo-light { display: none; } @media (min-width: 768px) { .ck-nav__links { display: flex; align-items: center; } } /* Level-1 link base (overridden by wp-additions.css dropdown CSS) */ .ck-nav__link { font-family: var(--font-ui); font-size: 1rem; font-weight: 600; color: var(--clr-text-muted); text-decoration: none; transition: color 0.2s; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .ck-nav__link:hover { color: var(--clr-text); } .ck-nav__link--active { color: var(--clr-primary); font-weight: 600; border-bottom: 2px solid var(--clr-primary); padding-bottom: 2px; } /* ============================================================================= HERO ============================================================================= */ main { margin-top: 6.5rem; } .ck-hero { padding: var(--sp-4) var(--sp-6); max-width: var(--max-w); margin-inline: auto; } /* ── Layout wrapper ──────────────────────────────────────────────────────── */ .ck-hero__layout { display: grid; gap: 0; width: 100%; } /* Single post: full width */ .ck-hero__layout--single { grid-template-columns: 1fr; } /* Split: left 62% featured + right 38% sidebar */ .ck-hero__layout--split { grid-template-columns: 1fr; /* mobile: stack */ } @media (min-width: 768px) { .ck-hero__layout--split { grid-template-columns: 62fr 38fr; align-items: start; } } /* ── FEATURED POST (left / full) ─────────────────────────────────────────── */ .ck-hero__featured { display: block; cursor: pointer; text-decoration: none; color: inherit; } .ck-hero__featured-img-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #0a0a0a; border-radius: var(--md); } @media (min-width: 768px) { .ck-hero__featured-img-wrap { aspect-ratio: auto; height: 320px; } } .ck-hero__featured-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; display: block; } .ck-hero__featured:hover .ck-hero__featured-img { transform: scale(1.04); } .ck-hero__featured-body { padding: 1.1rem 1.2rem 1.2rem 0; } .ck-badge { display: inline-block; padding: 3px 10px; margin-bottom: 0.6rem; background: var(--clr-primary); color: var(--clr-primary-text); font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--sm); } .ck-hero__title { font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 700; color: var(--clr-text); line-height: 1.2; margin-bottom: 0.55rem; transition: color 0.2s; } .ck-hero__featured:hover .ck-hero__title { color: var(--clr-primary); } .ck-hero__excerpt { font-family: var(--font-body); font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.55; margin-bottom: 0.75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ck-hero__meta { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: 0.78rem; color: var(--clr-text-muted); } .ck-hero__author { color: var(--clr-primary); font-weight: 700; } .ck-hero__sep { opacity: 0.35; } /* ── SIDEBAR POSTS (right column) ────────────────────────────────────────── */ .ck-hero__sidebar { display: flex; flex-direction: column; border-left: 1px dashed var(--clr-border); margin-left: 3rem; padding-left: 3rem; gap: 2rem; } .ck-hero__sidebar>*+* { border-top: 1px dashed var(--clr-border); padding-top: 2rem; } @media (max-width: 767px) { .ck-hero__sidebar { border-left: none; padding-left: 0; border-top: 1px dashed var(--clr-border); padding-top: 1rem; margin-top: 1rem; margin-left: 0; } } /* Each sidebar card */ .ck-hero__side-card { display: grid; grid-template-rows: 1fr auto; gap: 0.85rem; align-items: start; text-decoration: none; color: inherit; cursor: pointer; transition: background 0.2s; /* border-bottom: 1px solid var(--clr-border); */ } /* Sidebar thumbnail — right side */ .ck-hero__side-img-wrap { aspect-ratio: 3 / 2; overflow: hidden; background: #0a0a0a; border-radius: var(--md); } @media (min-width: 1024px) { .ck-hero__side-img-wrap { aspect-ratio: 5 / 2; } } .ck-hero__side-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; } .ck-hero__side-card:hover .ck-hero__side-img { transform: scale(1.06); } /* Sidebar text — left side */ .ck-hero__side-body { order: 1; display: flex; flex-direction: column; gap: 0.3rem; } .ck-hero__side-cat { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-text-dim); } .ck-hero__side-title { font-family: var(--font-ui); font-size: 0.88rem; font-weight: 600; color: var(--clr-text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s; } .ck-hero__side-card:hover .ck-hero__side-title { color: var(--clr-primary); } .ck-hero__side-date { font-family: var(--font-ui); font-size: 0.72rem; color: var(--clr-text-dim); margin-top: 0.2rem; } /* ============================================================================= SECTION HEADERS ============================================================================= */ .ck-section { max-width: var(--max-w); margin-inline: auto; padding: var(--sp-10) var(--sp-6); margin-top: 2.6rem; } .ck-section__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.38rem; } .ck-section__title { font-family: var(--font-ui); font-size: 1rem; font-weight: 500; letter-spacing: -3.9%; text-transform: uppercase; color: var(--clr-text-muted); border-left: 3px solid var(--clr-primary); padding: 0.25rem 0rem; padding-left: 1.1rem; } .ck-section__more { font-family: var(--font-ui); font-size: 0.8rem; color: var(--clr-primary); display: inline-flex; align-items: center; gap: 4px; transition: gap 0.2s; } .ck-section__more:hover { gap: 8px; } /* ============================================================================= FEATURED CARDS — 4 column grid ============================================================================= */ .ck-featured-grid { display: grid; grid-template-columns: 1fr; gap: var(--gutter); } @media (min-width: 600px) { .ck-featured-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ck-featured-grid { grid-template-columns: repeat(4, 1fr); } } .ck-feat-card { cursor: pointer; transition: box-shadow 0.3s; border-radius: var(--md); } .ck-feat-card:hover { box-shadow: 0 0 28px rgba(183, 236, 52, 0.18); } .ck-feat-card__thumb { aspect-ratio: 16/9; overflow: hidden; background: #0c0c0c; margin-bottom: 1.1rem; border-radius: var(--md); } .ck-feat-card__img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.5s, transform 0.5s; } .ck-feat-card:hover .ck-feat-card__img { transform: scale(1.08); } .ck-feat-card__content { padding: 0rem 1.38rem 1.38rem 1.38rem; border-radius: var(--md); } .ck-feat-card__cat { font-family: var(--font-mono); font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: uppercase; color: var(--clr-primary); display: block; margin-bottom: 7px; } .ck-feat-card__title { font-family: var(--font-ui); font-size: 1rem; font-weight: 600; color: var(--clr-text); line-height: 1.35; letter-spacing: -2%; transition: color 0.2s; display: -webkit-box; -webkit-line-clamp: 2; /* max 2 lines */ -webkit-box-orient: vertical; overflow: hidden; } .ck-feat-card:hover .ck-feat-card__title { color: var(--clr-primary); } /* ============================================================================= RECENT ARTICLES — 3 column grid ============================================================================= */ .ck-recent { padding-block: var(--sp-10); } .ck-recent__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.2rem; border-bottom: 1px solid var(--clr-border); padding-bottom: var(--sp-4); } .ck-articles-grid { display: grid; grid-template-columns: 1fr; row-gap: 2rem; column-gap: 2rem; padding-bottom: 2rem; } @media (min-width: 600px) { .ck-articles-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ck-articles-grid { grid-template-columns: repeat(3, 1fr); } } .ck-art { cursor: pointer; border-radius: var(--md); padding: 1.38rem 1.38rem; } .ck-art:hover { box-shadow: 0 0 28px rgba(183, 236, 52, 0.18); } .ck-art__content { border-radius: var(--md); } .ck-art__thumb { position: relative; overflow: hidden; background: #0c0c0c; margin-bottom: 1.19rem; border-radius: var(--md); aspect-ratio: 4 / 3; } .ck-art__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .ck-art:hover .ck-art__img { transform: scale(1.05); } .ck-art__tag { position: absolute; top: 8px; left: 8px; padding: 3px 7px; background: var(--clr-primary); color: var(--clr-primary-text); font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--sm); } .ck-art__index { font-family: var(--font-mono); font-size: 1rem; font-weight: 500; letter-spacing: 5%; text-transform: uppercase; color: var(--clr-text-dim); margin-bottom: 6px; } .ck-art__title { font-family: var(--font-ui); font-size: 0.92rem; font-weight: 600; color: var(--clr-text); line-height: 1.4; margin-bottom: 9px; transition: color 0.2s; letter-spacing: -2%; } .ck-art:hover .ck-art__title { color: var(--clr-primary); } .ck-art__author { font-family: var(--font-ui); font-size: 1rem; color: var(--clr-text-dim); margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; } .ck-art__author:hover { color: var(--clr-primary); } /* ============================================================================= PAGINATION ============================================================================= */ .ck-pagination { max-width: var(--max-w); margin-inline: auto; /* padding: 2.6rem 0rem 7.6rem 0rem; */ padding: 2.6rem 0rem 2.6rem 0rem; display: flex; justify-content: center; border-top: 1px solid var(--clr-border); } .ck-pager { display: flex; align-items: center; gap: var(--sp-1); } .ck-page { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 0.875rem; font-weight: 500; border: 1px solid var(--clr-border); color: var(--clr-text); transition: border-color 0.2s, color 0.2s; cursor: pointer; } .ck-page:hover { border-color: var(--clr-primary); color: var(--clr-primary); } .ck-page--active { background: var(--clr-primary); color: var(--clr-primary-text); border-color: var(--clr-primary); font-weight: 700; } .ck-page--dots { border: none; color: var(--clr-text-dim); cursor: default; width: auto; padding-inline: var(--sp-2); } /* ============================================================================= NEWSLETTER ============================================================================= */ .ck-newsletter { background: var(--clr-surface-alt); padding: var(--sp-20) var(--sp-6); } .ck-newsletter__inner { max-width: var(--max-w); margin-inline: auto; padding-bottom: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-6); align-items: flex-start; } .ck-newsletter__copy { max-width: 600px; padding: 0rem 0.4rem; } .ck-newsletter__title { font-size: 1rem; font-weight: 500; text-transform: uppercase; color: var(--clr-primary); margin-bottom: 0.6rem; line-height: 1.3; font-family: var(--font-display); } .ck-newsletter__desc { font-family: var(--font-ui); font-size: 0.95rem; color: var(--clr-text-muted); line-height: 1.5; } .ck-newsletter__form { display: flex; width: 100%; flex-shrink: 0; } @media (min-width: 768px) { .ck-newsletter__form { width: auto; } } .ck-newsletter__input { flex: 1; padding: 0.8rem 1.2rem; background: var(--clr-surface); border: 1px solid var(--clr-border); font-family: var(--font-mono); font-size: 0.875rem; line-height: 1rem; letter-spacing: 0.05em; color: var(--clr-text); outline: none; transition: border-color 0.2s; border-radius: var(--md) 0px 0px var(--md); } .ck-newsletter__input::placeholder { color: var(--clr-text-dim); } .ck-newsletter__input:focus { border-color: var(--clr-primary); } @media (min-width: 768px) { .ck-newsletter__input { width: 320px; flex: none; } } .ck-newsletter__btn { padding: 0 2.5rem; background: var(--clr-primary); color: var(--clr-primary-text); font-family: var(--font-ui); font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; border: none; cursor: pointer; white-space: nowrap; transition: background 0.2s; margin-right: 6px; border-radius: 0 var(--md) var(--md) 0; } .ck-newsletter__btn:hover { background: var(--clr-primary-dark); } /* ============================================================================= FOOTER ============================================================================= */ .ck-footer { background: var(--clr-footer-bg); padding-top: var(--sp-10); padding-bottom: var(--sp-6); border-top: 1px solid var(--clr-border); } .ck-footer__logo { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; } .ck-footer__inner { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--sp-6); } .ck-footer__bottom { display: flex; flex-direction: column; gap: var(--sp-4); padding: 2.6rem 0.5rem 2.6rem 0.5rem; border-top: 1px solid var(--clr-border); } @media (min-width: 768px) { .ck-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; } } .ck-newsletter__wrap { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; } .ck-footer__legal { font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.08em; color: var(--clr-text-dim); text-transform: uppercase; } .ck-footer__legal a { color: var(--clr-primary); margin-inline: 4px; } .ck-footer__social-label { font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .ck-footer__social { display: flex; align-items: center; gap: var(--sp-4); } .ck-footer__social-row { display: flex; align-items: center; gap: var(--sp-2); } [data-theme="dark"] .ck-footer__social-row img { filter: brightness(0) invert(1); } .ck-social-link { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--clr-border); color: var(--clr-text-muted); border-radius: 4px; padding: 0.4rem; transition: border-color 0.2s, color 0.2s, background 0.2s; } .ck-social-link img { width: 16px; height: 16px; display: block; fill: currentColor; flex-shrink: 0; /* filter: grayscale(1); */ transition: filter 0.2s; } .ck-social-link:hover { border-color: var(--clr-primary); color: var(--clr-primary); background: color-mix(in srgb, var(--clr-primary) 10%, transparent); } .ck-social-link:hover img { filter: grayscale(0); } .ck-footer__legal-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 20px; } .ck-footer__legal-links li { position: relative; /* margin: 0 12px; */ } .ck-footer__legal-links li:not(:last-child)::after { content: "|"; position: absolute; right: -16px; color: #a8d63c; /* separator color */ } .ck-footer__legal-links a { text-decoration: none; color: var(--clr-primary); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 3px; font-weight: 400; text-underline-offset: 2px; text-decoration-thickness: 0px; transition: text-underline-offset 0.25s cubic-bezier(0, 0, 0.2, 1); padding: 0.5rem 0; } .ck-footer__legal-links a:hover { text-underline-offset: 0.5rem; } /* ============================================================================= CATEGORY HIGHLIGHTS SECTION ============================================================================= */ /* ── Outer wrapper ─────────────────────────────────────────────────────────── */ .ck-cat-section { padding: var(--sp-20) var(--sp-6); max-width: var(--max-w); margin-inline: auto; } .ck-cat-section__inner { width: 100%; } /* ── Categories grid: 2 columns on desktop ─────────────────────────────────── */ .ck-cat-grid { display: grid; grid-template-columns: 1fr; } .ck-cat-grid>*:not(:nth-child(-n+2)) { border-top: 1px dashed var(--clr-border); } @media (min-width: 768px) { .ck-cat-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Each category block ───────────────────────────────────────────────────── */ .ck-cat-block { display: flex; flex-direction: column; gap: 1.85rem; padding: 3rem 2rem; /* Subtle top border as separator for each block */ } .ck-cat-block:nth-child(odd) { border-right: 1px dashed var(--clr-border); } /* ── Category block header: name + view-all ────────────────────────────────── */ .ck-cat-block__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.1rem; } .ck-cat-block__name { font-family: var(--font-display); font-size: 0.8rem; border: 3px solid var(--clr-primary); background: color-mix(in srgb, var(--clr-primary) 100%, transparent); padding: 0.25rem 0.5rem; border-radius: 5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-primary-text); text-decoration: none; transition: opacity 0.2s; } .ck-cat-block__name:hover { opacity: 0.75; } .ck-cat-block__view-all { font-family: var(--font-ui); font-size: 1rem; font-weight: 500; color: var(--clr-text-dim); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; transition: color 0.2s, gap 0.2s; } .ck-cat-block__view-all:hover { color: var(--clr-primary); gap: 6px; } /* ── Posts layout: featured left + side stack right ────────────────────────── */ .ck-cat-block__posts { display: grid; grid-template-columns: 1fr; } @media (min-width: 480px) { .ck-cat-block__posts { grid-template-columns: 55fr 45fr; align-items: start; } } /* ── FEATURED POST ─────────────────────────────────────────────────────────── */ .ck-cat-feat { display: block; text-decoration: none; color: inherit; cursor: pointer; border-right: 1px dashed var(--clr-border); } .ck-cat-feat a { display: block; margin-right: 2rem; } .ck-cat-feat__img-wrap { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--clr-surface-alt); border-radius: var(--md); margin-bottom: 1.2rem; } .ck-cat-feat__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .ck-cat-feat a:hover .ck-cat-feat__img { transform: scale(1.05); } .ck-cat-feat__body { display: flex; flex-direction: column; gap: 0.35rem; } .ck-cat-feat__title { font-family: var(--font-ui); font-size: 0.92rem; font-weight: 600; color: var(--clr-text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s; } .ck-cat-feat a:hover .ck-cat-feat__title { color: var(--clr-primary); } .ck-cat-feat__excerpt { font-family: var(--font-body); font-size: 0.78rem; color: var(--clr-text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ck-cat-feat__meta { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } .ck-cat-feat__date, .ck-cat-feat__read { font-family: var(--font-ui); font-size: 0.7rem; color: var(--clr-text-dim); } .ck-cat__sep { color: var(--clr-text-dim); font-size: 0.7rem; opacity: 0.5; } /* ── SIDE POSTS STACK ──────────────────────────────────────────────────────── */ .ck-cat-side { display: flex; flex-direction: column; gap: 2rem; padding-left: 2rem; } .ck-cat-side>*+* { border-top: 1px dashed var(--clr-border); padding-top: 2rem; } /* Each side card */ .ck-cat-side__card { display: grid; grid-template-rows: 1fr auto; gap: 0rem; align-items: start; text-decoration: none; color: inherit; cursor: pointer; transition: background 0.15s; } .ck-cat-side__card:last-child { border-bottom: none; } .ck-cat-side__card:hover { background: color-mix(in srgb, var(--clr-primary) 5%, transparent); border-radius: var(--sm); } /* Text block (left side of each card) */ .ck-cat-side__body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; /* prevent overflow */ } .ck-cat-side__title { font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; color: var(--clr-text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s; } .ck-cat-side__card:hover .ck-cat-side__title { color: var(--clr-primary); } .ck-cat-side__meta { display: flex; align-items: center; gap: 0.3rem; } .ck-cat-side__date { font-family: var(--font-ui); font-size: 0.68rem; color: var(--clr-text-dim); } /* Thumbnail (right side of each card) */ .ck-cat-side__img-wrap { aspect-ratio: 4 / 2; overflow: hidden; background: var(--clr-surface-alt); border-radius: var(--sm); margin-bottom: 1rem; } .ck-cat-side__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .ck-cat-side__card:hover .ck-cat-side__img { transform: scale(1.08); } /* author avatar */ .ck-cat-feat__author { display: flex; align-items: center; gap: 0.35rem; margin-top: 2rem; } .ck-cat-feat__avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .ck-cat-feat__author-name { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; color: var(--clr-text); } /* ── Mobile: stack columns vertically inside each block ─────────────────────── */ @media (max-width: 479px) { .ck-cat-block__posts { grid-template-columns: 1fr; } .ck-cat-side { border-left: none; padding-left: 0; border-top: 1px solid var(--clr-border); padding-top: 0.5rem; } .ck-cat-side__img-wrap { width: 70px; } } /* ============================================================================= ARCHIVE PAGE — ck-archive styles Covers: Blog Index, Category, Tag, Author, Date, Search archives. ============================================================================= */ /* ── Archive wrapper ─────────────────────────────────────────────────────── */ .site-main--archive { min-height: 60vh; } /* ── Archive Hero ────────────────────────────────────────────────────────── */ .ck-archive-hero { max-width: var(--max-w); margin-inline: auto; padding: 3.5rem var(--sp-6) 2.5rem; border-bottom: 1px solid var(--clr-border); } .ck-archive-hero__inner { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 760px; } /* Eyebrow — "Category / Author / Tag …" */ .ck-archive-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clr-primary); } .ck-archive-hero__eyebrow-line { display: inline-block; width: 32px; height: 2px; background: var(--clr-primary); border-radius: 2px; flex-shrink: 0; } /* Title */ .ck-archive-hero__title { font-family: var(--font-display); font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 700; letter-spacing: -0.04em; color: var(--clr-text); line-height: 1.05; } /* Author archive — title sits beside avatar */ .ck-archive-hero__author-row { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; } .ck-archive-hero__author-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 2px solid var(--clr-border); flex-shrink: 0; } .ck-archive-hero__author-avatar img { width: 100%; height: 100%; object-fit: cover; } .ck-archive-hero__title--author { font-size: clamp(1.8rem, 4vw, 3rem); } /* Description (category / tag) */ .ck-archive-hero__desc { font-family: var(--font-ui); font-size: 1rem; color: var(--clr-text-muted); line-height: 1.65; max-width: 600px; } .ck-archive-hero__desc p { margin: 0; color: var(--clr-text-muted); } /* Author bio */ .ck-archive-hero__bio { font-family: var(--font-ui); font-size: 0.95rem; color: var(--clr-text-muted); line-height: 1.65; max-width: 560px; } /* Post count + date label row */ .ck-archive-hero__meta { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-2); } .ck-archive-hero__count { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-text-dim); padding: 4px 10px; border: 1px solid var(--clr-border); border-radius: 2px; } .ck-archive-hero__sep { color: var(--clr-text-dim); font-size: 0.8rem; } .ck-archive-hero__date-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-text-dim); } /* ── Category Filter Pills ───────────────────────────────────────────────── */ .ck-archive-filters { max-width: var(--max-w); margin-inline: auto; padding: var(--sp-6) var(--sp-6) 0; overflow-x: auto; -webkit-overflow-scrolling: touch; /* Hide scrollbar */ scrollbar-width: none; } .ck-archive-filters::-webkit-scrollbar { display: none; } .ck-archive-filters__inner { display: flex; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-4); width: max-content; min-width: 100%; } /* Individual pill */ .ck-filter-pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 14px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-text-muted); border: 1px solid var(--clr-border); border-radius: 2px; white-space: nowrap; transition: border-color 0.2s, color 0.2s, background 0.2s; text-decoration: none; } .ck-filter-pill:hover { border-color: var(--clr-primary); color: var(--clr-primary); } .ck-filter-pill--active { background: var(--clr-primary); border-color: var(--clr-primary); color: var(--clr-primary-text); } .ck-filter-pill--active:hover { color: var(--clr-primary-text); background: var(--clr-primary-dark); } .ck-filter-pill__count { font-size: 0.55rem; opacity: 0.7; } /* ── Archive Body ────────────────────────────────────────────────────────── */ .ck-archive-body { max-width: var(--max-w); margin-inline: auto; padding: 0 var(--sp-6); } .ck-archive-section { padding-top: var(--sp-10); } /* ── Hero Post (first post — large card) ─────────────────────────────────── */ .ck-archive-hero-post-wrap { border-bottom: 1px solid var(--clr-border); padding-bottom: var(--sp-10); } .ck-archive-hero-post { display: grid; grid-template-columns: 1fr; gap: var(--sp-10); text-decoration: none; cursor: pointer; transition: opacity 0.2s; } @media (min-width: 768px) { .ck-archive-hero-post { grid-template-columns: 1.4fr 1fr; gap: var(--sp-10); align-items: center; } } .ck-archive-hero-post:hover { opacity: 0.92; } /* Hero post thumbnail */ .ck-archive-hero-post__thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--md); background: var(--clr-surface-alt); border: 1px solid var(--clr-border); } @media (min-width: 768px) { .ck-archive-hero-post__thumb { aspect-ratio: 4/3; } } .ck-archive-hero-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; } .ck-archive-hero-post:hover .ck-archive-hero-post__thumb img { transform: scale(1.04); } .ck-archive-hero-post__no-img { width: 100%; height: 100%; background: var(--clr-surface-alt); } /* Category badge over thumbnail */ .ck-archive-hero-post__badge { position: absolute; top: 14px; left: 14px; font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-primary-text); background: var(--clr-primary); padding: 4px 10px; border-radius: 2px; } /* Hero post body text */ .ck-archive-hero-post__body { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4) 0; } /* Meta row — author · date · read time */ .ck-archive-hero-post__meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .ck-archive-hero-post__author { font-family: var(--font-ui); font-size: 0.82rem; font-weight: 600; color: var(--clr-text); } .ck-archive-hero-post__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--clr-text-dim); display: inline-block; flex-shrink: 0; } .ck-archive-hero-post__date, .ck-archive-hero-post__read { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-text-dim); } /* Hero post title — the most prominent typographic element */ .ck-archive-hero-post__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; color: var(--clr-text); transition: color 0.2s; } .ck-archive-hero-post:hover .ck-archive-hero-post__title { color: var(--clr-primary); } /* Excerpt */ .ck-archive-hero-post__excerpt { font-family: var(--font-ui); font-size: 0.95rem; color: var(--clr-text-muted); line-height: 1.65; } /* CTA button-link */ .ck-archive-hero-post__cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-primary); padding: 8px 0; border-bottom: 1px solid transparent; transition: border-color 0.2s, gap 0.2s; width: fit-content; margin-top: var(--sp-2); } .ck-archive-hero-post:hover .ck-archive-hero-post__cta { border-color: var(--clr-primary); gap: 10px; } /* ── Posts Grid (remaining posts) ────────────────────────────────────────── */ .ck-archive-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-10) var(--gutter); } @media (min-width: 600px) { .ck-archive-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ck-archive-grid { grid-template-columns: repeat(3, 1fr); } } /* ── Archive Card ────────────────────────────────────────────────────────── */ .ck-archive-card { display: flex; flex-direction: column; gap: 0; text-decoration: none; cursor: pointer; transition: opacity 0.2s; } /* Card thumbnail */ .ck-archive-card__thumb { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--clr-surface-alt); border-radius: var(--md); margin-bottom: 1rem; border: 1px solid var(--clr-border); } .ck-archive-card__img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%); transition: filter 0.5s, transform 0.5s; } .ck-archive-card:hover .ck-archive-card__img { filter: grayscale(0%); transform: scale(1.05); } .ck-archive-card__no-img { width: 100%; height: 100%; background: var(--clr-surface-alt); } /* Category badge on card thumbnail */ .ck-archive-card__cat-badge { position: absolute; top: 10px; left: 10px; font-family: var(--font-mono); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-primary-text); background: var(--clr-primary); padding: 3px 8px; border-radius: 2px; } /* Card body */ .ck-archive-card__body { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; } /* Meta row */ .ck-archive-card__meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: 2px; } .ck-archive-card__author { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; color: var(--clr-text); } .ck-archive-card__sep { color: var(--clr-text-dim); font-size: 0.7rem; } .ck-archive-card__date, .ck-archive-card__read { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-text-dim); } /* Card title — key typographic element */ .ck-archive-card__title { font-family: var(--font-display); font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; color: var(--clr-text); transition: color 0.2s; margin-bottom: 4px; } .ck-archive-card:hover .ck-archive-card__title { color: var(--clr-primary); } /* Excerpt — subtle, serif for readability */ .ck-archive-card__excerpt { font-family: var(--font-ui); font-size: 0.88rem; color: var(--clr-text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Arrow indicator */ .ck-archive-card__arrow { font-family: var(--font-mono); font-size: 0.7rem; color: var(--clr-primary); opacity: 0; transform: translateX(-6px); transition: opacity 0.25s, transform 0.25s; margin-top: var(--sp-2); display: inline-block; width: fit-content; } .ck-archive-card:hover .ck-archive-card__arrow { opacity: 1; transform: translateX(0); } /* ── Empty State ─────────────────────────────────────────────────────────── */ .ck-archive-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-6); padding: 6rem var(--sp-6); max-width: 480px; margin-inline: auto; } .ck-archive-empty__icon { font-size: 3rem; color: var(--clr-text-dim); opacity: 0.4; } .ck-archive-empty__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; text-transform: uppercase; color: var(--clr-text); } .ck-archive-empty__msg { font-family: var(--font-ui); font-size: 0.95rem; color: var(--clr-text-muted); line-height: 1.6; } .ck-archive-empty__btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-primary); padding: 10px 20px; border: 1px solid var(--clr-primary); border-radius: 2px; transition: background 0.2s, color 0.2s; text-decoration: none; } .ck-archive-empty__btn:hover { background: var(--clr-primary); color: var(--clr-primary-text); } /* ── Archive Pagination ──────────────────────────────────────────────────── */ .ck-archive-pagination { max-width: var(--max-w); margin-inline: auto; padding: var(--sp-10) var(--sp-6) 5rem; border-top: 1px solid var(--clr-border); margin-top: var(--sp-10); } /* WordPress outputs .nav-links inside the_posts_pagination */ .ck-archive-pagination .nav-links { display: flex; align-items: center; justify-content: center; gap: var(--sp-1); flex-wrap: wrap; } .ck-archive-pagination .page-numbers { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; border: 1px solid var(--clr-border); color: var(--clr-text-muted); padding-inline: var(--sp-4); text-decoration: none; transition: border-color 0.2s, color 0.2s, background 0.2s; border-radius: 2px; } .ck-archive-pagination .page-numbers:hover { border-color: var(--clr-primary); color: var(--clr-primary); } .ck-archive-pagination .page-numbers.current { background: var(--clr-primary); color: var(--clr-primary-text); border-color: var(--clr-primary); font-weight: 700; } .ck-archive-pagination .page-numbers.dots { border-color: transparent; color: var(--clr-text-dim); pointer-events: none; } .ck-archive-pagination .prev, .ck-archive-pagination .next { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; padding-inline: var(--sp-6); } /* ── Dark mode adjustments ───────────────────────────────────────────────── */ [data-theme="dark"] .ck-archive-hero-post__thumb, [data-theme="dark"] .ck-archive-card__thumb { border-color: var(--clr-border); } /* ============================================================================= ARTICLE PAGE — ck-article styles ============================================================================= */ /* Scroll progress bar */ #scroll-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--clr-primary); z-index: 9999; width: 0%; transition: width 0.1s linear; } /* Article Hero */ .ck-art-hero { max-width: var(--max-w); margin-inline: auto; padding: 0rem 1.75rem; display: flex; flex-direction: column; gap: var(--sp-10); } .ck-art-hero__left { display: flex; flex-direction: column; gap: var(--sp-6); padding: 0.25rem; } .ck-art-hero__cat { display: inline-flex; align-items: center; padding: 0.25rem 1rem; border: 2px solid var(--clr-primary); color: var(--clr-primary-text); font-family: var(--font-mono); font-size: 0.82rem; font-weight: bold; letter-spacing: -2%; text-transform: uppercase; width: fit-content; border-radius: var(--sm); background: color-mix(in srgb, var(--clr-primary) 100%, transparent); } .ck-art-hero__title { font-family: var(--font-display); font-size: 3.8rem; font-weight: 600; line-height: 1; letter-spacing: -6%; color: var(--clr-text); } .ck-art-hero__meta { display: flex; align-items: center; gap: 1rem; margin: 0.9rem 0; } .ck-art-hero__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 1px solid var(--clr-border); flex-shrink: 0; } .ck-art-hero__avatar img { width: 100%; height: 100%; object-fit: cover; } .ck-art-hero__avatar__content { display: flex; flex-direction: column; gap: 5px; } .ck-art-hero__author-name { font-family: var(--font-ui); font-size: 1.4rem; font-weight: 600; color: var(--clr-text); line-height: 1; } .ck-art-hero__date { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 6%; text-transform: uppercase; color: var(--clr-text-dim); } .ck-art-hero__sep-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--clr-border); display: inline-block; } /* Article Layout */ .ck-art-layout { max-width: var(--max-w); margin-inline: auto; padding: 0 var(--sp-6) var(--sp-10); display: grid; grid-template-columns: 1fr; gap: var(--sp-10); align-items: start; } @media (min-width: 1024px) { .ck-art-layout { grid-template-columns: 2fr 1fr; } } /* Article Content */ .ck-art-content { display: flex; flex-direction: column; gap: var(--sp-10); max-width: 800px; } .ck-art-body { display: flex; flex-direction: column; gap: var(--sp-6); font-family: var(--font-ui); font-size: 1.05rem; line-height: 1.75; color: var(--clr-text-muted); margin: 0 0.25rem; } .ck-art-body p { color: var(--clr-text-muted); font-size: 1.15rem; font-family: var(--font-ui); letter-spacing: -2%; line-height: 1.4; } /* ============================================================================= ENTRY CONTENT TYPOGRAPHY (.ck-entry-content) Scoped styles for ALL WordPress editor output — Gutenberg blocks, Classic Editor, shortcodes. User chahe kuch bhi dale, yahan sab theme ke hisab se hi dikhega. DEVELOPER NOTE: - Yeh class sirf single.php me ck-art-body ke saath lagti hai. - Global styles override nahi hote — sirf article body ke andar scoped hai. - Naya element add karna ho to yahan neeche add karo .ck-entry-content ke andar. ============================================================================= */ /* ── Base (body text) ──────────────────────────────────────────────────────── */ .ck-entry-content { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.78; color: var(--clr-text-muted); } /* ── Paragraphs ────────────────────────────────────────────────────────────── */ .ck-entry-content p { font-family: var(--font-ui); font-size: 1.05rem; line-height: 1.75; color: var(--clr-text-muted); /* margin-bottom: var(--sp-6); */ } /* Drop cap — first paragraph ka first letter */ /* .ck-entry-content>p:first-of-type::first-letter { font-family: var(--font-display); font-size: 4rem; font-weight: 700; color: var(--clr-primary); float: left; line-height: 0.8; margin: 0.6rem 0.27rem 0 0; } */ /* ========== Headings ========== */ .ck-entry-content :where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); font-weight: 600; color: var(--clr-text); border-left: 4px solid var(--clr-primary); padding-left: 1rem; } .ck-entry-content :where(h1, h4) { border-left: none; padding-left: 0; } .ck-entry-content h1 { font-size: 1.88rem; margin-bottom: var(--sp-2); } .ck-entry-content h2 { font-size: 1.6rem; margin-bottom: var(--sp-2); } .ck-entry-content h3 { font-size: 1.4rem; margin-bottom: var(--sp-2); } .ck-entry-content h4 { font-size: 1.2rem; margin-bottom: var(--sp-2); } .ck-entry-content h5 { font-size: 1.1rem; margin-bottom: var(--sp-2); } .ck-entry-content h6 { font-size: 1rem; margin-bottom: var(--sp-2); } /* ── Links ─────────────────────────────────────────────────────────────────── */ .ck-entry-content a { color: var(--clr-primary); text-decoration: underline; text-decoration-color: rgba(183, 236, 52, 0.4); text-underline-offset: 3px; transition: text-decoration-color 0.2s, color 0.2s; } .ck-entry-content a:hover { color: var(--clr-primary-dark); text-decoration-color: var(--clr-primary); } /* ==================== Blockquote ==================== */ .ck-entry-content blockquote { border: 1px solid var(--clr-primary); padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-10); margin: 1rem 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; position: relative; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); } .ck-entry-content blockquote p { font-family: var(--font-body); font-size: 1rem; font-style: italic; color: var(--clr-primary); margin-bottom: 0; line-height: 1.5; letter-spacing: 3%; } .ck-entry-content blockquote::before { content: '“'; position: absolute; font-style: italic; top: -1.2rem; left: 10px; font-family: var(--font-display); font-size: 6rem; color: var(--clr-primary); display: flex; line-height: 0.9; height: 2rem; background: var(--clr-bg); padding: 0 1.2rem 0 0rem; } /* ==================== Lists ==================== */ .ck-entry-content ul, .ck-entry-content ol { padding-left: 1.5rem; margin-bottom: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); list-style-position: inside; } .ck-entry-content ul { list-style: none; } .ck-entry-content ul li { position: relative; padding-left: 1.2rem; font-family: var(--font-ui); font-size: 1rem; color: var(--clr-text-muted); line-height: 1.65; } .ck-entry-content ul li::before { content: ''; position: absolute; left: 0; top: 0.58em; width: 6px; height: 6px; background: var(--clr-primary); border-radius: 50%; } .ck-entry-content ol li { padding-left: 0.4rem; font-family: var(--font-ui); font-size: 1rem; color: var(--clr-text-muted); line-height: 1.65; } .ck-entry-content ol li::marker { color: var(--clr-primary); font-weight: 700; font-family: var(--font-mono); } /* Nested lists */ .ck-entry-content ul ul, .ck-entry-content ol ol, .ck-entry-content ul ol, .ck-entry-content ol ul { margin-top: var(--sp-2); margin-bottom: 0; } /* ================== Code ================== */ /* .ck-entry-content pre { background: var(--clr-surface-alt); padding: 1.2rem 1rem 1rem 1.4rem; border-radius: 12px; overflow-x: auto; margin: var(--sp-6) 0; font-family: var(--font-code); font-size: 0.82rem; line-height: 1.5; color: var(--clr-text-muted); } .ck-entry-content code { font-size: 0.85em; color: inherit; padding: 2px 6px; border-radius: var(--radius-sm); } */ pre { position: relative; padding: 45px 20px 20px; background: #1e1e1e; color: #d4d4d4; border-radius: 12px; overflow-x: auto; font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas", monospace; font-size: 15px; line-height: 1.7; border: 1px solid #333; } pre::before { content: ""; position: absolute; top: 14px; left: 18px; width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: 20px 0 #febc2e, 40px 0 #28c840; } /* ==================== Images & Figures ==================== */ .ck-entry-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); display: block; margin: var(--sp-6) 0; border: 1px solid var(--clr-border); } .ck-entry-content figure { margin: 2rem 0; } .ck-entry-content figure img { margin: 0; width: 100%; } .ck-entry-content figcaption { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-text-dim); text-align: center; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--clr-border); } /* ==================== Responsive Embeds & Social Media ==================== */ .ck-entry-content iframe, .ck-entry-content object, .ck-entry-content embed, .ck-entry-content video { max-width: 100%; border: 0; border-radius: 12px; display: block; margin: 2rem auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); background: var(--clr-surface-alt); transition: transform 0.3s ease, box-shadow 0.3s ease; } [data-theme="dark"] .ck-entry-content iframe, [data-theme="dark"] .ck-entry-content object, [data-theme="dark"] .ck-entry-content embed { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } /* Ensure WordPress block wrappers are centered and full-width */ .wp-block-embed, .ck-entry-content .wp-block-embed { margin: 2.5rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } .wp-block-embed__wrapper { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; } /* Specific Social Embeds (FB, LinkedIn, Telegram) styling & responsiveness */ /* 1. Telegram Widget */ iframe[id^="telegram-post"], iframe[src*="telegram.org"] { margin: 2rem auto !important; display: block !important; max-width: 100% !important; box-shadow: none !important; /* Telegram handles its own shadow */ border: none !important; } /* 2. Facebook Embeds */ iframe[src*="facebook.com"], .fb-post, .fb-video { margin: 2rem auto !important; display: block !important; max-width: 100% !important; border-radius: 8px; border: 1px solid var(--clr-border) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; } [data-theme="dark"] iframe[src*="facebook.com"] { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important; } /* 3. LinkedIn Embeds */ iframe[src*="linkedin.com"], .wp-block-embed-linkedin iframe { width: 100% !important; /* LinkedIn's default card width */ height: 600px; /* standard height */ border-radius: 12px; border: 1px solid var(--clr-border) !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04) !important; } [data-theme="dark"] iframe[src*="linkedin.com"] { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important; } /* Reset theme's default quote decoration for social media blockquotes */ .ck-entry-content blockquote.twitter-tweet, .ck-entry-content blockquote.instagram-media, .ck-entry-content blockquote.fb-xfbml-parse-ignore { border: 1px solid var(--clr-border) !important; background: var(--clr-surface-alt) !important; padding: 1.5rem !important; margin: 2rem auto !important; max-width: 550px; border-radius: 12px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important; } .ck-entry-content blockquote.twitter-tweet::before, .ck-entry-content blockquote.instagram-media::before { display: none !important; /* remove custom large quotes icon */ } /* Gutenberg align classes */ .ck-entry-content .alignleft { float: left; margin-right: var(--sp-6); margin-bottom: var(--sp-4); max-width: 45%; } .ck-entry-content .alignright { float: right; margin-left: var(--sp-6); margin-bottom: var(--sp-4); max-width: 45%; } .ck-entry-content .aligncenter { margin-left: auto; margin-right: auto; display: block; } /* ── Tables ────────────────────────────────────────────────────────────────── */ .ck-entry-content table { width: 100%; border-collapse: collapse; margin: var(--sp-6) 0; font-family: var(--font-ui); font-size: 0.9rem; overflow-x: auto; display: block; } .ck-entry-content th { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-primary); background: var(--clr-surface); padding: 10px 14px; text-align: left; border-bottom: 2px solid var(--clr-primary); } .ck-entry-content td { padding: 10px 14px; border-bottom: 1px solid var(--clr-border); color: var(--clr-text-muted); vertical-align: top; } .ck-entry-content tr:last-child td { border-bottom: none; } /* ── Horizontal Rule ───────────────────────────────────────────────────────── */ .ck-entry-content hr { border: none; border-top: 1px solid var(--clr-border); margin: 2.5rem 0; } /* ── Dark mode overrides ───────────────────────────────────────────────────── */ [data-theme="dark"] .ck-entry-content code { background: #1a1f0f; } [data-theme="dark"] .ck-entry-content pre { background: #1a1f0f; } [data-theme="dark"] .ck-entry-content blockquote { background: #1a1f0f; } /* Related articles inline */ .ck-art-related { padding: var(--sp-10) 0; border-top: 1px solid var(--clr-border); border-bottom: 1px solid var(--clr-border); } .ck-art-related__grid { display: grid; grid-template-columns: 1fr; gap: var(--gutter); } @media (min-width: 600px) { .ck-art-related__grid { grid-template-columns: repeat(3, 1fr); } } .ck-art-rel-card { display: flex; flex-direction: column; gap: var(--sp-4); cursor: pointer; } .ck-art-rel-card__thumb { aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--clr-border); border-radius: 4px; } .ck-art-rel-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .ck-art-rel-card:hover .ck-art-rel-card__thumb img { transform: scale(1.06); } .ck-art-rel-card__title { font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; color: var(--clr-text); line-height: 1.35; transition: color 0.2s; } .ck-art-rel-card:hover .ck-art-rel-card__title { color: var(--clr-primary); } /* Sidebar */ .ck-art-sidebar { display: none; flex-direction: column; gap: var(--sp-10); position: sticky; top: calc(90px + 0.5rem); } @media (min-width: 1024px) { .ck-art-sidebar { display: flex; } } .ck-sidebar-card { border: 1px solid var(--clr-primary); border-radius: 8px; padding: var(--sp-2) var(--sp-4); padding-top: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .ck-sidebar-card.ck-article-social-card { all: unset } .ck-sidebar-card__title { margin-top: -0.75rem; margin-bottom: 0.75rem; background: var(--clr-bg); padding: 0 0.75rem; width: fit-content; } .ck-sidebar-latest__link { display: flex; align-items: flex-start; gap: var(--sp-4); padding: 6px 8px; border-radius: 4px; text-decoration: none; color: inherit; transition: background 0.18s; } .ck-sidebar-latest__link:hover { background: var(--clr-surface-alt); } /* ── Dynamic ToC list (generated by JS) ─────────────────────────────────── */ .ck-toc-divider { border: none; border-top: 1px solid var(--clr-border); margin: 4px 0; } .ck-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } /* Base ToC link — same visual as existing nav links */ .ck-toc-link { display: block; font-family: var(--font-ui); font-size: 0.82rem; font-weight: 400; color: var(--clr-text-muted); padding: 5px 8px 5px 10px; border-radius: 4px; border-left: 2px solid transparent; text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s; /* Limit long headings */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .ck-toc-link:hover { background: var(--clr-surface-alt); color: var(--clr-text); } /* Active — primary color + left indicator */ .ck-toc-link.toc-active { color: var(--clr-primary); font-weight: 600; border-left-color: var(--clr-primary); background: color-mix(in srgb, var(--clr-primary) 8%, transparent); } /* H3 sub-items — indented */ .ck-toc-list__sub .ck-toc-link { padding-left: 22px; font-size: 0.78rem; color: var(--clr-text-dim); } .ck-toc-list__sub .ck-toc-link.toc-active { color: var(--clr-primary); } /* ============================================================================= LATEST POSTS SIDEBAR WIDGET — .ck-sidebar-latest ============================================================================= */ .ck-sidebar-latest { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .ck-sidebar-latest__item { border-radius: 4px; overflow: hidden; } /* Thumbnail — fixed square */ .ck-sidebar-latest__thumb { width: 52px; height: 52px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: var(--clr-surface-alt); } .ck-sidebar-latest__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .ck-sidebar-latest__link:hover .ck-sidebar-latest__thumb img { transform: scale(1.06); } /* Text column */ .ck-sidebar-latest__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ck-sidebar-latest__cat { font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-primary); } .ck-sidebar-latest__title { font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; color: var(--clr-text); line-height: 1.35; transition: color 0.2s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ck-sidebar-latest__link:hover .ck-sidebar-latest__title { color: var(--clr-primary); } .ck-sidebar-latest__date { font-family: var(--font-mono); font-size: 0.57rem; color: var(--clr-text-dim); letter-spacing: 0.04em; } /* Divider between items */ .ck-sidebar-latest__item+.ck-sidebar-latest__item { border-top: 1px solid var(--clr-border-dim); } /* ============================================================================= SIDEBAR AD UNIT — .ck-sidebar-ad ============================================================================= */ .ck-sidebar-ad { display: flex; flex-direction: column; gap: var(--sp-2); overflow: hidden; } .ck-sidebar-ad__label { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-text-dim); text-align: center; display: block; padding-bottom: 2px; border-bottom: 1px solid var(--clr-border-dim); } .ck-sidebar-ad__unit { width: 100%; min-height: 60px; /* prevents layout jump before ad loads */ overflow: hidden; border-radius: 4px; } /* Ensure the tag fills the container */ .ck-sidebar-ad__unit .adsbygoogle { display: block; width: 100%; } /* ============================================================================= COMMENTS & FOOTER AD UNITS — .ck-comments-ad / .ck-footer-ad ============================================================================= */ .ck-comments-ad, .ck-footer-ad { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-8); margin-bottom: var(--sp-8); margin-left: auto; margin-right: auto; overflow: hidden; max-width: 760px; width: 100%; } .ck-comments-ad__label, .ck-footer-ad__label { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-text-dim); text-align: center; display: block; padding-bottom: 2px; border-bottom: 1px solid var(--clr-border-dim); } .ck-comments-ad__unit, .ck-footer-ad__unit { width: 100%; min-height: 100px; /* prevents layout jump before ad loads */ overflow: hidden; border-radius: 4px; } .ck-comments-ad__unit .adsbygoogle, .ck-footer-ad__unit .adsbygoogle { display: block; width: 100%; } .ck-sidebar-social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; margin-top: var(--sp-4); } .ck-article-social-card { margin-top: var(--sp-8); } .ck-sidebar-social-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid transparent; border-radius: 6px; text-decoration: none; transition: all 0.2s ease-in-out; color: #fff !important; text-decoration: none !important; } .ck-sidebar-social-item img, .ck-sidebar-social-item svg { width: 18px; height: 18px; object-fit: contain; fill: currentColor; flex-shrink: 0; transition: transform 0.2s ease; } .ck-sidebar-social-item img { filter: brightness(0) invert(1); /* makes the SVG icon pure white for standard contrast */ } .ck-sidebar-social-name { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; line-height: normal; } /* Hover transform */ .ck-sidebar-social-item:hover { transform: translateY(-1.5px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); } .ck-sidebar-social-item:hover img, .ck-sidebar-social-item:hover svg { transform: scale(1.08); } /* Brand specific background and text colors */ .ck-sidebar-social-item--facebook { background: #1877F2; color: #ffffff; } .ck-sidebar-social-item--facebook:hover { background: #1565C0; } .ck-sidebar-social-item--twitter { background: #0f1419; color: #ffffff; border-color: rgba(255, 255, 255, 0.1); } .ck-sidebar-social-item--twitter:hover { background: #000000; border-color: rgba(255, 255, 255, 0.2); } .ck-sidebar-social-item--linkedin { background: #0A66C2; color: #ffffff; } .ck-sidebar-social-item--linkedin:hover { background: #08529C; } .ck-sidebar-social-item--youtube { background: #FF0000; color: #ffffff; } .ck-sidebar-social-item--youtube:hover { background: #CC0000; } .ck-sidebar-social-item--telegram { background: #0088cc; color: #ffffff; } .ck-sidebar-social-item--telegram:hover { background: #0077b5; } .ck-sidebar-social-item--whatsapp { background: #25D366; color: #ffffff; } .ck-sidebar-social-item--whatsapp:hover { background: #128C7E; } .ck-sidebar-social-item--reddit { background: #FF4500; color: #ffffff; } .ck-sidebar-social-item--reddit:hover { background: #E03D00; } /* Responsive adjustment for extra small widths */ @media (max-width: 350px) { .ck-sidebar-social-grid { grid-template-columns: 1fr; } } /* ============================================================================= COMMENT FORM — .ck-comment-form-col (main form below comment list) Layout (grid): [ textarea (full width) ] [ name (1/2) | email (1/2) ] [ cookies checkbox (full width) ] [ submit button (full width) ] ============================================================================= */ .ck-comment-form-col h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; color: var(--clr-text); margin-bottom: var(--sp-2); } .ck-form-note { font-family: var(--font-ui); font-size: 0.78rem; color: var(--clr-text-dim); margin-bottom: var(--sp-2); } /* Single clean grid */ .ck-comment-form-col .comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Textarea: full width */ .ck-comment-form-col .comment-form-comment { grid-column: 1 / -1; } .ck-comment-form-col textarea { width: 100%; min-height: 130px; resize: vertical; padding: 12px 14px; background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: 8px; font-family: var(--font-ui); font-size: 0.9rem; color: var(--clr-text); outline: none; transition: border-color 0.2s; box-sizing: border-box; } .ck-comment-form-col textarea:focus { border-color: var(--clr-primary); } /* Name + Email — each half width, with icon */ .ck-comment-form-col .comment-form-author, .ck-comment-form-col .comment-form-email { position: relative; display: block; } .ck-comment-form-col input[type="text"], .ck-comment-form-col input[type="email"] { display: block; width: 100%; padding: 11px 14px 11px 36px; background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: 8px; font-family: var(--font-ui); font-size: 0.88rem; color: var(--clr-text); outline: none; transition: border-color 0.2s; box-sizing: border-box; } .ck-comment-form-col input[type="text"]:focus, .ck-comment-form-col input[type="email"]:focus { border-color: var(--clr-primary); } /* Field icon — positioned inside input */ .ck-field-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--clr-text-dim); display: flex; align-items: center; pointer-events: none; z-index: 1; } /* Cookies + Submit: full width */ .ck-comment-form-col .comment-form-cookies-consent, .ck-comment-form-col .form-submit { grid-column: 1 / -1; } /* Checkbox layout */ .ck-comment-form-col .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; flex-direction: row; } .ck-comment-form-col .comment-form-cookies-consent input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; min-width: 16px; border: 1.5px solid var(--clr-border); border-radius: 3px; background: var(--clr-bg); cursor: pointer; position: relative; margin-top: 2px; transition: background 0.2s, border-color 0.2s; } .ck-comment-form-col .comment-form-cookies-consent input[type="checkbox"]:checked { background: var(--clr-primary); border-color: var(--clr-primary); } .ck-comment-form-col .comment-form-cookies-consent input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 3px; top: 0px; width: 6px; height: 9px; border: 2px solid var(--clr-primary-text); border-top: none; border-left: none; transform: rotate(45deg); } .ck-comment-form-col .comment-form-cookies-consent label { font-family: var(--font-ui); font-size: 0.78rem; color: var(--clr-text-muted); cursor: pointer; line-height: 1.5; text-transform: none; letter-spacing: 0; } /* Submit button */ .ck-comment-form-col .submit { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; background: var(--clr-primary); color: var(--clr-primary-text); font-family: var(--font-ui); font-size: 0.88rem; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s, transform 0.1s; letter-spacing: 0.02em; } .ck-comment-form-col .submit:hover { background: var(--clr-primary-dark); transform: translateY(-1px); } /* Dark mode */ [data-theme="dark"] .ck-discussion__count svg, [data-theme="dark"] .ck-comment-form-col textarea, [data-theme="dark"] .ck-comment-form-col input[type="text"], [data-theme="dark"] .ck-comment-form-col input[type="email"] { background: #111509; } /* More / Latest sections reuse existing .ck-section, .ck-feat-card, .ck-art{ display: grid; grid-template-columns: 1fr; gap: var(--gutter); } /* Newsletter CTA section */ .ck-nl-cta { max-width: var(--max-w); /* margin-inline: auto; */ padding: var(--sp-6) 0; } .ck-nl-cta__inner { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 24px; padding: var(--sp-6); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-6); position: relative; overflow: hidden; } .ck-nl-cta__glow { position: absolute; width: 260px; height: 260px; background: rgba(183, 236, 52, 0.08); border-radius: 50%; filter: blur(60px); } .ck-nl-cta__glow--tr { top: -80px; right: -80px; } .ck-nl-cta__glow--bl { bottom: -80px; left: -80px; } [data-theme="dark"] .ck-sidebar-card { background: #171a0f; } [data-theme="dark"] .ck-nl-cta__inner { background: #171a0f; } /* ============================================================================= POST NAVIGATION (Prev / Next) ============================================================================= */ .post-navigation { max-width: 760px; display: flex; justify-content: space-between; gap: var(--sp-6); } .nav-links { display: flex; justify-content: space-between; width: 100%; gap: var(--sp-6); } .nav-previous, .nav-next { flex: 1; } .nav-next { text-align: right; } .nav-previous a, .nav-next a { display: flex; gap: var(--sp-4); align-items: center; text-decoration: none; transition: color 0.2s; } .nav-previous a { flex-direction: row; } .nav-next a { flex-direction: row-reverse; text-align: right; } .nav-content { display: flex; flex-direction: column; gap: 4px; } .nav-thumb { width: 80px; height: 60px; border-radius: 6px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--clr-border); background: var(--clr-surface-alt); } .nav-thumb__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .nav-previous a:hover .nav-thumb__img, .nav-next a:hover .nav-thumb__img { transform: scale(1.08); } .nav-previous a:hover, .nav-next a:hover { color: var(--clr-primary); } .nav-subtitle { font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-text-dim); } .nav-title { font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; color: var(--clr-text); line-height: 1.3; transition: color 0.2s; } .nav-previous a:hover .nav-title, .nav-next a:hover .nav-title { color: var(--clr-primary); } /* ============================================================================= COMMUNITY DISCUSSION — Comment Section ============================================================================= */ .ck-discussion { width: 100%; display: flex; flex-direction: column; gap: var(--sp-10); text-align: left; } .ck-discussion__head { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--clr-border); } .ck-discussion__title-row { display: flex; align-items: center; gap: var(--sp-4); } .ck-discussion__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--clr-primary) 15%, transparent); color: var(--clr-primary); flex-shrink: 0; } .ck-discussion__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--clr-text); } .ck-discussion__subtitle { font-family: var(--font-ui); font-size: 0.88rem; color: var(--clr-text-muted); } .ck-discussion__meta-row { display: flex; align-items: center; gap: var(--sp-6); margin-top: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--clr-border-dim); } .ck-discussion__count { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 0.82rem; font-weight: 500; color: var(--clr-text-muted); } /* Comment list */ .ck-comment-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-10); margin-bottom: var(--sp-10); order: 2; } .ck-comment { display: flex; gap: var(--sp-6); justify-content: space-between; flex-wrap: wrap; position: relative; /* padding: var(--sp-2); */ } .ck-comment-list>.ck-comment { padding: 0; } .ck-comment__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid var(--clr-border); position: relative; z-index: 3; } .ck-comment__avatar img { width: 100%; height: 100%; object-fit: cover; } .ck-comment__body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); } .ck-comment__date { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-text-dim); } .ck-comment__text { font-family: var(--font-body); font-size: 0.95rem; color: var(--clr-text-muted); line-height: 1.65; } .ck-comment__text p { margin-bottom: var(--sp-4); font-family: var(--font-body); font-size: 0.95rem; color: var(--clr-text-muted); word-wrap: break-word; word-break: break-all; } .ck-comment__text p:last-child { margin-bottom: 0; } /* Reply link */ .ck-comment__reply { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-primary); transition: color 0.2s; display: inline-flex; align-items: center; gap: 4px; } .ck-comment__reply:hover { color: var(--clr-primary-dark); } /* Author comment — highlighted */ .ck-comment.bypostauthor { border-color: var(--clr-primary); background: color-mix(in srgb, var(--clr-primary), transparent 92%); } /* Author badge */ .ck-comment__badge { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--clr-primary); color: var(--clr-white); } /* .ck-comment-list .ck-comment:has(.children)::after { content: ""; position: absolute; top: 3rem; left: 1.5rem; width: 2px; height: 80%; border-left: 3px solid var(--clr-border); } */ .ck-comment-list .comment { z-index: 1; padding-bottom: 1rem; } /* .children>.ck-comment::before { content: ""; position: absolute; width: 7%; height: 3rem; border-left: 3px solid var(--clr-border); border-bottom: 3px solid var(--clr-border); border-bottom-left-radius: 1rem; left: -2rem; top: -1.8rem; z-index: -1; } .children>.ck-comment:has(.children)::after { content: ""; position: absolute; top: 2rem; left: 0.9rem; width: 2px; height: 80%; border-left: 3px solid var(--clr-border); } */ /* .children>.ck-comment .children .ck-comment::before { content: ""; position: absolute; width: 7%; height: 3rem; border-left: 3px solid var(--clr-border); border-bottom: 3px solid var(--clr-border); border-bottom-left-radius: 1rem; left: -2.6rem; top: -1.8rem; z-index: -1; } */ /* Reply items: smaller avatar */ .ck-comment .children .ck-comment { gap: var(--sp-2); } .ck-comment .children .ck-comment__avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; } /* Reply meta: slightly smaller */ .ck-comment .children .ck-comment__author { font-size: 0.82rem; } .ck-comment .children .ck-comment__date { font-size: 0.55rem; } .ck-comment .children .ck-comment__text { font-size: 0.88rem; } /* No comments message */ .ck-no-comments { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-text-dim); text-align: center; padding: var(--sp-10) 0; } /* ── Cookie consent checkbox ───────────────────────────────────────────────── */ .ck-comment-form .comment-form-cookies-consent, .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 0.65rem; flex-direction: row; /* override column default */ } /* Hide the native checkbox visually but keep it functional */ .comment-form-cookies-consent input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; min-width: 18px; border: 1.5px solid var(--clr-border); border-radius: 3px; background: var(--clr-bg); cursor: pointer; position: relative; margin: 0; transition: border-color 0.2s, background 0.2s; flex-shrink: 0; margin-top: 1px; } .comment-form-cookies-consent input[type="checkbox"]:checked { background: var(--clr-primary); border-color: var(--clr-primary); } /* Checkmark via pseudo-element */ .comment-form-cookies-consent input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 6px; height: 10px; border: 2px solid var(--clr-primary-text); border-top: none; border-left: none; transform: rotate(45deg); } .comment-form-cookies-consent label { font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0; text-transform: none; color: var(--clr-text-muted); cursor: pointer; line-height: 1.5; } /* ── Reply form — inline inside comment list ───────────────────────────────── */ /* * Jab user Reply click karta hai, WordPress comment-respond div ko * us comment ke andar move kar deta hai via JS. * Yeh CSS us inline state ko style karta hai. */ .ck-comment-list .comment-respond { margin-top: var(--sp-6); padding: var(--sp-6); border: 1px solid var(--clr-border); border-radius: var(--md); background: var(--clr-surface); } .ck-comment-list .comment-respond h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase; color: var(--clr-text); margin-bottom: var(--sp-4); } .ck-comment-list .comment-respond .comment-form { display: flex; flex-direction: column; gap: var(--sp-4); } /* Inherit same input styles inside inline reply form */ .ck-comment-list .comment-respond .comment-form-author, .ck-comment-list .comment-respond .comment-form-email, .ck-comment-list .comment-respond .comment-form-url, .ck-comment-list .comment-respond .comment-form-comment { display: flex; flex-direction: column; gap: var(--sp-2); } .ck-comment-list .comment-respond label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-text-dim); } .ck-comment-list .comment-respond input[type="text"], .ck-comment-list .comment-respond input[type="email"], .ck-comment-list .comment-respond input[type="url"], .ck-comment-list .comment-respond textarea { padding: 10px 14px; background: var(--clr-bg); border: 1px solid var(--clr-border); font-family: var(--font-ui); font-size: 0.88rem; color: var(--clr-text); outline: none; border-radius: var(--radius-sm); transition: border-color 0.2s; width: 100%; } .ck-comment-list .comment-respond input[type="text"]:focus, .ck-comment-list .comment-respond input[type="email"]:focus, .ck-comment-list .comment-respond input[type="url"]:focus, .ck-comment-list .comment-respond textarea:focus { border-color: var(--clr-primary); } .ck-comment-list .comment-respond textarea { min-height: 120px; resize: vertical; } .ck-comment-list .comment-respond .comment-form-cookies-consent { flex-direction: row; align-items: flex-start; gap: 0.65rem; } .ck-comment-list .comment-respond .submit { padding: 10px 24px; background: var(--clr-primary); color: var(--clr-primary-text); font-family: var(--font-ui); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border: none; cursor: pointer; border-radius: var(--radius-sm); transition: background 0.2s; } .ck-comment-list .comment-respond .submit:hover { background: var(--clr-primary-dark); } /* Cancel reply link */ #cancel-comment-reply-link { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-text-dim); text-decoration: none; margin-left: var(--sp-4); transition: color 0.2s; } #cancel-comment-reply-link:hover { color: var(--clr-primary); } [data-theme="dark"] .ck-comment-list .comment-respond { background: #1a1f0f; } [data-theme="dark"] .ck-comment-list .comment-respond input[type="text"], [data-theme="dark"] .ck-comment-list .comment-respond input[type="email"], [data-theme="dark"] .ck-comment-list .comment-respond input[type="url"], [data-theme="dark"] .ck-comment-list .comment-respond textarea { background: #111509; } /* ============================================================================= MAGAZINE FEATURED SECTION (.ck-mag-*) Layout: 1 hero (left) + 1 side (right) → then 3-col grid ============================================================================= */ .ck-mag-section { max-width: var(--max-w); margin-inline: auto; padding: var(--sp-10) var(--sp-6); } /* ── Section header ───────────────────────────────────────────────────────── */ .ck-mag-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; border-bottom: 1px solid var(--clr-border); padding-bottom: 0.85rem; } /* ── Empty state ──────────────────────────────────────────────────────────── */ .ck-mag-empty { font-family: var(--font-ui); color: var(--clr-text-dim); font-size: 0.9rem; padding: 2rem 0; } /* ── ROW 1 : Hero image (left) + Text-only card (right) ─────────────────── */ .ck-mag-row1 { display: grid; grid-template-columns: 1fr; gap: 1.75rem; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--clr-border); } @media (min-width: 768px) { .ck-mag-row1 { grid-template-columns: 55fr 45fr; align-items: center; gap: 2.5rem; } } /* ── LEFT: Hero — full image with title overlaid at bottom ──────────────── */ .ck-mag-hero { position: relative; display: block; text-decoration: none; overflow: hidden; aspect-ratio: 4/3; background: #0a0a0a; border-radius: var(--md); } @media (min-width: 768px) { .ck-mag-hero { aspect-ratio: auto; min-height: 310px; } } .ck-mag-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s ease; } .ck-mag-hero:hover .ck-mag-hero__img { transform: scale(1.05); } .ck-mag-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.04) 100%); display: flex; align-items: flex-end; padding: 1.5rem 1.6rem; } .ck-mag-hero__title { font-family: var(--font-display); font-size: clamp(1rem, 2.2vw, 1.5rem); font-weight: 700; color: #ffffff; line-height: 1.25; transition: color 0.2s; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ck-mag-hero:hover .ck-mag-hero__title { color: var(--clr-primary); } /* ── RIGHT: Text-only card — NO image ───────────────────────────────────── */ .ck-mag-text { display: flex; flex-direction: column; } .ck-mag-text__meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; } .ck-mag-text__cat { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--clr-text-dim); text-decoration: none; transition: color 0.2s; } .ck-mag-text__cat:hover { color: var(--clr-primary); } .ck-mag-text__sep { font-size: 0.6rem; color: var(--clr-border); } .ck-mag-text__date { font-family: var(--font-ui); font-size: 0.68rem; color: var(--clr-text-dim); } .ck-mag-text__title { font-family: var(--font-display); font-size: clamp(1.15rem, 2.5vw, 1.75rem); font-weight: 700; color: var(--clr-text); line-height: 1.25; margin-bottom: 0.85rem; transition: color 0.2s; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .ck-mag-text__title a { text-decoration: none; color: inherit; } .ck-mag-text:hover .ck-mag-text__title { color: var(--clr-primary); } .ck-mag-text__excerpt { font-family: var(--font-body); font-size: 0.875rem; color: var(--clr-text-muted); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* (old .ck-mag-side removed — replaced by .ck-mag-text above) */ /* ── Shared meta (category + separator + date) ────────────────────────────── */ .ck-mag-card__cat { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-text-dim); text-decoration: none; transition: color 0.2s; } .ck-mag-card__cat:hover { color: var(--clr-primary); } .ck-mag-card__sep { font-size: 0.6rem; color: var(--clr-border); } .ck-mag-card__date { font-family: var(--font-ui); font-size: 0.68rem; color: var(--clr-text-dim); } /* ── 3-column GRID (row 2+) ──────────────────────────────────────────────── */ .ck-mag-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem 2rem; } @media (min-width: 600px) { .ck-mag-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ck-mag-grid { grid-template-columns: repeat(3, 1fr); } } .ck-mag-card { display: flex; flex-direction: column; } /* Image wrapper with overlay label */ .ck-mag-card__thumb-wrap { position: relative; display: block; aspect-ratio: 16/10; background: #0a0a0a; margin-bottom: 0.95rem; text-decoration: none; border-radius: var(--md); overflow: hidden; } .ck-mag-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .ck-mag-card:hover .ck-mag-card__img { transform: scale(1.06); } /* Dark overlay with short title on image */ .ck-mag-card__img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.28) 50%, rgba(0, 0, 0, 0.02) 100%); display: flex; align-items: flex-end; padding: 0.8rem 0.9rem; } .ck-mag-card__img-label { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: #ffffff; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ck-mag-card__body { flex: 1; } .ck-mag-card__meta { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.55rem; } .ck-mag-card__title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--clr-text); line-height: 1.35; margin-bottom: 0.5rem; transition: color 0.2s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ck-mag-card__title a { text-decoration: none; color: inherit; } .ck-mag-card:hover .ck-mag-card__title { color: var(--clr-primary); } .ck-mag-card__excerpt { font-family: var(--font-body); font-size: 0.82rem; color: var(--clr-text-muted); line-height: 1.58; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Dark mode adjustments */ [data-theme="dark"] .ck-mag-hero__overlay { background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0.05) 100%); } [data-theme="dark"] .ck-mag-card__img-overlay { background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.02) 100%); } /* ============================================================================= MAGAZINE CTA FOLLOW CARD — last grid slot Matches reference: yellow bg, rounded corners, star icon, bold heading, subtext description, full-width dark pill button with arrow ============================================================================= */ .ck-mag-cta { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1.4rem 1.5rem; border-radius: 16px; min-height: 240px; position: relative; overflow: hidden; } /* ── Star icon — top left ───────────────────────────────────────────────── */ .ck-mag-cta__icon { font-size: 1.4rem; line-height: 1; color: #1a1d15; margin-bottom: 0.25rem; } /* ── Body: heading + subtext ───────────────────────────────────────────── */ .ck-mag-cta__body { flex: 1; display: flex; flex-direction: column; gap: 0.55rem; } .ck-mag-cta__heading { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: #1a1d15; line-height: 1.25; margin: 0; } .ck-mag-cta__subtext { font-family: var(--font-ui); font-size: 1.2rem; font-weight: 400; color: rgba(0, 0, 0, 0.7); line-height: 1.5; margin: 0; } /* ── Full-width dark pill button ────────────────────────────────────────── */ .ck-mag-cta__btn { display: block; width: 100%; background: #1a1d15; color: #ffffff; font-family: var(--font-ui); font-size: 0.88rem; font-weight: 700; padding: 0.75rem 1.2rem; border-radius: 100px; text-decoration: none; text-align: center; transition: opacity 0.2s, transform 0.15s; margin-top: auto; } .ck-mag-cta__btn:hover { opacity: 0.82; transform: translateY(-1px); color: #ffffff; } /* ============================================================================= TOOL SECTION (.ck-tools-*) Horizontal strip: left intro + right 2×3 tool grid ============================================================================= */ .ck-tools-section { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--sp-6); padding-block: var(--sp-10); } /* Inner wrapper — horizontal layout */ .ck-tools-inner { display: flex; align-items: stretch; gap: 0; border-radius: var(--md); overflow: hidden; background: var(--clr-surface); } /* ── Left intro panel ───────────────────────────────────────────────────── */ .ck-tools-intro { flex: 0 0 350px; padding: 2rem; display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; } .ck-tools-intro__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--clr-text); line-height: 1.25; margin: 0; } .ck-tools-intro__desc { font-family: var(--font-ui); font-size: 0.8rem; color: var(--clr-text-muted); line-height: 1.6; margin: 0; } /* ── Tool grid — 3 columns × dynamic rows ────────────────────────────────────── */ .ck-tools-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); padding: 2rem; gap: 1rem; border-left: 1px solid var(--clr-border); } /* Each tool item */ .ck-tool-item { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.4rem; text-decoration: none; color: var(--clr-text-muted); border: 1px solid var(--clr-border); background: var(--clr-surface); border-radius: var(--md); transition: color 0.2s, background 0.2s; } .ck-tool-item:hover { color: var(--clr-text); background: var(--clr-surface-alt); } .ck-tool-item:hover .ck-tool-item__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color 0.2s; } .ck-tool-item__icon svg { display: block; stroke: var(--clr-text-muted); transition: stroke 0.2s; } .ck-tool-item__icon svg [fill="currentColor"] { fill: var(--clr-text-muted); transition: fill 0.2s; } /* On hover — directly set stroke and fill to primary */ .ck-tool-item:hover .ck-tool-item__icon svg { stroke: var(--clr-primary); } .ck-tool-item:hover .ck-tool-item__icon svg [fill="currentColor"] { fill: var(--clr-primary); } .ck-tool-item__name { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; color: inherit; white-space: nowrap; } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 1120px) { .ck-tools-inner { flex-direction: column; } .ck-tools-intro { flex: none; padding: 1.4rem 1.5rem; } .ck-tools-grid { grid-template-columns: repeat(2, 1fr); border: none; border-top: 1px solid var(--clr-border); } } @media (max-width: 540px) { .ck-tools-grid { grid-template-columns: repeat(1, 1fr); } } /* Dark mode */ [data-theme="dark"] .ck-tools-inner { background: var(--clr-surface); } /* ============================================================================= COMMUNITY DISCUSSION — Comment Section Classes: .ck-discussion, .ck-comment-list, .ck-comment, .ck-comment__* ============================================================================= */ /* ── Outer wrapper ─────────────────────────────────────────────────────────── */ .ck-discussion { max-width: var(--max-w); margin-inline: auto; padding: var(--sp-10) var(--sp-6); } /* ── Discussion Header ─────────────────────────────────────────────────────── */ .ck-discussion__head { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--clr-border); } .ck-discussion__title-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; } .ck-discussion__icon { display: flex; align-items: center; color: var(--clr-primary); flex-shrink: 0; } .ck-discussion__title { font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.75rem); font-weight: 700; color: var(--clr-text); line-height: 1.2; margin: 0; } .ck-discussion__subtitle { font-family: var(--font-body); font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.55; margin-bottom: 1rem; } .ck-discussion__meta-row { display: flex; align-items: center; gap: 1rem; } .ck-discussion__count { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--clr-text-muted); background: var(--clr-surface-alt); padding: 0.3rem 0.7rem; border-radius: 100px; } /* ── Comment List — ol reset ───────────────────────────────────────────────── */ .ck-comment-list, .ck-comment-list .children { list-style: none; margin: 0; padding: 0; } /* ── Individual Comment — li ───────────────────────────────────────────────── */ /* * WordPress renders .children ol INSIDE the li.ck-comment element. * flex-wrap: wrap + width:100% on .children makes it break to a new row * below the avatar + body, spanning the full width. */ .ck-comment { position: relative; display: flex; flex-wrap: wrap; /* allows .children ol to drop to next row */ gap: 1rem; align-items: flex-start; padding: 1.5rem 0; border-bottom: 2px solid var(--clr-border); } .ck-comment-list>.ck-comment:last-child { border-bottom: none; } /* ── Avatar ────────────────────────────────────────────────────────────────── */ .ck-comment__avatar { flex-shrink: 0; width: 48px; height: 48px; } .ck-comment__avatar img { width: inherit; height: inherit; border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--clr-border); } /* ── Body container ────────────────────────────────────────────────────────── */ .ck-comment__body { flex: 1; min-width: 0; } /* ── Comment header: author row + date ─────────────────────────────────────── */ .ck-comment__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; flex-wrap: wrap; } .ck-comment__author-row { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } /* Author name — link or span */ .ck-comment__name { font-family: var(--font-ui); font-size: 0.9rem; font-weight: 700; color: var(--clr-text); text-decoration: none; transition: color 0.2s; } a.ck-comment__name:hover { color: var(--clr-primary); } /* ── Badges ────────────────────────────────────────────────────────────────── */ .ck-comment__badge { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 100px; } .ck-comment__badge--author { background: var(--clr-primary); color: var(--clr-primary-text); } .ck-comment__badge--member { background: var(--clr-surface-alt); color: var(--clr-text-muted); border: 1px solid var(--clr-border); } /* ── Date/Time ─────────────────────────────────────────────────────────────── */ .ck-comment__date { font-family: var(--font-mono); font-size: 0.72rem; color: var(--clr-text-dim); white-space: nowrap; flex-shrink: 0; } /* ── Moderation notice ─────────────────────────────────────────────────────── */ .ck-comment__moderation { font-family: var(--font-ui); font-size: 0.8rem; color: var(--clr-text-dim); font-style: italic; margin-bottom: 0.5rem; padding: 0.4rem 0.8rem; border-left: 3px solid var(--clr-border); background: var(--clr-surface-alt); } /* ── Comment text ──────────────────────────────────────────────────────────── */ .ck-comment__text { font-family: var(--font-body); font-size: 0.92rem; color: var(--clr-text); line-height: 1.65; margin-bottom: 0.65rem; word-break: break-word; overflow-wrap: break-word; } .ck-comment__text p { margin: 0 0 0.5em; } .ck-comment__text p:last-child { margin-bottom: 0; } /* ── Actions row (Reply) ───────────────────────────────────────────────────── */ .ck-comment__actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .ck-comment__reply { display: inline-flex; } .ck-comment__reply a, .ck-comment__reply .comment-reply-link { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; color: var(--clr-text-dim); text-decoration: none; padding: 0.25rem 0.6rem; border: 1px solid var(--clr-border-dim); border-radius: 100px; transition: color 0.2s, border-color 0.2s, background 0.2s; } .ck-comment__reply a:hover, .ck-comment__reply .comment-reply-link:hover { color: var(--clr-primary); border-color: var(--clr-primary); background: color-mix(in srgb, var(--clr-primary) 8%, transparent); } .ck-comment__reply svg { flex-shrink: 0; } /* ── Post-Author highlighted comment ───────────────────────────────────────── */ .ck-comment.ck-comment--is-author>.ck-comment__body { /* subtle left accent for author comments */ } .ck-comment.ck-comment--is-author>.ck-comment__avatar img { border-color: var(--clr-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-primary) 20%, transparent); } /* ── Threaded / Nested replies — .children ol ──────────────────────────────── */ .ck-comment-list .children { margin-top: 0; padding-left: 1.5rem; border-left: 2px solid var(--clr-border); margin-left: 1.5rem; width: 100%; } /* Remove bottom border from last child inside nested list */ .children>.ck-comment:last-child { border-bottom: none; } /* ── "No comments" message ─────────────────────────────────────────────────── */ .ck-no-comments { text-align: center; padding: 3rem 1rem; color: var(--clr-text-muted); font-family: var(--font-ui); font-size: 0.95rem; border: 1px dashed var(--clr-border); border-radius: var(--radius-sm); margin-bottom: 2rem; } /* ── Comment pagination ────────────────────────────────────────────────────── */ .ck-comment-pagination { display: flex; justify-content: center; gap: 0.5rem; margin: 1.5rem 0 2.5rem; } .ck-comment-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 0.6rem; font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500; color: var(--clr-text-muted); border: 1px solid var(--clr-border); text-decoration: none; border-radius: var(--radius-sm); transition: border-color 0.2s, color 0.2s, background 0.2s; } .ck-comment-pagination .page-numbers:hover { border-color: var(--clr-primary); color: var(--clr-primary); } .ck-comment-pagination .page-numbers.current { background: var(--clr-primary); color: var(--clr-primary-text); border-color: var(--clr-primary); font-weight: 700; } /* ── Comment Form Layout ───────────────────────────────────────────────────── */ .ck-comment-wrap { margin-bottom: 1rem; padding-bottom: 3rem; border-bottom: 1px solid var(--clr-border); order: 1; } .ck-comment-form-col { width: 100%; } /* WP comment_form() wrapper */ #respond { width: 100%; } #reply-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--clr-text); margin-bottom: 1.2rem; display: block; } #reply-title small { font-size: 0.8rem; font-weight: 400; margin-left: 0.75rem; } #reply-title small a { color: var(--clr-text-dim); font-family: var(--font-ui); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s; } #reply-title small a:hover { color: var(--clr-primary); } /* Form note (required fields) */ .ck-form-note { font-family: var(--font-ui); font-size: 0.78rem; color: var(--clr-text-dim); margin-bottom: 1rem; } /* ── Form fields grid ───────────────────────────────────────────────────────── */ #commentform { display: flex; flex-direction: column; gap: 1rem; } .comment-form-author, .comment-form-email, .comment-form-url, .comment-form-comment { margin: 0; position: relative; } /* Field icon (SVG prefix) */ .ck-field-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; color: var(--clr-text-dim); pointer-events: none; z-index: 1; } /* Inputs */ #commentform input[type="text"], #commentform input[type="email"], #commentform input[type="url"] { width: 100%; padding: 0.75rem 1rem 0.75rem 2.5rem; font-family: var(--font-ui); font-size: 0.9rem; color: var(--clr-text); background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); outline: none; transition: border-color 0.2s, box-shadow 0.2s; } #commentform input[type="text"]::placeholder, #commentform input[type="email"]::placeholder, #commentform input[type="url"]::placeholder { color: var(--clr-text-dim); } #commentform input[type="text"]:focus, #commentform input[type="email"]:focus, #commentform input[type="url"]:focus { border-color: var(--clr-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-primary) 15%, transparent); } /* Textarea */ #commentform textarea#comment { width: 100%; padding: 0.85rem 1rem; font-family: var(--font-ui); font-size: 0.9rem; color: var(--clr-text); background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); resize: vertical; min-height: 130px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; line-height: 1.6; } #commentform textarea#comment::placeholder { color: var(--clr-text-dim); } #commentform textarea#comment:focus { border-color: var(--clr-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-primary) 15%, transparent); } /* Cookies consent checkbox */ .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; } .comment-form-cookies-consent input[type="checkbox"] { margin-top: 2px; accent-color: var(--clr-primary); flex-shrink: 0; } .comment-form-cookies-consent label { font-family: var(--font-ui); font-size: 0.78rem; color: var(--clr-text-muted); line-height: 1.5; cursor: pointer; } /* Submit button */ .form-submit { margin: 0; } #commentform .submit, #commentform button[type="submit"] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: var(--clr-primary); color: var(--clr-primary-text); font-family: var(--font-ui); font-size: 0.9rem; font-weight: 700; border: none; border-radius: var(--radius-sm); cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; transition: background 0.2s, transform 0.15s; } #commentform .submit:hover, #commentform button[type="submit"]:hover { background: var(--clr-primary-dark); transform: translateY(-1px); } /* ── Name + email two-column on wider screens ───────────────────────────────── */ @media (min-width: 600px) { .comment-form-author-email-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } } /* ── Responsive nested comments ─────────────────────────────────────────────── */ @media (max-width: 600px) { .ck-comment-list .children { padding-left: 0.75rem; margin-left: 0.75rem; } .ck-discussion { padding-inline: var(--sp-4); } .ck-comment__header { flex-direction: column; align-items: flex-start; gap: 0.2rem; } } /* ── Dark mode tweaks ───────────────────────────────────────────────────────── */ [data-theme="dark"] .ck-comment__avatar img { border-color: var(--clr-border); } [data-theme="dark"] #commentform input[type="text"], [data-theme="dark"] #commentform input[type="email"], [data-theme="dark"] #commentform input[type="url"], [data-theme="dark"] #commentform textarea#comment { background: var(--clr-surface-alt); } [data-theme="dark"] .ck-comment__moderation { background: var(--clr-surface-alt); } /* ============================================================================= ANTIGRAVITY TYPOGRAPHY & LAYOUT ENHANCEMENTS ============================================================================= */ /* Color & Contrast Enhancements */ :root { --clr-bg: #fafbfa; --clr-surface: #ffffff; --clr-surface-alt: #f1f3e9; --clr-text: #12140d; --clr-text-muted: #2d3126; --clr-text-dim: #6d7560; --clr-border: #e2e5d8; --clr-border-dim: rgba(226, 229, 216, 0.5); } [data-theme="dark"] { --clr-bg: #0b0c09; --clr-surface: #12150e; --clr-surface-alt: #181d13; --clr-text: #e9ece3; --clr-text-muted: #a3ab95; --clr-text-dim: #6d7560; --clr-border: #242a19; --clr-border-dim: rgba(36, 42, 25, 0.5); } /* 1. Featured Image — Post Section Size */ .ck-post-featured-image { width: 100%; margin-bottom: var(--sp-6); border-radius: 12px; overflow: hidden; border: 1px solid var(--clr-border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); aspect-ratio: 16 / 9; } .ck-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .ck-post-featured-image:hover img { transform: scale(1.02); } /* 1.5. TL;DR Section Callout Box */ .ck-tldr { background: var(--clr-surface-alt); border-left: 4px solid var(--clr-primary); border-radius: 0 12px 12px 0; padding: 1.5rem 1.75rem; margin-bottom: 2.5rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02); position: relative; overflow: hidden; } [data-theme="dark"] .ck-tldr { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } /* Subtle glow badge in corner */ .ck-tldr::after { content: 'TL;DR'; position: absolute; top: 0.5rem; right: 0.75rem; font-family: var(--font-mono); font-size: 2.2rem; font-weight: 900; color: var(--clr-text); opacity: 0.08; pointer-events: none; user-select: none; letter-spacing: -0.05em; } [data-theme="dark"] .ck-tldr::after { opacity: 0.03; } .ck-tldr__header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; } .ck-tldr__icon { color: var(--clr-primary-dark); font-size: 1.35rem; display: inline-flex; align-items: center; } [data-theme="dark"] .ck-tldr__icon { color: var(--clr-primary); } .ck-tldr__title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--clr-text); } .ck-tldr__content { font-family: var(--font-ui); font-size: 0.98rem; line-height: 1.65; color: var(--clr-text-muted); } /* Overriding list styles inside TL;DR content block */ .ck-tldr__content p { margin-bottom: 0.75rem !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; } .ck-tldr__content p:last-child { margin-bottom: 0 !important; } .ck-tldr__content ul, .ck-tldr__content ol { margin: 0.75rem 0 !important; padding-left: 1.5rem !important; display: flex !important; flex-direction: column !important; gap: var(--sp-2) !important; list-style-position: outside !important; } .ck-tldr__content ul { list-style-type: disc !important; } .ck-tldr__content ol { list-style-type: decimal !important; } .ck-tldr__content li { font-size: inherit !important; line-height: inherit !important; color: inherit !important; padding-left: 0.25rem !important; position: static !important; } /* Disable the theme's custom lists ::before circular dots inside TL;DR */ .ck-tldr__content ul li::before, .ck-tldr__content ol li::before { display: none !important; } /* 2. Key Highlights / Summary Box */ .ck-key-highlights { /* background: var(--clr-surface-alt); */ border: 1px solid var(--clr-primary); border-radius: 12px; padding: 1.5rem; padding-top: 0; margin-bottom: 2.5rem; position: relative; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02); } .ck-key-highlights__header { display: flex; align-items: center; gap: 0.5rem; margin-top: -1rem; margin-bottom: 1rem; padding: 0 0.75rem 0 0.75rem; width: fit-content; background: var(--clr-bg); } .ck-key-highlights ul { padding: 0; } .ck-key-highlights__icon { color: var(--clr-primary-dark); font-size: 1.5rem; } [data-theme="dark"] .ck-key-highlights__icon { color: var(--clr-primary); } .ck-key-highlights__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--clr-text); } .ck-key-highlights__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.75rem; } .ck-key-highlights__list { margin-bottom: 0 !important; } @media (min-width: 768px) { .ck-key-highlights__list { grid-template-columns: 1fr 1fr; gap: 1rem; } } .ck-highlights-item { transition: opacity 0.3s ease, transform 0.3s ease; } .ck-highlights-item--hidden { display: none; opacity: 0; transform: translateY(8px); } .ck-highlights-link { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; color: var(--clr-text-muted); font-family: var(--font-ui); font-size: 0.95rem; font-weight: 500; line-height: 1.4; transition: all 0.25s ease; height: 100%; } .ck-highlights-link:hover { border-color: var(--clr-primary-dark); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); color: var(--clr-text); } [data-theme="dark"] .ck-highlights-link:hover { border-color: var(--clr-primary); box-shadow: 0 4px 12px rgba(183, 236, 52, 0.1); } .ck-highlights-num { font-family: var(--font-mono); font-size: 0.85rem; color: var(--clr-primary-dark); font-weight: 700; background: var(--clr-surface-alt); padding: 2px 6px; border-radius: 4px; line-height: 1; } [data-theme="dark"] .ck-highlights-num { color: var(--clr-primary); } .ck-key-highlights__toggle-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--clr-surface); border: 1px solid var(--clr-border); color: var(--clr-text-muted); font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 20px; cursor: pointer; transition: all 0.2s ease; margin-inline: auto; margin-top: 1.2rem; } .ck-key-highlights__toggle-btn:hover { background: var(--clr-surface-alt); color: var(--clr-text); border-color: var(--clr-text-dim); } /* Expanded highlights state */ .ck-key-highlights.is-expanded .ck-highlights-item--hidden { display: block; opacity: 1; transform: translateY(0); } /* Remove default entry-content list bullets from highlights */ .ck-key-highlights__list li { padding-left: 0 !important; } .ck-key-highlights__list li::before { display: none !important; } /* 5. Google News & Google Preferred Source Buttons */ .ck-google-follow-box { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 12px; padding: 1.5rem; margin: 2.5rem 0; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02); } .ck-google-follow-box__buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .ck-google-btn { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600; border-radius: 8px; border: 1px solid var(--clr-border); color: var(--clr-text) !important; background: var(--clr-surface-alt); transition: all 0.25s ease; cursor: pointer; text-decoration: none !important; } .ck-google-btn:hover { text-decoration: none !important; } .ck-google-btn--gnews:hover { border-color: #4285f4; background: #4285f4; color: #ffffff !important; box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3); } .ck-google-btn--preferred:hover { border-color: #ea4335; background: #ea4335; color: #ffffff !important; box-shadow: 0 4px 15px rgba(234, 67, 53, 0.3); } .ck-google-btn__logo { width: 20px; height: 20px; flex-shrink: 0; } .ck-google-btn__icon { font-size: 1.25rem; flex-shrink: 0; } /* 6. Link Contrast Visibility */ .ck-entry-content a:not(.ck-sidebar-social-item):not(.ck-google-btn):not(.ck-highlights-link) { color: #5f8500 !important; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(95, 133, 0, 0.3); text-underline-offset: 3px; transition: all 0.2s ease; } .ck-entry-content a:not(.ck-sidebar-social-item):not(.ck-google-btn):not(.ck-highlights-link):hover { color: #2d3e00 !important; text-decoration-color: #2d3e00; } [data-theme="dark"] .ck-entry-content a:not(.ck-sidebar-social-item):not(.ck-google-btn):not(.ck-highlights-link) { color: var(--clr-primary) !important; text-decoration-color: rgba(183, 236, 52, 0.3); text-decoration: underline; } [data-theme="dark"] .ck-entry-content a:not(.ck-sidebar-social-item):not(.ck-google-btn):not(.ck-highlights-link):hover { color: var(--clr-primary-dark) !important; text-decoration-color: var(--clr-primary-dark); } /* 7. Typography professionalization and mobile adjustments */ /* .ck-entry-content p { font-family: var(--font-ui); font-size: clamp(1.05rem, 2.5vw, 1.125rem); line-height: 1.8; color: var(--clr-text-muted); margin-bottom: 1.75rem; } */ .ck-art-hero__title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; color: var(--clr-text); margin-bottom: 1.5rem; } .ck-art-hero__date-updated { color: #5f8500; font-weight: 600; } [data-theme="dark"] .ck-art-hero__date-updated { color: var(--clr-primary); }