/* ============================================================ NEFERON web theme — charcoal & gold (matches launcher assets) Layered on top of templates/tibiacom/basic.css. Do not edit basic.css. ============================================================ */ :root { --nf-bg: #0e0e10; --nf-bg2: #16151a; --nf-card: #1b1915; --nf-card2: #211e17; --nf-border: #3a3223; --nf-gold: #c89b4b; --nf-gold-hi: #e8c87e; --nf-gold-dim: #8a6d33; --nf-text: #d8cfb8; --nf-text-dim: #a89a7c; --nf-link: #d9b25f; --nf-link-hover: #f2d489; } /* ---------- base ---------- */ /* page background is set on further down (canvas propagation) */ body { color: var(--nf-text); } a { color: var(--nf-link); transition: color .18s ease, text-shadow .18s ease; } a:hover { color: var(--nf-link-hover); text-shadow: 0 0 8px rgba(200,155,75,.55); } /* ---------- logo / header ---------- */ #TibiaLogoArtworkTop { filter: drop-shadow(0 0 14px rgba(200,155,75,.35)); animation: nf-logo-glow 4s ease-in-out infinite; } #LogoLink, #TibiaLogoArtworkBottom { display: none; } @keyframes nf-logo-glow { 0%, 100% { filter: drop-shadow(0 0 10px rgba(200,155,75,.30)); } 50% { filter: drop-shadow(0 0 22px rgba(232,200,126,.60)); } } /* ---------- left menu: cards + hover effects ---------- */ #Loginbox, #Menu { background: rgba(20,18,14,.88) !important; border: 1px solid var(--nf-border) !important; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.55), inset 0 0 0 1px rgba(200,155,75,.08); overflow: hidden; } #LoginTop, #MenuTop, #LoginBottom, #LoginButtonContainer { background: none !important; } #BorderLeft, #BorderRight, .LoginBorder { background: none !important; width: 0 !important; } .Loginstatus { background: #141210 !important; border-bottom: 1px solid #2a251a; } .LoginstatusText { filter: brightness(1.15) sepia(.25) saturate(1.4) hue-rotate(-8deg); } #LoginButton { background: linear-gradient(180deg, #2b2415, #1a1509) !important; border: 1px solid var(--nf-border); border-radius: 6px; } #LoginButton:hover { box-shadow: 0 0 12px rgba(200,155,75,.45); } #MenuTop { border-bottom: 1px solid var(--nf-border); } .menuitem .MenuButton { background: none !important; } .menuitem .MenuButton > div > div.Button { background: none !important; } .menuitem .Icon, .menuitem .Label { filter: sepia(.35) saturate(1.3) hue-rotate(-10deg) brightness(1.05); transition: filter .2s ease; } .menuitem:hover .Icon, .menuitem:hover .Label { filter: sepia(.2) saturate(1.7) hue-rotate(-5deg) brightness(1.35) drop-shadow(0 0 6px rgba(200,155,75,.6)); } .menuitem .Lights img, .light_lu, .light_ld, .light_ru { filter: hue-rotate(35deg) saturate(2.2) brightness(1.2); } .Submenu { background: rgba(16,14,11,.92) !important; border-bottom: 1px solid rgba(200,155,75,.15); } .Submenuitem { transition: background .15s ease, padding-left .15s ease; } .Submenuitem:hover { background: linear-gradient(90deg, rgba(200,155,75,.14), transparent) !important; padding-left: 4px; } .SubmenuitemLabel { color: var(--nf-text) !important; } .Submenuitem:hover .SubmenuitemLabel { color: var(--nf-gold-hi) !important; } .LeftChain, .RightChain { background: none !important; } #ActiveSubmenuItemIcon_news, .ActiveSubmenuItemIcon { filter: sepia(1) saturate(3) hue-rotate(5deg) brightness(1.4); } /* ---------- content boxes: modern cards ---------- */ .Box { background: linear-gradient(180deg, var(--nf-card), var(--nf-card2)) !important; border: 1px solid var(--nf-border); border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,.6), inset 0 1px 0 rgba(232,200,126,.07); margin-bottom: 18px; } .Box .Corner-tl, .Box .Corner-tr, .Box .CornerWrapper-b .Corner-bl, .Box .CornerWrapper-b .Corner-br { background: none !important; width: 0 !important; height: 0 !important; } .Box .Border_1, .Box .Border_2, .Box .Border_3, .Box .BorderTitleText { background: none !important; } .Box .Border_3 { padding: 4px !important; } .BoxContent { /* carved-stone tile derived from the logo plate */ background: url('../images/content/neferon-stone.jpg') repeat !important; border-radius: 6px; color: var(--nf-text); padding: 12px !important; } .BoxContent, .BoxContent td, .BoxContent div { color: var(--nf-text); } /* headline banner: the generated title gif is replaced by a real

(see index.php). Hidden outright — visibility:hidden still reserved its full width and pushed the page sideways on phones. / img.Title, .Box img.Title { display: none !important; } .nf-page-title { margin: 0; padding: 14px 14px 10px; font: bold 17px/1.25 'Cinzel', Georgia, serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--nf-gold-hi); text-shadow: 0 1px 4px rgba(0,0,0,.8); } .nf-page-title::after { content: ''; display: block; margin-top: 8px; height: 1px; background: linear-gradient(90deg, rgba(200,155,75,.6), transparent); } / news headline: basic.css absolutely-positions the date/text, which overflows any narrow column. Put it back in flow. / .Content #News .NewsHeadlineBackground { display: flex; align-items: center; gap: 8px; height: auto !important; min-height: 28px; padding: 6px 10px; box-sizing: border-box; } .Content #News .NewsHeadlineIcon { position: static !important; flex: 0 0 auto; top: auto !important; left: auto !important; } .Content #News .NewsHeadlineDate { position: static !important; flex: 0 0 auto; top: auto !important; left: auto !important; width: auto !important; white-space: nowrap; } .Content #News .NewsHeadlineText { position: static !important; flex: 1 1 auto; top: auto !important; left: auto !important; width: auto !important; min-width: 0; } .Box .BorderTitleText { display: block; background: none !important; } .Box img.Title + .Border_2 .Border_3::before { content: ''; } / ---------- news ---------- / .NewsHeadline { border-radius: 6px; overflow: hidden; margin-bottom: 2px; } .NewsHeadlineBackground { background: linear-gradient(90deg, #241c0e 0%, #3a2d15 45%, #241c0e 100%) !important; border: 1px solid var(--nf-border); } .NewsHeadlineText, .NewsHeadlineDate { color: var(--nf-gold-hi) !important; text-shadow: 0 1px 2px #000; font-weight: bold; letter-spacing: .4px; } / news category icons: the stock Tibia gifs are replaced with gold CSS masks, picked by the icon number already present in the src / .NewsHeadlineIcon { width: 18px !important; height: 18px !important; background: linear-gradient(180deg, var(--nf-gold-hi), var(--nf-gold)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: var(--nf-i-news); mask-image: var(--nf-i-news); filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); } .NewsHeadlineIcon[src="icon_1"] { -webkit-mask-image: var(--nf-i-community); mask-image: var(--nf-i-community); } .NewsHeadlineIcon[src="icon_2"] { -webkit-mask-image: var(--nf-i-library); mask-image: var(--nf-i-library); } .NewsHeadlineIcon[src="icon_3"] { -webkit-mask-image: var(--nf-i-forum); mask-image: var(--nf-i-forum); } .NewsHeadlineIcon[src="icon_4"] { -webkit-mask-image: var(--nf-i-shops); mask-image: var(--nf-i-shops); } .NewsHeadlineIcon[src="icon_5"] { -webkit-mask-image: var(--nf-i-account); mask-image: var(--nf-i-account); } /* animated gold underline for news tables / .BoxContent table tr td { transition: background .15s ease; } .BoxContent table tr:hover td { background: rgba(200,155,75,.05); } / ---------- tables (highscores, characters, ...) ---------- / .myaac-table > tbody > tr:nth-child(odd) { background: #1e1a12 !important; } .myaac-table > tbody > tr:nth-child(even) { background: #241f15 !important; } .myaac-table > tbody > tr > td { color: var(--nf-text) !important; } .myaac-table > thead > tr > td, .myaac-table > thead > tr > th { background: linear-gradient(180deg, #4a3a1a, #33280f) !important; color: var(--nf-gold-hi) !important; text-shadow: 0 1px 2px #000; } .TableContent { border-color: var(--nf-border) !important; } .TableContent tr { transition: background .15s ease; } .TableContent tr:hover { background: rgba(200,155,75,.07) !important; } .TableContentContainer table, .TableContent td { color: var(--nf-text) !important; } .LabelV, .TableContentContainer .LabelV span { color: var(--nf-gold) !important; } / forms / input[type=text], input[type=password], input[type=email], select, textarea { background: #12100c !important; border: 1px solid var(--nf-border) !important; border-radius: 5px; color: var(--nf-gold-hi) !important; padding: 4px 6px; transition: border-color .18s ease, box-shadow .18s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--nf-gold) !important; box-shadow: 0 0 10px rgba(200,155,75,.35) !important; } .BigButton, .BigButtonOver { background: linear-gradient(180deg, #2e2513, #1a1509) !important; border: 1px solid var(--nf-gold-dim); border-radius: 6px; } .BigButton { transition: box-shadow .18s ease, transform .12s ease; } .BigButton:hover { box-shadow: 0 0 14px rgba(200,155,75,.5); transform: translateY(-1px); } .BigButtonText { color: var(--nf-gold-hi) !important; text-shadow: 0 1px 2px #000; } .OptionContainer label { color: var(--nf-text); } / ---------- right column widgets ---------- / #PlayersOnline { color: var(--nf-gold-hi) !important; text-shadow: 0 1px 3px #000; } #PlayersOnline span { color: #7fc97f !important; } #Monster { filter: sepia(.25) saturate(1.2) drop-shadow(0 0 8px rgba(200,155,75,.35)); } .Themebox { border-radius: 8px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.5); } .top_level a, .topfont { color: var(--nf-gold-hi) !important; } / ---------- footer ---------- / #Footer { background: linear-gradient(180deg, rgba(20,17,12,0), rgba(12,10,7,.9) 40%) !important; color: var(--nf-text-dim) !important; border-top: 1px solid rgba(200,155,75,.2); } / ---------- outfit images: fix broken absolute positioning ---------- / .BoxContent img[src="outfit.php"], .BoxContent img[src="outfit_images"], td img[src="outfit"] { position: static !important; margin: 0 auto !important; display: block; height: 56px !important; width: auto !important; image-rendering: pixelated; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(200,155,75,.25)); transition: transform .18s ease, filter .18s ease; } .BoxContent img[src="outfit.php"]:hover, .BoxContent img[src="outfit"]:hover { transform: scale(1.12); filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(232,200,126,.55)); } /* item icons (equipment/inventory on character page) / .BoxContent img[src="item_images"], .BoxContent img[src="images/items"] { image-rendering: pixelated; border-radius: 4px; background: rgba(0,0,0,.35); border: 1px solid var(--nf-border); transition: border-color .18s ease, box-shadow .18s ease; } .BoxContent img[src="item_images"]:hover, .BoxContent img[src="images/items"]:hover { border-color: var(--nf-gold); box-shadow: 0 0 10px rgba(200,155,75,.4); } / ---------- right column widgets: full card style ---------- / #ThemeboxesColumn .Themebox { background: linear-gradient(180deg, var(--nf-card), var(--nf-card2)) !important; border: 1px solid var(--nf-border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(232,200,126,.07); padding: 10px 8px; margin-bottom: 14px; transition: border-color .2s ease, box-shadow .2s ease; } #ThemeboxesColumn .Themebox:hover { border-color: var(--nf-gold-dim); box-shadow: 0 10px 34px rgba(0,0,0,.7), 0 0 16px rgba(200,155,75,.18); } #Topbar, #NewcomerBox, #GalleryBox { background-image: none !important; } #Topbar .top_level { position: static !important; height: auto !important; width: 100% !important; padding: 6px 4px !important; text-align: center; background: none !important; } #Topbar .top_level div { position: static !important; } #ThemeboxesColumn .Themebox .Bottom, #ThemeboxesColumn .Themebox .ThemeboxButton { background-image: none !important; } .ThemeboxButton .ButtonText { color: var(--nf-gold-hi) !important; text-shadow: 0 1px 2px #000; } .ThemeboxButton { display: block; text-align: center; background: linear-gradient(180deg, #2e2513, #1a1509) !important; border: 1px solid var(--nf-gold-dim); border-radius: 6px; transition: box-shadow .18s ease; } .ThemeboxButton:hover { box-shadow: 0 0 14px rgba(200,155,75,.5); } / pedestal / players online / #PedestalAndOnline { filter: brightness(.9) sepia(.25) saturate(1.3); } #PlayersOnline { background: radial-gradient(circle at 50% 30%, rgba(200,155,75,.14), transparent 70%); border-radius: 8px; animation: nf-players 3.5s ease-in-out infinite; } @keyframes nf-players { 0%, 100% { box-shadow: 0 0 6px rgba(200,155,75,.15); } 50% { box-shadow: 0 0 18px rgba(232,200,126,.45); } } / monster of the week / #Monster { filter: sepia(.2) saturate(1.25) drop-shadow(0 0 10px rgba(200,155,75,.4)); transition: transform .2s ease, filter .2s ease; } #Monster:hover { transform: scale(1.08); filter: sepia(.1) saturate(1.5) drop-shadow(0 0 16px rgba(232,200,126,.6)); } / gallery screenshot of the day / #GalleryContent { border-radius: 8px; border: 1px solid var(--nf-border); filter: brightness(.92) sepia(.15); transition: filter .2s ease, box-shadow .2s ease; } #GalleryContent:hover { filter: brightness(1.05); box-shadow: 0 0 16px rgba(200,155,75,.35); } / ---------- misc effects ---------- / ::selection { background: rgba(200,155,75,.4); color: #fff; } .WhiteTable .TableContent td, td[class='Table'] { color: var(--nf-text); } .gamewindow, .Text, .CaptionVerticalLeft, .CaptionVerticalRight { filter: none !important; } .Text { color: var(--nf-gold-hi) !important; text-shadow: 0 1px 2px #000; } .CaptionContainer img { filter: sepia(.5) saturate(2) brightness(1.15); } /* error / success message boxes / .alert-error, .error_box { background: #2a1512 !important; border: 1px solid #5a2018 !important; color: #e8a090 !important; border-radius: 6px; } .alert-success, .success_box { background: #16220f !important; border: 1px solid #2f4a1a !important; color: #a8d88a !important; border-radius: 6px; } / shimmer sweep on the news headline (subtle, GPU-cheap) / .NewsHeadlineBackground { position: relative; overflow: hidden; } .NewsHeadlineBackground::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(232,200,126,.16), transparent); animation: nf-shimmer 5.5s ease-in-out infinite; } @keyframes nf-shimmer { 0% { left: -60%; } 55% { left: 130%; } 100% { left: 130%; } } @media (prefers-reduced-motion: reduce) { .NewsHeadlineBackground::after, #TibiaLogoArtworkTop { animation: none; } } / ============================================================ NEFERON — Phase 1: hero, top-3 card, de-branding ============================================================ / / ---------- shared atoms ---------- / .nf-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; margin-left: 5px; flex: 0 0 auto; } .nf-dot.is-online { background: #7fc97f; box-shadow: 0 0 6px rgba(127,201,127,.8); } .nf-dot.is-offline { background: #6a5f4a; } .nf-btn { display: inline-block; padding: 9px 20px; font: bold 12px/1 Verdana, Geneva, sans-serif; letter-spacing: .6px; text-transform: uppercase; border-radius: 6px; text-decoration: none !important; transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease; } .nf-btn-primary { background: linear-gradient(180deg, #6b4f1c, #3a2a0d); border: 1px solid var(--nf-gold); color: #f6e3b4 !important; box-shadow: 0 2px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(232,200,126,.28); } .nf-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(200,155,75,.5), inset 0 1px 0 rgba(232,200,126,.4); } .nf-btn-ghost { background: rgba(255,255,255,.02); border: 1px solid var(--nf-border); color: var(--nf-text) !important; } .nf-btn-ghost:hover { border-color: var(--nf-gold-dim); color: var(--nf-gold-hi) !important; box-shadow: 0 0 14px rgba(200,155,75,.22); } / ---------- hero ---------- / .nf-hero { position: relative; overflow: hidden; margin: 0 0 18px; padding: 26px 24px 22px; background: radial-gradient(120% 90% at 50% -20%, rgba(200,155,75,.13), transparent 62%), linear-gradient(180deg, #1a1712, #121014 78%); border: 1px solid var(--nf-border); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.62), inset 0 1px 0 rgba(232,200,126,.09); } .nf-hero::before, .nf-hero::after { content: ''; position: absolute; left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,155,75,.55), transparent); } .nf-hero::before { top: 0; } .nf-hero::after { bottom: 0; } .nf-hero-glow { position: absolute; inset: -40% 20% auto; height: 220px; background: radial-gradient(closest-side, rgba(232,200,126,.16), transparent); pointer-events: none; animation: nf-hero-breathe 7s ease-in-out infinite; } @keyframes nf-hero-breathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } } .nf-hero-main { position: relative; text-align: center; } .nf-hero-kicker { margin: 0 0 6px; font: 10px/1 Verdana, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: var(--nf-gold); opacity: .85; } .nf-hero-title { margin: 0 0 10px; font: bold 30px/1.1 'Cinzel', Georgia, 'Times New Roman', serif; letter-spacing: 2.5px; text-transform: uppercase; background: linear-gradient(180deg, #f4dda6 0%, #c89b4b 55%, #7a5a1e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--nf-gold-hi); text-shadow: 0 2px 18px rgba(200,155,75,.28); } .nf-hero-tagline { max-width: 520px; margin: 0 auto 18px; font: 12px/1.7 Verdana, Geneva, sans-serif; color: var(--nf-text-dim); } .nf-hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; } .nf-hero-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid var(--nf-border); font: 11px/1 Verdana, sans-serif; color: var(--nf-text-dim); } .nf-hero-status strong { color: var(--nf-gold-hi); } .nf-hero-status.is-offline strong { color: #d08070; } .nf-hero-uptime { opacity: .7; } .nf-hero-stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(200,155,75,.18); } .nf-stat { text-align: center; padding: 6px 4px; } .nf-stat + .nf-stat { box-shadow: inset 1px 0 0 rgba(200,155,75,.10); } .nf-stat-value { display: block; font: bold 21px/1.1 'Cinzel', Georgia, serif; color: var(--nf-gold-hi); text-shadow: 0 1px 6px rgba(200,155,75,.35); } .nf-stat-value.nf-stat-sm { font-size: 13px; letter-spacing: .5px; } .nf-stat-label { display: block; margin-top: 4px; font: 9px/1 Verdana, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--nf-text-dim); } @media (max-width: 760px) { .nf-hero-title { font-size: 28px; letter-spacing: 2px; } .nf-hero-stats { grid-template-columns: repeat(2, 1fr); } } / right-column width is set by the flex shell above (#ContentRow) / / ---------- server status card (replaces the CipSoft pedestal artwork) ---------- / #RightArtwork.nf-status-card { position: relative !important; width: auto !important; height: auto !important; margin: 0 0 14px !important; padding: 14px 10px 12px; background: linear-gradient(180deg, var(--nf-card), var(--nf-card2)); border: 1px solid var(--nf-border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(232,200,126,.07); text-align: center; overflow: visible; } .nf-status-brand { display: flex; align-items: center; justify-content: center; height: 84px; margin-bottom: 10px; text-decoration: none !important; } #RightArtwork #BrandIcon { position: static !important; top: auto !important; left: auto !important; height: 80px; width: auto; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 0 0 1px rgba(232,200,126,.22); transition: transform .15s ease, box-shadow .15s ease; } .nf-status-brand:hover #BrandIcon { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(232,200,126,.45); } .nf-status-body { position: static !important; display: block; padding: 8px 6px 4px; border-top: 1px solid rgba(200,155,75,.18); text-decoration: none !important; } .nf-status-count { display: block; font: bold 30px/1 'Cinzel', Georgia, serif; color: var(--nf-gold-hi); text-shadow: 0 2px 12px rgba(200,155,75,.45); } .nf-status-count.nf-status-off { color: #8a6d5a; text-shadow: none; } .nf-status-label { display: block; margin-top: 5px; font: 9px/1 Verdana, sans-serif; letter-spacing: 1.3px; text-transform: uppercase; color: var(--nf-text-dim); } .nf-status-body.is-online:hover .nf-status-count { text-shadow: 0 2px 20px rgba(232,200,126,.75); } / the old absolutely-positioned pedestal furniture is gone / #PedestalAndOnline, #PlayersOnline { display: none !important; } / ---------- top 3 highscores card ---------- / .nf-top3 { padding: 0 !important; overflow: hidden; } .nf-top3-head { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 12px 9px; background: linear-gradient(180deg, rgba(200,155,75,.14), transparent); border-bottom: 1px solid rgba(200,155,75,.22); } .nf-top3-title { font: bold 12px/1 'Cinzel', Georgia, serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--nf-gold-hi); text-shadow: 0 1px 4px rgba(0,0,0,.8); } .nf-top3-all { font: 10px/1 Verdana, sans-serif; color: var(--nf-text-dim) !important; text-decoration: none !important; } .nf-top3-all:hover { color: var(--nf-gold-hi) !important; } .nf-top3-list { list-style: none; margin: 0; padding: 4px; } .nf-top3-row + .nf-top3-row { border-top: 1px solid rgba(200,155,75,.10); } .nf-top3-link { display: flex; align-items: center; gap: 5px; padding: 8px 4px; text-decoration: none !important; border-radius: 6px; transition: background .16s ease; } .nf-top3-link:hover { background: linear-gradient(90deg, rgba(200,155,75,.12), transparent); } .nf-top3-rank { flex: 0 0 14px; text-align: center; font: bold 15px/1 'Cinzel', Georgia, serif; color: var(--nf-gold-dim); } .nf-rank-1 .nf-top3-rank { color: #f0d288; text-shadow: 0 0 10px rgba(240,210,136,.6); } .nf-rank-2 .nf-top3-rank { color: #c9c9d2; text-shadow: 0 0 8px rgba(201,201,210,.4); } .nf-rank-3 .nf-top3-rank { color: #c08a52; text-shadow: 0 0 8px rgba(192,138,82,.4); } .nf-top3-avatar { flex: 0 0 34px; height: 44px; display: flex; align-items: flex-end; justify-content: center; } / override the global outfit rule — inside the card these must stay inline / .nf-top3-avatar img { position: static !important; margin: 0 !important; max-height: 44px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 2px 4px rgba(0,0,0,.8)); transition: transform .18s ease; } .nf-top3-link:hover .nf-top3-avatar img { transform: scale(1.1) translateY(-1px); } .nf-top3-info { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .nf-top3-name { display: flex; align-items: center; font: bold 11px/1.2 Verdana, sans-serif; color: var(--nf-gold-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nf-top3-meta { font: 10px/1.2 Verdana, sans-serif; color: var(--nf-text-dim); } .nf-top3-empty { padding: 22px 12px; text-align: center; font: 11px/1.6 Verdana, sans-serif; color: var(--nf-text-dim); } / legacy Topbar rules from the old widget no longer apply / #Topbar { display: none; } / ---------- news drop caps ---------- letters/A-Z.gif are regenerated Neferon gold caps (PNG data under the .gif names MyAAC hardcodes), so no colour filtering is needed. / .BoxContent img[src="/letters/"] { height: 32px; width: auto; float: left; margin: -2px 4px 0 0; filter: drop-shadow(0 1px 3px rgba(0,0,0,.8)); } /* ============================================================ LEFT COLUMN — logo, login box, menu. The legacy markup drew every label, icon, chain and bevel as a beige Tibia.com gif. All of those are neutralised here and redrawn in CSS/SVG. ============================================================ / / ---------- logo — full-width header band ---------- / #LeftArtwork { display: none !important; } / ============================================================ PAGE SHELL — the legacy layout absolutely-positions all three columns inside a fixed-height row, so an expanded menu (or any tall sidebar) overflows the row, escapes the background and collides with the centre column. Put the columns back in flow. ============================================================ / / basic.css caps the shell at 1200px, which leaves both sidebars hugging the centre on anything wider. Use the viewport. / html, body { min-width: 0 !important; } #Bodycontainer { display: block !important; height: auto !important; min-width: 0 !important; max-width: 1560px !important; width: 100% !important; padding: 0 clamp(12px, 3vw, 40px); box-sizing: border-box; } #ContentRow { position: relative !important; top: 0 !important; / basic.css reserved 155px for the old logo art / display: flex !important; align-items: flex-start; gap: clamp(16px, 2.2vw, 32px); padding: 0 0 48px; box-sizing: border-box; } #MenuColumn { position: static !important; flex: 0 0 200px; width: 200px !important; margin: 0 !important; } #ContentColumn { position: static !important; flex: 1 1 auto; min-width: 0; / let wide tables shrink instead of pushing the sidebar / margin: 0 !important; } #ThemeboxesColumn { position: static !important; flex: 0 0 250px; width: 250px !important; margin: 0 !important; } / Background lives on with a fixed attachment, NOT on #ArtworkHelper. Painting it on the div means the div has to match the document height exactly — any content taller than it (an expanded menu, a long table) scrolls onto bare black. Fixed attachment always covers the viewport, whatever the document height is. / / Background is a single fixed LAYER, not background-attachment:fixed. Fixed attachment forces the browser to re-rasterise the whole background on every scroll frame; on large images that flashes black mid-repaint, which is exactly the artefact seen while scrolling. A fixed-position pseudo-element composites on its own layer instead: no repaint, no flash, and it always covers the viewport however tall the document gets. / html { background: #0b0a0c !important; } body { height: auto !important; min-height: 100%; background: transparent !important; } body::before { content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none; background-color: #0b0a0c; background-image: url('../images/header/neferon-artwork.jpg'), linear-gradient(180deg, #17130e 0%, #0f0e10 45%, #0b0a0c 100%); background-repeat: no-repeat, no-repeat; background-position: center top, center top; background-size: 100% auto, cover; } / ---------- drifting smoke ---------- Three soft warm masses on their own fixed, composited layer. Animated with transform only (no layout, no repaint) so it costs a GPU composite per frame and nothing else. / body::after { content: ''; position: fixed; inset: -25%; z-index: -2; pointer-events: none; background-image: radial-gradient(38% 30% at 20% 32%, rgba(200,155,75,.075), transparent 70%), radial-gradient(32% 26% at 78% 20%, rgba(232,200,126,.060), transparent 70%), radial-gradient(46% 34% at 56% 74%, rgba(140,103,37,.070), transparent 72%), radial-gradient(28% 22% at 38% 58%, rgba(200,155,75,.045), transparent 72%); filter: blur(30px); will-change: transform; animation: nf-smoke 52s ease-in-out infinite alternate; } @keyframes nf-smoke { 0% { transform: translate3d(-3%, 1%, 0) scale(1.00) rotate(0deg); } 35% { transform: translate3d( 2%, -2%, 0) scale(1.10) rotate(1.2deg); } 70% { transform: translate3d( 4%, 2%, 0) scale(1.05) rotate(-0.8deg); } 100% { transform: translate3d(-2%, -1%, 0) scale(1.12) rotate(0.6deg); } } / ---------- rising embers ---------- Two dot fields at different scales/speeds for parallax. The tile repeats, so translating it by exactly one tile height loops seamlessly. / #ArtworkHelper::before, #ArtworkHelper::after { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 100%; z-index: -2; pointer-events: none; will-change: transform; } #ArtworkHelper::before { background-image: radial-gradient(2px 2px at 12% 18%, rgba(232,200,126,.55), transparent 60%), radial-gradient(1.5px 1.5px at 34% 62%, rgba(200,155,75,.45), transparent 60%), radial-gradient(2px 2px at 58% 30%, rgba(244,221,166,.40), transparent 60%), radial-gradient(1.5px 1.5px at 77% 74%, rgba(200,155,75,.50), transparent 60%), radial-gradient(2px 2px at 91% 44%, rgba(232,200,126,.35), transparent 60%); background-size: 620px 620px; background-repeat: repeat; animation: nf-embers-a 38s linear infinite; } #ArtworkHelper::after { background-image: radial-gradient(1.5px 1.5px at 22% 40%, rgba(232,200,126,.40), transparent 60%), radial-gradient(1px 1px at 47% 12%, rgba(200,155,75,.45), transparent 60%), radial-gradient(1.5px 1.5px at 68% 84%, rgba(244,221,166,.30), transparent 60%), radial-gradient(1px 1px at 85% 26%, rgba(200,155,75,.40), transparent 60%); background-size: 420px 420px; background-repeat: repeat; opacity: .75; animation: nf-embers-b 26s linear infinite; } @keyframes nf-embers-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(14px, -620px, 0); } } @keyframes nf-embers-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-10px, -420px, 0); } } @media (prefers-reduced-motion: reduce) { body::after, #ArtworkHelper::before, #ArtworkHelper::after, #NeferonLogo img, .nf-hero-glow, #PlayersOnline, .NewsHeadlineBackground::after { animation: none !important; } / transitions too — hover lifts and glows are motion as well / { transition-duration: .01ms !important; } } /* the effect is decorative; skip the compositing cost on phones / @media (max-width: 720px) { #ArtworkHelper::after { display: none; } body::after { filter: blur(22px); animation-duration: 70s; } } / the banner now lives on body::before; this element just holds layout / #ArtworkHelper { min-width: 0 !important; / basic.css pins this at 1000px, which breaks every phone / min-height: 100%; height: auto !important; background: none !important; } / wide content (tables) must scroll inside the column, never widen the page / #ContentColumn .BoxContent { overflow-x: auto; } #NeferonHeader { display: block; padding: 26px 0 10px; text-align: center; } #NeferonLogo { display: block; text-decoration: none !important; } #NeferonLogo picture { display: block; } #NeferonLogo img { display: block; margin: 0 auto; width: min(620px, 66vw); height: auto; filter: drop-shadow(0 8px 26px rgba(0,0,0,.8)); animation: nf-logo-glow 5s ease-in-out infinite; transition: filter .35s ease, transform .35s ease; } #NeferonLogo:hover img { transform: translateY(-2px); } .nf-logo-tagline { display: block; margin-top: 12px; font: 11px/1 Verdana, Geneva, sans-serif; letter-spacing: 5.5px; text-transform: uppercase; color: var(--nf-text-dim); } @keyframes nf-logo-glow { 0%, 100% { filter: drop-shadow(0 10px 34px rgba(0,0,0,.75)) drop-shadow(0 0 14px rgba(200,155,75,.20)); } 50% { filter: drop-shadow(0 10px 34px rgba(0,0,0,.75)) drop-shadow(0 0 30px rgba(232,200,126,.45)); } } / legacy header furniture / #Statue_1, #Statue_2, #LogoLink, #TibiaLogoArtworkTop, #TibiaLogoArtworkBottom { display: none !important; } / ---------- login box ---------- / #Loginbox.nf-loginbox { position: static !important; width: auto !important; height: auto !important; padding: 14px 12px !important; margin-bottom: 14px; background: linear-gradient(180deg, var(--nf-card), var(--nf-card2)) !important; border: 1px solid var(--nf-border) !important; border-radius: 10px; text-align: center; } .nf-login-state { position: static !important; width: auto !important; height: auto !important; background: none !important; font: 10px/1.4 Verdana, sans-serif; letter-spacing: .6px; color: var(--nf-text-dim); margin-bottom: 10px; } .nf-login-btn { position: static !important; float: none !important; width: auto !important; height: auto !important; display: block; padding: 9px 12px !important; margin-bottom: 8px; } .nf-login-btn #ButtonText { position: static !important; display: inline; width: auto !important; height: auto !important; background: none !important; color: inherit; } .nf-login-alt { position: static !important; display: inline-block; width: auto !important; height: auto !important; background: none !important; font: 10px/1 Verdana, sans-serif; color: var(--nf-text-dim) !important; text-decoration: none !important; padding: 2px 4px; } .nf-login-alt:hover { color: var(--nf-gold-hi) !important; text-shadow: 0 0 8px rgba(200,155,75,.5); } #LoginTop, #LoginBottom, #BorderLeft, #BorderRight, .LoginBorder { display: none !important; } / ---------- menu shell ---------- / #Menu { position: static !important; padding: 6px !important; background: linear-gradient(180deg, var(--nf-card), var(--nf-card2)) !important; border: 1px solid var(--nf-border) !important; border-radius: 10px; } #MenuTop, #MenuBottom { display: none !important; } .menuitem { margin-bottom: 2px; } / category button / .MenuButton.nf-menu-btn { position: relative; height: auto !important; width: auto !important; background: none !important; border-radius: 7px; transition: background .18s ease; } .MenuButton.nf-menu-btn > div { display: flex; align-items: center; gap: 9px; height: auto !important; padding: 9px 9px; cursor: pointer; } .MenuButton.nf-menu-btn:hover { background: linear-gradient(90deg, rgba(200,155,75,.14), rgba(200,155,75,.02)); } .MenuButton.nf-menu-btn .Button { display: none !important; } .menuitem .Lights, .light_lu, .light_ld, .light_ru { display: none !important; } / gold engraved icons, drawn as CSS masks — no gif files / .Icon.nf-icon { position: static !important; flex: 0 0 18px; width: 18px !important; height: 18px !important; background: linear-gradient(180deg, var(--nf-gold-hi), var(--nf-gold)) !important; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); transition: filter .2s ease; } .menuitem:hover .Icon.nf-icon { filter: drop-shadow(0 0 6px rgba(232,200,126,.75)); } / scroll / #news_Icon.nf-icon { -webkit-mask-image: var(--nf-i-news); mask-image: var(--nf-i-news); } / key / #account_Icon.nf-icon { -webkit-mask-image: var(--nf-i-account); mask-image: var(--nf-i-account); } / crossed swords + shield / #community_Icon.nf-icon { -webkit-mask-image: var(--nf-i-community); mask-image: var(--nf-i-community); } / speech scroll / #forum_Icon.nf-icon { -webkit-mask-image: var(--nf-i-forum); mask-image: var(--nf-i-forum); } / open book / #library_Icon.nf-icon { -webkit-mask-image: var(--nf-i-library); mask-image: var(--nf-i-library); } / coin pouch / #shops_Icon.nf-icon { -webkit-mask-image: var(--nf-i-shops); mask-image: var(--nf-i-shops); } :root { --nf-i-news: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M5 3h11a2 2 0 0 1 2 2v13a3 3 0 0 0 3 3H7a3 3 0 0 1-3-3V4a1 1 0 0 1 1-1zm2 4h7v2H7V7zm0 4h7v2H7v-2zm0 4h5v2H7v-2z'/%3E%3C/svg%3E"); --nf-i-account: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M14.5 2a6.5 6.5 0 1 0-5.9 9.3L3 17v5h5v-2.5h2.5V17H13l1.6-1.6A6.5 6.5 0 0 0 14.5 2zm1.7 6.2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E"); --nf-i-community: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2 4 5v6.5c0 5 3.4 9.2 8 10.5 4.6-1.3 8-5.5 8-10.5V5l-8-3zm0 3.2 5 1.9v4.4c0 3.5-2.1 6.6-5 7.7-2.9-1.1-5-4.2-5-7.7V7.1l5-1.9z'/%3E%3C/svg%3E"); --nf-i-forum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20 2H4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h3v5l5-5h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM7 8h10v2H7V8zm0 4h7v2H7v-2z'/%3E%3C/svg%3E"); --nf-i-library: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 5.5C10.3 4.2 7.9 3.5 5 3.5c-1 0-2 .1-3 .3v15c1-.2 2-.3 3-.3 2.9 0 5.3.7 7 2 1.7-1.3 4.1-2 7-2 1 0 2 .1 3 .3v-15c-1-.2-2-.3-3-.3-2.9 0-5.3.7-7 2zm-1 12.1c-1.6-.8-3.6-1.2-6-1.2V5.6c2.4 0 4.4.4 6 1.2v10.8zm2 0V6.8c1.6-.8 3.6-1.2 6-1.2v10.8c-2.4 0-4.4.4-6 1.2z'/%3E%3C/svg%3E"); --nf-i-shops: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9 4h6l1.5 3H21l-2 14H5L3 7h4.5L9 4zm.8 3h4.4l-.5-1h-3.4l-.5 1zM12 10a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'/%3E%3C/svg%3E"); } / label — real text now / .Label.nf-label { position: static !important; flex: 1 1 auto; width: auto !important; height: auto !important; background: none !important; font: bold 13px/1.15 'Cinzel', Georgia, serif; letter-spacing: 1.1px; color: var(--nf-text); text-shadow: 0 1px 2px rgba(0,0,0,.85); transition: color .18s ease, text-shadow .18s ease; text-align: left; } .menuitem:hover .Label.nf-label { color: var(--nf-gold-hi); text-shadow: 0 0 10px rgba(200,155,75,.55); } / +/- becomes a CSS chevron / .Extend.nf-extend { position: static !important; flex: 0 0 10px; width: 10px !important; height: 10px !important; background: none !important; border-right: 2px solid var(--nf-gold-dim); border-bottom: 2px solid var(--nf-gold-dim); transform: rotate(-45deg); margin-right: 3px; transition: transform .22s ease, border-color .18s ease; } .Extend.nf-extend.is-open { transform: rotate(45deg); } .menuitem:hover .Extend.nf-extend { border-color: var(--nf-gold-hi); } / submenu / .Submenu { background: none !important; border: 0 !important; padding: 2px 0 6px 8px; } .Submenuitem { display: flex; align-items: center; height: auto !important; padding: 5px 8px 5px 14px; background: none !important; border-left: 1px solid rgba(200,155,75,.20); border-radius: 0 6px 6px 0; transition: background .15s ease, border-color .15s ease; } .Submenuitem.is-hover, .Submenuitem:hover { background: linear-gradient(90deg, rgba(200,155,75,.15), transparent) !important; border-left-color: var(--nf-gold); } .SubmenuitemLabel { position: static !important; width: auto !important; height: auto !important; background: none !important; / basic.css underlines these in Tibia teal (#4B7874) / border: 0 !important; font: 11px/1.4 Verdana, Geneva, sans-serif; color: var(--nf-text-dim) !important; } .Submenuitem.is-hover .SubmenuitemLabel, .Submenuitem:hover .SubmenuitemLabel { color: var(--nf-gold-hi) !important; } .LeftChain, .RightChain { display: none !important; } .ActiveSubmenuItemIcon { position: static !important; flex: 0 0 5px; width: 5px !important; height: 5px !important; background: var(--nf-gold-hi) !important; border-radius: 50%; margin-right: 7px; box-shadow: 0 0 7px rgba(232,200,126,.9); } / ============================================================ CONTENT PAGES — links, filter panels, tables ============================================================ / / basic.css paints every content link Tibia blue (#004294) / .Content a { color: var(--nf-link) !important; } .Content a:hover { color: var(--nf-link-hover) !important; text-decoration: none !important; text-shadow: 0 0 8px rgba(200,155,75,.5); } .Content a span { color: inherit !important; } / highscores filter panels ("Choose a skill" / "Choose a vocation") / .Content select, .Content input[type=text], .Content input[type=password] { background: #12100c !important; border: 1px solid var(--nf-border) !important; border-radius: 5px; color: var(--nf-gold-hi) !important; padding: 4px 6px; } .Content label { color: var(--nf-text-dim); font: 11px/1.5 Verdana, sans-serif; } / the legacy skill/vocation side panels sit in floated boxes / .Content .Box .BoxContent ul, .Content .BoxContent ul { list-style: none; margin: 0; padding: 0; } .Content .BoxContent ul li a { display: block; padding: 3px 6px; border-radius: 4px; transition: background .15s ease; } .Content .BoxContent ul li a:hover { background: rgba(200,155,75,.12); } / ---------- DataTables (monsters, spells, houses, ...) ---------- / .dataTables_wrapper { color: var(--nf-text); } table.dataTable { border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; } table.dataTable thead th, table.dataTable thead td { background: linear-gradient(180deg, #4a3a1a, #2b2110) !important; color: var(--nf-gold-hi) !important; border-bottom: 1px solid var(--nf-border) !important; text-shadow: 0 1px 2px #000; } table.dataTable tbody tr, table.dataTable tbody tr.odd, table.dataTable tbody tr.even { background: transparent !important; } table.dataTable tbody tr.odd > td { background: #1e1a12 !important; } table.dataTable tbody tr.even > td { background: #241f15 !important; } table.dataTable tbody tr:hover > td { background: rgba(200,155,75,.10) !important; } table.dataTable tbody td { color: var(--nf-text) !important; border-top: 1px solid rgba(200,155,75,.07) !important; } table.dataTable tbody td a { color: var(--nf-link) !important; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { color: var(--nf-text-dim) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--nf-text-dim) !important; background: rgba(0,0,0,.3) !important; border: 1px solid var(--nf-border) !important; border-radius: 5px; margin: 0 2px; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.current { color: var(--nf-gold-hi) !important; background: linear-gradient(180deg, #4a3a1a, #2b2110) !important; border-color: var(--nf-gold-dim) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .35; } / myaac-table header row (.LabelH) ships beige from tables.style.html.twig / tr.LabelH, tr.LabelH > td, .myaac-table > thead > tr > td, .myaac-table > thead > tr > th { background: linear-gradient(180deg, #4a3a1a, #2b2110) !important; color: var(--nf-gold-hi) !important; font-weight: bold; text-shadow: 0 1px 2px #000; } tr.LabelH a { color: var(--nf-gold-hi) !important; } / form panels (create account, account management) are beige #D4C0A1 / .TableContentContainer, .TableContentContainer > table, .TableContent { background: rgba(0,0,0,.28) !important; color: var(--nf-text) !important; } .TableContentContainer td, .TableContentContainer div, .TableContentContainer span, .TableContentContainer label, .TableContent td { color: var(--nf-text) !important; } .TableContentContainer .LabelV, .TableContentContainer b { color: var(--nf-gold) !important; } / every form control, whatever basic.css says / #ContentColumn input:not([type=submit]):not([type=checkbox]):not([type=radio]), #ContentColumn select, #ContentColumn textarea { background: #12100c !important; border: 1px solid var(--nf-border) !important; border-radius: 5px !important; color: var(--nf-gold-hi) !important; padding: 5px 7px !important; } #ContentColumn input:focus, #ContentColumn select:focus, #ContentColumn textarea:focus { outline: none; border-color: var(--nf-gold) !important; box-shadow: 0 0 10px rgba(200,155,75,.35) !important; } #ContentColumn input[type=checkbox], #ContentColumn input[type=radio] { accent-color: var(--nf-gold); } / ---------- table caption bars (Search Character, Guilds, Houses, ...) ---------- basic.css paints these beige (#5F4D41) with corner/edge gif pieces. / .TableContainer .CaptionContainer, .TableContainer .CaptionContainer .CaptionInnerContainer { background: linear-gradient(180deg, #3b2f16, #241c0e) !important; border-radius: 6px 6px 0 0; } .TableContainer .CaptionContainer .CaptionInnerContainer { border: 1px solid var(--nf-border); border-bottom: 0; } .TableContainer .CaptionContainer .Text { color: var(--nf-gold-hi) !important; font: bold 11px/1.4 'Cinzel', Georgia, serif !important; letter-spacing: 1.1px; text-shadow: 0 1px 3px #000; } .TableContainer .CaptionContainer [class^="CaptionEdge"], .TableContainer .CaptionContainer [class^="CaptionBorder"], .TableContainer .CaptionContainer [class^="CaptionVertical"] { background-image: none !important; background-color: transparent !important; } .TableContainer .Table1, .TableContainer .Table2, .TableContainer .Table3, .TableContainer .Table4 { background: rgba(0,0,0,.25) !important; border: 1px solid var(--nf-border); border-radius: 0 0 6px 6px; } .TableContainer .Odd { background: #1e1a12 !important; } .TableContainer .Even { background: #241f15 !important; } / legacy sbutton.gif / sbutton_over.gif are set inline, so background-image must be forced off before the gradient below can show / .BigButton, .BigButtonOver, .Button, [style="sbutton"], [style="button-background"] { background-image: none !important; } .BigButtonOver { display: none !important; } .BigButton { display: inline-block !important; width: auto !important; height: auto !important; background: linear-gradient(180deg, #6b4f1c, #3a2a0d) !important; border: 1px solid var(--nf-gold); border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(232,200,126,.28); transition: box-shadow .18s ease, transform .12s ease; } .BigButton:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(200,155,75,.5); } input.BigButtonText, .BigButtonText { position: static !important; width: auto !important; height: auto !important; background: none !important; border: 0 !important; padding: 8px 20px !important; font: bold 11px/1 Verdana, sans-serif !important; letter-spacing: .8px; text-transform: uppercase; color: #f6e3b4 !important; cursor: pointer; } / country flags shipped as tiny gifs — mute them so they stop shouting / .Content img[src="flags/"] { opacity: .8; border-radius: 2px; image-rendering: pixelated; } /* table headers / rows / .Content table th, .Content table td.LabelV { color: var(--nf-gold-hi) !important; } / ---------- server info ---------- / .nf-info { display: grid; gap: 16px; padding: 2px; } .nf-info-block { background: linear-gradient(180deg, #1c1914, #16130f); border: 1px solid var(--nf-border); border-radius: 10px; overflow: hidden; } .nf-info-h { margin: 0; padding: 11px 14px; background: linear-gradient(180deg, #3b2f16, #241c0e); border-bottom: 1px solid rgba(200,155,75,.25); font: bold 12px/1.3 'Cinzel', Georgia, serif; letter-spacing: 1.3px; text-transform: uppercase; color: var(--nf-gold-hi); text-shadow: 0 1px 3px #000; } .nf-info-h3 { margin: 0 0 6px; font: bold 11px/1.2 'Cinzel', Georgia, serif; letter-spacing: 1px; text-transform: uppercase; color: var(--nf-gold); } .nf-info-grid { margin: 0; padding: 6px 14px 12px; display: grid; column-gap: 30px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .nf-info-grid > div { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(200,155,75,.09); } / dotted leader keeps label and value visually paired across the gap / .nf-info-grid > div::after { content: ''; order: 1; flex: 1 1 auto; height: 0; margin-bottom: 3px; border-bottom: 1px dotted rgba(200,155,75,.22); } .nf-info-grid dd { order: 2; } .nf-info-grid dt { font: 11px/1.4 Verdana, sans-serif; color: var(--nf-text-dim); } .nf-info-grid dd { margin: 0; text-align: right; white-space: nowrap; font: bold 12px/1.4 Verdana, sans-serif; color: var(--nf-gold-hi); } .nf-info-grid-tight { padding: 0; grid-template-columns: 1fr; column-gap: 0; } .nf-rate-grid { display: grid; gap: 1px; padding: 14px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } .nf-rate { text-align: center; padding: 8px 4px; } .nf-rate + .nf-rate { box-shadow: inset 1px 0 0 rgba(200,155,75,.10); } .nf-rate-v { display: block; font: bold 22px/1.1 'Cinzel', Georgia, serif; color: var(--nf-gold-hi); text-shadow: 0 1px 6px rgba(200,155,75,.35); } .nf-rate-l { display: block; margin-top: 4px; font: 9px/1 Verdana, sans-serif; letter-spacing: 1.3px; text-transform: uppercase; color: var(--nf-text-dim); } .nf-info-note { margin: 0; padding: 0 14px 12px; font: 11px/1.5 Verdana, sans-serif; color: var(--nf-text-dim); } .nf-frag-tables { display: grid; gap: 14px; padding: 0 14px 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .nf-info-list { margin: 0; padding: 12px 14px 14px 14px; list-style: none; display: grid; gap: 9px; } .nf-info-list li { position: relative; padding-left: 16px; font: 11px/1.65 Verdana, sans-serif; color: var(--nf-text-dim); } .nf-info-list li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--nf-gold); box-shadow: 0 0 6px rgba(200,155,75,.7); } / ---------- auth pages (login / new player) ---------- / .nf-auth { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; padding: 4px; } .nf-auth-card { margin: 0; background: linear-gradient(180deg, #1c1914, #16130f); border: 1px solid var(--nf-border); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(232,200,126,.07); } .nf-auth-head { padding: 11px 14px; background: linear-gradient(180deg, #3b2f16, #241c0e); border-bottom: 1px solid rgba(200,155,75,.25); font: bold 12px/1.3 'Cinzel', Georgia, serif; letter-spacing: 1.3px; text-transform: uppercase; color: var(--nf-gold-hi); text-shadow: 0 1px 3px #000; } .nf-auth-body { padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 12px; } .nf-field { display: block; } .nf-field-label { display: block; margin-bottom: 5px; font: 10px/1 Verdana, sans-serif; letter-spacing: 1.1px; text-transform: uppercase; color: var(--nf-text-dim); } .nf-field-label.is-error { color: #e08878; } .nf-field input { display: block; width: 100%; box-sizing: border-box; background: #12100c !important; border: 1px solid var(--nf-border) !important; border-radius: 6px !important; color: var(--nf-gold-hi) !important; padding: 9px 10px !important; font: 13px/1.2 Verdana, sans-serif; } .nf-field input:focus { outline: none; border-color: var(--nf-gold) !important; box-shadow: 0 0 10px rgba(200,155,75,.35) !important; } .nf-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .nf-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .nf-check input { accent-color: var(--nf-gold); width: 15px; height: 15px; margin: 0; } .nf-check span { font: 11px/1 Verdana, sans-serif; color: var(--nf-text-dim); } .nf-auth-lost { font: 11px/1 Verdana, sans-serif; color: var(--nf-text-dim) !important; } .nf-auth-lost:hover { color: var(--nf-gold-hi) !important; } .nf-auth-submit { display: block; width: 100%; box-sizing: border-box; text-align: center; cursor: pointer; font-family: Verdana, sans-serif; margin-top: 2px; } button.nf-auth-submit { border: 1px solid var(--nf-gold); } .nf-auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .nf-auth-points li { position: relative; padding-left: 16px; font: 11px/1.6 Verdana, sans-serif; color: var(--nf-text-dim); } .nf-auth-points li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--nf-gold); box-shadow: 0 0 6px rgba(200,155,75,.7); } / ---------- social box ---------- / .nf-social { text-align: center; padding: 14px 12px !important; background-image: none !important; } .nf-social-head { font: bold 11px/1 'Cinzel', Georgia, serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--nf-gold-hi); margin-bottom: 12px; } .nf-social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .nf-social-link { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border: 1px solid var(--nf-border); border-radius: 8px; background: rgba(0,0,0,.3); transition: border-color .18s ease, background .18s ease, transform .14s ease; } .nf-social-link svg { width: 17px; height: 17px; fill: var(--nf-gold); transition: fill .18s ease; } .nf-social-link:hover { border-color: var(--nf-gold); background: rgba(200,155,75,.14); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(200,155,75,.28); } .nf-social-link:hover svg { fill: var(--nf-gold-hi); } / ---------- newcomer box ---------- / .nf-newcomer { text-align: center; padding: 16px 12px !important; background-image: none !important; } .nf-newcomer-head { font: bold 12px/1 'Cinzel', Georgia, serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--nf-gold-hi); margin-bottom: 8px; } .nf-newcomer-copy { margin: 0 0 14px; font: 10px/1.6 Verdana, sans-serif; color: var(--nf-text-dim); } .nf-newcomer-cta { padding: 8px 16px; font-size: 11px; } / ---------- footer ---------- / #Footer { background: none !important; border-top: 0 !important; padding: 0 !important; } .nf-foot { margin-top: 10px; padding: 18px 16px 26px; border-top: 1px solid rgba(200,155,75,.16); text-align: center; } .nf-foot-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin-bottom: 12px; } .nf-foot-links a { font: 11px/1 Verdana, sans-serif; letter-spacing: .4px; color: var(--nf-text-dim) !important; text-decoration: none !important; } .nf-foot-links a:hover { color: var(--nf-gold-hi) !important; text-shadow: 0 0 8px rgba(200,155,75,.5); } .nf-foot-sep { color: rgba(200,155,75,.35); font-size: 11px; } .nf-foot-copy { font: 11px/1.6 Verdana, sans-serif; color: var(--nf-text); letter-spacing: .3px; } .nf-foot-brand { max-width: 620px; margin: 6px auto 0; font: 10px/1.6 Verdana, sans-serif; color: var(--nf-text-dim); opacity: .7; } .nf-foot-meta { margin-top: 10px; font: 9px/1.6 Verdana, sans-serif; color: var(--nf-text-dim); opacity: .45; } #Footer a[href="my-aac.org"], #Footer a[href="myaac"] { display: none; } / ============================================================ TITLE BOARDS, BUTTONS, REMAINING LEGACY ICONS, HOVER SCOPE ============================================================ / / ---------- 1. the last Tibia texture: table shadow gifs ---------- / [class="TableShadow"], [class="TableBottom"], .TableContentAndRightShadow, .TableShadowContainer, .TableShadowContainerRightTop { background-image: none !important; background-color: transparent !important; } [class="TableShadow"]:not(.TableShadowContainer), .TableBottomShadow, .TableBottomLeftShadow, .TableBottomRightShadow { display: none !important; } /* ---------- 2. carved title board ---------- One treatment used by every box heading, table caption and section head. / .nf-page-title, .nf-board { position: relative; margin: 0 0 2px; padding: 13px 20px 12px; background: linear-gradient(180deg, rgba(232,200,126,.10), rgba(0,0,0,0) 60%), linear-gradient(180deg, #3d3018 0%, #2a2010 55%, #1d1609 100%); border: 1px solid var(--nf-border); border-top-color: rgba(232,200,126,.30); border-radius: 8px 8px 0 0; box-shadow: inset 0 1px 0 rgba(244,221,166,.22), inset 0 -1px 0 rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.45); font: bold 15px/1.25 'Cinzel', Georgia, serif; letter-spacing: 2px; text-transform: uppercase; color: var(--nf-gold-hi); text-shadow: 0 1px 0 #000, 0 2px 10px rgba(200,155,75,.35); text-align: center; } / engraved rule under the words / .nf-page-title::after, .nf-board::after { content: ''; display: block; margin: 9px auto 0; width: min(260px, 60%); height: 1px; background: linear-gradient(90deg, transparent, rgba(232,200,126,.65), transparent); } / diamond end caps (a rotated square reads as a slash in a gradient, so the shape is drawn as an actual polygon) / .nf-page-title::before, .nf-board::before { content: ''; position: absolute; left: 14px; right: 14px; top: 50%; height: 9px; margin-top: -11px; pointer-events: none; background-image: var(--nf-i-diamond), var(--nf-i-diamond); background-repeat: no-repeat, no-repeat; background-position: left center, right center; background-size: 9px 9px, 9px 9px; opacity: .85; } :root { --nf-i-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5z' fill='%23c89b4b'/%3E%3C/svg%3E"); } / every card/section heading shares the board material, just smaller / .nf-top3-head, .nf-newcomer-head, .nf-social-head, .nf-info-h, .nf-auth-head { position: relative; padding: 11px 12px 10px !important; background: linear-gradient(180deg, rgba(232,200,126,.09), rgba(0,0,0,0) 60%), linear-gradient(180deg, #3a2d16 0%, #281f0f 55%, #1c1509 100%) !important; border-bottom: 1px solid rgba(0,0,0,.55) !important; box-shadow: inset 0 1px 0 rgba(244,221,166,.20); font: bold 11px/1.3 'Cinzel', Georgia, serif !important; letter-spacing: 1.5px; text-transform: uppercase; color: var(--nf-gold-hi) !important; text-shadow: 0 1px 0 #000, 0 2px 8px rgba(200,155,75,.30); text-align: center; margin: 0 !important; } .nf-top3-head { display: flex; align-items: center; justify-content: space-between; text-align: left; } .nf-newcomer, .nf-social { padding: 0 !important; } .nf-newcomer-copy, .nf-newcomer-cta { margin-left: 12px; margin-right: 12px; } .nf-newcomer-copy { margin-top: 12px; } .nf-newcomer-cta { margin-bottom: 14px; } .nf-social-grid { padding: 12px; } / legacy inline-bgcolor header rows become boards too / #ContentColumn tr[bgcolor="#33280f"] > td, #ContentColumn tr[bgcolor="#33280F"] > td, #ContentColumn td.white { background: linear-gradient(180deg, #3d3018, #241c0e) !important; color: var(--nf-gold-hi) !important; font: bold 11px/1.4 'Cinzel', Georgia, serif !important; letter-spacing: 1.4px; text-transform: uppercase; text-shadow: 0 1px 2px #000; box-shadow: inset 0 1px 0 rgba(244,221,166,.18), inset 0 -1px 0 rgba(0,0,0,.5); padding: 9px 10px !important; } #ContentColumn td.white a, #ContentColumn tr[bgcolor="#33280f"] a { color: var(--nf-gold-hi) !important; } / free-standing headings inside page content (upstream markup uses bare h1/h2/h3, which rendered as browser-default white sans-serif) / #ContentColumn .BoxContent h1:not(.nf-page-title), #ContentColumn .BoxContent h2:not(.nf-info-h), #ContentColumn .BoxContent h3:not(.nf-info-h3) { margin: 4px 0 12px; padding-bottom: 8px; font-family: 'Cinzel', Georgia, serif; letter-spacing: 1.4px; color: var(--nf-gold-hi); text-shadow: 0 1px 3px #000; border-bottom: 1px solid rgba(200,155,75,.18); } #ContentColumn .BoxContent h1:not(.nf-page-title) { font-size: 17px; text-transform: uppercase; } #ContentColumn .BoxContent h2:not(.nf-info-h) { font-size: 14px; } #ContentColumn .BoxContent h3:not(.nf-info-h3) { font-size: 12px; border-bottom: 0; padding-bottom: 2px; } / ---------- 3. one button system ---------- / .nf-btn, .BigButton, .ThemeboxButton, #ContentColumn input[type=submit], #ContentColumn button:not(.nf-plain) { background: linear-gradient(180deg, rgba(244,221,166,.16), rgba(0,0,0,0) 55%), linear-gradient(180deg, #6b4f1c 0%, #4a3413 55%, #2f2109 100%) !important; border: 1px solid var(--nf-gold) !important; border-radius: 7px !important; box-shadow: inset 0 1px 0 rgba(244,221,166,.35), inset 0 -1px 0 rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.5) !important; color: #f6e3b4 !important; text-shadow: 0 1px 0 rgba(0,0,0,.7); cursor: pointer; transition: box-shadow .18s ease, transform .12s ease, filter .18s ease; } .nf-btn:hover, .BigButton:hover, .ThemeboxButton:hover, #ContentColumn input[type=submit]:hover, #ContentColumn button:not(.nf-plain):hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: inset 0 1px 0 rgba(244,221,166,.5), inset 0 -1px 0 rgba(0,0,0,.5), 0 5px 18px rgba(200,155,75,.45) !important; } .nf-btn:active, .BigButton:active, #ContentColumn input[type=submit]:active { transform: translateY(0); filter: brightness(.95); } .nf-btn-ghost { background: rgba(255,255,255,.025) !important; border-color: var(--nf-border) !important; color: var(--nf-text) !important; box-shadow: inset 0 1px 0 rgba(232,200,126,.08) !important; } .nf-btn-ghost:hover { border-color: var(--nf-gold-dim) !important; color: var(--nf-gold-hi) !important; } / ---------- 4. remaining legacy icons -> gold masks ---------- / #ContentColumn img[src="/changelog/"], #ContentColumn img[src="/news/icon_"], #ContentColumn img[src="_skull.gif"], #ContentColumn img[src="/order_"] { width: 16px !important; height: 16px !important; background: linear-gradient(180deg, var(--nf-gold-hi), var(--nf-gold)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); vertical-align: middle; } / changelog: added / changed / removed / fixed, and where: server / website / #ContentColumn img[src="changelog/added"] { -webkit-mask-image: var(--nf-i-plus); mask-image: var(--nf-i-plus); } #ContentColumn img[src="changelog/changed"] { -webkit-mask-image: var(--nf-i-swap); mask-image: var(--nf-i-swap); } #ContentColumn img[src="changelog/removed"] { -webkit-mask-image: var(--nf-i-minus); mask-image: var(--nf-i-minus); background: linear-gradient(180deg, #d08a72, #8a2a1a); } #ContentColumn img[src="changelog/fixed"] { -webkit-mask-image: var(--nf-i-wrench); mask-image: var(--nf-i-wrench); } #ContentColumn img[src="changelog/website"] { -webkit-mask-image: var(--nf-i-globe); mask-image: var(--nf-i-globe); } #ContentColumn img[src="changelog/server"] { -webkit-mask-image: var(--nf-i-server); mask-image: var(--nf-i-server); } / news archive small icons reuse the category set / #ContentColumn img[src="news/icon_0"] { -webkit-mask-image: var(--nf-i-news); mask-image: var(--nf-i-news); } #ContentColumn img[src="news/icon_1"] { -webkit-mask-image: var(--nf-i-community); mask-image: var(--nf-i-community); } #ContentColumn img[src="news/icon_2"] { -webkit-mask-image: var(--nf-i-library); mask-image: var(--nf-i-library); } #ContentColumn img[src="news/icon_3"] { -webkit-mask-image: var(--nf-i-forum); mask-image: var(--nf-i-forum); } #ContentColumn img[src="news/icon_4"] { -webkit-mask-image: var(--nf-i-shops); mask-image: var(--nf-i-shops); } #ContentColumn img[src="news/icon_5"] { -webkit-mask-image: var(--nf-i-account); mask-image: var(--nf-i-account); } / skulls keep their meaning through colour, not Tibia's art / #ContentColumn img[src="white_skull"] { -webkit-mask-image: var(--nf-i-skull); mask-image: var(--nf-i-skull); background: linear-gradient(180deg, #f2ece0, #b9b0a0); } #ContentColumn img[src="red_skull"] { -webkit-mask-image: var(--nf-i-skull); mask-image: var(--nf-i-skull); background: linear-gradient(180deg, #d05a44, #8a2a1a); } #ContentColumn img[src="black_skull"] { -webkit-mask-image: var(--nf-i-skull); mask-image: var(--nf-i-skull); background: linear-gradient(180deg, #6b6b72, #24242a); } #ContentColumn img[src="order_desc"] { -webkit-mask-image: var(--nf-i-caret-d); mask-image: var(--nf-i-caret-d); width: 11px !important; height: 11px !important; } #ContentColumn img[src="order_asc"] { -webkit-mask-image: var(--nf-i-caret-u); mask-image: var(--nf-i-caret-u); width: 11px !important; height: 11px !important; } /* 1x1 layout spacers are harmless but must never inherit the mask styling / #ContentColumn img[src="blank.gif"] { background: none !important; -webkit-mask-image: none !important; mask-image: none !important; width: auto !important; height: auto !important; filter: none !important; } /* country flags: real data, just softened so they stop shouting / #ContentColumn img[src="/flags/"] { border-radius: 2px; opacity: .82; box-shadow: 0 0 0 1px rgba(0,0,0,.6); } :root { --nf-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8V3z'/%3E%3C/svg%3E"); --nf-i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 11h18v2H3z'/%3E%3C/svg%3E"); --nf-i-swap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 4 3 8l4 4V9h11V7H7V4zm10 16 4-4-4-4v3H6v2h11v3z'/%3E%3C/svg%3E"); --nf-i-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M21 6.5a5.5 5.5 0 0 1-7.6 5.1L6 19l-3-3 7.4-7.4A5.5 5.5 0 0 1 17.9 2l-3 3 1.6 3.6L20.1 7l.9-.5z'/%3E%3C/svg%3E"); --nf-i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.9 6h-2.6a15 15 0 0 0-1.4-3.4A8 8 0 0 1 18.9 8zM12 4.2c.7 1 1.3 2.3 1.7 3.8h-3.4c.4-1.5 1-2.8 1.7-3.8zM4.3 14a8 8 0 0 1 0-4h3a17 17 0 0 0 0 4h-3zm.8 2h2.6c.3 1.2.8 2.4 1.4 3.4A8 8 0 0 1 5.1 16zm2.6-8H5.1a8 8 0 0 1 4-3.4A15 15 0 0 0 7.7 8zM12 19.8c-.7-1-1.3-2.3-1.7-3.8h3.4c-.4 1.5-1 2.8-1.7 3.8zm2.1-5.8H9.9a15 15 0 0 1 0-4h4.2a15 15 0 0 1 0 4zm.8 5.4c.6-1 1.1-2.2 1.4-3.4h2.6a8 8 0 0 1-4 3.4zm2-5.4a17 17 0 0 0 0-4h3a8 8 0 0 1 0 4h-3z'/%3E%3C/svg%3E"); --nf-i-server: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 3h18v6H3V3zm0 12h18v6H3v-6zm3-9v2h2V6H6zm0 12v2h2v-2H6z'/%3E%3C/svg%3E"); --nf-i-skull: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2C7 2 3 5.8 3 10.5c0 2.7 1.3 5.1 3.4 6.6V20a1 1 0 0 0 1 1h2v-2h1.5v2h2v-2H16v2h1.6a1 1 0 0 0 1-1v-2.9c2-1.5 3.4-3.9 3.4-6.6C21 5.8 17 2 12 2zM8.6 12.6a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2zm6.8 0a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2z'/%3E%3C/svg%3E"); --nf-i-caret-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 16 4 8h16z'/%3E%3C/svg%3E"); --nf-i-caret-u: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 8 20 16H4z'/%3E%3C/svg%3E"); } /* ---------- 4b. news archive ---------- Upstream renders a bare 3-column table: icon / date / title, with no width on the date cell, so the title drifted half a screen away from its date. / / the header row is a single colspan=3 cell, so widths must be set on the data rows only — a fixed layout would read the header and give up / .nf-page-news-archive .BoxContent tr:has(td:nth-child(3)) > td:nth-child(1) { width: 30px !important; padding-right: 0 !important; } .nf-page-news-archive .BoxContent tr:has(td:nth-child(3)) > td:nth-child(2) { width: 96px !important; white-space: nowrap; font: 11px/1.5 Verdana, sans-serif; color: var(--nf-text-dim) !important; } .nf-page-news-archive .BoxContent tr:has(td:nth-child(3)) > td:nth-child(3) { width: auto !important; text-align: left !important; padding-left: 6px !important; } .nf-page-news-archive .BoxContent td:nth-child(3) a { font: bold 12px/1.5 Verdana, sans-serif; color: var(--nf-gold-hi) !important; text-decoration: none !important; } .nf-page-news-archive .BoxContent td:nth-child(3) a:hover { text-shadow: 0 0 10px rgba(200,155,75,.6); } .nf-page-news-archive .BoxContent tr > td { padding: 10px 8px !important; } / ---------- 5. hover scope ---------- The old rules highlighted any row under the cursor, including the layout tables the legacy templates use for spacing, so panels lit up when the pointer was nowhere near anything clickable. Restrict row highlighting to tables that are actually data, and to rows that contain a link. / .BoxContent table tr:hover td, .TableContent tr:hover { background: none !important; } .myaac-table > tbody > tr:hover > td, table.dataTable tbody tr:hover > td, #ContentColumn tr:has(a):not([bgcolor="#33280f"]):hover > td { background: rgba(200,155,75,.10) !important; } / cards only react on the card itself, never on inner text / #ThemeboxesColumn .Themebox:hover { border-color: var(--nf-border); box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(232,200,126,.07); } #ThemeboxesColumn .Themebox:has(a:hover), #ThemeboxesColumn .Themebox:has(button:hover) { border-color: var(--nf-gold-dim); box-shadow: 0 10px 34px rgba(0,0,0,.7), 0 0 16px rgba(200,155,75,.18); } / ============================================================ RESPONSIVE — kept last so it overrides everything above ============================================================ / / ---------- tablet: sidebar drops below as a card row ---------- / @media (max-width: 1080px) { #ContentRow { flex-wrap: wrap; } #MenuColumn { flex: 0 0 200px; order: 1; } #ContentColumn { flex: 1 1 320px; order: 2; } #ThemeboxesColumn { flex: 1 1 100% !important; width: auto !important; order: 3; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: start; } #ThemeboxesColumn > { margin-bottom: 0 !important; } } /* ---------- phone: single column ---------- / @media (max-width: 720px) { #NeferonHeader { padding: 16px 0 6px; } #NeferonLogo img { width: 92vw; } .nf-logo-tagline { margin-top: 8px; font-size: 9px; letter-spacing: 3.5px; } #ContentRow { display: block !important; padding-bottom: 32px; } #MenuColumn, #ContentColumn, #ThemeboxesColumn { display: block !important; float: none !important; flex: none !important; width: auto !important; max-width: none !important; margin: 0 0 14px !important; } #ThemeboxesColumn { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; } #ThemeboxesColumn > { margin-bottom: 0 !important; } #RightArtwork.nf-status-card { margin-bottom: 0 !important; } .nf-hero { padding: 20px 14px 18px; } .nf-hero-title { font-size: 22px; letter-spacing: 1.5px; } .nf-hero-tagline { font-size: 11px; } .nf-hero-cta { flex-direction: column; align-items: stretch; } .nf-hero-cta .nf-btn { width: 100%; box-sizing: border-box; text-align: center; } .nf-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 8px 1px; } .nf-stat-value { font-size: 18px; } .Box .Border_3 { padding: 0 !important; } .BoxContent { padding: 10px !important; } /* legacy fixed-width tables scroll inside their card instead of the page / #ContentColumn table { max-width: 100%; } #ContentColumn .TableContainer, #ContentColumn .TableContentContainer, #ContentColumn .dataTables_wrapper { overflow-x: auto; } #Footer { font-size: 10px; padding: 0 8px; width: auto !important; box-sizing: border-box; } } / ---------- small phone ---------- / @media (max-width: 420px) { #NeferonLogo img { width: 94vw; } #ThemeboxesColumn { grid-template-columns: 1fr !important; } .nf-social-grid { grid-template-columns: repeat(4, 1fr); } } / ---------- touch: the legacy rows are ~18px tall ---------- / @media (hover: none) and (pointer: coarse) { .Submenuitem { padding-top: 10px; padding-bottom: 10px; } .MenuButton.nf-menu-btn > div { padding-top: 12px; padding-bottom: 12px; } .nf-top3-link { padding-top: 11px; padding-bottom: 11px; } .nf-social-link { min-height: 44px; } } / ===== 2026-09-18 polish round (Neferon deep-dive) ===== / / Registration intro hint: readable parchment panel instead of red-on-dark / .nf-create-hint { margin: 0 0 14px; padding: 12px 16px; color: #d8cfb8; line-height: 1.6; font-size: 12px; background: linear-gradient(150deg, rgba(38, 33, 25, .92), rgba(16, 15, 12, .94)); border: 1px solid #0b0a08; box-shadow: inset 0 0 0 1px rgba(232, 200, 126, .12); } .nf-create-hint strong { color: #e8c87e; font-variant: small-caps; letter-spacing: 1px; } / Form controls: every select/input gets the Neferon charcoal-gold treatment (late rules win the cascade - the create-account form sits outside .Content) / select, input[type=text], input[type=password], input[type=email], input[type=number] { background: #14120d; color: #d8cfb8; border: 1px solid #0b0a08; box-shadow: inset 1px 1px 0 rgba(232, 200, 126, .18), inset -1px -1px 0 rgba(0, 0, 0, .55); padding: 5px 8px; border-radius: 0; outline: none; font-family: inherit; font-size: 12px; } select { cursor: pointer; } select:focus, input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus { border-color: #c89b4b; box-shadow: inset 1px 1px 0 rgba(232, 200, 126, .3), 0 0 8px rgba(200, 155, 75, .25); } select option { background: #14120d; color: #d8cfb8; } / Hall of Fame header: never clip the "all" link / .nf-top3-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .nf-top3-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nf-top3-all { flex: 0 0 auto; } / Highscores/notes: the red service notes read as parchment hints here / .Note, .SmallBox .Message, .attentionsign .Message { color: #c8b58e !important; } / Downloads page / .nf-downloads { max-width: 680px; margin: 0 auto; } .nf-downloads-hero h2 { color: #e8c87e; font-variant: small-caps; letter-spacing: 2px; font-weight: normal; margin: 6px 0 8px; text-shadow: 0 2px 2px #000; } .nf-downloads-hero p { color: #d8cfb8; font-size: 12px; line-height: 1.6; } .nf-downloads-action { margin: 18px 0; padding: 16px; background: linear-gradient(150deg, rgba(38,33,25,.92), rgba(16,15,12,.94)); border: 1px solid #0b0a08; box-shadow: inset 0 0 0 1px rgba(232,200,126,.12); text-align: center; } .nf-downloads-action p { color: #d8cfb8; font-size: 12px; line-height: 1.6; margin-bottom: 12px; } .nf-downloads-action .nf-btn, .nf-downloads-action .nf-btn-primary { display: inline-block; padding: 10px 26px; text-decoration: none; font-size: 14px; } .nf-downloads-note { margin-top: 10px; color: #a89a7c; font-size: 11px; font-style: italic; } .nf-downloads-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; } .nf-downloads-facts div { padding: 10px 14px; background: linear-gradient(#2e2819, #171410); border: 1px solid #0b0a08; box-shadow: inset 1px 1px 0 rgba(232,200,126,.22), inset -1px -1px 0 rgba(0,0,0,.6); } .nf-downloads-facts span { display: block; color: #a89a7c; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; } .nf-downloads-facts b { color: #e8c87e; font-weight: normal; font-variant: small-caps; letter-spacing: 1px; } / Character page: real equipment view (from .nfp + dat sprites) / .nf-charview { padding: 10px 12px 12px; background: linear-gradient(150deg, rgba(38,33,25,.92), rgba(16,15,12,.94)); border: 1px solid #0b0a08; box-shadow: inset 0 0 0 1px rgba(232,200,126,.12); text-align: center; min-width: 190px; } .nf-charview-title { color: #e8c87e; font-variant: small-caps; letter-spacing: 2px; font-size: 13px; margin-bottom: 10px; text-shadow: 0 1px 2px #000; } .nf-charview-outfit { min-height: 64px; display: grid; place-items: center; margin-bottom: 10px; } .nf-charview-outfit img { image-rendering: pixelated; filter: drop-shadow(0 3px 4px rgba(0,0,0,.7)); } .nf-charview-grid { display: grid; grid-template-columns: repeat(3, 52px); grid-auto-rows: 52px; gap: 6px; justify-content: center; } .nf-slot { position: relative; display: grid; place-items: center; background: linear-gradient(#221d15, #12100c); border: 1px solid #0b0a08; box-shadow: inset 1px 1px 0 rgba(232,200,126,.16), inset -1px -1px 0 rgba(0,0,0,.6); } .nf-slot.empty:after { content: ""; width: 10px; height: 10px; transform: rotate(45deg); background: rgba(232,200,126,.08); } .nf-slot img { max-width: 44px; max-height: 44px; image-rendering: pixelated; } .nf-slot-count { position: absolute; right: 2px; bottom: 1px; color: #fff3d4; font: bold 10px Verdana, sans-serif; text-shadow: 1px 1px 0 #000; } .nf-charview-ammo { position: relative; margin: 6px auto 0; width: 52px; height: 52px; display: grid; place-items: center; background: linear-gradient(#221d15, #12100c); border: 1px solid #0b0a08; box-shadow: inset 1px 1px 0 rgba(232,200,126,.16), inset -1px -1px 0 rgba(0,0,0,.6); } .nf-charview-ammo img { max-width: 44px; max-height: 44px; image-rendering: pixelated; } .nf-charview-ammo.empty .nf-slot-none { color: #6b6252; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; } .nf-charview-vitals { margin-top: 12px; text-align: left; } .nf-charview-vitals div { display: flex; justify-content: space-between; padding: 3px 2px; border-bottom: 1px solid rgba(138,109,51,.25); font-size: 11px; } .nf-charview-vitals span { color: #a89a7c; letter-spacing: 1px; text-transform: uppercase; font-size: 10px; } .nf-charview-vitals b { color: #d8cfb8; font-weight: normal; } / News headline cards: Neferon framing instead of legacy gifs / .NewsHeadline { border: 1px solid #0b0a08; box-shadow: inset 0 0 0 1px rgba(232,200,126,.15); background: linear-gradient(150deg, rgba(38,33,25,.92), rgba(16,15,12,.94)); margin-bottom: 6px; } .NewsHeadline .NewsHeadlineBackground { background-image: none !important; display: flex; align-items: center; gap: 10px; padding: 7px 10px; } .NewsHeadlineDate { color: #a89a7c; font-size: 11px; letter-spacing: 1px; white-space: nowrap; } .NewsHeadlineText { color: #e8c87e; font-variant: small-caps; letter-spacing: 1px; } .NewsHeadlineIcon { border-radius: 2px; } .nf-charview-boots { position: relative; margin: 6px auto 0; width: 52px; height: 52px; display: grid; place-items: center; background: linear-gradient(#221d15, #12100c); border: 1px solid #0b0a08; box-shadow: inset 1px 1px 0 rgba(232,200,126,.16), inset -1px -1px 0 rgba(0,0,0,.6); } .nf-charview-boots img { max-width: 44px; max-height: 44px; image-rendering: pixelated; } .nf-charview-boots.empty .nf-slot-none { color: #6b6252; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; } .nf-charview-boots.empty:after { content: ""; position: absolute; width: 10px; height: 10px; transform: rotate(45deg); background: rgba(232,200,126,.08); } / Character information rows: pro Neferon read / #ContentColumn table[width="100%"] td[width="20%"] { color: #a89a7c; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-variant: small-caps; } / charview: outfit plate beside the slot grid, single outfit icon / .nf-charview-body { display: flex; align-items: center; justify-content: center; gap: 22px; } .nf-charview-outfit { width: 104px; height: 150px; display: grid; place-items: center; background: linear-gradient(#221d15, #12100c); border: 1px solid #0b0a08; box-shadow: inset 1px 1px 0 rgba(232,200,126,.16), inset -1px -1px 0 rgba(0,0,0,.6); } .nf-charview-outfit img { max-width: 92px; max-height: 138px; image-rendering: pixelated; filter: drop-shadow(0 3px 4px rgba(0,0,0,.7)); } .nf-charview-slots { display: flex; flex-direction: column; gap: 6px; } .nf-charview-row4 { margin-top: 0; } .nf-slot-stat b { color: #e8c87e; font: normal 10px Verdana, sans-serif; text-shadow: 1px 1px 0 #000; } .nf-slot-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; } / Character information rows: readable parchment text on the dark rows / #ContentColumn table td { color: #d8cfb8; } #ContentColumn table td span[style="red"], #ContentColumn table td font[color="red"] { } #ContentColumn .white { color: #e8c87e !important; } /* Uniform sidebar rail: status card, Hall of Fame and Newcomer cards all exactly the rail width (legacy basic.css shrink-wraps + centers them; the themeboxes live inside an inner #Themeboxes wrapper). / #ThemeboxesColumn > #RightArtwork, #ThemeboxesColumn > #Themeboxes, #ThemeboxesColumn > #Themeboxes > .Themebox { width: 100% !important; box-sizing: border-box; margin-left: 0 !important; margin-right: 0 !important; display: block; } / Uniform sidebar rail (final): status card + themeboxes all exactly the rail width. border-box is mandatory - the legacy paddings otherwise inflate width:100% and each card drifts to a different size. Legacy offsets (#RightArtwork top:-1px right:24px, .Themebox top:-4px) are neutralized or the cards sit shifted out of the rail. / #ContentRow #ThemeboxesColumn, #ContentRow #ThemeboxesColumn > #RightArtwork, #ContentRow #ThemeboxesColumn > #Themeboxes, #ContentRow #ThemeboxesColumn > #Themeboxes > .Themebox { box-sizing: border-box; } #ContentRow #ThemeboxesColumn > #RightArtwork, #ContentRow #ThemeboxesColumn > #Themeboxes > .Themebox { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; top: 0 !important; right: 0 !important; left: auto !important; bottom: auto !important; z-index: auto; } / Forum board view / .nf-forum-head { margin-bottom: 14px; } .nf-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; } .nf-crumb { color: #c8b58e; text-decoration: none; padding: 3px 10px; background: linear-gradient(#2e2819, #171410); border: 1px solid #0b0a08; box-shadow: inset 1px 1px 0 rgba(232,200,126,.18); } .nf-crumb:hover { color: #e8c87e; border-color: #8a6d33; } .nf-crumb.current { color: #e8c87e; font-variant: small-caps; letter-spacing: 1px; background: none; border: none; box-shadow: none; padding-left: 0; } .nf-crumb-sep { color: #8a6d33; } .nf-board-title { color: #e8c87e; font-variant: small-caps; font-weight: normal; letter-spacing: 2px; font-size: 22px; margin: 2px 0 4px; text-shadow: 0 2px 2px #000; } .nf-board-desc { color: #a89a7c; font-size: 12px; font-style: italic; margin-bottom: 10px; } .nf-board-actions { display: flex; gap: 10px; } .nf-board-actions .nf-btn, .nf-board-actions .nf-btn-primary { display: inline-block; padding: 8px 18px; text-decoration: none; font-size: 12px; } .nf-forum-pages { color: #a89a7c; font-size: 11px; margin-bottom: 8px; } .nf-forum-pages a { color: #c8b58e; text-decoration: none; } .nf-forum-meta { color: #a89a7c; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; } table.nf-threads { background: rgba(18,16,12,.72); border: 1px solid #322b1e; } table.nf-threads td { padding: 6px 8px; } .nf-forum-empty { margin: 8px 0; padding: 34px 20px 30px; text-align: center; background: linear-gradient(150deg, rgba(38,33,25,.92), rgba(16,15,12,.94)); border: 1px solid #0b0a08; box-shadow: inset 0 0 0 1px rgba(232,200,126,.12); } .nf-forum-empty-icon { font-size: 26px; color: #8a6d33; margin-bottom: 8px; } .nf-forum-empty-title { color: #e8c87e; font-variant: small-caps; letter-spacing: 2px; font-size: 17px; margin-bottom: 6px; text-shadow: 0 2px 2px #000; } .nf-forum-empty-text { color: #d8cfb8; font-size: 12px; line-height: 1.6; margin-bottom: 14px; } .nf-forum-empty .nf-btn, .nf-forum-empty .nf-btn-primary { display: inline-block; padding: 8px 20px; text-decoration: none; font-size: 12px; } / ===== Account management page: Neferon panels over the legacy boxes ===== / / SmallBox / hint / note boxes: dark charcoal plate, gold frame, readable text / .SmallBox .MessageContainer, .SmallBox .Message { background-image: none !important; background: linear-gradient(150deg, rgba(38,33,25,.95), rgba(16,15,12,.97)) !important; color: #d8cfb8 !important; } .SmallBox .BoxFrameHorizontal, .SmallBox .BoxFrameVerticalLeft, .SmallBox .BoxFrameVerticalRight, .SmallBox .BoxFrameEdgeLeftTop, .SmallBox .BoxFrameEdgeRightTop, .SmallBox .BoxFrameEdgeRightBottom, .SmallBox .BoxFrameEdgeLeftBottom { background-image: none !important; } .SmallBox .MessageContainer { border: 1px solid #0b0a08; box-shadow: inset 0 0 0 1px rgba(232,200,126,.15), 0 8px 22px rgba(0,0,0,.5); } .SmallBox .LabelV { color: #e8c87e !important; font-variant: small-caps; letter-spacing: 1px; } .SmallBox table td { color: #d8cfb8 !important; } / General information table: kill the inline parchment row colors / #account-manage tr[style] { background-color: transparent !important; } #account-manage tr[style] td { background-color: transparent !important; color: #d8cfb8; } #account-manage .LabelV { color: #a89a7c !important; font-variant: small-caps; letter-spacing: 1px; font-size: 11px; } #account-manage table.TableContent { border: 1px solid #322b1e; background: rgba(18,16,12,.72); } #account-manage table.TableContent td { padding: 6px 10px; } / ===== News: true framed cards with readable body text ===== / .nf-news-card { margin: 0 0 18px; background: linear-gradient(150deg, rgba(38,33,25,.94), rgba(16,15,12,.96)); border: 1px solid #0b0a08; box-shadow: inset 0 0 0 1px rgba(232,200,126,.13), 0 8px 22px rgba(0,0,0,.45); } .nf-news-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: linear-gradient(rgba(232,200,126,.08), rgba(0,0,0,.2)); border-bottom: 1px solid rgba(138,109,51,.6); } .nf-news-icon { width: 18px; height: 18px; } .nf-news-date { color: #a89a7c; font-size: 11px; letter-spacing: 1px; white-space: nowrap; } .nf-news-title { color: #e8c87e; font-variant: small-caps; letter-spacing: 2px; font-size: 15px; text-shadow: 0 1px 2px #000; } .nf-news-author { margin-left: auto; color: #a89a7c; font-size: 11px; font-style: italic; } .nf-news-body { padding: 14px 18px; color: #d8cfb8 !important; font-size: 13px; line-height: 1.7; } .nf-news-body td { color: #d8cfb8 !important; } .nf-news-body a { color: #e8c87e; text-decoration: underline; } .nf-news-body a:hover { color: #fff3d4; } .nf-news-body img[align="bottom"] { margin-right: 2px; } .nf-news-comments { text-align: right; padding: 4px 18px 10px; } .nf-news-comments a { color: #c8b58e; font-size: 11px; text-decoration: none; letter-spacing: 1px; } .nf-news-comments a:hover { color: #e8c87e; } / ---------- item & outfit catalog ---------- */ .nf-catalog-hero { text-align: center; margin-bottom: 18px; } .nf-catalog-hero h2 { color: var(--nf-gold-hi, #e8c87e); margin: 0 0 6px; } .nf-catalog-hero p { color: #b9ae93; margin: 0; } .nf-catalog-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 10px 12px; background: rgba(20,17,13,.55); border: 1px solid var(--nf-border, #3a3126); border-radius: 10px; } .nf-catalog-groups { display: flex; flex-wrap: wrap; gap: 6px; } .nf-catalog-groups a { display: inline-block; padding: 3px 9px; border-radius: 999px; background: rgba(232,200,126,.07); border: 1px solid rgba(200,155,75,.25); color: #d8c795; font-size: 12px; text-decoration: none !important; } .nf-catalog-groups a small { opacity: .6; } .nf-catalog-groups a:hover { background: rgba(232,200,126,.16); color: #f0e2bb; } .nf-catalog-search input { background: #14110d; border: 1px solid var(--nf-border, #3a3126); border-radius: 8px; color: #e8dfc8; padding: 6px 12px; min-width: 220px; outline: none; } .nf-catalog-section { margin-bottom: 22px; } .nf-catalog-section h3 { color: #e8c87e; font-variant: small-caps; letter-spacing: 1px; border-bottom: 1px solid rgba(200,155,75,.25); padding-bottom: 6px; margin: 0 0 12px; } .nf-catalog-section h3 span { color: #8a7a55; font-size: 14px; } .nf-catalog-section h3.is-toggle { cursor: pointer; } .nf-catalog-section h3.is-toggle::after { content: " \25BE"; color: #8a7a55; } .nf-catalog-section.is-collapsed .nf-catalog-grid { display: none; } .nf-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .nf-catalog-cell { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 4px 6px; background: rgba(20,17,13,.5); border: 1px solid rgba(200,155,75,.14); border-radius: 8px; min-height: 78px; } .nf-catalog-cell:hover { border-color: rgba(232,200,126,.45); background: rgba(28,24,17,.7); } .nf-catalog-cell img { image-rendering: pixelated; width: 32px; height: 32px; object-fit: contain; margin-bottom: 5px; } .nf-catalog-cell.nf-catalog-outfit img { width: auto; max-height: 64px; } .nf-catalog-cell span { color: #d8cfb8; font-size: 11px; line-height: 1.25; } .nf-catalog-cell em { color: #8a7a55; font-size: 10px; font-style: normal; margin-top: 2px; } .nf-catalog-empty { text-align: center; color: #b9ae93; padding: 30px 0; }