/*
Theme Name: Intentionally Blank
Theme URI: https://www.nilovelez.com/blank/
Author: Nilo Velez
Author URI: https://www.nilovelez.com/
Description: This theme was intentionally left blank. There are times when all you need is the WordPress dashboard and an blank frontend. You might be using the WordPress REST API as a backend for a mobile App or you might be a minimalism obsessed hipster. This is your theme.
Version: 3.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: featured-images, custom-background, theme-options, translation-ready
Text Domain: intentionally-blank
Requires at least: 4.6
Tested up to: 6.6
Requires PHP: 7.4
*/

html,
body {
    min-height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 13px;
    line-height: 1.4em;
    margin: 0;
}

body {
    background-color: #f5f5f5;
    background-color: #f6c5fb;
    background-size: cover;
}

iframe {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: unset;
}

/* 3D stage and stacking */
.stage {
    position: relative;
    width: 100vw;
    height: 100vh;
    perspective: 900px;
    perspective-origin: 50% 50%;
}

#pink-void {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: #f6c5fb;
    opacity: 1;
    transition: opacity 0.6s linear;
}

.voidless {
    opacity: 0 !important;
}

.face {
    position: absolute;
    inset: 0;
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform;
}

/* FRONT: home image (starts at 0deg) */
#home-image {
    z-index: 2;
    position: relative;
    display: grid;
    place-items: center;
    height: 100%;
    transform: rotateY(0deg);
    transition: transform 0.6s ease-in;
    backface-visibility: hidden;
}

#home-image.spin90 {
    transform: rotateY(90deg);
}

.fit-box {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.fit-box>img {
    display: block;
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    opacity: 1;
    transition: opacity .14s linear;
    will-change: opacity;
}

#heroVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .14s linear;
    will-change: opacity;
    z-index: 1;
    pointer-events: none;
    margin: 0px 0 0 0px;
}

.fit-box.playing>img {
    opacity: 0;
}

.fit-box.playing #heroVideo {
    opacity: 1;
}

/* BACK: page (starts hidden at -90deg) */
#page {
    top: 0px;
    z-index: 2;
    transform: scale(0) rotateY(-90deg);
    transition: transform 0.4s ease-out;
    display: flex;
    justify-content: center;
    align-items: start;
    xbackground: white;
    height: 100vh;
    width: 100vw;
    left: 0vw;
}

#page.reveal0 {
    transform: scale(1) rotateY(0deg);
}

@media (prefers-reduced-motion: reduce) {

    #home-image,
    #page {
        transition: none;
    }
}

#logo {
    position: absolute;
    /* width/left/top will be set in JS as exact pixels */
    transform: translateX(-50%) rotate(-0.9deg) translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--s, 1));
    transition: transform 0.6s ease-out;
    z-index: 2;
    pointer-events: none;
}

#logo.flat {
    transform: translateX(-47%) rotate(-0deg)
}

svg {
    text-rendering: geometricPrecision;
}

#logo .ctrl {
    pointer-events: auto;
    position: absolute;
    display: none;
}

#logo svg {
    width: 100%;
    height: auto;
    display: block;
}

#logo text {
    stroke-width: 1%;
    paint-order: stroke;
}

input[type="range"] {
    flex: 1
}

.label {
    min-width: 8ch;
    text-align: right;
    font-variant-numeric: tabular-nums
}

/* OS-GUI */

:root {
    --bar-h: 44px;
    --bar-bg: #0f172a;
    /* slate-900 */
    --bar-fg: #e2e8f0;
    /* slate-200 */
    --accent: #60a5fa;
    /* blue-400 */
}

/* Top bar */
#top-bar {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--bar-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 10px;
    background: var(--bar-bg);
    color: var(--bar-fg);
    font: 500 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    z-index: 1000;
}

#top-bar {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 30px;
    background: #f48aff;
    filter: drop-shadow(0px 0px 2px #0003);
    opacity: 0;
    transition: opacity 0.6s linear;
}

.visible {
    opacity: 1 !important;
}

#top-bar .left {
    justify-self: start;
    display: flex;
    gap: 10px;
    width: 44px;
    height: 100%;
    align-items: center;
}

#top-bar .center {
    justify-self: center;
}

