/* === LATEST RELEASE — MINIS (ISOLATED, ALIGNED TO OUTER FRAME) ======= */ /* Minis only. Absolutely aligned to the visible Wide Outer Frame area. */ /* No impact on your wide frames files. */ .mini-frames{ /* tweak to 3 / 4, 4 / 5, etc. if you prefer */ --mini-label-stretch-y: 1.25; /* vertical stretch factor for the label */ position: absolute; /* JS sets left/top/width/height to match .wof-root */ pointer-events: none; /* page stays interactive; minis re-enable below */ z-index: 2; /* sits under overlays with higher z-index */ /* minis-only vars */ --mini-from-center: 920px; /* horizontal distance from the OUTER FRAME center */ --mini-left: #968cff; /* LEFT color — violet final */ --mini-right: #ff4fc0; /* RIGHT color — pink shifted -9° hue */ --mini-radius-inner: 5px; --mini-radius-outer: 8px; /* rounder outer frame */ --mini-gap: 10px; --mini-inner-border: 2.25px; --mini-outer-border: 2.6px; --mini-label-font: 'Orbitron', sans-serif; --mini-label-size: 0.72rem; --mini-label-pad-y: 3px; --mini-label-pad-x: 8px; --mini-label-bg: #000; --mini-noise-opacity: 0.35; --mini-noise-speed: 0.6s; --mini-noise-tile: 160px; --mini-scan-line: 1px; --mini-scan-gap: 3px; --mini-scan-opacity: 0.10; --mini-scan-speed: 8s; --mini-tilt: 0deg; /* subtle outward tilt */ --mini-label-squeeze-x: 0.72; /* horizontal squeeze for the label only */ --mini-label-squeeze-y: 0.88; /* vertical squeeze for the label only */ } @keyframes mini-noise-shift { 0%{background-position:0 0;} 100%{background-position:0 128px;} } @keyframes mini-scan { 0%{ background-position:0 0, 0 calc(var(--mini-scan-gap)/2), 0 0; } 100%{ background-position: 0 calc(var(--mini-scan-line)+var(--mini-scan-gap)), 0 calc(var(--mini-scan-line)+var(--mini-scan-gap)+(var(--mini-scan-gap)/2)), 0 0; } } /* Base card — absolute inside the aligned box, centered vertically & horizontally */ .mini-frames .mini-neon-frame .lr-card{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% - var(--mini-rise))); width: clamp(55px, 6.5vw, 90px); /* smaller minis */ text-decoration: none; pointer-events: auto; z-index: 2; box-sizing: border-box; padding: 0.5px; color: inherit; } /* Perfect symmetry around the OUTER FRAME center (handled by transform X offset) */ .mini-frames .mini-neon-frame.mini-lavender .lr-card{ transform: translate(calc(-50% - var(--mini-from-center)), calc(-50% - var(--mini-rise) + var(--mini-offset-y, 0px))) rotate(calc(-1 * var(--mini-tilt))); color: var(--mini-left); } .mini-frames .mini-neon-frame.mini-pink .lr-card{ transform: translate(calc(-50% + var(--mini-from-center)), calc(-50% - var(--mini-rise) + var(--mini-offset-y, 0px))) rotate(var(--mini-tilt)); color: var(--mini-right); } /* INNER frame (image) */ .mini-frames .mini-neon-frame .lr-card .lr-frame{/* equalize heights for vertical alignment */ position: relative; width: 100%; max-width: 100%; border-radius: var(--mini-radius-inner); border: var(--mini-inner-border) solid currentColor; overflow: hidden; background: transparent; box-shadow: 0 0 1px color-mix(in srgb, currentColor 85%, transparent), 0 0 2px color-mix(in srgb, currentColor 35%, transparent), inset 0 0 0.5px color-mix(in srgb, currentColor 25%, transparent); } /* Eliminate any bottom gap inside the inner frame */ .mini-frames .mini-neon-frame .lr-card .lr-clip{ border-radius: inherit; overflow: hidden; line-height: 0; } .mini-frames .mini-neon-frame .lr-card .lr-clip img{ display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; /* fill the inner frame without leftover space */ border-radius: inherit; } /* Noise + scanlines overlay */ .mini-frames .mini-neon-frame .lr-card .lr-frame::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--mini-noise-opacity); image-rendering: pixelated; mix-blend-mode: screen; z-index: 1; background: repeating-linear-gradient( to bottom, rgba(255,255,255, var(--mini-scan-opacity)) 0 var(--mini-scan-line), transparent var(--mini-scan-line) calc(var(--mini-scan-line) + var(--mini-scan-gap)) ), repeating-linear-gradient( to bottom, rgba(255,255,255, calc(var(--mini-scan-opacity)*0.8)) 0 var(--mini-scan-line), transparent var(--mini-scan-line) calc(var(--mini-scan-line) + var(--mini-scan-gap)) ), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence id='t' type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: auto, auto, var(--mini-noise-tile) var(--mini-noise-tile); background-repeat: repeat, repeat, repeat; background-position: 0 0, 0 calc(var(--mini-scan-gap)/2), 0 0; will-change: background-position; animation: mini-scan var(--mini-scan-speed) linear infinite, mini-noise-shift var(--mini-noise-speed) steps(12) infinite; } /* Outer halo ring */ .mini-frames .mini-neon-frame .lr-card .lr-tilt{ position: relative; display: inline-block; } .mini-frames .mini-neon-frame .lr-card .lr-tilt::after{ content: ""; position: absolute; inset: calc(-1 * var(--mini-gap)); border: var(--mini-outer-border) solid currentColor; border-radius: var(--mini-radius-outer); background: transparent; pointer-events: none; z-index: 1; box-shadow: 0 0 4px color-mix(in srgb, currentColor 90%, transparent), 0 0 8px color-mix(in srgb, currentColor 60%, transparent), inset 0 0 2px color-mix(in srgb, currentColor 35%, transparent); } /* Label */ .mini-frames .mini-neon-frame .lr-card .lr-tilt::before{ content: "Latest Release"; position: absolute; left: 50%; transform: translateX(-50%) scaleX(var(--mini-label-squeeze-x)) scaleY(var(--mini-label-squeeze-y)); top: calc(100% + 7px); font-family: var(--mini-label-font); font-size: calc(var(--mini-label-size) * 1.2); letter-spacing: 0.04em; padding: calc(var(--mini-label-pad-y) * 1.2) calc(var(--mini-label-pad-x) * 1.2); background: var(--mini-label-bg); color: currentColor; border: 1.6px solid currentColor; border-radius: 4px; z-index: 3; white-space: nowrap; box-shadow: 0 0 2px currentColor; transform-origin: center; } /* === MINI TWEAKS 8 — screen blend + opacity var ======================== */ .mini-frames{ /* tweak to 3 / 4, 4 / 5, etc. if you prefer */ --mini-label-stretch-y: 1.25; /* vertical stretch factor for the label */ /* control opacity globally */ --mini-brightness: 1.15; /* control brightness globally */ --mini-rise: 310px; /* adjust for bigger frames */ } .mini-frames .mini-neon-frame .lr-card{ mix-blend-mode: screen !important; opacity: var(--mini-opacity, 0.95) !important; /* ou n'importe quelle autre valeur */ filter: brightness(var(--mini-brightness)) !important; } /* === Hover overlay on inner PNG only ================================ */ .mini-frames .mini-neon-frame .lr-card .lr-frame::after{ content: ""; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s ease; background: rgba(0,0,0,0.28); /* subtle darken so text is readable */ color: currentColor; text-shadow: 0 1px 2px rgba(0,0,0,0.8); font-size: clamp(8px, 0.6vw, 14px); letter-spacing: 0.08em; pointer-events: none; /* do not block clicks */ mix-blend-mode: normal; /* ensure readability over scanlines */ z-index: 3; } /* Left card: UNVEIL in Hellios Gothic */ .mini-frames .mini-neon-frame.mini-lavender .lr-card .lr-frame::after{ content: "UNVEIL"; font-family: 'Hellios Gothic', 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(15px, 1.3vw, 21px); } /* Right card: IGNITE in Thunderstrike */ .mini-frames .mini-neon-frame.mini-pink .lr-card .lr-frame::after{ content: "IGNITE"; font-family: 'Thunderstrike Halftone', 'Thunderstrike', sans-serif; font-weight: 700; font-size: clamp(11px, 0.9vw, 16px); } /* Reveal on hover of the inner frame only */ .mini-frames .mini-neon-frame .lr-card .lr-frame:hover::after{ opacity: 1; } /* Pink-only vertical alignment override (lower the right frame) */ /* Pink-only drop to mirror left height */ .mini-frames .mini-neon-frame.mini-pink{ --mini-offset-y: 0px; } /* Drop right frame to mirror left */ .mini-frames .mini-neon-frame.mini-pink{ --mini-offset-y: 0px; } /* === Label size tweak ONLY (shrink the "Latest Release" case without touching frames) === */ .mini-frames{ --mini-label-size: 0.62rem; /* was 0.72rem */ --mini-label-pad-y: 2.3px; /* was 3px */ --mini-label-pad-x: 6.5px; /* was 8px */ } /* Slightly thinner label border */ .mini-frames .mini-neon-frame .lr-card .lr-tilt::before{ border-width: 1.3px; /* was ~1.6px */ } /* Vertical adjustment for the Latest Release label only */ .mini-frames .mini-neon-frame .lr-card .lr-label{ position: relative; top: 1px; /* small downward shift */ } /* Glow on inner frame only */ .mini-frames .mini-neon-frame .lr-card .lr-frame { box-shadow: 0 0 3px currentColor, 0 0 5px currentColor; } /* Glow on Latest Release case border */ .mini-frames .mini-neon-frame .lr-card .lr-tilt::before { box-shadow: 0 0 2px currentColor, 0 0 4px currentColor; } /* Ignite text a bit smaller on hover */ .mini-frames .mini-neon-frame .lr-card .lr-tilt:hover::before { font-size: 0.95em; /* encore un tout petit chouïa plus petit */ } /* === OVERRIDE — Inner frame glow a hair tighter (applique aux deux cases) === */ .mini-frames .mini-neon-frame .lr-card .lr-frame{ box-shadow: 0 0 1.8px currentColor, 0 0 3.6px currentColor !important; } /* === OVERRIDE — Smooth zoom on hover for inner frame === */ .mini-frames .mini-neon-frame .lr-card .lr-frame { transition: transform 0.35s ease-in-out !important; } .mini-frames .mini-neon-frame .lr-card .lr-frame:hover { transform: scale(1.08); } /* Ignite hover — slightly smaller */ .mini-frames .mini-neon-frame.mini-pink .lr-card .lr-frame:hover::after { /* font-size removed to prevent zoom on mouseleave */ font-size: 0.92em; /* légèrement plus petit au survol */ } /* === LR Fade Gate — variable-driven (final) =========================== We drive opacity via the existing 'opacity: var(--mini-opacity) !important' so we only change the *variable* on .mini-frames. This avoids fights. */ html:not([data-lr-ready]) .mini-frames{ --mini-opacity: 0 !important; } html[data-lr-ready] .mini-frames{ --mini-opacity: 1 !important; } /* Ensure the cards actually animate opacity smoothly */ .mini-frames .mini-neon-frame .lr-card{ transition: opacity 4s ease !important; } /* === OVERRIDE — Neon Glow 5% (barely visible diffusion) ================= - Keeps all existing animations/transitions. - Only increases diffusion glow on the minis to match the wide-frame style. */ .mini-frames .mini-neon-frame .lr-card .lr-tilt::after{ /* Outer ring: triple halo 8 / 16 / 24 — 5% intensity */ box-shadow: 0 0 8px color-mix(in srgb, currentColor 70%, transparent), 0 0 16px color-mix(in srgb, currentColor 50%, transparent), 0 0 24px color-mix(in srgb, currentColor 25%, transparent) !important; } .mini-frames .mini-neon-frame .lr-card .lr-frame{ /* Inner "tube" feel, almost imperceptible */ box-shadow: 0 0 1px currentColor, inset 0 0 2px color-mix(in srgb, currentColor 30%, transparent), inset 0 0 4px color-mix(in srgb, currentColor 30%, transparent) !important; } /* ===== End OVERRIDE ====================================================== */ /* === OVERRIDE — Right pink more neon (correct var) ====================== Use the actual color variable consumed by .mini-pink cards. Glow remains at 5% (unchanged above). */ .mini-frames{ --mini-right: hsl(327, 100%, 66%); /* slightly more neon, visibly brighter */ } /* ======================================================================= */ /* === FINAL LOCK ========================================================= Force les couleurs choisies, même si un autre fichier réassigne la variable. ======================================================================= */ html[data-lr-ready] .mini-frames{ --mini-right: hsl(327, 100%, 66%) !important; /* rose base un peu plus saturé et plus clair */ --mini-left: hsl(245, 100%, 76%) !important; /* violet validé */ } /* === FINAL OVERRIDE: vertical shift for both minis === */ /* Valeurs négatives = monte ; positives = descend */ .mini-frames .mini-neon-frame.mini-lavender { --mini-offset-y: -220px !important; } .mini-frames .mini-neon-frame.mini-pink { --mini-offset-y: -220px !important; }