/* Toolgen – legal pages + per-calculator accent themes */ .legal-page { background: var(--bg); padding: 32px 0 64px; min-height: 60vh; } .legal-page .container { max-width: 860px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 32px clamp(18px, 4vw, 44px); line-height: 1.65; } .legal-page h1 { margin: 0 0 6px; color: var(--hero-start); font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.2rem); } .legal-page .legal-updated { color: var(--muted); font-size: 0.88rem; margin: 0 0 24px; } .legal-page h2 { margin: 28px 0 10px; color: var(--hero-start); font-size: 1.2rem; } .legal-page p, .legal-page li { color: #2c3d5a; } .legal-page ul { padding-left: 22px; } .legal-page a { color: var(--primary); } .legal-page a:hover { text-decoration: underline; } .legal-form { display: grid; gap: 14px; max-width: 540px; margin: 14px 0 8px; } .legal-form label { display: grid; gap: 6px; font-weight: 600; color: #2c3d5a; font-size: 0.92rem; } .legal-form input, .legal-form textarea { font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; } .legal-form button { justify-self: start; background: var(--primary); color: #fff; border: 0; border-radius: 10px; padding: 10px 20px; font-weight: 700; cursor: pointer; } .legal-form button:hover { background: var(--hero-start); } /* ============== PER-CALCULATOR ACCENT THEMES ============== */ /* Each calculator page sets data-theme on . The accent colors swap key UI elements (banner, primary buttons, footer ribbon) without changing layout. */ body[data-calc] .topbar { background: var(--theme-dark, #11335e) !important; } body[data-calc] footer { background: var(--theme-dark, #0d2440) !important; } body[data-calc] .banner { background: var(--theme, #2d5f99) !important; } body[data-calc] .calc-shell { border-top: 4px solid var(--theme, #2d5f99); } body[data-calc] .calc-title { color: var(--theme-dark, #003f72); background: var(--theme-soft, #f5f7fa); } body[data-calc] .start-btn, body[data-calc] button[type="submit"]:not(.tab), body[data-calc] .clear-btn { background: var(--theme, #2d5f99) !important; } body[data-calc] .start-btn:hover, body[data-calc] button[type="submit"]:not(.tab):hover { background: var(--theme-dark, #003f72) !important; } body[data-calc] .app-title { color: var(--theme-dark, #003f72) !important; }