/* THE PHONE FRAME OF THE PUBLIC WEB IN A GLOSSY MATERIAL, ITS BARS OF FROSTED GLASS (2026-10-13). * * His words, with a picture of the phone home (the frame circled) and one of glossy glass panels: "Rrgardig the mobilephome frame, I m more interested in add there more glossy * efect (att1). Some kind of this effect. First show me a styled material in the mobile frame (att2)"; on the proposal: "I like the material", "they need to be totoally * integrated with the frame", the side bumps following the scroll; his choice among the proposals, with its picture: "nos quedamos con este"; and then: "es posible que los * elementos que pasan por detras del header y footer se vean como por detras desenfocadas? es coo una especie de transparencia premium muy sutil y ligera". * * The frame is HIS (view/custom/mi-estilo.css, 1125 px and under): the 45 px header band, its two concave corners (header::before/::after), the tab under it (#topupl::before), * the 12 px sides (#vkLHome's borders), the two side bumps (#vkLHome::before/::after, and the hub page's .detailphoto ones), the foot bar (.sidebarblock), its corners * (::before/::after) and the tab above it (#topupl::after) - a flat #2d2e35. This sheet only dresses those pieces, in his places and sizes, and loads BEFORE his file * (parts/landing.php), so what he writes there still wins. Every piece wears ONE material, fixed to the screen so the pieces read as one surface: a dark glass base, a gloss at * the top, two diagonal streaks of light, a faint cyan glow from the top and green from the bottom. NO RIM where the frame meets the content (his words, 2026-10-13: "quita el * reborde azul de todo el frame! te lo dije antes! no ves que se sobrepone en el header y en el footer?" - it had been asked once already, "si es un problema quita el glow * azul del borde"). * THE BARS ARE FROSTED GLASS: the material of the header band with its corners and tab, and of the foot bar with its corners and tab, is painted once by a layer of its own * (body::before at the top, body::after at the foot) cut to the union of those pieces, a little see-through and blurring what scrolls behind it; those pieces paint nothing * themselves. The radar and the keys stay above it. Dark look only. Known: iOS Safari ignores a background fixed to the screen, so there the sides and bumps would not line up with * the bars; the bumps follow the scroll only where the browser has scroll-driven animations (elsewhere they stay put). */ @media (max-width: 1125px){ html[data-theme="dark"] body.vkLanding{ --vkF-mat: linear-gradient(118deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, .16) 21%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, 0) 29%, rgba(255, 255, 255, 0) 100%), linear-gradient(118deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .10) 64%, rgba(255, 255, 255, 0) 69%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .03) 7%, rgba(255, 255, 255, 0) 14%, rgba(0, 0, 0, 0) 84%, rgba(0, 0, 0, .34) 100%), radial-gradient(95% 34% at 50% 0%, rgba(70, 170, 255, .30), rgba(70, 170, 255, 0) 76%), radial-gradient(95% 26% at 50% 100%, rgba(37, 215, 159, .16), rgba(37, 215, 159, 0) 76%), #1d2029; --vkF-glass: linear-gradient(118deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, .16) 21%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, 0) 29%, rgba(255, 255, 255, 0) 100%), linear-gradient(118deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .10) 64%, rgba(255, 255, 255, 0) 69%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .03) 7%, rgba(255, 255, 255, 0) 14%, rgba(0, 0, 0, 0) 84%, rgba(0, 0, 0, .34) 100%), radial-gradient(95% 34% at 50% 0%, rgba(70, 170, 255, .30), rgba(70, 170, 255, 0) 76%), radial-gradient(95% 26% at 50% 100%, rgba(37, 215, 159, .16), rgba(37, 215, 159, 0) 76%), rgba(35, 40, 52, .52); /* the same material, its base half see-through: what scrolls behind shows, blurred. Over the page's own colour (#17171c, behind the side columns) it gives the opaque material's #1d2029 exactly, so where a glass corner meets an opaque side there is no step */ --vkF-fix: fixed, fixed, fixed, fixed, fixed, fixed; } /* THE BARS' PIECES PAINT NO MATERIAL: the header band, its two concave corners, the two tabs, the foot bar and its two corners - their material is the glass's (body::before and ::after, below), cut to their shapes; they stay where they are (his header keys, the radar and the bar's own links live in them). THEY DRAW THE EDGE (his words, 2026-10-13, with the content's top and foot edges drawn in blue: "coloca un borde un poco reluciente donde te marco en azul", then, with the sides drawn and a gap circled at the bottom right: "acaba de hacer toda la forma con el borde que colocaste, casi lo tenemos"): a 1 px line of light (--vkF-edge) on the frame's side of the content's top and foot - along the band's foot and the bar's top (each in two lengths, around its tab), on the tabs' curve (an SVG stroke, 1 px whatever the stretch) and on the four corners' arc (a ring) - one line all round, no glow (the first rim's glow spread over the bars: "no ves que se sobrepone en el header y en el footer?"); the sides and the bumps carry it too (below). The corners' pieces take the glass's 28 px (the 12 px side + the 16 px arc), the bottom-right one 79 px tall as his bottom-left one (16 px tall, it cut the arc's foot off: "un espacito que no ha de estar"); the top corners' arc is centred 1 px higher than his, so it leaves the band's foot without a step (the glass's mask follows). */ html[data-theme="dark"] body.vkLanding{ --vkF-edge: rgba(215, 232, 255, .34); } html[data-theme="dark"] body.vkLanding header#vkLHead.vkL-head{ /* the id: his band's rule is !important and as specific as this, and his file comes later */ background: linear-gradient(var(--vkF-edge), var(--vkF-edge)) 28px 100% / calc(100% - 259px) 1px no-repeat, linear-gradient(var(--vkF-edge), var(--vkF-edge)) right 28px bottom 0 / 27px 1px no-repeat, transparent !important; /* the band's foot, left of the top tab (28 px .. the tab's 231 px from the right) and right of it (55 .. 28 px from the right) */ box-shadow: none !important; } html[data-theme="dark"] body.vkLanding .sidebarblock{ background: linear-gradient(var(--vkF-edge), var(--vkF-edge)) 28px 0 / calc(33.5% - 46px) 1px no-repeat, linear-gradient(var(--vkF-edge), var(--vkF-edge)) right 28px top 0 / calc(33.5% - 46px) 1px no-repeat, transparent !important; /* the bar's top, either side of the foot tab (a third of the width + 36 px, centred) */ box-shadow: none; } html[data-theme="dark"] body.vkLanding header#vkLHead::before{ width: 28px; background: radial-gradient(circle at 0 calc(100% - 1px), rgba(0, 0, 0, 0) 15.5px, var(--vkF-edge) 16px, var(--vkF-edge) 16.4px, rgba(0, 0, 0, 0) 17px); box-shadow: none; } html[data-theme="dark"] body.vkLanding header#vkLHead::after{ width: 28px; background: radial-gradient(circle at 100% calc(100% - 1px), rgba(0, 0, 0, 0) 15.5px, var(--vkF-edge) 16px, var(--vkF-edge) 16.4px, rgba(0, 0, 0, 0) 17px); box-shadow: none; } html[data-theme="dark"] body.vkLanding .sidebarblock::before{ width: 28px; bottom: 3px; height: 79px; background: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 15.5px, var(--vkF-edge) 16px, var(--vkF-edge) 16.4px, rgba(0, 0, 0, 0) 17px); box-shadow: none; } html[data-theme="dark"] body.vkLanding .sidebarblock::after{ width: 28px; background: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 15.5px, var(--vkF-edge) 16px, var(--vkF-edge) 16.4px, rgba(0, 0, 0, 0) 17px); box-shadow: none; } /* INSIDE A HUB THE HEADER'S CORNERS ARE OPAQUE (his words, 2026-10-14, with both top corners circled on a hub's page: "pasa alguna cosa en el header, hay como una parte detras que corta ll visual. arreglalo, solamente en dentro de un hub."): a hub's page starts with its banner right under the band, and the glass's corners, see-through and blurring 12 px, showed the banner's light through them, then the opaque side cut it off at 62 px. There (the hub's view shown) the corner pieces paint the side's own opaque material themselves, below the band only (45 px down: the band stays glass) and outside the arc, with the edge's ring on it - the side's surface carried up to the band. Cut by a clip-path, not a mask: a mask left a 1 px seam on the left piece's edge at his phone's pixel ratio (2.625), where that edge falls inside a pixel. The start page keeps its glass corners. */ html[data-theme="dark"] body.vkLanding:has(#vkLView:not([hidden])) header#vkLHead::before, html[data-theme="dark"] body.vkLanding:has(#vkLView:not([hidden])) header#vkLHead::after{ background: var(--vkF-ring), var(--vkF-mat); background-attachment: scroll, var(--vkF-fix); /* the ring, the material (fixed to the screen, as the sides') */ background-size: 100% 100%, auto, auto, auto, auto, auto; background-repeat: no-repeat; } html[data-theme="dark"] body.vkLanding:has(#vkLView:not([hidden])) header#vkLHead::before{ --vkF-ring: radial-gradient(circle at 0 calc(100% - 1px), rgba(0, 0, 0, 0) 15.5px, var(--vkF-edge) 16px, var(--vkF-edge) 16.4px, rgba(0, 0, 0, 0) 17px); clip-path: path("M0 45 H28 V62 H16 V61 A16 16 0 0 0 0 45 Z"); /* the right corner (the arc's centre at its left, 61 px down) */ } html[data-theme="dark"] body.vkLanding:has(#vkLView:not([hidden])) header#vkLHead::after{ --vkF-ring: radial-gradient(circle at 100% calc(100% - 1px), rgba(0, 0, 0, 0) 15.5px, var(--vkF-edge) 16px, var(--vkF-edge) 16.4px, rgba(0, 0, 0, 0) 17px); clip-path: path("M0 45 H28 A16 16 0 0 0 12 61 V62 H0 Z"); /* the left corner (the arc's centre at its right, 61 px down) */ } /* and the sides start 1 px higher there, under the corners: two pieces meeting on a line inside a pixel (his phone's 2.625) left that row of pixels darker */ html[data-theme="dark"] body.vkLanding:has(#vkLView:not([hidden])) #vkL::before, html[data-theme="dark"] body.vkLanding:has(#vkLView:not([hidden])) #vkLMain::before{ top: 61px; height: calc(100vh - 143px); height: calc(100svh - 143px); } /* INSIDE A HUB THE TOP BAR IS OPAQUE TOO (his words, 2026-10-14, with the top-left corner circled: "tienes que arreglar esto"): the band's glass, lit by the banner under it, still met the opaque corners at the band's foot. There the top layer takes the material's own opaque base and no blur, so the band, its corners and the sides are one surface; the start page keeps its glass. */ html[data-theme="dark"] body.vkLanding:has(#vkLView:not([hidden]))::before{ background-color: #1d2029; -webkit-backdrop-filter: none; backdrop-filter: none; } /* the tabs in the glass's shape (176 px, 55 px from the right; a third of the width + 36 px, centred), their curve drawn: the piece painted with --vkF-edge and cut to the curve by a mask (a colour written inside an SVG would not follow the value) */ html[data-theme="dark"] body.vkLanding div#topupl::before{ width: 176px; right: 55px; border-radius: 0; box-shadow: none; background: var(--vkF-edge); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 15' preserveAspectRatio='none'%3E%3Cpath d='M0 7.5 C7 7.5 9 14.5 18 14.5 H82 C91 14.5 93 7.5 100 7.5' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 15' preserveAspectRatio='none'%3E%3Cpath d='M0 7.5 C7 7.5 9 14.5 18 14.5 H82 C91 14.5 93 7.5 100 7.5' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } html[data-theme="dark"] body.vkLanding div#topupl::after{ width: calc(33% + 36px); border-radius: 0; box-shadow: none; background: var(--vkF-edge); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M0 8.5 C7 8.5 9 0.5 18 0.5 H82 C91 0.5 93 8.5 100 8.5' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M0 8.5 C7 8.5 9 0.5 18 0.5 H82 C91 0.5 93 8.5 100 8.5' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } /* THE TWO TABS ARE SWELLS OF THE BAND THEY HANG FROM: in the glass's mask (below), each a little wider than his (18 px a side) and with ends that leave the band's edge tangent to it - an S-curve, no corner. His sizes and places otherwise: the top one 140 px wide, 15 px tall, 73 px from the right, 7 px below the band; the foot one 33 % wide, 14 px tall, 60 px from the bottom, 8 px above the bar. */ /* THE SIDES, 12 PX, AND THE CONTENT'S GROUND (his words, 2026-10-13: "implementa esto - @media (max-width: 1125px) { html body.vkLanding #vkLHome { border-left: solid 8px #2d2e35; border-right: solid 8px #2d2e35; box-shadow: inset 0 0 12px 9px #00000042; } } color fondo: #0f1317"): his values, then the sides back to 12 px (his words, 2026-10-14: "aumentes el grueso del frame de los laterales a 12px, ahora creo que son 8, se ve muy delgado"); here over his own block of view/custom/mi-estilo.css (this rule is more specific, so it wins in the dark look). #vkLHome's borders cannot take a background fixed to the screen, so they turn see-through and two fixed strips of the material stand in them (12 px), from where the header's corner arcs end (62 px) to where the foot bar's begin (82 px from the bottom); a hub's page (.detailphoto) has the same sides, the strips being the same. His ground #0f1317 is the content's only (its padding box): behind the sides the page's own colour stays, which the glass's corners are measured on. */ html[data-theme="dark"] body.vkLanding #vkLHome, html[data-theme="dark"] body.vkLanding #vkLView > .detailphoto{ border-left: solid 12px transparent !important; border-right: solid 12px transparent !important; } html[data-theme="dark"] body.vkLanding #vkLHome{ box-shadow: inset 0 0 12px 9px #00000042; background-color: #0f1317; background-clip: padding-box; } html[data-theme="dark"] body.vkLanding #vkL::before, html[data-theme="dark"] body.vkLanding #vkLMain::before{ content: ""; position: fixed; top: 62px; bottom: 82px; width: 12px; z-index: 1002; pointer-events: none; } /* EACH SIDE HANGS FROM THE TOP ONLY, AND A PIECE HUNG FROM THE FOOT FILLS THE REST (his words, 2026-10-14, with the sides ending short above the foot bar while he scrolled down: "pasa como lo que arreglaste antes de la barra del navegador del movil, arreglalo"): held by the top and the foot, a side was laid out again only when the phone's browser bar had finished going, so for a moment it ended where the screen's foot had been - the foot glass's fault, fixed the same way. The side is as long as the screen with the bar shown (100svh, its top 62 px down to 82 px from the foot); #loadmenuCats (an empty block of the page, its two pseudo-elements free and no stacking of its own) hangs two pieces of the same side from 82 px above the foot, as tall as the bar the browser can take away plus 2 px, so whatever the bar uncovers is side at once. Where the screen does not change (svh = lvh) they are 2 px, inside the side. */ html[data-theme="dark"] body.vkLanding #vkL::before, html[data-theme="dark"] body.vkLanding #vkLMain::before{ bottom: auto; height: calc(100vh - 144px); height: calc(100svh - 144px); } html[data-theme="dark"] body.vkLanding #loadmenuCats::before, html[data-theme="dark"] body.vkLanding #loadmenuCats::after{ content: ""; position: fixed; bottom: 82px; width: 12px; height: 2px; height: calc(100lvh - 100svh + 2px); z-index: 1002; pointer-events: none; } html[data-theme="dark"] body.vkLanding #loadmenuCats::before{ left: 0; background: linear-gradient(var(--vkF-edge), var(--vkF-edge)) 100% 0 / 1px 100% no-repeat, var(--vkF-mat); background-attachment: scroll, var(--vkF-fix); } html[data-theme="dark"] body.vkLanding #loadmenuCats::after{ right: 0; background: linear-gradient(var(--vkF-edge), var(--vkF-edge)) 0 0 / 1px 100% no-repeat, var(--vkF-mat); background-attachment: scroll, var(--vkF-fix); } /* the edge on each side's inner side (1 px), from the top corner's arc to the foot corner's */ html[data-theme="dark"] body.vkLanding #vkL::before{ left: 0; background: linear-gradient(var(--vkF-edge), var(--vkF-edge)) 100% 0 / 1px 100% no-repeat, var(--vkF-mat); background-attachment: scroll, var(--vkF-fix); } html[data-theme="dark"] body.vkLanding #vkLMain::before{ right: 0; background: linear-gradient(var(--vkF-edge), var(--vkF-edge)) 0 0 / 1px 100% no-repeat, var(--vkF-mat); background-attachment: scroll, var(--vkF-fix); } /* THE SIDE BUMPS AS SWELLS OF THE SIDES: his places and heights (the left one at 22 % of the screen, a third of it tall; the right one at 37 %, 46 % tall), each 16 px wide - the 12 px side and 8 px out of it, as his bumps stood out of his side - and drawn by a mask that leaves the side's edge tangent at both ends */ html[data-theme="dark"] body.vkLanding div#vkLHome::before, html[data-theme="dark"] body.vkLanding div#vkLHome::after, html[data-theme="dark"] body.vkLanding #vkLView > .detailphoto::before, html[data-theme="dark"] body.vkLanding #vkLView > .detailphoto::after{ z-index: 1002; width: 20px; border-radius: 0; box-shadow: none; background: var(--vkF-mat); background-attachment: var(--vkF-fix); } /* THE LEFT BUMP'S OWN SHINE (his words, 2026-10-13, with a picture of the left bump lit as a streak crossed it: "por casualidad lo vi, y quiero que conserves este brillo ahi, que se desplace un poco verticalmente a medida que se hace scroll. pero sutilmente"): a soft light across the bump, laid on the bump itself (not on the screen), so it stays on it wherever the bump goes; it drifts up and down a little with the page's scroll (below) */ html[data-theme="dark"] body.vkLanding div#vkLHome::before, html[data-theme="dark"] body.vkLanding #vkLView > .detailphoto::before{ background: linear-gradient(180deg, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, .17) 40%, rgba(255, 255, 255, .06) 54%, rgba(255, 255, 255, 0) 70%), var(--vkF-mat); background-attachment: scroll, var(--vkF-fix); background-size: 100% 100%, auto, auto, auto, auto, auto; background-repeat: no-repeat; /* the bump's shine, the material */ left: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H12 C12 7 20 7 20 18 V82 C20 93 12 93 12 100 H0 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H12 C12 7 20 7 20 18 V82 C20 93 12 93 12 100 H0 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } html[data-theme="dark"] body.vkLanding div#vkLHome::after, html[data-theme="dark"] body.vkLanding #vkLView > .detailphoto::after{ right: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 100' preserveAspectRatio='none'%3E%3Cpath d='M20 0 H8 C8 7 0 7 0 18 V82 C0 93 8 93 8 100 H20 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 100' preserveAspectRatio='none'%3E%3Cpath d='M20 0 H8 C8 7 0 7 0 18 V82 C0 93 8 93 8 100 H20 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } /* THE BUMPS' EDGE: two pieces of their own (#vkL::after over the left bump, #vkLMain::after over the right one) standing exactly where the bumps stand - his places and heights, the same scroll animation (below) - painted with --vkF-edge and cut to the swell's curve (half a pixel inside it) by a mask; they meet the side's line at both ends. On a hub's page they stand over its bumps (.detailphoto), the same places. */ html[data-theme="dark"] body.vkLanding #vkL::after, html[data-theme="dark"] body.vkLanding #vkLMain::after{ content: ""; position: fixed; width: 20px; z-index: 1002; pointer-events: none; background: var(--vkF-edge); } html[data-theme="dark"] body.vkLanding #vkL::after{ left: 0; top: 22%; height: 33%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 100' preserveAspectRatio='none'%3E%3Cpath d='M11.5 0 C11.5 7 19.5 7 19.5 18 V82 C19.5 93 11.5 93 11.5 100' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 100' preserveAspectRatio='none'%3E%3Cpath d='M11.5 0 C11.5 7 19.5 7 19.5 18 V82 C19.5 93 11.5 93 11.5 100' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } html[data-theme="dark"] body.vkLanding #vkLMain::after{ right: 0; top: 37%; height: 46%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 100' preserveAspectRatio='none'%3E%3Cpath d='M8.5 0 C8.5 7 0.5 7 0.5 18 V82 C0.5 93 8.5 93 8.5 100' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 100' preserveAspectRatio='none'%3E%3Cpath d='M8.5 0 C8.5 7 0.5 7 0.5 18 V82 C0.5 93 8.5 93 8.5 100' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } /* THE HUB CARDS IN THE FRAME'S MATERIAL (his words, 2026-10-13: "pon el mismo material que has puesto en el frame del movil a los hubs. Solo en vesion movil"): the same layers - the dark glass base, the gloss at the top, the two diagonal streaks, the cyan glow from the top and the green from the bottom - laid on each card, so each card carries the whole of it; over his card ground (#282830, view/custom/mi-estilo.css), here more specific */ html[data-theme="dark"] body.vkLanding .vkCard{ background: var(--vkF-mat); } /* THE BUMPS FOLLOW THE SCROLL (his words, 2026-10-13: "The one on the left: on scroll down will prigresively as user scrolls will match the orange point as user reache the orange bottom mark. The one on the right will go up as user scrolls to the orange mark"): tied to the page's scroll, from the top of the page to its end - the left one slides down until its foot is at 81 % of the screen, the right one up until its top is at 15 % (his orange marks, measured on his drawing). Where the browser has no scroll-driven animation they simply stay where they are. */ @supports (animation-timeline: scroll()){ html[data-theme="dark"] body.vkLanding div#vkLHome::before, html[data-theme="dark"] body.vkLanding #vkLView > .detailphoto::before{ animation: vkF-bumpL linear both; animation-timeline: scroll(root block); } html[data-theme="dark"] body.vkLanding div#vkLHome::after, html[data-theme="dark"] body.vkLanding #vkLView > .detailphoto::after{ animation: vkF-bumpR linear both; animation-timeline: scroll(root block); } html[data-theme="dark"] body.vkLanding #vkL::after{ animation: vkF-bumpL linear both; animation-timeline: scroll(root block); } /* the bumps' edge goes with them */ html[data-theme="dark"] body.vkLanding #vkLMain::after{ animation: vkF-bumpR linear both; animation-timeline: scroll(root block); } /* THE SHINE'S PARALLAX (his words, 2026-10-13: "puede shacer que los brillos tengan un poco de parallax en general? asi hay mas sensacion de movimiento premium", then, on the first try, which slid them 140 px sideways: "vigila porque los brillos viajan horizonalmente y dejan espacios vacios"): the material's two diagonal streaks drift VERTICALLY and a little, at two speeds (depth) - up over the page's scroll on the frame (48 / 24 px from its top to its end, the same on every piece at every moment, so the frame stays one surface), over each hub card's crossing of the screen on the cards (36 / 28 px) - laid without repeat, so no copy of a streak comes in at an edge. EACH STREAK'S LAYER IS TALLER THAN WHAT IT COVERS BY ITS WHOLE DRIFT and laid so that it covers it at every offset (his "y esto???", with the first vertical try's cut ends circled at the top and the foot: a layer the size of the screen, moved, left a strip of the screen without it, and the streak ended there on a straight line). At the top of the page the frame's streaks start where they were. The left bump's own shine drifts with them (+-16 px). The rest of the material (the top's gloss, the two glows, the base) stays still. Registered lengths carry the offsets (@property, at the end of this file). Not for anyone whose phone asks for less motion; where the browser has no scroll-driven animation the shine simply stays where it is. */ @media (prefers-reduced-motion: no-preference){ html[data-theme="dark"] body.vkLanding::before, html[data-theme="dark"] body.vkLanding::after, html[data-theme="dark"] body.vkLanding #vkL::before, html[data-theme="dark"] body.vkLanding #vkLMain::before, html[data-theme="dark"] body.vkLanding #loadmenuCats::before, html[data-theme="dark"] body.vkLanding #loadmenuCats::after{ animation: vkF-shine linear both; animation-timeline: scroll(root block); } /* .vkLanding twice: the glass's own rules (below in this file, laid from its top or its foot) come later and would win at the same weight */ html[data-theme="dark"] body.vkLanding.vkLanding::before, html[data-theme="dark"] body.vkLanding.vkLanding::after{ background-size: 100% calc(100vh + 48px), 100% calc(100vh + 24px), 100% 100vh, 100% 100vh, 100% 100vh; background-size: 100% calc(100dvh + 48px), 100% calc(100dvh + 24px), 100% 100dvh, 100% 100dvh, 100% 100dvh; } html[data-theme="dark"] body.vkLanding.vkLanding::before{ background-position: 50% var(--vkF-s1), 50% var(--vkF-s2), 50% 0%, 50% 0%, 50% 0%; } /* the foot's layer is laid from its foot: its top is the screen's top + the offset, as on every other piece */ html[data-theme="dark"] body.vkLanding.vkLanding::after{ background-position: 50% calc(100% + 48px + var(--vkF-s1)), 50% calc(100% + 24px + var(--vkF-s2)), 50% 100%, 50% 100%, 50% 100%; } /* the edge's layer first (still), then the streaks: the screen's size (a background fixed to the screen) and the drift; every list written out layer by layer (a shorter one repeats from its start: the sides' top glow had taken the edge's 1 px) */ html[data-theme="dark"] body.vkLanding #vkL::before, html[data-theme="dark"] body.vkLanding #loadmenuCats::before{ background-position: 100% 0, 0 var(--vkF-s1), 0 var(--vkF-s2), 0 0, 0 0, 0 0; background-repeat: no-repeat; background-size: 1px 100%, 100% calc(100% + 48px), 100% calc(100% + 24px), auto, auto, auto; } html[data-theme="dark"] body.vkLanding #vkLMain::before, html[data-theme="dark"] body.vkLanding #loadmenuCats::after{ background-position: 0 0, 0 var(--vkF-s1), 0 var(--vkF-s2), 0 0, 0 0, 0 0; background-repeat: no-repeat; background-size: 1px 100%, 100% calc(100% + 48px), 100% calc(100% + 24px), auto, auto, auto; } /* a hub's opaque header corners (above): their material drifts with the sides' it carries up to the band */ html[data-theme="dark"] body.vkLanding:has(#vkLView:not([hidden])) header#vkLHead::before, html[data-theme="dark"] body.vkLanding:has(#vkLView:not([hidden])) header#vkLHead::after{ animation: vkF-shine linear both; animation-timeline: scroll(root block); background-position: 0 0, 0 var(--vkF-s1), 0 var(--vkF-s2), 0 0, 0 0, 0 0; background-size: 100% 100%, 100% calc(100% + 48px), 100% calc(100% + 24px), auto, auto, auto; } html[data-theme="dark"] body.vkLanding div#vkLHome::after, html[data-theme="dark"] body.vkLanding #vkLView > .detailphoto::after{ background-position: 0 var(--vkF-s1), 0 var(--vkF-s2), 0 0, 0 0, 0 0; background-repeat: no-repeat; background-size: 100% calc(100% + 48px), 100% calc(100% + 24px), auto, auto, auto; } html[data-theme="dark"] body.vkLanding div#vkLHome::before, html[data-theme="dark"] body.vkLanding #vkLView > .detailphoto::before{ background-position: 0 var(--vkF-s3), 0 var(--vkF-s1), 0 var(--vkF-s2), 0 0, 0 0, 0 0; background-size: 100% 100%, 100% calc(100% + 48px), 100% calc(100% + 24px), auto, auto, auto; animation: vkF-bumpL linear both, vkF-shine linear both, vkF-sheen linear both; animation-timeline: scroll(root block), scroll(root block), scroll(root block); } html[data-theme="dark"] body.vkLanding div#vkLHome::after, html[data-theme="dark"] body.vkLanding #vkLView > .detailphoto::after{ animation: vkF-bumpR linear both, vkF-shine linear both; animation-timeline: scroll(root block), scroll(root block); } html[data-theme="dark"] body.vkLanding .vkCard{ animation: vkF-cardShine linear both; animation-timeline: view(); background-repeat: no-repeat; background-position: 0 calc(var(--vkF-s1) - 18px), 0 calc(var(--vkF-s2) - 14px), 0 0, 0 0, 0 0; background-size: 100% calc(100% + 36px), 100% calc(100% + 28px), auto, auto, auto; } } } /* THE BARS OF FROSTED GLASS (his "transparencia premium muy sutil y ligera"): each layer covers the screen and is cut to the union of its pieces - at the top the 45 px band, its two 28 x 62 corners (the arc's 16 px plus the 12 px side) and the tab (176 x 15, 55 px from the right, 37 px down); at the foot the bar, its two 28 x 79 corners and the tab (a third of the width + 36 px, 14 px tall, 60 px up) - with the same shapes as the pieces, so where they meet nothing shows. Over the content (z-index 1001), under the bar, the radar and the keys; touches go through. EACH LAYER HANGS FROM ITS OWN EDGE, only as tall as its pieces (his words, 2026-10-13, with a screenshot of a phone's browser scrolling down - the foot's glass up above the bar, the files showing under the radar: "arregla este pequeño error momentaneo, que sale cuando escrolleo para abajo en el navegador del movil. creo que es por la barra de navegacion"): a phone's browser moves what hangs from the screen's foot at once while its own bar comes and goes, but an element held by its top AND its foot (the whole screen, as these were) is laid out again only when that is over - in between, the foot's glass stood where the screen's foot had been. The foot's layer now hangs from the foot like the bar it dresses (82 px: its corners' top), the top's from the top (62 px: its corners' foot); the material keeps the screen's size and is laid from the same edge, so it still meets the sides as one surface. */ html[data-theme="dark"] body.vkLanding::before, html[data-theme="dark"] body.vkLanding::after{ content: ""; position: fixed; right: 0; left: 0; z-index: 1001; pointer-events: none; background: var(--vkF-glass); background-repeat: no-repeat; background-size: 100% 100vh; background-size: 100% 100dvh; -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); } html[data-theme="dark"] body.vkLanding::before{ top: 0; height: 62px; background-position: center top; } html[data-theme="dark"] body.vkLanding::after{ bottom: 0; height: calc(82px + env(safe-area-inset-bottom, 0px)); background-position: center bottom; background-color: rgba(41, 44, 56, .52); } /* the foot's base a hair lighter: its blur takes in the content's #0f1317 beside the side column (measured: 3 darker than the side), which the top's does not */ html[data-theme="dark"] body.vkLanding::before{ -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% 45px no-repeat, radial-gradient(circle at 100% calc(100% - 1px), transparent 15.5px, #000 16px) 0 0 / 28px 62px no-repeat, radial-gradient(circle at 0 calc(100% - 1px), transparent 15.5px, #000 16px) 100% 0 / 28px 62px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 15' preserveAspectRatio='none'%3E%3Cpath d='M0 0 V8 C7 8 9 15 18 15 H82 C91 15 93 8 100 8 V0 Z'/%3E%3C/svg%3E") right 55px top 37px / 176px 15px no-repeat; mask: linear-gradient(#000, #000) 0 0 / 100% 45px no-repeat, radial-gradient(circle at 100% calc(100% - 1px), transparent 15.5px, #000 16px) 0 0 / 28px 62px no-repeat, radial-gradient(circle at 0 calc(100% - 1px), transparent 15.5px, #000 16px) 100% 0 / 28px 62px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 15' preserveAspectRatio='none'%3E%3Cpath d='M0 0 V8 C7 8 9 15 18 15 H82 C91 15 93 8 100 8 V0 Z'/%3E%3C/svg%3E") right 55px top 37px / 176px 15px no-repeat; } html[data-theme="dark"] body.vkLanding::after{ -webkit-mask: linear-gradient(#000, #000) 0 100% / 100% var(--vkL-dock, 66px) no-repeat, radial-gradient(circle at 100% 0, transparent 15.5px, #000 16px) left 0 bottom 3px / 28px 79px no-repeat, radial-gradient(circle at 0 0, transparent 15.5px, #000 16px) right 0 bottom 3px / 28px 79px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 V8 C7 8 9 0 18 0 H82 C91 0 93 8 100 8 V14 Z'/%3E%3C/svg%3E") left 50% bottom 60px / calc(33% + 36px) 14px no-repeat; mask: linear-gradient(#000, #000) 0 100% / 100% var(--vkL-dock, 66px) no-repeat, radial-gradient(circle at 100% 0, transparent 15.5px, #000 16px) left 0 bottom 3px / 28px 79px no-repeat, radial-gradient(circle at 0 0, transparent 15.5px, #000 16px) right 0 bottom 3px / 28px 79px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 V8 C7 8 9 0 18 0 H82 C91 0 93 8 100 8 V14 Z'/%3E%3C/svg%3E") left 50% bottom 60px / calc(33% + 36px) 14px no-repeat; } } @keyframes vkF-bumpL{ from{ top: 22vh; } to{ top: 48vh; } } /* his left bump (22 %, 33 % tall): its foot from 55 % to 81 % - top, not a transform: a transformed element loses its fixed background */ @keyframes vkF-bumpR{ from{ top: 37vh; } to{ top: 15vh; } } /* his right bump's top, 37 %, to 15 % */ /* the shine's parallax (above): the two streaks' vertical offsets - up 48 px and 24 px over the page on the frame, 36 px and 28 px over a card's crossing (each streak's layer that much taller) - and the left bump's own shine, 32 px over the page */ @property --vkF-s1{ syntax: ''; inherits: false; initial-value: 0px; } @property --vkF-s2{ syntax: ''; inherits: false; initial-value: 0px; } @property --vkF-s3{ syntax: ''; inherits: false; initial-value: 0px; } @keyframes vkF-shine{ from{ --vkF-s1: 0px; --vkF-s2: 0px; } to{ --vkF-s1: -48px; --vkF-s2: -24px; } } /* from the look he approved at the top of the page */ @keyframes vkF-cardShine{ from{ --vkF-s1: -18px; --vkF-s2: 14px; } to{ --vkF-s1: 18px; --vkF-s2: -14px; } } @keyframes vkF-sheen{ from{ --vkF-s3: -16px; } to{ --vkF-s3: 16px; } } /* THE EDGE ON THE TREE'S DRAWER TOO (his words, 2026-10-14, with the drawer open on a phone and its right side drawn in blue, round its two bumps: "aplica tambien en el menu emergente el reborde que aplicaste antes"): the same 1 px line of --vkF-edge down the drawer's right side (a background image: his ground and his shadow stay his), and round each of his two bumps (nav#vkTree::before/::after, view/custom/mi-estilo.css) along their outer curve (an inset shadow follows the rounded side); the part of a bump inside the drawer (its own ground on the drawer's, unseen) is cut away, so the bump's line starts where it leaves the drawer's side, on the straight line. */ @media (max-width: 1125px){ /* the straight line stops where the bump stands (his place: 48 % down, 34 % tall, his mi-estilo.css nav#vkTree:before), 2 px into it - where the bump's curve leaves the side - so only the curve's line is there: the bump covering the straight line was not enough on his phone's scale (his words, 2026-10-14: "esta solapado el borde no lo ves? el reborde tiene que hacer la curva, no eguir recto"). His second, smaller bump (nav#vkTree:after) is never drawn on the public web - vk_landing.css hides the tree's ::after there (the panel's dim layer) - so the line runs straight past its place */ html[data-theme="dark"] body.vkLanding nav#vkTree{ background-image: linear-gradient(to bottom, var(--vkF-edge) 0, var(--vkF-edge) calc(48% + 2px), transparent calc(48% + 2px), transparent calc(82% - 2px), var(--vkF-edge) calc(82% - 2px), var(--vkF-edge) 100%); background-position: 100% 0; background-size: 1px 100%; background-repeat: no-repeat; } html[data-theme="dark"] body.vkLanding nav#vkTree::before, html[data-theme="dark"] body.vkLanding nav#vkTree::after{ box-shadow: inset -1px 0 0 var(--vkF-edge); clip-path: inset(0 0 0 6px); } }