/* ========================================================================== DropHub landing — global styles Base rules + keyframes come from the original design; dark theme only. Responsive rules target class hooks added on grid containers in the PHP partials (they use !important to override the design's inline styles). ========================================================================== */ *{box-sizing:border-box} [hidden]{display:none!important} /* Smooth in-page navigation (anchors already carry scroll-margin-top for the sticky nav) */ @media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} } a{color:#F8B496;text-decoration:none} a:hover{color:#F15B22} body{margin:0;background:#070910;color:#EBEDF1;font-family:Manrope,sans-serif} ::selection{background:#C2410C;color:#fff} @keyframes dh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @keyframes dh-floatS{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes dh-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} @keyframes dh-glow{0%,100%{opacity:.45}50%{opacity:.8}} @keyframes dh-spin{to{transform:rotate(360deg)}} @keyframes dh-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}} .dh-marquee-track{display:flex;width:max-content;animation:dh-marquee 26s linear infinite} .dh-marquee-track:hover{animation-play-state:paused} a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--acc,#F8B496);outline-offset:3px} @media (prefers-reduced-motion:reduce){ .dh-marquee-track{animation:none} *{animation-duration:.001ms!important;animation-iteration-count:1!important} } details>summary{list-style:none;cursor:pointer} details>summary::-webkit-details-marker{display:none} /* ===== Container width token (swap to widen the whole layout) ===== */ /* Option A (wide monitors): content 1440px, nav 1520px. */ :root{--dh-max:1440px;--dh-navmax:1520px} /* ===== Modern Tech theme tokens (dark) ===== */ :root,[data-dh-theme="dark"]{ --p:#070910;--band:#0B0E16;--band2:#0D111B;--nav:rgba(7,9,16,.82);--panel:rgba(13,16,23,.55); --tx1:#EBEDF1;--head:#fff;--tx2:#AEB4BE;--tx2b:#A9AFBA;--tx3:#AEB6C2;--tx4:#C4C9D1;--tx5:#99A2B0;--acc:#F8B496; --w012:rgba(255,255,255,.012);--w015:rgba(255,255,255,.015);--w02:rgba(255,255,255,.02);--w03:rgba(255,255,255,.03); --w035:rgba(255,255,255,.035);--w04:rgba(255,255,255,.04);--w045:rgba(255,255,255,.045);--w05:rgba(255,255,255,.05); --w07:rgba(255,255,255,.07);--w08:rgba(255,255,255,.08);--w09:rgba(255,255,255,.09);--w10:rgba(255,255,255,.1); --w12:rgba(255,255,255,.12);--w16:rgba(255,255,255,.16);--w22:rgba(255,255,255,.22);--w025:rgba(255,255,255,.02); } /* ========================================================================== Scroll reveal — elements fade + rise as they enter the viewport. Hidden state is structural + gated by .dh-js (set synchronously in ), so no-JS shows everything and there is no flash of hidden content. Wrapped in prefers-reduced-motion:no-preference to fully opt out. ========================================================================== */ @media (prefers-reduced-motion: no-preference){ /* single blocks that rise as one */ .dh-js header h1, .dh-js h2, .dh-js h2 + p, .dh-js .dh-split-grid{ opacity:0; transform:translateY(24px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); } /* grid children rise with a stagger */ .dh-js .dh-cols-2 > *, .dh-js .dh-cols-3 > *, .dh-js .dh-cols-4 > *, .dh-js .dh-hero-stats > *, .dh-js .dh-galeria-grid > *, .dh-js .dh-about-grid > *, .dh-js .dh-integ-grid > *, .dh-js .dh-opinie-grid > *, .dh-js .dh-contact-grid > *, .dh-js .dh-footer-grid > *{ opacity:0; transform:translateY(20px); transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); } /* revealed */ .dh-js header h1.dh-in, .dh-js h2.dh-in, .dh-js .dh-in{ opacity:1; transform:none } .dh-js .dh-in > *{ opacity:1; transform:none } /* stagger cascade */ .dh-js .dh-in > *:nth-child(2){ transition-delay:.07s } .dh-js .dh-in > *:nth-child(3){ transition-delay:.14s } .dh-js .dh-in > *:nth-child(4){ transition-delay:.21s } .dh-js .dh-in > *:nth-child(5){ transition-delay:.28s } .dh-js .dh-in > *:nth-child(6){ transition-delay:.35s } } /* ===== Full-width section divider (line spans viewport, not just centered content) ===== */ /* Full-bleed section divider: a full-width child of the page wrapper — no 100vw, no clipping ancestor needed (avoids iOS Safari overflow:clip scroll issues). */ .dh-divider{border-top:1px solid var(--w07,rgba(255,255,255,.07))} .dh-divide-top{position:relative} /* legacy no-op: dividers now rendered as elements */ /* ===== Reviews peek carousel (all reviews; ~1.5 visible) ===== */ .dh-swiper-wrap{min-width:0} .dh-swiper{position:relative;overflow:hidden;cursor:grab} .dh-swiper.dh-grabbing{cursor:grabbing} .dh-swiper-track{display:flex;gap:18px;align-items:stretch;transition:transform .42s cubic-bezier(.4,0,.2,1);will-change:transform} .dh-swiper.dh-grabbing .dh-swiper-track{transition:none} .dh-swiper-slide{flex:0 0 62%;min-width:0;box-sizing:border-box} .dh-swiper-slide img{user-select:none;-webkit-user-drag:none} .dh-swiper-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px} .dh-swiper-dots{display:flex;align-items:center;gap:8px} .dh-swiper-dot{width:8px;height:8px;padding:0;border:none;border-radius:999px;background:rgba(255,255,255,.2);cursor:pointer;transition:background .2s,width .2s} .dh-swiper-dot.is-active{background:#F15B22;width:22px} .dh-swiper-arrow{width:38px;height:38px;flex-shrink:0;border-radius:50%;border:1px solid var(--w12,rgba(255,255,255,.12));background:var(--w04,rgba(255,255,255,.04));color:var(--tx3,#AEB6C2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s} .dh-swiper-arrow:hover{background:var(--w08,rgba(255,255,255,.08));color:#fff;border-color:rgba(255,255,255,.2)} /* ===== Mobile navigation ===== */ .dh-nav-toggle{display:none;background:none;border:1px solid var(--w12);border-radius:10px;padding:8px;cursor:pointer;color:var(--tx1)} .dh-nav-toggle svg{display:block} /* ===== Contact form: submitted / error banners ===== */ .dh-form-banner{border-radius:11px;padding:13px 16px;font:600 14px Manrope,sans-serif;margin-bottom:16px} .dh-form-banner--ok{background:rgba(43,122,36,.15);border:1px solid rgba(43,122,36,.5);color:#8FE07E} .dh-form-banner--err{background:rgba(241,91,34,.13);border:1px solid rgba(241,91,34,.5);color:#F8B496} .dh-field-error{color:#F8B496;font:600 12px Manrope,sans-serif;margin-top:5px} .dh-input--invalid{border-color:#F15B22!important;box-shadow:0 0 0 3px rgba(241,91,34,.18)!important} /* honeypot + visually-hidden radios */ .dh-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} /* form input focus (design's style-focus, as real CSS) */ .dh-contact-grid input:focus,.dh-contact-grid textarea:focus{ border-color:#F15B22;background:rgba(241,91,34,.07);box-shadow:0 0 0 3px rgba(241,91,34,.18) } /* topic chips (label wrapping a hidden radio) */ .dh-chip{display:inline-flex;cursor:pointer} .dh-chip span{ display:inline-block;padding:9px 15px;border-radius:11px; border:1px solid var(--w12,rgba(255,255,255,.12));background:var(--w04,rgba(255,255,255,.04)); color:var(--tx3,#AEB6C2);font:600 13px Manrope,sans-serif; transition:border-color .15s,color .15s,background .15s } .dh-chip:hover span{border-color:rgba(241,91,34,.5);color:var(--head,#fff)} .dh-chip:has(input:checked) span{border-color:#F15B22;background:rgba(241,91,34,.14);color:var(--head,#fff)} /* ===== 360° product spin viewer ===== */ .dh-360{user-select:none;-webkit-user-select:none} .dh-360:active{cursor:grabbing} .dh-360-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain} .dh-360-hint{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);background:rgba(19,34,68,.72);color:#fff;font:600 12px Manrope,sans-serif;padding:6px 12px;border-radius:999px;pointer-events:none;transition:opacity .3s;white-space:nowrap} .dh-360.dh-360--spun .dh-360-hint{opacity:0} .dh-360-controls{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:6px;z-index:2} .dh-360-controls button{width:34px;height:34px;border:none;border-radius:50%;background:rgba(19,34,68,.72);color:#fff;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s} .dh-360-controls button:hover{background:rgba(19,34,68,.92)} .dh-360-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(255,255,255,.55);color:#1B4DC1;font:600 13px Manrope,sans-serif;z-index:3} .dh-360-spinner{width:34px;height:34px;border:3px solid rgba(27,77,193,.25);border-top-color:#1B4DC1;border-radius:50%;animation:dh-spin .8s linear infinite} /* ========================================================================== Responsive — collapse the design's fixed grids on smaller screens. ========================================================================== */ /* order-flow: horizontal diagram on desktop, vertical stack on phone */ .dh-flow-mobile{display:none} /* integrations: interactive SVG hub on desktop, vertical list on phone */ .dh-integ-mobile{display:none} /* O nas: shorter copy on mobile */ .dh-about-copy-m{display:none} /* O nas: photo bleeds to the window edge on desktop; stack (text over photo) on narrow screens */ @media (max-width:900px){ .dh-about{display:flex;flex-direction:column-reverse;min-height:0!important} .dh-about-content{max-width:none!important;padding:44px 20px!important} .dh-about-content > div{max-width:none!important} .dh-about-photo{display:none!important} .dh-about-fade{display:none!important} } /* Tablet and below */ @media (max-width:960px){ .dh-cols-4{grid-template-columns:repeat(2,1fr)!important} .dh-hero-stats{grid-template-columns:repeat(2,1fr)!important} .dh-cols-3{grid-template-columns:repeat(2,1fr)!important} .dh-cols-2{grid-template-columns:1fr!important} .dh-integ-grid{grid-template-columns:1fr!important} .dh-about-grid{grid-template-columns:1fr!important} .dh-opinie-grid{grid-template-columns:1fr!important} .dh-swiper-slide{flex-basis:74%} .dh-contact-grid{grid-template-columns:1fr!important} .dh-split-grid{grid-template-columns:1fr!important;grid-template-areas:none!important;row-gap:22px!important} .dh-split-grid > *{grid-area:auto!important} .dh-footer-grid{grid-template-columns:1fr 1fr!important;gap:36px!important} .dh-about-photo{margin-top:0!important} } /* Phone */ @media (max-width:640px){ .dh-swiper-slide{flex-basis:88%} .dh-foot-bottom{flex-direction:column-reverse;align-items:center;text-align:center} .dh-techlogos{justify-content:center;text-align:center} .dh-techlogos-row{justify-content:center} .dh-review{grid-template-columns:1fr!important} .dh-review-logo{display:none!important} .dh-review-logo-m{display:inline-flex!important} .dh-nav-links{display:none!important} .dh-nav-toggle{display:inline-flex} .dh-nav-links.dh-open{ display:flex!important;position:absolute;top:100%;left:0;right:0; flex-direction:column;gap:0!important;align-items:stretch; background:#0B0E16;border-bottom:1px solid var(--w08);padding:8px 0 } .dh-nav-links.dh-open a{padding:13px 40px} .dh-hero-demo{display:none!important} /* center section headings + descriptions on mobile */ .dh-m-center{text-align:center!important} /* O nas: use the shorter mobile copy */ .dh-about-copy-d{display:none!important} .dh-about-copy-m{display:block!important} /* 360 stats: stacked cards — number left, title + description right (mobile mockup) */ .dh-360-stats{flex-direction:column;gap:12px!important} .dh-360-div{display:none} .dh-360-stat{display:flex;align-items:center;gap:14px;background:#F3F6FC;border:1px solid #E9EEF6;border-radius:14px;padding:16px} .dh-360-stat-num{min-width:80px;flex-shrink:0;font-size:17px!important;text-align:center} .dh-360-stat-title{font-size:14px!important;color:#132244!important;margin-top:0!important;font-weight:700!important} .dh-360-stat-desc{display:block!important} /* dark variant: glass stat cards instead of the light ones */ .dh-360-stats--dark .dh-360-stat{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)} .dh-360-stats--dark .dh-360-stat-title{color:#EBEDF1!important} /* 360: single CTA on mobile, full width */ .o360-cta-secondary{display:none!important} .o360-cta-primary{flex:1;text-align:center} /* zwrot.do: match mobile mockup — drop checkmarks + chips, show the carriers line */ .zd-checks{display:none!important} .zd-chips{display:none!important} .zd-stat{display:block!important} /* 360: mobile order — header, viewer, stats, CTAs */ .o360-head{order:1} .o360-viewer{order:2} .dh-360-stats{order:3} .o360-cta{order:4} .dh-cols-4,.dh-cols-3,.dh-cols-2{grid-template-columns:1fr!important} /* footer: logo full-width, then Product + Company side by side */ .dh-footer-grid{grid-template-columns:1fr 1fr!important;gap:28px 24px!important} .dh-footer-grid > :first-child{grid-column:1 / -1} /* gallery: bento — big / [small small] / big (mobile mockup) */ .dh-galeria-grid{grid-template-columns:1fr 1fr!important;grid-auto-rows:140px!important} .dh-galeria-grid .g1{grid-column:span 2!important;grid-row:span 2!important;order:1} .dh-galeria-grid .g3{grid-column:auto!important;grid-row:auto!important;order:2} .dh-galeria-grid .g4{grid-column:auto!important;grid-row:auto!important;order:3} .dh-galeria-grid .g2{grid-column:span 2!important;grid-row:span 2!important;order:4} .dh-pad{padding-left:20px!important;padding-right:20px!important} .dh-pad-lg{padding:28px!important} .dh-flow-desktop{display:none} .dh-flow-mobile{display:block} .dh-integ-grid{display:none!important} .dh-integ-mobile{display:block} /* hero stats: 2×2 separate rounded cards (mobile mockup) instead of the glass bar */ .dh-hero-stats{ grid-template-columns:1fr 1fr!important;gap:12px!important; border:0!important;background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important; border-radius:0!important;overflow:visible!important; } .dh-hero-stats > div{ border:1px solid var(--w08,rgba(255,255,255,.08))!important; background:rgba(9,12,20,.6)!important; border-radius:15px!important;padding:18px 14px!important; } }