/* ============================================================ TEKOVEX STUDIOS, style.css Shared across all pages. All design tokens live here. Fonts are loaded via tags in each page's (paired with preconnect hints) to avoid the render-blocking @import chain. ============================================================ */ /* ─── DESIGN TOKENS ─── */ :root { /* Brand */ --cyan: #00C8F0; --violet: #9B30FF; --violet-mid: #6B21FF; --cyan-20: rgba(0,200,240,0.18); --violet-20: rgba(155,48,255,0.18); --cyan-08: rgba(0,200,240,0.08); --violet-08: rgba(155,48,255,0.08); --grad: linear-gradient(135deg, #00C8F0 0%, #9B30FF 100%); --grad-90: linear-gradient(90deg, #00C8F0 0%, #9B30FF 100%); /* Surface */ --bg: #08080F; --bg-2: #0E0E1A; --bg-3: #141424; --bg-4: #1A1A2E; --border: rgba(255,255,255,0.07); --border-2: rgba(255,255,255,0.13); /* Text */ --text: #F2F0FF; --text-2: #A8A4C0; --text-3: #6A667E; /* Typography */ --f-display: 'Clash Display', sans-serif; --f-body: 'Satoshi', sans-serif; --f-mono: 'JetBrains Mono', monospace; /* Spacing scale (8-point) */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem; --s12: 3rem; --s16: 4rem; --s20: 5rem; --s24: 6rem; /* Layout */ --max: 1240px; --pad: clamp(1.25rem, 4vw, 2.5rem); /* Motion */ --ease: cubic-bezier(0.16,1,0.3,1); --ease2: cubic-bezier(0.34,1.56,0.64,1); --fast: 0.15s; --mid: 0.3s; --slow: 0.6s; } /* ─── RESET ─── */ *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body { font-family: var(--f-body); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img,video { max-width:100%; height:auto; display:block; } a { color:inherit; text-decoration:none; } button { cursor:pointer; border:none; background:none; font:inherit; } ul,ol { list-style:none; } input,textarea,select { font:inherit; } @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}} :focus-visible { outline:2px solid var(--cyan); outline-offset:3px; border-radius:3px; } /* ─── SKIP LINK ─── */ .skip-link { position:absolute; top:-100%; left:var(--s4); background:var(--cyan); color:#000; padding:var(--s3) var(--s6); font-size:.82rem; font-weight:600; z-index:9999; border-radius:0 0 4px 4px; transition:top var(--fast); } .skip-link:focus { top:0; } /* ─── CONTAINER ─── */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); } /* ─── GRADIENT TEXT ─── */ .g-text { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ─── BUTTONS ─── */ .btn { display:inline-flex; align-items:center; gap:var(--s2); font-family:var(--f-body); font-size:.875rem; font-weight:600; padding:.75rem 1.75rem; border-radius:6px; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:transform var(--fast), box-shadow var(--fast), background var(--fast), border-color var(--fast), color var(--fast); position:relative; overflow:hidden; } .btn:active { transform:scale(0.97); } .btn svg { transition:transform var(--fast); flex-shrink:0; } .btn:hover svg { transform:translateX(3px); } .btn-primary { background: var(--grad); color: #fff; border-color: transparent; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(155,48,255,0.4); } .btn-outline { background: transparent; color: var(--text); border-color: var(--border-2); } .btn-outline:hover { border-color: var(--cyan); background: var(--cyan-08); color: var(--cyan); } .btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border); } .btn-ghost:hover { background: var(--bg-3); color: var(--text); border-color: var(--border-2); } .btn-sm { font-size:.8rem; padding:.55rem 1.2rem; } .btn-lg { font-size:1rem; padding:.9rem 2.2rem; } /* ─── EYEBROW LABEL ─── */ .eyebrow { font-family: var(--f-mono); font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); display: inline-flex; align-items: center; gap: var(--s3); } .eyebrow::before { content:''; width:20px; height:1px; background: var(--cyan); flex-shrink:0; } /* ─── SECTION SPACING ─── */ .section { padding: var(--s24) 0; } .section-lg { padding: var(--s24) 0 5rem; } .section-sm { padding: var(--s16) 0; } .section-dark { background: var(--bg-2); } .section-darker{ background: var(--bg); } /* ─── GRADIENT LINE DIVIDER ─── */ .grad-rule { height:1px; background: linear-gradient(90deg, transparent, var(--border-2), transparent); border:none; margin:0; } /* ─── CARD ─── */ .card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; transition: border-color var(--mid), box-shadow var(--mid), background var(--mid); } .card:hover { border-color: var(--border-2); background: var(--bg-3); } .card-accent { position:relative; overflow:hidden; } .card-accent::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: var(--grad); } /* ─── GLOW EFFECTS ─── */ .glow-cyan { box-shadow: 0 0 32px rgba(0,200,240,0.25); } .glow-violet { box-shadow: 0 0 32px rgba(155,48,255,0.25); } /* ─── REVEAL ANIMATIONS ─── */ .reveal, .reveal-up, .reveal-left, .reveal-right { opacity:0; transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); } .reveal { transform: translateY(24px); } .reveal-up { transform: translateY(40px); } .reveal-left { transform: translateX(-28px); } .reveal-right { transform: translateX(28px); } .reveal.in, .reveal-up.in, .reveal-left.in, .reveal-right.in { opacity:1; transform: translate(0,0); } /* ─── FORMS ─── */ .form-group { display:flex; flex-direction:column; gap:var(--s2); } .form-label { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } .form-input, .form-select, .form-textarea { width:100%; padding: .75rem 1rem; background: var(--bg-3); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: .9rem; transition: border-color var(--fast), box-shadow var(--fast); appearance: none; } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-3); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,200,240,0.12); } .form-input.error, .form-select.error, .form-textarea.error { border-color: #ff6b6b; box-shadow: 0 0 0 3px rgba(255,107,107,0.1); } .form-error { font-size: .7rem; color: #ff6b6b; font-family: var(--f-mono); display: none; } .form-group.invalid .form-error { display:block; } .form-textarea { resize:vertical; min-height:120px; } .form-select-wrap { position:relative; } .form-select-wrap::after { content:''; position:absolute; right:1rem; top:50%; transform:translateY(-50%); width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--text-3); pointer-events:none; } .form-select option { background: var(--bg-3); } /* ─── TOAST ─── */ #toast-wrap { position:fixed; bottom:var(--s8); right:var(--s8); z-index:9999; display:flex; flex-direction:column; gap:var(--s3); pointer-events:none; } .toast { background: var(--bg-4); border: 1px solid var(--border-2); color: var(--text); padding: var(--s4) var(--s6); border-radius: 8px; font-size: .85rem; box-shadow: 0 8px 32px rgba(0,0,0,0.4); opacity:0; transform:translateY(6px); transition: opacity var(--mid), transform var(--mid); pointer-events:all; max-width:320px; } .toast.show { opacity:1; transform:translateY(0); } .toast.success { border-left:3px solid var(--cyan); } .toast.error { border-left:3px solid #ff6b6b; } /* ─── COOKIE BANNER ─── */ #cookie-bar { position:fixed; bottom:var(--s6); left:var(--s6); max-width:440px; background: var(--bg-4); border: 1px solid var(--border-2); border-radius: 10px; padding: var(--s5) var(--s6); z-index:9990; box-shadow: 0 16px 48px rgba(0,0,0,0.5); opacity:0; transform:translateY(10px); transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease); pointer-events:none; } #cookie-bar.visible { opacity:1; transform:translateY(0); pointer-events:all; } .cookie-text { font-size:.84rem; color:var(--text-2); line-height:1.65; margin-bottom:var(--s4); } .cookie-text a { color:var(--cyan); } .cookie-btns { display:flex; gap:var(--s3); flex-wrap:wrap; } /* ─── FAB ─── */ #fab { position:fixed; bottom:var(--s8); right:var(--s8); z-index:890; display:flex; flex-direction:column; align-items:flex-end; gap:var(--s3); } .fab-menu { display:flex; flex-direction:column; align-items:flex-end; gap:var(--s2); opacity:0; pointer-events:none; transform: translateY(8px); transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease); } #fab.open .fab-menu { opacity:1; pointer-events:all; transform:translateY(0); } .fab-item { display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4); background: var(--bg-4); border: 1px solid var(--border-2); border-radius: 99px; font-size:.82rem; font-weight:500; color:var(--text); box-shadow: 0 4px 20px rgba(0,0,0,0.3); transition: transform var(--fast), border-color var(--fast), background var(--fast); white-space:nowrap; } .fab-item:hover { transform:translateX(-4px); border-color:var(--cyan); background:var(--bg-3); } .fab-ico { width:28px; height:28px; border-radius:50%; background:var(--bg-3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .fab-btn { width:52px; height:52px; border-radius:50%; background: var(--grad); display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 24px rgba(155,48,255,0.4); transition: transform var(--mid) var(--ease2), box-shadow var(--fast); color:#fff; } .fab-btn:hover { box-shadow: 0 8px 32px rgba(155,48,255,0.6); } #fab.open .fab-btn { transform:rotate(45deg); } /* ─── NAV ─── */ #nav { position:fixed; top:0; left:0; right:0; z-index:900; transition: background var(--mid), backdrop-filter var(--mid), box-shadow var(--mid); } #nav.solid { background: rgba(8,8,15,0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 var(--border); } .nav-inner { display:flex; align-items:center; height:68px; gap:var(--s6); } .nav-logo { display:flex; align-items:center; gap:var(--s3); flex-shrink:0; } .nav-logo-mark { width:32px; height:32px; flex-shrink:0; } .nav-logo-name { font-family:var(--f-display); font-size:1.05rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .nav-links { display:flex; align-items:center; gap:.25rem; margin-left:auto; } .nav-item { position:relative; } .nav-link { display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s4); border-radius:5px; font-size:.855rem; font-weight:500; color:var(--text-2); transition:color var(--fast), background var(--fast); white-space:nowrap; } .nav-link:hover { color:var(--text); background:var(--bg-3); } .nav-link svg { transition:transform var(--fast); } .nav-item:hover > .nav-link svg, .nav-item:focus-within > .nav-link svg { transform:rotate(180deg); } /* Dropdown */ .nav-drop { position:absolute; top:calc(100% + 8px); left:0; min-width:210px; background: var(--bg-3); border:1px solid var(--border-2); border-radius:8px; padding:var(--s2); box-shadow:0 12px 40px rgba(0,0,0,0.4); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity var(--fast), transform var(--fast), visibility var(--fast); pointer-events:none; } .nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { opacity:1; visibility:visible; transform:translateY(0); pointer-events:all; } .drop-item { display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4); border-radius:5px; font-size:.84rem; color:var(--text-2); transition:background var(--fast), color var(--fast); } .drop-item:hover { background:var(--bg-4); color:var(--text); } .drop-dot { width:5px; height:5px; border-radius:50%; background:var(--border-2); flex-shrink:0; transition:background var(--fast); } .drop-item:hover .drop-dot { background:var(--cyan); } /* Mega menu */ .nav-mega { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(6px); width:520px; background:var(--bg-3); border:1px solid var(--border-2); border-radius:10px; padding:var(--s5); box-shadow:0 12px 40px rgba(0,0,0,0.4); opacity:0; visibility:hidden; transition:opacity var(--fast), transform var(--fast), visibility var(--fast); pointer-events:none; } .nav-item:hover .nav-mega, .nav-item:focus-within .nav-mega { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:all; } .mega-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); } .mega-item { display:flex; align-items:flex-start; gap:var(--s4); padding:var(--s4); border-radius:7px; border:1px solid transparent; transition:background var(--fast), border-color var(--fast); } .mega-item:hover { background:var(--bg-4); border-color:var(--border); } .mega-ico { width:36px; height:36px; border-radius:8px; background:var(--bg-4); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:border-color var(--fast), box-shadow var(--fast); } .mega-item:hover .mega-ico { border-color:var(--cyan); box-shadow:0 0 12px rgba(0,200,240,0.2); } .mega-txt strong { display:block; font-size:.83rem; font-weight:600; color:var(--text); margin-bottom:2px; } .mega-txt span { font-size:.74rem; color:var(--text-3); line-height:1.5; } .nav-actions { display:flex; align-items:center; gap:var(--s3); flex-shrink:0; } /* Hamburger */ .nav-burger { display:none; flex-direction:column; gap:5px; width:36px; height:36px; padding:9px 7px; background:var(--bg-3); border:1px solid var(--border); border-radius:6px; margin-left:auto; transition:background var(--fast); } .nav-burger:hover { background:var(--bg-4); } .bline { height:1.5px; background:var(--text); border-radius:1px; transition:transform var(--mid) var(--ease), opacity var(--mid); } .nav-burger.open .bline:nth-child(1) { transform:translateY(6.5px) rotate(45deg); } .nav-burger.open .bline:nth-child(2) { opacity:0; } .nav-burger.open .bline:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); } /* Mobile nav */ .mobile-nav { position:fixed; inset:0; top:68px; background:var(--bg); z-index:850; padding:var(--s8) var(--pad) var(--s12); overflow-y:auto; display:none; flex-direction:column; border-top:1px solid var(--border); transform:translateX(100%); transition:transform var(--mid) var(--ease); } .mobile-nav.open { display:flex; transform:translateX(0); } .mob-link { display:block; padding:var(--s5) 0; font-family:var(--f-display); font-size:1.4rem; font-weight:700; color:var(--text-2); border-bottom:1px solid var(--border); transition:color var(--fast); } .mob-link:hover { color:var(--cyan); } .mob-sub { padding:var(--s3) 0 var(--s3) var(--s5); display:flex; flex-direction:column; gap:var(--s3); } .mob-sub a { font-size:.9rem; color:var(--text-3); transition:color var(--fast); } .mob-sub a:hover { color:var(--text); } .mob-cta { margin-top:var(--s8); } /* ─── FOOTER ─── */ .footer { background: var(--bg-2); border-top: 1px solid var(--border); padding: var(--s16) 0 var(--s8); } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s12); padding-bottom:var(--s12); border-bottom:1px solid var(--border); } .footer-brand-name { font-family:var(--f-display); font-size:1.1rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:var(--s4); } .footer-desc { font-size:.83rem; color:var(--text-3); line-height:1.75; margin-bottom:var(--s6); max-width:270px; } .footer-socials { display:flex; gap:var(--s3); } .fsoc { width:34px; height:34px; border-radius:6px; background:var(--bg-3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-3); transition:border-color var(--fast), color var(--fast), background var(--fast); } .fsoc:hover { border-color:var(--cyan); color:var(--cyan); background:var(--cyan-08); } .footer-grid > div > h4 { font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin-bottom:var(--s5); } .footer-links { display:flex; flex-direction:column; gap:var(--s3); } .footer-links a { font-size:.83rem; color:var(--text-3); transition:color var(--fast); } .footer-links a:hover { color:var(--text); } .footer-bottom { padding-top:var(--s8); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--s4); } .footer-copy { font-size:.73rem; color:var(--text-3); font-family:var(--f-mono); } .footer-legal { display:flex; gap:var(--s5); } .footer-legal a { font-size:.73rem; color:var(--text-3); font-family:var(--f-mono); transition:color var(--fast); } .footer-legal a:hover { color:var(--cyan); } /* ─── LEGAL PAGES ─── */ .legal-hero { padding: 8rem 0 var(--s12); border-bottom: 1px solid var(--border); } .legal-hero h1 { font-family:var(--f-display); font-size:clamp(2.2rem,5vw,3.8rem); font-weight:800; letter-spacing:-.02em; margin-top:var(--s5); line-height:1.1; } .legal-meta { display:flex; gap:var(--s6); margin-top:var(--s6); flex-wrap:wrap; } .legal-meta span { font-family:var(--f-mono); font-size:.7rem; color:var(--text-3); letter-spacing:.08em; } .legal-layout { display:grid; grid-template-columns:200px 1fr; gap:var(--s16); padding:var(--s12) 0 var(--s24); align-items:start; } .legal-toc { position:sticky; top:88px; } .toc-title { font-family:var(--f-mono); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin-bottom:var(--s4); } .toc-list { display:flex; flex-direction:column; gap:var(--s2); } .toc-link { font-size:.8rem; color:var(--text-3); padding:var(--s2) var(--s4); border-left:2px solid var(--border); transition:color var(--fast), border-color var(--fast); line-height:1.5; display:block; } .toc-link:hover { color:var(--text); border-left-color:var(--text-3); } .toc-link.active { color:var(--cyan); border-left-color:var(--cyan); } .legal-content { max-width:680px; } .legal-sec { margin-bottom:var(--s12); scroll-margin-top:96px; } .legal-sec h2 { font-family:var(--f-display); font-size:1.5rem; font-weight:700; margin-bottom:var(--s5); padding-bottom:var(--s4); border-bottom:1px solid var(--border); letter-spacing:-.01em; } .legal-sec h3 { font-size:1rem; font-weight:600; margin:var(--s6) 0 var(--s3); color:var(--text); } .legal-sec p { font-size:.9rem; color:var(--text-2); line-height:1.85; margin-bottom:var(--s4); } .legal-sec ul, .legal-sec ol { margin:var(--s4) 0 var(--s5) var(--s6); display:flex; flex-direction:column; gap:var(--s3); } .legal-sec ul li { list-style:disc; } .legal-sec ol li { list-style:decimal; } .legal-sec li { font-size:.9rem; color:var(--text-2); line-height:1.7; } .legal-sec a { color:var(--cyan); text-decoration:underline; } .legal-callout { background:var(--bg-3); border:1px solid var(--border); border-left:3px solid var(--cyan); border-radius:0 8px 8px 0; padding:var(--s5) var(--s6); margin:var(--s5) 0; } .legal-callout p { margin:0; } /* ─── BREADCRUMB ─── */ .breadcrumb { display:flex; align-items:center; gap:var(--s3); padding:var(--s8) 0 0; } .breadcrumb a { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; color:var(--text-3); transition:color var(--fast); } .breadcrumb a:hover { color:var(--cyan); } .breadcrumb span { font-family:var(--f-mono); font-size:.68rem; color:var(--text-3); opacity:.4; } .breadcrumb .current { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; color:var(--text-2); } /* ─── RESPONSIVE ─── */ @media(max-width:1100px){ .footer-grid { grid-template-columns:1fr 1fr; } .footer-grid>div:first-child { grid-column:span 2; } } @media(max-width:900px){ .nav-links,.nav-actions { display:none; } .nav-burger { display:flex; } .legal-layout { grid-template-columns:1fr; } .legal-toc { display:none; } } @media(max-width:640px){ :root { --pad:1.25rem; } .footer-grid { grid-template-columns:1fr 1fr; } .footer-grid>div:first-child { grid-column:span 2; } #fab { bottom:var(--s5); right:var(--s5); } #toast-wrap { bottom:var(--s5); right:var(--s5); left:var(--s5); } #cookie-bar { left:var(--s4); bottom:var(--s4); max-width:calc(100% - 2rem); } } @media(max-width:420px){ .footer-grid { grid-template-columns:1fr; } .footer-grid>div:first-child { grid-column:auto; } }