/*
* RiQ BRAND SYSTEM — riq-brand.css
* Revetti & Company | powered by RiQ
* Version: Sprint Bravo — 02-23-2026
*
* Changes from Sprint Alpha (02-21-2026):
* — .btn-ghost border: var(--border) [0.07 opacity, invisible] → var(--border-visible) [0.18]
* — .btn-back border: var(--border) [0.07 opacity, invisible] → var(--border-visible) [0.18]
* — --border-visible token added for buttons and interactive elements
* — .btn-ghost hover: added subtle background tint on hover
* — Version and date updated
*
* Import this file before any component CSS.
* All HTML tools and pages reference these tokens.
*
* Usage:
*
*/
/* ════════════════════════════════════════════════════════
GOOGLE FONTS — copy into of every HTML file
════════════════════════════════════════════════════════ */
/*
*/
/* ════════════════════════════════════════════════════════
RESET
════════════════════════════════════════════════════════ */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ════════════════════════════════════════════════════════
DESIGN TOKENS
════════════════════════════════════════════════════════ */
:root {
/* Core palette */
--navy: #0F172A; /* page background */
--deep-navy: #1A2332; /* card background, nav */
--mid-navy: #1E293B; /* section alternates, table rows */
/* Brand accents */
--cyan: #00D9FF; /* primary CTA, GWS accent, score highlight */
--teal: #2ED4BF; /* secondary CTA, M365 accent, gradient mid */
--coral: #FF6B6B; /* warning CTA, value figures */
/* Neutrals */
--soft-gray: #E8EEF2; /* body text, option labels */
--muted: #64748B; /* captions, descriptions, secondary text */
--cloud: #F1F5F9; /* headings on dark backgrounds */
--slate: #334155; /* footer disclaimer, deep muted */
/* Borders — three levels of opacity */
--border: rgba(255, 255, 255, 0.07); /* structural dividers, card edges */
--border-mid: rgba(255, 255, 255, 0.12); /* hover states, section dividers */
--border-visible: rgba(255, 255, 255, 0.18); /* buttons, inputs — actually visible on dark bg */
/* Glows */
--cyan-glow: rgba(0, 217, 255, 0.08);
--teal-glow: rgba(46, 212, 191, 0.07);
/* ── Typography ── */
--font-display: 'Syne', sans-serif; /* headers, CTAs, tier names */
--font-mono: 'DM Mono', monospace; /* labels, stats, eyebrows, badges */
--font-body: 'DM Sans', sans-serif; /* body copy, descriptions, inputs */
/* Font weights */
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-black: 800;
/* ── Spacing scale ── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* ── Border radius ── */
--radius-sm: 5px;
--radius-md: 8px;
--radius-lg: 10px;
--radius-xl: 12px;
--radius-pill: 20px;
/* ── Transitions ── */
--transition-fast: all 0.15s ease;
--transition-base: all 0.2s ease;
--transition-slow: all 0.3s ease;
/* ── Shadows ── */
--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
--shadow-cyan: 0 10px 30px rgba(0, 217, 255, 0.25);
--shadow-teal: 0 10px 30px rgba(46, 212, 191, 0.25);
}
/* ════════════════════════════════════════════════════════
BASE
════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--navy);
color: var(--soft-gray);
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ════════════════════════════════════════════════════════
TYPOGRAPHY — UTILITY CLASSES
════════════════════════════════════════════════════════ */
.t-display {
font-family: var(--font-display);
font-weight: var(--fw-black);
letter-spacing: -0.03em;
line-height: 1.08;
color: var(--cloud);
}
.t-h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
.t-h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
.t-h3 { font-size: 1.2rem; }
.t-h4 { font-size: 1rem; }
.t-eyebrow {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cyan);
}
.t-label {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.t-stat {
font-family: var(--font-display);
font-weight: var(--fw-black);
font-size: clamp(2.2rem, 5vw, 3.4rem);
letter-spacing: -0.03em;
line-height: 1;
}
.t-body { font-size: 1rem; line-height: 1.65; }
.t-body-sm { font-size: 0.88rem; line-height: 1.55; }
.t-body-xs { font-size: 0.78rem; line-height: 1.5; }
.c-cyan { color: var(--cyan); }
.c-teal { color: var(--teal); }
.c-coral { color: var(--coral); }
.c-muted { color: var(--muted); }
.c-cloud { color: var(--cloud); }
.c-soft { color: var(--soft-gray); }
/* ════════════════════════════════════════════════════════
LAYOUT
════════════════════════════════════════════════════════ */
.container {
max-width: 1080px;
margin: 0 auto;
padding: 0 32px;
}
.section { padding: 88px 0; }
.section-alt { background: var(--deep-navy); padding: 88px 0; }
.section-header { margin-bottom: 48px; }
@media (max-width: 640px) {
.container { padding: 0 20px; }
.section, .section-alt { padding: 56px 0; }
}
/* ════════════════════════════════════════════════════════
GRADIENT RULE
════════════════════════════════════════════════════════ */
.grad-rule {
height: 2px;
border: none;
background: linear-gradient(90deg, var(--cyan), var(--teal), transparent);
margin-bottom: 40px;
}
/* ════════════════════════════════════════════════════════
GRADIENT BAR — page footer stripe
════════════════════════════════════════════════════════ */
.gradient-bar {
height: 4px;
background: linear-gradient(90deg, var(--cyan), var(--teal), var(--coral));
}
/* ════════════════════════════════════════════════════════
BUTTONS
════════════════════════════════════════════════════════ */
/* Primary — cyan fill */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 28px;
background: var(--cyan);
color: var(--navy);
border: none;
border-radius: var(--radius-md);
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: var(--fw-bold);
cursor: pointer;
text-decoration: none;
transition: var(--transition-base);
white-space: nowrap;
}
.btn-primary:hover {
background: #00c4e8;
transform: translateY(-2px);
box-shadow: var(--shadow-cyan);
}
/* Secondary — teal fill */
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 28px;
background: var(--teal);
color: var(--navy);
border: none;
border-radius: var(--radius-md);
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: var(--fw-bold);
cursor: pointer;
text-decoration: none;
transition: var(--transition-base);
white-space: nowrap;
}
.btn-secondary:hover {
background: #25bfab;
transform: translateY(-2px);
box-shadow: var(--shadow-teal);
}
/* Ghost — transparent with visible border
FIXED Sprint Bravo: was var(--border) at 0.07 opacity — invisible on dark bg.
Now uses --border-visible at 0.18 opacity. */
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 24px;
background: transparent;
color: var(--soft-gray);
border: 1.5px solid var(--border-visible);
border-radius: var(--radius-md);
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: var(--fw-semibold);
cursor: pointer;
text-decoration: none;
transition: var(--transition-base);
}
.btn-ghost:hover {
border-color: rgba(0, 217, 255, 0.5);
color: var(--cyan);
background: rgba(0, 217, 255, 0.04);
}
/* CTA — coral, high urgency */
.btn-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 20px;
background: var(--coral);
color: var(--navy);
border: none;
border-radius: var(--radius-sm);
font-family: var(--font-display);
font-size: 0.82rem;
font-weight: var(--fw-bold);
cursor: pointer;
text-decoration: none;
transition: var(--transition-base);
white-space: nowrap;
}
.btn-cta:hover {
background: #ff5252;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3);
}
/* Email submit — teal small */
.btn-email {
padding: 12px 24px;
background: var(--teal);
color: var(--navy);
border: none;
border-radius: var(--radius-sm);
font-family: var(--font-display);
font-size: 0.88rem;
font-weight: var(--fw-bold);
cursor: pointer;
transition: var(--transition-base);
white-space: nowrap;
}
.btn-email:hover {
background: #25bfab;
transform: translateY(-1px);
}
/* Outline — mono label, cyan tint */
.btn-outline {
padding: 8px 16px;
background: rgba(0, 217, 255, 0.1);
border: 1px solid rgba(0, 217, 255, 0.25);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.08em;
color: var(--cyan);
text-decoration: none;
transition: var(--transition-base);
cursor: pointer;
}
.btn-outline:hover {
background: rgba(0, 217, 255, 0.18);
border-color: rgba(0, 217, 255, 0.5);
}
/* Back — quiz / scorecard navigation
FIXED Sprint Bravo: same border visibility fix as btn-ghost */
.btn-back {
padding: 14px 24px;
background: transparent;
color: var(--soft-gray);
border: 2px solid var(--border-visible);
border-radius: var(--radius-md);
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: var(--fw-bold);
cursor: pointer;
transition: var(--transition-base);
}
.btn-back:hover {
border-color: var(--teal);
color: var(--teal);
}
.btn-back:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Next — quiz / scorecard navigation */
.btn-next {
flex: 1;
padding: 14px 24px;
background: var(--cyan);
color: var(--navy);
border: none;
border-radius: var(--radius-md);
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: var(--fw-bold);
cursor: pointer;
min-width: 150px;
transition: var(--transition-base);
}
.btn-next:hover {
background: #00c4e8;
transform: translateY(-2px);
box-shadow: var(--shadow-cyan);
}
/* ════════════════════════════════════════════════════════
CARDS
════════════════════════════════════════════════════════ */
.card {
background: var(--deep-navy);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 32px;
margin-bottom: 24px;
}
.card-sm {
background: var(--deep-navy);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
}
/* ════════════════════════════════════════════════════════
EMAIL CAPTURE BLOCK — all 4 tools
════════════════════════════════════════════════════════ */
.email-capture {
background: linear-gradient(135deg, var(--deep-navy) 0%, rgba(0, 217, 255, 0.05) 100%);
border: 1px solid rgba(0, 217, 255, 0.2);
border-radius: var(--radius-xl);
padding: 28px 32px;
margin-bottom: 32px;
}
.email-capture h3 {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: var(--fw-bold);
color: var(--cloud);
margin-bottom: 8px;
}
.email-capture p {
font-size: 0.88rem;
color: var(--muted);
margin-bottom: 20px;
line-height: 1.55;
}
.email-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.email-row input {
flex: 1;
min-width: 180px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-sm);
color: var(--cloud);
font-family: var(--font-body);
font-size: 0.95rem;
transition: border-color 0.2s;
}
.email-row input:focus {
outline: none;
border-color: rgba(0, 217, 255, 0.5);
}
.email-row input.invalid {
border-color: rgba(255, 107, 107, 0.5);
}
.email-success {
display: none;
padding: 12px 16px;
background: rgba(46, 212, 191, 0.1);
border: 1px solid rgba(46, 212, 191, 0.3);
border-radius: var(--radius-sm);
font-size: 0.85rem;
color: var(--teal);
margin-top: 12px;
}
.email-success.show { display: block; }
/* ════════════════════════════════════════════════════════
PROGRESS BAR — quiz / scorecard
════════════════════════════════════════════════════════ */
.progress-bar {
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.06);
border-radius: 2px;
margin-bottom: 40px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--cyan), var(--teal));
width: 0%;
transition: width 0.3s ease;
}
/* ════════════════════════════════════════════════════════
OPTION / RADIO ITEM — quiz / scorecard
════════════════════════════════════════════════════════ */
.option {
display: flex;
align-items: center;
padding: 16px;
background: rgba(255, 255, 255, 0.03);
border: 2px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition-base);
gap: 12px;
}
.option:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(0, 217, 255, 0.3);
}
.option.selected {
background: rgba(0, 217, 255, 0.08);
border-color: rgba(0, 217, 255, 0.4);
}
.option input[type="radio"] {
accent-color: var(--cyan);
width: 18px;
height: 18px;
cursor: pointer;
flex-shrink: 0;
}
.option label {
flex: 1;
cursor: pointer;
font-size: 0.95rem;
color: var(--soft-gray);
}
/* ════════════════════════════════════════════════════════
TIER BADGE
════════════════════════════════════════════════════════ */
.tier-badge {
display: inline-block;
padding: 8px 18px;
background: rgba(0, 217, 255, 0.1);
border: 1px solid rgba(0, 217, 255, 0.3);
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--cyan);
margin-bottom: 24px;
}
/* ════════════════════════════════════════════════════════
HEADER BLOCK — shared across all tools
════════════════════════════════════════════════════════ */
.header {
background: var(--deep-navy);
border-bottom: 1px solid rgba(0, 217, 255, 0.15);
padding: 48px 40px 40px;
text-align: center;
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: -60px; left: 50%;
transform: translateX(-50%);
width: 600px; height: 200px;
background: radial-gradient(ellipse, rgba(0, 217, 255, 0.07) 0%, transparent 70%);
pointer-events: none;
}
.header .eyebrow {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cyan);
margin-bottom: 14px;
}
.header h1 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: var(--fw-black);
color: var(--cloud);
line-height: 1.15;
margin-bottom: 14px;
}
.header h1 span { color: var(--cyan); }
.header p {
font-size: 1rem;
color: var(--muted);
max-width: 540px;
margin: 0 auto;
line-height: 1.6;
}
/* ════════════════════════════════════════════════════════
FOOTER BAR — shared across all tools
════════════════════════════════════════════════════════ */
.footer-bar {
height: 4px;
background: linear-gradient(90deg, var(--cyan), var(--teal), var(--coral));
margin-top: 60px;
}
/* ════════════════════════════════════════════════════════
ANIMATIONS
════════════════════════════════════════════════════════ */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
/* ════════════════════════════════════════════════════════
SCROLL REVEAL
════════════════════════════════════════════════════════ */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
/* ════════════════════════════════════════════════════════
MOBILE
════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.btn-primary,
.btn-secondary,
.btn-ghost {
width: 100%;
justify-content: center;
}
.email-row { flex-direction: column; }
.header { padding: 36px 24px 32px; }
}
/*
* END OF RiQ BRAND SYSTEM — Sprint Bravo
*
* NOT included here (intentional):
* — Navbar (website-specific, inline in RiQ_Website.html)
* — Component layouts (quiz, ROI table, bloat grid)
* — Page-specific sections (hero, tier grid, services)
* — PDF styles (Python/ReportLab build system)
*
* Sprint Charlie additions will be appended here:
* — Stripe buy card component (.buy-card)
* — Tool back-link / logo header styles
* — Any new tokens from the tool rebrand pass
*/