/* ============================================================ ProcessMiner — SHARED SITE STYLESHEET Single source of truth for the whole site. Authored mobile-first: base rules target ~375px phones, min-width media queries scale up to tablet/desktop. ------------------------------------------------------------ Home hero (dark, cinematic, video) -> .hero (index.html only) Interior page header (light band) -> .hero--page (all sub-pages) Sub-pages must set for the light nav. ============================================================ */ /* ============================================================ DESIGN TOKENS ============================================================ */ :root{ /* Brand */ --green: #00B74F; --green-bright: #16D26A; --green-ink: #00863A; /* contrast-safe green text on light */ --teal: #00B2A9; --blue: #005EB8; /* Dark surfaces (green-tinted near-black) */ --d-bg: #070B0A; --d-bg-2: #0B100E; --d-card: rgba(255,255,255,.04); --d-card-border: rgba(255,255,255,.10); --d-text: #F3F7F5; --d-muted: #9DB0A8; /* Light surfaces */ --bg: #FFFFFF; --bg-soft: #F5F8F6; --bg-tint: #EEF5F0; --ink: #0B1512; --ink-2: #34423D; --muted: #5C6B64; --border: #E4EAE7; --card: #FFFFFF; /* Alert (reactive) */ --red: #E5484D; /* Type */ --display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif; --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Layout */ --maxw: 1200px; --nav-h: 74px; --radius: 16px; --radius-sm: 10px; --shadow-sm: 0 1px 2px rgba(11,21,18,.06), 0 1px 3px rgba(11,21,18,.05); --shadow: 0 10px 30px -12px rgba(11,21,18,.18); --shadow-lg: 0 30px 60px -20px rgba(11,21,18,.28); --ease: cubic-bezier(.22,.61,.36,1); } /* ============================================================ RESET / BASE ============================================================ */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg,video{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; border:0; background:none; } :focus-visible{ outline:3px solid var(--green); outline-offset:3px; border-radius:4px; } /* ============================================================ TYPOGRAPHY HELPERS ============================================================ */ h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.02; letter-spacing:-.01em; text-transform:uppercase; margin:0; } h1{ font-size:clamp(2.6rem, 6.2vw, 5.1rem); } .h-sec{ font-size:clamp(2rem, 4.6vw, 3.6rem); } .h-card{ font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:1.45rem; letter-spacing:.005em; line-height:1.05; margin:0; } p{ margin:0 0 1rem; } .eyebrow{ font-family:var(--body); font-weight:600; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--green-ink); margin:0 0 1rem; display:inline-flex; align-items:center; gap:.55rem; } .eyebrow::before{ display:none; } .lead{ font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--ink-2); line-height:1.55; } /* ============================================================ LAYOUT ============================================================ */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2rem); } section{ position:relative; } .pad{ padding-block:clamp(4.5rem,9vw,8rem); } .center{ text-align:center; } .sec-head{ max-width:780px; } .sec-head.center{ margin-inline:auto; } .sec-head .lead{ margin-top:1rem; } /* ============================================================ BUTTONS ============================================================ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-weight:600; font-size:1rem; line-height:1; padding:1rem 1.6rem; border-radius:999px; transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s; white-space:nowrap; } .btn svg{ width:18px; height:18px; } .btn-primary{ background:var(--green); color:#fff; box-shadow:0 8px 24px -8px rgba(0,183,79,.6); } .btn-primary:hover{ background:var(--green-bright); transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(0,183,79,.7); } .btn-ghost{ background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.26); backdrop-filter:blur(6px); } .btn-ghost:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); } .btn-lg{ padding:1.15rem 2rem; font-size:1.06rem; } /* Ghost button on a light background (interior page heroes) */ .btn-ghost-ink{ background:transparent; color:var(--ink); border:1px solid var(--border); } .btn-ghost-ink:hover{ background:var(--bg-tint); border-color:#cfe0d6; transform:translateY(-2px); } /* ============================================================ NAV ============================================================ */ .nav{ position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:100; display:flex; align-items:center; transition:background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; border-bottom:1px solid transparent; } .nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; } .nav-logo img{ height:30px; width:auto; } .nav-logo .logo-light{ display:none; } .nav-links{ display:none; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; } .nav-links a{ font-size:.95rem; font-weight:500; color:rgba(255,255,255,.82); transition:color .2s; } .nav-links a:hover{ color:#fff; } .nav-links a.current, .nav-links .current-menu-item > a, .nav-links .current-menu-ancestor > a{ color:var(--green-bright); } .nav-cta{ display:flex; align-items:center; gap:1rem; } .nav-cta .btn{ display:none; padding:.7rem 1.25rem; font-size:.92rem; } .nav-burger{ display:flex; width:44px; height:44px; align-items:center; justify-content:center; } .nav-burger span{ position:relative; width:22px; height:2px; background:#fff; transition:.25s; } .nav-burger span::before,.nav-burger span::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:#fff; transition:.25s; } .nav-burger span::before{ top:-7px; } .nav-burger span::after{ top:7px; } /* scrolled state -> light nav (also applied permanently on sub-pages via body.sub) */ .nav.scrolled, body.sub .nav{ background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(14px); border-bottom-color:var(--border); box-shadow:var(--shadow-sm); } .nav.scrolled .logo-dark, body.sub .nav .logo-dark{ display:none; } .nav.scrolled .logo-light, body.sub .nav .logo-light{ display:block; } .nav.scrolled .nav-links > li > a, body.sub .nav-links > li > a{ color:var(--ink-2); } .nav.scrolled .nav-links > li > a:hover, body.sub .nav-links > li > a:hover{ color:var(--ink); } .nav.scrolled .nav-links > li > a.current, body.sub .nav-links > li > a.current, .nav.scrolled .nav-links > .current-menu-item > a, .nav.scrolled .nav-links > .current-menu-ancestor > a, body.sub .nav-links > .current-menu-item > a, body.sub .nav-links > .current-menu-ancestor > a{ color:var(--green-ink); } .nav.scrolled .nav-burger span, .nav.scrolled .nav-burger span::before, .nav.scrolled .nav-burger span::after, body.sub .nav-burger span, body.sub .nav-burger span::before, body.sub .nav-burger span::after{ background:var(--ink); } /* ============================================================ DROPDOWN MENUS (desktop) ============================================================ */ .has-dropdown{ position:relative; } .has-dropdown > a{ display:inline-flex; align-items:center; gap:.3rem; } .nav-chevron{ width:13px; height:13px; flex-shrink:0; transition:transform .22s var(--ease), opacity .22s; opacity:.65; } .has-dropdown:hover .nav-chevron{ transform:rotate(180deg); opacity:1; } /* Invisible bridge — keeps dropdown open across the gap */ .has-dropdown::after{ content:""; position:absolute; top:100%; left:-20px; right:-20px; height:16px; } .dropdown{ position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(-8px); min-width:210px; background:rgba(7,11,10,.97); border:1px solid rgba(0,183,79,.18); border-radius:var(--radius-sm); padding:.5rem 0; list-style:none; margin:0; opacity:0; pointer-events:none; transition:opacity .2s var(--ease), transform .2s var(--ease); box-shadow:0 24px 48px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04); z-index:200; } .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); } .dropdown li a{ display:block; padding:.55rem 1.35rem; font-size:.88rem; font-weight:500; color:rgba(255,255,255,.75); transition:color .15s, background .15s; white-space:nowrap; } .dropdown li a:hover{ color:var(--green); background:rgba(0,183,79,.07); } .dropdown li a.current{ color:var(--green); } /* Dropdown stays dark even when nav is light */ .nav.scrolled .has-dropdown > a, body.sub .has-dropdown > a{ color:var(--ink-2); } .nav.scrolled .has-dropdown:hover > a, body.sub .has-dropdown:hover > a{ color:var(--ink); } .nav.scrolled .has-dropdown:hover .nav-chevron, body.sub .has-dropdown:hover .nav-chevron{ opacity:1; } .nav.scrolled .nav-chevron, body.sub .nav-chevron{ color:var(--ink-2); } /* ============================================================ MOBILE MENU — ACCORDION SUBMENUS ============================================================ */ .mob-item{ border-bottom:1px solid rgba(255,255,255,.08); } .mob-parent{ width:100%; display:flex; align-items:center; justify-content:space-between; color:#fff; font-family:var(--display); text-transform:uppercase; font-size:1.7rem; padding:.7rem 0; background:none; border:0; cursor:pointer; text-align:left; } .mob-chevron{ width:18px; height:18px; flex-shrink:0; opacity:.6; transition:transform .25s var(--ease), opacity .25s; } .mob-item.open .mob-chevron{ transform:rotate(180deg); opacity:1; } .mob-sub{ list-style:none; margin:0; padding:0 0 .6rem .5rem; display:none; } .mob-item.open .mob-sub{ display:block; } .mob-sub li a{ display:block; padding:.45rem 0; color:rgba(255,255,255,.7); font-size:1.1rem; font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; transition:color .15s; } .mob-sub li a:hover{ color:var(--green); } .mob-sub li a.current{ color:var(--green); } /* Mobile menu panel */ .mobile-menu{ position:fixed; inset:var(--nav-h) 0 0 0; z-index:99; background:rgba(7,11,10,.98); backdrop-filter:blur(8px); display:flex; flex-direction:column; padding:2rem clamp(1.15rem,4vw,2rem); gap:.4rem; transform:translateY(-12px); opacity:0; pointer-events:none; transition:.3s var(--ease); overflow-y:auto; } .mobile-menu.open{ transform:none; opacity:1; pointer-events:auto; } .mobile-menu > a{ color:#fff; font-family:var(--display); text-transform:uppercase; font-size:1.7rem; padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.08); } .mobile-menu .btn{ margin-top:1.4rem; } /* ============================================================ HERO — HOME (dark, cinematic, video) [index.html] ============================================================ */ .hero{ position:relative; min-height:100svh; display:flex; align-items:center; color:#fff; overflow:hidden; background:var(--d-bg); } .hero.is-height-compact{ min-height:70svh; } .hero.is-height-tall{ min-height:88svh; } .hero.is-height-viewport{ min-height:100svh; } .hero.is-vertical-top{ align-items:flex-start; } .hero.is-vertical-center{ align-items:center; } .hero.is-vertical-bottom{ align-items:flex-end; } .hero.has-bg-dark{ background-color:var(--d-bg); } .hero.has-bg-ink{ background-color:var(--ink); } .hero.has-bg-green{ background-color:var(--green); } .hero.has-bg-soft{ background-color:var(--bg-soft); } .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; } .hero.has-media-top .hero-video,.hero.has-media-top .hero-fallback{ object-position:top; background-position:top; } .hero.has-media-bottom .hero-video,.hero.has-media-bottom .hero-fallback{ object-position:bottom; background-position:bottom; } .hero.has-media-left .hero-video,.hero.has-media-left .hero-fallback{ object-position:left; background-position:left; } .hero.has-media-right .hero-video,.hero.has-media-right .hero-fallback{ object-position:right; background-position:right; } .hero-fallback{ position:absolute; inset:0; z-index:0; background: radial-gradient(120% 90% at 70% 10%, rgba(0,178,169,.35), transparent 55%), radial-gradient(120% 90% at 15% 90%, rgba(0,94,184,.35), transparent 55%), var(--d-bg); background-size:cover; background-position:center; } .hero-overlay{ position:absolute; inset:0; z-index:1; backdrop-filter:blur(2px); --pm-hero-overlay-rgb:7,11,10; background:linear-gradient(180deg,rgba(var(--pm-hero-overlay-rgb),var(--pm-hero-overlay-strength)) 0%,rgba(var(--pm-hero-overlay-rgb),calc(var(--pm-hero-overlay-strength) * .55)) 38%,rgba(var(--pm-hero-overlay-rgb),calc(var(--pm-hero-overlay-strength) + .18)) 100%); } .hero.has-overlay-green .hero-overlay{ --pm-hero-overlay-rgb:0,72,35; } .hero.has-overlay-blue .hero-overlay{ --pm-hero-overlay-rgb:0,48,88; } .hero-grain{ position:absolute; inset:0; z-index:1; opacity:.5; mix-blend-mode:overlay; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent); mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent); } .hero .wrap{ position:relative; z-index:2; padding-top:calc(var(--nav-h) + 2rem); padding-bottom:4rem; } .hero-inner{ max-width:910px; } .hero.is-content-narrow .hero-inner{ max-width:640px; } .hero.is-content-standard .hero-inner{ max-width:910px; } .hero.is-content-wide .hero-inner{ max-width:1100px; } .hero.is-content-center .hero-inner{ margin-inline:auto; text-align:center; } .hero.is-content-right .hero-inner{ margin-left:auto; text-align:right; } .hero .eyebrow{ color:#7df0ad; } .hero .eyebrow::before{ background:var(--green-bright); } .hero h1{ margin-bottom:1.4rem; text-wrap:balance; } .hero h1 .accent,.hero h1 .has-green-bright-color,.hero h1 mark{ color:var(--green-bright)!important; background:transparent; } .h-sec .accent,.h-sec mark{ color:var(--green-ink); background:transparent; } .hero-sub{ font-size:clamp(1.1rem,1.9vw,1.4rem); color:rgba(243,247,245,.88); max-width:640px; line-height:1.5; margin-bottom:2.2rem; } .hero.is-content-center .hero-sub{ margin-inline:auto; } .hero.is-content-right .hero-sub{ margin-left:auto; } .hero-actions{ display:flex; flex-direction:column; align-items:stretch; gap:1rem; margin-bottom:2.4rem; } .hero.is-content-center .hero-actions{ justify-content:center; } .hero.is-content-right .hero-actions{ justify-content:flex-end; } .hero-actions .btn,.hero-actions .wp-block-button{ width:100%; } .hero-actions .wp-block-button__link{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:1.15rem 2rem; border-radius:999px; background:var(--green); color:#fff; box-shadow:0 8px 24px -8px rgba(0,183,79,.6); font-size:1.06rem; font-weight:600; line-height:1; text-decoration:none; transition:transform .2s var(--ease),background .2s,box-shadow .2s; } .hero-actions .wp-block-button__link:hover{ background:var(--green-bright); color:#fff; transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(0,183,79,.7); } .hero-actions .wp-block-button.is-style-ghost .wp-block-button__link{ background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.26); box-shadow:none; backdrop-filter:blur(6px); } .hero-actions .wp-block-button.is-style-ghost .wp-block-button__link:hover{ background:rgba(255,255,255,.14); } .hero-actions .btn-text{ color:#fff; padding-inline:.35rem; box-shadow:none; } .hero-actions .btn-text:hover{ color:var(--green-bright); transform:translateY(-2px); } .hero-trust{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:.6rem 1.6rem; margin:0; padding:0; list-style:none; font-size:.92rem; color:rgba(243,247,245,.7); } .hero.is-content-center .hero-trust{ justify-content:center; } .hero.is-content-right .hero-trust{ justify-content:flex-end; } .hero-trust span{ display:inline-flex; align-items:center; gap:.5rem; margin:0; } .hero-trust span::before{ content:""; width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--green-bright); box-shadow:0 0 10px var(--green); } .hero .is-style-trust-points{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:.6rem 1.6rem; margin:0; padding:0; list-style:none; font-size:.92rem; color:rgba(243,247,245,.7); } .hero.is-content-center .is-style-trust-points{ justify-content:center; } .hero.is-content-right .is-style-trust-points{ justify-content:flex-end; } .hero .is-style-trust-points li{ display:inline-flex; align-items:center; gap:.5rem; margin:0; } .hero .is-style-trust-points li::before{ content:""; width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--green-bright); box-shadow:0 0 10px var(--green); } .hero.is-scheme-light{ color:var(--ink); } .hero.is-scheme-light .eyebrow{ color:var(--green-ink); } .hero.is-scheme-light .hero-sub{ color:var(--ink-2); } .hero.is-scheme-light .is-style-trust-points,.hero.is-scheme-light .hero-trust{ color:var(--ink-2); } .hero.is-scheme-light .wp-block-button.is-style-ghost .wp-block-button__link{ background:rgba(255,255,255,.5); color:var(--ink); border-color:rgba(11,21,18,.25); } .hero.is-scheme-light .btn-ghost{ background:rgba(255,255,255,.5); color:var(--ink); border-color:rgba(11,21,18,.25); } .hero.is-scheme-light .btn-text{ color:var(--ink); } /* ============================================================ HERO — INTERIOR PAGE (light editorial band) [.hero--page] Distinct, lighter, shorter header that marks every sub-page as a recognizable sibling — visually separate from the home hero. Pair with for the light nav. ============================================================ */ .hero--page{ position:relative; background:var(--bg-soft); color:var(--ink); border-bottom:1px solid var(--border); overflow:hidden; /* reset the full-screen, flex-centered geometry inherited from .hero */ min-height:0; display:block; align-items:initial; padding-top:calc(var(--nav-h) + clamp(2.2rem,6vw,3.4rem)); padding-bottom:clamp(2.2rem,6vw,3.4rem); } .hero--page .wrap{ padding-top:0; padding-bottom:0; } .hero--page::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(80% 120% at 100% 0%, rgba(0,183,79,.07), transparent 55%), radial-gradient(70% 100% at 0% 100%, rgba(0,178,169,.05), transparent 55%); } .hero--page .wrap{ position:relative; z-index:1; } .hero--page .hero-inner{ max-width:760px; } .hero--page .accent-rule{ width:52px; height:4px; border-radius:2px; background:var(--green); margin-bottom:1.3rem; } .hero--page h1{ color:var(--ink); font-size:clamp(2.2rem,5vw,3.9rem); margin-bottom:1rem; text-wrap:balance; } .hero--page h1 .accent{ color:var(--green-ink); } .hero--page .hero-sub{ color:var(--ink-2); font-size:clamp(1.05rem,1.8vw,1.3rem); max-width:640px; margin-bottom:1.8rem; } .hero--page .hero-actions{ margin-bottom:0; } .hero--page .eyebrow{ color:var(--green-ink); } /* Breadcrumb */ .crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:1.1rem; font-size:.76rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .crumbs a{ color:var(--muted); transition:color .18s; } .crumbs a:hover{ color:var(--green-ink); } .crumbs .sep{ opacity:.45; } .crumbs .current{ color:var(--ink-2); } /* ============================================================ HERO — INDUSTRY PAGE (dark, cinematic video band) [.hero--industry] Used on the five industries-*.html pages. Same layer stack as the home hero (fallback + video + overlay + grain) at interior-page height. Pair with a body WITHOUT .sub so the nav starts transparent over the video and goes light on scroll (same behavior as the home page). ============================================================ */ .hero--industry{ min-height:72svh; } .hero--industry .wrap{ padding-top:calc(var(--nav-h) + 3rem); padding-bottom:3.5rem; } .hero--industry .hero-inner{ max-width:860px; } .hero--industry .accent-rule{ width:52px; height:4px; border-radius:2px; background:var(--green-bright); margin-bottom:1.3rem; box-shadow:0 0 12px rgba(0,183,79,.45); } .hero--industry h1{ font-size:clamp(2.2rem,5vw,3.9rem); } .hero--industry .crumbs, .hero--industry .crumbs a{ color:rgba(243,247,245,.62); } .hero--industry .crumbs a:hover{ color:#fff; } .hero--industry .crumbs .current{ color:rgba(243,247,245,.88); } /* ============================================================ LOGO STRIP ============================================================ */ .logos{ background:var(--bg); border-bottom:1px solid var(--border); padding-block:2.6rem; } .logos-label{ text-align:center; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:1.6rem; } .logos-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(1.8rem,5vw,3.8rem); } .logos-row img{ height:clamp(26px,3.4vw,40px); width:auto; object-fit:contain; filter:grayscale(1); opacity:.62; transition:filter .3s, opacity .3s; } .logos-row img:hover{ filter:grayscale(0); opacity:1; } /* ============================================================ CHALLENGE / GENERIC CARDS ============================================================ */ .grid3{ display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:3.2rem; } .card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#d4e4da; } .card-ico{ width:52px; height:52px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:1.3rem; background:linear-gradient(135deg, rgba(0,183,79,.14), rgba(0,178,169,.14)); color:var(--green-ink); } .card-ico svg{ width:26px; height:26px; } .card h3{ margin-bottom:.6rem; } .card p{ color:var(--muted); font-size:1rem; margin:0; } .cards-align-center .card,.cards-align-center .tile{ text-align:center; } .cards-align-center .card-ico,.cards-align-center .tile-ico{ margin-inline:auto; } /* ============================================================ DARK BANDS ============================================================ */ .dark{ background:var(--d-bg); color:var(--d-text); } .dark .eyebrow{ color:#7df0ad; } .dark .eyebrow::before{ background:var(--green-bright); } .dark .lead{ color:var(--d-muted); } .dark h1,.dark h2,.dark h3{ color:#fff; } .dark .card{ background:var(--d-card); border-color:var(--d-card-border); box-shadow:none; } .dark .card:hover{ box-shadow:none; border-color:rgba(255,255,255,.22); } .dark .card p{ color:var(--d-muted); } .dark .card-ico{ background:rgba(0,183,79,.14); color:#7df0ad; } /* Reactive vs Proactive */ .rvp{ display:grid; grid-template-columns:1fr; gap:1.4rem; margin-top:3rem; } .rvp-panel{ border-radius:var(--radius); padding:1.8rem; border:1px solid var(--d-card-border); background:var(--d-card); } .rvp-panel.reactive{ background:linear-gradient(180deg, rgba(229,72,77,.10), rgba(229,72,77,.03)); border-color:rgba(229,72,77,.28); } .rvp-panel.proactive{ background:linear-gradient(180deg, rgba(0,183,79,.12), rgba(0,183,79,.03)); border-color:rgba(0,183,79,.34); } .rvp-tag{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; padding:.4rem .8rem; border-radius:999px; margin-bottom:1rem; } .rvp-panel.reactive .rvp-tag{ background:rgba(229,72,77,.16); color:#ff9b9e; } .rvp-panel.proactive .rvp-tag{ background:rgba(0,183,79,.18); color:#7df0ad; } .rvp-panel h3{ font-size:1.7rem; margin-bottom:.5rem; } .rvp-panel > .rvp-intro{ color:var(--d-muted); font-size:.98rem; margin-bottom:1.4rem; } .rvp-chart{ width:100%; height:120px; margin-bottom:1.4rem; } .rvp-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem; } .rvp-steps li{ display:flex; gap:.7rem; font-size:.93rem; color:#d6e2dc; } .rvp-steps li svg{ width:18px; height:18px; flex:0 0 18px; margin-top:2px; } .reactive .rvp-steps li svg{ color:#ff8c90; } .proactive .rvp-steps li svg{ color:var(--green-bright); } .rvp-steps b, .rvp-steps strong{ color:#fff; font-weight:600; } .comparison-block.has-hidden-charts .rvp-chart{ display:none; } /* Stats */ .stats{ display:grid; grid-template-columns:1fr; gap:1.2rem; margin-top:1.4rem; } .stat{ border:1px solid var(--d-card-border); border-radius:var(--radius); padding:1.6rem 1.4rem; background:var(--d-card); } .stat.hl{ background:linear-gradient(135deg, var(--green), var(--teal)); border:none; } .stat-num{ font-family:var(--display); font-weight:600; font-size:clamp(2.6rem,5vw,3.6rem); line-height:.95; letter-spacing:-.01em; color:#fff; font-variant-numeric:tabular-nums; } .stat.hl .stat-num{ color:#04130A; } .stat-lbl{ font-weight:600; font-size:.95rem; margin-top:.55rem; color:#fff; } .stat.hl .stat-lbl{ color:#04130A; } .stat-sub{ font-size:.85rem; color:var(--d-muted); margin-top:.2rem; } .stat.hl .stat-sub{ color:rgba(4,19,10,.75); } .stats-cap{ margin-top:1.4rem; font-size:.85rem; letter-spacing:.04em; color:var(--d-muted); text-transform:uppercase; } .case-badge{ display:inline-flex; align-items:center; gap:.65rem; font-weight:600; font-size:1.05rem; color:#fff; } .case-badge span{ background:var(--green); color:#04130A; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:.42rem .8rem; border-radius:999px; } .stat > p{ margin-bottom:0; } .stats-disclaimer{ margin-top:1.4rem; font-size:.8rem; color:var(--d-muted); max-width:720px; line-height:1.55; } .control-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:3rem; } .control-card{ border:1px solid var(--d-card-border); background:var(--d-card); border-radius:var(--radius); padding:1.9rem; } .control-card h3{ font-size:1.3rem; margin-bottom:.9rem; color:#fff; } .control-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem; } .control-card ul li{ display:flex; gap:.6rem; font-size:.96rem; color:#d6e2dc; } .control-card ul li svg{ flex:0 0 auto; width:18px; height:18px; margin-top:2px; color:var(--green-bright); } @media (max-width:860px){ .control-grid{ grid-template-columns:1fr; } } /* ============================================================ FEATURES (alternating text / media rows) ============================================================ */ .feature{ position:relative; display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; padding-block:clamp(2.5rem,5vw,4rem); } .feature--mobile-media-first .feature-media,.feature--column-two-first-mobile > :nth-child(2){ order:-1; } .frow{ border-top:1px solid var(--border); } /* When a .frow immediately follows a sec-head's .wrap (no grid/list in between), give it the same ~3rem breathing room every other post-sec-head block gets. */ .wrap:has(> .sec-head) + .frow{ margin-top:3rem; } .frow.alt{ background:var(--bg-soft); } .frow.alt .feature-media{ background:#fff; } .feature-num{ font-family:var(--display); font-weight:600; font-size:1rem; color:var(--green-ink); letter-spacing:.1em; margin-bottom:.7rem; } .feature h3{ font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:1rem; } .feature p{ color:var(--muted); font-size:1.05rem; margin-bottom:1.2rem; } .feature ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; } .feature ul li{ display:flex; gap:.65rem; font-size:1rem; color:var(--ink-2); } .feature ul li svg{ flex:0 0 auto; width:20px; height:20px; color:var(--green-ink); margin-top:2px; } .feature-media{ border-radius:var(--radius); border:1px solid var(--border); background:linear-gradient(160deg,var(--bg-soft),#fff); box-shadow:var(--shadow); padding:1.6rem; } .feature-media svg{ width:100%; height:auto; } .feature-media video{ width:100%; height:auto; display:block; border-radius:10px; } .feature-media img{ width:100%; height:auto; display:block; border-radius:10px; object-fit:cover; } .feature-media--fill{ padding:.7rem; } .media-cap{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; } .media-cap::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--green); } .media-cap.no-dot::before{ display:none; } .hero-media-frame{ overflow:hidden; border-radius:10px; } .hero-media-frame img{ will-change:transform; } .how-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; margin-top:2.6rem; } .rvp-blip{ opacity:0; } @media (max-width:860px){ .how-grid{ grid-template-columns:1fr; } } /* Platform relationship map — copied from the approved platform.html. */ .pmap{ margin-top:3rem; border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(160deg,var(--bg-soft),#fff); box-shadow:var(--shadow); padding:clamp(1.5rem,3.5vw,2.6rem); } .pmap-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; } .pmap-badge{ display:inline-flex; align-items:center; gap:.55rem; font-weight:600; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:#04130A; background:var(--green); padding:.42rem .85rem; border-radius:999px; } .pmap-badge svg{ width:18px; height:18px; flex:0 0 18px; } .pmap-title{ font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.04; letter-spacing:-.01em; margin:1rem 0 .6rem; } .pmap-desc{ color:var(--ink-2); font-size:1.05rem; max-width:680px; margin:0; } .pmap-link{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.95rem; color:var(--green-ink); margin-top:1.1rem; transition:gap .2s var(--ease),color .2s; } .pmap-link:hover{ gap:.7rem; color:var(--green); } .pmap-link svg{ width:16px; height:16px; } .pmap-caps{ display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; margin-top:1.8rem; } .pmap-cap{ display:flex; gap:.7rem; align-items:flex-start; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.95rem 1.1rem; } .pmap-cap > svg,.pmap-cap > img{ flex:0 0 auto; width:22px; height:22px; color:var(--green-ink); margin-top:1px; } .pmap-cap b{ display:block; font-weight:600; color:var(--ink); font-size:.98rem; margin-bottom:.1rem; } .pmap-cap span{ color:var(--muted); font-size:.9rem; line-height:1.45; } .pmap-nest{ margin-top:1.8rem; position:relative; border:1px solid rgba(0,183,79,.34); border-radius:var(--radius); background:linear-gradient(180deg,rgba(0,183,79,.07),rgba(0,178,169,.04)); padding:clamp(1.3rem,2.8vw,1.9rem); } .pmap-nest::before{ content:var(--pmap-nest-label,"Built into PM Studio"); position:absolute; top:-.7rem; left:1.4rem; font-family:var(--body); font-weight:600; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green-ink); background:#fff; padding:.15rem .6rem; border:1px solid rgba(0,183,79,.34); border-radius:999px; } .pmap-nest .pmap-title{ font-size:clamp(1.35rem,2.4vw,1.7rem); margin-top:.4rem; } .pmap-nest .pmap-desc{ font-size:1rem; } .pmap-media{ margin-top:1.8rem; background:#070B0A; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); } .pmap-media video{ display:block; width:100%; height:auto; } .pmap-media p{ padding:1rem 1.4rem 0; margin:0; font-weight:600; font-size:.92rem; color:#DFF2E6; } .has-no-bottom-padding{ padding-bottom:0!important; } @media (max-width:560px){ .pmap-caps{ grid-template-columns:1fr; } } /* Feature link (arrow link used on some pages) */ .feature-link{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--green-ink); font-size:1rem; margin-top:.4rem; transition:gap .2s var(--ease), color .2s; } .feature-link svg{ width:18px; height:18px; } .feature-link:hover{ gap:.75rem; color:var(--green); } .shot-placeholder{ border:2px dashed var(--border); border-radius:var(--radius); background:var(--bg-tint); padding:3rem 1.5rem; display:flex; align-items:center; justify-content:center; min-height:320px; } .dark .shot-placeholder{ border-color:rgba(255,255,255,.22); background:var(--d-card); } .shot-ph-inner{ text-align:center; color:var(--muted); max-width:320px; } .dark .shot-ph-inner{ color:var(--d-muted); } .shot-ph-inner svg{ width:40px; height:40px; margin:0 auto .9rem; opacity:.6; } .shot-ph-label{ font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; font-size:1rem; margin:0; line-height:1.3; } .grid3-tile{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:3rem; } .old-new{ display:grid; grid-template-columns:1fr; gap:1.4rem; margin-top:3rem; } .on-panel{ border-radius:var(--radius); padding:1.8rem; border:1px solid var(--d-card-border); background:var(--d-card); } .on-panel.old{ background:linear-gradient(180deg,rgba(229,72,77,.10),rgba(229,72,77,.03)); border-color:rgba(229,72,77,.28); } .on-panel.new{ background:linear-gradient(180deg,rgba(0,183,79,.12),rgba(0,183,79,.03)); border-color:rgba(0,183,79,.34); } .on-tag{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; padding:.4rem .8rem; border-radius:999px; margin-bottom:1rem; } .on-panel.old .on-tag{ background:rgba(229,72,77,.16); color:#ff9b9e; } .on-panel.new .on-tag{ background:rgba(0,183,79,.18); color:#7df0ad; } .on-panel h3{ font-size:1.7rem; margin-bottom:.5rem; } .on-panel>p{ color:var(--d-muted); font-size:.98rem; margin-bottom:1.4rem; } .on-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem; } .on-steps li{ display:flex; gap:.7rem; font-size:.93rem; color:#d6e2dc; } .on-steps li svg{ flex:0 0 auto; width:18px; height:18px; margin-top:2px; } .old .on-steps li svg{ color:#ff8c90; } .new .on-steps li svg{ color:var(--green-bright); } .on-steps b{ color:#fff; font-weight:600; } .roadmap-card{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:center; margin-top:3rem; border:1px solid var(--d-card-border); background:var(--d-card); border-radius:var(--radius); padding:clamp(1.8rem,4vw,3rem); } .roadmap-badge{ display:inline-flex; align-items:center; gap:.5rem; background:rgba(0,183,79,.16); color:#7df0ad; font-weight:700; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; padding:.42rem .85rem; border-radius:999px; margin-bottom:1.1rem; } .roadmap-card h3{ font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:.9rem; color:#fff; } .roadmap-card p{ color:var(--d-muted); font-size:1.02rem; } .query-types{ list-style:none; margin:1.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.6rem; } .query-types li{ display:flex; gap:.6rem; font-size:.95rem; color:#d6e2dc; } .query-types li svg{ flex:0 0 auto; width:18px; height:18px; margin-top:2px; color:var(--green-bright); } .roadmap-link{ margin-top:1.4rem; display:inline-flex; align-items:center; gap:.5rem; color:var(--green-bright); font-weight:600; font-size:.98rem; } .roadmap-link svg{ width:18px; height:18px; } @media (min-width:861px){ .old-new{ grid-template-columns:1fr 1fr; } } @media (max-width:860px){ .grid3-tile,.roadmap-card{ grid-template-columns:1fr; } } .platform-no-heading > .frow:first-of-type{ border-top:none; } .adoption-path--dark .path{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:3rem; position:relative; } .adoption-path--dark .path-step{ border:1px solid var(--d-card-border); background:var(--d-card); border-radius:var(--radius); padding:1.8rem; } .adoption-path--dark .path-step.current{ border-color:rgba(0,183,79,.4); background:linear-gradient(180deg,rgba(0,183,79,.12),rgba(0,183,79,.03)); } .adoption-path--dark .path-num{ font-family:var(--display); font-weight:600; font-size:.85rem; color:var(--green-bright); letter-spacing:.1em; margin-bottom:.6rem; } .adoption-path--dark .path-step h3{ font-size:1.35rem; margin-bottom:.6rem; color:#fff; } .adoption-path--dark .path-step p{ color:var(--d-muted); font-size:.95rem; margin:0; } .adoption-path--dark .path-links{ margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:1rem; } .adoption-path--dark .path-link{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem; color:var(--green-bright); border:1px solid rgba(0,183,79,.3); border-radius:999px; padding:.7rem 1.2rem; transition:background .2s,transform .2s; } .adoption-path--dark .path-link:hover{ background:rgba(0,183,79,.1); transform:translateY(-2px); } .adoption-path--dark .path-link svg{ width:16px; height:16px; } .adoption-path--light .path{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:3rem; counter-reset:step; } .adoption-path--light .path-step{ position:relative; border:1px solid var(--border); border-radius:var(--radius); padding:1.7rem 1.5rem; background:var(--card); } .adoption-path--light .path-step::before{ counter-increment:step; content:counter(step); font-family:var(--display); font-size:1.1rem; font-weight:600; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg-tint); color:var(--green-ink); margin-bottom:1rem; } .adoption-path--light .path-step h3{ font-size:1.15rem; margin-bottom:.5rem; } .adoption-path--light .path-step p{ color:var(--muted); font-size:.92rem; margin:0; } .adoption-path--light .path-step .path-tag{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green-ink); background:var(--bg-tint); padding:.3rem .6rem; border-radius:999px; margin-bottom:.7rem; } @media (max-width:1024px){ .adoption-path--light .path{ grid-template-columns:1fr 1fr; } } @media (max-width:860px){ .adoption-path--dark .path,.adoption-path--light .path{ grid-template-columns:1fr; } } /* ============================================================ 4-UP TILES / AGNOSTIC BAND ============================================================ */ .soft{ background:var(--bg-soft); } .glow{ position:relative; overflow:hidden; } .glow::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(80% 120% at 50% 0%, rgba(0,183,79,.20), transparent 60%), radial-gradient(60% 90% at 80% 100%, rgba(0,178,169,.16), transparent 60%); } .glow > .wrap{ position:relative; z-index:1; } .dark .tile{ background:var(--d-card); border-color:var(--d-card-border); box-shadow:none; } .dark .tile:hover{ box-shadow:none; border-color:rgba(255,255,255,.22); transform:translateY(-4px); } .dark .tile h3{ color:#fff; } .dark .tile p{ color:var(--d-muted); } .dark .tile-ico{ background:rgba(0,183,79,.14); color:#7df0ad; } .grid4{ display:grid; grid-template-columns:1fr; gap:1.3rem; margin-top:3rem; } .tile{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.7rem; transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow); } .tile-ico{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; background:var(--bg-tint); color:var(--green-ink); } .tile-ico svg{ width:24px; height:24px; } .tile h3{ font-size:1.2rem; margin-bottom:.5rem; } .tile p{ color:var(--muted); font-size:.95rem; margin:0; } /* Generic 2-up / 3-up grids used across sub-pages */ .grid2{ display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:3rem; } .grid3cols{ display:grid; grid-template-columns:1fr; gap:1.3rem; margin-top:3rem; } /* ============================================================ INTEGRATION + SPEED STRIP ============================================================ */ .intg{ display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:3rem; } .intg .card p{ font-size:.98rem; } @media (min-width:1200px){ .intg .h-card{ white-space:nowrap; font-size:clamp(1.3rem,1.8vw,1.45rem); } } .speed{ display:grid; grid-template-columns:1fr; gap:1.2rem; margin-top:2.4rem; border:1px dashed #cfe0d6; border-radius:var(--radius); padding:1.8rem; background:var(--bg-tint); } .speed-item{ text-align:center; } .speed-num{ font-family:var(--display); font-weight:600; font-size:clamp(1.9rem,3.6vw,2.6rem); color:var(--green-ink); line-height:1; } .speed-lbl{ font-size:.95rem; color:var(--ink-2); margin-top:.45rem; font-weight:500; } /* ============================================================ PROOF BAND ============================================================ */ .proof-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,4rem); align-items:center; } .proof-stats{ display:grid; grid-template-columns:1fr; gap:1.2rem; } .quote{ font-family:var(--display); text-transform:none; font-weight:500; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.25; color:#fff; letter-spacing:0; margin:0; } .quote-mark{ color:var(--green-bright); } .quote-by{ margin-top:1.2rem; font-family:var(--body); font-size:.95rem; color:var(--d-muted); letter-spacing:.02em; } .quote-attr{ display:flex; align-items:center; gap:.8rem; margin-top:1.2rem; } .quote-attr img{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; } .quote-attr .quote-by{ margin-top:0; } /* ============================================================ FAQ ============================================================ */ .faq-wrap{ max-width:840px; margin-inline:auto; } .faq-group{ margin-top:2.6rem; } .faq-group-h{ font-family:var(--body); font-weight:700; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green-ink); margin-bottom:.9rem; } details.faq{ border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); margin-bottom:.7rem; overflow:hidden; transition:border-color .25s, box-shadow .25s; } details.faq[open]{ border-color:#cfe0d6; box-shadow:var(--shadow-sm); } details.faq summary{ list-style:none; cursor:pointer; padding:1.15rem 1.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-weight:600; font-size:1.04rem; color:var(--ink); } details.faq summary::-webkit-details-marker{ display:none; } .faq-plus{ flex:0 0 auto; width:22px; height:22px; position:relative; transition:transform .3s var(--ease); } .faq-plus::before,.faq-plus::after{ content:""; position:absolute; inset:0; margin:auto; background:var(--green-ink); border-radius:2px; } .faq-plus::before{ width:14px; height:2px; } .faq-plus::after{ width:2px; height:14px; } details.faq[open] .faq-plus{ transform:rotate(135deg); } .faq-body{ padding:0 1.4rem 1.3rem; color:var(--muted); font-size:1rem; line-height:1.6; } .faq-body b{ color:var(--ink-2); } /* ============================================================ CONTACT FORM ============================================================ */ .contact-form-section{ background:var(--bg-soft); } .contact-form-wrap{ display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; } .contact-form-copy .lead{ margin-top:1rem; } .contact-form{ display:flex; flex-direction:column; gap:1.1rem; } .form-row{ display:grid; grid-template-columns:1fr; gap:1.1rem; } .field{ display:flex; flex-direction:column; gap:.4rem; } .field label{ font-size:.85rem; font-weight:600; color:var(--ink-2); letter-spacing:.01em; } .field input, .field select, .field textarea{ width:100%; padding:.85rem 1rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--ink); font-family:var(--body); font-size:1rem; line-height:1.5; transition:border-color .2s, box-shadow .2s; appearance:none; -webkit-appearance:none; } .field input::placeholder, .field textarea::placeholder{ color:var(--muted); } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(0,183,79,.15); } .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6B64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .85rem center; padding-right:2.5rem; cursor:pointer; } .field textarea{ resize:vertical; min-height:110px; } .consent-block{ display:flex; align-items:flex-start; gap:.75rem; margin-top:.4rem; } .consent-block input[type="checkbox"]{ flex:0 0 auto; width:18px; height:18px; border:1.5px solid var(--border); border-radius:4px; background:var(--bg); cursor:pointer; margin-top:2px; accent-color:var(--green); } .consent-block label{ font-size:.88rem; color:var(--muted); line-height:1.55; cursor:pointer; } .consent-block label a{ color:var(--green-ink); text-decoration:underline; text-underline-offset:2px; } .consent-block label a:hover{ color:var(--green); } .form-submit{ margin-top:.4rem; } .form-submit .btn{ width:100%; justify-content:center; } /* ============================================================ FINAL CTA ============================================================ */ .cta{ position:relative; overflow:hidden; background:var(--d-bg); color:#fff; text-align:center; } .cta::before{ content:""; position:absolute; inset:0; background: radial-gradient(80% 120% at 50% 0%, rgba(0,183,79,.22), transparent 60%), radial-gradient(60% 90% at 80% 100%, rgba(0,178,169,.18), transparent 60%); } .cta .wrap{ position:relative; z-index:1; max-width:840px; } .cta h2{ color:#fff; margin-bottom:1.2rem; } .cta .lead{ color:rgba(243,247,245,.82); margin-inline:auto; max-width:620px; } .cta-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; justify-content:center; margin-top:2.2rem; } .cta-actions--paired{ flex-direction:column; } .cta-buttons{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; } .cta-fine{ margin-top:1.6rem; font-size:.9rem; color:rgba(243,247,245,.6); } .pilot-cta{ display:flex; flex-direction:column; align-items:center; gap:.6rem; } .pilot-note{ margin:0; font-size:.85rem; color:rgba(243,247,245,.6); } /* ============================================================ FOOTER ============================================================ */ .footer{ background:var(--d-bg-2); color:var(--d-muted); padding-block:3.6rem 2rem; border-top:1px solid rgba(255,255,255,.07); } .footer-top{ display:grid; grid-template-columns:1fr; gap:2rem; } .footer-brand img{ height:30px; margin-bottom:1.1rem; } .footer-brand p{ font-size:.95rem; max-width:300px; color:var(--d-muted); } .footer-brand p.footer-brand-logo, .footer-brand .textwidget > p:has(> img:only-child){ max-width:none; margin:0; } .footer h4{ font-family:var(--body); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin:0 0 1rem; font-weight:700; } .footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.15rem; } .footer ul a{ display:inline-block; padding:.45rem 0; font-size:.95rem; color:var(--d-muted); transition:color .2s; } .footer ul a:hover{ color:#fff; } .footer-bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.07); font-size:.85rem; } .footer-tag{ color:var(--green-bright); font-weight:500; } /* ============================================================ REVEAL ANIMATION ============================================================ */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform:none; } /* ============================================================ RESPONSIVE — mobile-first, scaling UP Base rules above target phones (~375px). These add complexity for wider viewports. ============================================================ */ /* Small phones and up — pair 2-up where it reads well */ @media (min-width:480px){ .stats{ grid-template-columns:1fr 1fr; } .proof-stats{ grid-template-columns:1fr 1fr; } } /* Large phone / small tablet */ @media (min-width:561px){ .hero-actions{ flex-direction:row; align-items:center; } .hero-actions .btn,.hero-actions .wp-block-button{ width:auto; } .grid4{ grid-template-columns:1fr 1fr; } .grid2{ grid-template-columns:1fr 1fr; } .grid3cols{ grid-template-columns:1fr 1fr; } .form-row{ grid-template-columns:1fr 1fr; } .footer-top{ grid-template-columns:1fr 1fr; } } /* Tablet */ @media (min-width:768px){ .grid3{ grid-template-columns:repeat(3,1fr); } .intg{ grid-template-columns:repeat(3,1fr); } .speed{ grid-template-columns:repeat(3,1fr); } .grid3cols{ grid-template-columns:repeat(3,1fr); } } /* Small desktop / landscape tablet */ @media (min-width:861px){ body{ font-size:17px; } .rvp{ grid-template-columns:1fr 1fr; } .comparison-block.is-layout-stacked .rvp{ grid-template-columns:1fr; } .proof-grid{ grid-template-columns:1.1fr 1fr; } .feature{ grid-template-columns:1fr 1fr; } .feature--mobile-media-first .feature-media,.feature--column-two-first-mobile > :nth-child(2){ order:initial; } .feature--rev .feature-media{ order:-1; } .contact-form-wrap{ grid-template-columns:1fr 1.6fr; } .stats{ grid-template-columns:1fr 1fr; } } /* Desktop — restore full multi-column layouts + real nav */ @media (min-width:1000px){ .nav-links{ display:flex; } .nav-cta .btn{ display:inline-flex; } .nav-burger{ display:none; } } @media (min-width:1024px){ .grid4{ grid-template-columns:repeat(4,1fr); } .footer-top{ grid-template-columns:1.6fr repeat(3,1fr); } } @media (min-width:900px){ .stats{ grid-template-columns:repeat(4,1fr); } } /* Data / battery saver — don't play the hero video on small screens */ @media (max-width:760px){ .hero-video{ display:none; } } /* ============================================================ STAGED IMPLEMENTATION (Free Analysis → 60-Day Pilot → Stages 1–3) Shared section used on index, platform, and industries pages. Mobile: vertical timeline with a left rail. ≥1000px: 5-across stepper with program group labels. ============================================================ */ .stages-band{ position:relative; overflow:hidden; background: radial-gradient(90% 65% at 50% -8%, rgba(0,183,79,.07), transparent 60%), linear-gradient(180deg, #F7FAF8 0%, #EBF2ED 100%); } .stages-band::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 90% at 88% 108%, rgba(0,178,169,.06), transparent 60%); } .stages-band > .wrap{ position:relative; z-index:1; } .stages-grid{ display:grid; grid-template-columns:1fr; gap:1.15rem; margin-top:3.2rem; } .stages-group{ display:flex; align-items:center; gap:.75rem; margin:0; font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .stages-group::after{ content:""; flex:1; height:1px; background:var(--border); } .stages-group.ent{ color:var(--green-ink); margin-top:1rem; } .stages-group.ent::after{ background:linear-gradient(90deg, rgba(0,183,79,.4), var(--border)); } .stages-step{ position:relative; display:flex; flex-direction:column; padding-left:3rem; } .stages-step::before{ content:""; position:absolute; left:16px; top:42px; bottom:-1.15rem; width:2px; background:var(--border); } .stages-grid .stages-step:last-child::before{ display:none; } .stages-dot{ position:absolute; left:0; top:4px; z-index:1; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:600; font-size:1.02rem; background:#fff; border:2px solid rgba(0,183,79,.45); color:var(--green-ink); box-shadow:0 0 0 5px rgba(0,183,79,.07); } .stages-step.start .stages-dot{ background:var(--green); border-color:var(--green); color:#04130A; box-shadow:0 0 18px rgba(0,183,79,.5), 0 0 0 5px rgba(0,183,79,.14); } .stages-card{ flex:1; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem 1.35rem; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; } .stages-card:hover{ transform:translateY(-6px); box-shadow:0 22px 44px -18px rgba(0,183,79,.4), 0 8px 20px -12px rgba(11,21,18,.14); border-color:rgba(0,183,79,.4); } .stages-step.start .stages-card{ border-color:rgba(0,183,79,.5); box-shadow:0 0 0 1px rgba(0,183,79,.18), var(--shadow-sm); } .stages-step.start .stages-card:hover{ border-color:var(--green); box-shadow:0 0 0 1px rgba(0,183,79,.3), 0 22px 44px -18px rgba(0,183,79,.45), 0 8px 20px -12px rgba(11,21,18,.14); } .stages-tag{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--green-ink); margin-bottom:.6rem; } .stages-tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); } .stages-card h3{ font-size:1.3rem; margin-bottom:1rem; } .stages-adds{ font-weight:700; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--green-ink); margin:0 0 .8rem; padding-top:.9rem; border-top:1px solid var(--border); } .stages-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; } .stages-list li{ display:flex; gap:.55rem; font-size:.92rem; color:var(--muted); line-height:1.5; } .stages-list li svg{ flex:0 0 auto; width:17px; height:17px; color:var(--green-ink); margin-top:3px; } .stages-list b{ color:var(--ink); font-weight:600; } .stages-foot{ margin-top:2.8rem; text-align:center; } .stages-foot p{ margin:0 auto 1.4rem; color:var(--muted); font-size:.98rem; max-width:560px; } @media (min-width:1000px){ .stages-grid{ grid-template-columns:repeat(5,1fr); grid-template-rows:auto auto; gap:1.05rem; } .stages-group{ grid-row:1; justify-content:center; margin:0 0 .2rem; } .stages-group::before{ content:""; flex:1; height:1px; background:var(--border); } .stages-group.pilot{ grid-column:1 / span 2; } .stages-group.ent{ grid-column:3 / span 3; margin-top:0; } .stages-group.ent::before{ background:linear-gradient(90deg, var(--border), rgba(0,183,79,.4)); } .stages-group.ent::after{ background:linear-gradient(90deg, rgba(0,183,79,.4), var(--border)); } .stages-step{ grid-row:2; padding-left:0; padding-top:3.1rem; } .stages-grid > .stages-step:nth-child(2){ grid-column:1; } .stages-grid > .stages-step:nth-child(3){ grid-column:2; } .stages-grid > .stages-step:nth-child(5){ grid-column:3; } .stages-grid > .stages-step:nth-child(6){ grid-column:4; } .stages-grid > .stages-step:nth-child(7){ grid-column:5; } .stages-step::before{ left:-.525rem; right:-.525rem; top:17px; bottom:auto; width:auto; height:2px; } .stages-grid > .stages-step:nth-child(2)::before{ left:50%; } .stages-grid .stages-step:last-child::before{ display:block; right:50%; } .stages-dot{ left:50%; top:0; transform:translateX(-50%); } } /* ============================================================ FLEXIBLE SPLIT SECTION ============================================================ */ .pm-split-section{ position:relative; overflow:hidden; isolation:isolate; } .pm-split-section.is-spacing-compact{ padding-block:clamp(2rem,4vw,3.5rem); } .pm-split-section.is-spacing-standard{ padding-block:clamp(3.5rem,7vw,6rem); } .pm-split-section.is-spacing-large{ padding-block:clamp(5rem,10vw,8rem); } .pm-split-section.has-bg-dark{ background:var(--d-bg); } .pm-split-section.has-bg-ink{ background:var(--d-bg-2); } .pm-split-section.has-bg-green{ background:var(--green); } .pm-split-section.has-bg-soft{ background:var(--bg-soft); } .pm-split-background,.pm-split-background-video,.pm-split-overlay{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } .pm-split-background{ z-index:-3; background-size:cover; background-repeat:no-repeat; } .pm-split-background-video{ z-index:-3; object-fit:cover; } .pm-split-overlay{ z-index:-2; opacity:var(--pm-split-overlay-strength,.6); background:#07100d; } .pm-split-section.has-overlay-green .pm-split-overlay{ background:#063e22; } .pm-split-section.has-overlay-blue .pm-split-overlay{ background:#082f3d; } .pm-split-section.has-media-top :is(.pm-split-background,.pm-split-background-video){ background-position:center top; object-position:center top; } .pm-split-section.has-media-bottom :is(.pm-split-background,.pm-split-background-video){ background-position:center bottom; object-position:center bottom; } .pm-split-section.has-media-left :is(.pm-split-background,.pm-split-background-video){ background-position:left center; object-position:left center; } .pm-split-section.has-media-right :is(.pm-split-background,.pm-split-background-video){ background-position:right center; object-position:right center; } .pm-split-wrap{ position:relative; z-index:1; } .pm-split-columns{ gap:clamp(2rem,6vw,5rem); margin-bottom:0; } .pm-split-section.is-vertical-top .pm-split-columns{ align-items:flex-start!important; } .pm-split-section.is-vertical-center .pm-split-columns{ align-items:center!important; } .pm-split-section.is-vertical-bottom .pm-split-columns{ align-items:flex-end!important; } .pm-split-section.is-scheme-dark{ color:var(--d-text); } .pm-split-section.is-scheme-dark :is(h2,h3,h4){ color:#fff; } .pm-split-section.is-scheme-dark p{ color:var(--d-muted); } .pm-split-section.is-scheme-dark .eyebrow{ color:#7df0ad; } .pm-split-column > *:last-child{ margin-bottom:0; } @media (max-width:781px){ .pm-split-section.is-mobile-second .pm-split-columns > .wp-block-column:first-child{ order:2; } .pm-split-section.is-mobile-second .pm-split-columns > .wp-block-column:last-child{ order:1; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; transition:none; } } .hero--platform{ position:relative; overflow:hidden; color:#fff; min-height:0; display:block; align-items:initial; border-bottom:1px solid rgba(255,255,255,.08); background: linear-gradient(90deg, rgba(7,11,10,.88) 0%, rgba(7,11,10,.42) 55%, rgba(7,11,10,.08) 100%), linear-gradient(180deg, rgba(7,11,10,.62) 0%, rgba(7,11,10,0) 24%), url("platform-hero-bg.jpg") center/cover no-repeat, var(--d-bg); } .hero--platform .wrap{ position:relative; z-index:1; padding-top:calc(var(--nav-h) + clamp(2.4rem,6vw,3.8rem)); padding-bottom:clamp(2.6rem,6vw,4rem); } .hero--platform .hero-inner{ max-width:860px; } .hero--platform .accent-rule{ width:52px; height:4px; border-radius:2px; background:var(--green-bright); margin-bottom:1.3rem; box-shadow:0 0 12px rgba(0,183,79,.45); } .hero--platform h1{ color:#fff; font-size:clamp(2.2rem,5vw,3.9rem); margin-bottom:1rem; text-wrap:balance; } .hero--platform h1 .accent{ color:var(--green-bright); } .hero--platform .hero-sub{ color:rgba(243,247,245,.88); font-size:clamp(1.05rem,1.8vw,1.3rem); max-width:640px; margin-bottom:1.8rem; } .hero--platform .hero-actions{ margin-bottom:0; } .hero--platform .eyebrow{ color:var(--green-bright); } .hero--platform .crumbs, .hero--platform .crumbs a{ color:rgba(243,247,245,.62); } .hero--platform .crumbs a:hover{ color:#fff; } .hero--platform .crumbs .sep{ opacity:.5; } .hero--platform .crumbs .current{ color:rgba(243,247,245,.88); } .cta--light{ background:var(--bg-soft); color:var(--ink); } .cta--light::before{ background: radial-gradient(80% 120% at 50% 0%, rgba(0,183,79,.10), transparent 60%), radial-gradient(60% 90% at 80% 100%, rgba(0,178,169,.08), transparent 60%); } .cta--light .eyebrow{ color:var(--green-ink) !important; } .cta--light h2{ color:var(--ink); } .cta--light .lead{ color:var(--ink-2); } .cta--light .cta-fine{ color:var(--muted); } .cta--light .pilot-note{ color:var(--muted); } .problem-split{ display:grid; grid-template-columns:1fr; gap:2.2rem; align-items:center; } .problem-split .sec-head{ max-width:none; margin-bottom:0; } .problem-split + .grid3, .problem-split + .grid3cols, .problem-split + .grid4, .problem-split + .grid2{ margin-top:3rem; } @media (min-width:900px){ .problem-split{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:3.2rem; } } .problem-split .pb-media{ margin:0; } .pb-media{ margin-top:2.4rem; background:#070B0A; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); } .pb-media video{ display:block; width:100%; height:auto; } /* Exact TrialMiner how-it-works media layout from platform-trialminer.html. */ .tm-how-intro{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; } @media (min-width:861px){ .tm-how-intro{ grid-template-columns:1.05fr 1fr; gap:2.8rem; } } .tm-how-intro .sec-head{ margin-bottom:0; max-width:none; } .tm-how-media{ margin:0; border-radius:var(--radius); overflow:hidden; background:#070B0A; border:1px solid var(--d-card-border); box-shadow:0 18px 50px rgba(0,0,0,.35); } .tm-how-media video{ display:block; width:100%; height:auto; } .dark .tile p a{ color:var(--green-bright); text-decoration:underline; text-underline-offset:2px; } .dark .tile p a:hover, .dark .tile p a:focus-visible{ color:#a7f7c7; }