/* ===================================================================== SYNCO DESIGN SYSTEM Dark · minimal · glassmorphism · monospace headings. Retheming = edit :root only. No hardcoded theme values live below it. Loaded LAST on every page so it owns the cascade. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600&display=swap'); /* ============================ 1. TOKENS ============================ */ :root { /* Backgrounds */ --bg-primary: #0a0a0a; --bg-secondary: #111111; --bg-glass: rgba(255, 255, 255, 0); --bg-card-fill: rgba(255, 255, 255, 0.025); /* subtle fill so cards stay legible */ /* Borders */ --border-glass: rgba(255, 255, 255, 0.10); --border-subtle: rgba(255, 255, 255, 0.06); /* Text */ --text-primary: #ffffff; --text-secondary: #888888; --text-muted: #444444; /* Accent (monochrome — white IS the accent) */ --accent: #ffffff; --accent-hover: #cccccc; /* Semantic */ --color-success: #6bffb8; --color-error: #ff6b6b; /* Effects */ --blur-glass: 12px; --blur-nav: 16px; --glow-soft: rgba(255, 255, 255, 0.07); --glow-strong: rgba(255, 255, 255, 0.18); /* Typography */ --font-heading: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Spacing scale */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 32px; --space-xl: 64px; --space-2xl: 128px; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --container-max: 1100px; /* Motion */ --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ---- Legacy aliases: existing pages reference these names. Point them at the Synco tokens so every old rule adopts the new palette. ---- */ --bg-main: var(--bg-primary); --bg-section: var(--bg-secondary); --bg-card: var(--bg-card-fill); --surface2: var(--bg-secondary); --text-main: var(--text-primary); /* --text-muted reused as-is for secondary text in old rules */ --text-muted: var(--text-secondary); --accent-glow: var(--glow-strong); --accent-glow-sm: var(--glow-soft); --accent2: var(--accent-hover); --border-mid: var(--border-glass); --border-accent: rgba(255, 255, 255, 0.16); --border: var(--border-subtle); --rule: var(--border-glass); --radius-card: var(--radius-lg); } /* ============================ 2. BASE ============================ */ /* Page colour lives on so the ambient orb/dot layers (negative z-index, behind transparent ) remain visible beneath content. */ html { background: var(--bg-primary); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: transparent; color: var(--text-primary); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: rgba(255, 255, 255, 0.16); color: #fff; } /* Headings, eyebrows, nav, buttons, stats, labels → monospace */ h1, h2, h3, h4, h5, h6, .brand, .nav-logo, .eyebrow, .card-eyebrow, .card-label, .stat, .stat-box, .stat-num, .label { font-family: var(--font-heading); letter-spacing: 0.01em; } /* Uppercase micro-labels get tracked-out spacing */ .eyebrow, .card-eyebrow, .card-label, .hero-badge, .hero-scroll, .label { text-transform: uppercase; letter-spacing: 0.15em; } a { color: inherit; } /* Ambient orb canvas from the old theme is replaced by Synco orbs */ #bt-bg { display: none !important; } /* ====================== 3. GRADIENT HEADLINES ====================== */ .text-gradient, .brand, .hero h1, .hero-title { background: linear-gradient(150deg, #fff 20%, rgba(255, 255, 255, 0.5) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Old blue progress fill → monochrome */ .ps-progress-fill { background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.5)) !important; } /* ====================== 4. GLASS COMPONENT ====================== */ .glass, .module-card, .price-card, .review-card, .faq-item, .stat-box, .wl-card, .auth-card, .modal-box, .admin-panel, .card { position: relative; background: var(--bg-card-fill); border: 1px solid var(--border-glass); -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass)); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 50px -24px rgba(0, 0, 0, 0.65); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } /* Hairline top-edge sheen via masked 1px gradient border */ .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } .glass:hover, .module-card:hover, .price-card:hover, .review-card:hover, .faq-item:hover, .wl-card:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 40px var(--glow-soft), 0 28px 60px -24px rgba(0, 0, 0, 0.7); } /* ============================ 5. BUTTONS ============================ */ .btn-primary, .nav-cta, .playstore-btn, .btn-cta-main, .price-card.featured .price-cta { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.05em; } .btn-primary { background: var(--accent); color: var(--bg-primary); border: none; border-radius: var(--radius-sm); } .btn-primary:hover { background: var(--accent-hover) !important; color: var(--bg-primary) !important; box-shadow: 0 0 28px var(--glow-strong) !important; } .btn-primary:active { transform: scale(0.98); } .btn-ghost, .btn-outline { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-glass); border-radius: var(--radius-sm); font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.05em; transition: color var(--transition), border-color var(--transition); } .btn-ghost:hover, .btn-outline:hover { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.4); } /* Elements that used the blue accent as a FILL now get dark text on white */ .nav-cta, .root-pill, .ps-complete-btn, .playstore-btn, .featured-badge, .price-card.featured .price-cta, .btn-cta-main { color: var(--bg-primary) !important; background: var(--accent) !important; } .nav-cta:hover, .ps-complete-btn:hover, .playstore-btn:hover, .price-card.featured .price-cta:hover, .btn-cta-main:hover { background: var(--accent-hover) !important; color: var(--bg-primary) !important; box-shadow: 0 0 28px var(--glow-strong) !important; } /* ====================== 6. NAVIGATION (PILL) ====================== */ .nav-bar { background: rgba(255, 255, 255, 0.07) !important; -webkit-backdrop-filter: blur(var(--blur-nav)) !important; backdrop-filter: blur(var(--blur-nav)) !important; border: 1px solid var(--border-glass) !important; border-radius: 9999px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important; max-width: 860px; } .nav-bar.scrolled { background: rgba(255, 255, 255, 0.07) !important; border-color: var(--border-glass) !important; } .nav-logo { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-primary); } .nav-links a:not(.nav-cta) { position: relative; font-family: var(--font-heading); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.12em; color: var(--text-secondary); transition: color var(--transition); } .nav-links a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .nav-links a:not(.nav-cta):hover { color: var(--text-primary); } .nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); } /* Mobile hamburger + glass drawer (injected by synco.js) */ .synco-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; background: transparent; border: none; cursor: pointer; z-index: 120; } .synco-burger span { display: block; width: 22px; height: 2px; margin: 0 auto; background: var(--text-primary); transition: transform var(--transition), opacity var(--transition); } .synco-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .synco-burger.open span:nth-child(2) { opacity: 0; } .synco-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ====================== 7. FORM INPUTS ====================== */ .form-input, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select { font-family: var(--font-body); color: var(--text-primary); background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.012)); border: 1px solid var(--border-glass); border-radius: var(--radius-md); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); transition: border-color var(--transition), box-shadow var(--transition); } .form-input::placeholder, input::placeholder, textarea::placeholder { color: var(--text-muted); } .form-input:focus, input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), 0 8px 24px -12px rgba(0, 0, 0, 0.8); } /* Keep autofill dark */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: var(--text-primary); -webkit-box-shadow: 0 0 0 1000px #141414 inset; caret-color: var(--text-primary); transition: background-color 9999s ease-in-out 0s; } /* Custom chevron for selects */ select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.012)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23888888' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat, no-repeat; background-position: center, right 14px center; padding-right: 38px; } select:focus { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.012)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); } /* ============================ 8. MOTION ============================ */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .fade-in.visible { opacity: 1; transform: none; } /* Ambient orbs (injected by synco.js) — sit behind the transparent body */ .synco-orbs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .synco-orb { position: absolute; border-radius: 50%; filter: blur(60px); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22), transparent 70%); opacity: 0.18; will-change: transform; } .synco-orb.o1 { width: 460px; height: 460px; top: -120px; left: -100px; animation: orbFloat 22s var(--ease-out) infinite; } .synco-orb.o2 { width: 360px; height: 360px; top: 30%; right: -120px; opacity: 0.12; animation: orbFloat 28s var(--ease-out) infinite reverse; } .synco-orb.o3 { width: 300px; height: 300px; bottom: -120px; left: 35%; opacity: 0.10; animation: orbFloat 18s var(--ease-out) infinite; } @keyframes orbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.12); } } /* Dotted texture overlay (injected by synco.js) */ .synco-dots { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.10) 1.5px, transparent 1.5px); background-size: 25px 25px; opacity: 0.5; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); } /* ====================== 9. RESPONSIVE ====================== */ @media (max-width: 900px) { .synco-orb.o2, .synco-orb.o3 { display: none; } .synco-orb.o1 { width: 320px; height: 320px; } } @media (max-width: 640px) { .nav-links { position: fixed; top: 76px; left: 50%; transform: translateX(-50%) translateY(-12px); flex-direction: column; gap: 18px !important; width: calc(100% - 32px); max-width: 360px; padding: 28px 24px; background: rgba(17, 17, 17, 0.85); -webkit-backdrop-filter: blur(var(--blur-nav)); backdrop-filter: blur(var(--blur-nav)); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity var(--transition), transform var(--transition); } .nav-links.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-links a:not(.nav-cta) { display: block !important; font-size: 0.85rem; text-align: center; } .synco-burger { display: flex; } } /* ====================== 10. ACCESSIBILITY ====================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .fade-in { opacity: 1; transform: none; } }