/* =========================================================== ArveNova app pages (builder + dashboard) — shares the brand "engineering instrument" palette with the landing. =========================================================== */ /* Anti-flash: hide page content until app-i18n has applied the selected language, so the Turkish default markup never paints first. An inline script adds html.i18n-pending before first paint; initAppLang() removes it after applyStatic (with a 1.5s safety net in the inline script in case the module fails to load). visibility (not display) keeps layout. The dark background is mirrored onto so the brief hidden window shows the theme colour, not a white flash. */ html { background: var(--bg); } html.i18n-pending body { visibility: hidden; } :root { --bg: #080a0f; --panel-bg: #0b0e15; --surface: rgba(255, 255, 255, 0.03); --surface-2: rgba(255, 255, 255, 0.06); --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.18); --text: #eef1f6; --muted: #888fa1; --faint: #565d70; --accent: #2ee6c6; --accent-2: #ffb454; --danger: #ff6b6b; --font-display: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; cursor: pointer; } .muted { color: var(--muted); } .mono { font-family: var(--font-mono); } /* --- Top bar --- */ .appbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 22px; border-bottom: 1px solid var(--line); background: rgba(8, 10, 15, 0.85); backdrop-filter: blur(10px); } .appbar .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 18px; } .appbar .brand:hover { text-decoration: none; } .appbar .brand b { color: var(--accent); } .appbar nav { display: flex; align-items: center; gap: 8px; } .appbar nav a { color: var(--muted); font-weight: 500; font-size: 15px; padding: 8px 12px; border-radius: 8px; } .appbar nav a:hover { color: var(--text); background: var(--surface); text-decoration: none; } .appbar nav a.active { color: var(--text); } #authbar { display: flex; align-items: center; gap: 10px; min-width: 0; } /* Buttons must never shrink/clip (keeps "Çıkış" clickable); the email truncates. */ #authbar .btn-sm { flex-shrink: 0; } .auth-email { font-size: 13px; color: var(--muted); font-family: var(--font-mono); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* On narrow screens hide the email text so Panelim + Çıkış always fit. */ @media (max-width: 720px) { .auth-email { display: none; } } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15px; padding: 12px 20px; border-radius: 10px; border: 1px solid transparent; background: var(--accent); color: #05201b; transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s; } .btn:hover { transform: translateY(-1px); text-decoration: none; } .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line-2); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--accent); } .btn-sm { font-size: 14px; padding: 8px 14px; border-radius: 8px; } .btn-danger { background: transparent; color: var(--danger); border-color: rgba(255, 107, 107, 0.4); } .btn-danger:hover { background: rgba(255, 107, 107, 0.1); } /* --- Layout --- */ .page { max-width: 1280px; margin: 0 auto; padding: 28px 22px 64px; } .page h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 6px; } .page .sub { color: var(--muted); margin: 0 0 28px; font-size: 1.05rem; } /* --- Builder grid --- */ .builder { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; } @media (max-width: 900px) { .builder { grid-template-columns: 1fr; } } .card { background: var(--panel-bg); border: 1px solid var(--line); border-radius: 16px; padding: 22px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; } .field .req { color: var(--accent); } .field input[type="text"], .field input[type="email"], .field select, .field textarea { width: 100%; background: var(--surface); border: 1px solid var(--line-2); border-radius: 9px; color: var(--text); font: inherit; padding: 11px 13px; } .field textarea { resize: vertical; min-height: 84px; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .field select option { color: #000; } .field-row { display: flex; gap: 12px; } .field-row .field { flex: 1; } input[type="color"] { width: 46px; height: 42px; padding: 0; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); cursor: pointer; } .color-row { display: flex; align-items: center; gap: 10px; } .color-row input[type="text"] { flex: 1; } /* --- Preview pane --- */ /* scroll-margin-top keeps the preview clear of the sticky appbar (64px) + gap when we auto-scroll to it after generation. */ .preview-pane { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 80px; } .preview-frame-wrap { width: 100%; height: 75vh; min-height: 600px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; position: relative; } .preview-frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 760px) { .preview-frame-wrap { height: 70vh; min-height: 420px; } } .preview-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: var(--muted); background: var(--panel-bg); text-align: center; padding: 24px; } .preview-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* --- Status / toast --- */ .status { font-size: 14px; min-height: 20px; } .status.err { color: var(--danger); } .status.ok { color: var(--accent); } .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: #05201b; display: inline-block; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --- Dashboard --- */ .proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .proj-card { display: flex; flex-direction: column; gap: 10px; } .proj-card h3 { margin: 0; font-family: var(--font-display); font-size: 1.25rem; } .proj-meta { font-family: var(--font-mono); font-size: 12px; color: var(--faint); } .badge { display: inline-block; font-family: var(--font-mono); font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); } .badge.draft { color: var(--accent-2); border-color: rgba(255,180,84,.4); } .badge.paid { color: var(--accent); border-color: rgba(46,230,198,.45); } /* Payment result banner */ .banner { border-radius: 12px; padding: 14px 18px; margin: 0 0 22px; font-size: 15px; border: 1px solid var(--line-2); } .banner.ok { color: var(--accent); border-color: rgba(46,230,198,.45); background: rgba(46,230,198,.06); } .banner.err { color: var(--danger); border-color: rgba(255,107,107,.4); background: rgba(255,107,107,.06); } .proj-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; } .empty-state { color: var(--muted); padding: 40px 0; text-align: center; } /* --- Auth modal --- */ .modal-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(4,6,10,.6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-scrim[hidden] { display: none; } .modal { width: 100%; max-width: 400px; background: var(--panel-bg); border: 1px solid var(--line-2); border-radius: 18px; padding: 26px; } .modal h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.4rem; } .modal .modal-sub { margin: 0 0 18px; color: var(--muted); font-size: 14px; } .modal .field { margin-bottom: 12px; } .modal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .modal .btn { width: 100%; } .modal-google { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1a1a1a; border: 0; } .modal-google:hover { filter: brightness(.95); } .modal-divider { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; margin: 14px 0; } .modal-divider::before, .modal-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .modal-close { position: absolute; } .modal-foot { margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; } .modal-foot button { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; } .modal-foot-sep { color: var(--faint); margin: 0 6px; } .modal-err { color: var(--danger); font-size: 13px; min-height: 18px; margin-top: 4px; } .modal-ok { color: var(--accent); font-size: 13px; min-height: 0; margin-top: 2px; } /* =========================================================== AUTH MODAL — sign-up redesign (Inter font + 2-col fields + sign-in/sign-up modes). Colours are inherited from the existing palette (vars) — only typography/layout change here. =========================================================== */ .auth-modal { max-width: 440px; } /* Inter, scoped to the auth form only. */ .auth-modal, .auth-modal h2, .auth-modal .field label, .auth-modal input, .auth-modal select, .auth-modal button { font-family: 'Inter', var(--font-body), system-ui, sans-serif; } /* Inputs: same dark theme (unchanged colours) + 10px radius. This explicitly covers password/tel/confirm inputs (the base .field rule doesn't). */ .auth-modal .field input, .auth-modal .field select, .auth-modal .auth-phone-code { width: 100%; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; color: var(--text); font: inherit; padding: 11px 13px; } .auth-modal .field input:focus, .auth-modal .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .auth-modal .field label { text-transform: none; letter-spacing: 0; font-size: 13px; margin-bottom: 6px; } .auth-modal .field { margin-bottom: 12px; } /* Two-column rows; collapse to one column under 480px. */ .auth-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .auth-grid-2 .field { margin-bottom: 0; } .auth-pass-wrap { margin-bottom: 12px; } .auth-phone-row { display: grid; grid-template-columns: 96px 1fr; gap: 8px; } .auth-phone-code { text-align: center; } /* Mode visibility. */ .auth-modal[data-mode="signin"] .auth-only-signup { display: none; } .auth-modal[data-mode="signup"] .auth-only-signin { display: none; } /* In sign-in the password row is a single column (no confirm field). */ .auth-modal[data-mode="signin"] .auth-pass-wrap { grid-template-columns: 1fr; } /* Sign in ↔ sign up switch link. */ .auth-switch { margin-top: 10px; } .auth-switch button { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; padding: 0 0 0 4px; } @media (max-width: 480px) { .auth-grid-2 { grid-template-columns: 1fr; gap: 0; } .auth-grid-2 .field { margin-bottom: 12px; } } /* --- Login gate --- */ .gate { max-width: 560px; } .gate h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.4rem; } .gate p { margin: 0 0 16px; } /* --- Form: section chips (multi-select) --- */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chips .chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: 14px; color: var(--text); cursor: pointer; user-select: none; } .chips .chip:hover { border-color: var(--accent); } .chips .chip:has(input:checked) { border-color: var(--accent); background: rgba(46, 230, 198, 0.1); color: var(--text); } .chips .chip input { accent-color: var(--accent); } input[type="number"] { width: 100%; background: var(--surface); border: 1px solid var(--line-2); border-radius: 9px; color: var(--text); font: inherit; padding: 11px 13px; } /* --- Journey (evaluate → plan → quote) --- */ #journey { margin-top: 28px; display: flex; flex-direction: column; gap: 20px; } .journey-card h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.4rem; } .journey-card > p.muted { margin: 0 0 14px; } .row-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; } /* rating 1–10 */ .rating { display: flex; flex-wrap: wrap; gap: 8px; } .rate-dot { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-family: var(--font-mono); font-size: 15px; } .rate-dot:hover { border-color: var(--accent); } .rate-dot.active { background: var(--accent); color: #05201b; border-color: var(--accent); font-weight: 700; } /* plan cards */ .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .plan-card { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--surface); } .plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .plan-head h3 { margin: 0; font-family: var(--font-display); font-size: 1.1rem; } .plan-price { font-family: var(--font-mono); font-size: 13px; color: var(--accent); white-space: nowrap; } .plan-desc { margin: 0; color: var(--muted); font-size: 14px; flex: 1; } .plan-pick { align-self: flex-start; margin-top: 4px; } /* Beta-free plan styling */ .plan-price-wrap { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; } .plan-old-price { font-family: var(--font-mono); font-size: 13px; color: var(--faint); text-decoration: line-through; } .plan-beta-badge { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; color: #05201b; background: var(--accent); } .plan-beta-note { font-size: 12px; color: var(--accent-2); margin-top: -2px; } /* --- Account page --- */ .acct-section { margin-bottom: 34px; } .acct-section > h2 { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .badge.closed { color: var(--faint); border-color: var(--line-2); } .quote-note { margin: 0; color: var(--muted); font-size: 14px; } .quote-price { font-family: var(--font-mono); font-size: 14px; color: var(--accent); margin-top: 4px; } .quote-resp { margin: 6px 0 0; font-size: 14px; color: var(--text); border-left: 2px solid var(--accent); padding-left: 10px; } /* --- Admin table --- */ .admin-tabs { display: flex; gap: 8px; margin-bottom: 18px; } .admin-tabs .tab-btn.active { background: var(--accent); color: #05201b; } .admin-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .admin-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .admin-row-head h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.1rem; } .admin-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .admin-controls select, .admin-controls input[type="text"], .admin-controls input[type="number"] { background: var(--surface); border: 1px solid var(--line-2); border-radius: 9px; color: var(--text); font: inherit; padding: 9px 11px; } .admin-controls input[type="text"] { flex: 1; min-width: 160px; } .admin-controls input[type="number"] { width: 160px; } .admin-controls select option { color: #000; } /* ===================================================================== LANGUAGE DROPDOWN (app pages) — mirrors the landing-page dropdown so the language switcher looks identical in the builder appbar. ===================================================================== */ .appbar .lang { margin-left: auto; } /* keep lang + authbar grouped at the right */ .lang { position: relative; } .lang-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; background: transparent; border: 1px solid var(--line-2); border-radius: 9px; color: var(--text); font-family: var(--font-mono); font-size: 13px; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .lang-toggle:hover { background: var(--surface); border-color: var(--accent); } .lang-globe { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.6; } .lang-caret { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; transition: transform 0.2s; } .lang-toggle[aria-expanded="true"] .lang-caret { transform: rotate(180deg); } .lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 178px; margin: 0; padding: 6px; list-style: none; background: var(--panel-bg); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); z-index: 40; } html[dir="rtl"] .lang-menu { right: auto; left: 0; } .lang-option { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 11px; border-radius: 8px; font-size: 14px; color: var(--muted); cursor: pointer; } .lang-option:hover { background: var(--surface); color: var(--text); } .lang-option[aria-selected="true"] { color: var(--text); background: var(--surface-2); } .lang-opt-code { font-family: var(--font-mono); font-size: 11px; color: var(--faint); } .lang-option[aria-selected="true"] .lang-opt-code { color: var(--accent); } /* =========================================================== VISION & MISSION page (vision.html). Colours reuse the existing palette (vars) — only layout + a minimal CSS-only "looking ahead" glow. No new colours, motion-reduced safe. =========================================================== */ .vision-page { max-width: 820px; } .vision-hero { position: relative; padding: 40px 0 24px; overflow: hidden; } /* Minimal, GPU-cheap "future glow": a single soft pulsing halo behind the Vision heading. Uses the existing accent colour (with alpha) only. */ .vision-glow { position: absolute; top: -60px; inset-inline-start: 50%; width: 440px; height: 440px; max-width: 90%; transform: translateX(-50%); border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(46, 230, 198, 0.16), rgba(46, 230, 198, 0) 70%); animation: visionPulse 6s ease-in-out infinite; } @keyframes visionPulse { 0%, 100% { opacity: 0.45; transform: translateX(-50%) scale(0.9); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .vision-glow { animation: none; } } .vision-hero > *:not(.vision-glow) { position: relative; z-index: 1; } .vision-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .vision-head svg { width: 30px; height: 30px; stroke: var(--accent); fill: none; stroke-width: 1.7; flex-shrink: 0; } .vision-head h1, .vision-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.8rem; } .vision-lead { font-size: 1.25rem; color: var(--text); line-height: 1.5; margin: 0 0 16px; max-width: 70ch; } .vision-text { color: var(--muted); line-height: 1.7; margin: 0 0 14px; max-width: 70ch; } .vision-closing { color: var(--text); } .mission-block { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 28px; } .mission-list { margin: 6px 0 18px; padding-inline-start: 22px; color: var(--muted); line-height: 1.7; max-width: 70ch; } .mission-list li { margin-bottom: 10px; } /* Footer (shared look for app pages that need one, e.g. vision). */ .app-footer { margin-top: 48px; padding: 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13px; font-family: var(--font-mono); display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; text-align: center; } .app-footer__sep { color: var(--line-2); }