/* ============================================================ VURAY CONSULTING — design tokens Signature: orbital constellation — one studio, many autonomous ventures, drawn as a core node with orbiting product nodes. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); /* ---------- theme tokens ---------- Dark is the default theme; [data-theme="light"] on overrides it. Palette: blue / light-purple, kept bright rather than muddy. */ :root{ --bg: #16142e; --bg-rgb: 22,20,46; --surface: #1e1b3e; --surface-2: #262149; --surface-3: #322b5c; --hairline: rgba(236,234,255,0.10); --hairline-strong: rgba(236,234,255,0.18); --text: #f2f0fc; --text-dim: #cac4ec; --text-mute: #928cbd; /* accents: violet (primary, close to medium-slate-blue), blue (secondary/links), lilac (tertiary) */ --accent-1: #9b86ff; --accent-1-dim: #7f68e8; --accent-2: #6ea3ff; --accent-2-dim: #4c8aff; --accent-3: #c4a8ff; /* legacy aliases used throughout the CSS/HTML — keep the names, swap the hues */ --gold: var(--accent-1); --gold-dim: var(--accent-1-dim); --teal: var(--accent-2); --teal-dim: var(--accent-2-dim); --coral: var(--accent-3); --on-accent: #17123a; /* gradients */ --gradient-brand: linear-gradient(120deg, var(--accent-1) 0%, var(--accent-2) 55%, var(--accent-3) 100%); --gradient-brand-soft: linear-gradient(120deg, rgba(155,134,255,0.20) 0%, rgba(110,163,255,0.20) 55%, rgba(196,168,255,0.20) 100%); --glow-1: rgba(155,134,255,0.35); --glow-2: rgba(110,163,255,0.30); --glow-3: rgba(196,168,255,0.30); /* type */ --f-display: 'Sora', 'Inter', system-ui, sans-serif; --f-body: 'Inter', system-ui, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; --container: 1220px; --radius-s: 10px; --radius-m: 16px; --radius-l: 26px; --ease: cubic-bezier(.22,1,.36,1); color-scheme: dark; } [data-theme="light"]{ --bg: #f5f4fd; --bg-rgb: 245,244,253; --surface: #ffffff; --surface-2: #ece6fb; --surface-3: #ddd2f6; --hairline: rgba(28,26,58,0.10); --hairline-strong: rgba(28,26,58,0.20); --text: #1c1a3a; --text-dim: #4c477a; --text-mute: #79749f; --accent-1: #6f5cf0; --accent-1-dim: #5a48d6; --accent-2: #3d7dff; --accent-2-dim: #2c63e0; --accent-3: #9b6ff2; --on-accent: #ffffff; --gradient-brand: linear-gradient(120deg, var(--accent-1) 0%, var(--accent-2) 55%, var(--accent-3) 100%); --gradient-brand-soft: linear-gradient(120deg, rgba(111,92,240,0.14) 0%, rgba(61,125,255,0.14) 55%, rgba(155,111,242,0.14) 100%); --glow-1: rgba(111,92,240,0.30); --glow-2: rgba(61,125,255,0.26); --glow-3: rgba(155,111,242,0.26); color-scheme: light; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;} } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--f-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;} h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;margin:0 0 .5em;line-height:1.12;letter-spacing:-0.01em;} p{margin:0 0 1em;} :focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:4px;} .container{max-width:var(--container);margin:0 auto;padding:0 24px;} .container-narrow{max-width:820px;margin:0 auto;padding:0 24px;} .eyebrow{ font-family:var(--f-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); display:inline-flex; align-items:center; gap:10px; } .eyebrow::before{content:"";width:18px;height:1px;background:var(--teal);display:inline-block;} .eyebrow-pill{ font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-1-dim); background:var(--gradient-brand-soft); border:1px solid var(--hairline-strong); padding:8px 18px; border-radius:100px; display:inline-flex; align-items:center; gap:8px; } [data-theme="dark"] .eyebrow-pill{color:var(--accent-1);} .gradient-text{ background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ---------- header ---------- */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(var(--bg-rgb),0.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--hairline); } .nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:var(--container);margin:0 auto;} .brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--text);} .brand-logo{height:28px;width:auto;display:block;} .brand-logo-light{display:none;} [data-theme="light"] .brand-logo-dark{display:none;} [data-theme="light"] .brand-logo-light{display:block;} .nav-links{display:flex;align-items:center;gap:30px;} .nav-links a{font-size:14.5px;font-weight:500;color:var(--text-dim);transition:color .2s var(--ease);padding:6px 0;position:relative;} .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text);} .nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--gold);border-radius:2px;} .nav-cta{ font-family:var(--f-mono); font-size:13px; font-weight:500; border:1px solid var(--hairline-strong); padding:9px 18px; border-radius:100px; color:var(--text); transition:border-color .2s var(--ease), background .2s var(--ease); } .nav-cta:hover{border-color:var(--teal); background:rgba(106,85,240,.08);} .nav-toggle{display:none;background:none;border:0;color:var(--text);padding:6px;cursor:pointer;} .nav-right{display:flex;align-items:center;gap:14px;} .theme-toggle{ width:38px;height:38px;flex:none;border-radius:50%; border:1px solid var(--hairline-strong); background:var(--surface); color:var(--text); display:inline-flex;align-items:center;justify-content:center;cursor:pointer; transition:border-color .2s var(--ease), transform .2s var(--ease); } .theme-toggle:hover{border-color:var(--teal); transform:translateY(-1px);} .theme-toggle svg{width:18px;height:18px;} .theme-toggle .icon-moon{display:none;} [data-theme="dark"] .theme-toggle .icon-sun{display:none;} [data-theme="dark"] .theme-toggle .icon-moon{display:block;} @media (max-width:880px){ .nav-links{position:fixed;inset:64px 0 0 0;background:var(--bg);flex-direction:column;align-items:flex-start;padding:28px 24px;gap:4px;display:none;overflow:auto;} .nav-links.open{display:flex;} .nav-links a{width:100%;padding:14px 0;border-bottom:1px solid var(--hairline);} .nav-cta{display:none;} .nav-toggle{display:block;} } @media (max-width:400px){ .nav{padding:14px 16px;} .brand-logo{height:24px;} } /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--f-mono);font-size:14px;font-weight:500; padding:13px 24px;border-radius:100px;border:1px solid transparent; cursor:pointer;transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .25s var(--ease); white-space:nowrap; } .btn:hover{transform:translateY(-2px);} .btn:active{transform:translateY(0) scale(0.97);} .btn-primary{background:var(--gradient-brand);color:var(--on-accent);box-shadow:0 10px 26px -12px var(--glow-1);} .btn-primary:hover{box-shadow:0 14px 32px -12px var(--glow-1);filter:brightness(1.06);} .btn-outline{border-color:var(--hairline-strong);color:var(--text);} .btn-outline:hover{border-color:var(--teal);color:var(--teal);background:var(--card-tint, rgba(111,92,240,0.06));} /* ---------- sections ---------- */ section{padding:104px 0;} @media (max-width:720px){section{padding:64px 0;}} .section-head{max-width:640px;margin:0 0 56px;} .section-head h2{font-size:clamp(30px,4.4vw,46px);letter-spacing:-0.01em;} .section-head p{color:var(--text-dim);font-size:17px;} .band-alt{background:var(--surface);} .band-paper{background:var(--surface-2);} .band-paper a{color:var(--teal-dim);} /* ---------- hero ---------- */ .hero{padding:96px 0 44px;position:relative;overflow:hidden;} .hero::before{ content:""; position:absolute; top:-220px; left:50%; width:1100px; height:700px; transform:translateX(-50%); background: radial-gradient(38% 45% at 20% 30%, var(--glow-1), transparent 70%), radial-gradient(32% 40% at 75% 20%, var(--glow-2), transparent 70%), radial-gradient(30% 40% at 55% 60%, var(--glow-3), transparent 70%); filter:blur(10px); opacity:0.8; pointer-events:none; z-index:0; } .hero .container,.hero .container-narrow{position:relative;z-index:1;} .hero-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:32px;align-items:center;} @media (max-width:960px){.hero-grid{grid-template-columns:1fr;}} .hero h1{font-size:clamp(42px,6.2vw,72px);margin:20px 0 24px;font-weight:700;letter-spacing:-0.02em;line-height:1.06;} .hero .lede{font-size:19px;color:var(--text-dim);max-width:520px;} .hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;} .hero-meta{display:flex;gap:28px;margin-top:52px;flex-wrap:wrap;} .hero-meta div{font-family:var(--f-mono);font-size:12.5px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.08em;} .hero-meta strong{display:block;font-family:var(--f-display);font-size:24px;color:var(--text);font-weight:600;letter-spacing:0;text-transform:none;margin-bottom:4px;} /* orbit diagram */ .orbit-wrap{position:relative;width:100%;max-width:760px;margin:0 auto;} .orbit-wrap::before{content:"";display:block;padding-top:100%;} .orbit-wrap svg{position:absolute;top:0;left:0;width:100%;height:100%;display:block;} .orbit-ring{fill:none;stroke:var(--hairline-strong);stroke-dasharray:2 6;} .orbit-anim{animation:spin 90s linear infinite;transform-origin:280px 280px;} .orbit-anim.rev{animation-direction:reverse;animation-duration:120s;} @keyframes spin{to{transform:rotate(360deg);}} .orbit-line{stroke:var(--hairline);stroke-width:1;} .orbit-node{fill:var(--surface-2);stroke:var(--hairline-strong);} .orbit-node-label{font-family:var(--f-mono);font-size:10px;fill:var(--text-dim);} .orbit-core{fill:var(--gold);} .orbit-core-label{font-family:var(--f-display);font-weight:700;fill:var(--on-accent);font-size:15px;} /* ---------- cards ---------- */ .grid{display:grid;gap:22px;} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-2{grid-template-columns:repeat(2,1fr);} @media (max-width:880px){.grid-3,.grid-2{grid-template-columns:1fr;}} .card{ position:relative; background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--radius-m); padding:32px 30px 30px; overflow:hidden; transition:border-color .25s var(--ease), transform .2s var(--ease), box-shadow .3s var(--ease); } .card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient-brand); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); } .card:hover{ border-color:var(--hairline-strong); transform:translateY(-4px); box-shadow:0 18px 40px -22px var(--glow-1), 0 8px 20px -14px var(--glow-2); } .card:hover::before{transform:scaleX(1);} .card:active{transform:translateY(-1px) scale(0.99);} .card h3{font-size:19px;margin-bottom:10px;} .card p{color:var(--text-dim);font-size:15px;margin-bottom:0;} .card .tag{font-family:var(--f-mono);font-size:11px;color:var(--teal);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;display:inline-block;} .icon-badge{ width:48px;height:48px;border-radius:14px; display:inline-flex;align-items:center;justify-content:center; background:var(--gradient-brand); color:#fff; margin-bottom:18px; box-shadow:0 10px 24px -12px var(--glow-1); transition:transform .3s var(--ease); } .icon-badge svg{width:22px;height:22px;} .card:hover .icon-badge{transform:rotate(-6deg) scale(1.06);} /* portfolio product card */ .product-card{ position:relative; border:1px solid var(--hairline); border-radius:var(--radius-l); padding:34px; background:linear-gradient(160deg,var(--surface-2) 0%, var(--surface-3) 100%); display:flex;flex-direction:column;gap:14px;height:100%; overflow:hidden; transition:transform .25s var(--ease), box-shadow .3s var(--ease), border-color .25s var(--ease); } .product-card::before{ content:""; position:absolute;top:0;left:0;right:0;height:4px; background:var(--card-line, var(--gradient-brand)); transform:scaleX(0);transform-origin:left; transition:transform .4s var(--ease); } .product-card:hover{ transform:translateY(-6px); border-color:var(--hairline-strong); box-shadow:0 24px 48px -24px var(--card-glow, var(--glow-1)), 0 10px 24px -16px var(--glow-2); } .product-card:hover::before{transform:scaleX(1);} .product-card:active{transform:translateY(-2px) scale(0.985);} .product-card .category{ font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em; color:var(--card-text, var(--accent-1-dim)); background:var(--card-tint, var(--gradient-brand-soft)); border:1px solid var(--hairline-strong); padding:5px 12px;border-radius:100px;display:inline-flex;align-self:flex-start; } .product-card .dot{width:10px;height:10px;border-radius:50%;} .product-card-top{display:flex;align-items:center;justify-content:space-between;} .product-card h3{font-size:24px;margin:0;transition:color .2s var(--ease);} .product-card:hover h3{color:var(--card-text, var(--accent-1));} .product-card .domain{font-family:var(--f-mono);font-size:12.5px;color:var(--text-mute);} .product-card .desc{color:var(--text-dim);font-size:15px;flex:1;} .product-card .meta-row{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--f-mono);font-size:11.5px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em;border-top:1px solid var(--hairline);padding-top:16px;} .product-card .meta-row strong{color:var(--text-dim);font-weight:500;} .product-card .visit{font-size:13.5px;font-weight:600;color:var(--card-text, var(--teal));display:inline-flex;align-items:center;gap:6px;} .product-card .visit svg{transition:transform .2s var(--ease);} .product-card:hover .visit svg{transform:translate(4px,-4px);} /* per-product accent modifiers, cycled across the portfolio */ .accent-violet{--card-glow:var(--glow-1);--card-line:linear-gradient(120deg,var(--accent-1),var(--accent-3));--card-text:var(--accent-1-dim);--card-tint:rgba(111,92,240,0.10);} .accent-blue{--card-glow:var(--glow-2);--card-line:linear-gradient(120deg,var(--accent-2),var(--accent-1));--card-text:var(--accent-2-dim);--card-tint:rgba(61,125,255,0.10);} .accent-lilac{--card-glow:var(--glow-3);--card-line:linear-gradient(120deg,var(--accent-3),var(--accent-2));--card-text:var(--accent-1-dim);--card-tint:rgba(155,111,242,0.10);} [data-theme="dark"] .accent-violet{--card-text:var(--accent-1);} [data-theme="dark"] .accent-blue{--card-text:var(--accent-2);} [data-theme="dark"] .accent-lilac{--card-text:var(--accent-3);} /* numbered process */ .process-item{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:30px 0;border-top:1px solid var(--hairline);} .process-item:last-child{border-bottom:1px solid var(--hairline);} .process-num{font-family:var(--f-mono);color:var(--gold);font-size:14px;padding-top:4px;} .process-item h3{font-size:20px;margin-bottom:8px;} .process-item p{color:var(--text-dim);margin-bottom:0;max-width:640px;} /* stat strip */ .stat-strip{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--hairline);border-radius:var(--radius-m);overflow:hidden;background:var(--surface-2);} .stat{flex:1;min-width:150px;padding:30px 26px;border-right:1px solid var(--hairline);transition:background .25s var(--ease);} .stat:hover{background:var(--surface-3);} .stat:last-child{border-right:0;} .stat strong{display:block;font-family:var(--f-display);font-size:34px;font-weight:700;margin-bottom:4px;background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent;} .stat span{font-family:var(--f-mono);font-size:12px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em;} /* CTA band */ .cta-band{ position:relative; border-radius:var(--radius-l); background: var(--gradient-brand-soft), linear-gradient(135deg,var(--surface-2),var(--surface-3)); padding:64px;text-align:center;border:1px solid var(--hairline-strong); overflow:hidden; } .cta-band::after{ content:""; position:absolute; inset:-40% -10% auto -10%; height:220px; background:radial-gradient(50% 100% at 50% 0%, var(--glow-1), transparent 70%); pointer-events:none; } .cta-band > *{position:relative;z-index:1;} .cta-band h2{font-size:clamp(26px,3.6vw,38px);margin-bottom:14px;} .cta-band p{color:var(--text-dim);max-width:520px;margin:0 auto 30px;} .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} @media (max-width:640px){.cta-band{padding:40px 24px;}} /* footer */ .site-footer{background:var(--surface);border-top:1px solid var(--hairline);padding:72px 0 32px;} .footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:36px;margin-bottom:56px;} @media (max-width:880px){.footer-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:520px){.footer-grid{grid-template-columns:1fr;}} .footer-grid h4{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);margin-bottom:16px;} .footer-grid ul{display:flex;flex-direction:column;gap:11px;} .footer-grid a{color:var(--text-dim);font-size:14.5px;transition:color .2s var(--ease);} .footer-grid a:hover{color:var(--teal);} .footer-brand p{color:var(--text-dim);font-size:14.5px;max-width:280px;} .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:28px;border-top:1px solid var(--hairline);font-size:13px;color:var(--text-mute);} .footer-bottom .legal-links{display:flex;gap:20px;flex-wrap:wrap;} .footer-bottom a:hover{color:var(--teal);} /* misc */ .badge-row{display:flex;flex-wrap:wrap;gap:10px;} .badge{font-family:var(--f-mono);font-size:12px;padding:7px 14px;border:1px solid var(--hairline-strong);border-radius:100px;color:var(--text-dim);} .breadcrumbs{font-family:var(--f-mono);font-size:12.5px;color:var(--text-mute);padding:22px 0 0;} .breadcrumbs a{color:var(--text-mute);} .breadcrumbs a:hover{color:var(--teal);} /* legal / long-form text pages */ .prose h2{font-size:24px;margin-top:44px;} .prose h3{font-size:18px;margin-top:28px;} .prose p,.prose li{color:var(--text-dim);font-size:15.5px;} .prose ul{margin:0 0 1em 1.2em;} .prose li{margin-bottom:.5em;} .prose strong{color:var(--text);} .updated-tag{font-family:var(--f-mono);font-size:12.5px;color:var(--text-mute);} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;} @media (max-width:880px){.two-col{grid-template-columns:1fr;gap:36px;}} .contact-card{border:1px solid var(--hairline);border-radius:var(--radius-m);padding:28px;background:var(--surface-2);} .contact-card h3{font-size:15px;font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text-mute);margin-bottom:14px;} .contact-card p{font-size:16px;margin-bottom:4px;} form.contact-form{display:flex;flex-direction:column;gap:18px;} .field{display:flex;flex-direction:column;gap:8px;} .field label{font-family:var(--f-mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-mute);} .field input,.field select,.field textarea{ background:var(--surface-2);border:1px solid var(--hairline-strong);border-radius:var(--radius-s); padding:13px 16px;color:var(--text);font-family:var(--f-body);font-size:15px; } .field textarea{resize:vertical;min-height:120px;} .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);} /* ---------- responsive polish (tablet + small phone) ---------- */ @media (max-width:1080px){ .container,.container-narrow{padding:0 20px;} } @media (max-width:900px) and (min-width:641px){ .grid-3{grid-template-columns:repeat(2,1fr);} } @media (max-width:640px){ .container,.container-narrow{padding:0 16px;} section{padding:52px 0;} .hero{padding:56px 0 28px;} .hero-meta{gap:20px;} .hero-actions .btn{width:100%;justify-content:center;} .hero-actions{flex-direction:column;} .stat{min-width:130px;padding:20px 16px;} .stat strong{font-size:24px;} .card,.product-card,.contact-card{padding:22px;} .cta-band{padding:32px 20px;} .cta-actions .btn{width:100%;justify-content:center;} .cta-actions{flex-direction:column;} .process-item{grid-template-columns:1fr;gap:8px;} .footer-bottom{flex-direction:column;align-items:flex-start;} .orbit-wrap{max-width:440px;} } @media (max-width:380px){ .hero h1{font-size:30px;} .brand-logo{height:22px;} .badge{font-size:11px;padding:6px 11px;} } /* very large screens: keep line lengths and diagram in check */ @media (min-width:1600px){ .container{max-width:1360px;} }