|
|
| Line 5: |
Line 5: |
|
| |
|
|
| |
|
| /* ========================================= | | /* ========================================== |
| EARTHMC HOMEPAGE | | EARTHMC HOMEPAGE — STABLE PANEL ALIGNMENT |
| Shared layout and theme | | ========================================== */ |
| ========================================= */
| |
|
| |
|
| .emc-home { | | .emc-home { |
| | width: 100%; |
| | max-width: 100%; |
| | box-sizing: border-box; |
| | color: #1f2937; |
| font-family: system-ui, -apple-system, "Segoe UI", | | font-family: system-ui, -apple-system, "Segoe UI", |
| Roboto, Helvetica, Arial, sans-serif; | | Roboto, Helvetica, Arial, sans-serif; |
| color: #1f2937;
| |
| line-height: 1.6; | | line-height: 1.6; |
| } | | } |
| Line 23: |
Line 25: |
| } | | } |
|
| |
|
| /* Main page layout */ | | /* Two equal-height panels per row */ |
|
| |
|
| .emc-layout { | | .emc-layout { |
| display: flex; | | display: grid; |
| flex-wrap: wrap; | | grid-template-columns: |
| | minmax(0, 2fr) |
| | minmax(0, 3fr); |
| align-items: stretch; | | align-items: stretch; |
| gap: 20px; | | gap: 20px; |
| margin: 10px 0; | | width: 100%; |
| | margin: 14px 0; |
| } | | } |
|
| |
|
| .emc-welcome,
| | /* Keep each panel aligned and allow content to wrap */ |
| .emc-editing {
| |
| flex: 1 1 380px;
| |
| min-width: 0;
| |
| }
| |
|
| |
|
| .emc-info, | | .emc-panel { |
| .emc-categories {
| |
| flex: 2 1 560px;
| |
| min-width: 0; | | min-width: 0; |
| }
| | width: 100%; |
| | | height: 100%; |
| /* Shared panels */
| | margin: 0; |
| | |
| .emc-panel {
| |
| padding: 18px 16px; | | padding: 18px 16px; |
| border: 1px solid #e2e8f0; | | border: 1px solid #e2e8f0; |
| Line 55: |
Line 52: |
| } | | } |
|
| |
|
| /* Welcome panel */ | | /* Preserve the original wider-right-column proportions */ |
|
| |
|
| .emc-welcome { | | .emc-welcome, |
| background: linear-gradient(
| | .emc-editing { |
| 160deg, #fff 0%, #eef3fb 55%, #d9e6f7 100%
| | grid-column: 1; |
| );
| |
| border-color: #dbe4f2;
| |
| padding: 22px 20px;
| |
| text-align: center; | |
| } | | } |
|
| |
|
| .emc-welcome-content p { | | .emc-info, |
| margin: 6px auto; | | .emc-categories { |
| color: #334155;
| | grid-column: 2; |
| font-size: .98rem;
| |
| } | | } |
|
| |
|
| .emc-logo {
| | /* The welcome panel retains its own gradient */ |
| margin: 0 auto 6px;
| |
| }
| |
|
| |
|
| .emc-welcome-title { | | .emc-panel.emc-welcome { |
| margin: 0 0 8px;
| | background: linear-gradient( |
| padding: 0;
| | 160deg, |
| border: 0;
| | #ffffff 0%, |
| color: #345fc2;
| | #eef3fb 55%, |
| font-size: 1.5rem;
| | #d9e6f7 100% |
| font-weight: 800;
| | ); |
| line-height: 1.25;
| | border-color: #dbe4f2; |
| }
| |
| | |
| .emc-command { | |
| display: inline-block; | |
| margin: 2px 3px;
| |
| padding: 3px 10px;
| |
| border: 1px solid #c7d6ef;
| |
| border-radius: 999px;
| |
| background: #fff;
| |
| color: #345fc2;
| |
| font-size: .8rem;
| |
| font-weight: 600;
| |
| }
| |
| | |
| /* Shared buttons */
| |
| | |
| .emc-welcome-actions,
| |
| .emc-quick-links,
| |
| .emc-footer-links {
| |
| display: flex;
| |
| flex-wrap: wrap; | |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 8px;
| |
| }
| |
| | |
| .emc-welcome-actions {
| |
| margin-top: 12px;
| |
| }
| |
| | |
| .emc-quick-links {
| |
| margin-top: 16px;
| |
| }
| |
| | |
| .emc-button {
| |
| display: inline-block;
| |
| padding: 8px 18px;
| |
| border: 1px solid #c7d6ef;
| |
| border-radius: 8px; | |
| background: #fff;
| |
| color: #345fc2;
| |
| font-size: .9rem;
| |
| font-weight: 600;
| |
| text-align: center; | | text-align: center; |
| text-decoration: none;
| |
| box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
| |
| } | | } |
|
| |
|
| .emc-button-primary {
| | /* Prevent headings and content from expanding the grid */ |
| border-color: #345fc2;
| |
| background: linear-gradient(90deg, #345fc2, #22418c);
| |
| color: #fff;
| |
| }
| |
|
| |
|
| .emc-button-small { | | .emc-panel img { |
| padding: 6px 12px; | | max-width: 100%; |
| border-color: #e2e8f0;
| |
| font-size: .85rem;
| |
| }
| |
| | |
| /* Section headings */
| |
| | |
| .emc-section-heading {
| |
| margin: 0 0 14px;
| |
| padding: 11px 18px;
| |
| border-radius: 10px;
| |
| background: linear-gradient(90deg, #345fc2, #22418c);
| |
| color: #fff;
| |
| text-align: center;
| |
| box-shadow: 0 5px 16px rgba(52, 95, 194, .16);
| |
| } | | } |
|
| |
|
| .emc-section-heading h2 { | | .emc-panel p { |
| margin: 0; | | overflow-wrap: anywhere; |
| padding: 0;
| |
| border: 0;
| |
| color: #fff;
| |
| font-size: 1.15rem;
| |
| font-weight: 700;
| |
| } | | } |
|
| |
|
| .emc-section-heading p {
| | /* Cards remain evenly aligned */ |
| margin: 2px 0 0;
| |
| color: #dbe6f7;
| |
| font-size: .86rem;
| |
| }
| |
| | |
| /* Navigation card grid */ | |
|
| |
|
| .emc-card-grid { | | .emc-card-grid { |
| display: flex; | | display: flex; |
| flex-wrap: wrap; | | flex-wrap: wrap; |
| | align-items: stretch; |
| justify-content: center; | | justify-content: center; |
| align-items: stretch;
| |
| gap: 12px; | | gap: 12px; |
| text-align: center; | | width: 100%; |
| } | | } |
|
| |
|
| Line 186: |
Line 102: |
| min-width: 0; | | min-width: 0; |
| min-height: 150px; | | min-height: 150px; |
| padding: 16px 10px;
| |
| border: 1px solid #e2e8f0;
| |
| border-top: 3px solid #345fc2;
| |
| border-radius: 10px;
| |
| background: #fff;
| |
| box-shadow: 0 3px 12px rgba(31, 41, 55, .05);
| |
| }
| |
|
| |
| .emc-card-image {
| |
| height: 100px;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| .emc-card-image img {
| |
| max-height: 100px;
| |
| max-width: 100%;
| |
| width: auto;
| |
| object-fit: contain;
| |
| }
| |
|
| |
| .emc-card-title {
| |
| margin: 10px 0 0;
| |
| color: #1f2937;
| |
| font-size: .9rem;
| |
| font-weight: 700;
| |
| }
| |
|
| |
| /* Editing panel */
| |
|
| |
| .emc-editing-content {
| |
| text-align: center;
| |
| }
| |
|
| |
| .emc-editing-content p {
| |
| margin: 0 0 10px;
| |
| color: #334155;
| |
| font-size: .95rem;
| |
| }
| |
|
| |
| .emc-create-page {
| |
| margin: 12px 0;
| |
| }
| |
|
| |
| .emc-divider {
| |
| margin: 20px 0;
| |
| border: 0;
| |
| border-top: 1px solid #e2e8f0;
| |
| }
| |
|
| |
| .emc-info-list {
| |
| margin: 0; | | margin: 0; |
| padding-left: 22px;
| |
| color: #334155;
| |
| font-size: .92rem;
| |
| } | | } |
|
| |
|
| .emc-info-list li {
| | /* Keep all server panels within the right-hand column */ |
| margin: 7px 0;
| |
| }
| |
|
| |
|
| /* Server selector */
| | .emc-server-panel { |
| | | width: 100%; |
| .emc-category-intro {
| | min-width: 0; |
| margin: 0 0 10px;
| |
| color: #334155;
| |
| font-size: .9rem;
| |
| text-align: center;
| |
| }
| |
| | |
| .emc-server-tabs {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: center;
| |
| gap: 6px;
| |
| margin: 12px 0;
| |
| }
| |
| | |
| .emc-server-tab {
| |
| padding: 7px 18px;
| |
| border: 1px solid #c7d6ef;
| |
| border-radius: 999px;
| |
| background: #fff;
| |
| color: #345fc2;
| |
| font: inherit;
| |
| font-size: .92rem;
| |
| font-weight: 600;
| |
| cursor: pointer;
| |
| }
| |
| | |
| .emc-server-tab:hover, | |
| .emc-server-tab:focus-visible {
| |
| border-color: #345fc2; | |
| outline-offset: 2px; | |
| }
| |
| | |
| .emc-server-tab-active {
| |
| border-color: #345fc2;
| |
| background: linear-gradient(90deg, #345fc2, #22418c);
| |
| color: #fff;
| |
| }
| |
| | |
| .emc-server-description {
| |
| margin: 4px 0 14px;
| |
| color: #5b6472;
| |
| font-size: .88rem;
| |
| text-align: center;
| |
| } | | } |
|
| |
|
| Line 301: |
Line 116: |
| } | | } |
|
| |
|
| /* Footer */ | | /* Stack the two columns on narrow screens */ |
| | |
| .emc-footer-links {
| |
| margin: 16px 0 0;
| |
| }
| |
| | |
| .emc-footer-button {
| |
| white-space: nowrap;
| |
| border-color: #d7dce4;
| |
| font-size: .88rem;
| |
| }
| |
| | |
| /* Responsive design */
| |
|
| |
|
| @media (max-width: 600px) { | | @media (max-width: 760px) { |
| .emc-layout { | | .emc-layout { |
| gap: 12px; | | grid-template-columns: minmax(0, 1fr); |
| | gap: 14px; |
| } | | } |
|
| |
|
| Line 324: |
Line 128: |
| .emc-info, | | .emc-info, |
| .emc-categories { | | .emc-categories { |
| flex: 1 1 100%; | | grid-column: 1; |
| | } |
| | |
| | .emc-panel { |
| | height: auto; |
| } | | } |
|
| |
|
| .emc-card { | | .emc-card { |
| flex-basis: calc(50% - 6px); | | flex-basis: 160px; |
| } | | } |
| | } |
|
| |
|
| .emc-welcome-title { | | @media (max-width: 420px) { |
| font-size: 1.3rem; | | .emc-panel { |
| | padding: 14px 10px; |
| } | | } |
|
| |
|
| .emc-server-tab { | | .emc-card { |
| padding: 7px 13px; | | flex-basis: calc(50% - 6px); |
| } | | } |
| } | | } |