← Back to Layouts
Howls moving castle wip-

Name: FriendRewind
Author: FriendRewind
Author: Corpse-princess2.0
Category: Classic
Created: October 12, 2026
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style id="fr-vb2">
/* VB2_STATE:{"cursorUrl":"","overlayUrl":"","overlayOpacity":0.2,"avatarAnimation":"","pageFont":"","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"","pageBgMode":"cover","heroImageUrl":"","profileRowBgImage":"","profileRowBgMode":"cover","navBgColor":"#2b333f","navBgImage":"","navBgMode":"cover","navLinkColor":"#ffffff","navLinkHover":"#66aaff","boxBgColor":"#ffffff","boxOpacity":1,"boxRadius":8,"contactHeaderBg":"#4169E1","contactHeaderText":"#ffffff","contactContentBg":"#ffffff","contactBorderColor":"#4169E1","contactBorderWidth":1,"contactBorderRadius":5,"contactBoxAnimation":"","interestsHeaderBg":"#DAA520","interestsHeaderText":"#ffffff","interestsContentBg":"#ffffff","interestsBorderColor":"#DAA520","interestsBorderWidth":1,"interestsBorderRadius":5,"contentBoxAnimation":"","textBody":"#000000","textHeading":"#000000","textLink":"#0066cc","headingShadowColor":"#000000","headingShadowBlur":2,"headingShadowEnable":false,"moduleImages":{"contact":"","urlInfo":"","tableSection":"","tunes":"","blogPreview":"","blurbs":"","friends":"","Comments Background":"","comments":""}} */
/* Generated by FriendRewind.com Visual Builder */
</style><style>


/* FR_MANUAL_EXTRAS */
</style><div class="nxe-backdrop" aria-hidden="true"></div>
<div class="nxe-floor" aria-hidden="true"></div>
<div class="nxe-bokeh" aria-hidden="true"></div>
<div class="nxe-channels" aria-hidden="true">
    <span class="nxe-chan">The Wired</span>
    <span class="nxe-chan">Protocol 7</span>
    <span class="nxe-chan">Cyberia</span>
    <span class="nxe-chan">Layer 03 </span>
    <span class="nxe-chan nxe-chan-active">Lain</span>
</div>
<div class="nxe-pan-zone nxe-pan-far-left" aria-hidden="true"></div>
<div class="nxe-pan-zone nxe-pan-near-left" aria-hidden="true"></div>
<div class="nxe-pan-zone nxe-pan-near-right" aria-hidden="true"></div>
<div class="nxe-pan-zone nxe-pan-far-right" aria-hidden="true"></div>
<div class="nxe-pan-arrow nxe-pan-arrow-left" aria-hidden="true"></div>
<div class="nxe-pan-arrow nxe-pan-arrow-right" aria-hidden="true"></div>
<div class="nxe-hud" aria-hidden="true">
    <div class="nxe-counter"><span class="nxe-idx">1</span> of <span class="nxe-total">6</span></div>
    <div class="nxe-select"><span class="nxe-a-btn">A</span> Select</div>
</div>
<div class="nxe-guide" aria-hidden="true"></div><style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

/* =========================================================
   0. RESET / BACKDROP
   ========================================================= */
body.profile-page,
body.profile-page.theme-dark,
body.profile-page.theme-light {
    background: #0a0a0a !important;
    color: #ffffff !important;
    font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    height: 100vh !important;
}
html:has(body.profile-page) {
    overflow: hidden !important;
    height: 100vh !important;
}
body.profile-page main { background: transparent !important; }
body.profile-page .master-container {
    background: transparent !important;
    box-shadow: none !important;
}

/* The site renders user layout HTML in TWO places: once inside .blurbs
   (legacy) and once inside .fr-layout-html as a direct child of <main>.
   Hide the in-blurbs copy so only the clean overlay version is visible
   and `position: fixed` chrome actually anchors to the viewport. */
body.profile-page .blurbs .nxe-backdrop,
body.profile-page .blurbs .nxe-floor,
body.profile-page .blurbs .nxe-bokeh,
body.profile-page .blurbs .nxe-channels,
body.profile-page .blurbs .nxe-pan-zone,
body.profile-page .blurbs .nxe-pan-arrow,
body.profile-page .blurbs .nxe-hud,
body.profile-page .blurbs .nxe-guide {
    display: none !important;
}

