:root { --ink:#18334a; --line:#d1dee4; --yellow:#ffb81f; --paper:#fff; --muted:#5b7180; font-family: Inter, Arial, sans-serif; color:var(--ink); }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); } a { color:inherit; text-decoration:none; } button { font:inherit; cursor:pointer; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.site-header { height:65px; position:relative; z-index:2; display:flex; align-items:center; padding:0 20px; box-shadow:0 5px 15px rgba(212,218,221,.95); background:white; }
.logo { display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:21px; letter-spacing:-.7px; white-space:nowrap; } .logo-mark { width:27px; height:25px; display:flex; align-items:flex-end; gap:3px; padding:1px 0; } .logo-mark i { display:block; width:7px; border-radius:6px; background:var(--ink); transform:rotate(35deg); } .logo-mark i:nth-child(1){height:13px}.logo-mark i:nth-child(2){height:23px}.logo-mark i:nth-child(3){height:17px}
.nav { display:flex; gap:20px; margin:auto; font-size:16px; } .nav a:hover,.footer a:hover { text-decoration:underline; } .header-actions { display:flex; align-items:center; gap:15px; } .lang { border:0; background:transparent; color:var(--ink); font-size:14px; font-weight:700; } .support-button,.footer-goal button,.large-donation a { border:0; border-radius:10px; background:var(--ink); color:white; padding:8px 20px; line-height:24px; letter-spacing:.15px; font-size:16px; } .support-button { box-shadow:0 4px 0 var(--line); } .menu-button,.mobile-menu { display:none; }
.support { width:min(856px,calc(100% - 40px)); margin:0 auto; padding:40px 0 44px; } h1 { margin:0 0 40px; font-size:40px; line-height:1.18; font-weight:500; } .donation-panel { border-bottom:1px solid var(--line); padding-bottom:39px; } .goal { margin-bottom:33px; } .progress { height:40px; background:var(--line); border-radius:24px; overflow:hidden; } .progress span { display:block; width:77.6%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ffb81f,#ff798d); } .goal-labels { display:flex; justify-content:space-between; padding:10px 20px 0; color:var(--muted); font-size:16px; line-height:19px; }
.payment-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:21px; } .payment { height:105px; border-radius:24px; overflow:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; color:white; text-align:center; transition:transform .15s ease; } .payment:hover { transform:translateY(-2px); } .payment strong { font-size:30px; line-height:30px; letter-spacing:-1.5px; } .payment small { width:calc(100% - 40px); border-top:1px solid rgba(255,255,255,.45); padding-top:5px; font-size:13px; line-height:16px; letter-spacing:0; } .boosty { background:linear-gradient(115deg,#f15a35 0%,#fa8b31 49%,#fcce56 100%); } .boosty strong { font-weight:800; letter-spacing:-2px; } .tribute { background:linear-gradient(110deg,#19a970,#31d88f); } .tribute strong { font-size:31px; font-weight:800; } .patreon { background:#000; } .patreon strong b { display:inline-grid; place-items:center; width:25px; height:25px; margin-right:4px; border:6px solid #ff424d; border-radius:50%; color:transparent; vertical-align:-2px; }
.large-donation { display:flex; align-items:center; justify-content:space-between; padding-top:33px; } .large-donation div { display:grid; gap:0; } .large-donation strong { font-size:20px; line-height:24px; font-weight:500; } .large-donation span { font-size:16px; line-height:20px; } .large-donation a { min-width:158px; text-align:center; border-radius:10px; }
.sponsors { padding:35px 0 39px; border-bottom:2px solid var(--line); } h2 { margin:0 0 30px; font-size:28px; line-height:30px; font-weight:500; } .sponsors p { display:flex; gap:8px; align-items:center; margin:0; font-size:20px; line-height:23px; white-space:nowrap; } .sponsors i { flex:0 0 6px; height:6px; border-radius:50%; background:var(--yellow); } .intro { padding-top:39px; font-size:20px; line-height:20px; white-space:pre-line; }
.footer { background:var(--ink); color:white; margin-top:0; } .footer-inner { width:min(856px,calc(100% - 40px)); margin:auto; padding:40px 0 15px; } .footer-goal { height:40px; display:grid; grid-template-columns:1fr auto; grid-template-rows:20px 20px; gap:0 30px; align-items:end; } .footer-goal .progress { grid-row:1 / 3; height:20px; } .footer-goal .progress span { width:77.8%; } .footer-goal > div:nth-child(2) { grid-column:1; display:flex; justify-content:space-between; padding-top:3px; color:#d1dee4; font-size:13px; } .footer-goal button { grid-column:2; grid-row:1 / 3; min-width:195px; padding:8px 20px; }
.footer-content { border-top:1px solid rgba(255,255,255,.5); margin-top:40px; padding:30px 0 33px; display:grid; grid-template-columns:380px 190px 1fr; gap:48px; } .footer p { margin:11px 0 0; font-size:16px; line-height:22px; } .footer h3 { margin:0 0 7px; font-size:16px; line-height:24px; font-weight:500; } .footer-content div:not(.footer-about) a { display:block; font-size:16px; line-height:36px; } .footer-bottom { border-top:1px solid rgba(255,255,255,.5); padding-top:14px; display:flex; justify-content:space-between; align-items:center; } .license { display:flex; align-items:center; gap:10px; font-size:12px; line-height:16px; max-width:570px; } .license b { display:grid; place-items:center; width:32px; height:32px; border:2px solid white; border-radius:50%; text-transform:uppercase; font-size:10px; } .socials { display:flex; gap:15px; } .socials a { display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(255,255,255,.5); border-radius:50%; font-size:15px; font-weight:700; }
@media (max-width:900px) { .nav { gap:12px; font-size:14px; } .footer-content { grid-template-columns:1fr 160px 180px; gap:24px; } }
@media (max-width:680px) { .site-header { position:sticky; top:0; } .nav,.header-actions { display:none; } .menu-button { display:grid; gap:5px; width:40px; height:40px; margin-left:auto; padding:11px 9px; border:0; border-radius:10px; background:var(--ink); } .menu-button span { height:2px; border-radius:2px; background:white; } .mobile-menu { position:fixed; z-index:1; inset:65px 0 auto; padding:20px; background:white; box-shadow:0 10px 16px rgba(24,51,74,.18); } .mobile-menu:not([hidden]) { display:grid; gap:3px; } .mobile-menu a,.mobile-menu button { padding:12px 0; font-size:18px; text-align:left; border:0; background:transparent; color:var(--ink); } .mobile-menu .support-button { text-align:center; margin-top:8px; color:white; background:var(--ink); } .mobile-language { font-size:14px!important; }
  .support { width:calc(100% - 40px); padding-top:20px; padding-bottom:50px; } h1 { margin-bottom:20px; font-size:30px; line-height:35px; } .goal { margin-bottom:20px; } .goal-labels { padding:10px 10px 0; font-size:14px; line-height:16px; } .goal-labels span:first-child { max-width:135px; } .payment-cards { grid-template-columns:1fr; gap:21px; } .large-donation { display:grid; gap:20px; padding-top:20px; } .large-donation a { width:100%; min-height:50px; padding-top:13px; } .sponsors { padding:30px 0; } h2 { max-width:330px; margin-bottom:20px; font-size:26px; line-height:30px; } .sponsors p { flex-wrap:wrap; justify-content:center; gap:6px 8px; white-space:normal; font-size:16px; line-height:19px; } .sponsors i { width:6px; height:6px; } .intro { padding-top:24px; font-size:16px; line-height:20px; }
  .footer-inner { width:calc(100% - 40px); padding-top:30px; } .footer-goal { height:110px; display:grid; grid-template-columns:1fr; grid-template-rows:20px 20px 50px; gap:0; } .footer-goal .progress { grid-row:1; } .footer-goal > div:nth-child(2) { grid-row:2; grid-column:1; font-size:12px; padding-top:4px; } .footer-goal > div:nth-child(2) span:first-child { max-width:130px; } .footer-goal button { grid-column:1; grid-row:3; width:100%; min-width:0; min-height:50px; margin-top:20px; } .footer-content { grid-template-columns:1fr 1fr; gap:20px 30px; margin-top:30px; padding:20px 0 29px; } .footer-about { grid-column:1 / -1; } .footer p { max-width:400px; } .site-map a { line-height:28px!important; } .footer-bottom { display:block; padding-top:20px; } .license { align-items:flex-start; max-width:100%; } .license b { flex:0 0 32px; } .socials { justify-content:flex-end; margin-top:20px; gap:15px; } }