/* deny.sh premium enhancement layer (2026-06-18) Loads AFTER v2.css. Adds depth, committed colour, atmosphere, motion. Strictly additive + opt-in: every rule is scoped under body.premium, so pages that do not carry the class are byte-for-byte untouched even if this file is linked. Convert a page by: , adding /css/premium.css after v2.css, /js/premium.js before , and tagging reveal targets with class="reveal" (optional data-d="1|2|3" for stagger). */ body.premium { /* layered shadow system — the depth that was missing */ --sh-1: 0 1px 2px rgba(20,30,60,.04), 0 2px 6px rgba(20,30,60,.05); --sh-2: 0 2px 4px rgba(20,30,60,.04), 0 8px 20px rgba(20,30,60,.07); --sh-3: 0 8px 24px rgba(30,50,90,.08), 0 24px 60px rgba(30,50,90,.10); --sh-glow: 0 10px 40px rgba(94,140,206,.22); --accent-deep: #2c4f86; background: #fbfbfd; } /* ===== NAV: glass + depth on scroll ===== */ body.premium .v2-nav { background: rgba(251,251,253,.72); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, background .3s; } body.premium .v2-nav.scrolled { border-bottom-color: var(--rule); box-shadow: 0 1px 0 rgba(20,30,60,.02), 0 6px 24px rgba(20,30,60,.05); } body.premium .v2-nav-cta { box-shadow: var(--sh-1); transition: transform .18s, box-shadow .18s, background .18s; } body.premium .v2-nav-cta:hover { transform: translateY(-1px); box-shadow: var(--sh-2); } /* ===== HERO: ambient glow + grid backdrop + gradient headline ===== */ body.premium .hero.hero-centered { position: relative; overflow: hidden; } body.premium .hero.hero-centered::before { content: ""; position: absolute; z-index: 0; top: -34%; left: 50%; width: 1100px; height: 760px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(ellipse at center, rgba(94,140,206,.18), rgba(94,140,206,.06) 42%, transparent 70%); filter: blur(8px); } body.premium .hero.hero-centered::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(94,140,206,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(94,140,206,.05) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 70% 58% at 50% 32%, #000 28%, transparent 76%); mask-image: radial-gradient(ellipse 70% 58% at 50% 32%, #000 28%, transparent 76%); } body.premium .hero.hero-centered > .container { position: relative; z-index: 1; } body.premium .hero h1 .accent { background: linear-gradient(110deg, var(--accent) 8%, var(--accent-deep) 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent-deep); } /* hero glance pills get elevation */ body.premium .hero-stats li { background: var(--card); border: 1px solid var(--rule); border-radius: 100px; box-shadow: var(--sh-1); } /* ===== BUTTONS: gradient + glow + lift ===== */ body.premium a.btn-primary, body.premium .btn-primary { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%); color: #fff; box-shadow: var(--sh-glow); transition: transform .18s, box-shadow .18s; } body.premium a.btn-primary:hover, body.premium .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 50px rgba(94,140,206,.34); } body.premium .btn-primary .btn-arrow { transition: transform .2s; } body.premium .btn-primary:hover .btn-arrow { transform: translateX(3px); } body.premium .btn-secondary { box-shadow: var(--sh-1); transition: transform .18s, box-shadow .18s; } body.premium .btn-secondary:hover { transform: translateY(-2px); box-shadow: var(--sh-2); } /* ===== SECTION BANDS: alternating tint for rhythm ===== */ body.premium section.v2.v2-bg-soft { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-tint,#f4f6fb) 16%, var(--bg-tint,#f4f6fb) 84%, var(--bg) 100%); } /* ===== FEATURE CARDS: elevation + hover lift + accent reveal bar ===== */ body.premium .feature-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1.8rem; box-shadow: var(--sh-1); position: relative; overflow: hidden; transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s; } body.premium .feature-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); transform: scaleX(0); transform-origin: left; transition: transform .3s; } body.premium .feature-card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: #cdd9ec; } body.premium .feature-card:hover::before { transform: scaleX(1); } body.premium .feature-tag { color: var(--accent-text); background: var(--accent-soft); display: inline-block; padding: .25rem .6rem; border-radius: 6px; font-size: .64rem; } /* ===== LOOP DIAGRAM: cards lift out of the flat grid ===== */ body.premium .loop-grid { border: none !important; background: transparent !important; gap: 1rem !important; grid-template-columns: repeat(4,1fr); } body.premium .loop-step { background: var(--card); border: 1px solid var(--rule) !important; border-radius: var(--radius-lg); box-shadow: var(--sh-2); transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s; } body.premium .loop-step:hover { transform: translateY(-6px); box-shadow: var(--sh-3); } body.premium .loop-icon { box-shadow: var(--sh-1); } body.premium .loop-arrow { background: transparent; } @media (max-width: 860px) { body.premium .loop-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { body.premium .loop-grid { grid-template-columns: 1fr; } } /* ===== POSITIONING SPLIT: the "us" card gets glow ===== */ body.premium .pos-card { box-shadow: var(--sh-2); border-radius: var(--radius-lg); } body.premium .pos-card.us { background: linear-gradient(180deg, #fff, var(--accent-soft)); border-color: #cdd9ec; box-shadow: var(--sh-glow); } /* ===== TERMINAL / CODE WINDOWS: traffic-light dots + depth ===== Upgrades the existing .tripwire-snippet dark code window to match the prototype terminal: rounded, shadowed, with macOS-style traffic lights. */ body.premium .tripwire-snippet { scroll-margin-top: 90px; background: #0c0d11; border: 1px solid #1d2030; border-radius: var(--radius-lg); box-shadow: var(--sh-3); } body.premium .tripwire-snippet-head { background: #13151f; border-bottom-color: #1d2030; padding: .8rem 1.1rem; } /* three traffic-light dots, rendered as one element + two box-shadows */ body.premium .tripwire-snippet-head::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%; background: #ec6a5e; box-shadow: 18px 0 0 #f4bf4f, 36px 0 0 #61c554; margin-right: 46px; } body.premium .tripwire-snippet-code { padding: 1.4rem 1.5rem; } /* Plain dark code blocks (npm install one-liner etc) just get depth. */ body.premium .code-block { border-radius: var(--radius-lg); box-shadow: var(--sh-2); } /* ===== SCROLL REVEAL ===== HIDING IS GUARDED: elements only go opacity:0 once premium.js has run and added body.premium-ready. No-JS, JS-error, or reduced-motion => nothing is ever hidden, the page renders fully. This makes the rollout safe on pages that have no manual reveal hooks (motion is auto-applied by the script). */ body.premium.premium-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } body.premium.premium-ready .reveal.in { opacity: 1; transform: none; } body.premium.premium-ready .reveal[data-d="1"] { transition-delay: .08s; } body.premium.premium-ready .reveal[data-d="2"] { transition-delay: .16s; } body.premium.premium-ready .reveal[data-d="3"] { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { body.premium.premium-ready .reveal { opacity: 1; transform: none; transition: none; } }