/* ======================================== DE ALGEMENE RELATIVITEITSTHEORIE Complete website thema - Albert Prins ======================================== */ /* Basis reset & typografie */ * { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.7; color: #212529; margin: 0; background: #d9e2f1; min-height: 100vh; } h1, h2, h3, h4 { color: #1e3c72; font-weight: 600; } /* Header & Navigatie */ header { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: #ffffff; /* WITTE tekst */ padding: 3rem 2rem; text-align: center; box-shadow: 0 4px 20px rgba(30,60,114,0.3); } header h1 { color: #ffffff !important; /* Force wit */ text-shadow: 0 2px 10px rgba(0,0,0,0.6); /* Donkere schaduw */ font-weight: 700; } .subtitle { font-size: 1.3rem; opacity: 0.95; margin: 0.3rem 0; } nav { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid #e9ecef; padding: 1rem 2rem; position: sticky; top: 0; z-index: 100; } nav a { margin-right: 1.5rem; text-decoration: none; color: #1e3c72; font-weight: 500; transition: all 0.2s; } nav a:hover { color: #2a5298; text-decoration: underline; } /* Hoofdcontent */ main { max-width: 1200px; margin: 0 auto; padding: 2rem; } section { margin-bottom: 3rem; } /* Kaarten & Grid */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.8rem; margin: 2rem 0; } .card { background: #ffffff; border-radius: 16px; padding: 2rem; box-shadow: 0 8px 32px rgba(0,0,0,0.08); border: 1px solid #e9ecef; transition: all 0.3s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.12); } .card h3 { margin-top: 0; color: #1e3c72; } /* Formules & Wiskunde */ .equation, .equation-large { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-left: 5px solid #28a745; padding: 1.5rem; margin: 2rem 0; border-radius: 0 12px 12px 0; font-size: 1.2em; } .equation-large { border-left-color: #007bff; font-size: 1.4em; text-align: center; } /* Experimenten & Kaarten */ .experiment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin: 3rem 0; } .experiment-card { background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); border: 2px solid #007bff; border-radius: 16px; padding: 2rem; transition: all 0.3s; } .experiment-card:hover { border-color: #0056b3; transform: translateY(-6px); } .result { color: #28a745; font-weight: 700; font-size: 1.2em; } /* Kleurrijke secties */ .verification-status, .proof-summary, .appendix-reference, .discussion-points { color: white; padding: 2.5rem; border-radius: 20px; margin: 3rem 0; text-align: center; } .verification-status { background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%); } .proof-summary { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); } .discussion-points { background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%); } .metric-comparison { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } /* Tabellen */ table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.06); } th, td { padding: 1rem; text-align: left; border-bottom: 1px solid #dee2e6; } th { background: #f8f9fa; font-weight: 600; color: #495057; } /* Lijsten & Quotes */ blockquote { background: #e9ecef; border-left: 5px solid #6c757d; padding: 2rem; margin: 2.5rem 0; font-style: italic; font-size: 1.1em; } .faq-grid, .system-grid, .appendix-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.8rem; margin: 2rem 0; } .faq-item, .system-card, .appendix-card { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 16px; padding: 2rem; border: 1px solid #dee2e6; transition: all 0.3s; } .faq-item:hover, .system-card:hover, .appendix-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); } /* Responsive */ @media (max-width: 768px) { main { padding: 1rem; } nav a { display: block; margin: 0.5rem 0; } .card-grid { grid-template-columns: 1fr; } } /* Print stijlen */ @media print { body { background: white; } nav, .card:hover { transform: none; } } /* Footer */ /* Footer links beter leesbaar maken */ footer { background: #1e3c72; color: #e8f4ff !important; /* Helderblauw-wit */ text-align: center; padding: 2rem; margin-top: 4rem; } footer a { color: #ffffff !important; /* WIT */ text-decoration: none; } footer a:hover { color: #e8f4ff !important; /* Helderblauw bij hover */ text-decoration: underline; } /* Formules in proof-summary beter leesbaar maken */ .proof-summary .equation-large { color: #000000 !important; /* Zwart */ background: linear-gradient(135deg, #f8f9ff 0%, #e8f4fd 100%) !important; border-left: 5px solid #1e3c72 !important; padding: 2rem !important; border-radius: 12px !important; font-size: 1.4em !important; } .proof-summary { color: #212529 !important; /* Donkergrijs voor tekst */ } .proof-summary h3 { color: #ffffff !important; /* Wit voor titel behouden */ } /* Tekst in proof-summary beter leesbaar maken */ .proof-summary p { color: #212529 !important; /* Donkergrijs - perfect leesbaar */ font-size: 1.2em !important; font-weight: 500 !important; line-height: 1.6 !important; margin: 1rem 0 !important; } .proof-summary span { color: #000000 !important; /* Zwart voor belangrijke tekst */ } .vector-diagram { max-width: 100%; height: auto; transform: scale(0.8); /* 10% kleiner */ transform-origin: center; display: block; margin: 0 auto; } .formula-centered { text-align: center; margin: 1em 0; font-size: 1.05em; } mjx-container { margin-left: auto; margin-right: auto; } /* ======================================== MathJax correct centreren & schalen ======================================== */ /* Display formules exact centreren */ mjx-container[display="true"] { margin-left: auto !important; margin-right: auto !important; } /* Inline formules netjes in tekst */ mjx-container { font-size: 1.05em; } /* Optionele wrapper voor formules */ .formula-centered { display: block; margin: 1.5em auto; text-align: center; } .image-centered { text-align: center; margin: 1.5em 0; } .image-centered img { max-width: 100%; height: auto; } .image-text { display: flex; gap: 1em; align-items: center; } .image-text img { max-width: 300px; } /* Lijstopmaak: hoofdpunten rond ●, subpunten vierkant ▪ */ /* Eerste niveau: standaard ● */ ul { list-style-type: disc; /* eerste niveau */ padding-left: 1.5em; } /* Tweede niveau: klein vierkantje ▪ */ ul ul { list-style-type: square; } ul ul li::marker { font-size: 0.65em; /* verkleint het vierkantje */ } .hero-image { width: 50%; height: auto; display: block; margin: 0 auto 1rem auto; /* boven | links/rechts | onder | links/rechts */ border-radius: 6px; }