/* ============================================================ NETABLOOM v2 - spoločný štýl pre všetky stránky Prepínač témy: alebo "green" ============================================================ */ :root{ --bg:#F7F8FA; --surface:#FFFFFF; --ink:#151823; --ink-soft:#5A6072; --ink-faint:#8A90A0; --line:#E7E9EF; --line-strong:#D5D9E2; --radius:16px; --radius-sm:10px; --shadow:0 2px 4px rgba(21,24,35,0.04), 0 12px 28px -12px rgba(21,24,35,0.12); --shadow-lg:0 4px 8px rgba(21,24,35,0.05), 0 24px 48px -16px rgba(21,24,35,0.18); --container:1180px; --font-display:'Sora', sans-serif; --font-body:'Inter', sans-serif; --ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quint:cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out-soft:cubic-bezier(0.65, 0, 0.35, 1); /* Fialová identita */ --brand:#7C3AED; --brand-dark:#6D28D9; --brand-soft:#F3EEFE; --brand-tint:#EDE4FD; --accent-web:#6366F1; --accent-auto:#8B5CF6; --accent-review:#D946EF; --accent-edu:#EC4899; --hero-grad-a:#EDE4FD; --hero-grad-b:#F7F8FA; } /* Dark mode */ html[data-theme="dark"]{ --bg:#0B0C10; --surface:#14161C; --ink:#F3F4F7; --ink-soft:#A2A8B8; --ink-faint:#6B7180; --line:#242832; --line-strong:#2F3542; --brand:#9B6DFF; --brand-dark:#8B5CF6; --brand-soft:#1E1A2E; --brand-tint:#241D38; --accent-web:#818CF8; --accent-auto:#A78BFA; --accent-review:#E879F9; --accent-edu:#F472B6; --hero-grad-a:#171226; --hero-grad-b:#0B0C10; --shadow:0 2px 4px rgba(0,0,0,0.3), 0 12px 28px -12px rgba(0,0,0,0.55); --shadow-lg:0 4px 8px rgba(0,0,0,0.35), 0 24px 48px -16px rgba(0,0,0,0.65); } html{ transition:none; } body, header.site, .card, .price-card, .host-card, .contact-item, .form-card, .field input, .field textarea, footer.site, .mobile-drawer{ transition:background-color .35s var(--ease-out-quint), border-color .35s var(--ease-out-quint), color .35s var(--ease-out-quint); } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em; line-height:1.1; color:var(--ink); } .wrap{ max-width:var(--container); margin:0 auto; padding:0 28px; } .mono{ font-family:'JetBrains Mono', monospace; } /* ---------- Header ---------- */ header.site{ position:sticky; top:0; z-index:50; background:rgba(247,248,250,0.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); transition:box-shadow .3s var(--ease-out-quint), background .3s ease; } header.site.scrolled{ box-shadow:0 4px 20px -8px rgba(21,24,35,0.12); background:rgba(247,248,250,0.92); } .nav{ max-width:var(--container); margin:0 auto; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; } .brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.2rem; } .brand .logo-mark{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .brand span.n{ color:var(--ink); } .brand span.b{ color:var(--brand); } nav.menu{ display:flex; gap:6px; } nav.menu a{ position:relative; padding:8px 14px; border-radius:8px; font-size:0.92rem; font-weight:500; color:var(--ink-soft); transition:color .2s ease; } nav.menu a::after{ content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px; background:var(--brand); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out-quint); } nav.menu a:hover{ color:var(--ink); } nav.menu a:hover::after{ transform:scaleX(1); } nav.menu a.active{ color:var(--brand); } nav.menu a.active::after{ transform:scaleX(1); } .nav-right{ display:flex; align-items:center; gap:12px; } .theme-toggle{ width:38px; height:38px; border-radius:9px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:border-color .2s ease, color .2s ease, background .2s ease; } .theme-toggle:hover{ border-color:var(--brand); color:var(--brand); } .theme-toggle svg{ width:18px; height:18px; } .theme-toggle .sun{ display:none; } .theme-toggle .moon{ display:block; } html[data-theme="dark"] .theme-toggle .sun{ display:block; } html[data-theme="dark"] .theme-toggle .moon{ display:none; } .theme-switch{ display:flex; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px; } .theme-switch button{ width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; transition:.15s ease; } .theme-switch button.v{ background:#7C3AED; } .theme-switch button.g{ background:#0E9F6E; } .theme-switch button[aria-pressed="true"]{ border-color:var(--ink); transform:scale(1.1); } .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; border-radius:9px; font-weight:600; font-size:0.92rem; cursor:pointer; border:1px solid transparent; transition:background .25s var(--ease-out-quint), transform .25s var(--ease-out-quint), box-shadow .25s var(--ease-out-quint), border-color .25s var(--ease-out-quint); white-space:nowrap; overflow:hidden; } .btn:active{ transform:translateY(0) scale(0.98); } .btn-primary{ background:var(--brand); color:#fff; box-shadow:0 1px 2px rgba(124,58,237,0.2); } .btn-primary:hover{ background:var(--brand-dark); transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(124,58,237,0.45); } /* Shine sweep on primary CTA */ .btn-primary::after{ content:''; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent); transform:skewX(-18deg); transition:none; pointer-events:none; } .btn-primary:hover::after{ animation:btnShine .85s var(--ease-out-quint); } @keyframes btnShine{ from{ left:-120%; } to{ left:150%; } } @media (prefers-reduced-motion:reduce){ .btn-primary:hover::after{ animation:none; } .btn:active{ transform:none; } } .btn-ghost{ background:var(--surface); border-color:var(--line-strong); color:var(--ink); } .btn-ghost:hover{ border-color:var(--brand); color:var(--brand); } .btn-lg{ padding:14px 28px; font-size:1rem; } .menu-toggle{ display:none; background:none; border:none; flex-direction:column; gap:5px; cursor:pointer; } .menu-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; } /* ---------- Sections ---------- */ section{ padding:84px 0; } section[id]{ scroll-margin-top:80px; } .eyebrow{ display:inline-block; font-size:0.78rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--brand); margin-bottom:14px; } .section-head{ max-width:640px; margin:0 auto 56px; text-align:center; } .section-head.left{ margin-left:0; text-align:left; } .section-head h2{ font-size:clamp(1.8rem,3.4vw,2.5rem); } .section-head p{ color:var(--ink-soft); margin-top:14px; font-size:1.05rem; } /* ---------- Hero ---------- */ .hero{ background:linear-gradient(180deg, var(--hero-grad-a), var(--hero-grad-b) 70%); padding:80px 0 90px; text-align:center; position:relative; overflow:hidden; } .hero::before, .hero::after{ content:''; position:absolute; border-radius:50%; filter:blur(64px); opacity:0.75; pointer-events:none; z-index:0; } .hero::before{ width:480px; height:480px; background:radial-gradient(circle, rgba(124,58,237,0.34), transparent 68%); top:-150px; left:-90px; animation:heroFloat1 16s var(--ease-in-out-soft) infinite; } .hero::after{ width:400px; height:400px; background:radial-gradient(circle, rgba(168,85,247,0.28), transparent 68%); bottom:-130px; right:-70px; animation:heroFloat2 20s var(--ease-in-out-soft) infinite; } html[data-theme="dark"] .hero::before{ background:radial-gradient(circle, rgba(155,109,255,0.42), transparent 68%); opacity:0.6; } html[data-theme="dark"] .hero::after{ background:radial-gradient(circle, rgba(232,121,249,0.28), transparent 68%); opacity:0.5; } @keyframes heroFloat1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(46px, 34px) scale(1.08); } } @keyframes heroFloat2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-40px, -30px) scale(1.06); } } @media (prefers-reduced-motion:reduce){ .hero::before, .hero::after{ animation:none; } } .hero .wrap{ position:relative; z-index:2; } .hero-pill{ display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 16px; font-size:0.82rem; color:var(--ink-soft); margin-bottom:24px; box-shadow:var(--shadow); } .hero-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand); position:relative; } .hero-pill .dot::after{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--brand); animation:dotPulse 2.4s ease-out infinite; } @keyframes dotPulse{ 0%{ transform:scale(1); opacity:0.7; } 70%,100%{ transform:scale(3); opacity:0; } } @media (prefers-reduced-motion:reduce){ .hero-pill .dot::after{ animation:none; } } /* Page load fade */ body{ opacity:0; animation:pageIn .5s var(--ease-out-expo) forwards; } @keyframes pageIn{ to{ opacity:1; } } @media (prefers-reduced-motion:reduce){ body{ opacity:1; animation:none; } } .hero h1{ font-size:clamp(2.4rem,5.5vw,3.8rem); max-width:820px; margin:0 auto 20px; } .hero h1 .accent{ color:var(--brand); background:linear-gradient(100deg, var(--brand) 20%, #A855F7 40%, var(--brand) 60%); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:accentSheen 6s linear infinite; } @keyframes accentSheen{ to{ background-position:200% center; } } @media (prefers-reduced-motion:reduce){ .hero h1 .accent{ animation:none; -webkit-text-fill-color:var(--brand); } } .hero p.lead{ font-size:1.15rem; color:var(--ink-soft); max-width:560px; margin:0 auto 34px; } .hero-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } /* ---------- Cards ---------- */ .card-grid{ display:grid; gap:20px; } .card-grid.cols-2{ grid-template-columns:repeat(2,1fr); } .card-grid.cols-3{ grid-template-columns:repeat(3,1fr); } /* Center trailing items when the last row is incomplete */ .card-grid.cols-3.center-last{ justify-content:center; } .card-grid.cols-3.center-last > *:nth-last-child(2):nth-child(3n+1){ grid-column:auto; } .card-grid.cols-4{ grid-template-columns:repeat(4,1fr); } .card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); transition:transform .35s var(--ease-out-quint), box-shadow .35s var(--ease-out-quint), border-color .35s var(--ease-out-quint); overflow:hidden; z-index:0; } .card::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; transition:opacity .4s var(--ease-out-quint); background:radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%); } .card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--brand-tint); } .card:hover::before{ opacity:1; } .card-ic{ transition:transform .35s var(--ease-out-quint); } .card:hover .card-ic{ transform:scale(1.08) translateY(-2px); } .card .go{ transition:letter-spacing .25s var(--ease-out-quint), color .2s ease; } .card:hover .go{ color:var(--brand-dark); } .card-ic{ width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; } .card h3{ font-size:1.15rem; margin-bottom:8px; } .card p{ color:var(--ink-soft); font-size:0.94rem; } .card .go{ display:inline-block; margin-top:14px; font-size:0.88rem; font-weight:600; color:var(--brand); } /* Icon color variants */ .ic-web{ background:color-mix(in srgb, var(--accent-web) 14%, white); color:var(--accent-web); } .ic-auto{ background:color-mix(in srgb, var(--accent-auto) 14%, white); color:var(--accent-auto); } .ic-review{ background:color-mix(in srgb, var(--accent-review) 14%, white); color:var(--accent-review); } .ic-edu{ background:color-mix(in srgb, var(--accent-edu) 14%, white); color:var(--accent-edu); } .ic-brand{ background:var(--brand-soft); color:var(--brand); } /* ---------- Process ---------- */ .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step; } .step{ position:relative; } .step .num{ font-family:var(--font-display); font-weight:700; font-size:0.85rem; color:var(--brand); background:var(--brand-soft); width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; } .step h4{ font-size:1.05rem; margin-bottom:6px; } .step p{ color:var(--ink-soft); font-size:0.9rem; } /* ---------- CTA band ---------- */ .cta-band{ position:relative; overflow:hidden; border-radius:22px; padding:72px 48px; text-align:center; color:#fff; background:linear-gradient(135deg, #1A1033 0%, #2D1B5E 45%, #3B1F7A 100%); isolation:isolate; } /* Subtle dot grid */ .cta-band::before{ content:''; position:absolute; inset:0; z-index:-2; background-image:radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px); background-size:22px 22px; mask-image:radial-gradient(ellipse 80% 90% at 50% 40%, #000 40%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 80% 90% at 50% 40%, #000 40%, transparent 75%); } /* Soft glow orb */ .cta-band::after{ content:''; position:absolute; z-index:-1; width:520px; height:520px; border-radius:50%; top:-260px; left:50%; transform:translateX(-50%); background:radial-gradient(circle, rgba(155,109,255,0.5), transparent 65%); filter:blur(40px); } .cta-band .cta-eyebrow{ display:inline-block; font-size:0.76rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:#C9B6FF; margin-bottom:16px; padding:6px 14px; border:1px solid rgba(255,255,255,0.16); border-radius:999px; background:rgba(255,255,255,0.04); } .cta-band h2{ color:#fff; font-size:clamp(1.7rem,3.2vw,2.4rem); margin-bottom:14px; letter-spacing:-0.02em; } .cta-band p{ color:rgba(255,255,255,0.72); max-width:460px; margin:0 auto 30px; font-size:1.02rem; } .cta-band .btn-primary{ background:#fff; color:#2D1B5E; box-shadow:0 8px 24px -6px rgba(0,0,0,0.35); } .cta-band .btn-primary:hover{ background:#F3EEFE; transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(0,0,0,0.45); } .cta-band .btn-primary::after{ background:linear-gradient(100deg, transparent, rgba(124,58,237,0.18), transparent); } html[data-theme="dark"] .cta-band{ background:linear-gradient(135deg, #120B24 0%, #241546 45%, #2E1A5C 100%); border:1px solid var(--line); } @media (max-width:600px){ .cta-band{ padding:52px 26px; } } /* ---------- Footer ---------- */ footer.site{ background:var(--surface); border-top:1px solid var(--line); padding:56px 0 28px; } .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; } .foot-brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.15rem; margin-bottom:12px; } .foot-col h5{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); margin-bottom:14px; } .foot-col a, .foot-col p{ display:block; font-size:0.9rem; color:var(--ink-soft); margin-bottom:9px; } .foot-col a:hover{ color:var(--brand); } .foot-bottom{ border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.82rem; color:var(--ink-faint); } /* ---------- FAQ ---------- */ .faq-item{ border-bottom:1px solid var(--line); } .faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:20px 4px; display:flex; justify-content:space-between; align-items:center; font-family:var(--font-body); font-weight:600; font-size:1rem; color:var(--ink); } .faq-q .plus{ font-size:1.3rem; color:var(--brand); transition:transform .3s ease; flex-shrink:0; margin-left:16px; } .faq-item.open .plus{ transform:rotate(45deg); } .faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; } .faq-a p{ padding:0 4px 20px; color:var(--ink-soft); font-size:0.94rem; } /* ---------- Aurora background accent ---------- */ .aurora{ position:relative; overflow:hidden; } .aurora::before{ content:''; position:absolute; z-index:0; width:600px; height:600px; border-radius:50%; pointer-events:none; background:radial-gradient(circle, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%); filter:blur(60px); top:-200px; left:-150px; animation:auroraDrift 22s var(--ease-in-out-soft) infinite; } .aurora > *{ position:relative; z-index:1; } @keyframes auroraDrift{ 0%,100%{ transform:translate(0,0); } 33%{ transform:translate(180px, 60px); } 66%{ transform:translate(60px, 160px); } } @media (prefers-reduced-motion:reduce){ .aurora::before{ animation:none; } } /* ---------- Featured project showcase ---------- */ .showcase{ position:relative; overflow:hidden; border-radius:22px; padding:44px; display:grid; grid-template-columns:1.15fr 1fr; gap:44px; align-items:center; background:linear-gradient(135deg, #1A1033 0%, #2D1B5E 50%, #3B1F7A 100%); isolation:isolate; } .showcase::before{ content:''; position:absolute; inset:0; z-index:-2; background-image:radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px); background-size:24px 24px; mask-image:radial-gradient(ellipse 90% 100% at 30% 30%, #000 30%, transparent 70%); -webkit-mask-image:radial-gradient(ellipse 90% 100% at 30% 30%, #000 30%, transparent 70%); } .showcase::after{ content:''; position:absolute; z-index:-1; width:460px; height:460px; border-radius:50%; top:-200px; right:-120px; background:radial-gradient(circle, rgba(155,109,255,0.4), transparent 65%); filter:blur(50px); } .showcase-img{ border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.12); box-shadow:0 24px 60px -18px rgba(0,0,0,0.6); transform:perspective(1200px) rotateY(-4deg); transition:transform .5s var(--ease-out-quint); } .showcase:hover .showcase-img{ transform:perspective(1200px) rotateY(0deg) translateY(-4px); } .showcase-img img{ display:block; width:100%; } .showcase-body .badge-live{ display:inline-flex; align-items:center; gap:7px; font-size:0.76rem; font-weight:600; letter-spacing:0.06em; color:#7CFFB2; background:rgba(52,211,153,0.12); border:1px solid rgba(52,211,153,0.25); padding:5px 13px; border-radius:999px; margin-bottom:16px; } .showcase-body .badge-live .dot{ width:7px; height:7px; border-radius:50%; background:#34D399; box-shadow:0 0 0 0 rgba(52,211,153,0.6); animation:liveDot 2s ease-out infinite; } @keyframes liveDot{ 0%{ box-shadow:0 0 0 0 rgba(52,211,153,0.5); } 70%,100%{ box-shadow:0 0 0 8px rgba(52,211,153,0); } } .showcase-body h3{ color:#fff; font-size:1.7rem; margin-bottom:10px; } .showcase-body p{ color:rgba(255,255,255,0.72); margin-bottom:22px; } .showcase-stats{ display:flex; gap:28px; margin-bottom:26px; } .showcase-stat .n{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:#fff; } .showcase-stat .l{ font-size:0.78rem; color:rgba(255,255,255,0.55); } .showcase-body .btn-primary{ background:#fff; color:#2D1B5E; } .showcase-body .btn-primary:hover{ background:#F3EEFE; } @media (prefers-reduced-motion:reduce){ .showcase-img{ transform:none; } .showcase:hover .showcase-img{ transform:none; } .showcase-body .badge-live .dot{ animation:none; } } @media (max-width:820px){ .showcase{ grid-template-columns:1fr; gap:32px; padding:32px; } .showcase-img{ transform:none; } } /* ---------- Reveal (premium easing + stagger) ---------- */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo); will-change:opacity, transform; } .reveal.in{ opacity:1; transform:translateY(0); } .reveal.done{ will-change:auto; } /* Stagger: children animate in sequence once parent is revealed */ [data-stagger] > *{ opacity:0; transform:translateY(20px); transition:opacity .65s var(--ease-out-expo), transform .65s var(--ease-out-expo); will-change:opacity, transform; } [data-stagger].in > *{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion:reduce){ .reveal, [data-stagger] > *{ opacity:1 !important; transform:none !important; transition:none !important; } } /* ---------- Page header (inner pages) ---------- */ .page-hero{ background:linear-gradient(180deg, var(--hero-grad-a), var(--bg) 80%); padding:70px 0 50px; text-align:center; } .page-hero h1{ font-size:clamp(2rem,4vw,3rem); margin-bottom:14px; } .page-hero p{ color:var(--ink-soft); font-size:1.08rem; max-width:560px; margin:0 auto; } /* ---------- Mobile ---------- */ @media (max-width:900px){ nav.menu{ display:none; } .menu-toggle{ display:flex; } .card-grid.cols-4{ grid-template-columns:repeat(2,1fr); } .card-grid.cols-3{ grid-template-columns:1fr; } .card-grid.cols-2{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr 1fr; } .foot-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .card-grid.cols-4{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr; } .foot-grid{ grid-template-columns:1fr; } } /* ---------- Mobile drawer ---------- */ .mobile-drawer{ position:fixed; inset:0 0 0 auto; width:min(300px,80vw); background:var(--surface); box-shadow:var(--shadow-lg); z-index:60; transform:translateX(100%); transition:transform .25s ease; padding:24px; display:flex; flex-direction:column; gap:4px; } .mobile-drawer.open{ transform:translateX(0); } .mobile-drawer a{ padding:14px 12px; border-radius:8px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--line); } .mobile-drawer a:last-of-type{ border-bottom:none; } .drawer-backdrop{ position:fixed; inset:0; background:rgba(21,24,35,0.4); z-index:59; opacity:0; pointer-events:none; transition:.25s ease; } .drawer-backdrop.open{ opacity:1; pointer-events:auto; }