/* ============================================================ DreamzCMMS Hero Section Plain CSS — WordPress friendly. All class names are prefixed with "dz-" to avoid theme clashes. ============================================================ */ /* Fonts (load these in or via WP enqueue) ------------- */ /* Poppins + Material Symbols Rounded are linked in hero.html */ .dz-hero *, .dz-hero *::before, .dz-hero *::after { box-sizing: border-box; } .dz-ms { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; line-height: 1; font-variation-settings: 'FILL' 1; display: inline-block; white-space: nowrap; } /* ---- Outer wrapper (full-bleed background) ----------------- */ .dz-hero { position: relative; width: 100%; height: 720px; overflow: hidden; font-family: 'Poppins', sans-serif; -webkit-font-smoothing: antialiased; background: radial-gradient(120% 130% at 78% 18%, #0c1d44 0%, #081230 44%, #050b1f 100%); } /* Fixed 1480x720 composition, scaled to fit by hero.js -------- */ .dz-hero__scale { position: absolute; top: 0; left: 0; width: 1480px; height: 720px; transform-origin: top left; } .dz-hero__inner { position: relative; width: 1480px; height: 720px; overflow: visible; display: flex; } /* Decorative glow blobs */ .dz-glow { position: absolute; border-radius: 50%; pointer-events: none; } .dz-glow--blue { top: -120px; right: 150px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(43,168,247,.20), transparent 65%); } .dz-glow--amber { bottom: -180px; right: 80px; width: 440px; height: 440px; background: radial-gradient(circle, rgba(239,173,68,.10), transparent 65%); } /* ============================================================ LEFT COLUMN — copy ============================================================ */ .dz-copy { position: relative; z-index: 5; width: 600px; flex: none; padding: 0 32px 0 72px; display: flex; flex-direction: column; justify-content: center; gap: 20px; } .dz-eyebrow { display: flex; align-items: center; gap: 10px; } .dz-eyebrow__line { width: 30px; height: 2px; background: #efad44; display: block; } .dz-eyebrow__text { font: 600 12.5px 'Poppins', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #efad44; } .dz-title { margin: 0; font: 700 22px / 1.40 'Poppins', sans-serif; color: #f3f7ff; letter-spacing: -.6px; } .dz-title span { color: #2ba8f7; font-size: 22px;} .dz-lead { margin: 0; font: 400 16.5px/1.62 'Poppins', sans-serif; color: #9fb0cd; max-width: 450px; } /* ---- Award / trust badge groups --------------------------- */ .dz-awards { display: flex; flex-direction: column; gap: 8px; } .dz-awards__label { font: 600 11px 'Poppins', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #7e90b3; } .dz-awards__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* NEW top badges: Trusted, Rated & Secure */ .dz-awards__row--trust img { height: 62px; width: auto; display: block; } /* ORIGINAL badges moved below buttons — made a little bigger */ .dz-awards__row--orgs img { height: 74px; /* was 68px — a little bigger, still fits one row */ width: auto; display: block; box-shadow: 0 6px 16px rgba(0,0,0,.28); } /* ---- Buttons ---------------------------------------------- */ .dz-buttons { display: flex; gap: 13px; align-items: center; flex-wrap: wrap; margin-top: 2px; } .dz-btn { font: 600 14.5px 'Poppins', sans-serif; border-radius: 10px; cursor: pointer; border: none; } .dz-btn--primary { color: #0a1326; background: #efad44; padding: 14px 26px; box-shadow: 0 10px 28px rgba(239,173,68,.32); } .dz-btn--ai { color: #fff; background: linear-gradient(135deg,#a855f7,#7c3aed); border: 1px solid rgba(167,139,250,.6); padding: 14px 20px; display: flex; align-items: center; gap: 7px; box-shadow: 0 10px 28px rgba(124,58,237,.42); } .dz-btn--ai .dz-ms { font-size: 17px; } /* ============================================================ RIGHT COLUMN — AI hub cluster ============================================================ */ .dz-cluster { position: relative; width: 880px; height: 720px; flex: none; transform: translateY(26px) scale(1.16); /* bigger + nudged down */ transform-origin: center center; } .dz-cluster__svg { position: absolute; inset: 0; z-index: 1; overflow: visible; } /* Module chips (left of the AI core) */ .dz-chip-wrap { position: absolute; left: 6px; width: 172px; z-index: 3; } .dz-chip { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: linear-gradient(180deg, rgba(22,36,72,.92), rgba(12,22,48,.86)); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 8px 20px rgba(0,0,0,.32); overflow: hidden; } .dz-chip__icon { width: 25px; height: 25px; flex: none; border-radius: 7px; display: flex; align-items: center; justify-content: center; } .dz-chip__icon .dz-ms { font-size: 15px; } .dz-chip__label { font: 600 10.5px 'Poppins', sans-serif; color: #eaf1ff; white-space: nowrap; } /* AI engine core */ .dz-core { position: absolute; left: 310px; top: 254px; width: 92px; height: 92px; z-index: 4; } .dz-core__ring { position: absolute; border-radius: 50%; } .dz-core__ring--1 { inset: -18px; border: 1px dashed rgba(168,85,247,.35); } .dz-core__ring--2 { inset: -8px; border: 1px solid rgba(167,139,250,.22); } .dz-core__disc { width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 50% 36%, #8b3df0, #2a0e57); border: 1.5px solid rgba(167,139,250,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; } .dz-core__disc .dz-ms { font-size: 28px; color: #c4b5fd; } .dz-core__label { font: 600 7.5px 'Poppins', sans-serif; color: #c4b5fd; letter-spacing: .16em; margin-top: 2px; } /* AI output cards */ .dz-card-wrap { position: absolute; width: 170px; z-index: 3; } .dz-card { padding: 10px 12px; border-radius: 13px; background: linear-gradient(180deg, rgba(22,36,72,.94), rgba(12,22,48,.9)); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 13px 30px rgba(0,0,0,.4); } /* Phone mockup */ .dz-phone-wrap { position: absolute; left: 628px; top: 124px; width: 184px; z-index: 3; } .dz-phone { width: 184px; border-radius: 30px; background: linear-gradient(160deg,#161f33,#0a1322); border: 1px solid rgba(255,255,255,.12); padding: 7px; box-shadow: 0 26px 56px rgba(0,0,0,.5); } .dz-phone__screen { border-radius: 24px; overflow: hidden; background: linear-gradient(180deg,#0e1d40,#0a1530); padding: 11px 11px 8px; } .dz-awards__label { font: 600 15px 'Poppins', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #fff; } .dz-awards__row--trust img { height: 90px; width: auto; display: block; } .dz-lead { margin: 0; font: 400 16.5px / 1.62 'Poppins', sans-serif; color: #9fb0cd; max-width: 435px; } .dz-hero__inner { position: relative; width: 1480px; height: 720px; overflow: visible; display: flex; margin-left: auto; margin-right: auto; } /* Entrance / motion helpers (driven by hero.js) */ .dz-en { opacity: 0; } .dz-fade { opacity: 0; } .dz-hero[data-flow="off"] [data-flowline] { opacity: 0 !important; } /* ---- Responsive: stack on small screens ------------------- */ @media (max-width: 900px) { .dz-cluster { display: none; } /* hide the heavy cluster on phones */ .dz-copy { width: 100%; padding: 40px 24px; } } @media (max-width: 767px) { .dz-title { text-align: center; margin: 0; font: 700 17px / 1.40 'Poppins', sans-serif; color: #f3f7ff; letter-spacing: -.6px; } .dz-title span { font-size: 17px;} .home-v2 .product-box{ padding: 0 !important; } #dzHeroScale img{ height: 70px !important; } .dz-lead { max-width: 350px; } .dz-buttons{ gap: 5px; } .dz-btn--primary { margin-top: 5px; margin-bottom: 10px; } .dz-btn--ai{ font-size: 13px; } .dz-buttons{ font-size: 13px; } .dz-hero__inner { width: 100%; height: 640px; } }