/* Defensively undo any FR rule that would re-trap fixed descendants
   (e.g. the mobile/coarse-pointer `.inner { contain: content }` rule). */
body.profile-page .fr-layout-html,
body.profile-page .fr-layout-html * {
    contain: none !important;
    content-visibility: visible !important;
}

/* Full-viewport NXE sky + Frutiger Aero wallpaper backdrop */
.nxe-backdrop {
    position: fixed; inset: 0;
    z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 65% 55% at 75% -8%, rgba(255,255,255,0.45) 0%, transparent 60%),
        radial-gradient(ellipse 130% 100% at 50% 50%, rgba(155,205,75,0.22) 0%, transparent 70%),
        linear-gradient(180deg, rgba(226,240,164,0.52) 0%, rgba(163,207,72,0.58) 25%, rgba(94,142,31,0.62) 60%, rgba(45,74,18,0.70) 92%, rgba(22,39,10,0.76) 100%),
        url('https://i.pinimg.com/originals/82/c7/ff/82c7ff8ecd00b79afbcd79cdeb0efc5c.gif')
            no-repeat center center;
    background-size: auto, auto, auto, cover;
    background-blend-mode: normal, normal, multiply, normal;
}

/* =========================================================
   WALLPAPER (body pseudo) — viewport-pinned regardless of DOM position.

   Background:
   The NXE chrome divs (.nxe-backdrop et al.) are emitted by
   profile.php inside .blurbs. .blurbs is a transformed cascade card,
   so any position:fixed descendant is anchored to the card, not to
   the viewport — the wallpaper would be trapped inside a tiny
   rotated rectangle. body::before has no transformed ancestor,
   so position:fixed pins to the initial containing block (the
   viewport) correctly.

   The original .nxe-backdrop rule below is kept as-is (and stays
   hidden inside .blurbs via the existing rule). The body pseudo is
   the actual visible wallpaper layer.
   ========================================================= */
body.profile-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 65% 55% at 75% -8%, rgba(255,255,255,0.45) 0%, transparent 60%),
        radial-gradient(ellipse 130% 100% at 50% 50%, rgba(155,205,75,0.22) 0%, transparent 70%),
        linear-gradient(180deg, rgba(226,240,164,0.52) 0%, rgba(163,207,72,0.58) 25%, rgba(94,142,31,0.62) 60%, rgba(45,74,18,0.70) 92%, rgba(22,39,10,0.76) 100%),
        url('https://i.pinimg.com/originals/82/c7/ff/82c7ff8ecd00b79afbcd79cdeb0efc5c.gif')
            no-repeat center center;
    background-size: auto, auto, auto, cover;
    background-blend-mode: normal, normal, multiply, normal;
}

/* Reflective floor */
.nxe-floor {
    position: fixed; inset: auto 0 0 0; height: 38vh;
    z-index: 1; pointer-events: none;
    background:
        radial-gradient(ellipse 90% 100% at 50% 100%, rgba(200,220,180,0.25) 0%, transparent 60%),
        radial-gradient(ellipse 60% 55% at 50% 100%, rgba(255,255,255,0.18) 0%, transparent 70%),
        linear-gradient(180deg, transparent 0%, rgba(20,35,10,0.45) 55%, rgba(8,16,4,0.8) 100%);
}
.nxe-floor::after {
    content: ''; position: absolute; inset: 35% 0 0 0;
    background:
        repeating-radial-gradient(ellipse 60% 30% at 50% 100%,
            transparent 0px, transparent 24px,
            rgba(255,255,255,0.04) 24px, rgba(255,255,255,0.04) 25px);
    opacity: 0.7;
}

