/* ============================================================ PaytakhtVPN — Farsi-first homepage (home.css) LIGHT theme in AsanVPN's palette (white bg, blue -> indigo -> purple accents, light-blue highlights), upgraded with a premium finish. Loaded only on the homepage, after styles.css, so these rules override the dark design tokens for this page only. RTL-native (page loads dir="rtl"); logical properties keep the English (LTR) view correct too. ============================================================ */ /* ---------- Premium light theme tokens (override styles.css :root) ---------- */ :root { --bg: #ffffff; --bg-raise: #fafbfe; --bg-alt: #f6f8fd; --surface: #ffffff; --surface-hover: #f6f8fd; --border: rgba(22, 20, 90, .09); --border-strong: rgba(22, 20, 90, .16); --border-lume: rgba(12, 95, 231, .30); --text: #14142b; --text-dim: #565d76; --text-faint: #9096ad; --cyan: #2aabee; --blue: #2764e7; --blue-bright: #0c5fe7; --indigo: #16149f; --violet: #7a41dc; --green: #1fae74; --amber: #f0a500; --grad-accent: linear-gradient(105deg, #0c5fe7, #4130c9 52%, #7a41dc); --grad-btn: linear-gradient(135deg, #0c5fe7, #3a2fc4 55%, #6d3fd6); --brand-glow: radial-gradient(closest-side, #0c5fe7, #16149f); /* Vazirmatn primary (loaded in ): premium for Persian and Latin alike */ --font-display: "Vazirmatn", "Space Grotesk", system-ui, sans-serif; --font-body: "Vazirmatn", "Inter", system-ui, sans-serif; /* larger radii + soft layered shadows for a high-end feel */ --radius-sm: 12px; --radius: 18px; --radius-lg: 28px; --shadow-card: 0 1px 2px rgba(22, 20, 90, .04), 0 14px 40px rgba(22, 20, 90, .07); --shadow-glow-cyan: 0 18px 50px rgba(12, 95, 231, .22); } html { background: #ffffff; } body.theme-light { color: var(--text); background: radial-gradient(1200px 600px at 88% -12%, #eef3ff 0%, transparent 62%), linear-gradient(180deg, #ffffff 0%, #fafbfe 100%); background-attachment: fixed; } .theme-light .aurora, .theme-light .noise { display: none; } /* ---------- Chrome overrides for light theme ---------- */ .theme-light .navbar { background: rgba(255, 255, 255, .72); border-bottom: 1px solid var(--border); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); } .theme-light .navbar.is-scrolled { background: rgba(255, 255, 255, .92); box-shadow: 0 6px 24px rgba(22, 20, 90, .08); } .theme-light .navbar__links a, .theme-light .navbar__login { color: var(--text-dim); } .theme-light .navbar__links a:hover, .theme-light .navbar__login:hover { color: var(--text); } .theme-light .navbar__burger span { background: var(--text); } .theme-light .logo-text { color: var(--text); } .theme-light .logo-text--dim { color: var(--blue-bright); } .theme-light .btn { border-radius: 999px; } .theme-light .btn--primary { color: #fff; box-shadow: 0 8px 24px rgba(12, 95, 231, .26); } .theme-light .btn--primary:hover { box-shadow: 0 12px 30px rgba(12, 95, 231, .34); } .theme-light .btn--ghost { color: var(--text); border-color: var(--border-strong); background: #fff; } .theme-light .btn--ghost:hover { background: var(--surface-hover); } .theme-light .footer { background: #f6f9ff; border-top: 1px solid var(--border); color: var(--text-dim); } .theme-light .footer h3 { color: var(--text); } .theme-light .footer a { color: var(--text-dim); } .theme-light .footer a:hover { color: var(--blue); } .theme-light .footer__copy { color: var(--text-faint); } .theme-light .footer__tag { color: var(--text-dim); } .theme-light .lang-select select { color: var(--text); background: transparent; } .theme-light .cookie { background: #fff; border: 1px solid var(--border); color: var(--text); box-shadow: 0 12px 34px rgba(22, 20, 90, .16); } .theme-light .skip-link { background: var(--blue); color: #fff; } /* ---------- Shared section bits ---------- */ .hm-section { padding: var(--s-9) 0; position: relative; } .hm-section--tight { padding: var(--s-7) 0; } main > .hm-section:nth-child(even) { background: #f6f8fd; } .hm-head { max-width: 46rem; margin-inline: auto; text-align: center; margin-bottom: var(--s-7); } .hm-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); background: rgba(39, 100, 231, .09); border: 1px solid var(--border-lume); padding: .35rem .8rem; border-radius: 999px; } .hm-title { font-family: var(--font-display); font-weight: 700; line-height: 1.15; font-size: clamp(1.7rem, 4vw, 2.9rem); margin: var(--s-4) 0 var(--s-3); color: var(--text); } .hm-lead { color: var(--text-dim); font-size: 1.05rem; line-height: 1.7; } /* ---------- Hero ---------- */ .hm-hero { position: relative; padding-top: calc(var(--s-9) + 2rem); overflow: hidden; } .hm-hero::before { content: ""; position: absolute; inset-block-start: -12%; inset-inline-end: -8%; width: min(46rem, 62vw); aspect-ratio: 1; background: var(--brand-glow); opacity: .10; filter: blur(36px); border-radius: 50%; pointer-events: none; z-index: 0; } .hm-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-7); align-items: center; } .hm-hero__title { font-family: var(--font-display); font-weight: 700; line-height: 1.1; color: var(--text); font-size: clamp(2.1rem, 5.4vw, 4rem); margin: var(--s-4) 0; } .hm-hero__sub { color: var(--text-dim); font-size: 1.15rem; line-height: 1.8; max-width: 34rem; } .hm-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); } .hm-hero__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 340px; } .hm-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--s-6); } .hm-chip { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--text); background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: .45rem .9rem; box-shadow: 0 4px 14px rgba(22, 20, 90, .05); } .hm-chip svg { width: 1.05rem; height: 1.05rem; color: var(--blue); } /* ---------- Stats strip ---------- */ .hm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; padding: var(--s-6) var(--s-5); box-shadow: var(--shadow-card); } .hm-stat { text-align: center; } .hm-stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.5vw, 2.4rem); background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hm-stat__label { color: var(--text-dim); font-size: .9rem; margin-top: .3rem; } /* ---------- Feature grid ---------- */ .hm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } .hm-feature { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-5); box-shadow: var(--shadow-card); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .hm-feature:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(39, 100, 231, .16); } .hm-feature__icon { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, rgba(39,100,231,.12), rgba(122,65,220,.12)); color: var(--blue); margin-bottom: var(--s-4); } .hm-feature__icon svg { width: 1.4rem; height: 1.4rem; } .hm-feature h3 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: .5rem; color: var(--text); } .hm-feature p { color: var(--text-dim); line-height: 1.7; font-size: .95rem; } /* ---------- Apps / platforms ---------- */ .hm-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } .hm-app { text-align: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-6) var(--s-4); box-shadow: var(--shadow-card); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .hm-app:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(39, 100, 231, .15); } .hm-app__icon { width: 3rem; height: 3rem; margin: 0 auto var(--s-3); color: var(--blue); } .hm-app h3 { font-family: var(--font-display); font-size: 1.1rem; color: var(--text); } .hm-app p { color: var(--text-faint); font-size: .82rem; font-family: var(--font-mono); margin: .3rem 0 var(--s-3); } .hm-app a { color: var(--blue); font-size: .9rem; text-decoration: none; font-weight: 500; } .hm-app a:hover { text-decoration: underline; } /* ---------- How it works ---------- */ .hm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); counter-reset: step; } .hm-step { position: relative; padding-top: var(--s-6); } .hm-step::before { counter-increment: step; content: counter(step); position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; font-family: var(--font-display); font-weight: 700; color: #fff; background: var(--grad-btn); box-shadow: 0 8px 20px rgba(39, 100, 231, .3); } .hm-step h3 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: .4rem; color: var(--text); } .hm-step p { color: var(--text-dim); line-height: 1.7; font-size: .95rem; } /* ---------- FAQ ---------- */ .hm-faq { max-width: 46rem; margin-inline: auto; display: grid; gap: .75rem; } .hm-faq details { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 6px 18px rgba(22,20,90,.05); } .hm-faq summary { cursor: pointer; list-style: none; padding: var(--s-4) var(--s-5); font-weight: 600; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .hm-faq summary::-webkit-details-marker { display: none; } .hm-faq summary::after { content: "+"; color: var(--blue); font-size: 1.4rem; line-height: 1; transition: transform var(--dur) var(--ease); } .hm-faq details[open] summary::after { transform: rotate(45deg); } .hm-faq details > div { padding: 0 var(--s-5) var(--s-4); color: var(--text-dim); line-height: 1.9; } /* ---------- CTA band ---------- */ .hm-cta { text-align: center; border: 1px solid var(--border-lume); border-radius: var(--radius-lg); background: radial-gradient(130% 150% at 50% 0%, rgba(39,100,231,.12), rgba(122,65,220,.06) 45%, #fff 75%); padding: var(--s-8) var(--s-5); box-shadow: var(--shadow-card); } .hm-cta h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.6rem); margin-bottom: var(--s-3); color: var(--text); } .hm-cta p { color: var(--text-dim); margin-bottom: var(--s-6); } .hm-cta .hm-hero__ctas { justify-content: center; margin-top: 0; } /* Telegram CTA variant */ .btn--tg { background: linear-gradient(135deg, #2aabee, #229ed9); color: #fff; border: 0; } .btn--tg:hover { filter: brightness(1.06); } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .hm-hero__inner { grid-template-columns: 1fr; } .hm-hero__visual { order: -1; max-width: 360px; margin-inline: auto; min-height: 260px; } .hm-grid, .hm-apps { grid-template-columns: repeat(2, 1fr); } .hm-steps { grid-template-columns: 1fr; } .hm-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .hm-grid, .hm-apps { grid-template-columns: 1fr; } }