/* Argot shared base styles — used by all pages except index.html */ /* Launch-state visibility. The server sets ; mark any element data-when="prelaunch" or data-when="launched" to show it only in that state. Default (attr absent) hides launched-only content. */ html:not([data-launched="true"]) [data-when="launched"] { display: none !important; } html[data-launched="true"] [data-when="prelaunch"] { display: none !important; } :root { --bg: #111827; --bg-2: #1f2937; --panel: #1f2937; --border: #374151; --border-bright: #4b5563; --text: #f1f5f9; --text-soft: #cbd5e1; --muted: #9ca3af; --muted-dim: #6b7280; --accent: #3b5bdb; --accent-hot: #2d4ece; --accent-soft: #3b5bdb25; --serif: "Fraunces", Georgia, serif; --sans: "Inter", system-ui, sans-serif; --link: #7b9ef8; --nav-bg: rgba(17,24,39,0.95); --dot-color: rgba(59,91,219,0.15); --shadow-color: rgba(0,0,0,0.30); } [data-theme="light"] { --bg: #e7ebf4; --bg-2: #dce2ef; --panel: #f4f7fc; --panel-2: #e9eef8; --border: #cdd6e8; --border-bright: #b2bedb; --text: #1a1f36; --text-soft: #353d63; --muted: #5d6480; --muted-dim: #8b93ad; --accent-soft: #3b5bdb1f; --accent-glow: 0 0 60px #3b5bdb22; --user: #e6ecfb; --user-border: #c5d4f8; --link: #2d4ece; --nav-bg: rgba(231,235,244,0.92); --dot-color: rgba(59,91,219,0.07); --shadow-color: rgba(40,55,120,0.12); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: radial-gradient(circle at 1px 1px, var(--dot-color) 1px, transparent 1.5px) 0 0 / 28px 28px, var(--bg); color: var(--text); font: 15px/1.65 var(--sans); min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--accent); } /* ── Nav ── */ nav.top { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } nav.top .inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 8px; } .logo { font-family: var(--serif); font-weight: 800; font-size: 20px; letter-spacing: -0.3px; color: var(--text); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .logo svg { color: var(--accent); } nav.top .links { display: flex; gap: 22px; margin-left: 24px; } nav.top .links a { font-size: 14px; font-weight: 500; color: var(--muted); } nav.top .links a:hover { color: var(--text); } nav.top .cta { margin-left: auto; } nav.top .cta a { padding: 8px 16px; background: var(--accent); color: #f1f5f9; border-radius: 8px; font-weight: 600; font-size: 13px; transition: background 150ms; } nav.top .cta a:hover { background: var(--accent-hot); color: #f1f5f9; } @media (max-width: 640px) { nav.top .links { display: none; } nav.top .cta a { font-size: 13px; padding: 7px 14px; } } @media (max-width: 400px) { nav.top .inner { padding: 0 16px; } nav.top .cta a { display: none; } } /* ── Footer ── */ footer { margin-top: auto; border-top: 1px solid var(--border); padding: 28px 24px; text-align: center; color: var(--muted); font-size: 13px; background: var(--bg-2); } footer .row { margin-bottom: 10px; } footer .row a { margin: 0 12px; color: var(--muted); } footer .row a:hover { color: var(--accent); } footer .heart { margin-bottom: 10px; font-size: 13px; color: var(--muted); } footer .heart .grad { color: var(--accent); font-weight: 600; } footer .legal { font-size: 12px; color: var(--muted-dim); line-height: 1.6; } /* ── Page shell ── */ .page-shell { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px 24px; } .card-shell { background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 48px 44px; max-width: 520px; width: 100%; box-shadow: 0 4px 24px -8px var(--shadow-color); } @media (max-width: 560px) { .card-shell { padding: 28px 20px; border-radius: 16px; } .page-shell { padding: 32px 16px; align-items: flex-start; } .btn-primary { font-size: 14px; padding: 12px 16px; } } /* ── Form primitives ── */ .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 13px; font-weight: 600; color: var(--text-soft); } .field input, .field select, .field textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; font-size: 14px; color: var(--text); font-family: inherit; outline: none; transition: border-color 150ms; } .field input:focus, .field select:focus { border-color: var(--accent); } .btn-primary { width: 100%; padding: 13px 16px; background: var(--accent); color: #f1f5f9; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 150ms, box-shadow 150ms; } .btn-primary:hover:not(:disabled) { background: var(--accent-hot); box-shadow: 0 4px 12px -2px rgba(59,91,219,0.45); } .btn-primary:disabled { opacity: 0.5; cursor: default; } .form-status { font-size: 14px; padding: 10px 0; display: none; } .form-status.ok { color: #3a8c4a; } .form-status.err { color: #c0392b; } /* ── Badge ── */ .badge-pill { display: inline-block; padding: 4px 12px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.3px; border-radius: 999px; border: 1px solid var(--accent-soft); } /* ── Theme toggle ── */ .theme-toggle { background: none; border: none; cursor: pointer; color: var(--muted); padding: 6px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: color 150ms, background 150ms; flex-shrink: 0; } .theme-toggle:hover { background: var(--border); color: var(--text); } .icon-moon { display: none; } .icon-sun { display: block; } [data-theme="light"] .icon-moon { display: block; } [data-theme="light"] .icon-sun { display: none; }