/* TubeGenix — "How it works" section Fonts: Space Grotesk (700/600/500/400) + JetBrains Mono. Load once in : */ .hiw { --violet:#5B3DF5; --violet-2:#7C5CFF; --orange:#FF5A2D; --teal:#0E8F7E; --teal-2:#34D9A8; --ink:#17150F; --body:#5c574f; --muted:#7a746c; --faint:#a09a92; --line:#ece9e3; --field:#e7e4de; --paper:#fbfaf9; --loop:7s; background:linear-gradient(180deg,#fff 0%,#faf9fd 100%); padding:96px 40px 110px; display:flex; flex-direction:column; align-items:center; gap:14px; font-family:'Space Grotesk', Helvetica, Arial, sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased; } .hiw-eyebrow { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#8b8781; } .hiw-title { margin:0; font-size:52px; font-weight:700; letter-spacing:-.038em; line-height:1.06; text-align:center; text-wrap:balance; } .hiw-title em { font-style:normal; color:var(--violet); } .hiw-sub { margin:0 0 46px; font-size:18px; line-height:1.5; color:var(--body); text-align:center; max-width:560px; text-wrap:pretty; } .hiw-grid { display:grid; grid-template-columns:repeat(3, minmax(0,340px)); gap:56px; align-items:start; position:relative; } .hiw-step { display:flex; flex-direction:column; gap:20px; position:relative; } .hiw-badge { position:absolute; top:-18px; left:-16px; width:46px; height:46px; border-radius:14px; z-index:2; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; color:#fff; animation:hiw-float 5s ease-in-out infinite; } .hiw-badge span { transform:rotate(8deg); } .hiw-step:nth-child(1) .hiw-badge { background:linear-gradient(135deg,var(--violet-2),#4318D9); box-shadow:0 8px 20px rgba(67,24,217,.28); } .hiw-step:nth-child(2) .hiw-badge { background:linear-gradient(135deg,#FF9A5A,var(--orange)); box-shadow:0 8px 20px rgba(255,90,45,.28); animation-delay:.4s; } .hiw-step:nth-child(3) .hiw-badge { background:linear-gradient(135deg,var(--teal-2),var(--teal)); box-shadow:0 8px 20px rgba(14,143,126,.28); animation-delay:.8s; } .hiw-card { position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px 24px 24px; box-shadow:0 18px 40px rgba(23,21,15,.07); display:flex; flex-direction:column; gap:16px; min-height:268px; } .hiw-card--clip { overflow:hidden; } .hiw-head { display:flex; flex-direction:column; gap:3px; } .hiw-kicker { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; } .hiw-step:nth-child(1) .hiw-kicker { color:var(--violet); } .hiw-step:nth-child(2) .hiw-kicker { color:var(--orange); } .hiw-step:nth-child(3) .hiw-kicker { color:var(--teal); } .hiw-h3 { font-size:19px; font-weight:700; letter-spacing:-.02em; } .hiw-p { font-size:13.5px; line-height:1.5; color:var(--muted); } .hiw-caption { font-size:14.5px; line-height:1.55; color:var(--body); text-align:center; padding:0 6px; text-wrap:pretty; } /* step 1 — signup form */ .hiw-field { display:flex; flex-direction:column; gap:6px; } .hiw-label { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); } .hiw-input { height:38px; border:1px solid var(--field); border-radius:9px; background:var(--paper); display:flex; align-items:center; padding:0 11px; overflow:hidden; } .hiw-typed { display:flex; align-items:center; white-space:nowrap; overflow:hidden; animation:hiw-type var(--loop) ease-in-out infinite; } .hiw-typed--late { animation-name:hiw-type-late; } .hiw-typed span { font-family:'JetBrains Mono',monospace; font-size:13px; color:#3a362f; } .hiw-dots { font-size:15px; letter-spacing:.22em; color:#3a362f; } .hiw-caret { width:1.5px; height:16px; background:var(--violet); margin-left:1px; animation:hiw-caret 1s steps(1) infinite; } .hiw-cta { position:relative; margin-top:2px; } .hiw-cta-ring { position:absolute; inset:0; border-radius:10px; border:2px solid var(--violet); animation:hiw-ring var(--loop) ease-in-out infinite; } .hiw-btn { height:42px; border-radius:10px; background:linear-gradient(135deg,var(--violet-2),#4E27E8); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:600; color:#fff; letter-spacing:-.01em; animation:hiw-press var(--loop) ease-in-out infinite; } /* step 2 — style picker */ .hiw-styles { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .hiw-style { border:1px solid var(--field); border-radius:12px; background:var(--paper); padding:11px; display:flex; flex-direction:column; gap:9px; position:relative; } .hiw-style--picked { animation:hiw-select var(--loop) ease-in-out infinite; } .hiw-style-top { display:flex; align-items:center; gap:7px; } .hiw-avatar { width:20px; height:20px; border-radius:50%; background:#FF7A3D; } .hiw-style--picked .hiw-avatar { background:var(--violet); } .hiw-line { height:7px; flex:1; border-radius:4px; background:var(--field); } .hiw-thumb { height:44px; border-radius:7px; background:repeating-linear-gradient(135deg,#efeeeb 0 8px,#e6e4e0 8px 16px); } .hiw-style--picked .hiw-thumb { background:repeating-linear-gradient(135deg,#ece9f9 0 8px,#e2ddf6 8px 16px); } .hiw-bar { height:6px; border-radius:4px; background:var(--field); } .hiw-bar--short { width:56%; background:#eeece8; } .hiw-bar--long { width:80%; } .hiw-tick { position:absolute; top:-9px; right:-9px; width:24px; height:24px; border-radius:50%; background:var(--violet); display:flex; align-items:center; justify-content:center; animation:hiw-check var(--loop) ease-in-out infinite; } .hiw-tags { display:flex; gap:7px; flex-wrap:wrap; } .hiw-tag { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.06em; color:var(--muted); background:#f4f2ef; border-radius:999px; padding:5px 10px; } .hiw-tag--on { color:var(--violet); background:#f1eefe; } .hiw-pointer { position:absolute; top:0; left:0; animation:hiw-cursor var(--loop) cubic-bezier(.6,.05,.25,1) infinite; filter:drop-shadow(0 2px 4px rgba(23,21,15,.25)); } /* step 3 — results */ .hiw-metric { display:flex; align-items:baseline; gap:10px; } .hiw-roll { height:34px; overflow:hidden; } .hiw-roll div { display:flex; flex-direction:column; animation:hiw-roll var(--loop) cubic-bezier(.65,0,.35,1) infinite; } .hiw-roll span { height:34px; line-height:34px; font-size:29px; font-weight:700; letter-spacing:-.04em; } .hiw-roll span:last-child { color:var(--teal); } .hiw-metric-label { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); } .hiw-chart { position:relative; height:88px; border-radius:12px; background:var(--paper); border:1px solid #f0eeea; overflow:hidden; } .hiw-chart svg { position:absolute; inset:0; width:100%; height:100%; } .hiw-chart-area { animation:hiw-fillup var(--loop) ease-in-out infinite; } .hiw-chart-line { stroke-dasharray:420; animation:hiw-draw var(--loop) ease-in-out infinite; } .hiw-progress { display:flex; align-items:center; gap:11px; } .hiw-progress-track { flex:1; height:6px; border-radius:4px; background:#f0eeea; overflow:hidden; } .hiw-progress-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--violet-2),var(--teal)); animation:hiw-progress var(--loop) ease-in-out infinite; } .hiw-progress-label { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); } /* connectors + footer cta */ .hiw-connector { position:absolute; top:148px; } .hiw-connector--1 { left:calc(33.33% - 12px); } .hiw-connector--2 { left:calc(66.66% + 4px); } .hiw-connector path { animation:hiw-dash 1.6s linear infinite; } .hiw-foot { display:flex; align-items:center; gap:10px; background:var(--ink); border-radius:12px; padding:14px 22px; margin-top:56px; } .hiw-foot span { font-size:15px; font-weight:600; color:#faf9f7; } .hiw-foot small { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8b8781; border-left:1px solid #35322a; padding-left:12px; } @keyframes hiw-type { 0%,4% { width:0; } 26%,100% { width:100%; } } @keyframes hiw-type-late { 0%,30% { width:0; } 52%,100% { width:100%; } } @keyframes hiw-caret { 0%,49% { opacity:1; } 50%,100% { opacity:0; } } @keyframes hiw-press { 0%,60% { transform:scale(1); box-shadow:0 4px 14px rgba(91,61,245,.28); } 66% { transform:scale(.965); box-shadow:0 2px 8px rgba(91,61,245,.35); } 74%,100% { transform:scale(1); box-shadow:0 4px 14px rgba(91,61,245,.28); } } @keyframes hiw-ring { 0%,60% { opacity:0; transform:scale(.9); } 70% { opacity:.5; transform:scale(1.02); } 100% { opacity:0; transform:scale(1.14); } } @keyframes hiw-cursor { 0%,24% { transform:translate(150px,132px); } 44%,56% { transform:translate(52px,96px); } 62% { transform:translate(50px,94px); } 80%,100% { transform:translate(52px,96px); } } @keyframes hiw-select { 0%,52% { border-color:var(--field); box-shadow:none; } 62%,100% { border-color:var(--violet); box-shadow:0 0 0 3px rgba(91,61,245,.16); } } @keyframes hiw-check { 0%,56% { opacity:0; transform:scale(.6); } 68%,100% { opacity:1; transform:scale(1); } } @keyframes hiw-draw { 0%,10% { stroke-dashoffset:420; } 62%,100% { stroke-dashoffset:0; } } @keyframes hiw-fillup { 0%,10% { opacity:0; } 70%,100% { opacity:1; } } @keyframes hiw-roll { 0%,8% { transform:translateY(0); } 22%,30% { transform:translateY(-34px); } 44%,52% { transform:translateY(-68px); } 66%,100% { transform:translateY(-102px); } } @keyframes hiw-float { 0%,100% { transform:translateY(0) rotate(-8deg); } 50% { transform:translateY(-7px) rotate(-8deg); } } @keyframes hiw-dash { to { stroke-dashoffset:-16; } } @keyframes hiw-progress { 0%,12% { width:6%; } 70%,100% { width:100%; } } @media (max-width: 1080px) { .hiw { padding:72px 24px 84px; } .hiw-title { font-size:38px; } .hiw-grid { grid-template-columns:minmax(0,380px); gap:40px; } .hiw-connector { display:none; } } @media (prefers-reduced-motion: reduce) { .hiw *, .hiw *::before, .hiw *::after { animation:none !important; } }