|
|
| 第1行： |
第1行： |
| /* ===== Hero (Apple-style) ===== */
| | .mw-card { |
| .mw-hero { | | display: block; |
| width: 100%;
| | padding: 20px 22px; |
| padding: 80px 20px;
| | border-radius: 18px; |
| text-align: center;
| | background: #fff; |
| background: #f5f5f7;
| | margin: 0 0 20px 0; |
| border-radius: 24px;
| | box-shadow: 0 6px 18px rgba(0,0,0,0.06); |
| margin-bottom: 40px;
| | text-decoration: none !important; |
| | color: #111 !important; |
| | transition: box-shadow .25s, transform .25s; |
| } | | } |
| .mw-hero-title { | | |
| font-size: 48px;
| | .mw-card:hover { |
| font-weight: 700;
| | transform: translateY(-4px); |
| color: #1d1d1f;
| | box-shadow: 0 10px 26px rgba(0,0,0,0.10); |
| } | | } |
| .mw-hero-sub { | | |
| margin-top: 10px;
| | .mw-card h2 { |
| font-size: 20px;
| | margin: 0 0 6px 0; |
| color: #6e6e73;
| | font-size: 1.35rem; |
| | font-weight: 600; |
| | } |
| | |
| | .mw-card p { |
| | margin: 0; |
| | opacity: 0.72; |
| } | | } |
|
| |
|
| /* ===== Grid Layout (Wikipedia-style) ===== */
| |
| .mw-main-grid { | | .mw-main-grid { |
| display: grid;
| | display: flex; |
| grid-template-columns: 1fr 350px;
| | gap: 30px; |
| gap: 40px;
| | margin-top: 30px; |
| margin-bottom: 40px;
| |
| } | | } |
|
| |
|
| /* ===== Apple-style clickable cards ===== */
| | .mw-left { |
| .mw-card { | | flex: 2; |
| background: white;
| |
| padding: 26px;
| |
| border-radius: 22px;
| |
| border: 1px solid #e5e5e5;
| |
| box-shadow: 0 6px 16px rgba(0,0,0,0.06);
| |
| margin-bottom: 24px;
| |
| cursor: pointer;
| |
| transition: all 0.25s ease;
| |
| } | | } |
| .mw-card:hover {
| | |
| transform: translateY(-6px);
| | .mw-right { |
| box-shadow: 0 12px 28px rgba(0,0,0,0.10);
| | flex: 1.2; |
| border-color: #d0d0d5;
| |
| }
| |
| .mw-card h2 { | |
| margin: 0 0 10px 0;
| |
| font-size: 24px;
| |
| font-weight: 600;
| |
| }
| |
| .mw-card p { | |
| margin: 0;
| |
| font-size: 16px;
| |
| color: #555;
| |
| } | | } |
|
| |
|
| /* ===== Right Column ===== */
| |
| .mw-section h2 { | | .mw-section h2 { |
| margin-bottom: 10px;
| | font-size: 1.2rem; |
| font-size: 22px;
| | margin: 0 0 10px 0; |
| border-bottom: 2px solid #eaeaea;
| |
| padding-bottom: 4px;
| |
| }
| |
| | |
| /* ===== Mobile ===== */
| |
| @media (max-width: 900px) {
| |
| .mw-main-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| } | | } |
