Disney Layout

Layout CSS

/* ============================================
   ✨ DISNEY FRIENDREWIND BLOG LAYOUT ✨
   Cute Pastel Disney Theme
   ============================================ */

/* ---- FONT IMPORT ---- */
@import url('https://fonts.cdnfonts.com/css/waltograph');

/* ---- GLOBAL STYLES ---- */
*, p, a, form, li, .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
  font-family: 'Waltograph', 'Comic Sans MS', cursive !important;
  font-size: 12px !important;
  color: #5C3D5E !important;
  text-shadow: 1px 1px 0px rgba(255,255,255,0.5) !important;
  letter-spacing: 0.5px;
}

/* ---- BODY / BACKGROUND ---- */
body {
  background-image: url(https://cdn.pixabay.com/animation/2023/07/13/14/26/14-26-15-867_512.gif) !important;
  background-color: #FFF0F5 !important;
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
}

/* ---- TOP NAV / HEADER BAR ---- */
.top, .links, .heading, footer, button {
  background-color: #FFB6D9 !important;
}

/* ---- MINNIE MOUSE HEADER IMAGE ---- */
main::before {
  width: 100%;
  height: 220px;
  display: block;
  content: "";
  background-image: url('https://plain-wnam-prod-public.komododecks.com/202607/04/p7jeaIwCrN08IGPYCSZx/image.jpg');
  background-position: center center;
  background-size: cover;
  border-radius: 0 0 15px 15px;
  box-shadow: 0 4px 15px rgba(232,88,122,0.3);
  border-bottom: 3px dotted #E8587A;
}

@media only screen and (max-width: 600px) {
  main::before {
    height: 280px;
  }
}

/* ---- HEADING STYLES ---- */
h1 {
  font-family: 'Waltograph', cursive !important;
  color: #E8587A !important;
  font-size: 28px !important;
  text-shadow: 2px 2px 0px rgba(255,183,217,0.8), -1px -1px 0px rgba(255,255,255,0.9) !important;
  letter-spacing: 2px;
}

h4 {
  color: #C44D6C !important;
  font-family: 'Waltograph', cursive !important;
}

/* ---- MAIN CONTENT AREA ---- */
main {
  background: linear-gradient(135deg, #FFF5F8 0%, #FFEEF5 50%, #FFF0F5 100%);
  color: #5C3D5E;
  padding: 8px 0px;
  font-size: 85%;
  position: relative;
}

/* ---- BLOG ENTRY / MAIN TEXT AREA WITH DISNEY WALLPAPER ---- */
.blog-entry, .edit-info {
  background-image: url('https://plain-wnam-prod-public.komododecks.com/202607/04/nctTvO2UURfaKtMAmj5e/image.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  border: 3px dotted #FF83BA !important;
  border-radius: 15px !important;
  padding: 15px !important;
  overflow-wrap: break-word;
  word-break: break-word;
  position: relative;
  box-shadow: 0 4px 20px rgba(232,88,122,0.2) !important;
}

/* Text readability overlay on wallpaper */
.blog-entry p, .blog-entry h1, .blog-entry h2, .blog-entry h3,
.blog-entry h4, .blog-entry h5, .blog-entry h6, .blog-entry li,
.blog-entry span, .blog-entry a, .edit-info p, .edit-info span {
  background: rgba(255,240,245,0.85) !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  display: inline !important;
  font-family: 'Waltograph', cursive !important;
  color: #5C3D5E !important;
  text-shadow: 1px 1px 0px rgba(255,255,255,0.9) !important;
}

/* ---- SECTION BORDERS ---- */
.contact, .url-info, .table-section, .profile-info {
  border-color: #FFB6D9 !important;
  border-radius: 12px !important;
}

/* ---- TABLE CELLS ---- */
td {
  background-color: #FFF5F8 !important;
  border-radius: 8px !important;
}

/* ---- INPUT & BUTTONS ---- */
input, button:not(.logout-btn) {
  border: 2px groove #FFB6D9 !important;
  background-color: #FFF0F5 !important;
  border-radius: 10px !important;
  color: #C44D6C !important;
}

/* ---- PROFILE PICTURE ---- */
.pfp-fallback, .row.profile {
  border: 3px dotted #FF83BA !important;
  border-radius: 15px !important;
}

.profile-pic > img {
  display: none;
}

/* ---- MICKEY MOUSE PIXEL ART GIF (bottom-right, NO white bg) ---- */
footer::after {
  bottom: 10px;
  font-size: 0;
  right: 5%;
  left: auto;
  position: fixed;
  pointer-events: none;
  content: url("https://plain-wnam-prod-public.komododecks.com/202607/04/E2iMw7KuvUfa4ZBmygiY/image.gif");
  animation: floating 3s ease-in-out infinite;
  z-index: 100;
  /* Remove white background - multiply blends white into transparent */
  mix-blend-mode: multiply;
  filter: drop-shadow(2px 2px 4px rgba(232,88,122,0.4));
  /* Scale it up so it's more visible */
  transform: scale(2);
  transform-origin: bottom right;
}

/* ---- REPLACE ICONS WITH MICKEY MOUSE EMOTICONS ---- */
.icon, .award img {
  content: url(https://plain-wnam-prod-public.komododecks.com/202607/04/kYlpHn4PoAxLlmw1VxM8/image.jpg) !important;
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.3em;
  color: rgba(0, 0, 0, 0);
  border-radius: 50%;
}

/* ---- FRIENDS GRID ---- */
.friends-grid .person {
  background-color: #FFE4EE !important;
  margin: 0px;
  border-radius: 10px !important;
  border: 2px dotted #FFB6D9 !important;
}

.friends-grid .person img {
  mix-blend-mode: overlay;
}

/* ---- LINKS ---- */
a {
  color: #E8587A !important;
  text-decoration: none !important;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
  color: #C44D6C !important;
  text-shadow: 2px 2px 4px rgba(232,88,122,0.4) !important;
}

/* ---- CUSTOM CURSOR (mini mickey heads) ---- */
* {
  cursor: url(https://64.media.tumblr.com/6ba135e315456468784576cb299b257a/0ae5bc74dc7ccadb-d7/s75x75_c1/b9ca0c3895fc4faf3abb5d3d9ed0e533d2dec47b.gifv), auto !important;
}

A:hover {
  cursor: url("https://64.media.tumblr.com/7fa0f13e7b017aa1d0b187c05aaf44ce/0ae5bc74dc7ccadb-ca/s75x75_c1/f2c8d2fd439d19fa3296f53d81814b99cd2de533.gifv"), auto !important;
}

/* ---- LOGO SIZE ---- */
.logo-fallback {
  height: 38px !important;
}

/* ---- SPARKLE / HOVER GLOW EFFECTS ---- */
.blog-entry:hover, .contact:hover, .url-info:hover, .table-section:hover, .profile-info:hover {
  box-shadow: 0 0 20px rgba(232,88,122,0.3), 0 0 40px rgba(255,182,217,0.2) !important;
  transition: box-shadow 0.4s ease !important;
}

/* ---- DISNEY SPARKLE ANIMATION ON SECTIONS ---- */
@keyframes sparkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; filter: brightness(1.1); }
}

.contact, .url-info, .table-section, .profile-info {
  animation: sparkle 4s ease-in-out infinite;
}

/* ---- ONLINE INDICATOR ---- */
.online {
  content: url('https://64.media.tumblr.com/554d4293a29748d19e64b57fdaecd47a/e2a17b4ac5839e98-9e/s250x400/3a8df44259df07e1f7567df178b598f0bd141d59.webp');
  background-repeat: no-repeat;
  background-position: -15% 75%;
  z-index: 2;
}

/* ---- DISNEY COLOR ACCENTS ON SECTIONS ---- */
.table-section {
  background: linear-gradient(180deg, #FFF5F8, #FFE8F0) !important;
  border: 2px solid #FFB6D9 !important;
  border-radius: 12px !important;
}

.profile-info {
  background: linear-gradient(180deg, #FFF0F5, #FFD6E8) !important;
  border: 2px solid #FF83BA !important;
}

/* ---- DISNEY PASTEL SCROLLBAR ---- */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #FFF0F5;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FFB6D9, #FF83BA);
  border-radius: 10px;
  border: 2px solid #FFF0F5;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FF83BA, #E8587A);
}