/* ══════════════════════════════════════════════════════════════════
SGS GLOBAL DESIGN STANDARD — Shear Genius Society
Version: 1.0 — Feb 2026
──────────────────────────────────────────────────────────────────
THIS IS THE SINGLE SOURCE OF TRUTH for all colors, fonts, and
spacing across the entire SGS platform.
HOW TO USE:
Add this line in the of every HTML file BEFORE any other CSS:
For game files deep in /assets/games/:
RULES:
1. NEVER hardcode a color value in any page CSS — use variables
2. NEVER set font-size below 0.78rem for any readable text
3. NEVER set text opacity below 0.80 — use the muted variables instead
4. Chrome gradient on headings ONLY — not body text
5. All body/desc/label text uses --text-body, --text-muted, or --text-dim
══════════════════════════════════════════════════════════════════ */
/* ── Google Fonts ─────────────────────────────────────────────── */
/* Google Fonts loaded via tags in HTML — no @import needed */
/* ══════════════════════════════════════════════════════════════════
DESIGN TOKENS — Colors
══════════════════════════════════════════════════════════════════ */
:root {
/* ── Backgrounds — Near-black neutral grey ─────────────────── */
--bg-black: #080808; /* True near-black — page base */
--bg-near: #0E0E0E; /* Near-black — most page backgrounds */
--bg-dark: #151515; /* Cards, panels — dark charcoal */
--bg-dark2: #1C1C1C; /* Elevated cards — lighter charcoal */
--bg-dark3: #242424; /* Hover states */
--bg-surface: rgba(220,220,220,0.03); /* Subtle neutral surface lift */
--bg-purple-glow: #1A1A1A; /* Deprecated — neutral grey */
/* ── Text Colors — MINIMUM 0.85 opacity on dark bg ──────────── */
--text-white: #FFFFFF; /* Headers, primary CTAs */
--text-body: #EFEFEF; /* ALL body/paragraph text */
--text-muted: #E8E8E8; /* Descriptions, secondary text */
--text-dim: #D8D8D8; /* Hints, captions, fine print */
--text-faint: #C8C8C8; /* Decorative / placeholder */
/* ── Chrome / Platinum (headings only) ──────────────────────── */
--chrome-gradient: linear-gradient(135deg, #D8D8D8 0%, #ffffff 20%, #E8E8E8 40%, #C8C8C8 60%, #ffffff 80%, #D8D8D8 100%);
--platinum: #E8E8E8;
--platinum-dim: rgba(220,220,220,0.88); /* Eyebrow labels */
/* ── Accent — Jade Green ────────────────────────────────────── */
--accent: #00A878; /* Primary jade green */
--accent-light: #00C98E; /* Hover / highlight jade */
--accent-dim: #008F66; /* Subdued / pressed jade */
--accent-soft: rgba(0,168,120,0.12); /* Subtle jade tint for backgrounds */
--accent-glow: rgba(0,168,120,0.25); /* Jade glow for shadows/effects */
--accent-border: rgba(0,168,120,0.30); /* Jade-tinted borders */
/* ── Brand Colors — legacy (kept for backwards compat) ─────── */
--brand-red: #C8C8C8;
--brand-red-soft: rgba(200,200,200,0.15);
--brand-gold: #C8C8C8;
--brand-gold-soft:rgba(200,200,200,0.15);
--brand-pink: #C8C8C8;
--brand-pink-soft:rgba(200,200,200,0.15);
--brand-green: var(--accent);
--brand-blue: #A0A0A0;
/* ── Borders ─────────────────────────────────────────────────── */
--border-faint: rgba(210,210,210,0.08);
--border-soft: rgba(210,210,210,0.12);
--border-mid: rgba(220,220,220,0.20);
--border-strong: rgba(228,228,228,0.35);
/* ── Shadows & Glows ─────────────────────────────────────────── */
--glow-platinum: rgba(220,220,220,0.7);
--glow-gold: rgba(210,210,210,0.4);
/* ── Legacy aliases (backwards compat — prefer new names) ────── */
--black: var(--bg-black);
--near-black: var(--bg-near);
--dark: var(--bg-dark);
--white: var(--text-white);
--silver: var(--text-body);
--silver-light: var(--text-white);
--silver-dark: var(--text-dim);
--muted: var(--text-muted);
--muted-soft: var(--text-dim);
--border: var(--border-soft);
--border-silver: var(--border-mid);
}
/* ══════════════════════════════════════════════════════════════════
DESIGN TOKENS — Typography
══════════════════════════════════════════════════════════════════ */
:root {
/* Font families */
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Montserrat', 'Helvetica Neue', sans-serif;
/* Font sizes — NOTHING below 0.78rem for readable text */
--text-xs: 0.78rem; /* Fine print, legal, footnotes — minimum */
--text-sm: 0.85rem; /* Labels, badges, eyebrows */
--text-base: 1.0rem; /* Body text standard */
--text-md: 1.1rem; /* Slightly larger body */
--text-lg: 1.25rem; /* Subheadings */
--text-xl: 1.5rem; /* Section subheadings */
--text-2xl: 2.0rem; /* Small display */
--text-3xl: clamp(2.2rem, 5vw, 3.8rem); /* Section titles */
--text-hero: clamp(3rem, 8vw, 6rem); /* Hero headlines */
/* Line heights */
--leading-tight: 1.2;
--leading-normal: 1.6;
--leading-loose: 1.9;
/* Letter spacing */
--tracking-tight: 0.5px;
--tracking-normal: 1px;
--tracking-wide: 3px;
--tracking-widest: 5px;
}
/* ══════════════════════════════════════════════════════════════════
DESIGN TOKENS — Spacing
══════════════════════════════════════════════════════════════════ */
:root {
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 40px;
--space-xl: 60px;
--space-2xl: 80px;
--section-pad: 60px 48px;
--section-max: 1200px;
--card-pad: 28px 24px;
--btn-pad: 13px 36px;
}
/* ══════════════════════════════════════════════════════════════════
BASE RESET & BODY
══════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-family: var(--font-body);
background: var(--bg-near);
color: var(--text-body); /* #EFEFEF — always readable */
font-size: var(--text-base); /* 1.0rem base */
line-height: var(--leading-normal);
overflow-x: hidden;
}
/* ── Neutral dark top fade — site-wide ──────────────────────── */
body::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0;
height: 70vh;
background:
linear-gradient(180deg,
rgba(20,20,20,0.6) 0%,
rgba(20,20,20,0.35) 20%,
rgba(20,20,20,0.15) 45%,
transparent 100%
),
radial-gradient(ellipse 60% 40% at 20% 0%, rgba(220,220,220,0.04) 0%, transparent 60%),
radial-gradient(ellipse 50% 35% at 80% 0%, rgba(220,220,220,0.035) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
/* ══════════════════════════════════════════════════════════════════
TYPOGRAPHY STANDARDS
══════════════════════════════════════════════════════════════════ */
/* Chrome gradient — headings ONLY */
.chrome-text,
.section-title,
.hero-title,
.page-title,
.setup-title,
.board-title,
.results-title,
.legal-title,
.modal-question,
h1.chrome, h2.chrome {
background: var(--chrome-gradient);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 16px rgba(228,228,228,0.3)) drop-shadow(0 0 4px rgba(255,255,255,0.15));
animation: chromeShimmer 10s ease-in-out infinite;
}
@keyframes chromeShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Section eyebrow */
.section-eyebrow {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--platinum-dim);
margin-bottom: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.section-eyebrow::before {
content: '';
display: block;
width: 24px;
height: 1px;
background: var(--border-mid);
}
/* Section title */
.section-title {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 300;
line-height: var(--leading-tight);
margin-bottom: 16px;
letter-spacing: 1px;
text-align: center;
}
.section-title em {
font-style: italic;
color: var(--text-dim);
-webkit-text-fill-color: var(--text-dim);
}
/* Section description */
.section-desc {
color: var(--text-muted);
font-size: var(--text-base);
line-height: var(--leading-loose);
max-width: 560px;
margin: 0 auto var(--space-lg);
font-weight: 400;
letter-spacing: var(--tracking-tight);
text-align: center;
}
/* Body text — paragraphs */
p {
color: var(--text-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
}
/* Labels / hints */
.form-hint,
.card-desc,
.product-desc,
.step-desc,
.shop-card-desc {
color: var(--text-muted);
font-size: var(--text-sm);
line-height: var(--leading-loose);
}
/* Fine print */
.fine-print,
.footer-fine {
color: var(--text-dim);
font-size: var(--text-xs);
line-height: var(--leading-loose);
}
/* ══════════════════════════════════════════════════════════════════
BUTTONS — Standard
══════════════════════════════════════════════════════════════════ */
.btn-primary {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
padding: var(--btn-pad);
background: transparent;
border: 1px solid var(--border-strong);
color: var(--text-white);
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
display: inline-block;
}
.btn-primary:hover {
background: rgba(228,228,228,0.08);
border-color: var(--platinum);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0,0,0,0.2), 0 0 20px rgba(228,228,228,0.06);
}
.btn-primary:active {
transform: translateY(0);
}
.btn-secondary {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
padding: var(--btn-pad);
background: transparent;
border: 1px solid var(--border-mid);
color: var(--text-dim);
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
display: inline-block;
}
.btn-secondary:hover {
border-color: var(--border-strong);
color: var(--text-body);
}
/* ══════════════════════════════════════════════════════════════════
CARDS — Standard
══════════════════════════════════════════════════════════════════ */
.card {
background: rgba(14, 14, 14, 0.5);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--border-soft);
border-radius: 8px;
padding: var(--card-pad);
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(228,228,228,0.12), transparent);
pointer-events: none;
}
.card:hover {
border-color: var(--border-mid);
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(210,210,210,0.06);
}
/* ══════════════════════════════════════════════════════════════════
FORMS — Standard
══════════════════════════════════════════════════════════════════ */
.form-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--text-body);
background: var(--bg-near);
border: 1px solid var(--border-mid);
padding: 12px 16px;
width: 100%;
outline: none;
transition: border-color 0.2s;
-webkit-appearance: none;
}
.form-input:focus,
input:focus,
textarea:focus,
select:focus {
border-color: var(--border-strong);
}
.form-label {
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: var(--tracking-normal);
color: var(--text-dim);
text-transform: uppercase;
display: block;
margin-bottom: 8px;
}
::placeholder {
color: var(--text-faint);
opacity: 1;
}
/* ══════════════════════════════════════════════════════════════════
NAVIGATION — Standard
══════════════════════════════════════════════════════════════════ */
nav a {
color: var(--text-dim);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: var(--tracking-normal);
text-decoration: none;
transition: color 0.2s;
}
nav a:hover {
color: var(--text-white);
}
/* ══════════════════════════════════════════════════════════════════
SECTIONS — Standard layout
══════════════════════════════════════════════════════════════════ */
section {
padding: var(--section-pad);
max-width: var(--section-max);
margin: 0 auto;
}
/* ══════════════════════════════════════════════════════════════════
TAGS / BADGES
══════════════════════════════════════════════════════════════════ */
.tag {
display: inline-block;
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 2px;
}
.tag-free,
.tag-gold,
.tag-rose,
.tag-silver,
.tag-red,
.tag-blue { background: rgba(220,220,220,0.08); color: var(--text-dim); border: 1px solid var(--border-mid); }
/* ══════════════════════════════════════════════════════════════════
WATERMARK / PRINT PROTECTION (carried on all pages)
══════════════════════════════════════════════════════════════════ */
@media print {
body::after {
content: 'SHEAR GENIUS SOCIETY — CONFIDENTIAL';
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
font-size: 72pt;
color: rgba(0,0,0,0.08);
font-family: var(--font-display);
pointer-events: none;
z-index: 99999;
white-space: nowrap;
}
}
/* ══════════════════════════════════════════════════════════════════
ACCESSIBILITY
══════════════════════════════════════════════════════════════════ */
:focus-visible {
outline: 2px solid var(--platinum);
outline-offset: 2px;
}
/* ══════════════════════════════════════════════════════════════════
SCROLLBAR STYLING
══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #080808; }
::-webkit-scrollbar-thumb { background: rgba(220,220,220,0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(220,220,220,0.45); }
/* ══════════════════════════════════════════════════════════════════
RESPONSIVE — Mobile
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
:root {
--section-pad: 48px 20px;
--card-pad: 20px 16px;
--text-3xl: clamp(1.8rem, 7vw, 2.8rem);
--text-hero: clamp(2.4rem, 10vw, 4rem);
}
section { padding: var(--section-pad); }
}
@media (max-width: 480px) {
:root {
--section-pad: 36px 16px;
}
}
/* ══════════════════════════════════════════════════════════════════
FOOTER — Standard single-line horizontal layout
══════════════════════════════════════════════════════════════════ */
footer {
border-top: 1px solid var(--border-soft);
padding: 24px 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
flex-wrap: wrap; /* wraps on small screens only */
text-align: center;
}
.footer-logo,
.footer-logo img {
height: 48px;
width: auto;
opacity: 0.90;
flex-shrink: 0;
}
.footer-logo-text {
font-family: var(--font-display);
font-size: 1.1rem;
letter-spacing: 4px;
background: var(--chrome-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.footer-sep {
color: var(--border-mid);
font-size: 1rem;
flex-shrink: 0;
}
.footer-copy,
.footer-note,
.footer-tagline {
font-family: var(--font-body);
font-size: 0.78rem;
color: var(--text-dim);
letter-spacing: 1.5px;
text-transform: uppercase;
line-height: 1.4;
white-space: nowrap; /* stay on one line desktop */
}
.footer-links {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
.footer-links a {
font-size: 0.78rem;
color: var(--text-dim);
text-decoration: none;
letter-spacing: 1px;
transition: color 0.2s;
}
.footer-links a:hover { color: var(--text-white); }
/* Stacked only on small screens */
@media (max-width: 600px) {
footer {
flex-direction: column;
gap: 12px;
padding: 24px 20px;
}
.footer-copy,
.footer-note,
.footer-tagline {
white-space: normal;
text-align: center;
}
}
/* ══════════════════════════════════════════════════════════════════
IMAGE PROTECTION — Global CSS Shield
Prevents save-as, drag, and long-press on all images site-wide
══════════════════════════════════════════════════════════════════ */
img {
-webkit-user-drag: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
pointer-events: auto;
}
img[src*="station-cards"],
img[src*="branding"],
img[src*="games"],
img[src*="midjourney"],
img[src*="partner"] {
pointer-events: none;
}
/* ══════════════════════════════════════════════════════════════════
MOBILE QA HARDENING (Phase 5)
- Strip sticky :hover transforms on touch devices (sgs-global sweep).
Individual pages can still declare :hover; these overrides neutralize
the transform/shadow jumps that get "stuck" after a tap on iOS.
- Add :active tap feedback on common tap targets so touch feels alive.
- Force ≥16px font on form inputs to prevent iOS auto-zoom on focus.
- <360px safety breakpoint for narrow Android devices.
══════════════════════════════════════════════════════════════════ */
@media (hover: none) {
.tool-hero:hover,
.tool-card:hover,
.product-card:hover,
.nav-card:hover,
.filter-btn:hover,
.add-btn:hover,
.btn-checkout:hover,
.btn-place-order:hover,
.cart-close:hover,
.modal-close:hover,
.footer-links a:hover {
transform: none !important;
box-shadow: none !important;
}
}
/* Touch feedback — subtle press state */
@media (hover: none) {
.tool-hero:active,
.tool-card:active,
.product-card:active,
.nav-card:active {
transform: scale(0.98) !important;
transition: transform 0.08s ease !important;
}
}
/* Prevent iOS auto-zoom when focusing inputs (must beat page-level rules) */
@media (max-width: 767px) {
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input:not([type]),
select,
textarea {
font-size: 16px !important;
}
}
/* Ultra-narrow safety net (<360px) */
@media (max-width: 360px) {
body { font-size: 0.92rem; }
h1 { font-size: 1.7rem !important; }
h2 { font-size: 1.4rem !important; }
.section-title, .page-title { font-size: 1.6rem !important; }
}
/* ═══ TOUCH & MOBILE POLISH ═══ */
@media (hover: hover) {
a:hover, button:hover { transition: all 0.2s ease; }
}
@media (hover: none) {
a:active, button:active { opacity: 0.7; transform: scale(0.98); transition: all 0.1s; }
}
/* Prevent iOS auto-zoom on form inputs */
input, select, textarea { font-size: 16px !important; }
@media (min-width: 769px) {
input, select, textarea { font-size: inherit !important; }
}
/* ══════════════════════════════════════════════════════════════════
DO NOT EDIT WITHOUT UPDATING THIS COMMENT
Last updated: Apr 2026 — Erricka Clipper, Founder
For changes: update this file ONLY, not individual page CSS
══════════════════════════════════════════════════════════════════ */