/* Theme Name: MeldLabs Theme URI: https://meldlabs.io Author: Meld Labs Author URI: https://meldlabs.io Description: The MeldLabs.io marketing site — people-first automation solutions. Hand-built from the approved "Control Panel" design direction. Version: 0.1.4 Requires at least: 6.4 Requires PHP: 8.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: meldlabs */ :root{ --bg:#f5f7f8; --surface:#ffffff; --ink:#20242e; --ink-2:#5b6270; --edge:#dde2e8; --teal:#3687a1; --teal-deep:#28687d; --teal-tint:#e3eff3; --indigo:#2b318c; --indigo-tint:#e6e7f5; --mint:#c7e8e2; --mint-deep:#20504a; --on-accent:#ffffff; --sans:"Avenir Next","Avenir","Helvetica Neue",Helvetica,Arial,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,monospace; } @media (prefers-color-scheme: dark){ :root{ --bg:#12151f; --surface:#1b1f2c; --ink:#e8ebf0; --ink-2:#98a0b0; --edge:#2b3040; --teal:#56acb2; --teal-deep:#7cc4c9; --teal-tint:#1c2c33; --indigo:#8d93e8; --indigo-tint:#232744; --mint:#c7e8e2; --mint-deep:#c7e8e2; --on-accent:#12151f; } } *{ box-sizing:border-box; } /* A page builder puts its own class on (e.g. .elementor-kit-19) and sets the page background there, which outranks a plain `body` rule. Without this, the theme's text colors land on the builder's background. */ body{ margin:0; background:var(--bg)!important; color:var(--ink)!important; font-family:var(--sans); line-height:1.6; } img{ max-width:100%; height:auto; } a{ color:inherit; } .wrap{ max-width:1120px; margin:0 auto; padding:0 32px; } /* nav */ .site-nav{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; } .logo{ color:var(--ink)!important; font-weight:700; font-size:1.05rem; letter-spacing:.02em; text-decoration:none; display:flex; align-items:center; gap:9px; } .logo .marks{ display:inline-flex; } .logo .marks i{ width:11px; height:15px; border-radius:3px; transform:skewY(-8deg); display:inline-block; } .logo .marks i:nth-child(1){ background:var(--mint); } .logo .marks i:nth-child(2){ background:var(--teal); margin-left:-4px; } .logo .marks i:nth-child(3){ background:var(--indigo); margin-left:-4px; } .site-nav ul{ display:flex; gap:24px; list-style:none; margin:0; padding:0; align-items:center; } .site-nav ul a{ font-size:.88rem; color:var(--ink-2); text-decoration:none; } .site-nav ul a:hover, .site-nav ul a:focus-visible, .site-nav ul li.current-menu-item > a{ color:var(--teal); } .nav-btn{ background:var(--indigo); color:var(--on-accent) !important; padding:9px 16px; border-radius:8px; font-weight:600; } .nav-btn:hover{ opacity:.88; } /* type + sections. Headings force their color: a page builder's global stylesheet targets h1-h6 through a body-class selector and loads after this file, so an inherited or plainly-declared color would lose to it. */ .kicker{ color:var(--teal); font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:12px; } body h1{ color:var(--ink)!important; font-size:clamp(2.2rem,4.6vw,3.2rem); font-weight:700; line-height:1.08; letter-spacing:-.02em; margin:0 0 18px; text-wrap:balance; } body h1 span{ color:var(--teal)!important; } body h2{ color:var(--ink)!important; font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; letter-spacing:-.01em; margin:0 0 12px; text-wrap:balance; } .lede{ color:var(--ink-2); font-size:1.08rem; margin:0 0 30px; max-width:34em; } .sub{ color:var(--ink-2); max-width:42em; margin:0 0 40px; } section{ padding:72px 0; } .pill{ display:inline-block; background:var(--teal-tint); color:var(--teal); font-size:.76rem; font-weight:600; letter-spacing:.04em; padding:5px 12px; border-radius:999px; margin-bottom:18px; } /* buttons */ .btn{ display:inline-block; text-decoration:none; font-weight:600; font-size:.92rem; padding:13px 22px; border-radius:9px; } .btn-primary{ background:var(--teal); color:var(--on-accent); } .btn-primary:hover{ background:var(--teal-deep); } .btn-quiet{ color:var(--teal); } .cta-row{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; } /* home hero */ .hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding:72px 0 80px; } .tiles{ display:grid; gap:16px; } .tile{ background:var(--surface); border:1px solid var(--edge); border-radius:14px; padding:20px 22px; display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; text-decoration:none; box-shadow:0 14px 34px -26px rgba(23,28,58,.45); transition:transform .18s ease, border-color .18s ease; } .tile:hover{ transform:translateY(-2px); border-color:var(--teal); } .tile .mk{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:.8rem; } .tile.t-mint .mk{ background:var(--mint); color:#20504a; } .tile.t-teal .mk{ background:var(--teal-tint); color:var(--teal); } .tile.t-indigo .mk{ background:var(--indigo); color:var(--on-accent); } body .tile h3{ color:var(--ink)!important; margin:0 0 2px; font-size:1rem; font-weight:700; } .tile p{ margin:0; font-size:.86rem; color:var(--ink-2); } .tile .go{ color:var(--teal); font-weight:700; } /* home app rows */ .approw{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:56px 0; border-top:1px solid var(--edge); } .approw:first-of-type{ border-top:none; padding-top:0; } .approw.flip > .visual{ order:1; } .visual{ border:1px solid var(--edge); border-radius:14px; background:var(--surface); aspect-ratio:4/3; position:relative; overflow:hidden; } .visual .glass{ position:absolute; width:44%; aspect-ratio:1/1.5; border-radius:16px; transform:skewY(-8deg); } body .approw h3{ color:var(--ink)!important; font-size:1.4rem; font-weight:700; margin:0 0 12px; } body .approw h3 small{ color:var(--teal)!important; display:block; font-family:var(--mono); font-weight:600; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:8px; } .approw p{ color:var(--ink-2); margin:0 0 16px; } .approw ul{ margin:0 0 20px; padding:0; list-style:none; color:var(--ink-2); font-size:.94rem; } .approw li{ padding:5px 0; } .approw li::before{ content:"\2713"; color:var(--teal); font-weight:700; margin-right:9px; } .more{ font-size:.9rem; font-weight:600; color:var(--teal); text-decoration:none; } .more::after{ content:" \2192"; } /* app page hero */ .apphero{ padding:76px 0 64px; max-width:46em; } .apphero .appmark{ width:52px; height:52px; border-radius:13px; display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:1rem; margin-bottom:22px; } .appmark.m-mint{ background:var(--mint); color:#20504a; } .appmark.m-teal{ background:var(--teal-tint); color:var(--teal); } .appmark.m-indigo{ background:var(--indigo); color:var(--on-accent); } /* feature grid */ .feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .feat{ background:var(--surface); border:1px solid var(--edge); border-radius:14px; padding:24px; } body .feat h3{ color:var(--ink)!important; margin:0 0 8px; font-size:1rem; font-weight:700; } .feat p{ margin:0; color:var(--ink-2); font-size:.9rem; } /* numbered walkthrough */ .walk{ counter-reset:w; max-width:46em; } .wstep{ display:grid; grid-template-columns:auto 1fr; gap:20px; padding:22px 0; border-top:1px solid var(--edge); counter-increment:w; } .wstep::before{ content:counter(w, decimal-leading-zero); font-family:var(--mono); font-weight:700; color:var(--teal); font-size:.9rem; padding-top:3px; } body .wstep h3{ color:var(--ink)!important; margin:0 0 6px; font-size:1.02rem; font-weight:700; } .wstep p{ margin:0; color:var(--ink-2); font-size:.94rem; } /* highlight band */ .bandc{ background:var(--indigo); color:var(--on-accent); border-radius:18px; padding:44px 46px; display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; } body .bandc h2{ color:var(--on-accent)!important; margin:0 0 8px; } .bandc p{ margin:0; opacity:.85; max-width:38em; } .bandc .btn{ background:var(--surface); color:var(--ink); white-space:nowrap; } /* generic page content (fallback) */ .entry{ max-width:46em; padding:56px 0; } body .entry h1{ color:var(--ink)!important; font-size:clamp(1.8rem,3.6vw,2.6rem); } /* footer */ .site-footer{ border-top:1px solid var(--edge); padding:36px 0 56px; font-size:.82rem; color:var(--ink-2); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:40px; } @media (max-width:880px){ .hero,.approw{ grid-template-columns:1fr; gap:32px; } .approw.flip > .visual{ order:0; } .feats{ grid-template-columns:1fr; } .bandc{ grid-template-columns:1fr; } .site-nav ul{ display:none; } }