/* ============================================================ STYLESHEET ============================================================ */
/* ============================================================
1. CSS VARIABLES — CHANGE YOUR COLORS & FONTS HERE
============================================================ */
:root {
/* --- Color Palette ---
To change the site's colors, edit the values below.
All other color references in this file use these variables. */
--color-bg: #0e0d0c; /* Main background — near black with warm tone */
--color-bg-raised: #161412; /* Slightly lighter panels/cards */
--color-bg-border: #2a2622; /* Subtle borders between sections */
--color-text: #e8e0d0; /* Primary text — warm cream/parchment */
--color-text-muted: #8a7f72; /* Secondary/quiet text */
--color-text-faint: #4a433b; /* Very quiet — placeholders, dividers */
--color-accent: #8b1a1a; /* Primary accent — deep blood red */
--color-accent-bright: #c0392b; /* Hover state / brighter red */
--color-accent-gold: #b8966a; /* Secondary accent — aged gold */
--color-accent-gold-bright: #d4aa7d; /* Gold hover */
/* --- Typography ---
Change font names here. If you pick a new Google Font,
also update the in each HTML file's . */
--font-display: 'Playfair Display', Georgia, serif; /* Headlines, title */
--font-body: 'Lora', Georgia, serif; /* Body text, descriptions */
--font-ui: 'Cormorant Garamond', Georgia, serif; /* Nav, buttons, UI labels */
/* --- Spacing & Layout ---
Controls how wide content goes and padding sizes */
--max-width: 1100px; /* Maximum content width */
--section-padding: 5rem; /* Vertical padding for major sections */
--gutter: 2rem; /* Horizontal page padding */
/* --- Decorative ---
The horizontal rule / ornamental divider style */
--rule-color: #3a332a;
}
/* ============================================================
2. RESET & BASE STYLES
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}
body {
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: 1.0625rem; /* ~17px — slightly larger for readability */
line-height: 1.75;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
img {
max-width: 100%;
display: block;
}
a {
color: var(--color-accent-gold);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--color-accent-gold-bright);
}
/* Centered content wrapper — used on every page */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--gutter);
}
/* Ornamental horizontal rule — used between sections */
.ornament {
text-align: center;
color: var(--color-accent);
font-size: 1.2rem;
letter-spacing: 0.5em;
margin: 3rem 0;
opacity: 0.6;
}
/* ============================================================
3. TYPOGRAPHY
============================================================ */
/* Page/section titles */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.2;
color: var(--color-text);
}
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); } /* clamp() = responsive size */
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
h4 { font-size: 1.1rem; letter-spacing: 0.05em; }
/* Small section label above headings (e.g. "— Latest News —") */
.section-label {
font-family: var(--font-ui);
font-size: 0.75rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--color-accent-gold);
display: block;
margin-bottom: 0.75rem;
}
p {
margin-bottom: 1.25rem;
color: var(--color-text);
}
/* Muted / secondary paragraph text */
.text-muted {
color: var(--color-text-muted);
font-size: 0.95rem;
}
/* ============================================================
4. NAVIGATION
============================================================ */
.site-nav {
position: sticky; /* Sticks to top when scrolling */
top: 0;
z-index: 100;
background-color: rgba(14, 13, 12, 0.95); /* Slightly transparent bg */
backdrop-filter: blur(8px); /* Frosted glass effect */
border-bottom: 1px solid var(--color-bg-border);
}
.nav-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
height: 4rem;
}
/* Site name / logo in nav */
.nav-logo {
font-family: var(--font-display);
font-size: 1.1rem;
font-style: italic;
color: var(--color-text);
text-decoration: none;
letter-spacing: 0.03em;
}
.nav-logo:hover {
color: var(--color-accent-gold);
}
/* Nav links list */
.nav-links {
display: flex;
list-style: none;
gap: 2.5rem;
}
.nav-links a {
font-family: var(--font-ui);
font-size: 0.8rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-text-muted);
text-decoration: none;
transition: color 0.2s ease;
position: relative;
padding-bottom: 2px;
}
/* Underline animation on nav hover */
.nav-links a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: var(--color-accent);
transition: width 0.3s ease;
}
.nav-links a:hover {
color: var(--color-text);
}
.nav-links a:hover::after,
.nav-links a.active::after {
width: 100%;
}
.nav-links a.active {
color: var(--color-text);
}
/* Hamburger menu button — hidden on desktop, shown on mobile */
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.nav-toggle span {
display: block;
width: 24px;
height: 1.5px;
background: var(--color-text);
transition: all 0.3s ease;
}
/* ============================================================
5. BUTTONS
============================================================ */
/* Primary button — red/accent */
.btn {
display: inline-block;
font-family: var(--font-ui);
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 0.75rem 2rem;
border: 1px solid var(--color-accent);
color: var(--color-text);
background: transparent;
cursor: pointer;
text-decoration: none;
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn:hover {
background: var(--color-accent);
color: var(--color-text);
border-color: var(--color-accent);
}
/* Gold/secondary button variant */
.btn-gold {
border-color: var(--color-accent-gold);
color: var(--color-accent-gold);
}
.btn-gold:hover {
background: var(--color-accent-gold);
color: var(--color-bg);
border-color: var(--color-accent-gold);
}
/* Filled / solid button */
.btn-solid {
background: var(--color-accent);
color: var(--color-text);
}
.btn-solid:hover {
background: var(--color-accent-bright);
border-color: var(--color-accent-bright);
}
/* ============================================================
6. FOOTER
============================================================ */
.site-footer {
border-top: 1px solid var(--color-bg-border);
padding: 3rem var(--gutter);
text-align: center;
margin-top: 6rem;
}
.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
}
.footer-name {
font-family: var(--font-display);
font-size: 1.3rem;
font-style: italic;
color: var(--color-text-muted);
margin-bottom: 0.5rem;
}
.footer-links {
display: flex;
justify-content: center;
gap: 2rem;
list-style: none;
margin: 1rem 0;
}
.footer-links a {
font-family: var(--font-ui);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-text-faint);
}
.footer-links a:hover {
color: var(--color-text-muted);
}
.footer-copy {
font-size: 0.75rem;
color: var(--color-text-faint);
margin-top: 1rem;
}
/* ============================================================
7. HOMEPAGE — index.html
============================================================ */
/* Hero / Banner section */
.hero {
min-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
padding: 4rem var(--gutter);
}
/* Background texture overlay for hero
To use a real background image, add: background-image: url('your-image.jpg');
to the .hero-bg rule below and remove the gradient */
.hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 60%, rgba(139, 26, 26, 0.12) 0%, transparent 65%),
radial-gradient(ellipse at 20% 20%, rgba(184, 150, 106, 0.05) 0%, transparent 50%);
z-index: 0;
}
/* Decorative vertical lines on hero sides */
.hero-bg::before,
.hero-bg::after {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
width: 1px;
background: linear-gradient(to bottom, transparent, var(--color-bg-border), transparent);
}
.hero-bg::before { left: 4rem; }
.hero-bg::after { right: 4rem; }
.hero-content {
position: relative;
z-index: 1;
max-width: 800px;
}
/* Kat Oresnik headline */
.hero-title {
font-size: clamp(3rem, 8vw, 6rem);
line-height: 1.05;
margin-bottom: 1rem;
letter-spacing: -0.01em;
}
/* Red accent on part of the name — wrap a around a word */
.accent { color: var(--color-accent); }
.accent-gold { color: var(--color-accent-gold); }
.hero-tagline {
font-family: var(--font-ui);
font-size: 0.85rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 2.5rem;
}
.hero-cta {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* News & Updates section on homepage */
.news-section {
padding: var(--section-padding) 0;
border-top: 1px solid var(--color-bg-border);
}
.news-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
margin-top: 2.5rem;
}
/* Individual news card */
.news-card {
background: var(--color-bg-raised);
border: 1px solid var(--color-bg-border);
padding: 1.75rem;
position: relative;
transition: border-color 0.3s ease;
}
.news-card:hover {
border-color: var(--color-accent);
}
/* Red top border on news card */
.news-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--color-accent);
opacity: 0;
transition: opacity 0.3s ease;
}
.news-card:hover::before {
opacity: 1;
}
.news-date {
font-family: var(--font-ui);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-accent-gold);
margin-bottom: 0.5rem;
}
.news-card h3 {
font-size: 1.15rem;
margin-bottom: 0.75rem;
}
.news-card p {
font-size: 0.9rem;
color: var(--color-text-muted);
line-height: 1.6;
}
/* Featured/querying status banner */
.status-banner {
background: var(--color-bg-raised);
border: 1px solid var(--color-bg-border);
border-left: 3px solid var(--color-accent-gold);
padding: 1.5rem 2rem;
margin: 3rem 0;
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.status-banner .label {
font-family: var(--font-ui);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-accent-gold);
white-space: nowrap;
}
.status-banner p {
margin: 0;
font-size: 0.95rem;
color: var(--color-text-muted);
}
/* ============================================================
8. NOVELS PAGE — novels.html
============================================================ */
/* Page header banner used on interior pages */
.page-header {
padding: 5rem var(--gutter) 3rem;
text-align: center;
border-bottom: 1px solid var(--color-bg-border);
position: relative;
}
.page-header::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 100%, rgba(139, 26, 26, 0.08) 0%, transparent 60%);
}
.page-header h1,
.page-header p {
position: relative;
z-index: 1;
}
.page-header p {
color: var(--color-text-muted);
max-width: 600px;
margin: 0.75rem auto 0;
}
/* Genre section heading */
.genre-section {
padding: var(--section-padding) 0 2rem;
}
.genre-label {
font-family: var(--font-ui);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-accent);
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2.5rem;
}
/* Horizontal line extending from genre label */
.genre-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--color-bg-border);
}
/* Grid of book cards */
.books-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
/* Individual book card */
.book-card {
background: var(--color-bg-raised);
border: 1px solid var(--color-bg-border);
display: flex;
flex-direction: column;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.book-card:hover {
border-color: var(--color-accent-gold);
transform: translateY(-4px); /* Subtle lift on hover */
}
/* Book cover image area
If you have a cover image, put it in an ![]()
tag here.
If no image, this placeholder will show. */
.book-cover {
aspect-ratio: 2 / 3; /* Standard book cover ratio */
background: var(--color-bg);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
max-height: 150px;
border-bottom: 1px solid var(--color-bg-border);
}
/* Placeholder graphic when no cover image is available */
.book-cover-placeholder {
text-align: center;
padding: 2rem;
}
.book-cover-placeholder .cover-title {
font-family: var(--font-display);
font-size: 1.3rem;
line-height: 1.3;
color: var(--color-text-muted);
font-style: italic;
}
/* Decorative spine line on placeholder */
.book-cover-placeholder::before {
content: '';
display: block;
width: 1px;
height: 3rem;
background: var(--color-accent);
margin: 0 auto 1rem;
}
.book-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.book-info {
padding: 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.book-genre-tag {
font-family: var(--font-ui);
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-accent-gold);
margin-bottom: 0.5rem;
}
.book-title {
font-size: 1.2rem;
margin-bottom: 0.75rem;
}
.book-desc {
font-size: 0.9rem;
color: var(--color-text-muted);
line-height: 1.65;
flex: 1;
margin-bottom: 1.25rem;
}
.book-card .btn {
align-self: flex-start;
font-size: 0.7rem;
padding: 0.6rem 1.5rem;
}
/* ============================================================
9. INDIVIDUAL BOOK PAGE — book-template.html
============================================================ */
.book-detail {
padding: var(--section-padding) 0;
}
.book-detail-inner {
display: grid;
grid-template-columns: 280px 1fr;
gap: 4rem;
align-items: start;
}
.book-detail-cover {
aspect-ratio: 2 / 3;
background: var(--color-bg-raised);
border: 1px solid var(--color-bg-border);
display: flex;
align-items: center;
justify-content: center;
position: sticky; /* Cover sticks as you scroll through the description */
top: 6rem;
}
.book-detail-content h1 {
margin-bottom: 0.5rem;
}
.book-meta {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
margin: 1.25rem 0 2rem;
}
/* Small metadata pill (Genre, Status, etc.) */
.book-meta-item {
font-family: var(--font-ui);
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-muted);
border: 1px solid var(--color-bg-border);
padding: 0.35rem 0.75rem;
}
.book-meta-item span {
color: var(--color-accent-gold);
}
.book-synopsis {
font-size: 1.05rem;
line-height: 1.85;
color: var(--color-text);
}
.book-synopsis p {
margin-bottom: 1.5rem;
}
/* Pull quote / tagline block inside book detail */
.book-pull-quote {
border-left: 2px solid var(--color-accent);
padding-left: 1.5rem;
margin: 2.5rem 0;
font-style: italic;
font-size: 1.1rem;
color: var(--color-text-muted);
}
/* ============================================================
10. ABOUT PAGE — about.html
============================================================ */
.about-section {
padding: var(--section-padding) 0;
}
.about-inner {
display: grid;
grid-template-columns: 340px 1fr;
gap: 5rem;
align-items: start;
}
.about-photo-wrap {
position: sticky;
top: 6rem;
}
/* Author photo frame */
.about-photo {
width: 100%;
aspect-ratio: 3 / 4; /* Portrait orientation — adjust if needed */
object-fit: cover;
object-position: top; /* Crop from top — keeps face visible */
border: 1px solid var(--color-bg-border);
display: block;
}
/* Placeholder when no photo yet */
.about-photo-placeholder {
width: 100%;
aspect-ratio: 3 / 4;
background: var(--color-bg-raised);
border: 1px solid var(--color-bg-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-faint);
font-family: var(--font-ui);
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.about-bio h2 {
margin-bottom: 0.5rem;
}
.about-bio .section-label {
margin-bottom: 1.5rem;
}
.about-bio p {
font-size: 1.05rem;
line-height: 1.85;
color: var(--color-text);
margin-bottom: 1.5rem;
}
/* Credential tags below bio */
.about-credentials {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 2.5rem;
}
.credential-tag {
font-family: var(--font-ui);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
border: 1px solid var(--color-bg-border);
padding: 0.4rem 0.9rem;
}
/* ============================================================
11. CONTACT PAGE — contact.html
============================================================ */
.contact-section {
padding: var(--section-padding) 0;
}
.contact-inner {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 5rem;
align-items: start;
}
.contact-intro h2 {
margin-bottom: 1rem;
}
.contact-intro p {
color: var(--color-text-muted);
line-height: 1.8;
margin-bottom: 1.5rem;
}
/* Social media link buttons */
.social-links {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 2rem;
}
.social-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.85rem 1.25rem;
border: 1px solid var(--color-bg-border);
background: var(--color-bg-raised);
color: var(--color-text-muted);
text-decoration: none;
font-family: var(--font-ui);
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: border-color 0.25s, color 0.25s;
}
.social-link:hover {
border-color: var(--color-accent-gold);
color: var(--color-accent-gold);
}
/* Small icon area for social links — uses text/emoji icons
Replace with SVG icons if you prefer */
.social-link .icon {
font-size: 1.1rem;
width: 1.5rem;
text-align: center;
}
/* Contact form (Formspree-compatible) */
.contact-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.form-group label {
font-family: var(--font-ui);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.form-group input,
.form-group textarea,
.form-group select {
background: var(--color-bg-raised);
border: 1px solid var(--color-bg-border);
color: var(--color-text);
font-family: var(--font-body);
font-size: 0.95rem;
padding: 0.85rem 1rem;
outline: none;
transition: border-color 0.25s ease;
width: 100%;
/* Remove default browser styles */
-webkit-appearance: none;
border-radius: 0;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--color-text-faint);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color: var(--color-accent-gold);
}
.form-group textarea {
min-height: 160px;
resize: vertical; /* Allow vertical resize only */
}
/* Form submit button — full width */
.form-submit {
width: 100%;
padding: 1rem;
font-size: 0.8rem;
text-align: center;
}
/* ============================================================
12. ANIMATIONS
============================================================ */
/* Fade-in animation — applied to elements on page load */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeInUp 0.8s ease forwards;
}
/* Staggered delays — add class to create cascade effect */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.55s; }
/* ============================================================
13. RESPONSIVE / MOBILE STYLES
============================================================
These rules override the desktop styles for smaller screens.
Breakpoints:
- 900px: Tablets (stack two-column layouts)
- 640px: Mobile phones (smaller text, condensed nav)
============================================================ */
@media (max-width: 900px) {
:root {
--section-padding: 3.5rem;
}
/* Stack about page to single column */
.about-inner {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.about-photo-wrap {
position: static;
max-width: 280px;
}
/* Stack book detail page */
.book-detail-inner {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.book-detail-cover {
position: static;
max-width: 240px;
}
/* Stack contact page */
.contact-inner {
grid-template-columns: 1fr;
gap: 3rem;
}
}
@media (max-width: 640px) {
:root {
--gutter: 1.25rem;
--section-padding: 2.5rem;
}
/* Show hamburger, hide nav links by default */
.nav-toggle {
display: flex;
}
.nav-links {
display: none;
position: absolute;
top: 4rem;
left: 0;
right: 0;
background: var(--color-bg);
border-bottom: 1px solid var(--color-bg-border);
flex-direction: column;
gap: 0;
padding: 1rem 0;
}
/* When nav is open (toggled by JS), show links */
.nav-links.open {
display: flex;
}
.nav-links li {
padding: 0.75rem var(--gutter);
border-bottom: 1px solid var(--color-bg-border);
}
.nav-links a::after {
display: none; /* Remove underline animation on mobile */
}
.hero-bg::before,
.hero-bg::after {
display: none; /* Remove decorative lines on mobile */
}
.hero-cta {
flex-direction: column;
align-items: center;
}
.hero-cta .btn {
width: 100%;
text-align: center;
}
.books-grid {
grid-template-columns: 1fr;
}
.news-grid {
grid-template-columns: 1fr;
}
.status-banner {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.footer-links {
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
/* Book detail — full width cover on mobile */
.book-detail-cover {
max-width: 100%;
aspect-ratio: 2 / 3;
max-height: 320px;
}
}