#top-bar .right {
    justify-self: end;
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
    right: 10px;
}

#os-icon {
    background-image: url(/wp-content/uploads/2025/08/os-icon.png);
    width: 100%;
    height: 78%;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Clock */
#clock {
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: #ac00b5;
    min-width: 90px;
    text-align: center;
}

/* Shutdown menu */
.menu {
    position: relative;
}

.menu-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 10px;
    border: none;
    border-radius: 0px;
    background: rgba(255, 255, 255, 0);
    color: #902a95;
    cursor: pointer;
}

.menu-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.caret {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
}

.menu-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    padding: 6px;
    background: #c245ff87;
    /* gray-900 */
    color: var(--bar-fg);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    box-shadow: -2px 4px 7px #0000001f;
    display: none;
}

.menu[aria-expanded="true"] .menu-popover {
    display: block;
}

.menu-group {
    padding: 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
}

.menu-item {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: inherit;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}

.menu-item:hover,
.menu-item:focus {
    background: rgba(96, 165, 250, .18);
    /* blue-400 @ ~18% */
    outline: none;
}

.menu-sep {
    height: 1px;
    margin: 6px 2px;
    background: rgba(255, 255, 255, .1);
    border: 0;
}


#desktop {
    position: relative;
    width: 100vw;
    height: 100vh;
    top: 30px;
    /* or your own height */
    overflow: hidden;
    user-select: none;
    -webkit-user-drag: none;
    xbackground: linear-gradient(#4c7bd7, #2a5dbb);
    /* optional backdrop */
    font: 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Icon block */
#desktop .icon {
    position: absolute;
    width: 88px;
    /* text wraps under icon */
    text-align: center;
    cursor: default;
    touch-action: none;
    /* enables Pointer Events dragging on touch */
    will-change: transform;
}

.icon-img {
    width: 64px;
    height: 64px;
    margin: 6px auto 6px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
    pointer-events: none;
    /* makes dragging easier from the image */
}

.icon-label {
    max-width: 100%;
    padding: 2px 6px;
    border-radius: 8px;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Selection look */
.icon.selected .icon-label {
    background: #fe2bff;
}

/* While dragging */
.icon.dragging {
    opacity: 0.9;
    z-index: 9999;
}

/* Focus ring (keyboard nav) */
.icon:focus-visible .icon-label {
    outline: 2px solid #cbd9ff;
    outline-offset: 2px;
}

/* Demo page filler so you can scroll under the fixed bar */
main {
    padding-top: calc(var(--bar-h) + 20px);
    max-width: 800px;
    margin: 0 auto;
}

#dock {
    position: fixed;
    bottom: 0px;
    height: 50px;
    background: #f493ff6b;
    border-radius: 14px;
    display: flex;
    align-items: normal;
    justify-content: center;
    z-index: 20;
}

#browser-icon {
    background-image: url(/wp-content/uploads/2025/08/browser-icon.png);
    background-size: contain;
    width: 66px;
    height: 66px;
    background-repeat: no-repeat;
    background-position: center;
    margin: -25px 0 0 0;
    padding-left: 13px;
    padding-right: 13px;
}

#browser-icon:hover,
#btn-min:hover,
#btn-max:hover,
#btn-close:hover {
    filter: brightness(1.2);
}

/* BROWSER */

blueprint-browser {
    position: absolute;
    top: 110px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(14px 14px 6px #0002);
}

:host {
    display: block;
    width: 64vw;
    min-width: 520px;
    height: calc(100vh - 265px);
    box-sizing: border-box;
}

:host(.maximized) .chrome-top {
    cursor: default;
}

:host(.maximized) .resizer {
    display: none;
}

.browser {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 100% 100%);
    background: transparent;
    /* <- change this */
    overflow: visible;
    border-radius: 20px;
    box-shadow: 0 14px 40px rgba(14, 42, 56, 0.18);
    position: relative;
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    transform-origin: 50% 50%;
    transition: transform .28s ease, opacity .28s ease;
    transform: translate(var(--dx, 0), var(--dy, 0)) scale(var(--scale, 1));
    opacity: var(--browser-opacity, 1);
    will-change: transform, opacity;
}

