/* ========================= Base tokens (shared) ========================= */ :root{ /* Primary token set (LP) */ --bg:#FFF4E9; /* warm beige background */ --card:#ffffff; --ink:#111111; /* headings/body primary */ --muted:#575757; /* body text */ --muted-2:#7C7C7C; /* footnotes */ --primary:#FF4D4D; /* red */ --primary-900:#E63E3E; --ring:rgba(255,77,77,.25); --radius:22px; --shadow:0 10px 30px rgba(0,0,0,.08); /* Aliases to keep old legal CSS compatible */ --text: var(--ink); --brand: var(--primary); } *{box-sizing:border-box} html,body{height:100%} img{max-width:100%; height:auto; display:block} /* ========================= Landing Page (index.html) ========================= */ body.lp{ margin:0; font-family:ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "SF Pro Display", Arial, sans-serif; color:var(--ink); background:linear-gradient(180deg,#FFF7EE 0%, var(--bg) 60%, #FFF 100%); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .container{width:min(1120px, 92%); margin-inline:auto} .section-title{font-size:28px; margin:0 0 18px} /* Header */ .site-header{ position:sticky; top:0; z-index:20; background:rgba(255,255,255,.65); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid rgba(0,0,0,.04); } .header-inner{display:flex; align-items:center; justify-content:space-between; padding:10px 0} .brand{font-weight:800; color:var(--ink); text-decoration:none; letter-spacing:.2px} .nav a{color:var(--muted); text-decoration:none; margin-left:18px; font-size:14px} .nav a:hover{color:var(--ink)} /* Hero */ .hero{padding:56px 0 28px} .hero-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:center} .hero-copy h1{font-size:40px; line-height:1.1; margin:0 0 10px} .lead{color:var(--muted); font-size:18px; margin:0 0 18px} .cta-row{display:flex; gap:12px; align-items:center; margin:18px 0 10px} .features{list-style:none; padding:0; margin:12px 0 0; color:var(--muted)} .features li{margin:6px 0} .hero-shot img{border-radius:28px; box-shadow:var(--shadow)} /* Buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 18px; border-radius:999px; font-weight:700; text-decoration:none; transition:transform .06s ease, box-shadow .2s ease, background .2s ease; border:1px solid transparent; } .btn:active{transform:translateY(1px)} .btn-primary{background:var(--primary); color:#fff; box-shadow:0 10px 24px var(--ring)} .btn-primary:hover{background:var(--primary-900)} .btn-ghost{background:#fff; color:var(--ink); border-color:rgba(0,0,0,.06)} /* Screenshots grid */ .screens{padding:28px 0 64px} .grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; } .shot{ background:var(--card); border-radius:28px; box-shadow:var(--shadow); padding:12px; display:flex; flex-direction:column; gap:10px; } .shot img{border-radius:22px} .shot figcaption{ font-size:14px; color:var(--muted); padding:0 6px 6px; } /* CTA center */ .cta-center{display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:22px} .muted{color:var(--muted)} .small{font-size:13px} /* Footer */ .site-footer{border-top:1px solid rgba(0,0,0,.05); background:#fff} .footer-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 0} .site-footer .nav a{margin-left:14px} /* Responsive (LP) */ @media (max-width: 980px){ .hero-grid{grid-template-columns:1fr; gap:22px} .hero{padding-top:34px} } @media (max-width: 880px){ .grid{grid-template-columns:repeat(2, 1fr)} } @media (max-width: 620px){ .grid{grid-template-columns:1fr} .hero-copy h1{font-size:34px} } /* Optional store badge helper */ .store-badge { display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 16px; border-radius:12px; background:#111; color:#fff; font-weight:600; text-decoration:none; } /* ========================= Legal pages (privacy/terms) ========================= */ /* Use on privacy.html & terms.html */ body.legal{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: linear-gradient(180deg, #fff9f5 0%, #f8f3e9 100%); color: var(--text); line-height: 1.6; } body.legal .container{ max-width: 860px; margin: 0 auto; padding: 32px 16px 56px; } body.legal .hero{ text-align: center; margin: 32px 0 24px; } body.legal .hero h1{ font-size: 36px; margin: 0 0 8px; color: var(--brand); } body.legal .tagline { color: var(--muted); margin: 0; } body.legal .links-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0 40px; } body.legal .card{ display:inline-block; background:var(--card); padding:16px; border-radius:16px; text-align:center; text-decoration:none; color:var(--text); border:1px solid var(--ring); box-shadow:0 6px 20px rgba(0,0,0,0.04); } body.legal .card:hover{ border-color: var(--brand); } body.legal .footer{ text-align:center; color:var(--muted); } body.legal .doc-header{ margin: 8px 0 16px; } body.legal .doc-header h1{ margin: 0 0 4px; color: var(--brand); } body.legal .muted{ color: var(--muted); margin: 0; } body.legal .doc{ background: var(--card); padding: 24px; border-radius: 16px; border: 1px solid var(--ring); box-shadow: 0 10px 24px rgba(0,0,0,0.05); } body.legal .doc h2{ margin-top: 24px; color: var(--ink); } body.legal .backlink{ margin-top: 24px; } body.legal .backlink a{ color: var(--brand); text-decoration: none; } body.legal .backlink a:hover{ text-decoration: underline; } /* Small legal responsiveness */ @media (max-width: 620px){ body.legal .links-grid{ grid-template-columns:1fr; } } /* --- Image-only screenshots gallery --- */ .screens--gallery .gallery{ display:grid; grid-template-columns:repeat(3, minmax(260px, 1fr)); gap:24px; align-items:start; } .img-card{ background:var(--card); border-radius:28px; padding:10px; box-shadow:var(--shadow); } .img-card img{ display:block; width:100%; height:auto; border-radius:22px; } /* Bez podpisów pod obrazami dla tej sekcji */ .screens--gallery .img-card figcaption{ display:none; } @media (max-width: 980px){ .screens--gallery .gallery{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width: 620px){ .screens--gallery .gallery{ grid-template-columns:1fr; } } /* (opcjonalnie) trochę więcej oddechu w kontenerze na dużych ekranach */ .container{ width:min(1180px, 92%); }