/* ============================================================ base-design.css — Universal Design System v1.0 Drop into any static site. Override --brand in :root. ============================================================ */ /* ----- Design Tokens (override in your :root) ----- */ :root { /* Brand */ --brand: #7c6ff0; --brand-hover: #9588ff; --brand-glow: rgba(124, 111, 240, 0.25); /* Surfaces (light default, flips in dark) */ --ds-bg: #f8f9fb; --ds-surface: #ffffff; --ds-border: #e5e7ed; /* Text */ --ds-heading: #0f172a; --ds-text: #334155; --ds-muted: #8890a8; /* Radius scale */ --ds-radius-sm: 8px; --ds-radius: 14px; --ds-radius-lg: 22px; --ds-radius-xl: 30px; /* Shadows */ --ds-shadow-sm: 0 1px 4px rgba(0,0,0,0.06); --ds-shadow: 0 4px 20px rgba(0,0,0,0.10); --ds-shadow-lg: 0 12px 40px rgba(0,0,0,0.14); /* Spacing */ --ds-space-xs: 8px; --ds-space-sm: 16px; --ds-space: 24px; --ds-space-lg: 36px; --ds-space-xl: 56px; /* Font */ --ds-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Transitions */ --ds-ease: 220ms ease-out; --ds-spring: 400ms cubic-bezier(0.25, 0.1, 0.25, 1); } /* ----- Dark Theme (auto) ----- */ @media (prefers-color-scheme: dark) { :root { --ds-bg: #080b12; --ds-surface: #111622; --ds-border: #1e2638; --ds-heading: #eef0f6; --ds-text: #b4b8c8; --ds-muted: #5c647a; --ds-shadow-sm: 0 1px 4px rgba(0,0,0,0.25); --ds-shadow: 0 4px 20px rgba(0,0,0,0.40); --ds-shadow-lg: 0 12px 40px rgba(0,0,0,0.55); } /* Force dark — add .theme-dark on to lock dark regardless of OS */ /* Force light — add .theme-light on to lock light */ } .theme-dark { --ds-bg: #080b12; --ds-surface: #111622; --ds-border: #1e2638; --ds-heading: #eef0f6; --ds-text: #b4b8c8; --ds-muted: #5c647a; --ds-shadow-sm: 0 1px 4px rgba(0,0,0,0.25); --ds-shadow: 0 4px 20px rgba(0,0,0,0.40); --ds-shadow-lg: 0 12px 40px rgba(0,0,0,0.55); } .theme-light { --ds-bg: #f8f9fb; --ds-surface: #ffffff; --ds-border: #e5e7ed; --ds-heading: #0f172a; --ds-text: #334155; --ds-muted: #8890a8; --ds-shadow-sm: 0 1px 4px rgba(0,0,0,0.06); --ds-shadow: 0 4px 20px rgba(0,0,0,0.10); --ds-shadow-lg: 0 12px 40px rgba(0,0,0,0.14); } /* ----- Reset (scoped, won't break existing styles) ----- */ .ds-body, .ds-container { font-family: var(--ds-font); } .ds-container { width: min(100% - 32px, 1160px); margin-inline: auto; } /* ============================== Component: Spotlight Card ============================== */ .card-spotlight { position: relative; isolation: isolate; overflow: hidden; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); transition: border-color var(--ds-ease), box-shadow var(--ds-ease), transform var(--ds-ease); } .card-spotlight::before { content: ""; border-radius: inherit; background: radial-gradient( 260px circle at var(--spot-x, -999px) var(--spot-y, -999px), var(--brand-glow) 0%, transparent 72% ); opacity: 0; pointer-events: none; position: absolute; inset: 0; z-index: 0; transition: opacity var(--ds-ease); } .card-spotlight:hover { border-color: var(--brand); box-shadow: var(--ds-shadow-lg); transform: translateY(-2px); } .card-spotlight:hover::before { opacity: 1; } /* Content inside spotlight card stays above the glow */ .card-spotlight > * { position: relative; z-index: 1; } /* Border-only glow variant (for feature cards) */ .card-spotlight-border { composes: card-spotlight; } .card-spotlight-border::before { -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; padding: 1px; } /* ============================== Component: Hero Gradient Title ============================== */ .hero-gradient { font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; background: linear-gradient( 135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 70%, #a78bfa) 25%, #4ade80 50%, #60a5fa 75%, var(--brand) 100% ); background-size: 200% 200%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: ds-shimmer 6s ease infinite; margin-bottom: 16px; } @keyframes ds-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Decorative underline below gradient title */ .hero-underline { position: relative; display: inline-block; isolation: isolate; } .hero-underline::after { content: ""; position: absolute; right: -0.06em; bottom: -0.02em; left: -0.06em; height: 0.12em; border-radius: 999px; background: linear-gradient( 90deg, transparent, var(--brand-glow), rgba(74, 222, 128, 0.35), transparent ); z-index: -1; opacity: 0.64; transform: scaleX(0.92) rotate(-0.6deg); transition: opacity 280ms ease, transform 280ms ease; } /* Hero section wrapper */ .hero-section { text-align: center; padding: var(--ds-space-xl) 0 var(--ds-space-lg); } .hero-section p { font-size: 1.1rem; color: var(--ds-muted); max-width: 600px; margin-inline: auto; line-height: 1.7; } /* ============================== Component: Glass Navigation ============================== */ .glass-nav { position: sticky; top: 0; z-index: 100; width: 100%; height: 64px; background: color-mix(in srgb, var(--ds-bg) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ds-border); display: flex; align-items: center; padding: 0 var(--ds-space); } /* ============================== Component: Glow Button ============================== */ .btn-glow { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 50px; font-size: 0.95rem; font-weight: 600; font-family: var(--ds-font); background: var(--brand); color: #fff; border: none; cursor: pointer; box-shadow: 0 4px 16px var(--brand-glow); transition: all var(--ds-ease); text-decoration: none; line-height: 1.4; } .btn-glow:hover { background: var(--brand-hover); transform: translateY(-1px); box-shadow: 0 6px 24px var(--brand-glow); color: #fff; } .btn-glow:active { transform: translateY(0); } /* Outline variant */ .btn-glow-outline { background: transparent; color: var(--ds-text); border: 1px solid var(--ds-border); box-shadow: none; } .btn-glow-outline:hover { background: var(--ds-surface); border-color: var(--brand); color: var(--ds-heading); } /* ============================== Component: Shimmer Bar ============================== */ .shimmer-bar { width: 100%; height: 2px; background: linear-gradient( 90deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #a78bfa), #4ade80, #60a5fa, var(--brand) ); background-size: 200% 100%; animation: ds-bar-shimmer 4s ease infinite; border: none; border-radius: 1px; } @keyframes ds-bar-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ============================== Utility Classes ============================== */ /* Text hierarchy */ .ds-text-muted { color: var(--ds-muted); } .ds-text-heading { color: var(--ds-heading); } /* Section spacing */ .ds-section { padding: var(--ds-space-xl) 0; } .ds-section-sm { padding: var(--ds-space-lg) 0; } /* Grid helpers */ .ds-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--ds-space); } .ds-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ds-space-sm); } .ds-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ds-space-sm); } /* Surface card (non-spotlight, plain card) */ .ds-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); padding: var(--ds-space); } /* ============================== Animations (respect reduced-motion) ============================== */ @media (prefers-reduced-motion: reduce) { .hero-gradient, .shimmer-bar { animation: none; } .card-spotlight::before, .hero-underline::after { transition: none; } .card-spotlight:hover { transform: none; } .ds-fade-in, .ds-slide-up { animation: none; opacity: 1; transform: none; } } /* Fade in */ @keyframes ds-fade-in { from { opacity: 0; } to { opacity: 1; } } .ds-fade-in { animation: ds-fade-in 500ms ease-out both; } /* Slide up */ @keyframes ds-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .ds-slide-up { animation: ds-slide-up 500ms var(--ds-spring) both; } /* Stagger children */ .ds-stagger > * { opacity: 0; animation: ds-slide-up 450ms var(--ds-spring) forwards; } .ds-stagger > *:nth-child(1) { animation-delay: 0ms; } .ds-stagger > *:nth-child(2) { animation-delay: 80ms; } .ds-stagger > *:nth-child(3) { animation-delay: 160ms; } .ds-stagger > *:nth-child(4) { animation-delay: 240ms; } .ds-stagger > *:nth-child(5) { animation-delay: 320ms; } .ds-stagger > *:nth-child(6) { animation-delay: 400ms; } .ds-stagger > *:nth-child(7) { animation-delay: 480ms; } .ds-stagger > *:nth-child(8) { animation-delay: 560ms; } /* ============================== Spotlight JS (drop this script once per page) ============================== ============================== */