.reopen {
    margin: 12px 0px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 2px solid #b75bff;
    position: fixed;
    bottom: 80px;
    color: #6600b5;
    background: #ffffff4d;
}

.resizer {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 3px solid #b75bff;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .06);
    touch-action: none;
    /* prevent scroll on touch drag */
    z-index: 2;
    /* above rainbow borders */
    opacity: 0;
}

/* Corners */
.resizer.se {
    right: -7px;
    bottom: -7px;
    cursor: nwse-resize;
}

.resizer.ne {
    right: -7px;
    top: -7px;
    cursor: nesw-resize;
}

.resizer.sw {
    left: -7px;
    bottom: -7px;
    cursor: nesw-resize;
}

.resizer.nw {
    left: -7px;
    top: -7px;
    cursor: nwse-resize;
}

/* (Optional) Edges */
.resizer.e {
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 24px;
    cursor: ew-resize;
}

.resizer.w {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 24px;
    cursor: ew-resize;
}

.resizer.s {
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 12px;
    cursor: ns-resize;
}

.resizer.n {
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 12px;
    cursor: ns-resize;
}

.rainbow-borders {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    clip-path: polygon(50% -30px,
            50% -30px,
            50% calc(100% + 30px),
            50% calc(100% + 30px));
    transition: clip-path 0.3s linear;
}

.rainbow-border-2 {
    clip-path: polygon(-30px -30px,
            calc(100% + 30px) -30px,
            calc(100% + 30px) 0px,
            calc(0% - 30px) 10px);
}

.rainbow-border-3 {
    clip-path: polygon(-30px -30px,
            calc(100% + 30px) -30px,
            calc(100% + 30px) 100%,
            calc(0% - 30px) 100%);
}

.rainbow-border-final {
    clip-path: polygon(-30px -30px,
            calc(100% + 30px) -30px,
            calc(100% + 30px) calc(100% + 30px),
            -30px calc(100% + 30px));
}

.rainbow-borders div {
    position: absolute;
}

.rainbow-purple {
    background: #dd55ff;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: 23px;
    top: -5px;
    left: -5px;
}

.rainbow-blue {
    background: #5599ff;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    border-radius: 27px;
    top: -10px;
    left: -10px;
}

.rainbow-teal {
    background: #55ffdd;
    width: calc(100% + 30px);
    height: calc(100% + 30px);
    border-radius: 31px;
    top: -15px;
    left: -15px;
}

.rainbow-yellow {
    background: #ddff55;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    border-radius: 34px;
    top: -20px;
    left: -20px;
}

.rainbow-orange {
    background: #ff9955;
    width: calc(100% + 50px);
    height: calc(100% + 50px);
    border-radius: 37px;
    top: -25px;
    left: -25px;
}

.rainbow-red {
    background: #ff5555;
    width: calc(100% + 60px);
    height: calc(100% + 60px);
    border-radius: 40px;
    top: -30px;
    left: -30px;
    --notch-w: 240px;
    /* total width of the cutout at the top */
    --notch-h: 40px;
    /* depth of the cutout */
    --slope: 0px;
    /* how far the diagonal runs inward from the top */
    /* optional safety so it doesn’t overflow on tiny screens */
    --notch-w: clamp(126px, 30vw, 182px);
    clip-path: polygon(0 0,
            calc(50% - var(--notch-w)/2 - var(--slope)) 0,
            calc(50% - var(--notch-w)/2) var(--notch-h),
            calc(50% + var(--notch-w)/2) var(--notch-h),
            calc(50% + var(--notch-w)/2 + var(--slope)) 0,
            100% 0,
            100% 100%,
            0 100%);
}

.browser-background {
    background: #ffffff;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    position: absolute;
    z-index: -1;
}

.browser-sparkle {
    background: url(/wp-content/uploads/2025/08/animated-sparkle-overlay-for-photoshop-thumb38.gif);
    width: calc(100% + 60px);
    height: calc(100% + 60px);
    border-radius: 40px;
    top: -30px;
    left: -30px;
    position: absolute;
    z-index: -1;
    mix-blend-mode: screen;
    background-size: 41%;
    opacity: 0;
    transition: opacity 0.3s linear;
    --notch-w: 240px;
    --notch-h: 40px;
    --slope: 0px;
    --notch-w: clamp(126px, 30vw, 184px);
    clip-path: polygon(0 0,
            calc(50% - var(--notch-w)/2 - var(--slope)) 0,
            calc(50% - var(--notch-w)/2) var(--notch-h),
            calc(50% + var(--notch-w)/2) var(--notch-h),
            calc(50% + var(--notch-w)/2 + var(--slope)) 0,
            100% 0,
            100% 100%,
            0 100%);
}

