/* ═══════════════════════════════════════════════════════════
Rad-Sphere — CRIMSON THEME (white / red / black)
───────────────────────────────────────────────────────────
Additive override layer. Load AFTER style.css:
Deleting this one restores the original teal/paper
look exactly. Nothing in style.css is modified.
Colours sampled from branding/59885.png + 59887.png:
wordmark red #E20708 sphere crimson #B1191D
wordmark black #020101 tile white #F4F4F5
═══════════════════════════════════════════════════════════ */
:root {
--paper: #fbfbfc; /* was warm cream */
--ink: #0b0b0c; /* was warm black */
--muted: #6b6b72; /* 5.1:1 on paper */
--accent: #d8151c; /* 5.0:1 on paper */
--border: rgba(11,11,12,0.10);
--card: rgba(255,255,255,0.72);
/* theme-only tokens */
--accent-deep: #b1191d; /* sphere crimson, for hovers/depth */
--accent-bright:#ff3a3f; /* red on black surfaces */
--accent-wash: rgba(216,21,28,0.06);
--accent-line: rgba(216,21,28,0.28);
--carbon: #0b0b0c; /* dark section ground */
--carbon-soft: #16161a;
}
/* ── Ground: cool grid + a faint red bloom ── */
body::before {
background:
radial-gradient(circle at 50% 42%, rgba(216,21,28,0.05), transparent 68%),
radial-gradient(circle, rgba(11,11,12,0.07) 1px, transparent 1.4px) 0 0 / 28px 28px;
}
/* ── Chrome bar ── */
.chrome-bar.top { background: rgba(255,255,255,0.9); }
.chrome-bar.top.scrolled { box-shadow: 0 1px 0 var(--border), 0 8px 28px rgba(11,11,12,0.05); }
.chrome-logo .dot { background: var(--accent); }
@keyframes logo-pulse {
0%,100% { box-shadow: 0 0 0 0 rgba(216,21,28,0.45); }
50% { box-shadow: 0 0 0 10px rgba(216,21,28,0); }
}
.chrome-cta { background: var(--accent); color: #fff !important; }
.chrome-cta:hover { background: var(--ink); color: #fff !important; }
.chrome-links a.active { color: var(--accent); }
@media (max-width: 768px) {
.chrome-links { background: rgba(255,255,255,0.97); }
}
/* ── Hero furniture ── */
.hero-rings .ring { border-color: rgba(216,21,28,0.18); }
.hero-rings .ring:nth-child(2) { border-color: rgba(11,11,12,0.10); }
.hero-rings .ring:nth-child(3) { border-color: rgba(216,21,28,0.14); }
.hero-rings .ring:nth-child(4) { border-color: rgba(11,11,12,0.06); }
.hero-dot { background: var(--accent); }
@keyframes pulse {
0%,100% { box-shadow: 0 0 0 0 rgba(216,21,28,0.45); transform: translate(-50%,-50%) scale(1); }
50% { box-shadow: 0 0 0 16px rgba(216,21,28,0); transform: translate(-50%,-50%) scale(1.2); }
}
.hero-media::after {
background: linear-gradient(100deg, var(--paper) 0%, rgba(251,251,252,0.55) 40%, rgba(216,21,28,0.10) 100%);
}
/* ── Buttons ── */
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover {
background: var(--ink); color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(216,21,28,0.28);
}
.btn-ghost { border-color: rgba(11,11,12,0.22); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
/* ── Cards ── */
.card { border-radius: 4px; }
.card:hover { border-color: var(--accent-line); box-shadow: 0 10px 34px rgba(11,11,12,0.07); }
/* left rule that fills in on hover — the red is the only chroma on the page */
.card { position: relative; overflow: hidden; }
.card::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 2px; background: var(--accent);
transform: scaleY(0); transform-origin: top;
transition: transform 0.35s ease;
}
.card:hover::before { transform: scaleY(1); }
.card.has-media::before { z-index: 3; }
/* ── Misc accents ── */
.feature-visual { background: var(--accent-wash); }
.team-avatar { background: var(--accent-wash); }
.plate.marked::after { background: linear-gradient(var(--accent), var(--accent)); }
.form-group input, .form-group textarea, .form-group select { background: #fff; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(216,21,28,0.12);
}
/* ── Photo plates: monochrome with a crimson cast ──
Multiplying red over a bright grayscale turns the whole frame pink. A `color`
blend at low opacity instead keeps the photograph black-and-white and only
warms it — so the UI red stays the one true red on the page. */
.plate { background: #e6e6ea; }
/* Photographs stay in colour. A whisper of warm multiply keeps them feeling
like one set without draining the life out of clinical imagery. */
.plate img { filter: saturate(1.04) contrast(1.02); }
.plate::after { background: var(--accent); mix-blend-mode: multiply; opacity: 0.05; }
.plate::before { opacity: 0; }
.plate:hover img { filter: saturate(1.12) contrast(1.03); }
/* ── Dark band: black ground, red type ── */
.media-band { border-color: transparent; }
.media-band > img { filter: saturate(0.95) contrast(1.05) brightness(0.9); }
.media-band::before {
background:
radial-gradient(circle at 50% 0%, rgba(216,21,28,0.30), transparent 62%),
linear-gradient(180deg, rgba(11,11,12,0.92), rgba(11,11,12,0.96));
}
.media-band .overline { color: var(--accent-bright); }
.media-band .stats .stat-num { color: var(--accent-bright); }
/* ═══════════════════════════════════════════════════════════
NEW COMPONENTS (theme-only — no equivalent in style.css)
═══════════════════════════════════════════════════════════ */
/* ── Logo lockup: cropped sphere mark + wordmark ── */
.chrome-logo .mark {
width: 26px; height: 26px;
display: block;
flex-shrink: 0;
filter: drop-shadow(0 1px 2px rgba(11,11,12,0.18));
}
.chrome-logo .word b { color: var(--accent); font-weight: 600; }
/* ── Section on carbon ── */
.section-dark {
background: var(--carbon);
color: #fff;
position: relative;
isolation: isolate;
}
.section-dark::before {
content: '';
position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(circle at 22% 18%, rgba(216,21,28,0.22), transparent 55%),
radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1.4px) 0 0 / 28px 28px;
}
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p, .section-dark .muted { color: rgba(255,255,255,0.62); }
.section-dark .overline { color: var(--accent-bright); }
.section-dark .card {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.10);
backdrop-filter: none;
}
.section-dark .card:hover { border-color: rgba(255,58,63,0.45); box-shadow: none; }
.section-dark .card::before { background: var(--accent-bright); }
.section-dark .card p { color: rgba(255,255,255,0.6); }
.section-dark .card-num { color: var(--accent-bright); }
.section-dark .stat-num { color: #fff; }
.section-dark .stat-label { color: rgba(255,255,255,0.5); }
.section-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.28); }
.section-dark .btn-ghost:hover { border-color: var(--accent-bright); color: var(--accent-bright); background: rgba(216,21,28,0.10); }
.section-dark .feature-list li { border-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.62); }
.section-dark .feature-list .check { color: var(--accent-bright); }
/* ── Hero sphere stage (canvas-rendered vector sphere) ── */
.sphere-stage {
position: absolute;
left: 50%; top: 50%;
width: min(46vh, 46vw); height: min(46vh, 46vw);
transform: translate(-50%,-50%);
pointer-events: none;
z-index: 2;
display: grid;
place-items: center;
}
.sphere-stage canvas, .sphere-stage img {
width: 100%; height: 100%;
display: block;
animation: sphere-float 9s ease-in-out infinite;
}
.sphere-stage::after { /* red ground-glow beneath the mark */
content: '';
position: absolute; inset: -14%;
z-index: -1;
background: radial-gradient(circle, rgba(216,21,28,0.20), transparent 62%);
animation: sphere-halo 5.5s ease-in-out infinite;
}
@keyframes sphere-float { 0%,100% { transform: translateY(-8px); } 50% { transform: translateY(8px); } }
@keyframes sphere-halo { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
/* right-anchored variant, so hero copy keeps the left column */
.sphere-stage.right { left: auto; right: 4vw; transform: translateY(-50%); }
@media (max-width: 900px) {
.sphere-stage.right { left: 50%; right: auto; transform: translate(-50%,-50%); opacity: 0.16; }
}
/* ── Static sphere mark used inline in copy/cards ── */
.sphere-inline {
width: 100%; max-width: 360px; height: auto;
display: block; margin: 0 auto;
filter: drop-shadow(0 18px 36px rgba(11,11,12,0.22));
}
.section-dark .sphere-inline { filter: drop-shadow(0 18px 40px rgba(216,21,28,0.35)); }
/* ── Swatch strip (theme-test page only) ── */
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.swatch { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.swatch .chip { height: 72px; display: block; }
.swatch .meta { padding: 10px 12px; font: 500 9px/1.6 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.swatch .meta b { display: block; color: var(--ink); letter-spacing: 0.1em; }
@media (max-width: 800px) { .swatches { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .swatches { grid-template-columns: repeat(2, 1fr); } }
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
.sphere-stage canvas, .sphere-stage img, .sphere-stage::after { animation: none; }
}