/* ============================================================ REGULYZE — DESIGN SYSTEM v2 · "Creative Visual Storytelling" Master design language (approved Option 2) Fonts: Sora (display) · Manrope (body) · Inter (UI) · DM Mono Load Google Fonts + Tabler icons in before this file. ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root{ /* brand gradient family */ --indigo-d:#312E81; --indigo:#4F46E5; --indigo-l:#6366F1; --violet:#7C3AED; --violet-l:#A855F7; --emerald:#10B981; --emerald-d:#059669; --amber:#F59E0B; --rose:#F43F5E; --cyan:#06B6D4; --cyan-d:#0891B2; /* ink / neutrals */ --ink:#1E1B4B; --ink-2:#3F3D6B; --muted:#6B6896; --faint:#9C99C0; --bg:#FBFAFF; --bg-2:#F4F2FD; --surf:#FFFFFF; --line:#E9E6F7; --line-2:#F0EDFB; /* status */ --ok:#10B981; --ok-d:#059669; --ok-bg:rgba(16,185,129,.12); --warn:#F59E0B; --warn-d:#B45309; --warn-bg:rgba(245,158,11,.14); --fail:#F43F5E; --fail-d:#BE123C; --fail-bg:rgba(244,63,94,.12); --info:#4F46E5; --info-bg:rgba(99,102,241,.12); /* radii */ --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-2xl:26px; --r-pill:40px; /* spacing scale (8pt) */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; /* shadows */ --sh-xs:0 2px 8px rgba(80,70,200,.05); --sh-sm:0 8px 24px rgba(80,70,200,.06); --sh-md:0 16px 40px rgba(80,70,200,.10); --sh-lg:0 26px 60px rgba(80,70,200,.16); --sh-brand:0 10px 28px rgba(99,102,241,.35); /* motion */ --dur:.2s; --ease:cubic-bezier(.4,0,.2,1); /* gradients */ --grad-brand:linear-gradient(120deg,var(--indigo),var(--violet)); --grad-text:linear-gradient(120deg,var(--indigo),var(--violet) 55%,var(--cyan)); --grad-hero:linear-gradient(130deg,var(--indigo-d),var(--violet) 60%,var(--cyan)); } /* ---------- 2. RESET / BASE ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} a{text-decoration:none;color:inherit} ul{list-style:none} img{max-width:100%;display:block} button{cursor:pointer;font:inherit;border:none;background:none} html{scroll-behavior:smooth} body{font-family:'Manrope',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3,h4,h5{font-family:'Sora',sans-serif;letter-spacing:-.025em;line-height:1.1;color:var(--ink);font-weight:700} .container{max-width:1180px;margin:0 auto;padding:0 28px} /* gradient text helper */ .gradtext{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- 3. BUTTONS ---------- */ .btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-md);font-weight:700;font-size:15px;transition:all var(--dur) var(--ease);padding:13px 24px;font-family:'Manrope',sans-serif} .btn-grad{background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand)} .btn-grad:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(124,58,237,.45)} .btn-soft{background:#fff;color:var(--indigo);border:2px solid var(--line);box-shadow:var(--sh-xs)} .btn-soft:hover{border-color:var(--indigo-l);transform:translateY(-2px)} .btn-white{background:#fff;color:var(--indigo)} .btn-white:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.18)} .btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--line)} .btn-ghost:hover{color:var(--ink);background:var(--bg-2)} .btn-sm{padding:9px 16px;font-size:13.5px;border-radius:var(--r-sm)} .btn-lg{padding:15px 30px;font-size:16px} .btn-block{width:100%;justify-content:center} /* ---------- 4. CHIPS / TAGS / EYEBROW ---------- */ .chip{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;background:linear-gradient(120deg,rgba(99,102,241,.12),rgba(124,58,237,.12));color:var(--indigo);border:1px solid rgba(99,102,241,.2)} .tag{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:var(--r-pill);font-size:12px;font-weight:700} .t-ok{background:var(--ok-bg);color:var(--ok-d)} .t-warn{background:var(--warn-bg);color:var(--warn-d)} .t-fail{background:var(--fail-bg);color:var(--fail-d)} .t-info{background:var(--info-bg);color:var(--indigo)} .t-na{background:rgba(156,153,192,.16);color:var(--muted)} .eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);margin-bottom:14px} /* ---------- 5. NAVIGATION ---------- */ .site-head{position:sticky;top:0;z-index:200;background:rgba(251,250,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .head-inner{display:flex;align-items:center;gap:32px;height:66px} .logo-wrap{display:flex;align-items:center;gap:10px;font-family:'Sora';font-weight:700;font-size:19px;letter-spacing:-.03em;color:var(--ink)} .logo-wrap img{height:33px;width:auto} .nav-links{display:flex;gap:28px;margin-left:8px} .nav-links a{font-size:14.5px;font-weight:600;color:var(--muted);position:relative;padding:4px 0;transition:color var(--dur)} .nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--grad-brand);transition:right .25s var(--ease)} .nav-links a:hover{color:var(--ink)} .nav-links a:hover::after{right:0} .head-cta{margin-left:auto;display:flex;gap:10px;align-items:center} /* ---------- 6. CARDS ---------- */ .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-xs)} .card-pad{padding:30px} .card-hover{transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .card-hover:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)} /* gradient top-edge reveal */ .card-edge{position:relative;overflow:hidden} .card-edge::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--indigo),var(--violet),var(--cyan));opacity:0;transition:opacity .25s} .card-edge:hover::before{opacity:1} /* ---------- 7. SECTIONS ---------- */ .section{padding:84px 0} .section.tint{background:linear-gradient(180deg,var(--bg-2),var(--bg))} .sec-head{max-width:680px;margin:0 auto 60px;text-align:center} .sec-head h2{font-size:clamp(32px,3.9vw,48px);margin-bottom:14px} .sec-head p{color:var(--muted);font-size:16.5px;line-height:1.7} /* ---------- 8. ICON TILES (gradient) ---------- */ .ic-tile{display:grid;place-items:center;color:#fff;border-radius:var(--r-lg)} .ic-indigo{background:linear-gradient(135deg,#4F46E5,#6366F1)} .ic-violet{background:linear-gradient(135deg,#7C3AED,#A855F7)} .ic-cyan{background:linear-gradient(135deg,#06B6D4,#0891B2)} .ic-emerald{background:linear-gradient(135deg,#10B981,#059669)} .ic-blue{background:linear-gradient(135deg,#6366F1,#8B5CF6)} .ic-fuchsia{background:linear-gradient(135deg,#A855F7,#D946EF)} /* ---------- 9. FOOTER ---------- */ .site-foot{background:var(--ink);color:rgba(255,255,255,.65);padding:72px 0 38px} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px} .foot-brand .logo-wrap{color:#fff} .foot-brand p{margin-top:15px;font-size:14px;line-height:1.7;max-width:260px} .foot-col h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:15px} .foot-col a{display:block;font-size:14px;color:rgba(255,255,255,.65);padding:5px 0;transition:color var(--dur)} .foot-col a:hover{color:#fff} .foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:48px;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px} /* ---------- 10. INFO / ALERT BOXES ---------- */ .note{border-radius:var(--r-md);padding:13px 16px;font-size:13.5px;display:flex;gap:11px;line-height:1.55} .note i{font-size:18px;flex-shrink:0;margin-top:1px} .note-ok{background:var(--ok-bg);color:var(--ok-d);border:1px solid rgba(16,185,129,.25)} .note-warn{background:var(--warn-bg);color:var(--warn-d);border:1px solid rgba(245,158,11,.3)} .note-fail{background:var(--fail-bg);color:var(--fail-d);border:1px solid rgba(244,63,94,.25)} .note-info{background:var(--info-bg);color:var(--indigo);border:1px solid rgba(99,102,241,.25)} /* ---------- 11. ANIMATIONS ---------- */ @keyframes rg-scan{0%{left:-60px}100%{left:100%}} @keyframes rg-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes rg-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .rg-reveal{opacity:0} .rg-reveal.in{animation:rg-rise .6s var(--ease) forwards} /* ---------- 12. RESPONSIVE GRID HELPERS ---------- */ @media (max-width:900px){ .nav-links{display:none} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:600px){ .foot-grid{grid-template-columns:1fr} .section{padding:60px 0} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;scroll-behavior:auto!important} }