.window-controls {
    display: flex;
    gap: 4px;
}

.wc-btn {
    width: 23px;
    height: 23px;
    border: none;
    border-radius: 4px;
    background: #e6c5ed;
    display: flex;
    place-items: center;
    cursor: pointer;
    transition: transform .08s ease;
    filter: drop-shadow(0px 0px 0px #ffffff63);
}

#btn-min {
    background: #ffcaa8;
    border: 2px solid #fd9859;
}

#btn-min svg {
    stroke: #4f1e00;
}

#btn-max {
    background: #a6caff;
    border: 2px solid #5599ff;
}

#btn-max svg {
    stroke: #0066ff;
}

.maximized {}

#btn-close {
    background: #ffa3a5;
    border: 2px solid #fd5457;
}

#btn-close svg {
    stroke: #890002;
}


.wc-btn:active {
    transform: translateY(1px);
}

.wc-btn svg {
    width: 12px;
    height: 12px;
    xstroke: #2b6b8a;
}

.chrome {
    background: linear-gradient(180deg, #ffaef9, #9779f4);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    padding: 12px 18px;
}

.chrome-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    cursor: move;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}

.tabs {
    display: flex;
    background: transparent;
    border: 0;
    align-items: flex-end;
}

.tab {
    position: relative;
    padding: 5px 16px;
    border-bottom-width: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 14px;
    background: #dba9f9;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    border: none;
    filter: drop-shadow(1px -1px 0px #ffffff63);
}

.tab:not(.active) {
    opacity: .75;
}

.tab.active {
    background: #e6bbff;
}

.chrome-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 80px;
    /* was: auto 1fr 80px */
    align-items: center;
    gap: 16px;
}

.nav-buttons {
    display: flex;
    gap: 14px;
    align-items: center;
}

.nav-btn {
    width: 40px;
    height: 40px;
    border: 3px solid #b75bff;
    border-radius: 10px;
    background: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .04);
    transition: background .15s ease, transform .08s ease, opacity .15s ease;
}

.nav-btn:active {
    transform: translateY(1px);
}

.nav-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

.nav-btn svg {
    width: 20px;
    height: 20px;
    stroke: #7334a5;
}

.search-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.search-wrap,
.search {
    min-width: 0;
}

.search input {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    width: 100%;
    height: 38px;
    padding: 0 0px 0 42px;
    border-radius: 28px;
    background: #fff;
    font-size: 16px;
    outline: none;
    border: none;
}

.search .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    stroke: #2b6b8a;
}

.profile {
    place-self: center end;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    xborder: 1px solid #832b8a;
    background: radial-gradient(circle at 30% 30%, #c7edff, #8fd6ff 60%, #69c3f6);
}

.profile .image {
    width: 100%;
    height: 100%;
    background-image: url(/wp-content/uploads/2025/08/liznbow_portrait-1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.view {
    margin: 0 18px 18px;
    border-radius: 16px;
    background: #fff;
    flex: 1 1 auto;
    /* take remaining space */
    min-height: 0;
    height: 420px;
    /* allow shrinking below content/mins */
    overflow: auto;
    padding: 18px 2px 0 0;
    box-shadow: inset 0 6px 0 rgba(0, 0, 0, 0.03);
}

.view h1 {
    margin: 0 0 10px;
    font-size: 22px;
}

.view p {
    line-height: 1.6;
    margin: 8px 0;
}

.toast {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #163a49;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.toast.show {
    opacity: .9;
}

@media (max-width: 720px) {
    .nav-buttons {
        gap: 10px;
    }

    .nav-btn {
        width: 36px;
        height: 36px;
    }

    .profile {
        width: 44px;
        height: 44px;
    }

    .tab {
        padding: 8px 12px;
        font-size: 14px;
    }

    .view {
        min-height: 320px;
    }
}