/* Drifting bokeh haze */
.nxe-bokeh {
    position: fixed; inset: -10%; z-index: 1;
    pointer-events: none; mix-blend-mode: screen;
    background:
        radial-gradient(circle 90px at 10% 18%, rgba(255,255,255,0.22), transparent 70%),
        radial-gradient(circle 55px at 25% 70%, rgba(255,255,255,0.16), transparent 70%),
        radial-gradient(circle 40px at 78% 28%, rgba(255,255,255,0.24), transparent 70%),
        radial-gradient(circle 110px at 88% 82%, rgba(255,255,255,0.14), transparent 70%),
        radial-gradient(circle 65px at 48% 12%, rgba(255,255,255,0.18), transparent 70%),
        radial-gradient(circle 50px at 62% 90%, rgba(255,255,255,0.16), transparent 70%),
        radial-gradient(circle 30px at 40% 45%, rgba(255,255,255,0.12), transparent 70%);
    animation: nxe-drift 26s ease-in-out infinite alternate;
}
@keyframes nxe-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(28px, -22px, 0) scale(1.04); }
    100% { transform: translate3d(-12px, 14px, 0) scale(1); }
}

/* =========================================================
   1a. HEADER / NAVBAR — Xbox 360 NXE theme
   Strip all FR blue chrome. The NXE backdrop shows through
   a fully transparent header. Nav links become clean
   Frutiger-light text with a green-glow hover. Dropdowns
   get the frosted dark-glass treatment.
   ========================================================= */

/* ---- outer wrapper: fully invisible ---- */
body.profile-page .myspace-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* ---- top bar (logo + search) ---- */
body.profile-page .myspace-header .top-nav,
body.profile-page .myspace-header .top {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

/* Tone the logo down to a white silhouette that reads on green */
body.profile-page .myspace-header .nav-logo,
body.profile-page .myspace-header #logo {
    filter: brightness(0) invert(1) !important;
    opacity: 0.70 !important;
}

/* Search: frosted pill */
body.profile-page .myspace-header .search-box,
body.profile-page .myspace-header .search-form {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}
body.profile-page .myspace-header .search-input {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    border-right: none !important;
    border-radius: 999px 0 0 999px !important;
    color: #fff !important;
    font: 300 11px/1 'Open Sans', sans-serif !important;
    padding: 5px 12px !important;
    outline: none !important;
    transition: background 0.2s, border-color 0.2s !important;
}
body.profile-page .myspace-header .search-input:focus {
    background: rgba(255,255,255,0.20) !important;
    border-color: rgba(180,30,30,0.55) !important;
}
body.profile-page .myspace-header .search-input::placeholder {
    color: rgba(255,255,255,0.45) !important;
}
body.profile-page .myspace-header .search-button {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.0) 60%),
        linear-gradient(180deg, #550000 0%, #0a0a0a 100%) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    border-left: none !important;
    border-radius: 0 999px 999px 0 !important;
    color: #fff !important;
    font: 600 11px/1 'Open Sans', sans-serif !important;
    padding: 5px 12px !important;
    cursor: pointer !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.45) !important;
    transition: filter 0.15s !important;
}
body.profile-page .myspace-header .search-button:hover {
    filter: brightness(1.12) !important;
}

/* ---- nav-links bar ---- */
body.profile-page .myspace-header .main-nav-wrapper,
body.profile-page .myspace-header .links,
body.profile-page .myspace-header .main-nav-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Individual nav links — NXE channel label style */
body.profile-page .myspace-header .main-nav li a {
    color: rgba(255,255,255,0.68) !important;
    font: 300 12px/1 'Open Sans', 'Segoe UI', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.65) !important;
    text-decoration: none !important;
    padding: 4px 10px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 3px !important;
    transition: color 0.18s, text-shadow 0.18s !important;
}
body.profile-page .myspace-header .main-nav li a:hover,
body.profile-page .myspace-header .main-nav li a.active {
    color: #fff !important;
    background: transparent !important;
    text-shadow:
        0 0 8px rgba(180,30,30,0.95),
        0 0 18px rgba(150,220,40,0.55),
        0 1px 2px rgba(0,0,0,0.6) !important;
}

