/* ============================================================ MKF Grand Rebrand - dw_theme.css Shared theme for the iframe architecture. Layers (parent index.php): canvas (back) -> #TheMainFrame iframe -> menu chrome (front). z-index is used ONLY on the menu chrome; everything else relies on DOM source order. Palette is a ~5-part greyscale; seasonal themes swap the same vars. ============================================================ */ :root { /* ~5-part tunable palette (greyscale now; theme engine swaps later) */ --dwP1:#0e0d0b; /* stage / deepest */ --dwP2:#1b1a17; /* tile base */ --dwP3:#26241f; /* tile raised / preview */ --dwP4:#8f8a80; /* muted accent */ --dwP5:#f2efe9; /* text / light */ --dwAccent:#dcdcdc; /* selection accent (greyscale) */ --dwBorder:#4a4a4a; /* unselected control outline */ --dwGap:12px; --dwRadius:16px; --dwBarH:52px; --dwEase:cubic-bezier(.22,.61,.36,1); /* The ONLY z-index in the system: the top menu chrme group. scrim(base) < drawer(+1) < bars(+2). Everything else = DOM order. The iframe's own z-index is set in index.php. */ --dwZMenu:1000; } /* Seasonal alternates: same 5 vars, add color. Toggle by setting a class on or (e.g. ). */ .theme-christmas { --dwP1:#0a0f0b; --dwP2:#14201a; --dwP3:#1d3026; --dwP4:#8ca894; --dwP5:#f2efe9; --dwAccent:#c8402f; --dwBorder:#3a5a48; } .theme-autumn { --dwP1:#120d09; --dwP2:#221812; --dwP3:#33231a; --dwP4:#b08d6a; --dwP5:#f4ece2; --dwAccent:#c8792f; --dwBorder:#5a4230; } *{box-sizing:border-box} /* Transparent by default so the live 3D canvas behind the iframe shows through anywhere content is not painted. Pages paint their own opaque stage layer above the canvas when they do not want see-through. */ html,body{margin:0;background:transparent} /* ============================================================ PAGE FADE (used by dw_drive.js for iframe-content swaps) A page starts faded out, then .dwPageIn fades it in. On leaving, .dwPageOut fades it out before the iframe navigates. ============================================================ */ .dwPage { opacity:0; transition:opacity .35s var(--dwEase); } .dwPage.dwPageIn{opacity:1} .dwPage.dwPageOut{opacity:0} /* ============================================================ ICON FONT (user's dwIcons.ttf) ============================================================ */ @font-face { font-family:'dwIcons'; src:url('dwIcons.ttf') format('truetype'); font-weight:normal; font-style:normal; } .dwIcon { font-family:'dwIcons'; font-style:normal; font-weight:normal; line-height:1; -webkit-font-smoothing:antialiased; font-size: 32px; color: var(--dwP5); } /* ============================================================ BRAND / DISPLAY FONT (user's abuget.ttf) Referenced relatively so it resolves next to this CSS file (/mykindafit/assets/abuget.ttf) both locally and on the live site. Drop abuget.ttf into the assets folder alongside dwIcons.ttf. ============================================================ */ @font-face { font-family:'abuget'; src:url('abuget.ttf') format('truetype'); font-weight:normal; font-style:normal; } /* centered brand group: logo image + title text, sitting between the menu button (left) and login button (right). flex:1 lets it take the middle space and center its contents. */ .dwBrandGroup { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; pointer-events:none; user-select:none; } .dwLogo { height:calc(var(--dwBarH) - 18px); width:auto; flex:0 0 auto; object-fit:contain; display:block; } .dwBrand { font-family:'abuget', cursive; font-size:26px; line-height:1; color:var(--dwP5); letter-spacing:.5px; -webkit-font-smoothing:antialiased; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } /* ============================================================ MENU CHROME (lives in the PARENT index.php, over the iframe) The only place z-index is used. ============================================================ */ /* fixed top/bottom bars + persistent HUD. +2 keeps the HUD above the drawer(+1) and scrim(base). */ .dwBar { position:fixed; left:0; right:0; z-index:calc(var(--dwZMenu) + 2); height:var(--dwBarH); display:flex; align-items:center; justify-content:space-between; padding:0 10px; background:color-mix(in srgb, var(--dwP2) 82%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--dwP5); } .dwBarTop{top:0;box-shadow:0 8px 20px rgba(0,0,0,.45)} .dwBarBottom{bottom:0;box-shadow:0 -8px 20px rgba(0,0,0,.45)} .dwBarBtn { background:transparent; border:none; color:var(--dwP5); font-size:22px; cursor:pointer; padding:6px 10px; display:inline-flex; align-items:center; gap:6px; } .dwBarBtn:hover{color:var(--dwAccent)} .dwPower{color:var(--dwAccent)} /* power/login glows accent */ .dwPower:hover{color:var(--dwP5)} .dwHud{display:inline-flex;align-items:center;gap:6px;font-size:13px} .dwHudBtn{background:transparent;border:none;color:var(--dwP5);cursor:pointer; font-size:20px;display:inline-flex;align-items:center;gap:4px} .dwHudBtn.win{animation:dwWin .35s var(--dwEase)} .dwHudBtn.win .dwIcon{color:var(--dwAccent)} @keyframes dwWin{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}} /* scrim: blur-behind + interaction trap (base of the menu group) */ .dwScrim { position:fixed; inset:0; z-index:var(--dwZMenu); background:rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:opacity .3s var(--dwEase); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } .dwScrim.show{opacity:1;pointer-events:auto} /* drawer: slide-in menu, above scrim, below bars */ .dwDrawer { position:fixed; top:var(--dwBarH); left:0; z-index:calc(var(--dwZMenu) + 1); width:min(88vw,360px); max-height:calc(100dvh - var(--dwBarH)*2); display:flex; flex-direction:column; background:var(--dwP2); border-radius:0 0 var(--dwRadius) 0; box-shadow:12px 12px 40px rgba(0,0,0,.55); transform:translateX(-105%); transition:transform .32s var(--dwEase); overflow-y:auto; } .dwDrawer.show{transform:none} .dwDrawerItem { padding:14px 18px; color:var(--dwP5); border-bottom:1px solid rgba(255,255,255,.06); cursor:pointer; font-size:15px; display:flex; align-items:center; gap:10px; } .dwDrawerItem:hover{background:var(--dwP3)} /* ============================================================ 3D MODE Hiding the whole iframe is what lets pointer input reach the canvas behind it - an iframe eats input even when transparent. The menu bars stay drawn over the canvas, which is intended. ============================================================ */ body.dw3D #TheMainFrame{visibility:hidden;pointer-events:none;} /* small hint shown while in 3D mode */ #dw3DHint { position:fixed; left:50%; bottom:calc(var(--dwBarH) + 12px); transform:translateX(-50%); z-index:calc(var(--dwZMenu) + 2); padding:6px 14px; border-radius:999px; background:color-mix(in srgb, var(--dwP2) 90%, transparent); color:var(--dwP5); font-size:12px; border:1px solid var(--dwBorder); opacity:0; pointer-events:none; transition:opacity .25s var(--dwEase); } body.dw3D #dw3DHint{opacity:1} /* ============================================================ SHARED CONTROLS (used inside content pages) Unselected controls get an outer border for contrast; selected controls get the accent ring. ============================================================ */ .dwBtn { background:var(--dwP3); color:var(--dwP5); border:1.5px solid var(--dwBorder); border-radius:999px; padding:10px 18px; font-size:14px; font-weight:600; cursor:pointer; transition:border-color .2s var(--dwEase), background .2s var(--dwEase); } .dwBtn:hover{border-color:var(--dwAccent)} .dwBtn.accent{background:var(--dwAccent);color:var(--dwP1);border-color:var(--dwAccent)} .dwBtn.ghost{background:transparent} .dwTileTitle { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:600; letter-spacing:.04em; color:#cfc8ba; text-align:center; padding:0 12px; font-size:32px; text-shadow: 2px 2px 1px #000000; }