/* * COSTRINITY · shared design system for the umbrella + product landing pages. * * Used by: * index.html → costrinity.xyz * griid.html → costrinity.xyz/griid * crypt.html → costrinity.xyz/crypt * * Aligned with vigil/app/globals.css so the VIGIL Next.js site reads as the * same design system. Token names match (--bg, --teal, --purple, --gold). * * Loaded as . * Fonts (Plus Jakarta Sans + JetBrains Mono) come from Google Fonts via the * page . * * Last updated: 2026-05-14 · site redesign sprint. */ /* ── Reset ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Design tokens ───────────────────────────────────────────────────── */ :root { /* Surfaces */ --ink: #06061a; --panel: #0f0f23; --card: #0d0d32; --surface: #0e0e38; /* Borders */ --border: rgba(255, 255, 255, 0.06); --border-hi: rgba(255, 255, 255, 0.16); --hairline: rgba(255, 255, 255, 0.08); /* Text */ --text: #FFFFFF; --soft: #B5B5BA; --dim: #8A8A92; --text-dim: #64748b; /* Accents */ --teal: #2dd4bf; --teal-deep: #0F2F2A; --teal-glow: rgba(94, 234, 212, 0.18); --yellow: #f4c24f; --yellow-deep: #2A1F05; --yellow-glow: rgba(245, 180, 0, 0.14); --purple: #a78bfa; --purple-deep: #1A1530; --purple-glow: rgba(167, 139, 250, 0.14); /* Type */ --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; } /* ── Base typography ─────────────────────────────────────────────────── */ body { background-color: var(--ink); color: var(--text); font-family: var(--font-sans); font-weight: 400; line-height: 1.6; min-height: 100vh; overflow-x: hidden; position: relative; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; } .mono { font-family: var(--font-mono); } a { color: inherit; text-decoration: none; } /* ── Selection + scrollbar ───────────────────────────────────────────── */ ::selection { background: rgba(45, 212, 191, 0.25); color: var(--teal); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--ink); } ::-webkit-scrollbar-thumb { background: #27272a; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #3F3F46; } :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* ── Layout primitives ───────────────────────────────────────────────── */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .page-stage { position: relative; z-index: 10; display: flex; flex-direction: column; min-height: 100vh; } /* ── Ambient glow circles ────────────────────────────────────────────── */ /* Three positioned background glow circles for the "Schneider" depth. */ /* Per-page accent color via inline style or modifier class. */ .ambient { position: fixed; pointer-events: none; z-index: 0; filter: blur(110px); opacity: 0.6; border-radius: 50%; transition: background 600ms ease; } .ambient-1 { top: -200px; left: -200px; width: 700px; height: 700px; background: radial-gradient(circle, var(--teal-glow) 0%, transparent 70%); } .ambient-2 { top: 30%; right: -250px; width: 700px; height: 700px; background: radial-gradient(circle, var(--purple-glow) 0%, transparent 70%); } .ambient-3 { bottom: -200px; left: 30%; width: 600px; height: 600px; background: radial-gradient(circle, var(--yellow-glow) 0%, transparent 70%); } /* Per-product page color shifts. Apply to etc. */ .page-griid .ambient-1 { background: radial-gradient(circle, var(--yellow-glow) 0%, transparent 70%); } .page-griid .ambient-2 { background: radial-gradient(circle, rgba(245, 180, 0, 0.08) 0%, transparent 70%); } .page-griid .ambient-3 { background: radial-gradient(circle, rgba(245, 180, 0, 0.04) 0%, transparent 70%); } .page-crypt .ambient-1 { background: radial-gradient(circle, var(--purple-glow) 0%, transparent 70%); } .page-crypt .ambient-2 { background: radial-gradient(circle, rgba(167, 139, 250, 0.08) 0%, transparent 70%); } .page-crypt .ambient-3 { background: radial-gradient(circle, rgba(167, 139, 250, 0.04) 0%, transparent 70%); } /* ── Glass morphism ──────────────────────────────────────────────────── */ .glass { background: rgba(18, 18, 20, 0.45); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border); transition: border-color 280ms ease, transform 280ms ease; } .glass:hover { border-color: var(--border-hi); transform: translateY(-2px); } .glass-static { background: rgba(18, 18, 20, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border); } .hairline { border-top: 1px solid var(--hairline); } .hairline-left { border-left: 1px solid var(--hairline); } /* ── Mono labels ─────────────────────────────────────────────────────── */ /* The "[ STUDIO BRIEF ]" technical-label style. */ .mono-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); font-weight: 500; } .mono-label.accent-teal { color: var(--teal); } .mono-label.accent-yellow { color: var(--yellow); } .mono-label.accent-purple { color: var(--purple); } /* ── Pulse dot (for "live" indicators) ───────────────────────────────── */ .pulse-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .pulse-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 currentColor; animation: pulse 1.6s ease-out infinite; opacity: 0.7; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.7; } 70% { box-shadow: 0 0 0 8px transparent; opacity: 0; } 100% { box-shadow: 0 0 0 0 transparent; opacity: 0; } } /* ── Buttons ─────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-family: var(--font-sans); font-weight: 600; font-size: 14px; cursor: pointer; border: 1px solid transparent; transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease; text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--teal); color: var(--ink); } .btn-primary:hover { background: #5EEAD4; } .btn-secondary { background: rgba(255, 255, 255, 0.02); color: var(--text); border-color: var(--border); } .btn-secondary:hover { border-color: var(--border-hi); } .btn-yellow { background: var(--yellow); color: var(--ink); } .btn-yellow:hover { background: #FFCB47; } .btn-purple { background: var(--purple); color: var(--ink); } .btn-purple:hover { background: #B79CFF; } .btn-white { background: var(--text); color: var(--ink); } .btn-white:hover { background: var(--soft); } /* ── Hero typography ─────────────────────────────────────────────────── */ .hero-title { font-size: clamp(40px, 7vw, 80px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; color: var(--text); } .hero-sub { font-size: clamp(16px, 1.5vw, 20px); font-weight: 300; line-height: 1.6; color: var(--soft); max-width: 640px; } .accent-teal { background: linear-gradient(135deg, #5EEAD4 0%, #2DD4BF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .accent-yellow { background: linear-gradient(135deg, #F5B400 0%, #D97706 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .accent-purple { background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── Status badges ───────────────────────────────────────────────────── */ .status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; } .status-pill.live { border: 1px solid rgba(45, 212, 191, 0.3); background: rgba(45, 212, 191, 0.05); color: var(--teal); } .status-pill.archived-yellow { border: 1px solid rgba(245, 180, 0, 0.3); background: rgba(245, 180, 0, 0.05); color: var(--yellow); } .status-pill.archived-purple { border: 1px solid rgba(167, 139, 250, 0.3); background: rgba(167, 139, 250, 0.05); color: var(--purple); } /* ── Header ──────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; width: 100%; background: rgba(6, 6, 26, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .site-header-inner { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; flex-direction: column; } .brand-name { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; } .brand-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-top: -2px; } .site-nav { display: flex; gap: 28px; align-items: center; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dim); } .site-nav a { display: flex; align-items: center; gap: 6px; transition: color 150ms ease; } .site-nav a:hover { color: var(--text); } .site-nav a.active { color: var(--text); } .site-nav .nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--soft); } .site-nav .nav-dot.teal { background: var(--teal); } .site-nav .nav-dot.yellow { background: var(--yellow); opacity: 0.6; } .site-nav .nav-dot.purple { background: var(--purple); opacity: 0.6; } .nav-archived { font-size: 8px; opacity: 0.5; } /* ── Sections + grids ────────────────────────────────────────────────── */ .section { padding: 80px 0; } .section-tight { padding: 48px 0; } .section-hero { padding: 96px 0 48px; } .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* ── Product card ────────────────────────────────────────────────────── */ .product-card { position: relative; padding: 28px; border-radius: 16px; display: flex; flex-direction: column; justify-content: space-between; min-height: 440px; overflow: hidden; text-align: left; cursor: pointer; } .product-card .glow-corner { position: absolute; top: -80px; right: -80px; width: 160px; height: 160px; border-radius: 50%; filter: blur(60px); transition: opacity 280ms ease; } .product-card.is-teal .glow-corner { background: rgba(94, 234, 212, 0.1); } .product-card.is-yellow .glow-corner { background: rgba(245, 180, 0, 0.05); } .product-card.is-purple .glow-corner { background: rgba(167, 139, 250, 0.05); } .product-card:hover .glow-corner { opacity: 1.5; } .product-card .icon-tile { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .product-card.is-teal .icon-tile { border: 1px solid rgba(45, 212, 191, 0.3); background: rgba(45, 212, 191, 0.05); color: var(--teal); } .product-card.is-yellow .icon-tile { border: 1px solid rgba(245, 180, 0, 0.2); background: rgba(245, 180, 0, 0.05); color: var(--yellow); } .product-card.is-purple .icon-tile { border: 1px solid rgba(167, 139, 250, 0.2); background: rgba(167, 139, 250, 0.05); color: var(--purple); } .product-card .product-title { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); transition: color 280ms ease; } .product-card.is-teal:hover .product-title { color: var(--teal); } .product-card.is-yellow:hover .product-title { color: var(--yellow); } .product-card.is-purple:hover .product-title { color: var(--purple); } .product-card .product-subtitle { font-size: 13px; color: var(--dim); font-style: italic; margin-top: 4px; } .product-card .product-body { font-size: 14px; line-height: 1.6; color: var(--soft); margin-top: 20px; } .tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; } .tag { font-family: var(--font-mono); font-size: 9px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; color: var(--soft); } .card-footer { font-family: var(--font-mono); font-size: 12px; color: var(--dim); border-top: 1px solid var(--border); padding-top: 16px; margin-top: 24px; display: flex; justify-content: space-between; align-items: center; } .card-footer .arrow { display: inline-flex; align-items: center; gap: 4px; transition: transform 200ms ease; } .product-card.is-teal .card-footer .arrow { color: var(--teal); } .product-card.is-yellow .card-footer .arrow { color: rgba(244, 194, 79, 0.8); } .product-card.is-purple .card-footer .arrow { color: rgba(167, 139, 250, 0.8); } .product-card:hover .card-footer .arrow { transform: translateX(4px); } /* ── Principle row (operator-first / build honest / ship narrow) ────── */ .principle-row { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border-radius: 12px; } .principle-row .principle-icon { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .principle-row.is-teal .principle-icon { background: rgba(45, 212, 191, 0.1); border: 1px solid rgba(45, 212, 191, 0.2); color: var(--teal); } .principle-row.is-yellow .principle-icon { background: rgba(245, 180, 0, 0.1); border: 1px solid rgba(245, 180, 0, 0.2); color: var(--yellow); } .principle-row.is-purple .principle-icon { background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.2); color: var(--purple); } .principle-row .principle-title { font-size: 14px; font-weight: 600; color: var(--text); } .principle-row .principle-body { font-size: 12px; line-height: 1.6; color: var(--dim); margin-top: 4px; } /* ── Footer ──────────────────────────────────────────────────────────── */ .site-footer { width: 100%; border-top: 1px solid var(--border); background: var(--ink); padding: 64px 24px; } .site-footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; } .site-footer h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--soft); font-weight: 500; margin-bottom: 16px; } .site-footer ul { list-style: none; } .site-footer ul li { font-family: var(--font-mono); font-size: 12px; color: var(--dim); margin-bottom: 8px; } .site-footer ul li a:hover { color: var(--text); } .footer-meta { font-family: var(--font-mono); font-size: 10px; color: #4b5563; margin-top: 16px; line-height: 1.6; } /* ── Responsive ──────────────────────────────────────────────────────── */ /* Breakpoints: * 968px → tablet + smaller. 12-col + 3-col grids collapse to 1fr, * header inner wraps, nav drops to its own row underneath the * brand (was hidden in the old build, which left mobile users * with no nav). Hero CTAs stack. Hero aside separator rotates * from a left border to a top one. * 640px → phone. Type scales down, status-pill text allowed to wrap, * header padding tightens. * 380px → smallest phones (iPhone SE 1st gen, etc.). Hero title fixed * at 32px so it can't shrink further; header button shrinks. */ @media (max-width: 968px) { /* Grids collapse to single column */ .grid-12 { grid-template-columns: 1fr; gap: 32px; } .grid-3 { grid-template-columns: 1fr; gap: 20px; } .site-footer-inner { grid-template-columns: 1fr; gap: 32px; } /* Inline col-spans hard-coded in HTML need to span the full row */ .grid-12 > [style*="grid-column"] { grid-column: 1 / -1 !important; } /* Section padding tightens */ .section { padding: 56px 0; } .section-hero { padding: 56px 0 32px; } /* Header: wrap inner row, nav drops below brand, NOT hidden */ .site-header-inner { flex-wrap: wrap; gap: 12px; padding: 14px 20px; } .site-nav { order: 99; /* always last child */ flex-basis: 100%; gap: 16px; font-size: 10px; border-top: 1px solid var(--hairline); padding-top: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } .site-nav a { flex-shrink: 0; } /* Hero aside: rotate the separator from left-edge to top */ .hero-aside-tiles { border-left: 0 !important; border-top: 1px solid var(--hairline); padding-left: 0 !important; padding-top: 32px; margin-top: 8px; } /* Hero CTAs: stack and stretch (also catches the CTA-banner buttons) */ .hero-ctas { flex-direction: column !important; align-items: stretch !important; } .hero-ctas .btn { width: 100%; justify-content: center; } /* Ambient circles: smaller and softer so they can't drive horizontal * scroll on narrow viewports */ .ambient-1, .ambient-2, .ambient-3 { width: 380px; height: 380px; filter: blur(80px); opacity: 0.4; } /* Product cards: slightly tighter */ .product-card { padding: 24px; min-height: 360px; } /* Container padding */ .container { padding: 0 20px; } } @media (max-width: 640px) { .container { padding: 0 16px; } .hero-title { font-size: clamp(34px, 9vw, 48px); } .hero-sub { font-size: 15px; } /* Allow long status-pill labels to wrap onto two lines */ .status-pill { flex-wrap: wrap; text-align: center; max-width: 100%; line-height: 1.4; } /* Email-button shrinks to fit alongside the brand */ .site-header .btn-white { font-size: 12px; padding: 8px 14px; } .brand-name { font-size: 14px; } .brand-tag { font-size: 8px; } /* Footer email link wraps cleanly */ .site-footer-inner { gap: 28px; } /* Section padding even tighter */ .section { padding: 48px 0; } .section-hero { padding: 48px 0 24px; } } @media (max-width: 380px) { .hero-title { font-size: 32px; } .site-header .btn-white { padding: 7px 10px; font-size: 11px; } .site-nav { font-size: 9px; gap: 12px; } }