/* ---- dropdown menus — frosted dark glass ---- */
body.profile-page .myspace-header .dropdown-menu,
body.profile-page .myspace-header li.dropdown > ul,
body.profile-page .myspace-header li.dropdown > div {
    background: linear-gradient(180deg,
        rgba(18,30,6,0.92) 0%,
        rgba(10,18,3,0.96) 100%) !important;
    border: 1px solid rgba(180,30,30,0.28) !important;
    border-radius: 8px !important;
    box-shadow:
        0 12px 32px rgba(0,0,0,0.65),
        0 0 24px rgba(130,210,40,0.10),
        inset 0 1px 0 rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(14px) !important;
    overflow: hidden !important;
}
body.profile-page .myspace-header .dropdown-menu a,
body.profile-page .myspace-header li.dropdown > ul li a,
body.profile-page .myspace-header li.dropdown > div a {
    color: rgba(255,255,255,0.80) !important;
    font: 300 12px/1.4 'Open Sans', sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    padding: 8px 14px !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
    transition: color 0.15s, background 0.15s !important;
    display: block !important;
}
body.profile-page .myspace-header .dropdown-menu a:hover,
body.profile-page .myspace-header li.dropdown > ul li a:hover,
body.profile-page .myspace-header li.dropdown > div a:hover {
    background: linear-gradient(90deg, rgba(180,30,30,0.18) 0%, transparent 100%) !important;
    color: #fff !important;
    text-shadow:
        0 0 6px rgba(180,30,30,0.65),
        0 1px 2px rgba(0,0,0,0.5) !important;
}

/* =========================================================
   1. CHROME — channel list, HUD, guide button
   ========================================================= */

.nxe-channels {
    position: fixed; top: 130px; left: 56px;
    z-index: 50;
    display: flex; flex-direction: column;
    align-items: flex-start;
    pointer-events: none;
    font-weight: 300; line-height: 1.15;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
.nxe-chan {
    color: rgba(255,255,255,0.55);
    padding: 2px 0; letter-spacing: 0.4px;
    font-size: 15px;
    font-style: normal;
    display: block;
}
.nxe-chan:nth-child(1) { color: rgba(255,255,255,0.30); font-size: 12.5px; }
.nxe-chan:nth-child(2) { color: rgba(255,255,255,0.40); font-size: 13.5px; }
.nxe-chan:nth-child(3) { color: rgba(255,255,255,0.50); font-size: 14px; }
.nxe-chan:nth-child(4) { color: rgba(255,255,255,0.62); font-size: 15px; }
.nxe-chan-active {
    color: #ffffff !important;
    font-size: 30px !important;
    margin-top: 4px; font-weight: 300 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 0 24px rgba(180,30,30,0.25);
}

.nxe-hud {
    position: fixed; left: 50%; bottom: 22px;
    transform: translateX(-50%);
    z-index: 50;
    display: flex; flex-direction: row; gap: 18px;
    align-items: center;
    color: #ffffff;
    font-size: 12px; letter-spacing: 0.6px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    pointer-events: none;
}
.nxe-counter { color: rgba(255,255,255,0.85); font-weight: 600; }
.nxe-idx, .nxe-total, .nxe-counter span { font-style: normal; }
.nxe-select  { display: inline-flex; align-items: center; gap: 8px; }
.nxe-a-btn {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #d6f48a 0%, #2a2a2a 55%, #0a0a0a 100%);
    border: 1px solid rgba(255,255,255,0.65);
    display: inline-flex; align-items: center; justify-content: center;
    color: #ffffff; font: 700 11px/1 'Open Sans', sans-serif;
    font-style: normal;
    text-shadow: 0 1px 1px rgba(0,0,0,0.6);
    box-shadow: 0 3px 8px rgba(0,0,0,0.55),
                inset 0 1px 0 rgba(255,255,255,0.5),
                0 0 14px rgba(180,30,30,0.35);
}

.nxe-guide {
    position: fixed; right: 32px; bottom: 24px;
    width: 42px; height: 42px;
    border-radius: 50%; z-index: 50;
    background: radial-gradient(circle at 32% 32%, #f0ffb3 0%, #b6e04f 28%, #5d8e1f 70%, #2c4a10 100%);
    border: 2px solid rgba(255,255,255,0.5);
    box-shadow: 0 0 32px rgba(180,30,30,0.7),
                0 0 8px rgba(255,255,255,0.5) inset,
                0 4px 10px rgba(0,0,0,0.55);
    animation: nxe-pulse 3.6s ease-in-out infinite;
}
.nxe-guide::before {
    content: ''; position: absolute; inset: 28% 28% 28% 28%;
    background:
        radial-gradient(circle, transparent 36%, rgba(255,255,255,0.9) 38%, rgba(255,255,255,0.9) 44%, transparent 46%),
        linear-gradient(45deg, transparent 47%, rgba(255,255,255,0.9) 47%, rgba(255,255,255,0.9) 53%, transparent 53%),
        linear-gradient(-45deg, transparent 47%, rgba(255,255,255,0.9) 47%, rgba(255,255,255,0.9) 53%, transparent 53%);
    border-radius: 50%;
}
@keyframes nxe-pulse {
    0%, 100% { box-shadow: 0 0 28px rgba(180,30,30,0.55), inset 0 0 8px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.55); }
    50%      { box-shadow: 0 0 44px rgba(220,255,120,0.85), inset 0 0 14px rgba(255,255,255,0.7), 0 4px 10px rgba(0,0,0,0.55); }
}

/* (Silhouette removed — CSS-only attempt didn't read like an
   avatar. The dashboard reads fine without it.) */

/* =========================================================
   2. LAYOUT — horizontal NXE blade *track*.
   Every card is the same physical size; you slide through
   them with the mouse-wheel/trackpad/swipe, or just hover
   one of the four edge pan-zones to glide the row left/right
   without touching any input device. Whatever card the mouse
   is over becomes the focused blade.
   ========================================================= */

/* Main: don't force 100vh — the .nxe-backdrop is fixed and covers
   the whole viewport visually, so main can collapse to whatever the
   blade track needs. Forcing 100vh on top of FR's header pushes the
   page taller than the viewport and produces a vertical scrollbar. */
body.profile-page main { padding: 0 !important; min-height: 0 !important; }
body.profile-page { overflow-x: hidden; }

body.profile-page .master-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 5;
}

