/* ========================================================= * DiscoverMarket — Home v2 "Modern Refresh" * Ported from the design-system UI kit (ui_kits/website-v2). * * SCOPING CONTRACT — read before editing: * Every rule is prefixed with `.dm-v2` and theme tokens live on the * `.dm-v2` wrapper (NOT on /). There are deliberately NO * bare element resets (no global h1-h6 / p / a / * rules) so this file * cannot leak into the rest of the theme or restyle the legacy * CMS-driven sections that share the page. The light/dark toggle is * `.dm-v2[data-theme="dark"]`, not a document attribute. * * The page keeps the existing main14 header + footer (CMS-managed menu, * infobar, WhatsApp, plugin scripts). The variation-B orbit visual is NOT * ported. The floating GLASS NAV is ported as a restyle of the existing * #pageHeaderWrapper header (markup unchanged, CMS menu/logo/CTA preserved) * and now ships SITE-WIDE — its selectors are scoped to `body.dmv2-chrome` * (added to every front-end page in functions.php), see the FLOATING GLASS * NAV section at the foot of this file. Everything ABOVE that section styles * home page CONTENT only (scoped `.dm-v2`, inert on other pages). The footer * restyle lives in css/dm-footer.css; global tokens in css/dm-tokens.css. * ========================================================= */ /* ── Brand atoms + scale (scoped to the wrapper) ─────────────────────── */ .dm-v2 { --dm-indigo: #1A5FD4; /* Royal Blue — primary */ --dm-indigo-deep: #00299D; /* Deep Navy — primary hover */ --dm-indigo-navy: #00299D; --dm-indigo-soft: #6D9FF9; /* Pale Blue Lily — glow halos */ --dm-orange: #FE5000; /* Vivid Tangerine — accent */ --dm-orange-deep: #CC4000; --dm-navy: #041D2C; /* Midnight */ --dm-blue: #1A5FD4; --dm-cyan: #1A9AD4; /* Skyline Aqua */ --dm-v2-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 40px; --r-pill: 999px; /* LIGHT theme (default) — page surfaces */ --bg: #FFFFFF; --bg-soft: #F8F7FD; --bg-elevated: #FFFFFF; --bg-tint: #EEEEFB; --bg-tint-2: #F4F4FC; --bg-inverse: #08070D; --ink: #08070D; --ink-strong: #011D2B; --ink-muted: #5A5A6E; --ink-soft: #8F8FA3; --ink-on-dark: #FFFFFF; --ink-on-tint: #1A1A2E; --bd: rgba(8, 7, 13, 0.08); --bd-soft: rgba(8, 7, 13, 0.05); --bd-strong: rgba(8, 7, 13, 0.14); --action: var(--dm-indigo); --action-hover: var(--dm-indigo-deep); --action-ink: #FFFFFF; --accent: var(--dm-orange); --accent-hover: var(--dm-orange-deep); --hero-bg: #08070D; --hero-ink: #FFFFFF; --shadow-xs: 0 1px 2px rgba(8, 7, 13, 0.05); --shadow-sm: 0 2px 8px rgba(63, 66, 227, 0.06), 0 1px 2px rgba(8, 7, 13, 0.04); --shadow-md: 0 8px 24px rgba(63, 66, 227, 0.08), 0 2px 6px rgba(8, 7, 13, 0.05); --shadow-lg: 0 24px 48px rgba(63, 66, 227, 0.12), 0 4px 12px rgba(8, 7, 13, 0.06); /* Only font-family is set on the wrapper itself (it equals the theme's Montserrat, so it is a visual no-op for the legacy CMS sections nested inside). Color + letter-spacing are deliberately NOT inherited here — each v2 component sets its own — so legacy section markup is untouched. */ font-family: var(--dm-v2-font); } /* DARK theme — opt-in via data-theme on the wrapper */ .dm-v2[data-theme="dark"] { --bg: #08070D; --bg-soft: #0E0D17; --bg-elevated: #12111C; --bg-tint: #1A1929; --bg-tint-2: #14131F; --bg-inverse: #FFFFFF; --ink: #F5F4FB; --ink-strong: #FFFFFF; --ink-muted: #A6A4BD; --ink-soft: #7A7891; --ink-on-dark: #FFFFFF; --ink-on-tint: #F5F4FB; --bd: rgba(255, 255, 255, 0.10); --bd-soft: rgba(255, 255, 255, 0.06); --bd-strong: rgba(255, 255, 255, 0.18); --action-hover: #3F7CE0; --accent-hover: #FF6D2B; --hero-bg: #050409; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.45); } .dm-v2 *, .dm-v2 *::before, .dm-v2 *::after { box-sizing: border-box; } .dm-v2 ::selection { background: var(--action); color: var(--action-ink); } /* ── Layout utilities ─────────────────────────────────────────────────── */ .dm-v2 .dm-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; } .dm-v2 .dm-container--wide { max-width: 1440px; } .dm-v2 .dm-container--narrow { max-width: 960px; } .dm-v2 .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); } .dm-v2 .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--action); } /* ── Buttons ──────────────────────────────────────────────────────────── */ .dm-v2 .btn { appearance: none; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; letter-spacing: -0.1px; line-height: 1; white-space: nowrap; border: 1px solid transparent; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .dm-v2 .btn--sm { height: 38px; padding: 0 16px; font-size: 13px; } .dm-v2 .btn--md { height: 46px; } .dm-v2 .btn--lg { height: 54px; padding: 0 26px; font-size: 15px; } .dm-v2 .btn--action { background: var(--action); color: var(--action-ink); } .dm-v2 .btn--action:hover { background: var(--action-hover); color: var(--action-ink); } .dm-v2 .btn--accent { background: var(--accent); color: #fff; } .dm-v2 .btn--accent:hover { background: var(--accent-hover); } .dm-v2 .btn--ghost-light { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.14); backdrop-filter: blur(10px); } .dm-v2 .btn--ghost-light:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.20); color: #fff; } .dm-v2 .btn--ghost { background: transparent; color: var(--ink); border-color: var(--bd-strong); } .dm-v2 .btn--ghost:hover { background: var(--bg-tint); border-color: var(--ink); } .dm-v2 .btn--quiet { background: var(--bg-tint); color: var(--ink); } .dm-v2 .btn--quiet:hover { background: var(--bg-tint-2); } .dm-v2 .btn__arrow { font-size: 16px; transition: transform .15s; } .dm-v2 .btn:hover .btn__arrow { transform: translateX(2px); } /* ── Hero — dark halo surface ─────────────────────────────────────────── */ .dm-v2 .hero { position: relative; color: var(--hero-ink); background: var(--hero-bg); overflow: hidden; isolation: isolate; } /* The dark hero dissolves into the page (white) at the bottom. */ .dm-v2 .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(180deg, rgba(8,7,13,0) 0%, var(--bg) 92%); pointer-events: none; z-index: 0; } .dm-v2 .hero__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 50% 0%, var(--hero-c1, rgba(26,95,212,0.55)) 0%, transparent 60%), radial-gradient(ellipse 90% 70% at 50% -10%, var(--hero-c2, rgba(0,41,157,0.45)) 0%, transparent 70%), radial-gradient(ellipse 50% 35% at 50% 35%, var(--hero-c3, rgba(109,159,249,0.20)) 0%, transparent 70%); } .dm-v2 .hero__beams { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(26,95,212,0.06) 100%), repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,0.025) 79px 80px); -webkit-mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent); mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent); } .dm-v2 .hero__grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.4; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 50% 35%, black 0%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 35%, black 0%, transparent 75%); } .dm-v2 .hero { padding: 128px 0 120px; } /* top clears the fixed glass nav (see FLOATING GLASS NAV) */ .dm-v2 .hero__inner { position: relative; z-index: 1; text-align: center; max-width: 880px; margin: 0 auto; } /* Editor-authored banner copy gets the v2 hero typography. Scoped to the hero so legacy section headings elsewhere on the page are untouched. */ .dm-v2 .hero__inner h1, .dm-v2 .hero__title { font-size: clamp(40px, 6.4vw, 84px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.04; color: #fff; margin: 22px 0 22px; } .dm-v2 .hero__inner h2 { color: #fff; font-weight: 700; letter-spacing: -0.03em; } .dm-v2 .hero__title .accent-word, .dm-v2 .hero__inner em { color: var(--accent); font-style: italic; font-weight: 700; } .dm-v2 .hero__inner p, .dm-v2 .hero__sub { font-size: 19px; line-height: 1.55; color: rgba(255,255,255,0.72); max-width: 620px; margin: 0 auto 18px; letter-spacing: -0.2px; } .dm-v2 .hero__sub { margin-bottom: 40px; } .dm-v2 .hero__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 34px 0 56px; } .dm-v2 .hero__trust { display: flex; gap: 38px; justify-content: center; align-items: center; flex-wrap: wrap; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.08); margin: 0 auto; max-width: 760px; } .dm-v2 .hero__trust-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); } .dm-v2 .hero__trust-logos { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; opacity: 0.65; filter: grayscale(1) invert(1); } .dm-v2 .hero__trust-logos img { height: 24px; width: auto; } /* Carousel variant of the hero trust strip — reuses the template-industries Slick marquee (.slider-9col / .logo-slide / .icon-holder, auto-initialised site-wide by js/main-script.js) with the same white pill cards as .indust-sec-1 (see css/dm-pages.css), adapted to sit on the dark hero. This block is a DIRECT child of .hero (moved out of the 880px .hero__inner in index.php) so the marquee runs flush from edge to edge of the hero. position/z-index lift it above the hero glow/beams and the ::after scrim. */ .dm-v2 .hero__trust--carousel { display: block; max-width: none; width: 100%; gap: 0; position: relative; z-index: 1; margin-top: 64px; } .dm-v2 .hero__trust--carousel .hero__trust-label { display: block; text-align: center; margin-bottom: 20px; } .dm-v2 .hero__trust--carousel .marquee-wrapper { display: flex; width: 100%; overflow: hidden; } .dm-v2 .hero__trust--carousel .logo-slide .icon-holder { display: flex; align-items: center; justify-content: center; height: auto; padding: 14px 22px; margin: 0 6px; background: var(--bg-elevated); border: 1px solid var(--bd); border-radius: var(--r-md); box-shadow: var(--shadow-sm); } .dm-v2 .hero__trust--carousel .logo-slide .icon-holder img { max-height: 40px; max-width: 150px; width: auto; object-fit: contain; opacity: .9; transition: opacity .2s; } .dm-v2 .hero__trust--carousel .logo-slide:hover .icon-holder img { opacity: 1; } /* Announcement pill */ .dm-v2 .announce-row { display: flex; justify-content: center; } .dm-v2 .announce { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); backdrop-filter: blur(12px); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.85); letter-spacing: -0.1px; } .dm-v2 .announce__tag { background: var(--action); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 999px; } .dm-v2 .announce__arrow { opacity: 0.6; font-size: 13px; } /* ── Sections ─────────────────────────────────────────────────────────── */ .dm-v2 .section { position: relative; padding: 100px 0; background: var(--bg); color: var(--ink); } .dm-v2 .section--soft { background: var(--bg-soft); } .dm-v2 .section--tight { padding: 70px 0; } .dm-v2 .section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; } .dm-v2 .section-head h2 { font-size: clamp(32px, 3.8vw, 50px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin: 14px 0 16px; color: var(--ink-strong); } .dm-v2 .section-head h2 em { color: var(--action); font-style: italic; font-weight: 700; } .dm-v2 .section-head p { font-size: 17px; line-height: 1.6; color: var(--ink-muted); letter-spacing: -0.15px; max-width: 580px; margin: 0 auto; } /* ── Stats strip ──────────────────────────────────────────────────────── */ .dm-v2 .stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bg-elevated); border: 1px solid var(--bd); border-radius: var(--r-xl); padding: 36px 32px; gap: 20px; } .dm-v2 .stat__num { font-size: 44px; font-weight: 700; letter-spacing: -0.04em; color: var(--ink-strong); line-height: 1; margin-bottom: 6px; } .dm-v2 .stat__num em { color: var(--action); font-style: normal; } .dm-v2 .stat__label { font-size: 13px; color: var(--ink-muted); font-weight: 500; letter-spacing: -0.1px; } /* ── Feature pillar cards ─────────────────────────────────────────────── */ .dm-v2 .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .dm-v2 .feat-card { background: var(--bg-elevated); border: 1px solid var(--bd); border-radius: var(--r-xl); padding: 32px 30px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; position: relative; overflow: hidden; } .dm-v2 .feat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--bd-strong); } .dm-v2 .feat-card__icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--dm-indigo) 0%, var(--dm-indigo-deep) 100%); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; margin-bottom: 22px; box-shadow: 0 8px 20px rgba(26,95,212,0.25); } .dm-v2 .feat-card--accent .feat-card__icon { background: linear-gradient(135deg, var(--dm-orange) 0%, var(--dm-orange-deep) 100%); box-shadow: 0 8px 20px rgba(254,80,0,0.25); } .dm-v2 .feat-card h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; color: var(--ink-strong); margin: 0 0 10px; } .dm-v2 .feat-card p { font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); margin: 0; letter-spacing: -0.1px; } /* ── How-it-works steps ───────────────────────────────────────────────── */ .dm-v2 .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; } .dm-v2 .step { text-align: center; padding: 30px 22px; position: relative; } .dm-v2 .step__num { font-size: 96px; font-weight: 800; color: var(--action); opacity: 0.10; line-height: 1; letter-spacing: -0.06em; margin-bottom: 14px; } .dm-v2[data-theme="dark"] .step__num { opacity: 0.20; } .dm-v2 .step__icon { width: 48px; height: 48px; margin: -52px auto 18px; background: var(--bg-elevated); border: 1px solid var(--bd); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--action); font-size: 18px; position: relative; z-index: 1; } .dm-v2 .step h4 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; color: var(--ink-strong); margin: 0 0 8px; } .dm-v2 .step p { font-size: 14px; line-height: 1.55; color: var(--ink-muted); max-width: 280px; margin: 0 auto; letter-spacing: -0.1px; } /* ── Industries grid ──────────────────────────────────────────────────── */ .dm-v2 .industries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bd); border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--bd); } .dm-v2 .ind { background: var(--bg-elevated); padding: 28px 26px; display: flex; flex-direction: column; gap: 12px; transition: background .2s; cursor: pointer; } .dm-v2 .ind:hover { background: var(--bg-tint); } .dm-v2 .ind__head { display: flex; align-items: center; justify-content: space-between; } .dm-v2 .ind__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--bg-tint); display: flex; align-items: center; justify-content: center; color: var(--action); font-size: 16px; overflow: hidden; } .dm-v2 .ind__icon img { width: 22px; height: 22px; object-fit: contain; } .dm-v2 .ind__arrow { color: var(--ink-soft); transition: transform .2s, color .2s; } .dm-v2 .ind:hover .ind__arrow { transform: translateX(4px); color: var(--action); } .dm-v2 .ind h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; color: var(--ink-strong); margin: 0; } .dm-v2 .ind p { font-size: 13.5px; line-height: 1.55; color: var(--ink-muted); margin: 0; } /* ── Pricing ──────────────────────────────────────────────────────────── */ .dm-v2 .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; } .dm-v2 .price-card { background: var(--bg-elevated); border: 1px solid var(--bd); border-radius: var(--r-xl); padding: 36px 32px; display: flex; flex-direction: column; gap: 22px; transition: transform .2s ease, box-shadow .2s ease; } .dm-v2 .price-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .dm-v2 .price-card__name { display: flex; align-items: center; justify-content: space-between; } .dm-v2 .price-card__name h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; color: var(--ink-strong); margin: 0; } .dm-v2 .price-card__tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 999px; background: var(--bg-tint); color: var(--ink-muted); } .dm-v2 .price-card__price { display: flex; align-items: baseline; gap: 6px; } .dm-v2 .price-card__price .num { font-size: 48px; font-weight: 700; letter-spacing: -0.04em; color: var(--ink-strong); line-height: 1; } .dm-v2 .price-card__price .unit { font-size: 14px; color: var(--ink-muted); } .dm-v2 .price-card__desc { font-size: 14px; color: var(--ink-muted); line-height: 1.55; margin: -4px 0 0; } .dm-v2 .price-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .dm-v2 .price-card li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink); letter-spacing: -0.1px; } .dm-v2 .price-card li::before { content: "\2713"; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-tint); color: var(--action); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; margin-top: 2px; } .dm-v2 .price-card .btn { width: 100%; margin-top: auto; } .dm-v2 .price-card--featured { background: linear-gradient(180deg, var(--dm-indigo) 0%, var(--dm-indigo-deep) 100%); border-color: transparent; color: #fff; box-shadow: 0 24px 60px rgba(26,95,212,0.30); position: relative; } .dm-v2 .price-card--featured .price-card__name h3, .dm-v2 .price-card--featured .price-card__price .num { color: #fff; } .dm-v2 .price-card--featured .price-card__tag { background: rgba(255,255,255,0.18); color: #fff; } .dm-v2 .price-card--featured .price-card__price .unit, .dm-v2 .price-card--featured .price-card__desc { color: rgba(255,255,255,0.72); } .dm-v2 .price-card--featured li { color: rgba(255,255,255,0.92); } .dm-v2 .price-card--featured li::before { background: rgba(255,255,255,0.18); color: #fff; } .dm-v2 .price-card--featured .btn--action { background: #fff; color: var(--dm-indigo); } .dm-v2 .price-card--featured .btn--action:hover { background: rgba(255,255,255,0.92); color: var(--dm-indigo); } /* ── Dark CTA band ────────────────────────────────────────────────────── */ .dm-v2 .cta-band { position: relative; overflow: hidden; isolation: isolate; background: #08070D; color: #fff; border-radius: var(--r-2xl); padding: 80px 60px; text-align: center; } .dm-v2 .cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 100%, rgba(26,95,212,0.6) 0%, transparent 60%), radial-gradient(ellipse at 20% 0%, rgba(254,80,0,0.15) 0%, transparent 50%); } .dm-v2 .cta-band h2 { font-size: clamp(32px, 4vw, 50px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; color: #fff; margin: 0 0 16px; } .dm-v2 .cta-band p { font-size: 17px; color: rgba(255,255,255,0.72); max-width: 540px; margin: 0 auto 32px; letter-spacing: -0.1px; } .dm-v2 .cta-band .btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ── Responsive guard rails ───────────────────────────────────────────── */ @media (max-width: 980px) { .dm-v2 .feat-grid, .dm-v2 .industries, .dm-v2 .pricing, .dm-v2 .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .dm-v2 .feat-grid, .dm-v2 .industries, .dm-v2 .pricing, .dm-v2 .steps { grid-template-columns: 1fr; } .dm-v2 .stats { grid-template-columns: 1fr 1fr; } .dm-v2 .hero { padding: 104px 0 80px; } .dm-v2 .cta-band { padding: 56px 28px; } /* Let the announcement pill wrap instead of clipping on narrow screens. */ .dm-v2 .announce { white-space: normal; text-align: left; align-items: flex-start; } .dm-v2 .announce__tag { flex-shrink: 0; } } /* ========================================================= * FLOATING GLASS NAV — site-wide (body.dmv2-chrome) * --------------------------------------------------------- * Restyles the EXISTING main14 header (#pageHeaderWrapper) into the v2 * liquid-glass floating pill WITHOUT touching its markup — so the * CMS-managed menu (wp_nav_menu "Main-Menu"), the brand lockup and the * ACF "Partner with us" CTA are all preserved verbatim. Selectors are gated * on `body.dmv2-chrome` (added to every front-end page in functions.php). * * Two states: * - default glass-over-dark (white text) — sits over the dark hero * - .dmv2-nav-frost frosted-light (dark text) — readable over light pages * * HOME uses both: glass-over-dark at the top of the dark hero, switching to * frosted on scroll (toggled by js/home-v2-nav.js). EVERY OTHER PAGE renders * with `.dmv2-nav-frost` baked in server-side (header-main14.php) so the pill * is permanently frosted/legible over their light banners — the toggle JS * no-ops there. The selectors carry `#pageHeaderWrapper.main-header` so they * outrank the theme's own `.is-sticky` header rules. The home-only * margin-container reset below stays `body.home` (interior keeps its 100px * clearance, so the pill floats above the banner instead of over it). * ========================================================= */ body.dmv2-chrome #pageHeaderWrapper.main-header { position: fixed; top: 18px; left: 0; right: 0; z-index: 1000; background: transparent; box-shadow: none; border: none; padding: 0; /* The theme centres the header with `left:50%; transform:translateX(-50%); max-width:1920px` and only cancels the transform below 1920px. Above that (e.g. 2560px screens) the un-cancelled transform yanks our full-width fixed pill 50% to the left. Neutralise both at every width — the inner .container.container-lg already centres the pill. */ transform: none; max-width: none; width: auto; } /* The legacy .margin-container adds a top margin (100px desktop) to clear the normally-static header. The nav is now fixed/floating, so drop that offset on EVERY v2 page and let the page lead flush to the top — the glass pill then sits OVER the hero (true glass) instead of over a white band above it. This removes the white gap above the hero on home AND every interior page. */ body.dmv2-chrome .main-content-wrapper.margin-container { margin-top: 0; } /* Pages that lead with a full-bleed dark/image hero (.section-fullheight .inner-banner, or faq's bg-img band) have vertically-centred copy that already clears the floating pill, so they need nothing more. But pages whose FIRST section is a light, non-hero band — contact (.contact-sec-1) and thank-you (.thankyou-sec) — would slide under the floating nav once the offset is gone. Give those first sections top padding to clear the pill. */ body.dmv2-chrome:not(.home):not(:has(.section-fullheight.inner-banner)):not(:has(.faq-sec-1)) .main-content-wrapper.margin-container > section.fullcontainer:first-of-type { padding-top: clamp(120px, 9vw, 160px); } /* FULL-BLEED on wide screens. The theme caps #wrapper / .main-content-wrapper / .footer-wrapper at max-width:1920px and centres them (style.css), so on screens wider than 1920px the dark hero, the coloured section backgrounds and the footer band all stop at 1920px — leaving white vertical bands left and right. Release that cap for the v2 chrome so the backgrounds span the full viewport. Inner content keeps its own constraint (.container-lg 1460px / .dm-container 1240px), so only the backgrounds widen, not the text columns. */ body.dmv2-chrome #wrapper, body.dmv2-chrome .main-content-wrapper, body.dmv2-chrome footer.footer-wrapper { max-width: none; } /* Centering wrapper (the theme's .container) → just centers the pill. */ body.dmv2-chrome #pageHeaderWrapper.main-header .container.container-lg { display: flex; justify-content: center; max-width: 1220px; width: 100%; margin: 0 auto; padding: 0 20px; } /* The glass pill itself (the theme's .header-container flex row). */ body.dmv2-chrome #pageHeaderWrapper.main-header .header-container { display: flex; align-items: center; gap: 6px; width: auto; max-width: 100%; min-height: 0; /* Constant 6px gap on top/bottom/right so the outer pill's 999px rounding stays concentric with the inner CTA button (= same gap on every side of the button). Larger left pad just gives the logo breathing room. */ padding: 6px 6px 6px 20px; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 100%); border: 1px solid rgba(255,255,255,0.22); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); box-shadow: 0 8px 32px rgba(8,7,13,0.22), inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -1px 0 rgba(255,255,255,0.05); transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; } /* Brand lockup (home only): the symbol mark + "discovermarket" wordmark ("market" bold), replacing the small horizontal logo image inside the pill. Same white→colour transition as the rest of the nav: white symbol + white text over the dark hero, full-colour symbol + dark text once frosted. */ /* Neutralise the theme's full-size nav logo box (style.css: .logo is width:255px; padding:18px 0) which otherwise inflates .logo-holder to ~68px and forces the whole pill tall. The brand lockup sizes itself. */ body.dmv2-chrome #pageHeaderWrapper.main-header .logo { width: auto; padding: 0; margin: 0; /* flex (not the theme's display:block) so the inline-flex brand lockup is centred by the box instead of sitting on the text baseline strut — which otherwise lifts the symbol+wordmark above the pill's vertical centre. */ display: flex; align-items: center; } body.dmv2-chrome #pageHeaderWrapper.main-header .dmv2-brand { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; line-height: 1; } /* Symbol: the supplied white + colour assets stacked and cross-faded on the frost state (white over the dark hero → full colour once frosted). Assets are pre-trimmed to the mark's bounds so align-items:center is exact. */ body.dmv2-chrome #pageHeaderWrapper.main-header .dmv2-brand__mark { position: relative; display: block; flex: none; height: 24px; } body.dmv2-chrome #pageHeaderWrapper.main-header .dmv2-brand__mark img { height: 100%; width: auto; display: block; transition: opacity .3s ease; } body.dmv2-chrome #pageHeaderWrapper.main-header .dmv2-brand__mark-color { position: absolute; top: 0; left: 0; opacity: 0; } body.dmv2-chrome #pageHeaderWrapper.main-header.dmv2-nav-frost .dmv2-brand__mark-white { opacity: 0; } body.dmv2-chrome #pageHeaderWrapper.main-header.dmv2-nav-frost .dmv2-brand__mark-color { opacity: 1; } body.dmv2-chrome #pageHeaderWrapper.main-header .dmv2-brand__text { font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 13.5px; font-weight: 500; letter-spacing: -0.2px; color: #fff; white-space: nowrap; transition: color .3s ease; } body.dmv2-chrome #pageHeaderWrapper.main-header .dmv2-brand__text strong { font-weight: 800; } body.dmv2-chrome #pageHeaderWrapper.main-header.dmv2-nav-frost .dmv2-brand__text { color: #011D2B; } /* DESKTOP layout — inline logo | menu | CTA inside the pill. (Below 1200px the theme's off-canvas drawer takes over — see the mobile block — so we only lay the items inline at desktop widths.) */ @media (min-width: 1200px) { /* re-order the source DOM (logo, CTA, menu, trigger) into logo · menu · CTA */ body.dmv2-chrome #pageHeaderWrapper.main-header .logo-holder { order: 1; } body.dmv2-chrome #pageHeaderWrapper.main-header .topRightHeader { order: 2; } body.dmv2-chrome #pageHeaderWrapper.main-header .top-right { order: 3; } /* Logo — inverted to white over the dark hero, restored when frosted. */ body.dmv2-chrome #pageHeaderWrapper.main-header .logo-holder { margin: 0; padding: 0 14px 0 0; border-right: 1px solid rgba(255,255,255,0.12); } body.dmv2-chrome #pageHeaderWrapper.main-header .logo { margin: 0; } /* desktop brand sizing — base styling is defined globally above */ body.dmv2-chrome #pageHeaderWrapper.main-header .dmv2-brand__mark { height: 24px; } body.dmv2-chrome #pageHeaderWrapper.main-header .dmv2-brand__text { font-size: 13.5px; } /* Menu container chain → flatten to a flex row of links. */ body.dmv2-chrome #pageHeaderWrapper.main-header .topRightHeader, body.dmv2-chrome #pageHeaderWrapper.main-header .nav-wrapper.top-nav, body.dmv2-chrome #pageHeaderWrapper.main-header .custom-menu-wrap, body.dmv2-chrome #pageHeaderWrapper.main-header .nav-container, body.dmv2-chrome #pageHeaderWrapper.main-header nav.nav { display: flex; align-items: center; background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; width: auto; position: static; } body.dmv2-chrome #pageHeaderWrapper.main-header ul#top-menu.main-menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0 6px; list-style: none; } body.dmv2-chrome #pageHeaderWrapper.main-header ul#top-menu.main-menu > li { margin: 0; padding: 0; position: relative; float: none; } body.dmv2-chrome #pageHeaderWrapper.main-header ul#top-menu.main-menu > li > a { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; letter-spacing: -0.1px; color: rgba(255,255,255,0.74); padding: 7px 13px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: color .15s, background .15s; } body.dmv2-chrome #pageHeaderWrapper.main-header ul#top-menu.main-menu > li > a:hover { color: #fff; background: rgba(255,255,255,0.08); } /* Kill the theme's animated blue underline bar (.nav>ul>li>a::before, a 4px var(--primary) bar pinned to bottom:0 that grows to width:100% on hover). The hover pill replaces it; on the short pill the bar sticks out the base. */ body.dmv2-chrome #pageHeaderWrapper.main-header ul#top-menu.main-menu > li > a::before { display: none; } /* the little superscript brand mark next to "Technology" */ body.dmv2-chrome #pageHeaderWrapper.main-header ul#top-menu.main-menu sup img { height: 11px; width: auto; vertical-align: super; filter: brightness(0) invert(1); } /* invisible hover bridge so the dropdown doesn't drop on the gap */ body.dmv2-chrome #pageHeaderWrapper.main-header li.menu-item-has-children::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 18px; } /* Dropdown — a self-contained dark glass panel (readable in both states). */ body.dmv2-chrome #pageHeaderWrapper.main-header ul.sub-menu { display: none; position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); min-width: 210px; margin: 0; padding: 8px; list-style: none; background: #0c1422; border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; box-shadow: 0 18px 44px rgba(8,7,13,0.45); } body.dmv2-chrome #pageHeaderWrapper.main-header li.menu-item-has-children:hover > ul.sub-menu { display: block; } body.dmv2-chrome #pageHeaderWrapper.main-header ul.sub-menu li { margin: 0; padding: 0; float: none; } body.dmv2-chrome #pageHeaderWrapper.main-header ul.sub-menu li a { display: block; padding: 9px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.78); white-space: nowrap; text-decoration: none; transition: background .15s, color .15s; } body.dmv2-chrome #pageHeaderWrapper.main-header ul.sub-menu li a:hover { background: rgba(255,255,255,0.08); color: #fff; } /* CTA "Partner with us" → the design's blue pill. */ body.dmv2-chrome #pageHeaderWrapper.main-header .top-right { margin: 0; } body.dmv2-chrome #pageHeaderWrapper.main-header .top-right .row { margin: 0; flex-wrap: nowrap; } body.dmv2-chrome #pageHeaderWrapper.main-header .top-right .col-auto { padding: 0; } body.dmv2-chrome #pageHeaderWrapper.main-header .top-right .custom-button-holder { margin: 0; } body.dmv2-chrome #pageHeaderWrapper.main-header .custom-button.button-secondary { display: inline-flex; align-items: center; justify-content: center; height: 36px; min-height: 0; padding: 0 16px; border-radius: 999px; background: #1A5FD4; color: #fff !important; font-size: 13px; font-weight: 600; letter-spacing: -0.1px; line-height: 1; border: none; box-shadow: 0 6px 18px rgba(26,95,212,0.45); text-decoration: none; white-space: nowrap; transition: background .15s, transform .15s, box-shadow .15s; } /* Hover BRIGHTENS (not darkens). The earlier #00299D deep-navy hover was nearly identical to the dark glass nav pill over the home hero, so the button shape dissolved into the pill and read as one unreadable dark-blue blob. A brighter blue keeps the pill visibly distinct on the dark hero AND stays legible (white text) on the frosted-white nav of interior pages. */ body.dmv2-chrome #pageHeaderWrapper.main-header .custom-button.button-secondary:hover { background: #2470E8; transform: translateY(-1px); color: #fff !important; box-shadow: 0 8px 22px rgba(36,112,232,0.55); } /* hamburger not used at desktop width */ body.dmv2-chrome #pageHeaderWrapper.main-header .top-nav-trigger { display: none; } } /* FROSTED state — applied by JS once scrolled past the hero (dark text). */ body.dmv2-chrome #pageHeaderWrapper.main-header.dmv2-nav-frost .header-container { background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.78) 100%); border-color: rgba(8,7,13,0.07); box-shadow: 0 10px 34px rgba(8,7,13,0.12), inset 0 1px 0 rgba(255,255,255,0.9); } @media (min-width: 1200px) { body.dmv2-chrome #pageHeaderWrapper.main-header.dmv2-nav-frost .logo-holder { border-right-color: rgba(8,7,13,0.10); } body.dmv2-chrome #pageHeaderWrapper.main-header.dmv2-nav-frost ul#top-menu.main-menu sup img { filter: none; } body.dmv2-chrome #pageHeaderWrapper.main-header.dmv2-nav-frost ul#top-menu.main-menu > li > a { color: #5A5A6E; } body.dmv2-chrome #pageHeaderWrapper.main-header.dmv2-nav-frost ul#top-menu.main-menu > li > a:hover { color: #08070D; background: rgba(8,7,13,0.05); } } /* MOBILE / TABLET (< 1200px) — pill keeps logo + hamburger; the theme's off-canvas drawer (#trigger-drawer toggling .topRightHeader.active) is left entirely to the theme so the CMS menu still opens normally. */ @media (max-width: 1199.98px) { body.dmv2-chrome #pageHeaderWrapper.main-header .container.container-lg { justify-content: stretch; } body.dmv2-chrome #pageHeaderWrapper.main-header .header-container { width: 100%; justify-content: space-between; padding: 6px 12px 6px 18px; } body.dmv2-chrome #pageHeaderWrapper.main-header .dmv2-brand__mark { height: 22px; } body.dmv2-chrome #pageHeaderWrapper.main-header .dmv2-brand__text { font-size: 14px; } /* hamburger lines visible over the glass */ body.dmv2-chrome #pageHeaderWrapper.main-header .top-nav-trigger { margin: 0; } body.dmv2-chrome #pageHeaderWrapper.main-header .top-nav-trigger span { background: #fff; } body.dmv2-chrome #pageHeaderWrapper.main-header.dmv2-nav-frost .top-nav-trigger span { background: #08070D; } }