/* ===== EBN Redesign: theappgap.com ===== */
/* Direction: Precision & Clarity | Foundation: Neutral (zinc) | Depth: flat-surface */
:root {
--ebn-foreground: #18181b;
--ebn-secondary: #52525b;
--ebn-muted: #a1a1aa;
--ebn-faint: #e4e4e7;
--ebn-accent: #6366f1;
--ebn-accent-hover: #4f46e5;
--ebn-bg_canvas: #fafafa;
--ebn-bg_surface: #ffffff;
--ebn-bg_surface_alt: #f4f4f5;
--ebn-border: #d4d4d8;
--ebn-border_light: #e4e4e7;
--ebn-radius: 8px;
--ebn-radius_sm: 4px;
--ebn-radius_lg: 12px;
--ebn-shadow: 0 1px 3px rgba(24,24,27,0.06);
--ebn-shadow_md: 0 4px 16px rgba(24,24,27,0.08);
--ebn-font_display: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
--ebn-font_body: -apple-system, 'Segoe UI', system-ui, sans-serif;
--ebn-font_mono: 'SF Mono', 'Fira Code', monospace;
}
/* ===== Global Reset ===== */
body {
background-color: var(--ebn-bg_canvas);
color: var(--ebn-foreground);
font-family: var(--ebn-font_body);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
/* ===== Site Container ===== */
.site,
#page,
.hfeed,
.wrapper {
background-color: var(--ebn-bg_surface);
border-radius: var(--ebn-radius_lg);
box-shadow: var(--ebn-shadow_md);
max-width: 960px;
margin: 2rem auto;
padding: 2rem;
overflow: hidden;
}
/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .site-title,
.widget-title, .comments-title {
color: var(--ebn-foreground);
font-family: var(--ebn-font_display);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
}
h1, .entry-title {
font-size: 2rem;
margin-bottom: 0.75rem;
}
h2 {
font-size: 1.5rem;
margin-bottom: 0.625rem;
}
h3 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
p {
margin-bottom: 1.25rem;
color: var(--ebn-secondary);
}
a {
color: var(--ebn-accent);
text-decoration: none;
transition: color 0.2s ease, text-decoration 0.2s ease;
}
a:hover {
color: var(--ebn-accent-hover);
text-decoration: underline;
}
/* ===== Header ===== */
.site-header,
#masthead,
header {
background-color: var(--ebn-bg_surface);
border-bottom: 2px solid var(--ebn-border_light);
padding: 1.5rem 0;
margin-bottom: 2rem;
}
.site-title a,
.site-title {
font-family: var(--ebn-font_display);
font-size: 1.75rem;
font-weight: 700;
color: var(--ebn-foreground);
}
.site-description {
color: var(--ebn-muted);
font-size: 0.9rem;
font-style: italic;
}
/* ===== Navigation ===== */
.main-navigation,
nav.main-navigation {
background-color: var(--ebn-bg_surface_alt);
border-radius: var(--ebn-radius);
padding: 0.5rem 1rem;
margin: 1rem 0;
}
.main-navigation a,
nav a {
color: var(--ebn-secondary);
font-weight: 500;
padding: 0.5rem 0.75rem;
border-radius: var(--ebn-radius_sm);
transition: background-color 0.2s, color 0.2s;
}
.main-navigation a:hover,
nav a:hover {
background-color: var(--ebn-faint);
color: var(--ebn-accent);
}
.main-navigation .current_page_item > a {
color: var(--ebn-accent);
font-weight: 700;
}
/* ===== Content Area ===== */
.site-content,
#content,
.hfeed {
background-color: var(--ebn-bg_surface);
}
.entry-content,
article .entry-content {
font-size: 1.05rem;
line-height: 1.8;
color: var(--ebn-secondary);
}
.entry-content p {
margin-bottom: 1.25rem;
}
/* ===== Post Cards ===== */
article.post,
article.page,
.hentry {
background-color: var(--ebn-bg_surface);
border: 1px solid var(--ebn-border_light);
border-radius: var(--ebn-radius);
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: var(--ebn-shadow);
transition: box-shadow 0.2s ease;
}
article.post:hover,
article.page:hover {
box-shadow: var(--ebn-shadow_md);
}
/* ===== Post Meta ===== */
.entry-meta,
.entry-utility,
.posted-on,
.byline {
color: var(--ebn-muted);
font-size: 0.85rem;
margin-bottom: 0.75rem;
}
.entry-meta a,
.byline a {
color: var(--ebn-accent);
}
/* ===== Read More ===== */
.more-link,
.read-more {
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 1.25rem;
background-color: var(--ebn-accent);
color: #ffffff;
border-radius: var(--ebn-radius);
font-weight: 600;
font-size: 0.9rem;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.more-link:hover,
.read-more:hover {
background-color: var(--ebn-accent-hover);
color: #ffffff;
text-decoration: none;
transform: translateY(-1px);
}
/* ===== Sidebar / Widgets ===== */
.widget-area,
#secondary,
aside {
background-color: var(--ebn-bg_surface_alt);
border-radius: var(--ebn-radius);
padding: 1.5rem;
}
.widget {
background-color: var(--ebn-bg_surface);
border: 1px solid var(--ebn-border_light);
border-radius: var(--ebn-radius);
padding: 1.25rem;
margin-bottom: 1.5rem;
box-shadow: var(--ebn-shadow);
}
.widget-title {
font-size: 1rem;
font-weight: 700;
color: var(--ebn-foreground);
border-bottom: 2px solid var(--ebn-accent);
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
/* ===== Blockquotes ===== */
blockquote,
.wp-block-quote {
border-left: 4px solid var(--ebn-accent);
background-color: var(--ebn-bg_surface_alt);
padding: 1rem 1.5rem;
margin: 1.5rem 0;
border-radius: 0 var(--ebn-radius_sm) var(--ebn-radius_sm) 0;
font-style: italic;
color: var(--ebn-secondary);
}
blockquote p,
.wp-block-quote p {
margin-bottom: 0;
}
/* ===== Code Blocks ===== */
code,
pre,
.wp-block-code {
background-color: var(--ebn-bg_surface_alt);
border: 1px solid var(--ebn-border_light);
border-radius: var(--ebn-radius_sm);
font-family: var(--ebn-font_mono);
font-size: 0.9rem;
}
pre {
padding: 1rem;
overflow-x: auto;
}
code {
padding: 0.15rem 0.4rem;
}
/* ===== Images ===== */
img,
.wp-block-image img {
border-radius: var(--ebn-radius);
max-width: 100%;
height: auto;
}
.wp-caption,
.wp-block-image {
margin: 1.5rem 0;
}
/* ===== Buttons ===== */
button,
input[type="submit"],
.wp-block-button__link {
background-color: var(--ebn-accent);
color: #ffffff;
border: none;
border-radius: var(--ebn-radius_sm);
padding: 0.625rem 1.5rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
background-color: var(--ebn-accent-hover);
transform: translateY(-1px);
}
/* ===== Forms ===== */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea,
select {
border: 1px solid var(--ebn-border);
border-radius: var(--ebn-radius_sm);
padding: 0.5rem 0.75rem;
font-family: var(--ebn-font_body);
font-size: 0.95rem;
background-color: var(--ebn-bg_surface);
color: var(--ebn-foreground);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--ebn-accent);
box-shadow: 0 0 0 3px var(--ebn-faint);
outline: none;
}
/* ===== Footer ===== */
.site-footer,
#colophon,
footer {
background-color: var(--ebn-bg_surface_alt);
color: var(--ebn-muted);
border-top: 1px solid var(--ebn-border_light);
padding: 1.5rem;
border-radius: 0 0 var(--ebn-radius_lg) var(--ebn-radius_lg);
font-size: 0.85rem;
text-align: center;
}
.site-footer a {
color: var(--ebn-secondary);
}
.site-footer a:hover {
color: var(--ebn-accent);
}
/* ===== Comments ===== */
.comment,
.comment-body {
background-color: var(--ebn-bg_surface);
border: 1px solid var(--ebn-border_light);
border-radius: var(--ebn-radius);
padding: 1rem 1.25rem;
margin-bottom: 1rem;
}
.comment-author {
font-weight: 700;
color: var(--ebn-foreground);
}
.comment-meta {
font-size: 0.8rem;
color: var(--ebn-muted);
}
/* ===== Pagination ===== */
.nav-links,
.pagination {
display: flex;
gap: 0.5rem;
justify-content: center;
margin: 2rem 0;
}
.nav-links a,
.page-numbers {
display: inline-block;
padding: 0.375rem 0.875rem;
border: 1px solid var(--ebn-border);
border-radius: var(--ebn-radius_sm);
color: var(--ebn-secondary);
font-size: 0.9rem;
transition: all 0.2s ease;
}
.nav-links a:hover,
.page-numbers:hover,
.page-numbers.current {
background-color: var(--ebn-accent);
color: #ffffff;
border-color: var(--ebn-accent);
}
/* ===== Scrollbar (Webkit) ===== */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--ebn-bg_canvas);
}
::-webkit-scrollbar-thumb {
background: var(--ebn-border);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--ebn-muted);
}
/* ===== Selection ===== */
::selection {
background-color: var(--ebn-accent);
color: #ffffff;
}
/* ===== Accessibility ===== */
:focus-visible {
outline: 2px solid var(--ebn-accent);
outline-offset: 2px;
}
/* ===== Responsive ===== */
@media (max-width: 768px) {
.site,
#page {
margin: 0;
border-radius: 0;
padding: 1rem;
}
h1, .entry-title {
font-size: 1.5rem;
}
.widget-area {
margin-top: 2rem;
}
}