/* ============================================================================ Diskweb IT Solutions — VISUAL ENHANCEMENT LAYER v1 ---------------------------------------------------------------------------- PURELY ADDITIVE. Loads AFTER /assets/css/style.css. Nothing in style.css is deleted or overridden structurally. No layout, no widths, no grid changes, no breakpoint changes, no content, no SEO, no navigation behaviour. Layering contract used throughout this file ------------------------------------------- style.css already sets: main{position:relative;z-index:1} .site-footer{position:relative;z-index:1} .site-header{z-index:1000} .bg-decor/.bg-grid{position:fixed;z-index:0} Therefore: * fixed z-index:0 layers -> always BEHIND all page content * z-index:-1 pseudos INSIDE main -> behind the section, above the page background (because main itself forms a z-index:1 stacking context) Every decorative layer is pointer-events:none and aria-invisible. Kill switch: put data-dw-fx="off" on to disable all JS effects. ========================================================================== */ :root{ --mouse-x:50vw; --mouse-y:35vh; --dw-glow-size:560px; --dw-ease-out:cubic-bezier(.22,.61,.36,1); --dw-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } /* ========================================================================== 1 · GLOBAL PREMIUM BACKGROUND Aurora / mesh / orbs are attached to the EXISTING .bg-decor and .bg-grid elements as pseudo-elements — zero new markup, zero HTML change. Animation is transform-only (compositor) so there is no per-frame repaint. ========================================================================== */ .bg-decor{ overflow:hidden; } /* keeps oversized aurora layers clipped */ .bg-decor::before, .bg-decor::after{ content:''; position:absolute; inset:-28%; pointer-events:none; border-radius:44%; backface-visibility:hidden; /* no will-change: a running CSS transform animation self-promotes, and this avoids permanently holding two full-viewport compositor layers on mobile */ } /* aurora layer A — accent + brand blue + violet */ .bg-decor::before{ background: radial-gradient(36% 32% at 24% 20%, var(--accent) 0%, transparent 62%), radial-gradient(30% 28% at 76% 26%, #2f7dff 0%, transparent 65%), radial-gradient(38% 34% at 60% 80%, #8b7cf6 0%, transparent 68%); opacity:.155; animation:dw-aurora-a 46s ease-in-out infinite; } /* aurora layer B — slower counter-drift, gives the mesh its motion parallax */ .bg-decor::after{ background: radial-gradient(26% 24% at 14% 74%, var(--accent) 0%, transparent 60%), radial-gradient(22% 20% at 88% 58%, #2dd4bf 0%, transparent 62%), radial-gradient(20% 18% at 46% 8%, #4d8dff 0%, transparent 64%); opacity:.10; animation:dw-aurora-b 64s ease-in-out infinite; } @keyframes dw-aurora-a{ 0%,100%{ transform:translate3d(0,0,0) scale(1) } 50% { transform:translate3d(3.5%,-2.5%,0) scale(1.09) } } @keyframes dw-aurora-b{ 0%,100%{ transform:translate3d(0,0,0) scale(1.04) } 50% { transform:translate3d(-4%,3%,0) scale(1) } } /* film-grain + depth vignette — static, painted once, never re-rasterised */ body::after{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background-image: radial-gradient(130% 96% at 50% 0%, transparent 42%, rgba(2,6,14,.42) 100%), var(--dw-noise); background-size:100% 100%, 140px 140px; background-repeat:no-repeat, repeat; opacity:.5; } /* the existing hairline grid gets a soft sheen instead of a flat tint */ .bg-grid{ opacity:.42; } /* ========================================================================== 2 · DESKTOP MOUSE GLOW Element is injected by visual-enhancements.js on fine-pointer devices only. JS writes --mouse-x / --mouse-y; CSS does 100% of the rendering. transform:translate3d() => compositor-only, no layout, no reflow. ========================================================================== */ .dw-glow{ position:fixed; top:0; left:0; z-index:0; width:var(--dw-glow-size); height:var(--dw-glow-size); margin:calc(var(--dw-glow-size) / -2) 0 0 calc(var(--dw-glow-size) / -2); border-radius:50%; pointer-events:none; background:radial-gradient(circle closest-side, var(--accent) 0%, transparent 70%); opacity:0; transform:translate3d(var(--mouse-x), var(--mouse-y), 0); transition:opacity .5s var(--ease); will-change:transform; backface-visibility:hidden; } .dw-glow.dw-on{ opacity:.075; } /* ========================================================================== 3 · PREMIUM CUSTOM CURSOR (desktop pointer devices only) Injected by JS. Native cursor is restored on every text-entry control so typing and selection remain unambiguous. ========================================================================== */ html.dw-cursor, html.dw-cursor *{ cursor:none !important; } html.dw-cursor input, html.dw-cursor textarea, html.dw-cursor select, html.dw-cursor [contenteditable="true"]{ cursor:auto !important; } .dw-cur, .dw-cur-dot{ position:fixed; top:0; left:0; z-index:9999; /* above header(1000), drawer(1100), skip-link(2000) */ pointer-events:none; border-radius:50%; opacity:0; will-change:transform; backface-visibility:hidden; } .dw-cur-dot{ width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--accent); box-shadow:0 0 10px var(--accent); transition:opacity .2s var(--ease), transform .12s var(--ease); } .dw-cur{ width:34px; height:34px; margin:-17px 0 0 -17px; border:1px solid var(--accent-line); background:radial-gradient(circle closest-side, var(--accent-soft), transparent 72%); transition:width .24s var(--dw-ease-out), height .24s var(--dw-ease-out), margin .24s var(--dw-ease-out), border-color .24s var(--ease), opacity .22s var(--ease); } .dw-cur.dw-on, .dw-cur-dot.dw-on{ opacity:1; } /* expands over interactive elements */ .dw-cur.is-active{ width:56px; height:56px; margin:-28px 0 0 -28px; border-color:var(--accent); background:radial-gradient(circle closest-side, var(--accent-soft), transparent 78%); } /* press feedback */ .dw-cur.is-down{ width:26px; height:26px; margin:-13px 0 0 -13px; border-color:var(--accent); } .dw-cur-dot.is-down{ transform-origin:50% 50%; } /* ========================================================================== 4 · SECTION DEPTH All decoration sits at z-index:-1 INSIDE main's stacking context, so it can never cover text. No section changes size, padding, order or width. ========================================================================== */ main > section{ position:relative; } /* premium hairline separator between consecutive sections */ main > section + section::before{ content:''; position:absolute; z-index:-1; top:0; left:50%; transform:translateX(-50%); width:min(var(--maxw), 88vw); height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--accent-line) 50%, var(--line-strong) 78%, transparent); opacity:.55; } /* very low-contrast alternation so sections stop reading as one flat sheet */ main > section:nth-of-type(even):not(.hero)::after{ content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; background: linear-gradient(180deg, transparent, rgba(148,196,255,.022) 26%, rgba(148,196,255,.022) 74%, transparent), radial-gradient(70% 60% at 82% 12%, var(--accent-soft), transparent 60%); } /* soft spotlight behind every section heading block */ .section-head{ position:relative; } .section-head::before{ content:''; position:absolute; z-index:-1; left:-44px; top:-58px; width:min(440px, 82vw); height:210px; pointer-events:none; background:radial-gradient(closest-side, var(--accent), transparent 74%); opacity:.11; } /* hero: orbit-ring decoration (desktop only, fully inside the fold) */ .hero::before{ content:''; position:absolute; z-index:-1; right:0; /* stays fully inside the viewport — no overflow */ top:8%; width:min(540px, 42vw); aspect-ratio:1 / 1; border-radius:50%; pointer-events:none; border:1px solid var(--line-strong); background: radial-gradient(closest-side, transparent 60%, var(--accent-soft) 61%, transparent 64%), radial-gradient(closest-side, transparent 84%, var(--line) 85%, transparent 88%); opacity:.5; animation:dw-spin 110s linear infinite; } .hero::after{ content:''; position:absolute; z-index:-1; left:0; /* stays fully inside the viewport — no overflow */ bottom:-6%; width:min(360px, 40vw); aspect-ratio:1 / 1; pointer-events:none; background:radial-gradient(closest-side, var(--accent), transparent 70%); opacity:.09; animation:dw-float 26s ease-in-out infinite; } @keyframes dw-spin{ to{ transform:rotate(360deg) } } @keyframes dw-float{ 0%,100%{ transform:translate3d(0,0,0) } 50% { transform:translate3d(4%,-6%,0) } } /* kicker accent line becomes a gradient (same 22px width — no reflow) */ .kicker::before{ background:linear-gradient(90deg, transparent, var(--accent)); box-shadow:0 0 8px var(--accent-soft); } /* animated sheen on the existing opt-in gradient text utility */ .grad-text{ background:linear-gradient(120deg,#00e5ff 0%,#7fd4ff 32%,#2f7dff 62%,#00e5ff 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:dw-sheen 11s linear infinite; } @keyframes dw-sheen{ to{ background-position:220% 0 } } /* ========================================================================== 5 · CARD ENHANCEMENT Depth is produced with background LAYERS + box-shadow (always painted below text) and one 1px top-edge pseudo that lives on the border line only. Card dimensions, padding, grid and responsive behaviour are untouched. ========================================================================== */ .card{ --dw-cx:50%; --dw-cy:0%; --dw-cg:0; /* cursor-follow glow strength */ background-image: radial-gradient(280px circle at var(--dw-cx) var(--dw-cy), rgba(255,255,255, calc(var(--dw-cg) * .055)), transparent 68%), linear-gradient(180deg, rgba(255,255,255,.038), transparent 40%), linear-gradient(180deg, var(--bg-2), rgba(10,26,51,.55)); /* original layer, preserved */ box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 1px 3px rgba(0,0,0,.3); transition: border-color var(--t) var(--ease), transform .4s var(--dw-ease-out), box-shadow .4s var(--ease), background-color var(--t); } /* animated top-edge highlight — 1px tall, sits on the border, never on text */ .card::after{ content:''; position:absolute; left:16px; right:16px; top:-1px; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, var(--accent), transparent); background-size:220% 100%; background-position:100% 0; opacity:0; transition:opacity .4s var(--ease), background-position .8s var(--dw-ease-out); } /* keep the shadow stable on non-lifting cards (style.css zeroes it on hover) */ .card-static:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 1px 3px rgba(0,0,0,.3); } .card-icon{ box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 6px 18px -8px var(--accent); transition:transform .4s var(--dw-ease-out), box-shadow .4s var(--ease); } @media (hover:hover) and (pointer:fine){ .card:hover::after{ opacity:.8; background-position:0 0; } .card:not(.card-static):hover{ transform:translateY(-6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 20px 48px rgba(0,0,0,.55), 0 0 0 1px var(--accent-line), 0 14px 44px -18px var(--accent); --dw-cg:1; } .card-static:hover{ --dw-cg:1; } .card:not(.card-static):hover .card-icon{ transform:translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px -8px var(--accent); } } /* other card-like surfaces get matching depth (no size change) */ .hero-panel{ position:relative; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 28px 72px rgba(0,0,0,.5); } .hero-panel::before{ content:''; position:absolute; left:24px; right:24px; top:-1px; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.7; } .stat-tiles .tile, .toc, .takeaways, .answer-box, .faq-item, .media-frame{ box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 1px 3px rgba(0,0,0,.26); } .stat-tiles .tile{ background-image: linear-gradient(180deg, rgba(255,255,255,.035), transparent 46%); transition:border-color var(--t), transform .35s var(--dw-ease-out), box-shadow .35s var(--ease); } .answer-box{ background-image: radial-gradient(80% 130% at 0% 0%, var(--accent-soft), transparent 62%), linear-gradient(135deg, var(--accent-soft), transparent 70%); /* original layer preserved */ } .faq-item{ background-image:linear-gradient(180deg, rgba(255,255,255,.028), transparent 42%); transition:border-color var(--t), box-shadow var(--t); } .media-frame img{ transition:transform .6s var(--dw-ease-out); } @media (hover:hover) and (pointer:fine){ .stat-tiles .tile:hover{ transform:translateY(-4px); border-color:var(--accent-line); } .faq-item:hover{ border-color:var(--accent-line); } .media-frame:hover img{ transform:scale(1.03); } .trust-strip img:hover{ transform:translateY(-2px); } } .trust-strip img{ transition:opacity var(--t), filter var(--t), transform var(--t) var(--ease); } /* chips + badges + step markers */ .chip, .badge{ transition:border-color var(--t), color var(--t), background var(--t), box-shadow var(--t); } a.chip:hover{ box-shadow:0 0 0 1px var(--accent-line), 0 6px 18px -10px var(--accent); } .badge{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .step-list li::before{ background:linear-gradient(180deg, var(--accent-soft), transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px -12px var(--accent); } /* ========================================================================== 6 · BUTTON ENHANCEMENT The shine is a BACKGROUND layer, so it can never sit on top of the label. Text, size, padding and placement are unchanged. ========================================================================== */ .btn-primary{ background-image: linear-gradient(100deg, transparent 36%, rgba(255,255,255,.42) 48%, transparent 60%), var(--grad-brand); /* original layer, preserved */ background-size:230% 100%, 100% 100%; background-position:165% 0, 0 0; background-repeat:no-repeat, no-repeat; box-shadow:0 4px 16px rgba(0,150,220,.22), inset 0 1px 0 rgba(255,255,255,.25); transition: transform var(--t) var(--ease), box-shadow var(--t), background-position .85s var(--dw-ease-out), color var(--t), border-color var(--t); } .btn-ghost, .btn-soft{ transition:transform var(--t) var(--ease), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t); } @media (hover:hover) and (pointer:fine){ .btn-primary:hover{ background-position:-65% 0, 0 0; transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,190,255,.42), inset 0 1px 0 rgba(255,255,255,.35); } .btn-ghost:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px var(--accent-line), 0 10px 26px -14px var(--accent); } .btn-soft:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -14px var(--accent); } } /* keep the original tap/active feedback authoritative */ .btn:active{ transform:translateY(1px); } /* floating contact buttons — soft halo */ .float-cta a{ position:relative; transition:transform var(--t) var(--dw-ease-out), box-shadow var(--t); } .float-cta a::after{ content:''; position:absolute; z-index:-1; inset:-7px; border-radius:50%; pointer-events:none; border:1px solid var(--accent-line); opacity:0; animation:dw-halo 3.4s ease-out infinite; } .float-cta .f-wa::after{ border-color:rgba(31,190,95,.5); } @keyframes dw-halo{ 0% { transform:scale(.86); opacity:.55 } 70% { transform:scale(1.22); opacity:0 } 100%{ transform:scale(1.22); opacity:0 } } @media (hover:hover) and (pointer:fine){ .float-cta a:hover{ transform:translateY(-3px) scale(1.04); } } /* ========================================================================== 7 · CTA BAND + FOOTER POLISH ========================================================================== */ .cta-band{ position:relative; background-image: radial-gradient(circle at 1px 1px, rgba(148,196,255,.13) 1px, transparent 0), radial-gradient(62% 120% at 88% 6%, var(--accent-soft), transparent 62%), linear-gradient(120deg, rgba(0,229,255,.12), rgba(47,125,255,.12)); /* original layer preserved */ background-size:24px 24px, 100% 100%, 100% 100%; background-position:0 0, 0 0, 0 0; background-repeat:repeat, no-repeat, no-repeat; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 64px -30px var(--accent); } .site-footer::before{ content:''; position:absolute; z-index:-1; top:-1px; left:0; right:0; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, var(--accent-line), transparent); } /* ========================================================================== 8 · HEADER POLISH (visual only — no nav logic, no breakpoints touched) ========================================================================== */ .site-header.scrolled, .site-header.menu-open{ box-shadow: 0 1px 0 var(--line), 0 8px 32px rgba(0,0,0,.35), inset 0 -1px 0 var(--accent-line); } .nav-desktop a.nav-link[aria-current=page]{ box-shadow:inset 0 -1px 0 var(--accent-line); } .sub-menu{ box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.06); } /* ========================================================================== 9 · SCROLL REVEAL POLISH Enhances the EXISTING .reveal/.in system (main.js). The .dw-reveal classes are a parallel, opt-in refinement applied by visual-enhancements.js only when IntersectionObserver exists — never a competing second system. ========================================================================== */ @media (prefers-reduced-motion:no-preference){ .reveal{ transform:translateY(22px) scale(.996); transition:opacity .7s var(--dw-ease-out), transform .7s var(--dw-ease-out); } .reveal.in{ transform:none; } .dw-reveal{ opacity:0; transform:translateY(16px) scale(.997); transition:opacity .65s var(--dw-ease-out), transform .65s var(--dw-ease-out); transition-delay:var(--dw-d, 0ms); } .dw-reveal.dw-in{ opacity:1; transform:none; } } /* ========================================================================== 10 · ACCESSIBILITY — focus states stay loud and obvious ========================================================================== */ :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; box-shadow:0 0 0 5px var(--accent-soft); } .btn:focus-visible{ box-shadow:0 0 0 5px var(--accent-soft), 0 8px 24px -14px var(--accent); } /* ========================================================================== 11 · TABLET SAFETY (<= 1024px) ========================================================================== */ @media (max-width:1024px){ .hero::before{ display:none; } /* no off-canvas decorative objects */ .hero::after{ opacity:.07; animation:none; } .dw-glow, .dw-cur, .dw-cur-dot{ display:none !important; } html.dw-cursor, html.dw-cursor *{ cursor:auto !important; } .section-head::before{ width:min(340px,80vw); height:170px; left:-24px; top:-42px; } } /* ========================================================================== 12 · MOBILE SAFETY (<= 768px) — everything hover-dependent is removed ========================================================================== */ @media (max-width:768px){ .bg-decor::before{ opacity:.105; animation-duration:76s; } .bg-decor::after { opacity:.065; animation-duration:96s; } body::after{ opacity:.34; } .bg-grid{ opacity:.3; } .hero::after{ display:none; } main > section:nth-of-type(even):not(.hero)::after{ background-image:linear-gradient(180deg, transparent, rgba(148,196,255,.018) 30%, rgba(148,196,255,.018) 70%, transparent); } main > section + section::before{ width:92vw; opacity:.4; } /* cards: flat, tappable, zero transform */ .card{ --dw-cg:0 !important; } .card:hover, .card:not(.card-static):hover, .card-static:hover{ transform:none !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 3px rgba(0,0,0,.28) !important; } .card::after{ display:none; } .card:hover .card-icon, .card:not(.card-static):hover .card-icon{ transform:none !important; } .stat-tiles .tile:hover, .float-cta a:hover, .btn-primary:hover, .btn-ghost:hover, .btn-soft:hover{ transform:none !important; } .media-frame:hover img{ transform:none !important; } .grad-text{ animation:none; background-position:0 0; } /* spotlight kept strictly inside the gutter so nothing can push the page wide */ .section-head::before{ left:0; width:min(300px,78vw); height:150px; top:-34px; } } @media (max-width:480px){ .bg-decor::before{ opacity:.09; } .bg-decor::after { display:none; } .section-head::before{ opacity:.08; } .float-cta a::after{ animation:none; opacity:0; } } /* ========================================================================== 13 · REDUCED MOTION — hard stop on every moving part ========================================================================== */ @media (prefers-reduced-motion:reduce){ .bg-decor::before, .bg-decor::after, .hero::before, .hero::after, .grad-text, .float-cta a::after{ animation:none !important; } .float-cta a::after{ opacity:0 !important; } .dw-glow, .dw-cur, .dw-cur-dot{ display:none !important; } html.dw-cursor, html.dw-cursor *{ cursor:auto !important; } .card, .card-icon, .btn-primary, .btn-ghost, .btn-soft, .stat-tiles .tile, .float-cta a, .media-frame img, .trust-strip img{ transition:none !important; } .card:hover, .card:not(.card-static):hover, .stat-tiles .tile:hover, .btn-primary:hover, .btn-ghost:hover, .btn-soft:hover, .float-cta a:hover, .media-frame:hover img{ transform:none !important; } .dw-reveal{ opacity:1 !important; transform:none !important; } } /* ========================================================================== 14 · PRINT — decoration never reaches paper ========================================================================== */ @media print{ .dw-glow, .dw-cur, .dw-cur-dot{ display:none !important; } body::after{ display:none !important; } main > section + section::before, main > section:nth-of-type(even):not(.hero)::after, .section-head::before, .hero::before, .hero::after, .card::after{ display:none !important; } .card{ background-image:none !important; box-shadow:none !important; } }