/* friendly-terms.css — styles for the plain-English Simple Wires terms page (friendly_terms.cshtml). Drop in wwwroot/css/. Fonts (Poppins) are loaded via in the view's . */ :root { --ink: #23272e; --soft: #5a6472; --line: #e8e8ec; --yellow: #ffd300; --yellow-deep: #f2c200; --yellow-soft: #fff7d1; --dark: #1c1c1c; --bg: #f4f5f7; --card: #ffffff; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.65; font-size: 17px; } /* Brand bar (drop this if your _Layout already renders the nav) */ .brandbar { background: var(--dark); border-bottom: 3px solid var(--yellow); padding: 16px 24px; display: flex; align-items: center; gap: 12px; } .brandbar .mark { width: 34px; height: 34px; border-radius: 50%; background: var(--yellow); color: var(--dark); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; font-style: italic; } .brandbar .wordmark { color: var(--yellow); font-weight: 800; letter-spacing: 0.06em; font-size: 20px; } .brandbar .spacer { flex: 1; } .brandbar .dash { background: var(--yellow); color: var(--dark); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; padding: 8px 18px; border-radius: 999px; text-decoration: none; } /* Hero banner — dark branded panel that sits flush under the nav */ header.hero { background: var(--dark); text-align: center; padding: 56px 24px 48px; margin-bottom: 0; } .hero .kicker { text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; font-weight: 700; color: var(--yellow); margin: 0 0 14px; opacity: 0.85; } header.hero h1 { font-size: 40px; line-height: 1.1; margin: 0 0 16px; letter-spacing: -0.02em; font-weight: 800; color: #ffffff; } .hero .bar { width: 56px; height: 4px; background: var(--yellow); border-radius: 2px; margin: 0 auto 20px; } .hero .lede { font-size: 17px; color: rgba(255,255,255,0.65); margin: 0 auto; max-width: 580px; line-height: 1.7; } /* Page body below the hero */ .wrap { max-width: 780px; margin: 0 auto; padding: 40px 24px 80px; } .callout { background: var(--yellow-soft); border: 1px solid #f3e08a; border-left: 5px solid var(--yellow); border-radius: 12px; padding: 16px 20px; margin: 28px 0; font-size: 15px; color: #5c4f12; } .callout strong { color: #3f3608; } section { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; margin: 18px 0; box-shadow: 0 1px 2px rgba(20,20,20,0.04), 0 8px 24px rgba(20,20,20,0.04); } .head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .badge { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--yellow); color: var(--dark); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; } h2 { font-size: 21px; margin: 0; letter-spacing: -0.01em; font-weight: 700; } h3 { font-size: 16px; margin: 22px 0 6px; font-weight: 600; } p { margin: 10px 0; } ul { margin: 10px 0; padding-left: 22px; } li { margin: 6px 0; } .soft { color: var(--soft); } a { color: #b58900; font-weight: 600; } .divider { height: 1px; background: var(--line); border: 0; margin: 16px 0; } .defs dt { font-weight: 700; margin-top: 12px; } .defs dd { margin: 2px 0 0; color: var(--soft); } footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--soft); text-align: center; } @media (max-width: 540px) { body { font-size: 16px; } h1 { font-size: 28px; } .wrap { padding: 32px 16px 60px; } section { padding: 20px; } }