Midnight sun/tropical aesthetic
Author: Ocean girl
Category: Tropical
Created: August 17, 2026
Downloads: 25
tropical, colorful, neon, fun
Live Preview
Layout CSS
/* =========================================================
FRIEND REWIND — TEMA PASTEL DREAMY
CORES:
#A7CDF0 — AZUL (APENAS DETALHES)
#F4ADBB — ROSA
#FEF7C1 — CREME
#BBDEDB — VERDE-ÁGUA
========================================================= */
/* =========================================================
FONTE + FUNDO
========================================================= */
body {
font-family: Georgia, monospace !important;
background:
url("https://i.postimg.cc/3Rg2FFBQ/dc4c52ad9f3b956f5125f5396a0e9257.jpg")
center center / cover fixed !important;
color: #f4adbb !important;
text-shadow:
0 0 3px rgba(244, 173, 187, 0.45),
0 0 6px rgba(187, 222, 219, 0.2);
}
/* =========================================================
LINKS
========================================================= */
a {
color: #f4adbb !important;
text-decoration: underline !important;
text-shadow:
0 0 4px rgba(244, 173, 187, 0.55);
}
a:hover {
color: #a7cdf0 !important;
text-shadow:
0 0 5px #a7cdf0,
0 0 10px rgba(167, 205, 240, 0.5);
}
/* =========================================================
BARRA DE NAVEGAÇÃO
========================================================= */
.myspace-header {
position: relative;
z-index: 100;
width: 85%;
max-width: 990px;
color: #f4adbb;
padding: 0;
margin: 0 auto;
font-size: 12px;
line-height: 0;
background-color:
rgba(244, 173, 187, 0.15) !important;
border-radius: 51px;
border-top:
1px solid rgba(254, 247, 193, 0.9);
box-shadow:
0 0 7px rgba(244, 173, 187, 0.55),
0 0 15px rgba(187, 222, 219, 0.35);
}
/* =========================================================
IMAGEM DA BARRA DO NAV
========================================================= */
.myspace-header .top-nav {
background:
none !important;
background-image:
url("https://i.postimg.cc/xC01BG25/344-Sem-Titulo-20260816225541.png")
!important;
background-position:
center center !important;
background-size:
cover !important;
background-repeat:
no-repeat !important;
border:
5px solid #f4adbb !important;
border-radius:
57px;
width:
519px;
margin-left:
auto !important;
margin-right:
auto !important;
box-shadow:
0 0 6px rgba(244, 173, 187, 0.8),
0 0 14px rgba(187, 222, 219, 0.55);
}
/* =========================================================
PESQUISA
========================================================= */
.myspace-header .top-nav .search-button {
border-color:
#f4adbb !important;
background:
rgba(254, 247, 193, 0.94) !important;
color:
#f4adbb !important;
border-radius:
0 10px 10px 0;
box-shadow:
0 0 5px rgba(244, 173, 187, 0.5);
}
.myspace-header .top-nav .search-input {
background:
rgba(254, 247, 193, 0.94) !important;
color:
#f4adbb !important;
border-color:
#f4adbb !important;
border-radius:
10px 0 0 10px;
box-shadow:
0 0 5px rgba(244, 173, 187, 0.45);
}
/* =========================================================
MENU PRINCIPAL
========================================================= */
.myspace-header .main-nav-wrapper {
background:
linear-gradient(
to bottom,
#f4adbb 0%,
#f4adbb 48%,
#bbdedb 100%
) !important;
border-top-color:
#fef7c1 !important;
border-bottom-color:
#fef7c1 !important;
border-radius:
10px;
height:
48px;
box-shadow:
0 0 7px rgba(244, 173, 187, 0.65),
0 0 15px rgba(187, 222, 219, 0.45);
}
.myspace-header .main-nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
height: 100%;
padding-left: 42px;
}
.myspace-header .main-nav li a {
border:
2px outset rgba(254, 247, 193, 0.95);
border-radius:
30px;
text-shadow:
0 0 3px #ffffff,
0 0 6px rgba(244, 173, 187, 0.45);
}
.myspace-header .main-nav li a:hover {
background-color:
#bbdedb !important;
box-shadow:
0 0 5px #bbdedb,
0 0 12px rgba(187, 222, 219, 0.7),
0 0 20px rgba(167, 205, 240, 0.35);
}
.myspace-header .main-nav li a {
border-right-color:
rgba(255, 255, 255, 0) !important;
}
/* =========================================================
MENU DROPDOWN
========================================================= */
.myspace-header .dropdown-menu {
background:
#f4adbb !important;
border-color:
#fef7c1 !important;
box-shadow:
0 0 7px rgba(244, 173, 187, 0.7),
0 0 16px rgba(187, 222, 219, 0.45) !important;
border-radius:
15px;
}
/* =========================================================
LOGO
========================================================= */
.myspace-header .nav-logo {
height:
73px;
width:
auto;
margin:
0 10px;
position:
relative;
top:
2px;
filter:
drop-shadow(0 0 4px #f4adbb)
drop-shadow(0 0 8px rgba(187, 222, 219, 0.65));
}
/* =========================================================
FAIXA GIF
FINA + CENTRALIZADA + LEVEMENTE MAIS PARA CIMA
========================================================= */
main:before {
width:
100%;
height:
180px;
display:
block;
content:
"";
background-image:
url("https://i.postimg.cc/k5rfg1jF/GIF-20260818-163000-369.gif");
background-position:
center 42%;
background-size:
cover;
background-repeat:
no-repeat;
}
@media only screen and (max-width: 600px) {
main:before {
height:
100px;
background-position:
center 42%;
}
}
/* =========================================================
MAIN BLOG CONTAINER
========================================================= */
main {
background:
rgba(187, 222, 219, 0.92) !important;
border-left:
2px dotted #fef7c1 !important;
border-right:
2px dotted #fef7c1 !important;
padding:
20px !important;
color:
#ffffff !important;
box-shadow:
0 0 8px rgba(187, 222, 219, 0.65),
inset 0 0 20px rgba(254, 247, 193, 0.25);
}
/* =========================================================
BLOG TITLE
========================================================= */
.blog-entry .title {
color:
#ffffff !important;
background:
url("https://i.postimg.cc/zBnTFFjq/344-Sem-Titulo-20260816225018.png")
center center / cover !important;
border:
2px solid #f4adbb !important;
padding:
15px !important;
font-size:
2em !important;
text-align:
center !important;
box-shadow:
0 0 6px rgba(244, 173, 187, 0.8),
0 0 14px rgba(187, 222, 219, 0.55),
0 0 25px rgba(254, 247, 193, 0.35);
text-shadow:
0 0 4px #ffffff,
0 0 9px #f4adbb;
}
/* =========================================================
BLOG CONTENT / TEXTO
========================================================= */
.blog-entry .content {
background:
url("https://i.postimg.cc/LX4jvpg6/343-Sem-Titulo-20260816220926.png")
center center / cover !important;
border:
2px dotted #f4adbb !important;
padding:
20px !important;
color:
#ffffff !important;
box-shadow:
0 0 6px rgba(244, 173, 187, 0.65),
0 0 15px rgba(187, 222, 219, 0.3);
text-shadow:
0 0 3px rgba(244, 173, 187, 0.4);
}
/* =========================================================
TEXTO EM NEGRITO
========================================================= */
.blog-entry .content b {
color:
#ffffff !important;
text-shadow:
0 0 4px #f4adbb,
0 0 8px rgba(244, 173, 187, 0.45);
}
/* =========================================================
LINKS DENTRO DO TEXTO
========================================================= */
.blog-entry .content a {
color:
#a7cdf0 !important;
text-decoration:
underline !important;
text-shadow:
0 0 4px #a7cdf0,
0 0 8px rgba(167, 205, 240, 0.5);
}
/* =========================================================
LISTAS
========================================================= */
.blog-entry ul,
.blog-entry ol {
background:
rgba(244, 173, 187, 0.88) !important;
border:
1px solid #fef7c1 !important;
padding:
15px !important;
color:
#ffffff !important;
box-shadow:
0 0 6px rgba(244, 173, 187, 0.55);
}
.blog-entry li::marker {
color:
#a7cdf0 !important;
}
/* =========================================================
BLOCKQUOTES
========================================================= */
.blog-entry blockquote {
background:
#f4adbb !important;
border-left:
4px solid #a7cdf0 !important;
padding:
15px !important;
color:
#ffffff !important;
box-shadow:
0 0 7px rgba(244, 173, 187, 0.6),
0 0 14px rgba(187, 222, 219, 0.4);
text-shadow:
0 0 4px #ffffff;
}
/* =========================================================
SIDEBAR
========================================================= */
.edit-info {
background:
rgba(244, 173, 187, 0.9) !important;
border:
2px solid #fef7c1 !important;
padding:
20px !important;
box-shadow:
0 0 7px rgba(244, 173, 187, 0.65),
0 0 16px rgba(187, 222, 219, 0.4);
}
.edit-info h4 {
color:
#ffffff !important;
text-shadow:
0 0 5px #f4adbb,
0 0 9px rgba(244, 173, 187, 0.5);
}
.edit-info a {
color:
#a7cdf0 !important;
text-shadow:
0 0 5px #a7cdf0;
}
/* =========================================================
PROFILE PIC — GIRO
========================================================= */
.edit-info .profile-pic img {
border-radius:
50% !important;
animation:
spin 7s infinite linear !important;
border:
2px solid #f4adbb !important;
box-shadow:
0 0 6px #f4adbb,
0 0 14px rgba(244, 173, 187, 0.65),
0 0 22px rgba(167, 205, 240, 0.3);
}
@keyframes spin {
from {
transform:
rotate(0deg);
}
to {
transform:
rotate(-360deg);
}
}
/* =========================================================
COMMENTS
========================================================= */
#comments {
background:
rgba(187, 222, 219, 0.92) !important;
border-bottom:
2px dotted #fef7c1 !important;
padding:
20px !important;
box-shadow:
0 0 8px rgba(187, 222, 219, 0.55);
}
#comments h2 {
color:
#ffffff !important;
text-shadow:
0 0 5px #f4adbb,
0 0 10px rgba(244, 173, 187, 0.55);
}
.comments-table td {
background:
rgba(244, 173, 187, 0.9) !important;
border:
1px solid #fef7c1 !important;
color:
#ffffff !important;
box-shadow:
0 0 5px rgba(244, 173, 187, 0.55);
}
/* =========================================================
FOOTER
========================================================= */
footer {
background:
#bbdedb !important;
border:
2px dotted #fef7c1 !important;
box-shadow:
0 0 7px rgba(187, 222, 219, 0.65),
0 0 15px rgba(244, 173, 187, 0.3);
}
footer p {
color:
#ffffff !important;
text-shadow:
0 0 5px #f4adbb;
}
/* =========================================================
LINKS GERAIS
========================================================= */
main a,
footer a,
.edit-info a {
color:
#a7cdf0 !important;
text-shadow:
0 0 4px #a7cdf0,
0 0 8px rgba(167, 205, 240, 0.45);
}
/* =========================================================
CURSOR PERSONALIZADO
========================================================= */
* {
cursor:
url("https://i.postimg.cc/vBhRfH6d/237-Sem-Titulo.png")
32 32,
auto !important;
}
/* =========================================================
BRILHO PASTEL
========================================================= */
.blog-entry .title,
.blog-entry .content,
.edit-info,
#comments,
.comments-table td,
footer {
transition:
box-shadow 0.3s ease,
filter 0.3s ease;
}
.blog-entry .title:hover,
.blog-entry .content:hover,
.edit-info:hover,
.comments-table td:hover {
filter:
brightness(1.05);
box-shadow:
0 0 7px #f4adbb,
0 0 16px rgba(187, 222, 219, 0.7),
0 0 25px rgba(167, 205, 240, 0.25);
}
/* =========================================================
PLAYER DE MÚSICA — TRANSPARENTE
========================================================= */
.music-bar {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
}
.music-bar::before {
display: none !important;
}
.music-bar .bar-title {
text-shadow:
0 1px 3px rgba(0, 0, 0, 0.8) !important;
}
/* =========================================================
FIM DO CÓDIGO
========================================================= */
Comments (1)
Log in to leave a comment.