/* Reset and base styles */ * { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; padding: 0; font-size: 18px; font-family: "Work Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-weight: 400; line-height: 1.6; color: #241f31; background-color: #fff; } @media screen and (min-width: 500px) and (min-height: 500px) { body { font-size: 20px; } } @media screen and (min-width: 1000px) and (min-height: 800px) { body { font-size: 22px; } } .container { max-width: 800px; margin: 0 auto; padding: 0 20px; } /* Header */ .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; padding: 60px 0; } .header-content { display: flex; flex-direction: column; align-items: center; gap: 20px; } .logo { width: 80px; height: 80px; filter: brightness(0) invert(1); } .header h1 { font-size: 2em; font-weight: 900; margin-bottom: 10px; line-height: 1; color: white; } @media screen and (min-width: 400px) { .header h1 { font-size: 2.5em; line-height: 1.25; } } .subtitle { font-size: 1em; font-weight: 600; margin-top: 2em; max-width: 600px; color: white; } /* Main content */ .main { padding: 60px 0; } .intro { font-size: 1.1rem; margin-bottom: 60px; text-align: center; } .intro p { margin-bottom: 20px; color: #555; } /* Problem sections */ .problems { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; margin-bottom: 60px; } .problem-item { text-align: center; padding: 30px; border-radius: 12px; background: #f8f9fa; border: 1px solid #e9ecef; transition: transform 0.2s ease, box-shadow 0.2s ease; } .problem-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); } .problem-icon { width: 60px; height: 60px; margin-bottom: 20px; filter: opacity(0.8); } .problem-item h3 { font-size: 1.4rem; margin-bottom: 15px; color: #333; } .problem-item p { color: #666; line-height: 1.6; } /* Content sections */ section { margin-bottom: 50px; } h1, h2, h3, h4, h5, h6 { margin: 0 0 10px; font-weight: 900; line-height: 1.25; color: #241f31; } h2 { font-size: 2rem; margin-bottom: 25px; border-bottom: 3px solid #667eea; padding-bottom: 10px; } h3 { font-size: 1.4rem; margin-bottom: 15px; } p { margin-bottom: 1em; color: #241f31; line-height: 1.6; } /* Lists */ ul { margin-top: 0; margin-bottom: 0.5em; padding-left: 20px; } p, li { margin-bottom: 1em; color: #241f31; line-height: 1.6; } li strong { color: #333; } /* Links */ a { font-weight: 600; text-decoration: none; color: #26a269; cursor: pointer; } a:hover { text-decoration: underline; } b, strong { font-weight: 600; } /* Request section */ .request { background: #f8f9fa; padding: 40px; border-radius: 12px; border-left: 4px solid #dc3545; } .request p { margin-bottom: 20px; } .request strong { color: #dc3545; font-weight: 600; } /* Specific requests section */ .specific-requests { margin: 40px 0; } .request-category { background: #f8f9fa; border-radius: 8px; padding: 25px; margin-bottom: 25px; border-left: 4px solid #667eea; } .request-category h4 { color: #333; font-size: 1.3rem; margin-bottom: 15px; } .request-category ul { margin: 0; padding-left: 20px; } .request-category li { margin-bottom: 8px; line-height: 1.6; } /* Timeline proposal */ .timeline-proposal { margin: 40px 0; background: #e8f4f8; padding: 30px; border-radius: 12px; border-left: 4px solid #17a2b8; } .timeline-phase { background: #fff; padding: 25px; margin-bottom: 20px; border-radius: 8px; border-left: 3px solid #17a2b8; } .timeline-phase h4 { color: #0c5460; font-size: 1.2rem; margin-bottom: 10px; } .timeline-phase p { margin-bottom: 15px; } .timeline-phase ul { margin: 0; padding-left: 20px; } /* Economic impact section */ .cost-analysis { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin: 30px 0; } .cost-category { background: #fff; border: 1px solid #e9ecef; border-radius: 12px; padding: 25px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .cost-category h3 { color: #dc3545; margin-bottom: 20px; font-size: 1.4rem; border-bottom: 2px solid #f8d7da; padding-bottom: 10px; } .cost-breakdown { display: flex; flex-direction: column; gap: 15px; } .cost-item { background: #f8f9fa; padding: 15px; border-radius: 6px; border-left: 3px solid #dc3545; } .cost-item h4 { color: #721c24; font-size: 1rem; margin-bottom: 5px; } .cost-item p { margin: 0; color: #555; font-size: 0.9rem; } .cost-item strong { color: #dc3545; font-weight: 600; } /* Opportunity cost */ .opportunity-cost { background: #fff3cd; padding: 30px; border-radius: 8px; border-left: 4px solid #ffc107; margin: 30px 0; } .opportunity-cost h3 { color: #856404; margin-bottom: 20px; } /* Market impact */ .adoption-barriers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0; } .barrier-item { background: #fff; padding: 20px; border-radius: 8px; border-top: 4px solid #dc3545; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .barrier-item h4 { color: #333; margin-bottom: 10px; font-size: 1.1rem; } .barrier-item p { margin: 0; color: #666; font-size: 0.9rem; line-height: 1.5; } /* Distribution impact section */ .distro-impact { margin: 40px 0; } .impact-item { margin-bottom: 30px; padding: 25px; border-radius: 8px; } .impact-item:first-child { background: #f8d7da; border-left: 4px solid #dc3545; } .impact-item:last-child { background: #d4edda; border-left: 4px solid #28a745; } .impact-item h4 { font-size: 1.3rem; margin-bottom: 15px; } .impact-item:first-child h4 { color: #721c24; } .impact-item:last-child h4 { color: #155724; } .impact-item ul { margin: 0; padding-left: 20px; } /* Distribution examples */ .distro-examples { margin: 40px 0; } .distro-case { background: #f8f9fa; padding: 20px; margin-bottom: 20px; border-radius: 8px; border-left: 4px solid #ffc107; } .distro-case h4 { color: #856404; margin-bottom: 15px; font-size: 1.2rem; } .distro-case p { margin: 0; color: #555; line-height: 1.6; } /* Responsibility section */ .responsibility-section { background: #e7f3ff; padding: 30px; border-radius: 12px; border-left: 4px solid #0066cc; margin: 40px 0; } .call-to-action { background: #fff; padding: 25px; border-radius: 8px; margin-top: 25px; border-left: 3px solid #28a745; } .call-to-action h4 { color: #155724; margin-bottom: 15px; } .call-to-action ol { margin: 0; padding-left: 20px; } .call-to-action li { margin-bottom: 8px; line-height: 1.6; } /* Success criteria */ .success-criteria { margin: 40px 0; } .criteria-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0; } .criteria-item { background: #f8f9fa; padding: 20px; border-radius: 8px; border-top: 4px solid #28a745; text-align: center; } .criteria-item h4 { color: #155724; margin-bottom: 10px; font-size: 1.1rem; } .criteria-item p { margin: 0; color: #666; font-size: 0.9rem; line-height: 1.5; } /* Governance control section */ .governance-control { margin: 60px 0; } .power-structure { margin: 40px 0; } .power-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 30px 0; } .x11-power, .wayland-power { padding: 25px; border-radius: 12px; border-top: 4px solid; } .x11-power { background: #d4edda; border-top-color: #28a745; } .wayland-power { background: #f8d7da; border-top-color: #dc3545; } .x11-power h4 { color: #155724; margin-bottom: 20px; font-size: 1.3rem; } .wayland-power h4 { color: #721c24; margin-bottom: 20px; font-size: 1.3rem; } .power-item { background: rgba(255, 255, 255, 0.6); padding: 15px; border-radius: 8px; margin-bottom: 15px; border-left: 3px solid; } .x11-power .power-item { border-left-color: #28a745; } .wayland-power .power-item { border-left-color: #dc3545; } .power-item h5 { font-size: 1rem; margin-bottom: 8px; color: #333; } .power-item p { margin: 0; font-size: 0.9rem; color: #555; line-height: 1.5; } /* Compositor tyranny */ .compositor-tyranny { margin: 40px 0; background: #fff3cd; padding: 30px; border-radius: 12px; border-left: 4px solid #ffc107; } .tyranny-examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0; } .tyranny-item { background: #fff; padding: 20px; border-radius: 8px; border-top: 4px solid #ffc107; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .tyranny-item h4 { color: #856404; margin-bottom: 10px; font-size: 1.1rem; } .tyranny-item p { margin: 0; color: #666; font-size: 0.9rem; line-height: 1.5; } /* Protocol problems */ .protocol-problems { margin: 40px 0; } .protocol-issue { background: #f8f9fa; padding: 25px; margin-bottom: 25px; border-radius: 8px; border-left: 4px solid #dc3545; } .protocol-issue h4 { color: #721c24; margin-bottom: 15px; font-size: 1.2rem; } .protocol-issue p { margin-bottom: 15px; color: #555; } .protocol-issue ul { margin: 0; padding-left: 20px; } .protocol-issue li { margin-bottom: 8px; color: #555; line-height: 1.6; } .protocol-issue strong { color: #dc3545; } /* Real examples */ .real-examples { margin: 40px 0; } .example-case { background: #e7f3ff; padding: 25px; margin-bottom: 25px; border-radius: 8px; border-left: 4px solid #0066cc; } .example-case h4 { color: #004499; margin-bottom: 15px; font-size: 1.2rem; } .example-case p { margin-bottom: 15px; color: #555; } .example-case ul { margin: 0; padding-left: 20px; } .example-case li { margin-bottom: 8px; color: #555; line-height: 1.6; } .example-case strong { color: #004499; } /* Developer powerlessness */ .developer-powerlessness { margin: 40px 0; background: #f8d7da; padding: 30px; border-radius: 12px; border-left: 4px solid #dc3545; } .powerless-scenarios { margin: 20px 0; } .scenario { background: #fff; padding: 20px; margin-bottom: 20px; border-radius: 8px; border-left: 3px solid #dc3545; } .scenario h4 { color: #721c24; margin-bottom: 15px; font-size: 1.1rem; } .scenario p { margin-bottom: 8px; padding: 8px 12px; border-radius: 4px; font-style: italic; line-height: 1.5; } .scenario p:nth-of-type(odd) { background: #e9f7ef; color: #155724; } .scenario p:nth-of-type(even) { background: #f8d7da; color: #721c24; } /* Governance solution */ .governance-solution { margin: 40px 0; background: #d1ecf1; padding: 30px; border-radius: 12px; border-left: 4px solid #17a2b8; } .solution-principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0; } .principle { background: #fff; padding: 20px; border-radius: 8px; border-top: 4px solid #17a2b8; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .principle h4 { color: #0c5460; margin-bottom: 10px; font-size: 1.1rem; } .principle p { margin: 0; color: #666; font-size: 0.9rem; line-height: 1.5; } /* Critical resources section */ .critical-resources { margin: 60px 0; background: #f8f9fa; padding: 40px; border-radius: 12px; border-left: 4px solid #667eea; } .critical-resources h2 { color: #333; border-bottom-color: #667eea; } .resource-links { margin: 30px 0; } .resource-item { background: #fff; padding: 25px; margin-bottom: 20px; border-radius: 8px; border-left: 3px solid #667eea; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .resource-item h3 { margin-bottom: 15px; font-size: 1.2rem; } .resource-item h3 a { color: #667eea; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.2s ease; } .resource-item h3 a:hover { border-bottom-color: #667eea; } .resource-item p { margin: 0; color: #666; line-height: 1.6; } .resources-note { margin-top: 30px; padding: 20px; background: #e7f3ff; border-radius: 8px; border-left: 3px solid #0066cc; font-style: italic; color: #004499; } /* X11 development section */ .x11-development { background: #e8f5e8; padding: 30px; border-radius: 12px; border-left: 4px solid #28a745; margin: 40px 0; } .x11-development h3 { color: #155724; margin-bottom: 20px; border-bottom-color: #28a745; } .x11-development p { color: #155724; } .xlibre-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 25px 0; } .benefit-item { background: #fff; padding: 20px; border-radius: 8px; border-top: 4px solid #28a745; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .benefit-item h4 { color: #155724; margin-bottom: 10px; font-size: 1.1rem; } .benefit-item p { margin: 0; color: #666; font-size: 0.9rem; line-height: 1.5; } /* Footer */ .footer { background: #333; color: white; text-align: center; padding: 40px 0; margin-top: 60px; } .footer p { margin-bottom: 10px; color: #ccc; } .footer a { color: #667eea; } .footer a:hover { color: #5a6fd8; } /* Responsive design */ @media (max-width: 768px) { .header h1 { font-size: 2.5rem; } .subtitle { font-size: 1.1rem; } .problems { grid-template-columns: 1fr; } .signature-grid { grid-template-columns: 1fr; } .container { padding: 0 15px; } .request, .platform-level, .action { padding: 30px 20px; } .burden-comparison { grid-template-columns: 1fr; } .comparison-grid { grid-template-columns: 1fr; } .market-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .casualty-examples { grid-template-columns: 1fr; } .power-comparison { grid-template-columns: 1fr; } .tyranny-examples { grid-template-columns: 1fr; } .solution-principles { grid-template-columns: 1fr; } .container { padding: 0 15px; } .request, .platform-level, .action { padding: 30px 20px; } .burden-comparison { grid-template-columns: 1fr; } .comparison-grid { grid-template-columns: 1fr; } .market-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .casualty-examples { grid-template-columns: 1fr; } } @media (max-width: 480px) { .header h1 { font-size: 2rem; } .header { padding: 40px 0; } .main { padding: 40px 0; } h2 { font-size: 1.6rem; } }