|
|
| (9 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* ===== Lucid NarutoRP – Fancy Main Page ===== */
| |
|
| |
| /* Outer dark panel, like a central "hub" */
| |
| table.lucid-main-wrapper {
| |
| width: 100%;
| |
| max-width: 1200px;
| |
| margin: 0 auto 40px;
| |
| border: 0;
| |
| border-collapse: separate;
| |
| border-spacing: 0;
| |
| background:
| |
| radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 55%),
| |
| linear-gradient(135deg, #101216, #1c2025 45%, #15181c 100%);
| |
| color: #f4f4f4;
| |
| box-shadow: 0 0 25px rgba(0,0,0,0.7);
| |
| border-radius: 14px;
| |
| }
| |
| table.lucid-main-wrapper td,
| |
| table.lucid-main-wrapper th {
| |
| border: 0;
| |
| }
| |
|
| |
| /* Logo */
| |
|
| |
| .lucid-main-logo {
| |
| text-align: center;
| |
| font-size: 40px;
| |
| letter-spacing: 0.28em;
| |
| font-weight: 700;
| |
| text-transform: uppercase;
| |
| padding: 22px 10px 4px;
| |
| }
| |
| .lucid-main-logo span {
| |
| background: linear-gradient(90deg, #ffcc66, #ff9966);
| |
| -webkit-background-clip: text;
| |
| background-clip: text;
| |
| color: transparent;
| |
| text-shadow: 0 0 12px rgba(255,180,80,0.4);
| |
| }
| |
|
| |
| .lucid-main-subtitle {
| |
| text-align: center;
| |
| font-size: 14px;
| |
| letter-spacing: 0.24em;
| |
| text-transform: uppercase;
| |
| color: #64c1ff;
| |
| padding-bottom: 18px;
| |
| opacity: 0.9;
| |
| }
| |
|
| |
| /* Section bars */
| |
|
| |
| .lucid-section-heading {
| |
| margin: 24px 0 12px;
| |
| padding: 0 24px;
| |
| }
| |
|
| |
| .lucid-section-heading h2 {
| |
| font-size: 16px;
| |
| text-transform: uppercase;
| |
| letter-spacing: 0.16em;
| |
| padding: 8px 14px;
| |
| margin: 0;
| |
| background: linear-gradient(90deg, #005d70, #0088a3);
| |
| border-radius: 4px;
| |
| border-left: 4px solid #4de0ff;
| |
| box-shadow: 0 0 10px rgba(0, 141, 179, 0.4);
| |
| }
| |
|
| |
| /* Tables that hold the icons */
| |
|
| |
| table.lucid-main-nav,
| |
| table.lucid-other,
| |
| table.lucid-factions {
| |
| margin: 4px auto 10px;
| |
| border: 0;
| |
| background: transparent;
| |
| }
| |
| table.lucid-main-nav td,
| |
| table.lucid-other td,
| |
| table.lucid-factions td {
| |
| padding: 20px;
| |
| text-align: center;
| |
| }
| |
|
| |
| /* Icon + label block */
| |
|
| |
| .lucid-nav-item {
| |
| display: inline-block;
| |
| text-align: center;
| |
| }
| |
|
| |
| /* Circular look + glow */
| |
| .lucid-nav-item a img,
| |
| .lucid-nav-item img {
| |
| border-radius: 50%;
| |
| border: 3px solid #506067;
| |
| background: radial-gradient(circle at 30% 20%, #3a444b, #22272c);
| |
| padding: 14px;
| |
| box-sizing: border-box;
| |
| box-shadow:
| |
| 0 0 0 1px rgba(0,0,0,0.7),
| |
| 0 10px 20px rgba(0,0,0,0.7);
| |
| transition: transform 0.18s ease-out,
| |
| box-shadow 0.18s ease-out,
| |
| border-color 0.18s ease-out;
| |
| }
| |
|
| |
| /* Hover effect */
| |
| .lucid-nav-item a:hover img,
| |
| .lucid-nav-item:hover img {
| |
| transform: translateY(-4px) scale(1.05);
| |
| border-color: #4de0ff;
| |
| box-shadow:
| |
| 0 0 0 1px rgba(0, 224, 255, 0.3),
| |
| 0 12px 26px rgba(0, 0, 0, 0.8),
| |
| 0 0 18px rgba(0, 224, 255, 0.45);
| |
| }
| |
|
| |
| /* Labels */
| |
|
| |
| .lucid-label-strong {
| |
| display: inline-block;
| |
| margin-top: 8px;
| |
| padding: 6px 14px;
| |
| background: #e8e8e8;
| |
| color: #111;
| |
| font-size: 13px;
| |
| font-weight: 600;
| |
| border-radius: 3px;
| |
| text-transform: uppercase;
| |
| letter-spacing: 0.08em;
| |
| }
| |
|
| |
| .lucid-label-soft {
| |
| display: inline-block;
| |
| margin-top: 6px;
| |
| padding: 5px 12px;
| |
| background: #d8dde0;
| |
| color: #333;
| |
| font-size: 11px;
| |
| font-style: italic;
| |
| border-radius: 3px;
| |
| }
| |
|
| |
| /* Faded placeholders */
| |
|
| |
| .lucid-placeholder img {
| |
| opacity: 0.55;
| |
| }
| |
| .lucid-placeholder .lucid-label-soft {
| |
| opacity: 0.75;
| |
| }
| |
|
| |
| /* Reduce size on mobile */
| |
|
| |
| @media (max-width: 700px) {
| |
| table.lucid-main-nav td,
| |
| table.lucid-other td,
| |
| table.lucid-factions td {
| |
| padding: 10px;
| |
| }
| |
| .lucid-nav-item a img,
| |
| .lucid-nav-item img {
| |
| width: 120px;
| |
| padding: 10px;
| |
| }
| |
| }
| |
|
| |
|
| |
| __NOTOC__ | | __NOTOC__ |
|
| |
|
| Line 184: |
Line 14: |
| |- | | |- |
| | <div class="lucid-nav-item"> | | | <div class="lucid-nav-item"> |
| [[File:Lucid_Icon_NarutoLore.svg|180px|link=Naruto Lore]]
| | <div class="lucid-icon-circle lucid-icon-lore"></div> |
| <br /><span class="lucid-label-strong">[[Naruto Lore|Naruto Lore]]</span>
| | <br /><span class="lucid-label-strong">[[Naruto Lore|Naruto Lore]]</span> |
| </div> | | </div> |
| | <div class="lucid-nav-item"> | | | <div class="lucid-nav-item"> |
| [[File:Lucid_Icon_Rules.svg|180px|link=Rules]]
| | <div class="lucid-icon-circle lucid-icon-rules"></div> |
| <br /><span class="lucid-label-strong">[[Rules|Rules]]</span>
| | <br /><span class="lucid-label-strong">[[Rules|Rules]]</span> |
| </div> | | </div> |
| | <div class="lucid-nav-item"> | | | <div class="lucid-nav-item"> |
| [[File:Lucid_Icon_Documents.svg|180px|link=Important Documents]]
| | <div class="lucid-icon-circle lucid-icon-docs"></div> |
| <br /><span class="lucid-label-strong">[[Important Documents|Important Documents]]</span>
| | <br /><span class="lucid-label-strong">[[Important Documents|Important Documents]]</span> |
| </div>
| |
| |}
| |
| | |
| <div class="lucid-section-heading"><h2>Other</h2></div>
| |
| | |
| {| class="lucid-other"
| |
| |-
| |
| | <div class="lucid-nav-item">
| |
| [[File:Lucid_Icon_ComingSoon.svg|160px]]
| |
| <br /><span class="lucid-label-soft">Coming Soon</span>
| |
| </div>
| |
| | <div class="lucid-nav-item lucid-placeholder">
| |
| [[File:Lucid_Icon_FutureSlot.svg|130px]]
| |
| <br /><span class="lucid-label-soft">Future Navigation</span>
| |
| </div>
| |
| | <div class="lucid-nav-item lucid-placeholder">
| |
| [[File:Lucid_Icon_FutureSlot.svg|130px]]
| |
| <br /><span class="lucid-label-soft">Future Feature</span>
| |
| </div> | | </div> |
| |} | | |} |
| Line 220: |
Line 32: |
| |- | | |- |
| | <div class="lucid-nav-item"> | | | <div class="lucid-nav-item"> |
| [[File:Lucid_Icon_Konoha.svg|180px|link=Konoha]]
| | <div class="lucid-icon-circle lucid-icon-konoha"></div> |
| <br /><span class="lucid-label-strong">[[Konoha|Konohagakure]]</span>
| | <br /><span class="lucid-label-strong">[[Konohagakure|Konohagakure]]</span> |
| </div> | | </div> |
| | <div class="lucid-nav-item"> | | | <div class="lucid-nav-item"> |
| [[File:Lucid_Icon_Amegakure.svg|180px|link=Amegakure]]
| | <div class="lucid-icon-circle lucid-icon-ame"></div> |
| <br /><span class="lucid-label-strong">[[Amegakure|Amegakure]]</span>
| | <br /><span class="lucid-label-strong">[[Amegakure|Amegakure]]</span> |
| </div> | | </div> |
| | <div class="lucid-nav-item"> | | | <div class="lucid-nav-item"> |
| [[File:Lucid_Icon_OtherFactions.svg|180px|link=Other Factions]]
| | <div class="lucid-icon-circle lucid-icon-others"></div> |
| <br /><span class="lucid-label-strong">[[Other Factions|Other Factions]]</span>
| | <br /><span class="lucid-label-strong">[[Others|Others]]</span> |
| </div>
| |
| |-
| |
| | <div class="lucid-nav-item lucid-placeholder">
| |
| [[File:Lucid_Icon_FutureSlot.svg|130px]]
| |
| <br /><span class="lucid-label-soft">Future Village</span>
| |
| </div>
| |
| | <div class="lucid-nav-item lucid-placeholder">
| |
| [[File:Lucid_Icon_FutureSlot.svg|130px]]
| |
| <br /><span class="lucid-label-soft">Future Department</span>
| |
| </div>
| |
| | <div class="lucid-nav-item lucid-placeholder">
| |
| [[File:Lucid_Icon_FutureSlot.svg|130px]]
| |
| <br /><span class="lucid-label-soft">Future Faction</span>
| |
| </div> | | </div> |
| |} | | |} |
| |} | | |} |