/*
Theme Name: Caldor 1996
Theme URI: https://caldor.com/
Author: Caldor Webmaster
Author URI: mailto:webmaster@caldor.com
Description: A FULLY GROOVY ## ULTIMATE ## retail homepage experience straight from 1996. Best viewed in Netscape Navigator 4.0 at 800x600. Brought to you by the Caldor Web Team (TM). NO FRAMES VERSION coming soon!!!
Version: 1.0
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: caldor-1996
Tags: retro, geocities, woocommerce, full-site-experience, blinking, marquee
*/
/* ============================================================
COLOR PALETTE (web safe, baby!)
============================================================ */
:root {
/* Font system -- readable on screen, still period-appropriate */
--caldor-font-body: Verdana, "Lucida Grande", Tahoma, "Helvetica Neue", Arial, sans-serif;
--caldor-font-head: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, "Helvetica Neue", Arial, sans-serif;
--caldor-font-display: "Impact", "Arial Black", "Helvetica Neue", Arial, sans-serif;
--caldor-font-mono: "Courier New", Courier, monospace;
/* Caldor rainbow palette -- warm rust, brick, cocoa, cream */
--caldor-rust: #d9531e;
--caldor-brick: #a82914;
--caldor-cocoa: #5a3a28;
--caldor-cream: #f4e8d4;
--caldor-sun: #f0b542;
/* 90s web-safe accents still in use */
--bg-deep: #2a1810;
--bg-tile: #f0b542;
--neon-green: #00ff00;
--hot-red: #d9531e;
--sale-yellow: #f0b542;
--link-blue: #1a3a8b;
--visited-purple: #5a3a28;
--chrome-light: #ffffff;
--chrome-dark: #808080;
}
/* ============================================================
GLOBAL RESET-ISH (we don't believe in resets here, it's 1996)
============================================================ */
html, body {
margin: 0;
padding: 0;
font-family: "Times New Roman", Times, serif;
font-size: 17px;
line-height: 1.55;
color: #1a1208;
background-color: #2a1810;
/* Tiled sand/linen texture: noise grain + warm sparkles */
background-image:
url("data:image/svg+xml;utf8,"),
radial-gradient(circle at 18% 22%, rgba(240,181,66,0.45) 0 1px, transparent 2px),
radial-gradient(circle at 72% 78%, rgba(244,232,212,0.35) 0 1px, transparent 2px),
radial-gradient(circle at 42% 88%, rgba(217,83,30,0.35) 0 1px, transparent 2px);
background-size: 160px 160px, 140px 140px, 180px 180px, 220px 220px;
background-attachment: fixed;
cursor: url("data:image/svg+xml;utf8,") 0 0, auto;
}
/* Mobile / touch perf -- the `fixed` background and animated SVGs tank scroll FPS on iOS */
@media (max-width: 900px) {
html, body { background-attachment: scroll; }
.caldor-page { box-shadow: 0 0 0 2px var(--caldor-cocoa); }
body { cursor: auto; }
}
@media (max-width: 720px) {
/* Slow / pause heavy animations to save battery + scroll FPS */
hr.caldor-rainbow { animation: none; }
.caldor-marquee span { animation-duration: 32s; }
.caldor-onsale { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* ============================================================
MAIN PAGE FRAME -- the classic centered table layout
============================================================ */
.caldor-page {
position: relative;
z-index: 1;
width: min(1080px, 94vw);
margin: 18px auto;
background: var(--caldor-cream);
border: 4px ridge var(--caldor-rust);
box-shadow:
0 0 0 2px var(--caldor-cocoa),
0 0 24px 4px rgba(217, 83, 30, 0.5);
padding: 0;
}
body.caldor-focused .caldor-page { width: min(1240px, 94vw); }
.caldor-page-inner {
background-color: #fdfaf3;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
border: 3px inset #b89866;
margin: 6px;
padding: 18px 22px 22px 22px;
}
.caldor-main p,
.caldor-main li,
.caldor-entry p,
.caldor-entry li,
.caldor-main { color: #111111; }
.caldor-main .caldor-entry,
.caldor-main article {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 17px;
line-height: 1.6;
color: #111;
}
/* ============================================================
HEADINGS -- Comic Sans because we have CULTURE
============================================================ */
h1, h2, h3, h4, h5, h6,
.caldor-headline {
font-family: "Comic Sans MS", "Comic Sans", "Marker Felt", "Trebuchet MS", cursive, sans-serif;
text-align: center;
margin: 0.3em 0;
line-height: 1.15;
}
h1, .caldor-h1 {
font-size: 36px;
color: var(--caldor-brick);
text-shadow:
2px 2px 0 var(--caldor-sun),
3px 3px 0 var(--caldor-cocoa);
letter-spacing: 1px;
}
h2 { font-size: 26px; color: var(--caldor-cocoa); text-shadow: 1px 1px 0 var(--caldor-sun); }
h3 { font-size: 20px; color: var(--caldor-brick); }
h4 { font-size: 18px; color: var(--caldor-rust); }
h5 { font-size: 16px; color: var(--caldor-cocoa); }
h6 { font-size: 14px; color: var(--caldor-cocoa); }
/* ============================================================
TEXT, LINKS, RULES
============================================================ */
p { margin: 0.6em 0; line-height: 1.5; }
a:link { color: var(--link-blue); text-decoration: underline; }
a:visited { color: var(--visited-purple); }
a:hover { color: var(--hot-red); background: #ffff66; text-decoration: underline overline; }
a:active { color: #00aa00; }
hr.caldor-rainbow {
border: 0;
height: 6px;
margin: 14px 0;
background: linear-gradient(90deg,
#ff0000 0%, #ff8000 14%, #ffff00 28%, #00ff00 42%,
#00ffff 57%, #0000ff 71%, #8000ff 85%, #ff00ff 100%);
background-size: 200% 100%;
animation: caldor-rainbow-shift 3s linear infinite;
box-shadow: 0 0 4px rgba(255,255,255,0.7);
}
@keyframes caldor-rainbow-shift {
from { background-position: 0% 0; }
to { background-position: 200% 0; }
}
hr.caldor-bevel {
border: 0;
height: 4px;
background: #c0c0c0;
border-top: 2px solid #fff;
border-bottom: 2px solid #404040;
margin: 12px 0;
}
/* ============================================================
BLINK polyfill class -- because the