/* Username promoted to "My Xbox" active-channel slot.
   The channel-list placeholder is hidden so the real username takes
   that visual position. */
body.profile-page .col.w-40.left > span[itemprop="name"] {
    position: fixed !important;
    top: 210px; left: 56px;
    z-index: 51; pointer-events: none;
}
body.profile-page .col.w-40.left > span[itemprop="name"] h1 {
    margin: 0 !important;
    color: #ffffff !important;
   font: 400 52px/1 'Courier New', monospace !important;
    letter-spacing: 4px !important;
  text-transform: lowercase !important;

text-shadow:
    0 0 4px rgba(255,0,0,.4),
    0 0 12px rgba(255,0,0,.15),
    0 2px 4px rgba(0,0,0,.8) !important;
    text-shadow: 0 3px 10px rgba(0,0,0,0.55), 0 0 22px rgba(180,30,30,0.25) !important;
    padding-left: 22px;
    position: relative;
}
/* NXE-style ▸ marker before the active username — matches the
   ">My Xbox" dot/arrow in the real dashboard. */
body.profile-page .col.w-40.left > span[itemprop="name"] h1::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 0; height: 0;
    border-style: solid;
    border-width: 9px 0 9px 12px;
    border-color: transparent transparent transparent #ffffff;
    transform: translateY(-50%);
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
}
/* Tame the verified-staff SVG so it sits nicely next to the
   huge username instead of dwarfing it. */
body.profile-page .col.w-40.left > span[itemprop="name"] h1 .fr-verified-badge svg {
    width: 26px !important; height: 26px !important;
    margin-left: 6px;
    vertical-align: -3px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}
body.profile-page .col.w-40.left > span[itemprop="name"] h1 .profile-role-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    font: 700 11px/1 'Open Sans', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, #b6e04f, #4a7820);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 999px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.55);
    box-shadow: 0 3px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
    vertical-align: middle;
}
.nxe-chan-active { display: none !important; }

/* Flatten the columns so cards become siblings inside .row.profile.
   This lets one rule per card class position it precisely on the
   blade stage, regardless of which column the section lives in. */
body.profile-page .col.w-40.left,
body.profile-page .col.right,
body.profile-page .row.profile .col { display: contents !important; }

/* FR's columns contain a handful of *non-card* siblings (the .mood
   "View my: ..." links, the artist-profile block, raw <script> tags,
  the orphan `<p>Mood: ..</style>