/* ========================================================================== Simian Website — Global Stylesheet ========================================================================== */ /* ---------- Design tokens ------------------------------------------------- */ :root { /* Brand colors (exact, from variables) */ --simian-blue: #043f57; /* "Simian Blue" — primary dark brand color */ --color-2: #5eb3e4; /* "Color 2" — light blue accent */ /* Approximate accents — TODO: confirm exact hex from when quota frees */ --simian-green: #34b78f; /* placeholder green used in logo / "Learn More" */ --accent-green: #4afa60; /* bright CTA green ( "See Reels in Action") */ --ink: #000000; --white: #ffffff; --bg: #ffffff; --muted: #6b7a80; /* Typography — family */ --font-sans: "Basis Grotesque Pro", "Helvetica Neue", Arial, "Segoe UI", system-ui, sans-serif; /* Type scale (real px = ÷ 2) */ --fs-h1: 67.5px; /* "Simian H1" 135 */ --fs-h2: 55px; /* "Simian H2" 110 */ --fs-h3: 37.5px; /* "Simian H3" 75 */ --fs-h4: 32.5px; /* "Simian H4" 65 */ --fs-body: 24px; /* "Simian Body" 48 */ --fs-body-sm: 18px; /* "Simian Body - Small" 36 */ --fs-nav: 20px; /* Nav / button text 40 */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; /* falls back to 400 face; heavier synthesis */ --weight-bold: 700; /* maps to basis-grotesque-bold-pro.woff */ /* Layout */ --container-max: 1450px; /* nav content width 2899 ÷ 2 */ --container-pad: 60px; --radius-nav: 10px; /* 20 ÷ 2 */ --radius-pill: 100px; } /* ---------- Fonts --------------------------------------------------------- */ /* Basis Grotesque Pro is a COMMERCIAL font. The licensed .woff files live in assets/fonts/ (basis-grotesque-{light,regular,bold}-pro.woff) and are wired below. If you later export .woff2 versions, add them as an additional src before the .woff for smaller payloads. */ @font-face { font-family: "Basis Grotesque Pro"; src: url("../fonts/basis-grotesque-light-pro.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Basis Grotesque Pro"; src: url("../fonts/basis-grotesque-regular-pro.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Basis Grotesque Pro"; src: url("../fonts/basis-grotesque-bold-pro.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } /* ---------- Reset --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-weight: var(--weight-light); color: var(--ink); /* Soft blue → white gradient that begins at the very top of the page (behind the top bar + nav), fading to white through the hero. */ background-color: var(--bg); /* home Background (3673:457): a clean cool-gray -> white vertical fade, NO radial glow. Top ~#d4dee2 (≈17% toward #043f57), white by ~640px. */ background-image: linear-gradient(180deg, #d4dee2 0, #e8eef1 180px, #ffffff 230px); background-repeat: no-repeat; line-height: 1.2; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---------- Dark-hero pages --------------------------------------------- CONVENTION (be mindful going forward): pages whose hero sits on a dark gradient must NOT paint that gradient on the hero section itself — that leaves a light band between the AI bar and the hero (the header floats on the light ). Instead, mirror the home page: the gradient lives on so it is anchored to the very top of the page, behind the top bar and the floating nav card, then fades to white through the hero. Usage: set $body_class = 'hero-dark hero-dark--'; in the page and keep the hero section background transparent. --hero-white = the pixel distance from the page top where the gradient reaches white; set it to roughly header(136px) + hero height for each page. */ body.hero-dark { background-color: var(--white); /* Solid #043f57 hero with a HARD edge into the next (white) section — the gradient holds teal to the section boundary then drops to white in 2px. */ background-image: linear-gradient(180deg, #043f57 0, #043f57 calc(var(--hero-white, 760px) - 2px), var(--white) var(--hero-white, 760px)); background-repeat: no-repeat; } /* Enterprise + Ecosystem heroes: same teal #043f57 -> light blue-gray #a4b9c2 gradient as About, then a HARD edge into the white section below. */ body.hero-dark--ent { --hero-white: 756px; background-image: linear-gradient(180deg, #043f57 0, #a4b9c2 calc(var(--hero-white) - 2px), var(--white) var(--hero-white)); } body.hero-dark--eco { --hero-white: 626px; background-image: linear-gradient(180deg, #043f57 0, #a4b9c2 calc(var(--hero-white) - 2px), var(--white) var(--hero-white)); } body.hero-dark--ms { --hero-white: 760px; /* MS hero (3673:773): teal at top fading to white, no #001720/#7fa0ac band */ background-image: linear-gradient(180deg, #043f57 0, #2c6178 250px, #93b2c1 520px, var(--white) var(--hero-white)); } /* About hero ( ABOUT_Desktop): teal #043f57 -> light blue-gray #a4b9c2 gradient (NOT solid), then a HARD edge into the white section. */ body.hero-dark--about { /* The About hero owns its gradient (see .about-hero) so the teal always covers the hero at ANY width instead of a fixed hard-edge that stranded content on narrow desktops. The body only needs teal behind the top bar + nav, then white. */ background-image: linear-gradient(180deg, #043f57 0, #043f57 260px, var(--white) 260px); } /* Enterprise "Everything You Need to Run at Scale" — subtle blue tint -> white ( 3673:1175). */ .ent-features { background: linear-gradient(180deg, #d4dee3 0, var(--white) 261px); background-repeat: no-repeat; } /* Customers hero ( 3673:7602): black -> #043f57 teal, held dark to the hero bottom, then a HARD edge into the white quote section (no soft fade). */ body.hero-dark--customers { --hero-white: 720px; background-image: linear-gradient(180deg, #000000 0, #043f57 340px, #043f57 706px, var(--white) 706px); } body.hero-dark--thankyou { --hero-white: 620px; } /* Content template (legal / privacy / GDPR): dark #001720 -> teal gradient anchored to the very top of the page, fading to white where the article body begins (just below the page title). */ body.hero-dark--content { --hero-white: 304px; background-image: linear-gradient(180deg, #001720 0, #043f57 200px, #043f57 calc(var(--hero-white) - 2px), var(--white) var(--hero-white)); } /* Comparison hero: teal at top (behind nav) fading to white, matching the COMPARISON-* design overlay (from-white ~44% -> #043f57 at top). */ body.hero-dark--compare { --hero-white: 900px; background-image: linear-gradient(180deg, #043f57 0, #2c6178 300px, #93b2c1 620px, var(--white) var(--hero-white)); } /* Resources hero is its own solid block: teal at top -> black at bottom, then a hard cut to white where the "Fits" section begins. */ body.hero-dark--resources { --hero-white: 1400px; background-image: linear-gradient(180deg, #06506b 0, #043f57 300px, #072a38 760px, #01090d calc(var(--hero-white) - 1px), var(--white) var(--hero-white)); } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4, p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } /* ---------- Typography helpers ------------------------------------------- */ .h1 { font-size: var(--fs-h1); font-weight: 300; line-height: 1; } .h2 { font-size: var(--fs-h2); font-weight: 300; line-height: 1; } .h3 { font-size: var(--fs-h3); font-weight: 300; line-height: 1; } .h4 { font-size: var(--fs-h4); font-weight: 300; line-height: 1; } .body { font-size: var(--fs-body); line-height: 1.2; } .body-sm { font-size: var(--fs-body-sm); line-height: 1.3; } /* ---------- Layout -------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* ========================================================================== AI Top Bar node 3673:483 — full-width dark bar, centered white text, green "Learn More" link. ========================================================================== */ .topbar { background: var(--simian-blue); color: var(--white); text-align: center; font-size: 15px; font-weight: 300; padding: 9px 16px; } .topbar a { color: var(--accent-green); /* "Learn More." = #4afa60 */ font-weight: var(--weight-regular); margin-left: 6px; } .topbar a:hover { text-decoration: underline; } /* ========================================================================== Header / Nav node 3673:463 — white rounded bar, soft shadow, logo left, links + Free Trial pill right. ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: transparent; padding: 12px var(--container-pad); } .nav { position: relative; max-width: var(--container-max); margin-inline: auto; background: var(--white); border-radius: var(--radius-nav); box-shadow: 0 0 20px rgba(0, 0, 0, 0.10); display: flex; align-items: center; justify-content: space-between; padding: 16px 30px; gap: 24px; } .nav__logo { display: flex; align-items: center; } .nav__logo img { height: 44px; width: auto; } /* logo 98 ÷ 2 ≈ 49, trimmed for optical whitespace */ .nav__logo-fallback { /* shown until real logo asset is added */ font-size: 26px; font-weight: 400; color: var(--simian-blue); letter-spacing: -0.5px; } .nav__links { display: flex; align-items: center; gap: 34px; } .nav__links a { font-size: var(--fs-nav); font-weight: 400; color: var(--ink); } .nav__links a:hover { color: var(--simian-blue); } .nav__cta { display: inline-flex; align-items: center; justify-content: center; background: var(--simian-blue); color: var(--white); font-size: var(--fs-nav); font-weight: 400; border-radius: var(--radius-pill); padding: 9px 18px; /* snug pill to match design (~115px wide) */ min-height: 43px; } .nav__cta:hover { background: #06576f; color: var(--white); } /* Beat `.nav__links a` specificity so the pill / mega-CTA text stays white */ .nav__links a.nav__cta, .nav__links a.nav__cta:hover, .nav__links a.mega__cta, .nav__links a.mega__cta:hover { color: var(--white); } /* The mega-menu trigger is a