/* * RtnIt2.me Design System * Single source of truth for colors, spacing, typography * Usage: add to base2.html before all other CSS * To change the brand color: update --color-brand-500 and derived vars */ :root { /* ============================================================ BRAND COLOR — Blue (#0d6efd) Change --color-brand-500 to rebrand the entire site ============================================================ */ --color-brand-50: #E7F1FF; --color-brand-100: #C2DBFF; --color-brand-200: #9DC1FF; --color-brand-300: #77A6FF; --color-brand-400: #5B95FF; --color-brand-500: #0D6EFD; /* PRIMARY — main brand blue */ --color-brand-600: #0A5CD9; /* hover states */ --color-brand-700: #084BB5; /* active / pressed */ --color-brand-800: #063991; /* dark blue text on light bg */ --color-brand-900: #042766; /* darkest — footers, strong accents */ /* ============================================================ NEUTRAL — Slate scale (text, backgrounds, borders) ============================================================ */ --color-neutral-0: #FFFFFF; --color-neutral-50: #F8FAFC; --color-neutral-100: #F1F5F9; --color-neutral-200: #E2E8F0; --color-neutral-300: #CBD5E1; --color-neutral-400: #94A3B8; --color-neutral-500: #64748B; --color-neutral-600: #475569; --color-neutral-700: #334155; --color-neutral-800: #1E293B; --color-neutral-900: #0F172A; /* near-black — body text */ --color-neutral-950: #020617; /* ============================================================ SEMANTIC — Status colors ============================================================ */ --color-success-bg: #DCFCE7; --color-success-text: #166534; --color-success-border: #86EFAC; --color-warning-bg: #FEF9C3; --color-warning-text: #854D0E; --color-warning-border: #FDE047; --color-error-bg: #FEE2E2; --color-error-text: #991B1B; --color-error-border: #FCA5A5; --color-info-bg: #EFF6FF; --color-info-text: #1E40AF; --color-info-border: #BFDBFE; /* ============================================================ SURFACE — Page and card backgrounds ============================================================ */ --surface-page: var(--color-neutral-0); /* page white */ --surface-subtle: var(--color-neutral-50); /* alt sections */ --surface-card: var(--color-neutral-0); /* card white */ --surface-dark: var(--color-neutral-900); /* footer/dark sections */ --surface-dark-mid: var(--color-neutral-800); /* dark cards */ --surface-brand-tint: var(--color-brand-50); /* teal tint sections */ /* ============================================================ TEXT ============================================================ */ --text-primary: var(--color-neutral-900); /* headings, strong */ --text-body: var(--color-neutral-700); /* body paragraphs */ --text-muted: var(--color-neutral-500); /* captions, hints */ --text-disabled: var(--color-neutral-400); /* disabled states */ --text-inverse: var(--color-neutral-0); /* text on dark bg */ --text-brand: var(--color-brand-500); /* brand color text */ --text-brand-dark: var(--color-brand-800); /* brand text on light bg */ /* ============================================================ BORDER ============================================================ */ --border-subtle: var(--color-neutral-200); /* default card border */ --border-medium: var(--color-neutral-300); /* input borders */ --border-strong: var(--color-neutral-400); /* emphasized borders */ --border-brand: var(--color-brand-500); /* brand accent border */ --border-dark: rgba(255,255,255,0.1); /* borders on dark bg */ /* ============================================================ SPACING — use these for consistent rhythm Usage: padding: var(--space-4) var(--space-6); ============================================================ */ --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; /* ============================================================ BORDER RADIUS ============================================================ */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* ============================================================ TYPOGRAPHY ============================================================ */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --leading-tight: 1.2; --leading-normal: 1.6; --leading-relaxed: 1.75; /* ============================================================ SHADOWS ============================================================ */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05); --shadow-lg: 0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04); --shadow-xl: 0 20px 60px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06); /* ============================================================ TRANSITIONS ============================================================ */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; /* ============================================================ LAYOUT ============================================================ */ --container-sm: 640px; --container-md: 900px; --container-lg: 1100px; --container-xl: 1280px; --section-pad-y: var(--space-20); /* 80px vertical section padding */ --section-pad-x: var(--space-6); /* 24px horizontal padding */ } /* ============================================================ GLOBAL RESETS & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; padding: 0; font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-body); background: var(--surface-page); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { text-decoration: none; } button { cursor: pointer; font-family: inherit; } ul { list-style: none; padding: 0; margin: 0; } /* ============================================================ UTILITY CLASSES — use these in templates ============================================================ */ /* Containers */ .rt-container { max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--section-pad-x); } .rt-container-md { max-width: var(--container-md); margin: 0 auto; padding: 0 var(--section-pad-x); } .rt-container-sm { max-width: var(--container-sm); margin: 0 auto; padding: 0 var(--section-pad-x); } /* Section padding */ .rt-section { padding: var(--section-pad-y) 0; } .rt-section-sm { padding: var(--space-12) 0; } /* Section label (small uppercase label above headings) */ .rt-label { display: inline-block; font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-brand); margin-bottom: var(--space-3); } /* Headings */ .rt-h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: var(--font-bold); color: var(--text-primary); line-height: var(--leading-tight); letter-spacing: -0.02em; } .rt-h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: var(--font-semibold); color: var(--text-primary); line-height: var(--leading-tight); letter-spacing: -0.01em; } .rt-h3 { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--text-primary); } /* Body text */ .rt-lead { font-size: var(--text-lg); color: var(--text-body); line-height: var(--leading-relaxed); } .rt-body { font-size: var(--text-base); color: var(--text-body); line-height: var(--leading-relaxed); } .rt-caption { font-size: var(--text-sm); color: var(--text-muted); } .rt-tiny { font-size: var(--text-xs); color: var(--text-muted); } /* Buttons */ .rt-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 13px 28px; border-radius: var(--radius-md); font-size: var(--text-base); font-weight: var(--font-medium); transition: all var(--transition-fast); border: 1.5px solid transparent; white-space: nowrap; cursor: pointer; text-decoration: none; position: relative; z-index: 100; } .rt-btn-primary { background: var(--color-brand-500); color: var(--text-inverse); border-color: var(--color-brand-500); } .rt-btn-primary:hover { background: var(--color-brand-600); border-color: var(--color-brand-600); color: var(--text-inverse); transform: translateY(-1px); box-shadow: var(--shadow-md); } .rt-btn-secondary { background: var(--color-neutral-100); color: var(--text-primary); border-color: var(--border-strong); } .rt-btn-secondary:hover { background: var(--color-neutral-200); border-color: var(--color-brand-500); color: var(--color-brand-500); } .rt-btn-outline-brand { background: transparent; color: var(--color-brand-500); border-color: var(--color-brand-500); } .rt-btn-outline-brand:hover { background: var(--color-brand-50); } .rt-btn-sm { padding: 8px 18px; font-size: var(--text-sm); } .rt-btn-lg { padding: 16px 36px; font-size: var(--text-lg); } /* Cards */ .rt-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); box-shadow: var(--shadow-sm); transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .rt-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .rt-card-featured { border: 2px solid var(--color-brand-500); } /* Pills / badges */ .rt-pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--font-medium); padding: 4px 12px; border-radius: var(--radius-full); border: 1px solid transparent; } .rt-pill-brand { background: var(--color-brand-50); color: var(--color-brand-800); border-color: var(--color-brand-200); } .rt-pill-neutral { background: var(--color-neutral-100); color: var(--color-neutral-600); border-color: var(--color-neutral-200); } /* Icon circle */ .rt-icon-circle { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rt-icon-circle-brand { background: var(--color-brand-50); color: var(--color-brand-500); } .rt-icon-circle-blue { background: var(--color-info-bg); color: var(--color-info-text); } .rt-icon-circle-amber { background: var(--color-warning-bg); color: var(--color-warning-text); } .rt-icon-circle-purple { background: #F5F3FF; color: #6D28D9; } /* Section heading block (label + h2 + sub) */ .rt-section-head { text-align: center; margin-bottom: var(--space-12); } .rt-section-head .rt-h2 { margin-bottom: var(--space-3); } .rt-section-head .rt-lead { max-width: 560px; margin: 0 auto; } /* Divider text */ .rt-divider-text { text-align: center; font-size: var(--text-xs); color: var(--text-muted); position: relative; margin: var(--space-4) 0; } .rt-divider-text::before, .rt-divider-text::after { content: ''; position: absolute; top: 50%; width: 35%; height: 1px; background: var(--border-subtle); } .rt-divider-text::before { left: 0; } .rt-divider-text::after { right: 0; } /* Surfaces */ .rt-surface-subtle { background: var(--surface-subtle); } .rt-surface-dark { background: var(--surface-dark); } .rt-surface-tint { background: var(--surface-brand-tint); } /* ============================================================ FOOTER (shared across all pages) These live here so base2.html footer is styled correctly ============================================================ */ .site-footer { background: var(--surface-dark); color: var(--text-inverse); padding: var(--space-16) 0 var(--space-8); } .site-footer .footer-logo-text { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--text-inverse); margin-bottom: var(--space-2); } .site-footer .footer-logo-text span { color: var(--color-brand-500); } .site-footer .footer-tagline { font-size: var(--text-sm); color: var(--color-neutral-400); margin-bottom: var(--space-8); } .site-footer .footer-heading { /* CRITICAL FIX: was black on dark bg — invisible */ font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand-400); /* teal — visible on dark */ margin-bottom: var(--space-4); } .site-footer .footer-link { font-size: var(--text-sm); color: var(--color-neutral-400); /* CRITICAL FIX: was black — invisible */ display: block; padding: 3px 0; transition: color var(--transition-fast); } .site-footer .footer-link:hover { color: var(--color-neutral-0); } .site-footer .footer-bottom { border-top: 1px solid var(--color-neutral-800); padding-top: var(--space-6); margin-top: var(--space-8); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-neutral-500); }