/*
Prehistoric Cave Aesthetic — neocities.css
Inspired by Lascaux cave paintings: ochres, charcoals, hand-stencils, animal glyphs.
Drop this into /style.css on Neocities and link it from your pages.
Optional font ideas (host yourself / link in ):
- Headings: "Cormorant Garamond", "EB Garamond", or "Unna"
- Body: "Literata", "Merriweather" or system serif
Example snippet (if using Google Fonts):
*/
:root {
/* Earth pigments */
--ochre-50: #f6efdf;
--ochre-100: #efe2c7;
--ochre-200: #e3cf9f;
--ochre-300: #d4b676;
--ochre-400: #c59b52;
--ochre-500: #b27f35; /* main */
--ochre-600: #97672b;
--ochre-700: #7a5223;
--charcoal-100: #dcd9d3;
--charcoal-300: #a39e95;
--charcoal-500: #6a645b;
--charcoal-700: #3e3a33; /* text on light */
--charcoal-900: #171511; /* deep text */
--hematite: #6b2f27; /* deep red-brown */
--chalk: #fffaf0; /* warm light */
--bg-rock: var(--ochre-50);
--text: var(--charcoal-900);
--muted: var(--charcoal-500);
--accent: var(--ochre-500);
--accent-ink: var(--hematite);
--radius-xl: 1.25rem;
--radius-l: 1rem;
--radius: .75rem;
--maxw: 72ch;
--shadow-soft: 0 10px 20px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.06);
--shadow-deep: 0 30px 60px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark) {
:root {
--bg-rock: #1a1713;
--text: #efe8dc;
--muted: #b9b2a6;
--accent: #c59b52;
--accent-ink: #e7b07a;
--charcoal-700: #efe8dc;
}
}
/* Base reset with gentle serif typesetting */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--text);
background:
/* grain */
radial-gradient(1000px 600px at 10% -10%, rgba(255,255,255,.06), transparent 60%),
radial-gradient(1200px 800px at 110% 10%, rgba(0,0,0,.06), transparent 60%),
linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,0) 10%, rgba(0,0,0,.04) 100%),
var(--bg-rock);
background-attachment: fixed, fixed, scroll, scroll;
font-family: "Literata", "Merriweather", Georgia, serif;
line-height: 1.6;
font-size: 17px;
}
main, .container {
max-width: var(--maxw);
padding: 2.5rem 1.25rem 4rem;
margin: 0 auto;
}
/* Headings—pigmenty, slightly irregular */
h1, h2, h3, h4, h5, h6 {
font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
letter-spacing: .02em;
line-height: 1.1;
margin: 0 0 .75rem 0;
color: var(--charcoal-700);
text-shadow: .5px .5px 0 rgba(0,0,0,.05);
}
h1 { font-size: clamp(2.2rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
p { margin: 0 0 1rem 0; }
/* Cave-wall underline for links */
a {
color: var(--accent-ink);
text-decoration: none;
background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
transition: background-size .25s ease, color .25s ease, text-shadow .25s ease;
}
a:hover, a:focus {
background-size: 100% 2px;
text-shadow: 0 0 .01px currentColor; /* crisp edge */
}
a:focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; }
/* Navigation with chipped-stone tabs */
.nav {
display: flex; gap: .5rem; flex-wrap: wrap;
margin: 1rem 0 2rem; align-items: center;
}
.nav a {
padding: .5rem .9rem;
border-radius: .6rem;
background: linear-gradient(180deg, var(--ochre-200), var(--ochre-100));
box-shadow: var(--shadow-soft);
position: relative;
}
.nav a::after {
content: "";
position: absolute; inset: 0;
/* irregular edge using SVG border-image */
border: 10px solid transparent;
border-image: url("data:image/svg+xml;utf8,") 30 round;
border-image-outset: 1;
pointer-events: none;
}
/* Panels / cards with cave margins */
.panel-rock {
background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.35)), var(--ochre-100);
color: var(--text);
padding: 1.25rem;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-soft);
border: 2px solid rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
.panel-rock {
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)), #241f19;
border-color: rgba(255,255,255,.05);
}
}
/* Buttons with pigment press */
.btn {
--btn-bg: var(--accent);
--btn-ink: #2b2218;
border: none;
background: linear-gradient(180deg, color-mix(in oklab, var(--btn-bg), white 12%), var(--btn-bg));
color: var(--btn-ink);
padding: .6rem 1rem;
border-radius: .8rem;
font-weight: 600;
letter-spacing: .02em;
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, var(--shadow-soft);
cursor: pointer;
transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
}
.btn:hover { filter: saturate(1.05) contrast(1.02); }
.btn:active { transform: translateY(1px); box-shadow: 0 0 0 rgba(0,0,0,0); }
.btn-ink { --btn-bg: var(--hematite); color: var(--chalk); }
.btn-charcoal { --btn-bg: var(--charcoal-700); color: var(--chalk); }
/* Figure styles: captions like wall notes */
figure { margin: 1.5rem 0; }
figure img, .img-rock {
display: block; width: 100%; height: auto;
border-radius: var(--radius-l);
box-shadow: var(--shadow-soft);
}
figcaption {
font-size: .95rem; color: var(--muted);
margin-top: .5rem;
padding-left: .5rem;
border-left: 3px solid var(--accent);
}
/* Horizontal rule like pigment dot-lines */
hr {
border: none; height: 14px; margin: 2rem 0;
background:
repeating-radial-gradient(circle at 0 50%, var(--accent) 0 2px, transparent 3px 16px),
repeating-radial-gradient(circle at 100% 50%, var(--accent) 0 2px, transparent 3px 16px),
linear-gradient(90deg, transparent, var(--muted), transparent);
mask: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
/* Hand-stencil style pull quote */
blockquote {
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 1.15rem;
background: linear-gradient(180deg, rgba(197,155,82,.15), rgba(197,155,82,.05));
padding: 1rem 1.25rem;
border-left: 10px solid var(--accent);
border-radius: 0 var(--radius) var(--radius) 0;
box-shadow: var(--shadow-soft);
}
blockquote cite { display: block; color: var(--muted); font-style: normal; margin-top: .25rem; }
/* Lists with ochre markers */
ul { padding-left: 1.2rem; }
ul li { margin: .3rem 0; }
li::marker { color: var(--accent); }
/* Footer / small text */
.small, small { color: var(--muted); font-size: .9rem; }
/* Accessibility: visible focus */
:focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; }
/* Image gallery grid reminiscent of panel sequences */
.gallery {
display: grid; gap: .75rem;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.gallery a, .gallery figure { margin: 0; }
/* Hero header with petroglyph motif (pure CSS)
Add class="hero" to a section */
.hero {
border-radius: var(--radius-xl);
padding: 2.5rem 1.5rem;
color: var(--charcoal-700);
background:
/* subtle glyph silhouettes */
radial-gradient(40px 16px at 10% 30%, rgba(123, 82, 35, .08), transparent 80%),
radial-gradient(60px 24px at 60% 70%, rgba(107, 47, 39, .07), transparent 80%),
radial-gradient(28px 12px at 85% 25%, rgba(178, 127, 53, .08), transparent 80%),
linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.2)),
linear-gradient(180deg, var(--ochre-200), var(--ochre-100));
box-shadow: var(--shadow-deep);
}
/* Table styling like notes on the wall */
table { width: 100%; border-collapse: collapse; border-spacing: 0; margin: 1rem 0 1.5rem; }
th, td { text-align: left; padding: .6rem .5rem; }
th { color: var(--charcoal-700); font-weight: 700; }
tr { border-bottom: 1px dashed rgba(0,0,0,.15); }
@media (prefers-color-scheme: dark) {
tr { border-color: rgba(255,255,255,.18); }
}
/* Utility classes to sprinkle pigmenty vibe */
.smudge {
background: radial-gradient(60% 40% at 30% 40%, rgba(0,0,0,.05), transparent 60%),
radial-gradient(50% 30% at 70% 60%, rgba(0,0,0,.05), transparent 60%);
border-radius: var(--radius);
}
.pigment { color: var(--accent-ink); }
/* Layout helpers */
.stack > * + * { margin-top: var(--stack, 1rem); }
.cluster { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.center { margin-inline: auto; }
/* Footer motif band: add */
.frieze {
height: 26px; margin: 2.5rem 0 0;
background:
repeating-linear-gradient(90deg,
transparent 0 14px,
rgba(123, 82, 35, .16) 14px 15px,
transparent 15px 28px,
rgba(178, 127, 53, .14) 28px 29px
),
linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,0));
border-radius: var(--radius);
}
/* Code blocks (if you post snippets) */
pre, code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
pre {
background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
padding: 1rem; border-radius: var(--radius);
overflow: auto;
}
/* Responsive tweaks */
@media (max-width: 640px) {
body { font-size: 16px; }
.nav { gap: .4rem; }
.hero { padding: 1.6rem 1rem; }
}
/* Example semantic hooks you can use in HTML:
*/