/* ============================================================
UNIVRS DESIGN SYSTEM — canonical shared stylesheet
Source of truth: shine.univrs.io (unified with tarot.univrs.io
and imagine.univrs.io). Near-black, warm gold, teal vignette,
Cinzel + Cormorant Garamond, animated grain.
Master copy: ~/sepah/.claude/design/univrs-design-system.css
Each site keeps its own copy at css/univrs-design-system.css.
Plan: ~/sepah/.claude/plans/univrs-design-unification.md
Font import (add to of every page):
============================================================ */
:root {
/* Backgrounds */
--bg: #080808;
--bg-soft: #0f0f0c;
--bg-card: #0c0c0a;
/* Gold */
--gold: #e8c25a;
--gold-bright: #f4d77c;
--gold-dim: #b9a06c;
--gold-dark: #7a6a32;
/* Text */
--text: #f3ecd8;
--text-dim: #d4cab0;
--text-muted: #9a907a;
/* Accents */
--teal-glow: rgba(20, 60, 60, 0.3);
--oxblood: #5a1320;
/* Borders & shadow */
--border: rgba(232, 194, 90, 0.22);
--border-dim: rgba(232, 194, 90, 0.10);
--shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85);
/* Typography */
--serif: 'Cormorant Garamond', 'Iowan Old Style', Garamond, serif;
--display: 'Cinzel Decorative', 'Cinzel', serif;
--label: 'Cinzel', 'Cormorant Garamond', serif;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--serif);
font-size: 18px;
line-height: 1.7;
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid var(--border-dim);
transition: border-color .2s ease;
}
a:hover {
border-bottom-color: var(--gold);
}
em {
font-style: italic;
color: var(--text);
}
h1, h2, h3 {
font-family: var(--display);
color: var(--gold);
font-weight: 400;
line-height: 1.2;
}
h4, h5, h6 {
font-family: var(--label);
color: var(--gold-dim);
text-transform: uppercase;
letter-spacing: .12em;
}
/* ---------- ambient layers ---------- */
.grain-overlay {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
animation: grain 8s steps(10) infinite;
pointer-events: none;
z-index: 1;
opacity: .5;
}
.vignette {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse at 30% 20%, rgba(20, 60, 60, .3) 0%, transparent 60%),
radial-gradient(ellipse at 70% 80%, rgba(10, 40, 40, .2) 0%, transparent 50%);
}
/* ---------- utilities ---------- */
.gold-border {
border: 1px solid var(--border);
}
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: 0 0 30px rgba(232, 194, 90, 0.08);
}
.eyebrow {
font-family: var(--label);
font-size: .8rem;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--gold-dim);
}
/* ---------- keyframes ---------- */
@keyframes grain {
0%, 100% { transform: translate(0, 0); }
10% { transform: translate(-5%, -10%); }
30% { transform: translate(3%, -15%); }
50% { transform: translate(-8%, 5%); }
70% { transform: translate(8%, 10%); }
90% { transform: translate(-3%, 8%); }
}
@keyframes glow {
0%, 100% { text-shadow: 0 0 20px rgba(232, 194, 90, .25); }
50% { text-shadow: 0 0 40px rgba(232, 194, 90, .55), 0 0 80px rgba(232, 194, 90, .2); }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Shamsa / sun rotation: animation: spin 220s linear infinite; */
@keyframes sunPulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.3); }
}
/* Breathing glow: animation: sunPulse 9s ease-in-out infinite; */
@keyframes fadepulse {
0%, 100% { opacity: .6; }
50% { opacity: 1; }
}
@keyframes rise {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}