/* Theme Name: WoleSSH Theme URI: https://wolessh.app Author: WoleSSH Author URI: https://wolessh.app Description: A modern, interactive single-page (optionally multi-page) startup landing theme for the WoleSSH SSH client. Fully editable via the WordPress Customizer, with a dark-first design, scroll animations, and a built-in demo terminal. Version: 3.2.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: wolessh Tags: landing-page, one-page, startup, full-width-template, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready */ /* ------------------------------------------------------------------------- Design tokens ------------------------------------------------------------------------- */ :root { /* Palette — elegant warm-neutral dark with bold orange accent (+ amber/rose) */ --ws-bg: #0c0a09; --ws-bg-2: #161311; --ws-bg-3: #221d1a; --ws-border: #322b27; --ws-text: #f7f3f0; --ws-muted: #a89f98; --ws-primary: #ff6b35; --ws-primary-2: #ff8f5e; --ws-secondary: #fbbf24; --ws-tertiary: #fb7185; --ws-accent: #34d399; --ws-danger: #fb7185; /* Reusable gradient for brand elements */ --ws-gradient: linear-gradient(120deg, #ff6b35 0%, #fb8b24 50%, #fbbf24 100%); --ws-gradient-soft: linear-gradient(135deg, rgba(255, 107, 53, 0.16), rgba(251, 191, 36, 0.14)); --ws-radius: 18px; --ws-radius-sm: 11px; --ws-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8); --ws-shadow-glow: 0 0 0 1px rgba(255, 107, 53, 0.22), 0 26px 70px -22px rgba(255, 107, 53, 0.5); --ws-max: 1160px; --ws-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --ws-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'Cascadia Code', Menlo, Consolas, monospace; } /* Light theme override (toggled via data-theme on ) */ html[data-theme='light'] { --ws-bg: #faf7f4; --ws-bg-2: #ffffff; --ws-bg-3: #f3ede8; --ws-border: #e7ded7; --ws-text: #1c1714; --ws-muted: #6f645d; --ws-primary: #ea580c; --ws-primary-2: #f97316; --ws-secondary: #d97706; --ws-tertiary: #e11d48; --ws-accent: #059669; --ws-gradient: linear-gradient(120deg, #ea580c 0%, #f97316 50%, #f59e0b 100%); --ws-gradient-soft: linear-gradient(135deg, rgba(234, 88, 12, 0.1), rgba(245, 158, 11, 0.1)); --ws-shadow: 0 24px 55px -28px rgba(28, 23, 20, 0.28); --ws-shadow-glow: 0 0 0 1px rgba(234, 88, 12, 0.14), 0 26px 60px -24px rgba(234, 88, 12, 0.28); } /* ------------------------------------------------------------------------- Base ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--ws-font); background: var(--ws-bg); color: var(--ws-text); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.4s ease, color 0.4s ease; } a { color: var(--ws-primary); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--ws-primary-2); } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { line-height: 1.08; margin: 0 0 0.5em; font-weight: 600; letter-spacing: -0.035em; } h1 { font-weight: 900; } p { margin: 0 0 1rem; } ul { margin: 0; padding: 0; } .ws-container { width: 100%; max-width: var(--ws-max); margin: 0 auto; padding: 0 24px; } /* ------------------------------------------------------------------------- Buttons ------------------------------------------------------------------------- */ .ws-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.85rem 1.6rem; border-radius: 999px; font-weight: 600; font-size: 0.98rem; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; white-space: nowrap; } .ws-btn:active { transform: translateY(1px) scale(0.99); } .ws-btn-primary { background: #fff; color: #050505; border-color: #fff; box-shadow: none; } .ws-btn-primary:hover { background: #dcdcdc; color: #050505; border-color: #dcdcdc; transform: translateY(-2px); box-shadow: none; } html[data-theme='light'] .ws-btn-primary { background: #050505; color: #fff; border-color: #050505; } html[data-theme='light'] .ws-btn-primary:hover { background: #303030; color: #fff; border-color: #303030; } .ws-btn-ghost { background: transparent; color: var(--ws-text); border-color: var(--ws-border); } .ws-btn-ghost:hover { color: var(--ws-text); border-color: var(--ws-primary); background: color-mix(in srgb, var(--ws-primary) 10%, transparent); } .ws-btn-lg { padding: 1.05rem 2rem; font-size: 1.05rem; } /* ------------------------------------------------------------------------- Header / Nav ------------------------------------------------------------------------- */ .ws-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease; border-bottom: 1px solid transparent; } .ws-header.is-scrolled { background: color-mix(in srgb, var(--ws-bg) 82%, transparent); backdrop-filter: saturate(160%) blur(14px); border-bottom-color: var(--ws-border); } .ws-nav { display: flex; align-items: center; justify-content: space-between; height: 68px; } .ws-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.2rem; color: var(--ws-text); letter-spacing: -0.03em; } .ws-brand img { width: 32px; height: 32px; border-radius: 8px; } .ws-brand .ws-brand-mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, var(--ws-primary), var(--ws-secondary)); color: #fff; font-family: var(--ws-mono); font-weight: 700; } .ws-nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; } .ws-nav-links a { color: var(--ws-muted); font-weight: 500; font-size: 0.95rem; } .ws-nav-links a:hover { color: var(--ws-text); } .ws-nav-actions { display: flex; align-items: center; gap: 0.75rem; } .ws-theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ws-border); background: var(--ws-bg-2); color: var(--ws-text); cursor: pointer; display: grid; place-items: center; transition: border-color 0.2s ease, transform 0.2s ease; } .ws-theme-toggle:hover { border-color: var(--ws-primary); transform: rotate(15deg); } .ws-theme-toggle .ws-icon-sun { display: none; } html[data-theme='light'] .ws-theme-toggle .ws-icon-sun { display: block; } html[data-theme='light'] .ws-theme-toggle .ws-icon-moon { display: none; } .ws-burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; border: 1px solid var(--ws-border); border-radius: 10px; background: var(--ws-bg-2); cursor: pointer; align-items: center; justify-content: center; } .ws-burger span { width: 18px; height: 2px; background: var(--ws-text); transition: transform 0.3s ease, opacity 0.3s ease; } .ws-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ws-burger.is-open span:nth-child(2) { opacity: 0; } .ws-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ------------------------------------------------------------------------- Sections ------------------------------------------------------------------------- */ .ws-section { padding: 96px 0; position: relative; } .ws-section-tight { padding: 64px 0; } .ws-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--ws-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ws-primary); margin-bottom: 1rem; padding: 0.35rem 0.8rem; border: 1px solid var(--ws-border); border-radius: 999px; background: var(--ws-bg-2); } .ws-section-head { text-align: center; max-width: 680px; margin: 0 auto 56px; } .ws-section-head h2 { font-size: clamp(2rem, 4.4vw, 3rem); } .ws-section-head p { color: var(--ws-muted); font-size: 1.12rem; } /* Hero */ .ws-hero { padding: 150px 0 90px; position: relative; overflow: hidden; } .ws-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .ws-hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -0.045em; } .ws-hero h1 .ws-gradient { background: var(--ws-gradient); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ws-gradient-shift 8s ease infinite; } @keyframes ws-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .ws-hero-sub { font-size: 1.2rem; color: var(--ws-muted); max-width: 540px; margin-bottom: 2rem; } .ws-hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; } .ws-hero-note { font-size: 0.9rem; color: var(--ws-muted); display: flex; align-items: center; gap: 0.5rem; } .ws-hero-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; } .ws-badge { font-size: 0.82rem; color: var(--ws-muted); background: var(--ws-bg-2); border: 1px solid var(--ws-border); padding: 0.4rem 0.85rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.4rem; } .ws-badge .ws-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ws-accent); } .ws-hero-glow { position: absolute; top: -20%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,107,53,.26), transparent 60%); filter: blur(30px); pointer-events: none; z-index: 0; animation: ws-float 12s ease-in-out infinite; } .ws-hero-glow-2 { position: absolute; bottom: -30%; left: -15%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(251,191,36,.18), transparent 60%); filter: blur(30px); pointer-events: none; z-index: 0; animation: ws-float 15s ease-in-out infinite reverse; } @keyframes ws-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(20px, -24px) scale(1.08); } } .ws-hero .ws-container { position: relative; z-index: 1; } /* Terminal mockup */ .ws-terminal { background: #0a0806; border: 1px solid var(--ws-border); border-radius: var(--ws-radius); box-shadow: var(--ws-shadow); overflow: hidden; font-family: var(--ws-mono); font-size: 0.9rem; } .ws-terminal-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1rem; background: #12100e; border-bottom: 1px solid var(--ws-border); } .ws-terminal-dot { width: 12px; height: 12px; border-radius: 50%; } .ws-terminal-dot.r { background: #ff5f56; } .ws-terminal-dot.y { background: #ffbd2e; } .ws-terminal-dot.g { background: #27c93f; } .ws-terminal-title { margin-left: auto; color: var(--ws-muted); font-size: 0.78rem; } .ws-terminal-body { padding: 1.3rem 1.4rem; min-height: 250px; color: #d1d9e0; } .ws-terminal-body .line { white-space: pre-wrap; } .ws-terminal-body .prompt { color: var(--ws-accent); } .ws-terminal-body .cmd { color: var(--ws-primary-2); } .ws-terminal-body .ok { color: var(--ws-accent); } .ws-terminal-body .muted { color: var(--ws-muted); } .ws-cursor { display: inline-block; width: 9px; height: 1.1em; background: var(--ws-accent); vertical-align: text-bottom; animation: ws-blink 1s step-end infinite; } @keyframes ws-blink { 50% { opacity: 0; } } /* Logos / trust strip */ .ws-trust { border-top: 1px solid var(--ws-border); border-bottom: 1px solid var(--ws-border); background: var(--ws-bg-2); } .ws-trust-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem; padding: 26px 0; } .ws-trust-item { display: flex; align-items: center; gap: 0.6rem; color: var(--ws-muted); font-weight: 600; font-size: 0.95rem; } /* Feature cards */ .ws-grid { display: grid; gap: 22px; } .ws-grid-3 { grid-template-columns: repeat(3, 1fr); } .ws-grid-2 { grid-template-columns: repeat(2, 1fr); } .ws-card { background: var(--ws-bg-2); border: 1px solid var(--ws-border); border-radius: var(--ws-radius); padding: 28px; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; position: relative; overflow: hidden; } .ws-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--ws-primary) 50%, var(--ws-border)); box-shadow: var(--ws-shadow); } .ws-card-icon { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 18px; background: var(--ws-gradient-soft); color: var(--ws-primary); } .ws-card h3 { font-size: 1.2rem; } .ws-card p { color: var(--ws-muted); margin: 0; font-size: 0.97rem; } .ws-card ul { list-style: none; margin-top: 0.75rem; } .ws-card ul li { color: var(--ws-muted); font-size: 0.92rem; padding-left: 1.4rem; position: relative; margin-bottom: 0.35rem; } .ws-card ul li::before { content: '›'; position: absolute; left: 0; color: var(--ws-primary); font-weight: 700; } /* Why / value props */ .ws-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .ws-why-item { display: flex; gap: 1rem; padding: 22px; background: var(--ws-bg-2); border: 1px solid var(--ws-border); border-radius: var(--ws-radius); } .ws-why-item .ws-check { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--ws-accent) 16%, transparent); color: var(--ws-accent); display: grid; place-items: center; } .ws-why-item h4 { margin-bottom: 0.25rem; font-size: 1.05rem; } .ws-why-item p { color: var(--ws-muted); margin: 0; font-size: 0.93rem; } /* Security section */ .ws-security { background: var(--ws-bg-2); border-top: 1px solid var(--ws-border); border-bottom: 1px solid var(--ws-border); } .ws-security-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; } .ws-security-shield { width: 120px; height: 120px; border-radius: 30px; display: grid; place-items: center; background: var(--ws-gradient-soft); color: var(--ws-accent); margin-bottom: 1.5rem; } .ws-security-list { list-style: none; } .ws-security-list li { padding: 14px 0; border-bottom: 1px dashed var(--ws-border); display: flex; gap: 0.9rem; } .ws-security-list li:last-child { border-bottom: none; } .ws-security-list .ws-lock { color: var(--ws-accent); flex-shrink: 0; } .ws-security-list strong { display: block; } .ws-security-list span { color: var(--ws-muted); font-size: 0.92rem; } /* Tech stack */ .ws-tech-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .ws-tech-pill { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1.3rem; border-radius: 999px; background: var(--ws-bg-2); border: 1px solid var(--ws-border); font-weight: 600; font-size: 0.95rem; transition: transform 0.2s ease, border-color 0.2s ease; } .ws-tech-pill:hover { transform: translateY(-3px); border-color: var(--ws-primary); } .ws-tech-pill .ws-tech-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ws-primary); } /* Steps */ .ws-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; } .ws-step { text-align: center; padding: 24px; position: relative; } .ws-step-num { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; font-family: var(--ws-mono); font-weight: 700; font-size: 1.25rem; background: linear-gradient(135deg, var(--ws-primary), var(--ws-secondary)); color: #fff; } .ws-step h4 { font-size: 1.05rem; } .ws-step p { color: var(--ws-muted); font-size: 0.92rem; margin: 0; } /* Pricing / donate */ .ws-donate { text-align: center; } .ws-donate-card { max-width: 560px; margin: 0 auto; background: var(--ws-bg-2); border: 1px solid var(--ws-border); border-radius: 24px; padding: 48px; position: relative; overflow: hidden; box-shadow: var(--ws-shadow); } .ws-price { font-size: 4rem; font-weight: 800; letter-spacing: -0.05em; background: linear-gradient(120deg, var(--ws-primary), var(--ws-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; } .ws-price-sub { color: var(--ws-muted); margin-bottom: 1.5rem; } .ws-donate-features { list-style: none; text-align: left; max-width: 320px; margin: 1.5rem auto; } .ws-donate-features li { padding: 0.4rem 0 0.4rem 1.8rem; position: relative; color: var(--ws-muted); } .ws-donate-features li::before { content: '✓'; position: absolute; left: 0; color: var(--ws-accent); font-weight: 700; } /* FAQ */ .ws-faq { max-width: 780px; margin: 0 auto; } .ws-faq-item { border: 1px solid var(--ws-border); border-radius: var(--ws-radius-sm); margin-bottom: 14px; background: var(--ws-bg-2); overflow: hidden; } .ws-faq-q { width: 100%; text-align: left; background: none; border: none; color: var(--ws-text); padding: 20px 22px; font-size: 1.05rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: inherit; } .ws-faq-q .ws-faq-icon { transition: transform 0.3s ease; flex-shrink: 0; color: var(--ws-primary); } .ws-faq-item.is-open .ws-faq-icon { transform: rotate(45deg); } .ws-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .ws-faq-a-inner { padding: 0 22px 20px; color: var(--ws-muted); } /* CTA banner */ .ws-cta-banner { text-align: center; background: var(--ws-gradient-soft); border: 1px solid var(--ws-border); border-radius: 28px; padding: 64px 32px; position: relative; overflow: hidden; } .ws-cta-banner h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); } .ws-cta-banner p { color: var(--ws-muted); font-size: 1.1rem; max-width: 520px; margin: 0 auto 2rem; } /* Footer */ .ws-footer { background: var(--ws-bg-2); border-top: 1px solid var(--ws-border); padding: 56px 0 28px; } .ws-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; } .ws-footer-brand p { color: #bdbdbd; font-size: 0.93rem; max-width: 280px; margin-top: 1rem; } .ws-footer-col h5 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ws-muted); margin-bottom: 1rem; } .ws-footer-col ul { list-style: none; } .ws-footer-col ul li { margin-bottom: 0.6rem; } .ws-footer-col ul li a { color: var(--ws-text); font-size: 0.93rem; } .ws-footer-col ul li a:hover { color: var(--ws-muted); } .ws-footer-bottom { border-top: 1px solid var(--ws-border); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; color: var(--ws-muted); font-size: 0.88rem; } .ws-social { display: flex; gap: 0.75rem; } .ws-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ws-border); display: grid; place-items: center; color: var(--ws-muted); } .ws-social a:hover { border-color: var(--ws-primary); color: var(--ws-primary); } /* ------------------------------------------------------------------------- Scroll reveal ------------------------------------------------------------------------- */ .ws-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } .ws-reveal.is-visible { opacity: 1; transform: none; } .ws-reveal[data-delay='1'] { transition-delay: 0.08s; } .ws-reveal[data-delay='2'] { transition-delay: 0.16s; } .ws-reveal[data-delay='3'] { transition-delay: 0.24s; } /* ------------------------------------------------------------------------- 3D tilt / depth effects ------------------------------------------------------------------------- */ /* Applied to elements with [data-tilt]. JS sets --rx/--ry from pointer. */ .ws-tilt { transform-style: preserve-3d; transition: transform 0.25s ease; will-change: transform; } .ws-tilt-inner { transform: translateZ(40px); } [data-tilt].is-tilting { transition: transform 0.05s linear; } [data-tilt] { transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); } /* Subtle 3D lift on feature cards */ .ws-card { transform-style: preserve-3d; } .ws-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--ws-primary) 12%, transparent), transparent 45%); opacity: 0; transition: opacity 0.3s ease; } .ws-card:hover::after { opacity: 1; } /* Floating parallax layers in hero (JS-driven, transform only) */ .ws-parallax { will-change: transform; } /* ------------------------------------------------------------------------- Video showcase section ------------------------------------------------------------------------- */ .ws-video-wrap { max-width: 960px; margin: 0 auto; } .ws-video-frame { position: relative; border-radius: var(--ws-radius); overflow: hidden; border: 1px solid var(--ws-border); background: #070503; box-shadow: var(--ws-shadow-glow); aspect-ratio: 16 / 9; } .ws-video-frame video, .ws-video-frame iframe, .ws-video-frame img { width: 100%; height: 100%; display: block; border: 0; object-fit: cover; } .ws-video-glow { position: absolute; inset: -30% -10% auto; height: 60%; background: radial-gradient(circle, rgba(255,107,53,.2), transparent 60%); filter: blur(40px); pointer-events: none; z-index: -1; } /* Click-to-play poster overlay (lazy: iframe only loads on click) */ .ws-video-poster { position: absolute; inset: 0; cursor: pointer; border: 0; padding: 0; width: 100%; background: transparent; } .ws-video-poster::before { content: ''; position: absolute; inset: 0; background: rgba(5,7,13,.35); transition: background 0.3s ease; } .ws-video-poster:hover::before { background: rgba(5,7,13,.15); } .ws-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--ws-gradient); color: #fff; box-shadow: var(--ws-shadow-glow); transition: transform 0.25s ease; } .ws-video-poster:hover .ws-video-play { transform: translate(-50%, -50%) scale(1.08); } .ws-video-play svg { margin-left: 4px; } .ws-video-pulse { position: absolute; top: 50%; left: 50%; width: 84px; height: 84px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(255,107,53,.5); animation: ws-pulse 2.4s ease-out infinite; pointer-events: none; } @keyframes ws-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,107,53,.45); } 100% { box-shadow: 0 0 0 40px rgba(255,107,53,0); } } .ws-video-caption { text-align: center; color: var(--ws-muted); margin-top: 18px; font-size: 0.95rem; } /* Nav active link (scrollspy) */ .ws-nav-links a.is-active { color: var(--ws-text); } .ws-nav-links a.is-active::after { content: ''; display: block; height: 2px; border-radius: 2px; margin-top: 3px; background: var(--ws-gradient); } @media (prefers-reduced-motion: reduce) { .ws-reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .ws-cursor, .ws-hero-glow, .ws-hero-glow-2, .ws-video-pulse { animation: none; } .ws-hero h1 .ws-gradient { animation: none; } [data-tilt] { transform: none !important; } } /* ------------------------------------------------------------------------- Secondary editorial views — monochrome Metro ------------------------------------------------------------------------- */ body.ws-editorial-view, body.ws-single-view { --ws-bg: #080808; --ws-bg-2: #111; --ws-bg-3: #1b1b1b; --ws-border: #3a3a3a; --ws-text: #fff; --ws-muted: #bdbdbd; --ws-primary: #fff; --ws-primary-2: #d9d9d9; --ws-secondary: #c8c8c8; --ws-tertiary: #a8a8a8; --ws-accent: #eee; --ws-danger: #ccc; --ws-gradient: linear-gradient(120deg, #fff, #bdbdbd); --ws-gradient-soft: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); --ws-font-display: 'Pixelify Sans', 'Arial Narrow', 'Inter', system-ui, sans-serif; } html[data-theme='light'] body.ws-editorial-view, html[data-theme='light'] body.ws-single-view { --ws-bg: #f7f7f7; --ws-bg-2: #fff; --ws-bg-3: #e9e9e9; --ws-border: #b8b8b8; --ws-text: #050505; --ws-muted: #4d4d4d; --ws-primary: #050505; --ws-primary-2: #303030; } body.ws-editorial-view :is(h1, h2, h3, h4, .ws-editorial-kicker, .ws-editorial-rail), body.ws-single-view :is(h1, h2, h3, h4, .ws-editorial-kicker, .ws-editorial-rail) { font-family: var(--ws-font-display); } .ws-page { min-height: 75vh; padding: 108px 0 80px; background-color: var(--ws-bg); background-image: linear-gradient(color-mix(in srgb, var(--ws-text) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ws-text) 6%, transparent) 1px, transparent 1px); background-size: 48px 48px; } .ws-page > .ws-container { max-width: 1240px; } .ws-editorial-grid { display: grid; grid-template-columns: minmax(88px, 1fr) minmax(0, 10fr); gap: 8px; align-items: start; } .ws-editorial-rail { position: sticky; top: 84px; min-height: 360px; padding: 18px 12px; border: 1px solid var(--ws-border); background: color-mix(in srgb, var(--ws-bg-2) 86%, transparent); color: var(--ws-text); overflow: hidden; } .ws-editorial-rail-number { display: block; color: color-mix(in srgb, var(--ws-text) 18%, transparent); font-size: clamp(2rem, 7vw, 3rem); line-height: .75; text-align: center; } .ws-editorial-rail-label { position: absolute; left: 50%; bottom: 70px; font-family: var(--ws-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%) rotate(-90deg); } .ws-editorial-rail-label-page { top: 50%; bottom: auto; display: grid; gap: .38rem; width: 250px; max-width: none; white-space: normal; line-height: 1.25; text-align: center; text-wrap: balance; overflow-wrap: anywhere; transform: translate(-50%, -50%) rotate(-90deg); } .ws-editorial-rail-title { display: block; } .ws-page-content { min-width: 0; } .ws-editorial-article, .ws-page-content > .post, .ws-page-content > .page { border: 1px solid var(--ws-border); background: color-mix(in srgb, var(--ws-bg-2) 91%, transparent); backdrop-filter: blur(14px); } .ws-editorial-header, .ws-entry, .ws-editorial-featured { padding-right: clamp(24px, 7vw, 96px); padding-left: clamp(24px, 7vw, 96px); } .ws-editorial-header { padding-top: clamp(28px, 5vw, 64px); padding-bottom: clamp(24px, 4vw, 48px); } .ws-editorial-kicker { margin: 0 0 1rem; color: var(--ws-muted); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; } .ws-editorial-kicker a { color: inherit; text-decoration: underline; text-underline-offset: .2em; } .ws-editorial-header h1, .ws-page-content > article > h1 { max-width: 18ch; margin: 0; font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -.025em; } .ws-editorial-featured { margin: 0; padding-bottom: clamp(28px, 5vw, 64px); } .ws-editorial-featured img { width: 100%; max-height: 620px; object-fit: cover; border: 1px solid var(--ws-border); } .ws-entry { max-width: calc(72ch + clamp(48px, 14vw, 192px)); padding-bottom: clamp(36px, 7vw, 88px); color: var(--ws-text); font-family: var(--ws-font); font-size: clamp(1rem, .4vw + .92rem, 1.08rem); } .ws-entry > :first-child { margin-top: 0; } .ws-entry > :last-child { margin-bottom: 0; } .ws-entry :is(h2, h3, h4) { margin: 2em 0 .65em; color: var(--ws-text); } .ws-entry h2 { font-size: clamp(1.55rem, 3vw, 2.25rem); } .ws-entry h3 { font-size: clamp(1.3rem, 2.3vw, 1.75rem); } .ws-entry h4 { font-size: 1.15rem; } .ws-entry p { margin: 0 0 1.25em; } .ws-entry a { color: var(--ws-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; } .ws-entry :is(ul, ol) { margin: 0 0 1.4em; padding-left: 1.5em; } .ws-entry li + li { margin-top: .4em; } .ws-entry blockquote { margin: 2rem 0; padding: 1.25rem 1.5rem; border-left: 4px solid var(--ws-text); background: var(--ws-bg-3); color: var(--ws-muted); } .ws-entry blockquote > :last-child { margin-bottom: 0; } .ws-entry code { padding: .12rem .35rem; border: 1px solid var(--ws-border); background: var(--ws-bg-3); font-family: var(--ws-mono); font-size: .88em; } .ws-entry pre { max-width: 100%; margin: 1.75rem 0; padding: 1.25rem; overflow-x: auto; border: 1px solid var(--ws-border); background: var(--ws-bg-3); } .ws-entry pre code { padding: 0; border: 0; background: transparent; } .ws-entry table { width: 100%; margin: 1.75rem 0; border-collapse: collapse; font-size: .95rem; } .ws-entry :is(th, td) { padding: .75rem; border: 1px solid var(--ws-border); text-align: left; } .ws-entry th { background: var(--ws-bg-3); font-family: var(--ws-mono); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; } .ws-entry :is(img, video, iframe, embed, object) { max-width: 100%; } .ws-entry iframe { border: 1px solid var(--ws-border); } .ws-entry figure { max-width: 100%; margin: 1.75rem 0; } .ws-entry figcaption, .ws-entry .wp-caption-text { margin-top: .55rem; color: var(--ws-muted); font-family: var(--ws-mono); font-size: .75rem; text-align: left; } .ws-entry .alignwide { width: min(90vw, 980px); max-width: none; margin-left: 50%; transform: translateX(-50%); } .ws-entry .alignfull { width: min(100vw - 48px, 1160px); max-width: none; margin-left: 50%; transform: translateX(-50%); } .ws-post-meta { display: flex; flex-wrap: wrap; gap: 1px; margin: 2rem 0 0; padding: 0; list-style: none; font-family: var(--ws-mono); font-size: .72rem; } .ws-post-meta li { display: grid; gap: .2rem; min-width: 150px; padding: .7rem .85rem; border: 1px solid var(--ws-border); } .ws-post-meta li > span { color: var(--ws-muted); letter-spacing: .08em; text-transform: uppercase; } .ws-post-meta :is(a, time) { color: var(--ws-text); } .ws-pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2rem; font-family: var(--ws-mono); font-size: .78rem; } .ws-pagination :is(a, span) { display: inline-grid; min-width: 44px; min-height: 44px; padding: .6rem .8rem; place-items: center; border: 1px solid var(--ws-border); color: var(--ws-text); } .ws-pagination a:hover { background: var(--ws-text); color: var(--ws-bg); } .ws-post-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } .ws-post-navigation > a { display: flex; min-height: 96px; padding: 1rem 1.2rem; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--ws-border); background: var(--ws-bg-2); color: var(--ws-text); font-weight: 600; } .ws-post-navigation > a:last-child { text-align: right; } .ws-post-navigation small { display: block; margin-bottom: .25rem; color: var(--ws-muted); font-family: var(--ws-mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; } .ws-post-navigation > a:hover { background: var(--ws-text); color: var(--ws-bg); } .ws-post-navigation > a:hover small { color: inherit; } .ws-page-content > .comments-area, .ws-page-content > #comments { margin-top: 8px; padding: clamp(24px, 5vw, 56px); border: 1px solid var(--ws-border); background: var(--ws-bg-2); } .ws-page-content .comment-list { margin: 0 0 2rem; padding: 0; list-style: none; } .ws-page-content .comment-list .children { padding-left: 1.5rem; list-style: none; } .ws-page-content .comment-body { margin-top: 8px; padding: 1rem; border: 1px solid var(--ws-border); } .ws-page-content .comment-meta { font-family: var(--ws-mono); font-size: .75rem; } .ws-page-content :is(input:not([type='submit']), textarea) { max-width: 100%; border-radius: 0; } /* Contact form shortcode */ .ws-contactform-wrap { max-width: 760px; margin: 2rem auto 0; } .ws-contactform-wrap:has(.ws-contactform-two-column) { max-width: 100%; } .ws-contactform { padding: clamp(20px, 4vw, 40px); border: 1px solid var(--ws-border); border-radius: 2px; background: color-mix(in srgb, var(--ws-bg-2) 90%, transparent); box-shadow: 12px 12px 0 color-mix(in srgb, var(--ws-text) 7%, transparent); color: var(--ws-text); font-family: var(--ws-font); } .ws-contactform-shell { min-width: 0; } .ws-contactform-two-column .ws-contactform-shell { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 64px); align-items: start; } .ws-contactform-copy, .ws-contactform-main { min-width: 0; } .ws-contactform-stacked .ws-contactform-copy { margin-bottom: 2rem; } .ws-contactform-label { margin: 0 0 .9rem; color: var(--ws-muted); font-family: var(--ws-mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; } .ws-contactform h3 { margin: 0 0 .75rem; font-family: 'Pixelify Sans', 'Arial Narrow', var(--ws-font); font-size: clamp(1.65rem, 3vw, 2.35rem); letter-spacing: -.025em; } .ws-contactform-intro { max-width: 52ch; margin: 0; color: var(--ws-muted); font-size: .98rem; } .ws-contactform-intro > :last-child { margin-bottom: 0; } .ws-contactform-intro :is(p, li, blockquote) { color: var(--ws-muted); } .ws-contactform-intro a { color: var(--ws-text); text-decoration: underline; text-underline-offset: .2em; } .ws-contactform-intro :is(strong, b) { color: var(--ws-text); } .ws-contactform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 1rem; } .ws-contactform-stacked .ws-contactform-grid { grid-template-columns: 1fr; } .ws-contactform-field-message, .ws-contactform-field-captcha { grid-column: 1 / -1; } .ws-contactform-field { padding: 12px; border: 1px solid var(--ws-border); background: color-mix(in srgb, var(--ws-bg) 72%, transparent); } .ws-contactform-field label { display: block; margin-bottom: .45rem; color: var(--ws-text); font-family: var(--ws-mono); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .ws-contactform input[type="text"], .ws-contactform input[type="email"], .ws-contactform input[type="tel"], .ws-contactform textarea { width: 100%; min-height: 44px; padding: .7rem .8rem; border: 1px solid var(--ws-border); border-radius: 0; background: var(--ws-bg); color: var(--ws-text); font-family: var(--ws-font); font-size: 1rem; transition: border-color .15s ease, box-shadow .15s ease; } .ws-contactform textarea { min-height: 150px; resize: vertical; } .ws-contactform :is(input[type="text"], input[type="email"], input[type="tel"], textarea):focus { outline: 2px solid var(--ws-text); outline-offset: 2px; border-color: var(--ws-text); box-shadow: none; } .ws-contactform-required { margin-left: .15rem; color: inherit; } .ws-contactform-captcha-question { color: var(--ws-text); } .ws-contactform-msg { margin: 0 0 1rem; padding: .85rem 1rem .85rem 2.4rem; border: 1px solid var(--ws-text); border-radius: 0; background: var(--ws-bg); color: var(--ws-text); font-weight: 600; position: relative; } .ws-contactform-msg::before { position: absolute; left: .85rem; font-family: var(--ws-mono); } .ws-contactform-msg.ok { border-style: double; border-width: 3px; } .ws-contactform-msg.ok::before { content: '✓'; } .ws-contactform-msg.err { border-style: dashed; } .ws-contactform-msg.err::before { content: '!'; } .ws-contactform .ws-btn { min-width: 180px; min-height: 44px; border: 1px solid var(--ws-text); border-radius: 0; background: var(--ws-text); color: var(--ws-bg); box-shadow: none; font-family: var(--ws-mono); text-transform: uppercase; } .ws-contactform .ws-btn:hover { background: transparent; color: var(--ws-text); transform: none; box-shadow: none; } .ws-contactform-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } /* Maintenance */ .ws-maintenance-page { --ws-bg: #050505; --ws-bg-2: #101010; --ws-bg-3: #1a1a1a; --ws-border: #444; --ws-text: #fff; --ws-muted: #bdbdbd; min-height: 100vh; margin: 0; background-color: var(--ws-bg); color: var(--ws-text); font-family: var(--ws-font); background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 48px 48px; } html[data-theme='light'] .ws-maintenance-page { --ws-bg: #f5f5f5; --ws-bg-2: #fff; --ws-bg-3: #e8e8e8; --ws-border: #aaa; --ws-text: #050505; --ws-muted: #505050; background-image: linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.08) 1px, transparent 1px); } .ws-maintenance-shell { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 32px 0; } .ws-maintenance-shell .ws-container { max-width: 1080px; } .ws-maintenance { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 7fr); width: 100%; border: 1px solid var(--ws-border); border-radius: 0; background: color-mix(in srgb, var(--ws-bg-2) 90%, transparent); backdrop-filter: blur(14px); } .ws-maintenance-rail { position: relative; min-height: 430px; padding: 18px; overflow: hidden; border-right: 1px solid var(--ws-border); font-family: var(--ws-mono); } .ws-maintenance-code { color: color-mix(in srgb, var(--ws-text) 18%, transparent); font-family: 'Pixelify Sans', 'Arial Narrow', var(--ws-font); font-size: clamp(2rem, 11vw, 3rem); line-height: .75; } .ws-maintenance-rail-label { position: absolute; bottom: 100px; left: 50%; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%) rotate(-90deg); } .ws-maintenance-content { display: flex; max-width: 760px; padding: clamp(32px, 7vw, 88px); flex-direction: column; justify-content: center; } .ws-maintenance-brand { margin: 0 0 1.2rem; color: var(--ws-muted); font-family: var(--ws-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; } .ws-maintenance h1 { max-width: 15ch; margin: 0 0 1rem; font-family: 'Pixelify Sans', 'Arial Narrow', var(--ws-font); font-size: clamp(2rem, 5vw, 3.8rem); letter-spacing: -.025em; } .ws-maintenance-description { max-width: 52ch; margin: 0; color: var(--ws-muted); font-size: 1.05rem; line-height: 1.7; white-space: pre-line; } .ws-maintenance-status { display: flex; margin-top: 2rem; padding-top: 1rem; align-items: center; gap: .8rem; border-top: 1px solid var(--ws-border); color: var(--ws-muted); font-family: var(--ws-mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; } .ws-maintenance-dots { display: inline-flex; gap: 4px; } .ws-maintenance-dots i { width: 7px; height: 7px; border: 1px solid var(--ws-text); background: transparent; } .ws-maintenance-dots i:first-child { background: var(--ws-text); } /* WP core alignment/comment support */ .aligncenter { margin-left: auto; margin-right: auto; } .alignright { float: right; margin-left: 1.5rem; } .alignleft { float: left; margin-right: 1.5rem; } .wp-caption-text { color: var(--ws-muted); font-size: 0.85rem; text-align: center; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 12px; top: 12px; background: var(--ws-primary); color: #fff; padding: 0.5rem 1rem; border-radius: 8px; z-index: 200; } /* ------------------------------------------------------------------------- Responsive ------------------------------------------------------------------------- */ @media (max-width: 900px) { .ws-hero-grid { grid-template-columns: 1fr; } .ws-security-grid { grid-template-columns: 1fr; } .ws-grid-3 { grid-template-columns: repeat(2, 1fr); } .ws-steps { grid-template-columns: repeat(2, 1fr); } .ws-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .ws-nav-links, .ws-nav-actions .ws-btn { display: none; } .ws-burger { display: flex; } .ws-nav-links.is-open { display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; background: var(--ws-bg-2); border-bottom: 1px solid var(--ws-border); padding: 20px 24px; gap: 1.2rem; } .ws-section { padding: 64px 0; } .ws-grid-3, .ws-grid-2, .ws-why-grid, .ws-steps, .ws-footer-grid { grid-template-columns: 1fr; } .ws-donate-card { padding: 32px 24px; } .ws-footer-bottom { flex-direction: column; text-align: center; } .ws-page { padding: 92px 0 56px; } .ws-editorial-grid { grid-template-columns: 1fr; } .ws-editorial-rail { position: relative; top: auto; min-height: 58px; display: flex; align-items: center; justify-content: space-between; } .ws-editorial-rail-number { font-size: 2.5rem; } .ws-editorial-rail-label { position: static; transform: none; } .ws-editorial-rail-label-page { width: auto; max-width: calc(100% - 88px); gap: .12rem; text-align: right; } .ws-editorial-rail-meta { letter-spacing: .14em; } .ws-post-navigation { grid-template-columns: 1fr; } .ws-entry .alignwide, .ws-entry .alignfull { width: 100%; margin-left: 0; transform: none; } .ws-contactform-two-column .ws-contactform-shell { grid-template-columns: 1fr; gap: 24px; } .ws-contactform-grid { grid-template-columns: 1fr; } .ws-contactform-stacked .ws-contactform-copy, .ws-contactform-two-column .ws-contactform-copy { margin-bottom: 0; } .ws-maintenance-shell { padding: 24px 0; } .ws-maintenance { grid-template-columns: 1fr; } .ws-maintenance-rail { min-height: 60px; display: flex; align-items: center; justify-content: space-between; border-right: 0; border-bottom: 1px solid var(--ws-border); } .ws-maintenance-code { font-size: 2.8rem; } .ws-maintenance-rail-label { position: static; transform: none; } .ws-maintenance-content { padding: 32px 24px 40px; } /* Disable pointer-tilt transforms on small screens for stability. */ [data-tilt] { transform: none !important; } .ws-video-play, .ws-video-pulse { width: 64px; height: 64px; } } /* ------------------------------------------------------------------------- Landing dashboard — monochrome Metro glass composition ------------------------------------------------------------------------- */ body.ws-landing { --ws-bg: #080808; --ws-bg-2: #111; --ws-bg-3: #1b1b1b; --ws-border: #3a3a3a; --ws-text: #fff; --ws-muted: #bdbdbd; --ws-primary: #fff; --ws-primary-2: #d9d9d9; --ws-secondary: #c8c8c8; --ws-tertiary: #a8a8a8; --ws-accent: #eee; --ws-danger: #ccc; --ws-gradient: linear-gradient(120deg, #fff, #bdbdbd); --ws-gradient-soft: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); --ws-shadow: 0 24px 60px -30px rgba(0,0,0,.9); --ws-shadow-glow: 0 20px 55px -30px rgba(255,255,255,.35); --ws-metro-blue: #050505; --ws-metro-cyan: #181818; --ws-metro-green: #292929; --ws-metro-orange: #111; --ws-metro-purple: #222; --ws-metro-navy: #0b0b0b; --ws-metro-gap: 8px; --ws-font-display: 'Doto', 'Arial Narrow', 'Inter', system-ui, sans-serif; font-family: var(--ws-font); background: var(--ws-bg); } html[data-theme='light'] body.ws-landing { --ws-bg: #f7f7f7; --ws-bg-2: #fff; --ws-bg-3: #e9e9e9; --ws-border: #b8b8b8; --ws-text: #050505; --ws-muted: #4d4d4d; --ws-primary: #050505; --ws-primary-2: #303030; --ws-secondary: #444; --ws-tertiary: #666; --ws-accent: #111; --ws-danger: #333; --ws-gradient: linear-gradient(120deg, #050505, #4a4a4a); --ws-gradient-soft: linear-gradient(135deg, rgba(0,0,0,.09), rgba(0,0,0,.02)); --ws-shadow: 0 24px 55px -30px rgba(0,0,0,.35); --ws-shadow-glow: 0 20px 55px -30px rgba(0,0,0,.3); --ws-metro-blue: #050505; --ws-metro-cyan: #292929; --ws-metro-green: #414141; --ws-metro-orange: #171717; --ws-metro-purple: #333; --ws-metro-navy: #0d0d0d; } body.ws-landing :is(h1, h2, h3, h4, .ws-story-number, .ws-brand, .ws-nav-links, .ws-btn, .ws-metro-kicker, .ws-metro-label, .ws-tile-trust, .ws-tile-metric, .ws-feature-top, .ws-tech-pill, .ws-platform-tile, .ws-step-num, .ws-price, .ws-reveal strong, .ws-footer-col h5) { font-family: var(--ws-font-display); } body.ws-landing :is(p, .ws-faq-a-inner, .ws-security-tiles div span, .ws-step p, .ws-why-item p, .ws-video-caption) { font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; } body.ws-landing :is(code, pre, kbd, samp, .ws-terminal, .ws-feature-top span, .ws-lock) { font-family: var(--ws-mono); } body.ws-landing #ws-content { position: relative; isolation: isolate; } body.ws-landing.ws-front-page #ws-content { overflow: clip; } body.ws-landing .ws-container { max-width: 1440px; padding-inline: clamp(16px, 3.4vw, 48px); } body.ws-landing:is(.ws-editorial-view, .ws-single-view) .ws-page > .ws-container { max-width: 1240px; } body.ws-landing :is(#top, #showcase, #features, #security, #tech, #download, #faq) { scroll-margin-top: 76px; } body.ws-landing .ws-anchor-target { display: block; height: 0; scroll-margin-top: 76px; } body.ws-landing .ws-path-canvas { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: .6; contain: strict; } body.ws-landing .ws-parallax-mid { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: layout paint style; opacity: .14; color: #fff; } html[data-theme='light'] body.ws-landing .ws-parallax-mid { color: #000; opacity: .09; } body.ws-landing .ws-parallax-fragment { position: absolute; left: var(--x); top: var(--y); box-sizing: border-box; color: currentColor; border-color: currentColor; font-family: var(--ws-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; line-height: 1; transform: translate3d(var(--ws-parallax-x, 0), var(--ws-parallax-y, 0), 0); will-change: transform; } body.ws-landing .ws-parallax-terminal { width: 142px; height: 68px; padding: 29px 10px 8px; border: 1px solid; } body.ws-landing .ws-parallax-terminal::before { content: ''; position: absolute; inset: 19px 0 auto; border-top: 1px solid; } body.ws-landing .ws-parallax-dots { position: absolute; top: 4px; left: 8px; letter-spacing: 4px; } body.ws-landing .ws-parallax-terminal > span:last-child { display: block; white-space: nowrap; } body.ws-landing .ws-parallax-frame { width: 120px; height: 92px; border-top: 1px solid; border-right: 1px solid; } body.ws-landing .ws-parallax-frame::before, body.ws-landing .ws-parallax-frame::after { content: ''; position: absolute; background: currentColor; } body.ws-landing .ws-parallax-frame::before { top: 0; right: 0; width: 18px; height: 1px; transform: translateY(17px); } body.ws-landing .ws-parallax-frame::after { top: 0; right: 0; width: 1px; height: 18px; transform: translateX(-17px); } body.ws-landing .ws-parallax-cursor { width: 12px; height: 20px; border: 1px solid; background: currentColor; } body.ws-landing .ws-parallax-nodes { width: 128px; height: 18px; border-top: 1px solid; } body.ws-landing .ws-parallax-nodes span { position: absolute; top: -5px; width: 9px; height: 9px; border: 1px solid; background: var(--ws-bg); } body.ws-landing .ws-parallax-nodes span:first-child { left: 0; } body.ws-landing .ws-parallax-nodes span:last-child { right: 0; } body.ws-landing .ws-parallax-server { width: 74px; padding: 5px; border: 1px solid; } body.ws-landing .ws-parallax-server span { display: block; height: 14px; margin: 3px 0; border: 1px solid; } body.ws-landing .ws-parallax-server span::after { content: ''; display: block; width: 3px; height: 3px; margin: 4px 0 0 55px; background: currentColor; } body.ws-landing .ws-parallax-label { padding: 6px 8px; border: 1px solid; font-family: var(--ws-font-display); } body.ws-landing .ws-parallax-prompt { font-family: var(--ws-font-display); font-size: 28px; } body.ws-landing .ws-parallax-far { filter: blur(1.5px); } body.ws-landing .ws-metro-hero, body.ws-landing .ws-metro-section, body.ws-landing .ws-metro-story, body.ws-landing .ws-final-cta, body.ws-landing .ws-footer { position: relative; z-index: 1; } body.ws-landing .ws-header { background: #080808; background: rgba(8,8,8,.84); border-bottom: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(16px) saturate(110%); backdrop-filter: blur(16px) saturate(110%); box-shadow: 0 10px 35px -28px rgba(0,0,0,.9); } html[data-theme='light'] body.ws-landing .ws-header { background: #fff; background: rgba(255,255,255,.84); border-bottom-color: rgba(0,0,0,.18); box-shadow: 0 10px 35px -28px rgba(0,0,0,.35); } body.ws-landing .ws-header.is-scrolled { box-shadow: 0 12px 38px -25px rgba(0,0,0,.95); } body.ws-landing :is(a, button, video):focus-visible { outline: 3px solid currentColor; outline-offset: 3px; } body.ws-landing .ws-tile, body.ws-landing .ws-section-tile, body.ws-landing .ws-story-tile, body.ws-landing .ws-donate-tile, body.ws-landing .ws-final-cta-inner { border-radius: 2px; } body.ws-landing .ws-brand { min-width: 0; } body.ws-landing .ws-brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.ws-landing .ws-btn { min-height: 46px; max-width: 100%; border-radius: 2px; white-space: normal; text-align: center; } body.ws-landing .ws-btn-light { background: #fff; color: #050505; border: 2px solid #fff; box-shadow: none; } body.ws-landing .ws-btn-light:hover { background: #dcdcdc; color: #050505; transform: none; } body.ws-landing .ws-btn-outline-light { color: #fff; border: 2px solid rgba(255,255,255,.9); background: transparent; } body.ws-landing .ws-btn-outline-light:hover { color: #fff; background: rgba(255,255,255,.14); } body.ws-landing .ws-nav { height: 60px; } body.ws-landing .ws-theme-toggle, body.ws-landing .ws-burger { min-width: 44px; min-height: 44px; } body.ws-landing .ws-metro-hero { padding: 76px 0 16px; align-items: stretch; } body.ws-landing .ws-metro-hero .ws-container { display: grid; } body.ws-landing .ws-dashboard { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ws-metro-gap); align-items: stretch; } body.ws-landing .ws-tile { min-width: 0; position: relative; overflow: hidden; } body.ws-landing .ws-tile-hero { grid-column: span 5; padding: clamp(28px, 3.5vw, 56px); background: #050505; color: #fff; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 28px 75px -42px rgba(0,0,0,.95); display: flex; flex-direction: column; justify-content: center; } body.ws-landing .ws-tile-app-showcase { grid-column: span 7; grid-row: auto; padding: clamp(16px, 2vw, 24px); overflow: visible; color: #fff; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; display: flex; flex-direction: column; } body.ws-landing .ws-app-mockup { --mockup-rx: 6deg; --mockup-ry: -15deg; position: relative; width: 100%; padding: clamp(4px, 1vw, 12px); overflow: visible; perspective: 1200px; transform-style: preserve-3d; } body.ws-landing .ws-app-mockup > :is(.ws-hero-showcase-link, video) { width: 100%; height: auto; display: block; object-fit: contain; background: #090d12; transform: perspective(1200px) rotateX(var(--mockup-rx, 6deg)) rotateY(var(--mockup-ry, -15deg)) rotateZ(5deg) translateZ(0); transform-origin: center; transform-style: preserve-3d; backface-visibility: hidden; transition: transform .28s ease; } body.ws-landing .ws-app-mockup.is-image .ws-hero-showcase-link { aspect-ratio: 1804 / 1204; } body.ws-landing .ws-app-mockup.is-image img { width: 100%; height: 100%; display: block; object-fit: contain; } body.ws-landing .ws-app-mockup.is-video video { aspect-ratio: 16 / 9; } body.ws-landing .ws-app-mockup:hover { --mockup-rx: 5deg; --mockup-ry: -6deg; } body.ws-landing .ws-app-mockup:focus-within { --mockup-rx: 0deg; --mockup-ry: -3deg; } body.ws-landing .ws-hero-showcase-link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; } body.ws-landing .ws-dashboard.is-showcase-hidden .ws-tile-hero { grid-column: 1 / -1; } body.ws-landing .ws-tile-hero h1 { max-width: 760px; margin: 0 0 .28em; font-size: clamp(2.5rem, 5vw, 4.8rem); font-weight: 600; line-height: .98; letter-spacing: -.055em; overflow-wrap: anywhere; } body.ws-landing .ws-tile-hero .ws-gradient { color: #fff; -webkit-text-fill-color: currentColor; text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .13em; } body.ws-landing .ws-tile-hero .ws-hero-sub { max-width: 59ch; color: rgba(255,255,255,.91); margin-bottom: clamp(20px, 3vh, 34px); font-size: clamp(1rem, 1.35vw, 1.18rem); } body.ws-landing .ws-tile-hero .ws-hero-purpose { max-width: 62ch; margin: -10px 0 clamp(20px, 3vh, 28px); padding: 14px 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: rgba(255,255,255,.96); font-size: .96rem; line-height: 1.55; } body.ws-landing .ws-metro-kicker, body.ws-landing .ws-metro-label { display: block; margin-bottom: .9rem; font-size: .73rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; } body.ws-landing .ws-tile-hero .ws-hero-note { margin: 0; color: #fff; } body.ws-landing .ws-tile-trust { grid-column: span 4; min-height: 0; padding: clamp(16px, 1.8vw, 24px); display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; color: #fff; background: #171717; background: rgba(17,17,17,.8); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 45px -35px rgba(0,0,0,.95); transition: filter .15s ease, translate .15s ease; } body.ws-landing .ws-tile-trust:hover { color: #fff; filter: brightness(1.08); translate: 0 -2px; } body.ws-landing .ws-tile-trust strong, body.ws-landing .ws-tile-trust small { display: block; overflow-wrap: anywhere; } body.ws-landing .ws-tile-trust strong { font-size: clamp(1rem, 1.4vw, 1.3rem); font-weight: 550; line-height: 1.1; } body.ws-landing .ws-tile-trust small { margin-top: 5px; opacity: .86; font-size: .76rem; } body.ws-landing :is(.ws-tile-cyan, .ws-tile-green, .ws-tile-orange) { background-color: rgba(17,17,17,.8); } body.ws-landing .ws-tile-metric { font-size: clamp(2.2rem, 3.4vw, 4rem); font-weight: 250; line-height: 1; letter-spacing: -.06em; } body.ws-landing .ws-metro-section { padding: clamp(70px, 8vw, 112px) 0; } body.ws-landing .ws-board-heading { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(0, 1.15fr); column-gap: clamp(24px, 5vw, 72px); margin-bottom: clamp(30px, 5vw, 54px); align-items: end; } body.ws-landing .ws-board-heading .ws-metro-label { grid-row: 1 / 3; align-self: start; } body.ws-landing .ws-board-heading h2, body.ws-landing .ws-section-tile h2, body.ws-landing .ws-donate-tile h2, body.ws-landing .ws-final-cta h2 { margin: 0 0 .3em; font-size: clamp(1.8rem, 3.6vw, 3.5rem); font-weight: 400; line-height: 1.05; letter-spacing: -.045em; overflow-wrap: anywhere; } body.ws-landing .ws-board-heading p { max-width: 66ch; color: var(--ws-muted); margin: 0; font-size: 1.05rem; } body.ws-landing .ws-metro-story { padding: 0 0 var(--ws-metro-gap); } body.ws-landing .ws-story-tile { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(0, 1.55fr); gap: clamp(26px, 5vw, 70px); padding: clamp(30px, 5vw, 64px); background: #050505; color: #fff; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 30px 70px -45px rgba(0,0,0,.95); } body.ws-landing .ws-story-number { font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 400; line-height: .85; letter-spacing: -.06em; } body.ws-landing .ws-story-tile .ws-metro-label { color: #fff; } body.ws-landing .ws-story-tile h2, body.ws-landing #ws-story-title { margin: 0; font-size: clamp(1.2rem, 2.3vw, 2.2rem); font-weight: 350; line-height: 1.22; letter-spacing: -.025em; } body.ws-landing .ws-showcase-grid, body.ws-landing .ws-security-layout, body.ws-landing .ws-faq-layout, body.ws-landing .ws-tech-board, body.ws-landing .ws-value-board { display: grid; grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr); gap: var(--ws-metro-gap); align-items: stretch; } body.ws-landing .ws-section-tile { min-width: 0; padding: clamp(28px, 4vw, 52px); color: #fff; border: 1px solid rgba(255,255,255,.15); display: flex; flex-direction: column; justify-content: flex-end; } body.ws-landing .ws-section-tile .ws-metro-label, body.ws-landing .ws-section-tile p { color: rgba(255,255,255,.88); } body.ws-landing .ws-section-tile p { margin: 0; } body.ws-landing :is(.ws-section-tile-blue, .ws-section-tile-navy, .ws-section-tile-purple, .ws-section-tile-orange, .ws-section-tile-cyan) { background: #090909; } body.ws-landing .ws-video-wrap { max-width: none; min-width: 0; margin: 0; background: #101010; padding: var(--ws-metro-gap); border: 1px solid rgba(255,255,255,.16); box-shadow: var(--ws-shadow); } body.ws-landing .ws-video-frame { border: 0; border-radius: 1px; box-shadow: none; } body.ws-landing .ws-video-play { border-radius: 2px; background: #fff; color: #000; box-shadow: none; } body.ws-landing .ws-video-poster::before { background: rgba(0,0,0,.42); } body.ws-landing .ws-video-poster:hover::before { background: rgba(0,0,0,.2); } body.ws-landing .ws-feature-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--ws-metro-gap); align-items: stretch; } body.ws-landing .ws-feature-tile { padding: clamp(22px, 2.5vw, 34px); color: #fff; background: #111; border: 1px solid rgba(255,255,255,.15); display: flex; flex-direction: column; justify-content: space-between; transition: filter .15s ease, translate .15s ease; } body.ws-landing .ws-feature-tile:nth-child(2), body.ws-landing .ws-feature-tile:nth-child(5) { grid-column: span 2; } body.ws-landing .ws-feature-tile:nth-child(even) { background: #292929; } body.ws-landing .ws-feature-tile:hover { filter: brightness(1.07); translate: 0 -3px; } body.ws-landing .ws-feature-top { display: flex; justify-content: space-between; align-items: start; margin-bottom: 34px; } body.ws-landing .ws-feature-top span { font: 700 .75rem var(--ws-mono); opacity: .65; } body.ws-landing .ws-feature-tile h3 { margin: 0 0 .35rem; font-size: clamp(1.3rem, 2vw, 1.85rem); font-weight: 500; } body.ws-landing .ws-feature-tile p { margin: 0; color: rgba(255,255,255,.87); font-size: .92rem; } body.ws-landing .ws-security-board { background: rgba(255,255,255,.035); } body.ws-landing .ws-metro-shield { margin-bottom: auto; } body.ws-landing .ws-security-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--ws-metro-gap); align-items: stretch; list-style: none; } body.ws-landing .ws-security-tiles li { min-width: 0; padding: clamp(22px, 3vw, 34px); background: #1b1b1b; background: rgba(27,27,27,.84); border: 1px solid rgba(255,255,255,.13); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 20px 50px -42px rgba(0,0,0,.9); display: flex; gap: 18px; } html[data-theme='light'] body.ws-landing .ws-security-tiles li { background: #fff; background: rgba(255,255,255,.86); border-color: rgba(0,0,0,.16); } body.ws-landing .ws-security-tiles li:last-child { grid-column: 1 / 3; } body.ws-landing .ws-security-tiles .ws-lock { flex: 0 0 34px; color: var(--ws-metro-blue); font: 700 .78rem var(--ws-mono); } body.ws-landing .ws-security-tiles strong, body.ws-landing .ws-security-tiles span { display: block; overflow-wrap: anywhere; } body.ws-landing .ws-security-tiles strong { margin-bottom: .3rem; } body.ws-landing .ws-security-tiles div span { color: var(--ws-muted); font-size: .9rem; } body.ws-landing .ws-tech-grid { padding: clamp(22px, 4vw, 48px); background: var(--ws-bg-2); border: 1px solid rgba(255,255,255,.13); box-shadow: 0 20px 50px -42px rgba(0,0,0,.9); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; align-items: stretch; gap: var(--ws-metro-gap); list-style: none; } body.ws-landing .ws-tech-pill { min-width: 0; border: 0; border-radius: 1px; background: var(--ws-bg-3); padding: 16px; justify-content: flex-start; overflow-wrap: anywhere; } body.ws-landing .ws-tech-pill:hover { transform: none; background: #fff; color: #000; } body.ws-landing .ws-tech-dot { border-radius: 0; } body.ws-landing .ws-download-board { background: rgba(255,255,255,.025); } body.ws-landing .ws-platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--ws-metro-gap); margin-bottom: var(--ws-metro-gap); align-items: stretch; } body.ws-landing .ws-platform-tile { position: relative; min-width: 0; padding: 24px; color: #fff; background: #111; border: 1px solid rgba(255,255,255,.15); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; transition: filter .15s ease, translate .15s ease; overflow: hidden; } body.ws-landing .ws-platform-tile:nth-child(even) { background: #292929; } body.ws-landing .ws-platform-tile:hover { color: #fff; filter: brightness(1.08); translate: 0 -2px; } body.ws-landing .ws-platform-tile.is-unavailable { cursor: not-allowed; filter: saturate(.72); } body.ws-landing .ws-platform-tile.is-unavailable:hover { filter: saturate(.72); translate: none; } body.ws-landing .ws-platform-overlay { position: absolute; top: 14px; right: 14px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(10,10,10,.78); color: #fff; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; } body.ws-landing .ws-platform-icon { margin-bottom: 8px; } body.ws-landing .ws-platform-icon svg { width: 34px; height: 34px; } body.ws-landing .ws-platform-tile strong { font-size: 1.3rem; font-weight: 500; overflow-wrap: anywhere; } body.ws-landing .ws-platform-tile > span:last-child { font-size: .8rem; opacity: .85; } body.ws-landing .ws-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ws-metro-gap); list-style: none; } body.ws-landing .ws-step { min-width: 0; padding: 22px; background: var(--ws-bg-3); text-align: left; display: flex; gap: 16px; } body.ws-landing .ws-step-num { flex: 0 0 42px; width: 42px; height: 42px; margin: 0; border-radius: 1px; background: #fff; color: #000; } html[data-theme='light'] body.ws-landing .ws-step-num { background: #050505; color: #fff; } body.ws-landing .ws-step h3 { margin: 0 0 .3rem; font-size: 1rem; } body.ws-landing .ws-step p { margin: 0; color: var(--ws-muted); font-size: .86rem; } body.ws-landing .ws-value-board .ws-why-grid { gap: var(--ws-metro-gap); } body.ws-landing .ws-why-item { min-width: 0; border: 1px solid rgba(255,255,255,.13); border-radius: 1px; background: var(--ws-bg-2); padding: 26px; box-shadow: 0 20px 50px -42px rgba(0,0,0,.9); } body.ws-landing .ws-why-item .ws-check { border-radius: 1px; background: #fff; color: #000; } html[data-theme='light'] body.ws-landing .ws-why-item .ws-check { background: #050505; color: #fff; } body.ws-landing .ws-why-item h3 { margin: 0 0 .3rem; font-size: 1.18rem; } body.ws-landing .ws-why-item p { margin: 0; color: var(--ws-muted); } body.ws-landing .ws-faq-board { background: rgba(255,255,255,.025); } body.ws-landing .ws-faq { max-width: none; } body.ws-landing .ws-faq-item { margin: 0 0 var(--ws-metro-gap); border: 1px solid rgba(255,255,255,.13); border-radius: 1px; background: #1b1b1b; background: rgba(27,27,27,.84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 20px 50px -42px rgba(0,0,0,.9); } html[data-theme='light'] body.ws-landing .ws-faq-item { background: #fff; background: rgba(255,255,255,.86); border-color: rgba(0,0,0,.16); } body.ws-landing .ws-faq-item h3 { margin: 0; } body.ws-landing .ws-faq-q { min-height: 64px; padding: 18px 22px; } body.ws-landing .ws-faq-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 30px; background: #fff; color: #000; } html[data-theme='light'] body.ws-landing .ws-faq-icon { background: #050505; color: #fff; } body.ws-landing .ws-faq-a-inner { padding: 0 22px 22px; } body.ws-landing .ws-support-board { padding-bottom: var(--ws-metro-gap); } body.ws-landing .ws-donate-tile { display: grid; grid-template-columns: .45fr 1.25fr auto; gap: clamp(24px, 5vw, 64px); align-items: center; padding: clamp(30px, 5vw, 58px); background: #050505; color: #fff; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 30px 70px -45px rgba(0,0,0,.95); } body.ws-landing .ws-donate-tile .ws-price { display: block; color: #fff; background: none; -webkit-text-fill-color: currentColor; font-size: clamp(4rem, 8vw, 7rem); font-weight: 200; } body.ws-landing .ws-donate-tile .ws-metro-label { color: #fff; margin: 0; } body.ws-landing .ws-donate-tile h2 { font-size: clamp(1.7rem, 3vw, 2.8rem); } body.ws-landing .ws-donate-tile p { margin: 0; color: rgba(255,255,255,.88); } body.ws-landing .ws-final-cta { padding: clamp(60px, 8vw, 100px) 0; } body.ws-landing .ws-final-cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 30px; padding: clamp(30px, 5vw, 64px); background: #050505; color: #fff; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 30px 70px -45px rgba(0,0,0,.95); } body.ws-landing .ws-final-cta .ws-metro-label, body.ws-landing .ws-final-cta p { color: #fff; } body.ws-landing .ws-final-cta h2 { margin-bottom: .25rem; } body.ws-landing .ws-final-cta p { margin: 0; } body.ws-landing .ws-footer { padding-top: 48px; background: #050505; color: #fff; } html[data-theme='light'] body.ws-landing .ws-footer { background: #050505; color: #fff; } body.ws-landing .ws-footer .ws-brand, body.ws-landing .ws-footer-col a { color: #fff; } body.ws-landing .ws-footer-col h5 { color: #d6d6d6; } body.ws-landing .ws-social a { border-radius: 1px; min-width: 44px; min-height: 44px; } @media (max-width: 1100px) { body.ws-landing .ws-feature-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.ws-landing .ws-feature-tile:nth-child(n) { grid-column: auto; } body.ws-landing .ws-feature-tile:nth-child(2), body.ws-landing .ws-feature-tile:nth-child(5) { grid-column: span 2; } body.ws-landing .ws-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.ws-landing .ws-donate-tile { grid-template-columns: .5fr 1.5fr; } body.ws-landing .ws-donate-tile .ws-btn { grid-column: 1 / 3; justify-self: start; } } @media (max-width: 800px) { body.ws-landing .ws-parallax-fragment:nth-child(2), body.ws-landing .ws-parallax-fragment:nth-child(3), body.ws-landing .ws-parallax-fragment:nth-child(7), body.ws-landing .ws-parallax-fragment:nth-child(8) { display: none; } body.ws-landing .ws-dashboard { grid-template-columns: repeat(6, minmax(0, 1fr)); } body.ws-landing .ws-tile-hero, body.ws-landing .ws-tile-app-showcase { grid-column: 1 / -1; } body.ws-landing .ws-tile-trust { grid-column: span 2; } body.ws-landing .ws-board-heading, body.ws-landing .ws-story-tile, body.ws-landing .ws-showcase-grid, body.ws-landing .ws-security-layout, body.ws-landing .ws-faq-layout, body.ws-landing .ws-tech-board, body.ws-landing .ws-value-board { grid-template-columns: 1fr; } body.ws-landing .ws-board-heading .ws-metro-label { grid-row: auto; } body.ws-landing .ws-app-mockup { --mockup-rx: -2deg; --mockup-ry: -4deg; } body.ws-landing .ws-app-mockup:hover { --mockup-rx: -1deg; --mockup-ry: -2deg; } } @media (max-width: 720px) { body.ws-landing .ws-header .ws-container { padding-inline: 14px; } body.ws-landing .ws-nav-links.is-open { top: 60px; max-height: calc(100svh - 60px); overflow-y: auto; } body.ws-landing .ws-metro-hero { padding-top: 72px; } body.ws-landing .ws-dashboard { grid-template-columns: 1fr; } body.ws-landing .ws-tile-hero, body.ws-landing .ws-tile-app-showcase, body.ws-landing .ws-tile-trust { grid-column: 1; } body.ws-landing .ws-tile-hero { padding: 34px 24px; } body.ws-landing .ws-tile-app-showcase { padding: 14px; } body.ws-landing .ws-nav-links.is-open { background: #111; background: rgba(17,17,17,.96); border-bottom-color: rgba(255,255,255,.18); } html[data-theme='light'] body.ws-landing .ws-nav-links.is-open { background: #fff; background: rgba(255,255,255,.96); border-bottom-color: rgba(0,0,0,.18); } body.ws-landing .ws-tile-hero h1 { font-size: clamp(2.15rem, 11vw, 3.5rem); } body.ws-landing .ws-hero-cta { flex-direction: column; align-items: stretch; } body.ws-landing .ws-tile-trust { min-height: 0; } body.ws-landing .ws-feature-board, body.ws-landing .ws-security-tiles, body.ws-landing .ws-tech-grid, body.ws-landing .ws-steps { grid-template-columns: 1fr; } body.ws-landing .ws-feature-tile:nth-child(n), body.ws-landing .ws-security-tiles li:last-child { grid-column: auto; } body.ws-landing .ws-donate-tile { grid-template-columns: 1fr; } body.ws-landing .ws-donate-tile .ws-btn { grid-column: auto; justify-self: stretch; } body.ws-landing .ws-final-cta-inner { grid-template-columns: 1fr; align-items: stretch; } body.ws-landing .ws-final-cta-inner .ws-btn { width: 100%; } } @media (max-width: 480px) { body.ws-landing .ws-app-mockup, body.ws-landing .ws-app-mockup:hover, body.ws-landing .ws-app-mockup:focus-within { --mockup-rx: 0deg; --mockup-ry: 0deg; } body.ws-landing .ws-parallax-mid { opacity: .1; } html[data-theme='light'] body.ws-landing .ws-parallax-mid { opacity: .065; } body.ws-landing .ws-parallax-fragment { display: none; } body.ws-landing .ws-parallax-fragment:nth-child(1), body.ws-landing .ws-parallax-fragment:nth-child(4), body.ws-landing .ws-parallax-fragment:nth-child(9) { display: block; } } @media (max-width: 430px) { body.ws-landing .ws-container { padding-inline: 12px; } body.ws-landing .ws-tile-hero, body.ws-landing .ws-section-tile, body.ws-landing .ws-story-tile, body.ws-landing .ws-donate-tile, body.ws-landing .ws-final-cta-inner { padding: 26px 20px; } body.ws-landing .ws-tile-app-showcase { padding: 12px; } body.ws-landing .ws-security-tiles li { padding: 20px 16px; } body.ws-landing .ws-step { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { body.ws-landing .ws-path-canvas { opacity: .45; } body.ws-landing .ws-parallax-fragment { will-change: auto; } body.ws-landing :is(.ws-tile-trust, .ws-feature-tile, .ws-platform-tile) { transition: none; translate: none; } body.ws-landing .ws-app-mockup, body.ws-landing .ws-app-mockup:hover, body.ws-landing .ws-app-mockup:focus-within { --mockup-rx: -1deg; --mockup-ry: -2deg; } body.ws-landing .ws-app-mockup > :is(.ws-hero-showcase-link, video) { transition: none; } }