/* ============================================================ GoBrain Design System · gobrain.css Single source of truth — tokens + components. Fonts (load in ): Plus Jakarta Sans (brand/UI) + JetBrains Mono (data/labels) ============================================================ */ :root{ /* ---- core palette ---- */ --ink:#16171A; /* primary dark surface + text */ --ink-2:#1E2024; /* raised dark surface */ --ink-3:#272A2F; /* hairlines on dark */ --paper:#F4F5F4; /* light surface */ --paper-2:#FCFCFB; /* cards on light */ --white:#FBFCFC; --mint:#2DE5A6; /* brand accent on dark */ --green:#06A972; /* brand accent on light */ --green-700:#057B54; /* pressed / deep */ --green-tint:#E4F7EF; /* green wash on light */ --green-ink:#0C2A1C; /* text on mint */ --node:#9DA1A6; /* scattered-data grey */ /* ---- text ---- */ --text:#16171A; --text-2:#46484D; --text-3:#6B6E73; --text-muted:#9A9DA3; --text-on-dark:#F4F5F4; --text-on-dark-2:#A9ADB3; --text-on-dark-3:#6E7177; /* ---- lines ---- */ --line:rgba(20,22,26,.10); --line-2:rgba(20,22,26,.16); --line-dark:rgba(255,255,255,.10); --line-dark-2:rgba(255,255,255,.18); /* ---- data-viz series (brand-harmonic) ---- */ --viz-1:#06A972; /* green */ --viz-2:#2477C9; /* trust blue */ --viz-3:#E0A23C; /* amber */ --viz-4:#7C6CD6; /* violet */ --viz-grid:rgba(20,22,26,.08); /* ---- spacing (4px base) ---- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; /* ---- radii ---- */ --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px; /* ---- shadow ---- */ --shadow-sm:0 1px 2px rgba(20,22,26,.06), 0 2px 6px rgba(20,22,26,.05); --shadow-md:0 6px 18px rgba(20,22,26,.08), 0 2px 6px rgba(20,22,26,.05); --shadow-lg:0 24px 60px rgba(20,22,26,.16), 0 8px 24px rgba(20,22,26,.08); --shadow-mint:0 10px 34px rgba(6,169,114,.30); /* ---- CTA accent — amber, booking CTAs ONLY (apply via .btn-cta) ---- */ --cta:#F59E0B; --cta-2:#FBBF24; --cta-ink:#241503; --shadow-cta:0 10px 34px rgba(245,158,11,.34); /* ---- type ---- */ --font:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --t-display:clamp(44px,6.4vw,82px); --t-h1:clamp(34px,4.4vw,56px); --t-h2:clamp(26px,3vw,38px); --t-h3:22px; --t-h4:17px; --t-body-lg:19px; --t-body:16px; --t-sm:14px; --t-xs:12.5px; --ease:cubic-bezier(.2,.7,.2,1); --nav-bg:rgba(244,245,244,.82); } /* ============ dark theme ============ */ html[data-theme="dark"]{ --ink:#0F1012; --paper:#121316; --paper-2:#1B1D21; --text:#F4F5F4; --text-2:#C2C5CB; --text-3:#9A9DA3; --text-muted:#6E7177; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17); --green:#2DE5A6; --green-700:#5BEFBC; --green-tint:rgba(45,229,166,.13); --green-ink:#0C2A1C; --nav-bg:rgba(16,17,20,.82); --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 8px 24px rgba(0,0,0,.5); --shadow-lg:0 30px 70px rgba(0,0,0,.62); } html{transition:background-color .35s var(--ease);} html[data-theme="dark"] .btn-primary{color:#fff;text-shadow:0 1px 2px rgba(4,50,34,.5);background:linear-gradient(150deg,rgba(91,239,188,.55),rgba(45,229,166,.32));border-color:rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -8px 18px rgba(0,60,40,.28),0 8px 26px rgba(45,229,166,.4);} html[data-theme="dark"] .btn-primary:hover{background:linear-gradient(150deg,rgba(120,247,205,.7),rgba(45,229,166,.5));box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 12px 32px rgba(45,229,166,.6);} html[data-theme="dark"] .btn-outline{border-color:var(--line-2);color:var(--text);} html[data-theme="dark"] .btn-outline:hover{background:var(--white);color:#16171A;border-color:var(--white);} html[data-theme="dark"] .badge{background:var(--green-tint);color:var(--green);} html[data-theme="dark"] .price.feature{border-color:rgba(45,229,166,.38);} html[data-theme="dark"] .avatar-accent{color:var(--green-ink);} /* ============ reset ============ */ *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} body{ margin:0;background:var(--paper);color:var(--text); font-family:var(--font);font-size:var(--t-body);line-height:1.55; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;} ::selection{background:var(--mint);color:var(--green-ink);} /* ============ type utilities ============ */ .font-mono{font-family:var(--mono);} .display{font-size:var(--t-display);font-weight:800;letter-spacing:-.035em;line-height:1.0;} .h1{font-size:var(--t-h1);font-weight:800;letter-spacing:-.03em;line-height:1.05;} .h2{font-size:var(--t-h2);font-weight:800;letter-spacing:-.022em;line-height:1.1;} .h3{font-size:var(--t-h3);font-weight:700;letter-spacing:-.015em;line-height:1.2;} .h4{font-size:var(--t-h4);font-weight:700;letter-spacing:-.01em;} .lead{font-size:var(--t-body-lg);color:var(--text-2);font-weight:500;} .small{font-size:var(--t-sm);} .muted{color:var(--text-3);} .eyebrow{ font-family:var(--mono);font-size:var(--t-xs);font-weight:500; letter-spacing:.22em;text-transform:uppercase;color:var(--green); } .text-balance{text-wrap:balance;} .text-pretty{text-wrap:pretty;} /* ============ layout ============ */ .container{max-width:1200px;margin:0 auto;padding:0 28px;} .container-narrow{max-width:920px;margin:0 auto;padding:0 28px;} .section{padding:var(--s9) 0;} .section-sm{padding:var(--s8) 0;} .stack-sm > * + *{margin-top:var(--s3);} .stack > * + *{margin-top:var(--s5);} .row{display:flex;align-items:center;gap:var(--s4);} .row-wrap{flex-wrap:wrap;} .grid{display:grid;gap:var(--s5);} .grid-2{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} /* dark surface helper */ .on-ink{background:var(--ink);color:var(--text-on-dark);} .on-ink .eyebrow{color:var(--mint);} .on-ink .muted{color:var(--text-on-dark-2);} /* ============ buttons ============ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-weight:700;font-size:15px;letter-spacing:-.01em; padding:13px 22px;border-radius:var(--r-md);border:1px solid transparent; transition:transform .15s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); white-space:nowrap; } .btn:active{transform:translateY(1px);} .btn svg{width:18px;height:18px;} .btn-primary{position:relative;overflow:hidden;color:var(--green-ink);text-shadow:none;background:rgba(45,229,166,.8);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 22px rgba(6,169,114,.28);} .btn-primary::before{display:none;} .btn-primary>*{position:relative;} .btn-primary,.btn-mint,.on-ink .btn-primary{transition:box-shadow .5s var(--ease), background .4s var(--ease), border-color .4s var(--ease), transform .15s var(--ease);} .btn-primary:hover{background:linear-gradient(150deg,rgba(80,240,188,.74),rgba(6,169,114,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -8px 16px rgba(4,70,48,.34),0 12px 30px rgba(6,169,114,.5);} .btn-ink{background:var(--ink);color:var(--white);} .btn-ink:hover{background:#000;} .btn-outline{background:transparent;border-color:var(--line-2);color:var(--text);} .btn-outline:hover{border-color:var(--ink);background:var(--ink);color:var(--white);} .btn-ghost{background:transparent;color:var(--text-2);padding-left:10px;padding-right:10px;} .btn-ghost:hover{color:var(--text);} .btn-lg{padding:16px 28px;font-size:16.5px;border-radius:14px;} .btn-sm{padding:9px 15px;font-size:13.5px;border-radius:10px;} /* on dark — liquid mint glass */ .on-ink .btn-primary,.btn-mint{position:relative;overflow:hidden;color:#fff;text-shadow:0 1px 2px rgba(4,50,34,.5);background:linear-gradient(150deg,rgba(91,239,188,.55),rgba(45,229,166,.32));-webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6);border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -8px 18px rgba(0,60,40,.28),0 8px 26px rgba(45,229,166,.4);} .btn-mint::before{content:"";position:absolute;left:0;right:0;top:0;height:48%;background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,0));border-radius:inherit;pointer-events:none;} .btn-mint>*{position:relative;} .on-ink .btn-primary:hover,.btn-mint:hover{background:linear-gradient(150deg,rgba(120,247,205,.7),rgba(45,229,166,.5));box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 12px 32px rgba(45,229,166,.6);} .on-ink .btn-outline{border-color:var(--line-dark-2);color:var(--text-on-dark);} .on-ink .btn-outline:hover{background:var(--white);color:var(--ink);border-color:var(--white);} /* light white-glass button */ .btn-glass{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);border:1px solid rgba(255,255,255,.7);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 18px rgba(0,0,0,.08);} .btn-glass:hover{background:rgba(255,255,255,.72);border-color:#fff;} html[data-theme="dark"] .btn-glass{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 20px rgba(0,0,0,.22);} html[data-theme="dark"] .btn-glass:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.46);} /* amber booking CTA — opt-in modifier; listed AFTER the theme overrides so it wins on any .btn flavor */ .btn-cta, .on-ink .btn-cta, html[data-theme="dark"] .btn-cta{ position:relative;overflow:hidden;color:var(--cta-ink);text-shadow:none; background:linear-gradient(150deg,rgba(251,191,36,.95),rgba(245,158,11,.88)); border:1px solid rgba(255,255,255,.38); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -8px 18px rgba(120,60,0,.22),var(--shadow-cta); } .btn-cta:hover, .on-ink .btn-cta:hover, html[data-theme="dark"] .btn-cta:hover{ background:linear-gradient(150deg,rgba(253,211,77,.98),rgba(251,191,36,.92)); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 12px 32px rgba(245,158,11,.5); } .btn-cta:focus-visible{outline:3px solid rgba(245,158,11,.45);outline-offset:2px;} /* ============ badges / pills ============ */ .badge{ display:inline-flex;align-items:center;gap:7px; font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em; padding:5px 12px;border-radius:var(--r-pill); background:var(--green-tint);color:var(--green-700); } .badge-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);} @keyframes gb-livedot{0%{box-shadow:0 0 0 0 rgba(45,229,166,.5);}70%{box-shadow:0 0 0 6px rgba(45,229,166,0);}100%{box-shadow:0 0 0 0 rgba(45,229,166,0);}} @media (prefers-reduced-motion: no-preference){ .badge-live::before{animation:gb-livedot 2s ease-out infinite;} } .badge-ink{background:var(--ink);color:var(--mint);} .badge-outline{background:transparent;border:1px solid var(--line-2);color:var(--text-3);} /* ============ cards ============ */ .card{ background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-xl); padding:var(--s6);box-shadow:var(--shadow-sm); } .card-flat{box-shadow:none;} .card-ink{background:var(--ink-2);border-color:var(--line-dark);color:var(--text-on-dark);} .card-hover{transition:transform .25s var(--ease), box-shadow .25s var(--ease);} .card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);} /* feature icon chip */ .icon-chip{ width:46px;height:46px;border-radius:13px;display:grid;place-items:center; background:var(--green-tint);color:var(--green-700);flex:none; } .icon-chip svg{width:23px;height:23px;} .card-ink .icon-chip{background:rgba(45,229,166,.14);color:var(--mint);} /* ============ inputs ============ */ .input{ width:100%;font-family:inherit;font-size:15px;color:var(--text); padding:13px 15px;border-radius:var(--r-md);border:1px solid var(--line-2); background:var(--white);transition:border-color .2s, box-shadow .2s; } .input::placeholder{color:var(--text-muted);} .input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(6,169,114,.16);} .field-label{font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:7px;display:block;} /* ============ KPI / metric ============ */ .kpi{padding:var(--s5);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);} .kpi .kpi-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);} .kpi .kpi-value{font-size:30px;font-weight:800;letter-spacing:-.03em;margin-top:8px;font-feature-settings:"tnum";} .kpi .kpi-delta{font-family:var(--mono);font-size:12.5px;font-weight:500;margin-top:8px;display:inline-flex;align-items:center;gap:5px;} .delta-up{color:var(--green-700);} .delta-down{color:#C2453C;} /* ============ tags row (data sources) ============ */ .chip{ display:inline-flex;align-items:center;gap:8px; padding:9px 16px;border-radius:var(--r-pill); border:1px solid var(--line);background:var(--paper-2); font-weight:600;font-size:14px;color:var(--text-2); } .chip .dot{width:9px;height:9px;border-radius:50%;flex:none;} /* ============ divider ============ */ .hr{height:1px;background:var(--line);border:0;margin:0;} .on-ink .hr{background:var(--line-dark);} /* ============ table ============ */ .table{width:100%;border-collapse:collapse;font-size:14px;} .table th{ text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--text-muted);font-weight:500; padding:10px 14px;border-bottom:1px solid var(--line); } .table td{padding:13px 14px;border-bottom:1px solid var(--line);color:var(--text-2);} .table tr:last-child td{border-bottom:0;} .table .num{font-family:var(--mono);font-feature-settings:"tnum";text-align:right;color:var(--text);} /* ============ nav ============ */ .nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:84px;} .nav-links{display:flex;align-items:center;gap:var(--s6);} .nav-links a{font-size:15px;font-weight:600;color:var(--text-2);transition:color .15s;} .nav-links a:hover{color:var(--text);} .brand-logo{height:30px;width:auto;} /* ============ footer ============ */ .footer{background:var(--ink);color:var(--text-on-dark-2);padding:var(--s9) 0 var(--s7);} .footer a{color:var(--text-on-dark-2);transition:color .15s;} .footer a:hover{color:var(--mint);} .footer .footcol h5{color:var(--white);font-size:13px;font-weight:700;letter-spacing:.01em;margin:0 0 14px;} .footer .footcol a{display:block;font-size:14px;padding:5px 0;} /* ============ reveal animation (progressive enhancement) ============ */ .reveal{opacity:1;} @media (prefers-reduced-motion: no-preference){ html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease), transform .7s var(--ease);} html.js .reveal.in{opacity:1;transform:none;} } /* ============ motion: data-flow mark + charts ============ */ .avatar-accent{background:var(--green);color:#fff;} @keyframes gb-travel{0%{opacity:0;offset-distance:0%;}15%{opacity:1;}80%{opacity:1;}100%{opacity:0;offset-distance:100%;}} @keyframes gb-hubpulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 7px rgba(45,229,166,.5));}50%{transform:scale(1.07);filter:drop-shadow(0 0 20px rgba(45,229,166,.92));}} @keyframes gb-draw{from{stroke-dashoffset:var(--len,1200);}to{stroke-dashoffset:0;}} @keyframes gb-floatbob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}} @keyframes gb-fadeup{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} .gb-flowdot{opacity:0;} @media (prefers-reduced-motion: no-preference){ .gb-flowdot{animation:gb-travel 2.6s linear infinite;} .gb-hub{animation:gb-hubpulse 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center;} .gb-float{animation:gb-floatbob 4.5s var(--ease) infinite;} .draw-line{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);} html.js .in .draw-line, html.js .draw-line.in{animation:gb-draw 1.6s var(--ease) forwards;} } /* ============ rising-arrow mark (the logo icon, in motion) ============ */ .gb-trendline{stroke-dasharray:none;} .cta-mark{filter:drop-shadow(0 0 22px rgba(45,229,166,.55));animation:gb-glow 2.8s ease-in-out infinite;} @keyframes gb-glow{0%,100%{filter:drop-shadow(0 0 16px rgba(45,229,166,.42));}50%{filter:drop-shadow(0 0 34px rgba(45,229,166,.85));}} @keyframes gb-trend{from{stroke-dashoffset:var(--len,132);}to{stroke-dashoffset:0;}} @keyframes gb-arrowpop{0%,55%{opacity:0;}100%{opacity:1;}} @media (prefers-reduced-motion: no-preference){ } /* ============ responsive ============ */ @media (max-width:960px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:1fr;} } @media (max-width:720px){ .container,.container-narrow{padding:0 20px;} .section{padding:var(--s8) 0;} .grid-2,.grid-4{grid-template-columns:1fr;} .nav-links{display:none;} .hide-mobile{display:none !important;} } /* ============ signal ripple (animated mark) ============ */ .sig-anim .sig-dot,.sig-anim .sig-r1,.sig-anim .sig-r2,.sig-anim .sig-r3{opacity:1;transform-box:fill-box;transform-origin:center;} @keyframes sig-ripple{0%{opacity:.12;}16%{opacity:1;}55%{opacity:.12;}100%{opacity:.12;}} @media (prefers-reduced-motion: no-preference){ .sig-anim .sig-dot{animation:sig-ripple 2.6s ease-in-out infinite;} .sig-anim .sig-r1{animation:sig-ripple 2.6s ease-in-out infinite .3s;} .sig-anim .sig-r2{animation:sig-ripple 2.6s ease-in-out infinite .6s;} .sig-anim .sig-r3{animation:sig-ripple 2.6s ease-in-out infinite .9s;} }