/* ============================================================ NT Rent — pagrindinis CSS Etapas 3: auth + public puslapiai Etapas 4: papildys sidebar, header, pilna app tema ============================================================ */ /* ---- Kintamieji ---- */ :root { --color-primary: #5a7a3a; --color-primary-h: #435c2a; --color-success: #16a34a; --color-danger: #dc2626; --color-warning: #d97706; --color-info: #0891b2; --color-text: #1e293b; --color-muted: #64748b; --color-border: #e2e8f0; --color-bg: #f8fafc; --color-white: #ffffff; --color-card: #ffffff; --radius: 8px; --radius-sm: 4px; --shadow: 0 1px 4px rgba(0,0,0,.08); --shadow-md: 0 4px 16px rgba(0,0,0,.10); --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Courier New', Courier, monospace; } /* ============================================================ Spalvų temos (data-theme atributas ant ) ============================================================ */ [data-theme="blue"] { --color-primary: #1d6fa4; --color-primary-h: #155e8a; } [data-theme="slate"] { --color-primary: #475569; --color-primary-h: #334155; } [data-theme="purple"] { --color-primary: #6d28d9; --color-primary-h: #5b21b6; } [data-theme="amber"] { --color-primary: #b45309; --color-primary-h: #92400e; } /* ---- Reset / Base ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { font-family: var(--font); color: var(--color-text); background: var(--color-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { line-height: 1.25; font-weight: 600; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.125rem; } p { margin-bottom: .75rem; } p:last-child { margin-bottom: 0; } /* ---- Alert pranesimai ---- */ .alert { padding: .75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .9375rem; border-left: 4px solid transparent; } .alert-success { background: #dcfce7; border-color: var(--color-success); color: #166534; } .alert-danger { background: #fee2e2; border-color: var(--color-danger); color: #991b1b; } .alert-warning { background: #fef3c7; border-color: var(--color-warning); color: #92400e; } .alert-info { background: #e0f2fe; border-color: var(--color-info); color: #0c4a6e; } /* ---- Mygtukai ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem 1.25rem; background: var(--color-primary); color: var(--color-white); border: 1.5px solid var(--color-primary); -webkit-appearance: none; appearance: none; line-height: 1.2; box-sizing: border-box; border-radius: var(--radius-sm); font-size: .9375rem; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; text-decoration: none; } .btn:hover { background: var(--color-primary-h); border-color: var(--color-primary-h); text-decoration: none; color: var(--color-white); } .btn-outline { background: transparent; color: var(--color-primary); } .btn-outline:hover { background: var(--color-primary); color: var(--color-white); } .btn-sm { padding: 0 .85rem; font-size: .875rem; height: 2.125rem; } .btn-lg { padding: .75rem 1.75rem; font-size: 1.0625rem; } .btn-block { width: 100%; } /* Ikona be teksto — kvadratinis mygtukas */ .btn-icon { padding: .35rem .5rem; min-width: 2rem; } .btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .btn-primary:hover { background: var(--color-primary-h); border-color: var(--color-primary-h); color: #fff; } .btn-secondary { background: var(--color-white); border-color: var(--color-border); color: var(--color-text); } .btn-secondary:hover { background: var(--color-bg); color: var(--color-text); } .btn-success { background: var(--color-success); border-color: var(--color-success); color: #fff; } .btn-success:hover { background: #15803d; border-color: #15803d; color: #fff; } .btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; } .btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; } .btn-warning { background: var(--color-warning); border-color: var(--color-warning); color: #fff; } .btn-warning:hover { background: #b45309; border-color: #b45309; color: #fff; } /* Lenteliu ikonu mygtukai: baltas fonas, spalvotas apvadas + ikona */ .btn-icon.btn-primary { background: #fff; color: var(--color-primary); border-color: #a3c48a; } .btn-icon.btn-primary:hover { background: #f0f7eb; border-color: var(--color-primary); color: var(--color-primary-h); } .btn-icon.btn-success { background: #fff; color: #16a34a; border-color: #86efac; } .btn-icon.btn-success:hover { background: #dcfce7; border-color: #4ade80; color: #15803d; } .btn-icon.btn-danger { background: #fff; color: #dc2626; border-color: #fca5a5; } .btn-icon.btn-danger:hover { background: #fee2e2; border-color: #f87171; color: #b91c1c; } .btn-icon.btn-warning { background: #fff; color: #d97706; border-color: #fcd34d; } .btn-icon.btn-warning:hover { background: #fef3c7; border-color: #fbbf24; color: #b45309; } .btn-icon.btn-secondary { background: #fff; color: var(--color-muted); border-color: var(--color-border); } .btn-icon.btn-secondary:hover { background: var(--color-bg); color: var(--color-text); border-color: #cbd5e1; } /* ---- Formos ---- */ .form-group { margin-bottom: 1.125rem; } .form-label { display: block; font-size: .9375rem; font-weight: 500; margin-bottom: .35rem; color: var(--color-text); } .form-control { width: 100%; padding: .55rem .75rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); font-size: .9375rem; font-family: var(--font); background: var(--color-white); color: var(--color-text); transition: border-color .15s, box-shadow .15s; } .form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(90,122,58,.15); } .form-control::placeholder { color: #94a3b8; } textarea.form-control { resize: vertical; min-height: 100px; } .form-hint { display: block; font-size: .8125rem; color: var(--color-muted); margin-top: .25rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-actions { margin-top: 1.5rem; } .req { color: var(--color-danger); } /* ============================================================ AUTH puslapiai ============================================================ */ .auth-body { background: var(--color-bg); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; } .auth-wrapper { width: 100%; max-width: 420px; } .auth-card { background: var(--color-white); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 2rem; } .auth-logo { display: flex; align-items: center; gap: .5rem; font-size: 1.375rem; font-weight: 700; color: var(--color-primary); text-decoration: none; margin-bottom: 1.5rem; justify-content: center; } .auth-logo:hover { text-decoration: none; } .auth-logo-icon { font-size: 1.5rem; } .auth-title { font-size: 1.375rem; font-weight: 700; margin-bottom: .25rem; text-align: center; } .auth-subtitle { color: var(--color-muted); font-size: .9375rem; text-align: center; margin-bottom: 1.5rem; } .auth-form { margin-top: 1.25rem; } .auth-links { margin-top: 1.25rem; text-align: center; font-size: .9rem; color: var(--color-muted); display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; } .auth-footer { margin-top: 1.5rem; text-align: center; font-size: .8125rem; color: var(--color-muted); } .auth-footer a { color: var(--color-muted); } .auth-footer a:hover { color: var(--color-primary); } /* ============================================================ PUBLIC puslapiai (home, cms, support) ============================================================ */ .pub-header { background: var(--color-white); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow); } .pub-container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } .pub-header .pub-container { display: flex; align-items: center; justify-content: space-between; height: 60px; } .pub-logo { display: flex; align-items: center; gap: .4rem; font-size: 1.25rem; font-weight: 700; color: var(--color-primary); text-decoration: none; } .pub-logo-icon { font-size: 1.4rem; } .pub-nav { display: flex; align-items: center; gap: .75rem; } .pub-lang-wrap { display: flex; align-items: center; } .pub-main { padding: 3rem 0; min-height: calc(100vh - 120px); } .pub-footer { background: var(--color-white); border-top: 1px solid var(--color-border); padding: 1.25rem 0; } .pub-footer .pub-container { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; } .pub-footer-copy { margin: 0; font-size: .875rem; color: var(--color-muted); } .pub-footer-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; } .pub-footer-nav a { font-size: .875rem; color: var(--color-muted); } .pub-footer-nav a:hover { color: var(--color-primary); } /* Kalbos perjungejas */ .lang-switcher { display: flex; justify-content: center; gap: .5rem; margin-bottom: 2rem; } .lang-btn { padding: .25rem .75rem; border-radius: 20px; border: 1.5px solid var(--color-border); font-size: .8125rem; font-weight: 600; color: var(--color-muted); text-decoration: none; transition: border-color .15s, color .15s, background .15s; } .lang-btn:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; } .lang-btn.active { border-color: var(--color-primary); background: var(--sidebar-active-bg); color: var(--color-primary); } /* Hero sekcija */ .hero { text-align: center; padding: 4rem 0 3rem; } .hero-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; color: var(--color-text); } .hero-desc { font-size: 1.125rem; color: var(--color-muted); max-width: 560px; margin: 0 auto 2rem; } .hero-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } /* Feature korteles */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 3rem; } .feature-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.75rem; text-align: center; box-shadow: var(--shadow); } .feature-icon { font-size: 2.5rem; margin-bottom: .75rem; } .feature-card h3 { margin-bottom: .5rem; } .feature-card p { color: var(--color-muted); font-size: .9375rem; } /* CMS puslapis */ .cms-page { max-width: 780px; } .cms-content { margin-top: 1.5rem; line-height: 1.8; } .cms-content h2 { margin: 1.5rem 0 .75rem; } .cms-content p { margin-bottom: .75rem; } /* Support puslapis */ .support-page { max-width: 680px; } .support-page h1 { margin-bottom: .5rem; } /* ============================================================ APP stub (Etapas 3 laikinas — bus pakeistas Etape 4) ============================================================ */ .app-stub-bar { background: var(--color-primary); color: var(--color-white); display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.5rem; font-size: .9375rem; } .app-stub-bar a { color: var(--color-white); opacity: .9; } .app-stub-bar a:hover { opacity: 1; } .app-stub-content { max-width: 900px; margin: 2rem auto; padding: 0 1.5rem; } .stub-page h1 { margin-bottom: .5rem; } .text-muted { color: var(--color-muted); } /* Error puslapis */ .error-page { text-align: center; padding: 4rem 0; } .error-page h1 { font-size: 5rem; font-weight: 800; color: var(--color-border); margin-bottom: .5rem; } .error-page p { color: var(--color-muted); margin-bottom: 1.5rem; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 600px) { .hero-title { font-size: 1.75rem; } .form-row { grid-template-columns: 1fr; } .auth-card { padding: 1.5rem; } /* Viešas header — mažas ekranas */ .pub-header .pub-container { height: auto; padding: .6rem 1rem; flex-wrap: wrap; gap: .5rem; } .pub-nav { gap: .4rem; flex-wrap: wrap; } .pub-nav .btn { font-size: .8125rem; padding: .3rem .7rem; } /* Hero sekcija */ .hero { padding: 2rem 1rem 1.5rem; } .hero-desc { font-size: 1rem; } .hero-actions { display: none; } /* Auth */ .auth-body { padding: .75rem; } /* Footer — mobiliai */ .pub-footer .pub-container { flex-direction: column; align-items: center; text-align: center; gap: .5rem; } .pub-footer-nav { justify-content: center; gap: .25rem .9rem; /* mažas tarpas tarp eilučių, normalus tarp elementų */ } .pub-footer-copy { font-size: .75rem; color: var(--color-muted); } } @media (max-width: 400px) { .pub-logo span { display: none; } /* Tik logotipas, ne tekstas */ }