/* ============================================================ buutce — Public Landing Page — PRODUCTION composition CSS Sprint 14 / Task 14.3B This file does NOT define a second design system: colors, font-family and radii below all read directly from design-system.css's canonical --color-*, --font-ui, --radius-*-ds tokens (loaded before this file, see templates/landing.html). Only page-specific layout/spacing/type-scale primitives that design-system.css has no equivalent for are defined here, scoped to this page only (this stylesheet is never loaded elsewhere). Light theme only — templates/landing.html hardcodes , independent of the app's stored dark/light preference (Task 14.3B §PRIMARY THEME). ============================================================ */ :root { --l-space-1: 4px; --l-space-2: 8px; --l-space-3: 12px; --l-space-4: 16px; --l-space-5: 24px; --l-space-6: 32px; --l-space-7: 48px; --l-space-8: 64px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-ui); background: var(--color-canvas); color: var(--color-text-primary); font-size: 0.9375rem; line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } .skip-link { position: absolute; left: -999px; top: auto; background: var(--color-brand-accent); color: var(--color-canvas); padding: 10px 16px; border-radius: var(--radius-control-ds); z-index: 100; } .skip-link:focus { left: var(--l-space-4); top: var(--l-space-3); } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--l-space-6); } .section { padding: var(--l-space-8) 0; } .section + .section { border-top: 1px solid var(--color-divider); } .eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--color-text-secondary); margin: 0 0 var(--l-space-3); } .section-title { font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--l-space-4); max-width: 26ch; } .section-lede { font-size: 1.0625rem; color: var(--color-text-secondary); max-width: 56ch; margin: 0 0 var(--l-space-6); } /* ---- Header ---- */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: var(--l-space-4) var(--l-space-6); border-bottom: 1px solid var(--color-divider); position: sticky; top: 0; background: color-mix(in srgb, var(--color-canvas) 92%, transparent); z-index: 10; } .brand-mark-row { display: flex; align-items: center; gap: var(--l-space-2); font-weight: 700; font-size: 1.1rem; } .brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--color-brand-accent); color: var(--color-canvas); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .header-nav { display: flex; align-items: center; gap: var(--l-space-6); } .header-nav a { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); text-decoration: none; } .header-nav a:hover { color: var(--color-text-primary); } .header-nav a:focus-visible, .btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: 4px; } .btn { font-family: var(--font-ui); font-weight: 600; cursor: pointer; border-radius: var(--radius-control-ds); border: 1px solid transparent; line-height: 1.2; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .btn-primary { background: var(--color-brand-accent); color: var(--color-canvas); padding: 10px 20px; font-size: 0.8125rem; } .btn-quiet { background: transparent; color: var(--color-brand-accent); padding: 4px; font-size: 0.8125rem; } .header-cta { font-size: 0.8125rem; padding: 8px 16px; } /* ---- Hero ---- */ .hero { padding: var(--l-space-7) 0 var(--l-space-6); } .hero-grid { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: var(--l-space-7); align-items: center; } .hero-eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--color-brand-accent); margin: 0 0 var(--l-space-3); } .hero-headline { font-size: 2.5rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 var(--l-space-4); } .hero-support { font-size: 1.0625rem; color: var(--color-text-secondary); max-width: 44ch; margin: 0 0 var(--l-space-5); } .hero-actions { display: flex; align-items: center; gap: var(--l-space-5); flex-wrap: wrap; } .hero-visual { border: 1px solid var(--color-divider); border-radius: var(--radius-panel-ds); overflow: hidden; box-shadow: 0 24px 48px -28px rgba(35,33,29,0.22); } .hero-visual img { width: 100%; height: auto; } /* ---- Confidence strip ---- */ .confidence-row { display: flex; gap: var(--l-space-7); flex-wrap: wrap; } .confidence-item { flex: 1 1 220px; } .confidence-item .k { font-weight: 700; font-size: 1.02rem; margin-bottom: 4px; } .confidence-item .v { font-size: 0.8125rem; color: var(--color-text-secondary); } /* ---- Product narrative rows ---- */ .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--l-space-7); align-items: center; } .feature-row--spaced { margin-bottom: var(--l-space-8); } .feature-row.reverse .feature-copy { order: 2; } .feature-row.reverse .feature-visual { order: 1; } .feature-copy .step-index { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-brand-accent); margin-bottom: var(--l-space-2); } .feature-copy h3 { font-size: 1.375rem; font-weight: 700; margin: 0 0 var(--l-space-3); } .feature-copy p { font-size: 0.9375rem; color: var(--color-text-secondary); max-width: 44ch; margin: 0 0 var(--l-space-3); } .feature-visual { border: 1px solid var(--color-divider); border-radius: var(--radius-panel-ds); overflow: hidden; } .feature-visual img { width: 100%; height: auto; } .jargon-note { font-size: 0.8125rem; color: var(--color-text-muted); border-left: 2px solid var(--color-divider); padding-left: var(--l-space-3); margin-top: var(--l-space-3); } .narrative-intro { margin-bottom: var(--l-space-7); } /* ---- Featured narrative step (Bütçe / Harcanabilir Tutar link-back) ---- */ .step-featured { background: var(--color-surface-1); border: 1px solid var(--color-divider); border-top: 3px solid var(--color-brand-accent); border-radius: var(--radius-panel-ds); padding: var(--l-space-6); margin: 0 calc(var(--l-space-6) * -1); } .step-featured .wrap { padding: 0 var(--l-space-6); } .step-callout { display: inline-block; font-size: 0.8125rem; font-weight: 600; color: var(--color-brand-accent); background: var(--color-brand-accent-quiet); border-radius: var(--radius-control-ds); padding: 6px 12px; margin: var(--l-space-2) 0 0; } .step-featured .feature-visual { box-shadow: 0 20px 44px -30px rgba(27, 126, 115, 0.35); } /* ---- Closing CTA ---- */ .closing { text-align: center; padding: var(--l-space-8) 0; } .closing .section-title { margin-left: auto; margin-right: auto; max-width: 32ch; } .closing-slogan { font-size: 1.1rem; color: var(--color-text-secondary); margin: var(--l-space-4) 0 var(--l-space-6); } /* ---- Footer ---- */ .site-footer { padding: var(--l-space-6) 0 var(--l-space-7); } .footer-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--l-space-6); } .footer-brand { font-weight: 700; } .footer-links { display: flex; gap: var(--l-space-5); } .footer-links a { font-size: 0.8125rem; color: var(--color-text-secondary); text-decoration: none; } .footer-links a:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: 4px; } .footer-note { font-size: 0.75rem; color: var(--color-text-muted); margin-top: var(--l-space-4); max-width: 60ch; } @media (max-width: 900px) { .wrap { padding: 0 var(--l-space-4); } .header-nav { display: none; } .hero-grid, .feature-row, .feature-row.reverse { grid-template-columns: 1fr; } .feature-row.reverse .feature-copy, .feature-row.reverse .feature-visual { order: initial; } .hero { padding: var(--l-space-6) 0 var(--l-space-6); } .hero-headline { font-size: 1.9rem; } .hero-support { font-size: 1rem; max-width: none; } .hero-actions { flex-wrap: wrap; } .section { padding: var(--l-space-6) 0; } .section-title { font-size: 1.5rem; max-width: none; } .section-lede { font-size: 1rem; max-width: none; } .confidence-row { flex-direction: column; gap: var(--l-space-4); } .feature-copy p, .feature-copy h3 { max-width: none; } .footer-row { flex-direction: column; } .step-featured { margin: 0; padding: var(--l-space-5); } .step-featured .wrap { padding: 0; } }