/* ========================================================================== Terquaz.net — shared stylesheet Theme accent is chosen by and consumed through --theme / --theme-glow / --theme-rgb so every component follows the product. ========================================================================== */ :root { --bg-deep: #05050a; --text-main: #ffffff; --text-muted: rgba(235, 235, 245, 0.72); --text-faint: rgba(255, 255, 255, 0.55); --glass-bg: rgba(255, 255, 255, 0.03); --glass-border: rgba(255, 255, 255, 0.1); --glass-border-top: rgba(255, 255, 255, 0.2); --radius-lg: 28px; --radius-md: 18px; /* default accent (suite / landing) */ --theme: #64D2FF; --theme-glow: #0A84FF; --theme-rgb: 100, 210, 255; --btn-ink: #ffffff; } html[data-theme="gold"] { --theme: #FFD700; --theme-glow: #F59E0B; --theme-rgb: 255, 215, 0; --btn-ink: #000000; } html[data-theme="cyan"] { --theme: #64D2FF; --theme-glow: #0A84FF; --theme-rgb: 100, 210, 255; --btn-ink: #ffffff; } html[data-theme="violet"] { --theme: #9D8CFF; --theme-glow: #6A5AE0; --theme-rgb: 157, 140, 255; --btn-ink: #ffffff; } html[data-theme="emerald"] { --theme: #34D399; --theme-glow: #059669; --theme-rgb: 52, 211, 153; --btn-ink: #000000; } /* ---------- base ---------- */ html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; background-color: var(--bg-deep); color: var(--text-main); overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1 0 auto; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-deep); } ::-webkit-scrollbar-thumb { background: rgba(var(--theme-rgb), 0.3); border-radius: 10px; } :focus-visible { outline: 2px solid var(--theme); outline-offset: 3px; border-radius: 6px; } a { color: var(--theme); } .text-theme { color: var(--theme) !important; } .skip-link { position: absolute; top: -100px; right: 16px; z-index: 2000; background: var(--theme); color: #000; padding: 10px 18px; border-radius: 10px; font-weight: 800; } .skip-link:focus { top: 12px; } .ambient-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 10% 15%, rgba(var(--theme-rgb), 0.14) 0%, transparent 40%), radial-gradient(circle at 90% 85%, rgba(var(--theme-rgb), 0.08) 0%, transparent 40%); } /* ---------- navbar ---------- */ .glass-navbar { background: rgba(5, 5, 10, 0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: box-shadow 0.3s ease; } .glass-navbar.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } .brand-logo { height: 36px; width: auto; } .brand-logo-lg { height: 46px; } .navbar-toggler { border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; padding: 6px 12px; } .navbar-toggler:focus { box-shadow: 0 0 0 2px rgba(var(--theme-rgb), 0.5); } .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.8); font-weight: 700; padding: 8px 14px; border-radius: 10px; transition: all 0.25s ease; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: #fff; background: rgba(255, 255, 255, 0.06); } .glass-dropdown { background: rgba(12, 12, 20, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 8px; min-width: 280px; } .glass-dropdown .dropdown-item { color: rgba(255, 255, 255, 0.85); border-radius: 10px; padding: 10px 14px; font-weight: 700; } .glass-dropdown .dropdown-item:hover { background: rgba(var(--theme-rgb), 0.12); color: #fff; } .dropdown-icon { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--theme-rgb), 0.15); color: rgb(var(--theme-rgb)); font-size: 0.85rem; } @media (max-width: 991.98px) { .navbar-collapse { background: rgba(8, 8, 14, 0.98); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 12px 16px 18px; margin-top: 12px; } .glass-dropdown { background: rgba(255, 255, 255, 0.03); } .nav-cta { width: 100%; text-align: center; } } /* ---------- shared surfaces ---------- */ .glass-panel { background: var(--glass-bg); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid var(--glass-border); border-top: 1px solid var(--glass-border-top); border-radius: var(--radius-lg); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); transition: transform 0.4s ease, background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .glass-panel:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.06); border-color: rgba(var(--theme-rgb), 0.3); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 30px rgba(var(--theme-rgb), 0.12); } .btn-glow { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--theme-glow), var(--theme)); color: var(--btn-ink); border: none; padding: 14px 32px; border-radius: 16px; font-weight: 800; font-size: 1.05rem; text-decoration: none; box-shadow: 0 10px 30px rgba(var(--theme-rgb), 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; } .btn-glow:hover, .btn-glow:focus-visible { transform: scale(1.04); box-shadow: 0 15px 40px rgba(var(--theme-rgb), 0.55); color: var(--btn-ink); } .btn-ghost { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.04); color: #fff; border: 1px solid rgba(255, 255, 255, 0.15); padding: 14px 28px; border-radius: 16px; font-weight: 800; font-size: 1.05rem; text-decoration: none; transition: all 0.3s ease; } .btn-ghost:hover { background: rgba(var(--theme-rgb), 0.12); border-color: rgba(var(--theme-rgb), 0.4); color: #fff; } .pill-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(var(--theme-rgb), 0.08); border: 1px solid rgba(var(--theme-rgb), 0.35); border-radius: 50px; padding: 8px 20px; color: var(--theme); font-weight: 700; } .section-title { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.5rem); font-weight: 900; text-align: center; margin-bottom: 16px; color: #fff; } .section-lead { text-align: center; color: var(--text-muted); font-size: 1.1rem; max-width: 720px; margin: 0 auto 56px; line-height: 1.8; } .section-pad { padding: 80px 0; } @media (max-width: 767.98px) { .section-pad { padding: 56px 0; } } /* ---------- landing ---------- */ .main-header { text-align: center; padding: 140px 20px 50px; } .main-title { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.5rem); font-weight: 900; line-height: 1.25; background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 20px; } .main-subtitle { font-size: clamp(1rem, 0.9rem + 0.6vw, 1.3rem); color: var(--text-muted); max-width: 760px; margin: 0 auto; line-height: 1.8; } .system-card { display: flex; flex-direction: column; text-decoration: none; height: 100%; background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-top: 1px solid var(--glass-border-top); border-radius: 30px; padding: 44px 30px 36px; text-align: center; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; position: relative; overflow: hidden; color: inherit; } .system-card::after { content: ''; position: absolute; inset: auto -40% -60% -40%; height: 60%; background: radial-gradient(ellipse at center, rgba(var(--theme-rgb), 0.18), transparent 60%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .system-card:hover, .system-card:focus-visible { transform: translateY(-10px); background: rgba(var(--theme-rgb), 0.05); border-color: rgba(var(--theme-rgb), 0.35); box-shadow: 0 30px 60px rgba(var(--theme-rgb), 0.15), inset 0 0 20px rgba(var(--theme-rgb), 0.05); } .system-card:hover::after { opacity: 1; } .system-card .icon-wrapper { font-size: 4.2rem; margin-bottom: 22px; color: rgb(var(--theme-rgb)); transition: transform 0.4s ease; } .system-card:hover .icon-wrapper { transform: scale(1.1); } .system-title { font-size: 1.55rem; font-weight: 800; color: #fff; margin-bottom: 12px; } .system-desc { font-size: 1.02rem; color: var(--text-muted); line-height: 1.7; margin: 0 0 22px; flex: 1; } .system-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 22px; } .system-tags span { font-size: 0.8rem; font-weight: 700; padding: 4px 12px; border-radius: 50px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-muted); } .system-cta { color: rgb(var(--theme-rgb)); font-weight: 800; display: inline-flex; align-items: center; gap: 8px; } .system-cta i { transition: transform 0.3s ease; } .system-card:hover .system-cta i { transform: translateX(-6px); } .value-card { text-align: center; padding: 34px 24px; height: 100%; } .value-icon { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 20px; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; color: var(--theme); background: linear-gradient(135deg, rgba(var(--theme-rgb), 0.18), rgba(var(--theme-rgb), 0.03)); border: 1px solid rgba(var(--theme-rgb), 0.25); } .value-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 10px; } .value-text { color: var(--text-muted); font-size: 0.98rem; line-height: 1.7; margin: 0; } /* ---------- product hero ---------- */ .hero-section { min-height: 92vh; display: flex; align-items: center; padding-top: 120px; padding-bottom: 70px; } .hero-title { font-size: clamp(2rem, 1.1rem + 3.8vw, 3.8rem); font-weight: 900; line-height: 1.25; margin-bottom: 22px; background: linear-gradient(180deg, #ffffff 0%, rgba(var(--theme-rgb), 0.85) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-subtitle { font-size: clamp(1rem, 0.92rem + 0.5vw, 1.2rem); color: var(--text-muted); margin-bottom: 36px; line-height: 1.8; } .hero-image-wrapper { position: relative; z-index: 2; animation: float 6s ease-in-out infinite; } .hero-image-wrapper::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; z-index: -1; filter: blur(40px); background: radial-gradient(circle, rgba(var(--theme-rgb), 0.22) 0%, transparent 60%); } .hero-image { width: 100%; height: auto; border-radius: 15px; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6)); } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } .trust-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-top: -10px; } .trust-item { padding: 18px 16px; text-align: center; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); } .trust-item b { display: block; font-size: 1.45rem; font-weight: 900; color: var(--theme); font-variant-numeric: tabular-nums; } .trust-item span { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; } /* ---------- pains ---------- */ .pain-card { padding: 28px 26px; height: 100%; } .pain-label { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; margin-bottom: 8px; } .pain-label.is-pain { color: #FF7A7A; } .pain-label.is-fix { color: var(--theme); } .pain-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 14px; } .pain-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 16px 0; } .pain-text { color: var(--text-muted); line-height: 1.75; margin: 0; font-size: 0.97rem; } /* ---------- features ---------- */ .feature-icon { width: 60px; height: 60px; border-radius: 18px; margin-bottom: 22px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--theme); background: linear-gradient(135deg, rgba(var(--theme-rgb), 0.15), rgba(var(--theme-rgb), 0.02)); border: 1px solid rgba(var(--theme-rgb), 0.2); } .feature-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 14px; color: #fff; } .feature-list { list-style: none; padding: 0; margin: 0; } .feature-list li { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 11px; display: flex; align-items: flex-start; gap: 10px; line-height: 1.65; } .feature-list li i { color: var(--theme); font-size: 0.9rem; margin-top: 6px; flex-shrink: 0; } /* ---------- CTA band ---------- */ .cta-band { position: relative; overflow: hidden; text-align: center; padding: 64px 28px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(var(--theme-rgb), 0.16), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(var(--theme-rgb), 0.3); } .cta-band::before { content: ''; position: absolute; inset: -40%; z-index: 0; pointer-events: none; background: radial-gradient(circle at 30% 30%, rgba(var(--theme-rgb), 0.18), transparent 45%); } .cta-band > * { position: relative; z-index: 1; } .cta-title { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); font-weight: 900; margin-bottom: 12px; } .cta-text { color: var(--text-muted); font-size: 1.08rem; max-width: 640px; margin: 0 auto 30px; line-height: 1.8; } /* ---------- footer ---------- */ .premium-footer { background: linear-gradient(to top, rgba(5, 5, 10, 1) 0%, rgba(10, 20, 40, 0.6) 100%); border-top: 1px solid rgba(var(--theme-rgb), 0.15); padding: 70px 0 20px; position: relative; margin-top: auto; } .premium-footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 1px; background: linear-gradient(90deg, transparent, var(--theme), transparent); box-shadow: 0 0 15px var(--theme); } .footer-title { color: #fff; font-weight: 800; font-size: 1.2rem; margin-bottom: 25px; position: relative; padding-bottom: 12px; } .footer-title::after { content: ''; position: absolute; bottom: 0; right: 0; width: 45px; height: 3px; background: var(--theme); border-radius: 3px; } .footer-text { color: rgba(240, 240, 255, 0.78); font-size: 1rem; line-height: 1.85; font-weight: 600; text-align: justify; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 14px; } .footer-links a { color: rgba(240, 240, 255, 0.78); text-decoration: none; transition: all 0.3s ease; display: flex; align-items: center; gap: 10px; font-weight: 600; } .footer-links a:hover { color: #fff; transform: translateX(-8px); } .footer-link-icon { color: rgb(var(--theme-rgb)); } .footer-contact-info { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; text-decoration: none; color: inherit; } .footer-contact-icon { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; background: rgba(var(--theme-rgb), 0.06); color: var(--theme); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; border: 1px solid rgba(var(--theme-rgb), 0.22); transition: all 0.3s ease; } .footer-contact-info:hover .footer-contact-icon { background: var(--theme); color: #000; box-shadow: 0 0 15px rgba(var(--theme-rgb), 0.4); } .footer-contact-label { color: var(--text-faint); } .footer-contact-value { color: #fff; font-size: 1.1rem; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 25px; margin-top: 50px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .footer-brand { color: var(--theme); font-weight: 800; } .social-pills-container { display: flex; gap: 12px; } .social-pill-btn { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease; font-size: 1.1rem; } .social-pill-btn:hover { background: var(--theme); color: #000; border-color: var(--theme); box-shadow: 0 5px 15px rgba(var(--theme-rgb), 0.5); transform: translateY(-4px); } .wa-float { position: fixed; bottom: 22px; left: 22px; z-index: 1500; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; text-decoration: none; box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45); transition: transform 0.3s ease; } .wa-float:hover { transform: scale(1.08); color: #fff; } /* ---------- 404 ---------- */ .error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 120px 20px 60px; } .error-code { font-size: clamp(5rem, 15vw, 9rem); font-weight: 900; line-height: 1; color: var(--theme); opacity: 0.85; } /* ---------- reveal on scroll ---------- */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal="zoom"] { transform: scale(0.94) translateY(16px); } [data-reveal="zoom"].is-visible { transform: none; } .no-js [data-reveal] { opacity: 1; transform: none; } /* ---------- motion & print ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-image-wrapper { animation: none; } [data-reveal] { opacity: 1; transform: none; transition: none; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } @media print { .glass-navbar, .wa-float, .ambient-glow { display: none !important; } body { background: #fff; color: #000; } }