/* ============================================================ Relsent Design System — Shared Styles "The Digital Architect" — deep violet-charcoal, no borders, breathing room, left-aligned editorial authority. Tailwind config is inline per page (CDN requirement). ============================================================ */ body { background-color: #150f28; color: #e8ddff; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* Glass variants — semantically distinct, used in different contexts */ .glass-panel { background: rgba(30, 24, 49, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .glass-morph { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .glass-card { background: rgba(30, 24, 49, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* Gradient text — homepage hero */ .text-gradient { background: linear-gradient(135deg, #c8bfff 0%, #9382ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Architect underline — 20%-width primary accent line under headings */ .architect-underline::after { content: ''; display: block; width: 20%; height: 3px; background-color: #c8bfff; margin-top: 0.5rem; } /* ============================================================ Nav active state — zero JavaScript Usage: ============================================================ */ [data-page="home"] nav a[data-nav="home"], [data-page="solutions"] nav a[data-nav="solutions"], [data-page="methodology"] nav a[data-nav="methodology"], [data-page="pricing"] nav a[data-nav="pricing"], [data-page="resources"] nav a[data-nav="resources"] { color: #c8bfff !important; border-bottom: 2px solid #9382ff; padding-bottom: 4px; } /* ============================================================ Tier card selection — click-to-highlight on pricing grids ============================================================ */ .tier-selected { box-shadow: 0 0 0 2px #9382ff, 0 0 32px rgba(147, 130, 255, 0.2); border-color: rgba(200, 191, 255, 0.4) !important; } /* Plan comparison table — selected column highlight */ .col-highlight { background-color: rgba(147, 130, 255, 0.08); color: #c8bfff !important; font-weight: 700; }