/*
Theme Name: Helix
Theme URI: https://helix-ai.org/
Author: Helix
Description: Helix marketing site. Home page is a fixed 1920x1080 artboard, scaled to fit the viewport.
Version: 1.2.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: Proprietary
Text Domain: helix
*/

/* ==========================================================================
   §3 Fonts
   Google Fonts (Alexandria, Encode Sans Semi Expanded) are enqueued in
   functions.php. SF Pro is self-hosted from the supplied SF-Pro.ttf,
   delivered as fonts/SF-Pro.woff2: a Latin subset of the same variable font
   (weight + optical-size axes kept, width pinned at 100), 77 KB instead of
   22 MB. Preloaded in functions.php.
   ========================================================================== */
@font-face{font-family:"SF Pro Text";src:url("fonts/SF-Pro.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"SF Pro Display";src:url("fonts/SF-Pro.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"SF Pro";src:url("fonts/SF-Pro.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* ==========================================================================
   §2 Design tokens
   ========================================================================== */
:root{
  /* colour */
  --helix-black:#000000; --helix-white:#ffffff;
  --helix-blue:#00A6FF; --helix-green:#00DEA3;
  --ink-900:#272727; --ink-800:#2E2E2E; --ink-700:#393939; --ink-600:#484848;
  --grey-300:#C9C9C9; --grey-200:#DADADA; --grey-50:#FAFAFA;
  --text-primary:#000000; --text-secondary:#484848; --text-inverse:#ffffff;
  --text-link:#00A6FF; --text-link-hover:#000000;
  --surface-page:#ffffff; --surface-inverse:#2E2E2E; --surface-sunken:#DADADA;
  --accent-primary:#00A6FF; --accent-secondary:#00DEA3;
  --border-hairline:#C9C9C9;
  --action-bg:#2E2E2E; --action-bg-hover:#000000; --action-fg:#ffffff;
  --marker-bg:#00A6FF; --marker-fg:#ffffff;
  /* type */
  --font-display:"Alexandria","SF Pro Display",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-ui:"SF Pro Text","SF Pro",-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",sans-serif;
  --font-technical:"Encode Sans Semi Expanded","SF Pro Text",-apple-system,sans-serif;
  --text-xs:20px; --text-sm:25px; --text-base:26px; --text-md:30px; --text-lg:40px; --text-xl:64px;
  --leading-flat:1; --leading-copy:1.3; --tracking-technical:0.06em;
  /* geometry */
  --radius-sm:2px; --radius-md:10px; --radius-full:999px;
  /* motion */
  --duration-instant:90ms; --duration-fast:140ms; --ease-standard:cubic-bezier(.4,0,.2,1); --press-scale:.985;
}
a{color:var(--text-link);text-decoration:none} a:hover{color:var(--text-link-hover)}
*{box-sizing:border-box} body{margin:0}
*::before,*::after{box-sizing:border-box}

html,body{background:var(--surface-sunken)}
body{font-family:var(--font-ui);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.wp-site-blocks{margin:0;padding:0}

/* Accessibility helper used by WordPress' skip link */
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{clip-path:none;height:auto;width:auto;margin:0;padding:12px 16px;left:8px;top:8px;z-index:100000;background:var(--helix-white);color:var(--text-primary);font:400 16px/1 var(--font-ui)}

/* ==========================================================================
   Layout model: 1920x1080 artboard on a #DADADA stage
   ========================================================================== */
.helix-stage{
  position:relative;
  width:100%;
  height:calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:var(--surface-sunken);
  margin:0;
}
.helix-page{
  position:relative;
  flex:none;
  width:1920px;height:1080px;
  overflow:hidden;
  background:var(--surface-page);
  margin:0; /* centred by the stage (flex); auto margins would break centring on overflow */
  transform-origin:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
}
@media (min-width:900px){
  body{overflow:hidden}
}
.helix-header,.helix-main,.helix-content,.helix-home{margin:0;padding:0}

/* ==========================================================================
   §4 Text styles
   ========================================================================== */
.helix-hero,.helix-h2,.helix-h3,.helix-body,.helix-tech{margin:0;text-wrap:pretty}
.helix-hero{font-family:var(--font-ui);font-size:var(--text-xl);font-weight:400;line-height:1.14}
.helix-h2{font-family:var(--font-ui);font-size:var(--text-lg);font-weight:400;line-height:1.15}
.helix-hero strong,.helix-h2 strong{font-weight:700}
.helix-h3{font-family:var(--font-ui);font-size:var(--text-md);font-weight:700;line-height:1}
.helix-body{font-family:var(--font-ui);font-size:var(--text-base);font-weight:400;line-height:var(--leading-copy)}
.helix-tech{font-family:var(--font-technical);font-size:var(--text-sm);font-weight:400;line-height:1;letter-spacing:var(--tracking-technical);text-transform:uppercase}
.helix-tech--sm{font-size:18px}

.helix-primary{color:var(--text-primary)}
.helix-secondary{color:var(--text-secondary)}
.helix-inverse{color:var(--text-inverse)}

/* ==========================================================================
   §4 Top strand rule
   ========================================================================== */
.helix-strand{position:absolute;left:0;top:0;width:1920px;height:6px;margin:0;background:var(--helix-green)}
.helix-strand::before{content:"";position:absolute;left:0;top:0;width:1190.4px;height:100%;background:var(--helix-blue)}

/* ==========================================================================
   §4 Nav bar
   ========================================================================== */
.helix-nav{
  position:absolute;left:0;top:6px;width:1920px;margin:0;
  padding:47px 64px;
  display:flex;justify-content:space-between;align-items:center;
}
.helix-lockup{display:flex;align-items:center;height:62px;color:var(--text-primary);text-decoration:none}
.helix-lockup:hover{color:var(--text-primary)}
.helix-lockup__mark{display:block;height:62px;width:auto;max-width:none}
.helix-lockup__rule{display:block;flex:none;align-self:stretch;width:1px;margin:3.7px 26px;background:var(--border-hairline)}
.helix-lockup__tag{display:flex;flex-direction:column;gap:4.3px;font-family:var(--font-ui);font-size:18.6px;line-height:1;color:var(--text-primary)}
.helix-lockup__tag span{font-weight:400}
.helix-lockup__tag strong{font-weight:700}

.helix-nav__links,
.helix-nav__links .wp-block-navigation__container{display:flex;align-items:center;gap:68px;margin:0;padding:0;list-style:none}
.helix-nav__links .wp-block-navigation-item{margin:0;padding:0;list-style:none}
.helix-nav__links a{
  display:block;
  font-family:var(--font-ui);font-size:var(--text-base);font-weight:400;line-height:1;
  color:var(--text-primary);text-decoration:none;
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:border-color var(--duration-fast) var(--ease-standard);
}
.helix-nav__links a:hover,
.helix-nav__links a:focus-visible{color:var(--text-primary);border-bottom-color:var(--accent-primary)}

/* ==========================================================================
   §4 Buttons
   ========================================================================== */
.helix-btn{margin:0;display:inline-flex}
.helix-btn .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;
  height:74px;padding:0 23px;
  border-radius:var(--radius-md);
  border:1px solid transparent;
  background:var(--action-bg);color:var(--action-fg);
  font-family:var(--font-ui);font-size:var(--text-md);font-weight:700;line-height:1;
  white-space:nowrap;text-decoration:none;
  transition:background-color var(--duration-fast) var(--ease-standard),transform var(--duration-instant) var(--ease-standard);
}
.helix-btn .wp-block-button__link:hover{background:var(--action-bg-hover);color:var(--action-fg)}
.helix-btn .wp-block-button__link:active{transform:scale(var(--press-scale))}
.helix-btn--primary .wp-block-button__link{width:305px}
.helix-btn--ghost .wp-block-button__link{background:transparent;color:var(--text-primary);padding:0 12px}
.helix-btn--ghost .wp-block-button__link:hover{background:transparent;color:var(--text-primary);opacity:.6}

/* Arrow link */
.helix-arrow{margin:0;font-family:var(--font-ui);font-size:var(--text-base);font-weight:700;white-space:nowrap}
.helix-arrow a{color:var(--text-link);text-decoration:none}
.helix-arrow a:hover{color:var(--text-link-hover)}

/* Numbered marker */
.helix-marker{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:54px;height:54px;margin:0;
  border-radius:var(--radius-full);
  font-family:var(--font-ui);font-size:26px;font-weight:700;line-height:1;
}
.helix-marker--blue{background:var(--marker-bg);color:var(--marker-fg)}
.helix-marker--green{background:var(--helix-green);color:var(--helix-black)}

/* Dividers (core/separator <hr>) */
.helix-rule,.helix-rulecols__rule{display:block;margin:0;padding:0;border:0;opacity:1;background:var(--border-hairline);color:transparent}

/* ==========================================================================
   §5 Home page: absolute positions on the 1920x1080 artboard
   ========================================================================== */
.helix-page .helix-eyebrow{position:absolute;left:87px;top:212px}
.helix-page .helix-hero{position:absolute;left:87px;top:262px;max-width:1245px}
.helix-page .helix-cta-row{position:absolute;left:87px;top:442px;margin:0;display:flex;flex-wrap:nowrap;gap:28px;align-items:center}
.helix-page .helix-rule--v{position:absolute;left:1392px;top:196px;width:1px;height:366px}
.helix-page .helix-credential{
  position:absolute;left:1452px;top:196px;width:381px;height:366px;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
}
.helix-seal{margin:0;width:266px;height:230px;flex:none}
.helix-seal img{display:block;width:266px;height:230px}
.helix-credential .helix-tech{text-align:center}
.helix-page .helix-rule--h{position:absolute;left:87px;top:596px;width:1746px;height:1px}

/* Ink band */
.helix-page .helix-band{position:absolute;left:0;top:648px;width:1920px;height:432px;margin:0}
.helix-band{background:var(--surface-inverse);overflow:hidden}
.helix-band::before{
  content:"";position:absolute;right:-140px;top:-96px;
  width:527.27px;height:620px;
  background:url("assets/mark-helix-band.svg") no-repeat right top / auto 620px;
  opacity:.12;pointer-events:none;
}
.helix-page .helix-band__intro{position:absolute;left:87px;top:72px;width:500px}
.helix-band__intro{margin:0;display:flex;flex-direction:column;gap:26px}
.helix-band__intro .helix-h2{max-width:470px}
.helix-page .helix-rulecols{position:absolute;left:651px;top:72px;width:1182px}
.helix-rulecols{margin:0;display:grid;grid-template-columns:1fr 1px 1fr;column-gap:64px;align-items:start}
.helix-rulecols__col{margin:0;display:flex;flex-direction:column;gap:24px}
.helix-rulecols__rule{width:1px;height:244px;background:var(--ink-600)}
.helix-rulecols .helix-h3{line-height:1.2}
.helix-rulecols .helix-body{color:var(--grey-300);max-width:500px}
.helix-page .helix-band__foot{position:absolute;left:87px;top:356px}
.helix-band__foot{color:var(--grey-300)}

/* ==========================================================================
   Mobile (<900px): no scaling, normal stacked flow, type x0.6
   ========================================================================== */
@media (max-width:899.98px){
  html,body{background:var(--surface-page)}
  .helix-stage{display:block;height:auto;overflow:visible;background:var(--surface-page)}
  .helix-page{width:100%;height:auto;transform:none!important;box-shadow:none}

  .helix-strand{position:relative;width:100%}
  .helix-strand::before{width:62%}

  .helix-nav{position:static;width:auto;padding:28px 24px;flex-wrap:wrap;gap:20px 24px}
  .helix-lockup{height:37.2px}
  .helix-lockup__mark{height:37.2px}
  .helix-lockup__rule{margin:2.2px 15.6px}
  .helix-lockup__tag{font-size:11.2px;gap:2.6px}
  .helix-nav__links,.helix-nav__links .wp-block-navigation__container{gap:40.8px}
  .helix-nav__links a{font-size:15.6px;padding-bottom:2.4px}

  .helix-hero{font-size:38.4px}
  .helix-h2{font-size:24px}
  .helix-h3{font-size:18px}
  .helix-body{font-size:15.6px}
  .helix-tech{font-size:15px}
  .helix-tech--sm{font-size:10.8px}
  .helix-arrow{font-size:15.6px}
  .helix-marker{width:32.4px;height:32.4px;font-size:15.6px}
  .helix-btn .wp-block-button__link{height:44.4px;padding:0 13.8px;font-size:18px}
  .helix-btn--primary .wp-block-button__link{width:183px}
  .helix-btn--ghost .wp-block-button__link{padding:0 7.2px}

  .helix-page .helix-eyebrow,
  .helix-page .helix-hero,
  .helix-page .helix-cta-row,
  .helix-page .helix-rule--v,
  .helix-page .helix-credential,
  .helix-page .helix-rule--h,
  .helix-page .helix-band,
  .helix-page .helix-band__intro,
  .helix-page .helix-rulecols,
  .helix-page .helix-band__foot{position:static;left:auto;top:auto;width:auto;height:auto;max-width:none}

  .helix-page .helix-eyebrow{margin:24px 24px 0}
  .helix-page .helix-hero{margin:16px 24px 0}
  .helix-page .helix-cta-row{margin:24px 24px 0;flex-wrap:wrap;gap:16.8px}
  .helix-page .helix-rule--v{height:1px;margin:32px 24px 0}
  .helix-page .helix-credential{margin:32px 24px 0;gap:13.2px}
  .helix-seal,.helix-seal img{width:159.6px!important;height:138px!important}
  .helix-page .helix-rule--h{margin:32px 24px 0}

  .helix-page .helix-band{position:relative;margin-top:32px;padding:43.2px 24px}
  .helix-band::before{right:-84px;top:-57.6px;width:316.2px;height:372px;background-size:auto 372px}
  .helix-band__intro{gap:15.6px}
  .helix-band__intro .helix-h2{max-width:none}
  .helix-page .helix-rulecols{margin-top:38.4px;grid-template-columns:1fr;row-gap:24px}
  .helix-rulecols__col{gap:14.4px}
  .helix-rulecols__rule{width:100%;height:1px}
  .helix-page .helix-band__foot{margin-top:38.4px}
  .helix-page .helix-band > *{position:relative}
}