/* ═══════════════════════════════════════════════════════════════ agersoftware v2.0 — design system ONE source of truth. Theme = [data-theme] on . Every color is a token. Change the attribute → everything flips. ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ---- Shared tokens (theme-independent) ---- */ :root { --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Manrope', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --accent-blue: #6aa6ff; --accent-violet: #b98cff; --accent-amber: #ffc46a; --radius-sm: 10px; --radius-md: 18px; --radius-lg: 26px; --radius-pill: 999px; --maxw: 1280px; --pad-x: 48px; --transition: .25s cubic-bezier(.2,.8,.2,1); } /* ═══════════════ DARK THEME ═══════════════ */ [data-theme="dark"] { --bg: #0a1227; --bg-elevated: #15171c; --surface: rgba(255,255,255,0.04); --surface-hover: rgba(255,255,255,0.07); --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.16); --text: #f3f4f7; --text-muted: rgba(243,244,247,0.62); --text-dim: rgba(243,244,247,0.42); --btn-bg: #f3f4f7; --btn-fg: #0a0b0f; --btn-hover: #ffffff; --grid-line: rgba(118,150,255,0.18); --hero-bg: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(91,124,250,0.18), transparent 65%), #0a1227; --nav-bg: #0a1c37; --footer-bg: #0a1c37; } /* ═══════════════ LIGHT THEME ═══════════════ */ [data-theme="light"] { --bg: #f3f7ff; --bg-elevated: #ffffff; --surface: #ffffff; --surface-hover: #eef4ff; --border: rgba(20,50,110,0.12); --border-strong: rgba(20,50,110,0.20); --text: #0f2244; --text-muted: rgba(15,34,68,0.60); --text-dim: rgba(15,34,68,0.40); --btn-bg: #1f4fd6; --btn-fg: #ffffff; --btn-hover: #1a44bd; --grid-line: rgba(60,110,220,0.10); --hero-bg: linear-gradient(160deg, #dbe8ff 0%, #e6edff 45%, #f0f4ff 100%); --nav-bg: rgba(243,247,255,0.82); --footer-bg: #0a1c37; } /* ---- Base ---- */ html, body { height: 100%; } html { transition: background-color 0.55s ease, color 0.55s ease; } /* Smooth theme crossfade on color-bearing elements — targeted, not * */ body, .nav, .footer, .section, .hero, .btn, .card, .surface, .index-row, .feature-card, .cta-band { transition: background-color 0.55s ease, border-color 0.55s ease, color 0.45s ease, box-shadow 0.45s ease; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background 0.7s ease, color 0.7s ease; } ::selection { background: rgba(106,166,255,0.35); } a { color: inherit; text-decoration: none; } /* ---- Layout helpers ---- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } .section { padding: 80px var(--pad-x); position: relative; } .section-inner { max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 1; } .eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; } .h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px,3.6vw,44px); letter-spacing: -0.02em; color: var(--text); } .lead { font-size: clamp(16px,1.5vw,20px); line-height: 1.55; color: var(--text-muted); } /* ---- Grid overlay (single, theme-aware) ---- */ .grid-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 54px 54px; -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 35%, transparent 82%); mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 35%, transparent 82%); } /* ---- Nav ---- */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--pad-x); background: var(--nav-bg); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 12px; } .nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; } .brand-mark { width: 22px; height: 22px; background: var(--text); transform: rotate(45deg); border-radius: 5px; } .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--text); } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-link { font-size: 14.5px; color: var(--text-muted); cursor: pointer; background: none; border: none; font-family: var(--font-body); position: relative; padding: 6px 10px; border-radius: 8px; display: inline-flex; align-items: center; text-decoration: none; } [data-theme="light"] .nav-link { color: rgba(15,34,68,0.82); } .nav-link:hover { color: #fff !important; } .nav-link .caret { font-size: 9px; opacity: .6; margin-left: 3px; } /* ── Mega menus ── */ .mega, .tools-mega { display: none; position: fixed; top: 61px; left: 0; right: 0; z-index: 39; pointer-events: none; } .mega-panel { pointer-events: auto; } .mega.is-open, .tools-mega.is-open { display: block; } .mega-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; } /* ── Mega menu panel ── */ @keyframes megaSpectral { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .mega-panel { width: 100%; max-width: 460px; margin: 0 auto; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; position: relative; } .mega-panel::before { display: none; } .mega-panel::after { display: none; } [data-theme="dark"] .mega-panel { border-top: none; box-shadow: none; } [data-theme="light"] .mega-panel { border-top: none; box-shadow: none; } .mega-inner { position: relative; z-index: 1; padding: 28px 32px 32px; background: var(--bg-elevated); background-image: linear-gradient(135deg, rgba(106,166,255,0.12) 0%, rgba(185,140,255,0.09) 45%, rgba(30,184,160,0.07) 100%); border-top: 2px solid rgba(185,140,255,0.45); box-shadow: 0 24px 64px rgba(0,0,0,.50); } .mega-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 20px; } .mega-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .mega-card { display: flex; flex-direction: column; gap: 0; border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden; text-decoration: none; transition: border-color var(--transition), box-shadow var(--transition); } .mega-card:hover { border-color: var(--accent, var(--border-strong)); box-shadow: 0 4px 18px rgba(0,0,0,.18); } .mega-card .ph { height: 96px; background: var(--surface); font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); display: flex; align-items: center; justify-content: center; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--border); } .mega-card .body { padding: 14px 16px; } .mega-card .row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .mega-card .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--text-dim)); flex-shrink: 0; } .mega-card h4 { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text); } .mega-card p { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 8px; } .mega-card .chips { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-dim); align-items: center; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; transition: all var(--transition); border: none; } @keyframes btnGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .btn-primary { background: var(--btn-bg); color: var(--btn-fg); transition: background .18s ease, box-shadow .18s ease, opacity .18s ease !important; } .btn-primary:hover { background: linear-gradient(270deg, var(--btn-bg), #7c6ff7, #4a9af5, var(--btn-bg)) !important; background-size: 300% 300% !important; animation: btnGradientShift 3s ease infinite !important; box-shadow: 0 8px 28px rgba(120,100,255,.35) !important; } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); } .btn-ghost:hover { background: var(--surface); } .btn-accent { background: rgba(106,166,255,0.14); color: var(--accent-blue); border: 1px solid rgba(106,166,255,0.35); } .btn-accent:hover { background: rgba(106,166,255,0.22); } @keyframes heroGlow1 { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity:.5; } 40% { transform: translate(-44%,-56%) scale(1.15); opacity:.7; } 70% { transform: translate(-56%,-46%) scale(0.9); opacity:.4; } } @keyframes heroGlow2 { 0%,100% { transform: translate(0,0) scale(1); opacity:.4; } 35% { transform: translate(30px,-20px) scale(1.12); opacity:.6; } 65% { transform: translate(-18px,15px) scale(0.88); opacity:.35; } } /* ---- Hero ---- */ .hero { position: relative; background: var(--hero-bg); padding: 110px var(--pad-x) 90px; text-align: center; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 40%; left: 35%; transform: translate(-50%,-50%); width: 55%; height: 65%; background: radial-gradient(ellipse at center, rgba(106,166,255,0.45), transparent 70%); pointer-events: none; z-index: 0; filter: blur(6px); animation: heroGlow1 11s ease-in-out infinite; } .hero::after { content: ''; position: absolute; top: 30%; right: 10%; width: 38%; height: 55%; background: radial-gradient(ellipse at center, rgba(185,140,255,0.38), transparent 65%); pointer-events: none; z-index: 0; filter: blur(8px); animation: heroGlow2 14s ease-in-out infinite; } /* Animated spectral wash — light theme only */ .hero-spectral { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; } [data-theme="light"] .hero-spectral { opacity: 0.85; } .subhero .hero-spectral, .form-hero .hero-spectral { opacity: 0; -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 30%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 80% 90% at 70% 30%, #000 30%, transparent 78%); } [data-theme="light"] .subhero .hero-spectral, [data-theme="light"] .form-hero .hero-spectral { opacity: 0.55; } .subhero-grid, .form-hero-inner { position: relative; z-index: 1; } .form-hero-inner { max-width: 860px; margin: 0 auto; } .hero-badge { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border-strong); padding: 8px 16px; border-radius: var(--radius-pill); margin-bottom: 34px; } .hero-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(48px,8vw,116px); line-height: 0.94; letter-spacing: -0.035em; color: var(--text); margin: 0; } .hero-title .grad { background: linear-gradient(100deg, var(--accent-blue), var(--accent-violet) 52%, var(--accent-amber)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { font-size: clamp(16px,1.5vw,20px); line-height: 1.55; color: var(--text-muted); max-width: 52ch; margin: 32px auto 0; } .hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 40px; flex-wrap: wrap; } /* ---- Service index ---- */ .index-bar { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); padding-bottom: 18px; border-bottom: 1.5px solid var(--border); } .index-row { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 28px; padding: 36px 8px; border-bottom: 1px solid var(--border); cursor: pointer; transition: all var(--transition); } .index-row:hover { padding-left: 24px; background: var(--surface); } .index-num { font-family: var(--font-mono); font-size: 15px; } .index-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px,3.6vw,44px); letter-spacing: -0.02em; margin: 0 0 8px; color: var(--text); } .index-desc { font-size: 15px; color: var(--text-muted); margin: 0; max-width: 62ch; } .index-arrow { width: 46px; height: 46px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; font-size: 18px; border: 1.5px solid; } .c-blue { color: var(--accent-blue); border-color: rgba(106,166,255,0.5); } .c-violet { color: var(--accent-violet); border-color: rgba(185,140,255,0.5); } .c-amber { color: var(--accent-amber); border-color: rgba(255,196,106,0.5); } /* ---- Cards ---- */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card { position: relative; padding: 32px; border: 1.5px solid var(--border); background: var(--surface); border-radius: var(--radius-md); cursor: pointer; overflow: hidden; transition: all var(--transition); } .card:hover { transform: translateY(-5px); background: var(--surface-hover); border-color: var(--border-strong); } .card-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; margin-bottom: 10px; } .card-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; margin: 0 0 10px; letter-spacing: -0.01em; color: var(--text); } .card-desc { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); margin: 0 0 20px; } .card-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; } .tag { font-size: 12px; padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); background: var(--surface); } .card-link { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; } /* ---- Capability chips ---- */ .chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .chip { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 9px 16px; } /* ---- CTA band ---- */ .cta-band { position: relative; max-width: 860px; margin: 0 auto; text-align: center; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 60px 48px; overflow: hidden; } .cta-glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 520px; height: 420px; background: radial-gradient(circle, rgba(91,124,250,0.26), transparent 62%); pointer-events: none; } .cta-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px,4.5vw,52px); letter-spacing: -0.025em; margin: 0 0 22px; color: var(--text); position: relative; } /* ---- Footer ---- */ .footer { background: var(--footer-bg); border-top: 1px solid rgba(255,255,255,0.07); padding: 64px var(--pad-x) 40px; position: relative; overflow: hidden; } @keyframes footerSmoke1 { 0%,100% { transform: translateX(-50%) translateY(0) scale(1); opacity:1; } 25% { transform: translateX(-40%) translateY(-30px) scale(1.15); opacity:.75; } 50% { transform: translateX(-55%) translateY(12px) scale(0.9); opacity:.9; } 75% { transform: translateX(-45%) translateY(-20px) scale(1.1); opacity:.8; } } @keyframes footerSmoke2 { 0%,100% { transform: translateX(0) translateY(0) scale(1); opacity:1; } 30% { transform: translateX(35px) translateY(-25px) scale(1.12); opacity:.7; } 60% { transform: translateX(-20px) translateY(15px) scale(0.88); opacity:.85; } 80% { transform: translateX(15px) translateY(-10px) scale(1.06); opacity:.8; } } @keyframes footerSmoke3 { 0%,100% { transform: translateX(0) scale(1); opacity:.6; } 50% { transform: translateX(-25px) scale(1.18); opacity:1; } } .footer::before { content: ''; position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); width: 130%; height: 380px; background: radial-gradient(ellipse 80% 70% at 28% 90%, rgba(106,166,255,0.45), transparent 60%), radial-gradient(ellipse 60% 60% at 72% 85%, rgba(185,140,255,0.37), transparent 60%); pointer-events: none; z-index: 0; filter: blur(10px); animation: footerSmoke1 10s ease-in-out infinite; } .footer::after { content: ''; position: absolute; bottom: -10px; right: 2%; width: 55%; height: 260px; background: radial-gradient(ellipse 90% 80% at 55% 95%, rgba(30,184,160,0.34), transparent 65%), radial-gradient(ellipse 50% 50% at 80% 70%, rgba(255,196,106,0.18), transparent 60%); pointer-events: none; z-index: 0; filter: blur(10px); animation: footerSmoke2 13s ease-in-out infinite; } .footer > * { position: relative; z-index: 1; } .footer-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 200px 1fr; gap: 48px 60px; align-items: start; margin-bottom: 48px; } .footer-about { display: flex; flex-direction: column; gap: 14px; } .footer-about p { font-size: 13px; color: rgba(243,244,247,0.45); line-height: 1.65; max-width: 200px; } .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .footer-col { display: flex; flex-direction: column; gap: 10px; } .footer-col .label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(243,244,247,0.35); margin-bottom: 4px; } .footer-col a { font-size: 13.5px; color: rgba(243,244,247,0.65); text-decoration: none; transition: color .18s ease; } .footer-col a:hover { color: #fff; } /* newsletter strip */ .footer-newsletter { max-width: var(--maxw); margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .newsletter-copy strong { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: #f3f4f7; } .newsletter-copy p { font-size: 13px; color: rgba(243,244,247,0.45); margin-top: 4px; } .newsletter-form { display: flex; flex-direction: column; gap: 6px; } .newsletter-row { display: flex; gap: 8px; } .newsletter-row input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 10px 16px; color: #f3f4f7; font-family: var(--font-body); font-size: 13.5px; outline: none; min-width: 220px; transition: border-color .2s; } .newsletter-row input:focus { border-color: rgba(185,140,255,0.5); } .newsletter-row button { background: rgba(185,140,255,0.18); border: 1px solid rgba(185,140,255,0.35); border-radius: 10px; padding: 10px 20px; color: #b98cff; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .2s; } .newsletter-row button:hover { background: rgba(185,140,255,0.28); } /* bottom bar */ .footer-bottom { max-width: var(--maxw); margin: 32px auto 0; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .footer-bottom p { font-size: 12px; color: rgba(243,244,247,0.28); } .footer-links { display: flex; gap: 24px; } .footer-link { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(243,244,247,0.35); text-decoration: none; cursor: pointer; transition: color .18s; } .footer-link:hover { color: #fff; } .footer .brand-name { color: #f3f4f7; } /* ---- Theme toggle (fixed) ---- */ .theme-toggle { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; gap: 4px; padding: 5px; background: rgba(14,16,24,0.92); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-pill); box-shadow: 0 12px 40px rgba(0,0,0,0.4); } .theme-btn { padding: 8px 18px; border-radius: var(--radius-pill); border: none; cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 600; background: transparent; color: rgba(243,244,247,0.6); transition: all var(--transition); } .theme-btn.active { background: #f3f4f7; color: #0a0b0f; } @media (max-width: 860px) { .card-grid { grid-template-columns: 1fr; } .index-row { grid-template-columns: 50px 1fr auto; gap: 16px; } .nav-links { gap: 16px; } } /* ═══════════════════════════════════════════════════════════════ SUB-PAGE COMPONENTS (Desktop / WebApps / WebDesign) Per-page accent via [data-accent] → --pa (solid) + --pa-rgb (triplet) ═══════════════════════════════════════════════════════════════ */ [data-accent="blue"] { --pa: #6aa6ff; --pa-rgb: 106,166,255; } [data-accent="violet"] { --pa: #b98cff; --pa-rgb: 185,140,255; } [data-accent="amber"] { --pa: #e6a030; --pa-rgb: 230,160,48; } [data-theme="dark"][data-accent="amber"] { --pa: #ffc46a; --pa-rgb: 255,196,106; } /* page-accent button */ .btn-pa { background: var(--pa); color: #06121f; font-weight: 700; } .btn-pa:hover { filter: brightness(1.08); } /* sub nav */ .subnav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--pad-x); background: var(--nav-bg); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); } .subnav-back { display: flex; align-items: center; gap: 11px; cursor: pointer; } .subnav-back .arr { font-size: 17px; color: var(--text-muted); } .subnav-tag { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--pa); } .subnav-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--pa); box-shadow: 0 0 10px var(--pa); } /* sub hero */ .subhero { position: relative; padding: 100px var(--pad-x) 80px; max-width: var(--maxw); margin: 0 auto; overflow: hidden; } .subhero-glow { position: absolute; top: -40px; right: 6%; width: 560px; height: 560px; background: radial-gradient(circle, rgba(var(--pa-rgb),0.20), transparent 62%); filter: blur(14px); pointer-events: none; animation: agGlow 9s ease-in-out infinite; } .subhero-grid { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; } .subhero-eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pa); margin-bottom: 24px; } .subhero-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(42px,5.6vw,76px); line-height: 1.0; letter-spacing: -0.03em; margin: 0; color: var(--text); } .subhero-sub { font-size: clamp(16px,1.4vw,20px); line-height: 1.55; color: var(--text-muted); max-width: 50ch; margin: 28px 0 0; } .subhero-cta { display: flex; gap: 13px; margin-top: 36px; flex-wrap: wrap; } /* window mock */ .window-mock { border: 1px solid rgba(var(--pa-rgb),0.25); border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,0.5); animation: agFloat 7s ease-in-out infinite; } [data-theme="light"] .window-mock { box-shadow: 0 30px 70px rgba(20,50,110,0.18); } .window-bar { height: 34px; background: rgba(var(--pa-rgb),0.08); border-bottom: 1px solid rgba(var(--pa-rgb),0.18); display: flex; align-items: center; gap: 6px; padding: 0 13px; } .window-dot { width: 9px; height: 9px; border-radius: 999px; background: rgba(var(--pa-rgb),0.45); } .window-dot.live { background: var(--pa); } .window-body { display: grid; grid-template-columns: 64px 1fr; height: 240px; } .window-rail { border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; padding: 16px 0; align-items: center; } .window-rail i { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-hover); display: block; } .window-rail i.on { background: var(--pa); } .window-content { padding: 18px; display: flex; flex-direction: column; gap: 10px; } .wc-line { height: 8px; border-radius: 4px; background: var(--border); } .wc-line.lg { height: 11px; background: var(--border-strong); } .wc-tiles { display: flex; gap: 9px; margin-top: 10px; } .wc-tile { flex: 1; height: 54px; border-radius: 9px; background: var(--surface-hover); } .wc-tile.pa { background: rgba(var(--pa-rgb),0.14); border: 1px solid rgba(var(--pa-rgb),0.25); } /* features */ .feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .feature-card { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); transition: all var(--transition); } .feature-card:hover { border-color: rgba(var(--pa-rgb),0.4); transform: translateY(-3px); } .feature-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--pa-rgb),0.15); border: 1px solid rgba(var(--pa-rgb),0.3); margin-bottom: 18px; } .feature-card h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0 0 9px; color: var(--text); } .feature-card p { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0; } /* showcase */ .showcase-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; } .work-card { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); } .work-thumb { height: 300px; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, rgba(var(--pa-rgb),0.1) 0 13px, var(--surface) 13px 26px); font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); letter-spacing: 0.06em; text-align: center; padding: 20px; } .work-meta { padding: 18px 22px; } .work-meta b { font-weight: 600; font-size: 16px; color: var(--text); } .work-meta span { font-size: 13px; color: var(--text-muted); margin-left: 10px; } /* process */ .process-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; } .step { border-top: 2px solid rgba(var(--pa-rgb),0.4); padding-top: 20px; } .step.first { border-top-color: var(--pa); } .step-num { font-family: var(--font-mono); font-size: 13px; color: var(--pa); margin-bottom: 12px; } .step h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0 0 8px; color: var(--text); } .step p { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); margin: 0; } /* sub CTA */ .subcta { position: relative; background: var(--bg-elevated); border: 1px solid rgba(var(--pa-rgb),0.22); border-radius: var(--radius-lg); padding: 60px 48px; overflow: hidden; text-align: center; } .subcta-glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 520px; height: 420px; background: radial-gradient(circle, rgba(var(--pa-rgb),0.26), transparent 62%); pointer-events: none; } .subcta h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px,3.6vw,46px); letter-spacing: -0.02em; margin: 0 0 16px; color: var(--text); position: relative; } @keyframes agGlow { 0%,100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } @keyframes agFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (max-width: 860px) { .subhero-grid { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: 1fr; } .showcase-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: repeat(2,1fr); } } /* ═══════════════ FORMS (Contact + Wizard) ═══════════════ */ .form-hero { position: relative; padding: 90px var(--pad-x) 50px; text-align: center; overflow: hidden; } .form-hero-glow { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; background: radial-gradient(circle, rgba(91,124,250,0.2), transparent 62%); filter: blur(24px); pointer-events: none; } .form-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(38px,5vw,64px); line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 18px; color: var(--text); } .form-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px; } [data-theme="light"] .form-card { background: rgba(60,80,250,0.06); border-color: rgba(60,80,250,0.14); } [data-theme="light"] .form-input:hover, [data-theme="light"] .form-select:hover, [data-theme="light"] .form-textarea:hover { border-color: rgba(106,166,255,0.45); background: rgba(60,80,250,0.04); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; } .form-field { display: flex; flex-direction: column; gap: 8px; } .form-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .form-label .req { color: var(--accent-blue); } .form-input, .form-select, .form-textarea { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 13px 16px; font-size: 15px; color: var(--text); font-family: var(--font-body); outline: none; width: 100%; transition: border-color .2s ease, background .2s ease; } [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .form-textarea { background: rgba(255,255,255,0.05); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent-blue); } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-dim); } .form-textarea { resize: vertical; line-height: 1.55; min-height: 130px; } .form-select { appearance: none; cursor: pointer; } .select-wrap { position: relative; } .select-wrap .caret { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--text-dim); pointer-events: none; } .form-check { display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-bottom: 20px; transition: all var(--transition); } .form-check:hover { border-color: var(--border-strong); } .form-check .box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--border-strong); background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--accent-blue); transition: all var(--transition); } .form-check.on .box { border-color: var(--accent-blue); background: rgba(106,166,255,0.2); } .form-check .box .tick { opacity: 0; } .form-check.on .box .tick { opacity: 1; } .form-check .lbl b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); } .form-check .lbl small { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 3px; } .form-submit-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; } .form-note { font-size: 13px; color: var(--text-dim); } /* wizard */ .wiz { min-height: 100vh; display: flex; flex-direction: column; } .wiz-top { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; background: var(--nav-bg); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); flex-shrink: 0; } .wiz-back { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-muted); font-size: 14.5px; font-weight: 600; } .wiz-back:hover { color: var(--text); } .wiz-steps { display: flex; flex-direction: column; align-items: center; padding: 36px 24px 0; flex-shrink: 0; } .wiz-dots { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .wiz-dot { width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 15px; font-weight: 700; } .wiz-dot.active { background: var(--accent-blue); color: #0a1227; } .wiz-dot.idle { border: 1.5px solid var(--border-strong); color: var(--text-dim); } .wiz-bar { width: 60px; height: 2px; border-radius: 1px; background: var(--border-strong); overflow: hidden; } .wiz-bar i { display: block; height: 100%; background: var(--accent-blue); border-radius: 1px; transition: width .4s ease; } .wiz-meta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--text-dim); } .wiz-content { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 44px 24px 120px; } .wiz-panel { width: 100%; max-width: 680px; transition: opacity .35s ease, transform .35s ease; } .wiz-panel.leaving { opacity: 0; transform: translateY(8px); } .wiz-h { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px,3.5vw,38px); letter-spacing: -0.02em; margin: 0 0 8px; color: var(--text); } .wiz-p { font-size: 15px; color: var(--text-muted); margin: 0 0 40px; line-height: 1.5; } .wiz-group { margin-bottom: 30px; } .wiz-group-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; } .chip-row { display: flex; gap: 10px; flex-wrap: wrap; } .opt-chip { padding: 11px 20px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text-muted); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: all .18s ease; } .opt-chip:hover { border-color: var(--accent-blue); } .opt-chip.sel { border-color: var(--accent-blue); background: rgba(106,166,255,0.15); color: var(--text); } .wiz-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 36px; gap: 14px; } .word-count { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; } .word-count.ok { color: #4ec88a; } .success-card { max-width: 560px; margin: 60px auto; text-align: center; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 56px 44px; } .success-icon { width: 64px; height: 64px; border-radius: 999px; background: rgba(78,200,138,0.16); border: 1.5px solid rgba(78,200,138,0.5); display: flex; align-items: center; justify-content: center; font-size: 28px; color: #4ec88a; margin: 0 auto 24px; } /* ── Tools section (agersoftware-v3) ── */ .tools-section { padding: 80px 0; } .tools-section .section-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); } .tools-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; } .tools-heading { font-family: var(--font-display); font-size: clamp(26px,3.2vw,42px); font-weight: 700; color: var(--text); margin-bottom: 10px; } .tools-sub { color: var(--text-muted); font-size: 16px; margin-bottom: 48px; max-width: 560px; } .tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; } .tool-card { display: flex; flex-direction: column; gap: 14px; padding: 28px 26px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.13); background: radial-gradient(circle at 30% 20%, #242124 0%, #1a2435 48%, #003366 100%); text-decoration: none; color: var(--text); transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease; position: relative; overflow: hidden; } .tool-card::after { content:''; position:absolute; top:-50%; left:0; width:40%; height:200%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); filter: blur(8px); opacity:0; pointer-events:none; transform: translateX(-160%) rotate(9deg); } .tool-card:hover { transform: translateY(-5px) scale(1.012); box-shadow: 0 18px 44px rgba(0,0,0,.36), 0 0 42px rgba(106,166,255,.18); } .tool-card:hover::after { animation: tcScan 4s cubic-bezier(.33,0,.4,1); } @keyframes tcScan { 0% { transform:translateX(-160%) rotate(9deg); opacity:0; } 8% { opacity:.5; } 50% { transform:translateX(160%) rotate(9deg); opacity:0; } 100%{ transform:translateX(160%) rotate(9deg); opacity:0; } } .tool-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.07); } .tool-icon svg { width:20px; height:20px; } .tool-name { font-family:var(--font-display); font-size:16px; font-weight:700; color:#f3f4f7; } .tool-desc { font-size:13.5px; color:rgba(243,244,247,0.62); line-height:1.55; } .tool-arrow { margin-top:auto; font-size:13px; color:rgba(243,244,247,0.45); } .tool-card:hover .tool-arrow { color:#fff; } /* lighter gradient on tool cards in light mode */ [data-theme="light"] .tool-card { background: radial-gradient(circle at 30% 20%, #3a4a6e 0%, #2a3a5e 45%, #1a4d7a 100%); border-color: rgba(255,255,255,0.10); } /* ═══════════════════════════════════════════════════════════════ Auth full-page layout (split: form left, gradient right) Used by auth/*_full.php views ═══════════════════════════════════════════════════════════════ */ .auth-full { display:flex; min-height:100vh; } /* ── Left panel ── */ .afp-left { width:360px; flex-shrink:0; flex-grow:0; display:flex; flex-direction:column; padding:32px 40px; background:var(--bg); overflow-y:auto; } .afp-brand { display:flex; align-items:center; gap:8px; text-decoration:none; margin-bottom:28px; } .afp-brand-mark { width:16px; height:16px; background:var(--text); transform:rotate(45deg); border-radius:3px; flex-shrink:0; } .afp-brand-name { font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--text); } .afp-eyebrow { font-family:var(--font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-violet); margin-bottom:6px; } .afp-title { font-family:var(--font-display); font-size:clamp(17px,1.8vw,22px); font-weight:700; color:var(--text); line-height:1.22; margin-bottom:5px; } .afp-sub { font-size:12px; color:var(--text-muted); margin-bottom:20px; line-height:1.55; } .afp-form { flex:1; display:flex; flex-direction:column; } .afp-spacer { flex:1; min-height:20px; } .afp-footer { margin-top:20px; font-size:12.5px; color:var(--text-dim); text-align:center; } .afp-footer a { color:var(--accent-violet); font-weight:600; text-decoration:none; } /* ── Right panel ── */ .afp-right { flex:1; position:relative; overflow:hidden; background:linear-gradient(135deg, #0a0f1e 0%, #0d1540 35%, #0a1227 65%, #001a33 100%); display:flex; align-items:center; justify-content:center; } @keyframes afpOrb1 { 0%,100%{transform:translate(0,0) scale(1);} 40%{transform:translate(-40px,30px) scale(1.15);} 70%{transform:translate(25px,-20px) scale(0.9);} } @keyframes afpOrb2 { 0%,100%{transform:translate(0,0) scale(1);} 30%{transform:translate(30px,-35px) scale(1.2);} 65%{transform:translate(-20px,25px) scale(0.88);} } @keyframes afpOrb3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-25px,-20px) scale(1.1);} } .afp-orb { position:absolute; border-radius:50%; filter:blur(40px); pointer-events:none; mix-blend-mode:screen; } .afp-orb-1 { width:420px; height:420px; top:-80px; right:-60px; animation:afpOrb1 12s ease-in-out infinite; } .afp-orb-2 { width:360px; height:360px; bottom:-60px; left:-40px; animation:afpOrb2 15s ease-in-out infinite; } .afp-orb-3 { width:240px; height:240px; top:40%; left:30%; animation:afpOrb3 18s ease-in-out infinite; } .afp-grid { position:absolute; inset:0; pointer-events:none; opacity:.07; background-image:linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px); background-size:48px 48px; } /* Light-mode: right panel switches to a brighter deep blue, text stays white */ [data-theme="light"] .afp-right { background:linear-gradient(135deg, #1a2a5e 0%, #1e3a7a 35%, #1a4d8a 65%, #0d3366 100%); } [data-theme="light"] .afp-grid { opacity:.10; } [data-theme="light"] .afp-right-title { color:#fff; } [data-theme="light"] .afp-right-sub { color:rgba(255,255,255,0.75); } [data-theme="light"] .afp-bullet { color:rgba(255,255,255,0.82); } [data-theme="light"] .afp-right-badge { color:rgba(255,255,255,0.7); border-color:rgba(255,255,255,0.22); } .afp-right-content { position:relative; z-index:1; padding:60px; max-width:480px; } .afp-right-badge { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,0.5); border:1px solid rgba(255,255,255,0.12); border-radius:99px; padding:6px 14px; margin-bottom:28px; } .afp-right-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:#4ec88a; box-shadow:0 0 8px #4ec88a; } .afp-right-title { font-family:var(--font-display); font-size:clamp(26px,2.8vw,42px); font-weight:700; color:#fff; line-height:1.18; margin-bottom:16px; } .afp-right-title span { background:linear-gradient(135deg,#6aa6ff,#b98cff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .afp-right-sub { font-size:14px; color:rgba(255,255,255,0.55); line-height:1.7; margin-bottom:28px; } .afp-bullets { display:flex; flex-direction:column; gap:11px; } .afp-bullet { display:flex; align-items:center; gap:11px; font-size:13px; color:rgba(255,255,255,0.65); } .afp-bullet svg { flex-shrink:0; color:#4ec88a; } /* ── Auth form elements ── */ .afp-field { display:flex; flex-direction:column; gap:5px; margin-bottom:13px; } .afp-label { font-size:11.5px; font-weight:600; color:var(--text-muted); } .afp-input { background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:8px; padding:9px 12px; color:var(--text); font-family:var(--font-body); font-size:13px; outline:none; transition:border-color .2s, background .2s; width:100%; box-sizing:border-box; } .afp-input:focus { border-color:rgba(185,140,255,.55); background:rgba(255,255,255,.07); } [data-theme="light"] .afp-left { background:#f8f9fc; } [data-theme="light"] .afp-input { background:#fff; border-color:rgba(0,0,0,.12); } [data-theme="light"] .afp-input:focus { border-color:rgba(185,140,255,.55); } .afp-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .afp-hint { font-size:11px; color:var(--text-dim); line-height:1.5; } .afp-req { color:#ff6b6b; } .afp-alert-info { background:rgba(106,166,255,.10); border:1px solid rgba(106,166,255,.3); border-radius:8px; padding:9px 12px; color:#6aa6ff; font-size:11.5px; margin-bottom:14px; display:flex; align-items:flex-start; gap:8px; } .afp-alert-ok { background:rgba(78,200,138,.10); border:1px solid rgba(78,200,138,.3); border-radius:8px; padding:9px 12px; color:#4ec88a; font-size:11.5px; margin-bottom:14px; display:flex; align-items:flex-start; gap:8px; } .afp-pwd-bar { height:2px; border-radius:2px; background:var(--border); overflow:hidden; margin-top:4px; } .afp-pwd-fill { height:100%; border-radius:2px; transition:width .3s,background .3s; width:0%; background:#ff6b6b; } .afp-pwd-lbl { font-size:10.5px; color:var(--text-dim); margin-top:3px; } .afp-divider { display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--text-dim); font-size:11px; } .afp-divider::before,.afp-divider::after { content:''; flex:1; height:1px; background:var(--border); } .afp-remember { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .afp-check-label { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-muted); cursor:pointer; } /* OTP boxes */ .afp-otp-row { display:flex; gap:7px; justify-content:center; margin-bottom:18px; } .afp-otp-box { width:40px; height:50px; text-align:center; font-family:var(--font-mono); font-size:20px; font-weight:700; color:var(--text); background:rgba(255,255,255,0.05); border:1.5px solid var(--border); border-radius:9px; outline:none; transition:border-color .2s, background .2s; } .afp-otp-box:focus { border-color:#b98cff; background:rgba(185,140,255,0.08); } [data-theme="light"] .afp-otp-box { background:#fff; border-color:rgba(0,0,0,.15); }