/* ==========================================================================
Eizil Personal — Main Stylesheet
========================================================================== */
/* --------------------------------------------------------------------------
1. CSS Custom Properties
-------------------------------------------------------------------------- */
:root {
--ink: #0f0f0f;
--ink-2: #3a3a3a;
--ink-3: #888;
--paper: #f8f6f1;
--paper-2: #f0ede6;
--rule: #ddd9d0;
--accent: #1a3c2e;
--accent-2: #2d6a4f;
--accent-warm: #c8a96e;
--accent-pale: #e8f5ee;
--max-width: 660px;
--font-serif: 'Playfair Display', Georgia, serif;
--font-body: 'Instrument Serif', Georgia, serif;
--font-sans: 'Instrument Sans', sans-serif;
}
/* --------------------------------------------------------------------------
2. Reset & Base
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 18px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
line-height: 1.75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
cursor: none;
}
/* Grain texture overlay */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 1000;
opacity: 0.5;
}
img,
video {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
}
ul,
ol {
list-style: none;
}
button,
input,
textarea,
select {
font: inherit;
}
/* --------------------------------------------------------------------------
3. Custom Cursor
-------------------------------------------------------------------------- */
.cursor {
position: fixed;
width: 8px;
height: 8px;
background: var(--accent);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transition: transform 0.15s ease;
transform: translate(-50%, -50%);
}
.cursor-ring {
position: fixed;
width: 32px;
height: 32px;
border: 1px solid var(--accent);
border-radius: 50%;
pointer-events: none;
z-index: 9998;
transition: width 0.3s ease, height 0.3s ease, opacity 0.3s;
transform: translate(-50%, -50%);
opacity: 0.5;
}
/* --------------------------------------------------------------------------
4. Reading Progress Bar
-------------------------------------------------------------------------- */
.reading-progress {
position: fixed;
top: 0;
left: 0;
height: 2px;
background: var(--accent-warm);
z-index: 200;
width: 0%;
transition: width 0.1s linear;
}
/* --------------------------------------------------------------------------
5. Site Header
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--paper);
border-bottom: 1px solid var(--rule);
padding: 0 2rem;
}
.site-header__inner {
max-width: var(--max-width);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
height: 56px;
}
.site-logo {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 700;
color: var(--ink);
text-decoration: none;
letter-spacing: -0.03em;
position: relative;
}
.site-logo::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: var(--accent-warm);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.site-logo:hover::after {
transform: scaleX(1);
}
/* Primary Navigation
wp_nav_menu() outputs:
Our fallback eizil_fallback_menu() outputs bare tags.
We style both cases below.
*/
.primary-nav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 0;
}
/* The