/* Visually hidden labels (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; } :root { color-scheme: light; /* Brand */ --primary-color: #ff6000; --primary-dark: #e55500; --secondary-color: #00a8ff; /* Status */ --success-color: #28a745; --danger-color: #dc3545; --warning-color: #ffc107; --info-color: #17a2b8; /* Neutrals */ --white: #ffffff; --gray-50: #fafafa; --gray-100: #f5f5f5; --gray-200: #eeeeee; --gray-300: #e0e0e0; --gray-400: #a8a8a8; --gray-500: #767676; --gray-600: #757575; --gray-700: #616161; --gray-800: #424242; --gray-900: #212121; /* Typography */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Elevation & radius */ --border-radius: 8px; --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); --box-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15); /* Layout */ --container-max-width: 1200px; --transition: all 0.3s ease; } /* Dark mode token overrides (activated via .theme-dark on ) */ :root.theme-dark { color-scheme: dark; --gray-50: #121212; --gray-100: #181818; --gray-200: #202020; --gray-300: #2a2a2a; --gray-400: #3a3a3a; --gray-500: #4a4a4a; --gray-600: #9e9e9e; --gray-700: #c2c2c2; --gray-800: #e0e0e0; --gray-900: #f5f5f5; --white: #181818; } /* Homepage hero (H1 + intro) */ .home-hero-top { margin: 0 0 1.75rem; padding: 0.75rem 0 0; } .home-hero-card { position: relative; border-radius: 1rem; padding: clamp(1.1rem, 3vw, 1.6rem); background: radial-gradient(1200px 400px at 10% 0%, rgba(255, 96, 0, 0.12), transparent 55%), radial-gradient(900px 420px at 90% 10%, rgba(0, 168, 255, 0.12), transparent 55%), linear-gradient(180deg, var(--white), var(--gray-50)); border: 1px solid var(--gray-200); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06); overflow: hidden; } .home-hero-card::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255, 96, 0, 0.20), rgba(0, 168, 255, 0.18)); opacity: 0.25; mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); padding: 1px; box-sizing: border-box; } .home-hero-title { font-size: clamp(1.65rem, 4vw, 2.2rem); font-weight: 700; line-height: 1.25; color: var(--gray-900); margin-bottom: 0.75rem; letter-spacing: -0.02em; } .home-hero-lead { font-size: 1.05rem; line-height: 1.55; color: var(--gray-700); max-width: 58rem; margin: 0; } :root.theme-dark .home-hero-lead { color: var(--gray-600); } :root.theme-dark .home-hero-card { border-color: var(--gray-300); background: radial-gradient(1200px 420px at 10% 0%, rgba(255, 96, 0, 0.14), transparent 55%), radial-gradient(900px 420px at 90% 10%, rgba(0, 168, 255, 0.14), transparent 55%), linear-gradient(180deg, var(--gray-100), var(--gray-50)); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35); } /* Homepage extended sections (How it works, Why, About, popular lists) */ .home-section { max-width: var(--container-max-width); margin: 0 auto; padding: 2.5rem 1rem; } .home-section--muted { background: linear-gradient(180deg, rgba(0, 168, 255, 0.03), transparent 38%), linear-gradient(180deg, var(--gray-50), var(--gray-50)); border-radius: 0; margin-inline: 0; max-width: none; padding-inline: 0; padding-block: 2.75rem; } .home-section--muted > .home-section-head, .home-section--muted > .home-steps-grid, .home-section--muted > .home-why-grid, .home-section--muted > .home-popular-countries-chips, .home-section--muted > .home-about-card { max-width: var(--container-max-width); margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } .home-section-head { margin-bottom: 1.4rem; } .home-section-head--tight { margin-bottom: 1rem; } .home-how-it-works, .home-why-section, .home-popular-countries, .home-popular-platforms, .home-about-section { max-width: none; margin: 0; } .home-section-heading { font-size: clamp(1.25rem, 2.8vw, 1.6rem); font-weight: 800; letter-spacing: -0.03em; color: var(--gray-900); margin: 0; line-height: 1.2; } :root.theme-dark .home-section-heading { color: var(--gray-900); } :root.theme-dark .home-section--muted { background: linear-gradient(180deg, rgba(0, 168, 255, 0.06), transparent 40%), var(--gray-50); } /* How it works — step cards */ .home-steps-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-step-card { min-height: 100%; } .home-step-card-inner { height: 100%; padding: 1.25rem 1.2rem 1.35rem; border-radius: 1rem; border: 1px solid var(--gray-200); background: var(--white); box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; } .home-step-card:hover .home-step-card-inner { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1); } .home-step-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } .home-step-badge { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; color: var(--gray-500); } .home-step-icon-wrap { width: 2.75rem; height: 2.75rem; border-radius: 0.85rem; display: grid; place-items: center; background: linear-gradient(145deg, rgba(255, 96, 0, 0.14), rgba(0, 168, 255, 0.12)); color: var(--primary-color); } .home-step-icon { width: 1.45rem; height: 1.45rem; } .home-step-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--gray-900); line-height: 1.3; letter-spacing: -0.02em; } .home-step-desc { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--gray-700); } :root.theme-dark .home-step-card-inner { border-color: var(--gray-300); background: var(--gray-100); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28); } :root.theme-dark .home-step-desc { color: var(--gray-600); } @media (max-width: 900px) { .home-steps-grid { grid-template-columns: 1fr; } } /* Why section */ .home-why-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .home-why-item { position: relative; border: 1px solid var(--gray-200); border-radius: 1rem; padding: 1.25rem 1.2rem 1.3rem 1.2rem; padding-top: 1.5rem; background: var(--white); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; } .home-why-item:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08); } .home-why-icon { width: 2.85rem; height: 2.85rem; border-radius: 0.9rem; display: grid; place-items: center; margin-bottom: 0.85rem; background: linear-gradient(145deg, rgba(255, 96, 0, 0.12), rgba(0, 168, 255, 0.1)); color: var(--primary-color); } .home-why-icon-svg { width: 1.45rem; height: 1.45rem; } .home-why-item-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--gray-900); letter-spacing: -0.02em; line-height: 1.25; } .home-why-item-text { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--gray-700); } :root.theme-dark .home-why-item { border-color: var(--gray-300); background: var(--gray-100); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); } :root.theme-dark .home-why-item-text { color: var(--gray-600); } /* Popular countries — chips */ .home-popular-countries-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .home-country-chip { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0.45rem 0.85rem; border-radius: 999px; text-decoration: none; color: var(--gray-800); background: var(--white); border: 1px solid var(--gray-200); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05); font-size: 0.9rem; font-weight: 600; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .home-country-chip:hover { border-color: rgba(255, 96, 0, 0.45); box-shadow: 0 6px 18px rgba(255, 96, 0, 0.12); transform: translateY(-1px); } .home-country-chip-flag { font-size: 1.05rem; line-height: 1; } .home-country-chip-meta { font-size: 0.78rem; font-weight: 600; color: var(--gray-600); } :root.theme-dark .home-country-chip { background: var(--gray-100); border-color: var(--gray-300); color: var(--gray-800); } /* Popular platforms */ .home-popular-platforms-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; } .home-popular-platform-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.45rem; padding: 1rem 0.65rem; border-radius: 1rem; border: 1px solid var(--gray-200); text-decoration: none; color: var(--gray-900); background: var(--white); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .home-popular-platform-card--modern:hover { border-color: rgba(0, 168, 255, 0.35); box-shadow: 0 14px 36px rgba(15, 23, 42, 0.1); transform: translateY(-3px); } .home-popular-platform-icon { width: 3.25rem; height: 3.25rem; display: flex; align-items: center; justify-content: center; border-radius: 0.85rem; overflow: hidden; background: linear-gradient(180deg, var(--gray-100), var(--gray-50)); font-size: 0.875rem; font-weight: 800; color: var(--gray-700); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } .home-popular-platform-icon img { width: 100%; height: 100%; object-fit: contain; } .home-popular-platform-name { font-weight: 700; font-size: 0.95rem; line-height: 1.25; letter-spacing: -0.02em; } .home-popular-platform-meta { font-size: 0.875rem; font-weight: 600; color: var(--gray-600); line-height: 1.35; } :root.theme-dark .home-popular-platform-card { border-color: var(--gray-300); background: var(--gray-100); } /* About */ .home-about-card { border-radius: 1.15rem; border: 1px solid var(--gray-200); padding: clamp(1.35rem, 4vw, 2rem); background: radial-gradient(800px 240px at 20% 0%, rgba(255, 96, 0, 0.06), transparent 55%), var(--white); box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06); } .home-about-body { font-size: 1rem; line-height: 1.7; color: var(--gray-700); } .home-about-body p { margin: 0 0 1rem; } .home-about-body p:last-child { margin-bottom: 0; } :root.theme-dark .home-about-card { border-color: var(--gray-300); background: radial-gradient(800px 240px at 20% 0%, rgba(255, 96, 0, 0.08), transparent 55%), var(--gray-100); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3); } :root.theme-dark .home-about-body { color: var(--gray-600); } .editorial-notice { margin: 0 0 1rem; padding: 0.65rem 1rem; background: #f8f8f8; border-radius: 6px; font-size: 12px; line-height: 1.45; color: var(--gray-700, #444); } .editorial-notice a { text-decoration: underline; } :root.theme-dark .editorial-notice { background: color-mix(in srgb, var(--gray-200, #333) 60%, transparent); color: var(--gray-600, #ccc); } .home-editorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1rem; } @media (max-width: 768px) { .home-editorial-grid { grid-template-columns: 1fr; } } .home-editorial-card { display: block; padding: 1.1rem 1.15rem; border: 1px solid var(--gray-200, #e5e5e5); border-radius: 10px; text-decoration: none; color: inherit; background: var(--color-surface, #fff); } .home-editorial-card:hover { border-color: var(--brand-primary, #0066cc); } .platform-editorial-note { margin-top: 1.5rem; padding: 0.85rem 1rem; background: #f4f4f4; border-radius: 8px; font-size: 0.92rem; line-height: 1.5; } .platform-key-features { list-style: none; margin: 0; padding: 0; } .platform-key-features li { margin: 0.35rem 0; padding-left: 1.25rem; position: relative; } .platform-key-features li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-primary, #0066cc); } .platform-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; } .platform-related-card { display: block; padding: 0.75rem 1rem; border: 1px solid var(--gray-200, #e5e5e5); border-radius: 8px; text-decoration: none; color: inherit; } .platform-last-verified { font-size: 0.88rem; opacity: 0.75; margin: 0.5rem 0 0; }