:root { color-scheme: dark; --bg-base: #050508; --bg-subtle: #0a0b0f; --fg: #f5f5f7; --fg-muted: rgba(245,245,247,.68); --fg-subtle: rgba(245,245,247,.48); --line: rgba(255,255,255,.06); --line-strong: rgba(255,255,255,.12); --card-bg: rgba(255,255,255,.025); --card-bg-hover: rgba(255,255,255,.045); --glow-primary: rgba(120,119,198,.3); --glow-secondary: rgba(100,210,255,.2); --accent: #7877c6; --radius: 16px; --radius-lg: 24px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: radial-gradient(ellipse 1400px 900px at 30% -5%, var(--glow-primary), transparent 60%), radial-gradient(ellipse 1000px 700px at 80% 15%, var(--glow-secondary), transparent 55%), radial-gradient(ellipse 800px 600px at 50% 100%, rgba(120,119,198,.15), transparent 50%), var(--bg-base); background-attachment: fixed; color: var(--fg); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } a.btn { text-decoration: none; } /* Navbar */ .navbar { position: sticky; top: 0; z-index: 1000; background: rgba(5,5,8,.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); box-shadow: 0 4px 24px rgba(0,0,0,.2); } .navbar-container { max-width: 1100px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 32px; } .navbar-brand { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); white-space: nowrap; transition: color 0.2s ease; } .navbar-brand:hover { color: var(--accent); } .navbar-menu { display: flex; align-items: center; gap: 16px; list-style: none; flex: 1; } .navbar-menu a { font-size: 14px; font-weight: 500; color: var(--fg-muted); transition: color 0.2s ease; white-space: nowrap; padding: 0 4px; } .navbar-menu a:hover { color: var(--fg); } .navbar-menu a.active { color: var(--accent); } .navbar-toggle { display: none; background: none; border: none; color: var(--fg); cursor: pointer; padding: 8px; margin: -8px; } .navbar-toggle svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 768px) { .navbar-container { padding: 14px 20px; } .navbar-toggle { display: block; } .navbar-menu { position: fixed; top: 57px; left: 0; right: 0; background: rgba(5,5,8,.95); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 12px 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease; box-shadow: 0 8px 24px rgba(0,0,0,.3); } .navbar-menu.active { max-height: 500px; opacity: 1; } .navbar-menu a { padding: 14px 24px; display: block; border-bottom: 1px solid var(--line); min-width: auto; text-align: left; } .navbar-menu a:last-child { border-bottom: none; } } /* Language Switcher */ .lang-switcher { display: flex; align-items: center; gap: 4px; background: var(--card-bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin-left: auto; flex-shrink: 0; } .lang-switcher button { background: none; border: none; color: var(--fg-subtle); font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: all 0.2s ease; font-family: inherit; letter-spacing: 0.01em; } .lang-switcher button:hover { color: var(--fg-muted); } /* Active state driven by both JS class and data-active-lang on so the correct button is styled before JS runs (no flash on slow connections) */ .lang-switcher button.active, :root[data-active-lang="es"] [data-lang-btn="es"], :root[data-active-lang="en"] [data-lang-btn="en"] { background: var(--accent); color: white; box-shadow: 0 2px 8px rgba(120,119,198,.3); } .lang-switcher button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 768px) { .navbar-container { gap: 12px; } .navbar-menu { order: 4; flex: none; } .navbar-toggle { margin-left: auto; } } /* Layout */ .wrap { max-width: 1100px; margin: 0 auto; padding: 60px 24px 30px; } @media (max-width: 768px) { .wrap { padding: 40px 20px 60px; } } /* Typography */ h1 { margin: 24px 0 16px; font-size: clamp(42px, 7vw, 72px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.1; background: linear-gradient(135deg, var(--fg) 0%, rgba(245,245,247,.7) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } h2 { margin: 0; font-size: clamp(26px, 4vw, 36px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; } h3 { margin: 0 0 12px; font-size: clamp(18px, 3vw, 22px); font-weight: 600; letter-spacing: -0.02em; } p { margin: 0; color: var(--fg-muted); line-height: 1.65; } /* Eyebrow/Kicker */ .kicker { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--fg-subtle); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; box-shadow: 0 0 20px rgba(120,119,198,.08); } .kicker.back-link { transition: all 0.2s ease; cursor: pointer; } .kicker.back-link:hover { border-color: var(--line-strong); background: var(--card-bg-hover); transform: translateX(-2px); } /* Lead/Intro */ .lead { border: 1px solid var(--line); background: linear-gradient(180deg, var(--card-bg-hover), transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--radius-lg); padding: 32px; margin-top: 32px; min-height: 160px; line-height: 1.7; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 40px rgba(120,119,198,.05); } .lead p { margin-bottom: 16px; } .lead p:last-child { margin-bottom: 0; } .lead strong { color: var(--fg); font-weight: 600; } @media (max-width: 768px) { .lead { padding: 24px 20px; } } /* Badges */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--fg-subtle); padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-bg); letter-spacing: 0.02em; text-transform: uppercase; } /* Sections with anchors */ section[id] { scroll-margin-top: 80px; } /* Section Headers */ .h2row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 64px; margin-bottom: 24px; flex-wrap: wrap; } .smallnote { color: var(--fg-subtle); font-size: 14px; } /* Grid Layouts */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; } .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; } @media (max-width: 768px) { .grid, .grid-3 { grid-template-columns: 1fr; } } /* Cards */ .card { border: 1px solid var(--line); background: linear-gradient(180deg, var(--card-bg-hover) 0%, var(--card-bg) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--radius-lg); padding: 28px; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 30px rgba(120,119,198,.04); transition: all 0.3s ease; } .card:hover { border-color: var(--line-strong); box-shadow: 0 4px 12px rgba(0,0,0,.16), 0 0 40px rgba(120,119,198,.08); transform: translateY(-2px); } .card h3 { margin-top: 12px; margin-bottom: 12px; } .card p { line-height: 1.65; } .card ul { margin: 16px 0 0 20px; color: var(--fg-muted); line-height: 1.7; } .card li { margin-bottom: 8px; } .card li:last-child { margin-bottom: 0; } /* Feature Cards (compact) */ .feature-card { border: 1px solid var(--line); background: var(--card-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--radius); padding: 20px; text-align: center; transition: all 0.25s ease; } .feature-card:hover { border-color: var(--line-strong); background: var(--card-bg-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(120,119,198,.12); } .feature-icon { width: 48px; height: 48px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(135deg, rgba(120,119,198,.2), rgba(100,210,255,.1)); border: 1px solid var(--line-strong); } .feature-icon svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .feature-card h3 { font-size: 16px; margin: 0 0 8px; color: var(--fg); } .feature-card p { font-size: 14px; color: var(--fg-muted); } /* Step Cards */ .step-card { display: flex; gap: 20px; align-items: flex-start; border: 1px solid var(--line); background: var(--card-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--radius); padding: 24px; transition: all 0.2s ease; } .step-card:hover { border-color: var(--line-strong); background: var(--card-bg-hover); } .step-number { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, rgba(120,119,198,.25), rgba(100,210,255,.15)); border: 1px solid var(--line-strong); font-weight: 700; font-size: 18px; color: var(--accent); } .step-content h3 { font-size: 18px; margin: 0 0 8px; color: var(--fg); } .step-content p { font-size: 14px; line-height: 1.6; color: var(--fg-muted); } /* Companion card */ .companion-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; } .companion-card { display: block; height: 100%; position: relative; overflow: hidden; border: 1px solid rgba(120,119,198,.18); background: linear-gradient(135deg, rgba(120,119,198,.12), rgba(100,210,255,.06) 55%, rgba(255,255,255,.02) 100%), linear-gradient(180deg, var(--card-bg-hover), var(--card-bg)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: var(--radius-lg); padding: 22px 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 30px rgba(0,0,0,.16), 0 0 50px rgba(120,119,198,.08); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .companion-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(100,210,255,.12), transparent 34%), radial-gradient(circle at bottom left, rgba(120,119,198,.14), transparent 38%); pointer-events: none; } .companion-card:hover { transform: translateY(-2px); border-color: rgba(120,119,198,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 34px rgba(0,0,0,.2), 0 0 60px rgba(120,119,198,.12); } .companion-badge, .companion-title, .companion-desc { position: relative; z-index: 1; } .companion-badge { display: inline-flex; align-items: center; margin-bottom: 14px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: rgba(8,10,18,.36); color: rgba(245,245,247,.72); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .companion-title { margin: 0 0 8px; font-size: clamp(20px, 3vw, 24px); color: var(--fg); } .companion-desc { margin: 0; max-width: 58ch; color: var(--fg-muted); font-size: 15px; line-height: 1.65; } /* Buttons & Links */ .btn { display: block; border: 1px solid var(--line); background: linear-gradient(180deg, var(--card-bg-hover), var(--card-bg)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--radius-lg); padding: 24px; transition: all 0.25s ease; cursor: pointer; } .btn:hover { border-color: var(--line-strong); background: linear-gradient(180deg, var(--card-bg-hover), var(--card-bg-hover)); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.2), 0 0 40px rgba(120,119,198,.12); } .btn .label { display: inline-flex; margin-bottom: 12px; } .btn .title { font-size: clamp(24px, 4vw, 32px); font-weight: 600; letter-spacing: -0.03em; margin: 0 0 8px; color: var(--fg); } .btn .desc { color: var(--fg-muted); margin: 0; font-size: 15px; } .btn-primary { background: linear-gradient(135deg, var(--accent), rgba(120,119,198,.8)); border-color: var(--accent); color: white; font-weight: 600; text-align: center; padding: 14px 28px; border-radius: var(--radius); display: inline-block; box-shadow: 0 4px 16px rgba(120,119,198,.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(120,119,198,.4); } @media (max-width: 980px) { .companion-stack { grid-template-columns: 1fr; } } @media (max-width: 768px) { .companion-card { padding: 22px 20px; } .companion-title { font-size: 20px; } } /* Image Styles */ .hero-img, .device-img { width: 100%; max-width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(0,0,0,.2), 0 0 40px rgba(120,119,198,.08); margin-top: 32px; } .device-photos { margin-top: 48px; margin-bottom: 32px; } .device-photos img { transition: all 0.3s ease; } .device-photos img:hover { transform: scale(1.02); box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 60px rgba(120,119,198,.15); } /* Photo Gallery */ .photo-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 24px; } .photo-item { position: relative; } .photo-item img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(0,0,0,.2), 0 0 40px rgba(120,119,198,.08); transition: all 0.3s ease; } .photo-item img:hover { transform: scale(1.02); box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 60px rgba(120,119,198,.15); } .photo-caption { margin-top: 12px; font-size: 14px; color: var(--fg-subtle); text-align: center; line-height: 1.5; } @media (max-width: 768px) { .photo-gallery { grid-template-columns: 1fr; } } /* Utilities */ hr.sep { border: 0; border-top: 1px solid var(--line); margin: 32px 0; } .stack { display: flex; flex-direction: column; gap: 16px; } .text-center { text-align: center; } /* Footer */ footer { margin-top: 80px; padding-top: 32px; border-top: 1px solid var(--line); color: var(--fg-subtle); font-size: 14px; text-align: center; } footer a { color: var(--accent); text-decoration: none; transition: color 0.2s ease; } footer a:hover { color: var(--fg); } /* Footer brand (Argensonix logo) */ .footer-brand { margin-top: 24px; display: flex; justify-content: center; align-items: center; } .footer-brand a { display: inline-flex; align-items: center; opacity: 0.45; transition: opacity 0.2s ease; } .footer-brand a:hover { opacity: 0.8; color: inherit; } .footer-logo { display: block; max-width: 100%; height: auto; } /* Code */ code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace; font-size: 0.9em; background: rgba(0,0,0,.3); border: 1px solid var(--line); padding: 3px 8px; border-radius: 6px; color: var(--fg); }