/* ════════════════════════════════════════════════════════════ GeniusEdu — detail/sub-page components Shared by lab.html, social.html, trade.html, partner.html Accent follows --ws (set on ) ════════════════════════════════════════════════════════════ */ [data-ws="about"] { --ws: #f9d523; --ws-on: #100d02; --ws-tint: rgba(249,213,35,.12); --ws-bord: rgba(249,213,35,.30); --ws-glow: rgba(249,213,35,.18); } [data-ws="careers"]{ --ws: #f9d523; --ws-on: #100d02; --ws-tint: rgba(249,213,35,.12); --ws-bord: rgba(249,213,35,.30); --ws-glow: rgba(249,213,35,.18); } [data-ws="career"] { --ws: #2f80ed; --ws-on: #ffffff; --ws-tint: rgba(47,128,237,.14); --ws-bord: rgba(47,128,237,.34); --ws-glow: rgba(47,128,237,.22); } [data-ws="lab"] { --ws: #f9d523; --ws-on: #100d02; --ws-tint: rgba(249,213,35,.12); --ws-bord: rgba(249,213,35,.30); --ws-glow: rgba(249,213,35,.18); } [data-ws="social"] { --ws: #c065f0; --ws-on: #ffffff; --ws-tint: rgba(192,101,240,.14); --ws-bord: rgba(192,101,240,.32); --ws-glow: rgba(192,101,240,.20); } [data-ws="trade"] { --ws: #3ecb7a; --ws-on: #06210f; --ws-tint: rgba(62,203,122,.13); --ws-bord: rgba(62,203,122,.30); --ws-glow: rgba(62,203,122,.18); } [data-ws="partner"]{ --ws: #f9d523; --ws-on: #100d02; --ws-tint: rgba(249,213,35,.12); --ws-bord: rgba(249,213,35,.30); --ws-glow: rgba(249,213,35,.18); } .accent-ws { background: var(--ws); color: var(--ws-on); padding: 0 .15em; border-radius: 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* Il punto finale del titolo sta DENTRO al box evidenziato (rotante = inline-block, altrimenti il "." andrebbe a capo da solo). ::after sopravvive alla rotazione JS. */ .accent-ws[data-rot]::after { content: "."; } .btn-ws { background: var(--ws); color: var(--ws-on); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 22px -8px var(--ws-glow); } .btn-ws:hover { transform: translateY(-1px); } /* ═══ Page hero (sub-pages) ═══ */ .page-hero { padding: 56px 0 40px; position: relative; overflow: hidden; } .page-hero::before { content: ""; position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 900px; height: 600px; border-radius: 50%; background: radial-gradient(circle, var(--ws-glow), transparent 62%); opacity: .9; pointer-events: none; z-index: 0; } .crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-faint); margin-bottom: 22px; } .crumb a { color: var(--ink-dim); transition: color .2s; } .crumb a:hover { color: var(--ink); } .crumb svg { width: 13px; height: 13px; opacity: .5; } .ws-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 30px; background: var(--ws-tint); border: 1px solid var(--ws-bord); font-size: 13px; font-weight: 600; color: var(--ws); margin-bottom: 22px; } .ws-badge svg { width: 15px; height: 15px; } .page-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); max-width: 16ch; } .page-hero .ph-sub { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--ink-dim); max-width: 56ch; margin-top: 22px; line-height: 1.5; } .page-hero .hero-cta { margin-top: 30px; } .ph-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; } .ph-meta .m { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-dim); } .ph-meta .m svg { width: 17px; height: 17px; color: var(--ws); } /* ═══ Browser / app frame ═══ */ .app-frame { border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 40px 90px -40px rgba(0,0,0,.85); background: var(--bg-2); margin-top: 52px; } .app-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--hair); background: rgba(255,255,255,.02); } .app-bar .dots { display: flex; gap: 7px; } .app-bar .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--hair-2); } .app-bar .dots i:nth-child(1) { background: #ff5f57; } .app-bar .dots i:nth-child(2) { background: #febc2e; } .app-bar .dots i:nth-child(3) { background: #28c840; } .app-bar .url { flex: 1; max-width: 340px; margin: 0 auto; text-align: center; font-size: 12.5px; color: var(--ink-faint); background: rgba(255,255,255,.04); border: 1px solid var(--hair); border-radius: 8px; padding: 5px 12px; } [data-theme="light"] .app-bar .url { background: rgba(0,0,0,.03); } .app { display: grid; grid-template-columns: 218px 1fr; min-height: 520px; } .app-side { border-right: 1px solid var(--hair); padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; background: rgba(255,255,255,.014); } .app-side .as-brand { display: flex; align-items: center; gap: 9px; padding: 6px 8px 16px; } .app-side .as-brand .m { width: 26px; height: 26px; border-radius: 8px; background: var(--ws-tint); display: grid; place-items: center; color: var(--ws); } .app-side .as-brand .m svg { width: 15px; height: 15px; } .app-side .as-brand b { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; } .app-side .as-lbl { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding: 14px 10px 6px; } .as-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; font-size: 13.5px; color: var(--ink-dim); transition: background .2s, color .2s; } .as-item svg { width: 16px; height: 16px; opacity: .85; } .as-item.active { background: var(--ws-tint); color: var(--ws); font-weight: 600; } .as-item.active svg { opacity: 1; } .as-spacer { flex: 1; } .as-user { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--hair); } .as-user .av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--ws), #8a6a10); flex-shrink: 0; } .as-user b { font-size: 12.5px; display: block; } .as-user span { font-size: 11px; color: var(--ink-faint); } .app-main { padding: 22px; overflow: hidden; } .app-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 14px; } .app-top h4 { font-family: var(--font-display); font-weight: 700; font-size: 19px; } .app-top .at-sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; } .app-top .gc-pill { background: var(--ws-tint); color: var(--ws); border-color: var(--ws-bord); } .app-top .gc-pill .coin { background: var(--ws); } .app-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; } .w { background: var(--glass-bg); border: 1px solid var(--hair); border-radius: 15px; padding: 16px; } .w-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; } .w-head b { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .w-head b svg { width: 15px; height: 15px; color: var(--ws); } .w-head .more { font-size: 11px; color: var(--ink-faint); } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; } /* generic mini widgets used inside app-main */ .stat-mini b { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; letter-spacing: -.03em; line-height: 1; display: block; } .stat-mini span { font-size: 11.5px; color: var(--ink-faint); } .stat-mini .up { color: var(--ws); font-size: 12px; font-weight: 600; } .row-line { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--hair); } .row-line:first-of-type { border-top: none; } .row-line .ri { width: 30px; height: 30px; border-radius: 9px; background: var(--ws-tint); color: var(--ws); display: grid; place-items: center; flex-shrink: 0; } .row-line .ri svg { width: 15px; height: 15px; } .row-line .rt { flex: 1; min-width: 0; } .row-line .rt b { font-size: 12.5px; font-weight: 600; display: block; } .row-line .rt span { font-size: 11px; color: var(--ink-faint); } .row-line .rv { font-size: 12px; color: var(--ink-dim); font-weight: 600; flex-shrink: 0; } .bar2 { height: 6px; border-radius: 20px; background: rgba(255,255,255,.08); overflow: hidden; } [data-theme="light"] .bar2 { background: rgba(0,0,0,.07); } .bar2 i { display: block; height: 100%; border-radius: 20px; background: var(--ws); } /* ═══ Explain rows (ultra-spiegato) ═══ */ .explain { padding: 90px 0; } .xrow { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 96px; } .xrow:last-child { margin-bottom: 0; } .xrow.rev .xtext { order: 2; } .xstep { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ws); margin-bottom: 16px; } .xstep .n { width: 24px; height: 24px; border-radius: 7px; background: var(--ws-tint); border: 1px solid var(--ws-bord); display: grid; place-items: center; font-family: var(--font-display); } .xrow h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 16px; } .xrow .xlead { color: var(--ink-dim); font-size: 1.06rem; line-height: 1.6; margin-bottom: 22px; } .xlist { display: flex; flex-direction: column; gap: 13px; } .xlist .xi { display: flex; gap: 12px; align-items: flex-start; } .xlist .xi .xc { width: 22px; height: 22px; border-radius: 7px; background: var(--ws-tint); color: var(--ws); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; } .xlist .xi .xc svg { width: 13px; height: 13px; } .xlist .xi p { font-size: 14.5px; color: var(--ink-dim); line-height: 1.5; } .xlist .xi p b { color: var(--ink); font-weight: 600; } .xvisual { position: relative; } .xvisual .vframe { padding: 20px; border-radius: var(--radius-lg); } /* annotation chips overlaid */ .annot { position: absolute; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 11px; font-size: 12px; font-weight: 600; background: var(--bg); border: 1px solid var(--ws-bord); box-shadow: var(--shadow-soft); z-index: 3; } .annot .ad { width: 8px; height: 8px; border-radius: 50%; background: var(--ws); flex-shrink: 0; } /* ═══ Steps band ═══ */ .steps-sec { padding: 30px 0 90px; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .steps-4 { grid-template-columns: repeat(4, 1fr); } .step { padding: 26px; border-radius: var(--radius); } .step .sn { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; letter-spacing: -.03em; color: var(--ws); line-height: 1; opacity: .9; } .step h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 14px 0 8px; } .step p { font-size: 14px; color: var(--ink-dim); line-height: 1.5; } /* ═══ Stat strip ═══ */ .stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 40px 0; } .stat-strip .sc { padding: 0 28px; border-left: 1px solid var(--hair); } .stat-strip .sc:first-child { border-left: none; padding-left: 0; } .stat-strip .sv { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem,3.4vw,2.8rem); letter-spacing: -.03em; line-height: 1; color: var(--ws); } .stat-strip .sl { font-size: 13.5px; color: var(--ink-dim); margin-top: 10px; line-height: 1.45; } /* ═══ Feature cards grid (per page) ═══ */ .fcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .fcard { padding: 24px; border-radius: var(--radius); } .fcard .fi { width: 44px; height: 44px; border-radius: 12px; background: var(--ws-tint); color: var(--ws); display: grid; place-items: center; margin-bottom: 16px; } .fcard .fi svg { width: 21px; height: 21px; } .fcard h4 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-bottom: 8px; } .fcard p { font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; } /* ═══ Partner tiers ═══ */ .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; } .tier { padding: 30px; border-radius: var(--radius-lg); display: flex; flex-direction: column; } .tier.featured { border-color: var(--ws-bord); box-shadow: 0 0 0 1px var(--ws-bord), var(--shadow-card); } .tier .tname { font-family: var(--font-display); font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 9px; } .tier .tprice { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; letter-spacing: -.03em; margin: 16px 0 4px; } .tier .tprice small { font-size: .9rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; } .tier .tdesc { font-size: 13.5px; color: var(--ink-dim); min-height: 40px; margin-bottom: 20px; line-height: 1.5; } .tier .tlist { display: flex; flex-direction: column; gap: 11px; flex: 1; margin-bottom: 24px; } .tier .tlist .tl { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-dim); } .tier .tlist .tl svg { width: 16px; height: 16px; color: var(--ws); flex-shrink: 0; margin-top: 2px; } .tier .tlist .tl.off { color: var(--ink-faint); } .tier .tlist .tl.off svg { color: var(--ink-faint); } .tier .badge-pop { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ws-on); background: var(--ws); padding: 4px 10px; border-radius: 20px; } /* ═══ FAQ ═══ */ .faq { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; } .faq details { border: 1px solid var(--hair); border-radius: 15px; background: var(--glass-bg); overflow: hidden; } .faq summary { list-style: none; cursor: pointer; padding: 20px 22px; font-family: var(--font-display); font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .faq summary::-webkit-details-marker { display: none; } .faq summary .pm { width: 22px; height: 22px; flex-shrink: 0; position: relative; transition: transform .3s var(--ease); } .faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; background: var(--ws); border-radius: 2px; } .faq summary .pm::before { top: 10px; left: 3px; right: 3px; height: 2px; } .faq summary .pm::after { left: 10px; top: 3px; bottom: 3px; width: 2px; transition: transform .3s var(--ease); } .faq details[open] summary .pm::after { transform: scaleY(0); } .faq details p { padding: 0 22px 22px; font-size: 14.5px; color: var(--ink-dim); line-height: 1.6; } /* ═══ Feed / chips reuse for social ═══ */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font-size: 12.5px; font-weight: 500; padding: 7px 13px; border-radius: 20px; background: var(--glass-bg); border: 1px solid var(--hair); color: var(--ink-dim); } .chip.on { background: var(--ws-tint); border-color: var(--ws-bord); color: var(--ws); font-weight: 600; } /* ═══ Pillars (editorial, numbered, with stat) ═══ */ .pillars { display: flex; flex-direction: column; } .pillar { display: grid; grid-template-columns: 64px 1fr 270px; gap: 32px; align-items: start; padding: 38px 0; border-top: 1px solid var(--hair); } .pillar:first-child { border-top: none; } .pillar .pnum { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--ws); letter-spacing: -.03em; opacity: .9; } .pillar .pmain h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-bottom: 12px; letter-spacing: -.01em; } .pillar .pmain p { font-size: 15px; color: var(--ink-dim); line-height: 1.6; max-width: 52ch; } .pillar .pl-cell { padding-left: 22px; border-left: 2px solid var(--ws-bord); } .pillar .pl-cell .pl-val { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--ws); letter-spacing: -.02em; line-height: 1.1; } .pillar .pl-cell .pl-desc { font-size: 13px; color: var(--ink-dim); margin-top: 6px; line-height: 1.45; } .pillar .pl-cell .pl-src { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; } /* ═══ Quote block ═══ */ .quote-block { padding: 44px 48px; border-radius: var(--radius-lg); position: relative; overflow: hidden; } .quote-block .qmark { font-family: var(--font-display); font-size: 6rem; line-height: 0; color: var(--ws); opacity: .22; position: absolute; top: 40px; left: 26px; } .quote-block p { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.5; font-weight: 500; letter-spacing: -.015em; position: relative; } .quote-block p b { color: var(--ws); font-weight: 700; } .quote-block p .ink { color: var(--ink); font-weight: 600; } /* ═══ Story prose ═══ */ .prose { max-width: 64ch; } .prose p { font-size: 1.05rem; color: var(--ink-dim); line-height: 1.75; margin-bottom: 20px; } .prose p b { color: var(--ink); font-weight: 600; } .tagrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .tagrow .tg { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--hair); } .tagrow .tg svg { width: 14px; height: 14px; color: var(--ws); } /* ═══ Team (editorial avatars) ═══ */ .team-row { display: flex; flex-wrap: wrap; gap: 30px 40px; justify-content: center; } .tmember { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 150px; text-align: center; } .tmember .tav { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--ws-on); border: 2px solid var(--hair-2); } .tmember b { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; } .tmember span { font-size: 12px; font-weight: 600; color: var(--ws); } /* ═══ Equity / disclaimer box (cyan track) ═══ */ .equity { --cy: #38d6ef; --cy-tint: rgba(56,214,239,.10); --cy-bord: rgba(56,214,239,.40); } .equity-box { padding: 42px 44px; border-radius: var(--radius-lg); border: 1.5px solid var(--cy-bord); background: linear-gradient(135deg, var(--cy-tint), rgba(255,255,255,.015)); position: relative; overflow: hidden; } .equity-box .ebadge { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cy); padding: 6px 13px; border-radius: 999px; background: var(--cy-tint); border: 1px solid var(--cy-bord); margin-bottom: 18px; } .equity-box .ebadge svg { width: 13px; height: 13px; } .equity-box h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 18px; } .equity-box h3 .cy { color: var(--cy); } .equity-box p { font-size: 14.5px; color: var(--ink-dim); line-height: 1.65; margin-bottom: 14px; max-width: 62ch; } .equity-box p b { color: var(--ink); font-weight: 600; } .equity-box p b.cy { color: var(--cy); } .equity-box .epunch { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--cy); margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--cy-bord); } /* ═══ Track header ═══ */ .track-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; } .track-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; white-space: nowrap; } .track-tag svg { flex-shrink: 0; width: 13px; height: 13px; } .track-tag.founding { color: #38d6ef; background: rgba(56,214,239,.10); border: 1px solid rgba(56,214,239,.38); } .track-tag.student { color: var(--ws); background: var(--ws-tint); border: 1px solid var(--ws-bord); } .track-head .thint { font-size: 13px; color: var(--ink-faint); } /* ═══ Role rows (editorial, no cards) ═══ */ .roles { display: flex; flex-direction: column; } .role { display: flex; align-items: center; gap: 20px; padding: 22px 4px; border-top: 1px solid var(--hair); transition: padding-left .25s var(--ease); } .role:first-child { border-top: none; } .role:hover { padding-left: 12px; } .role .ric { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; display: grid; place-items: center; background: var(--ws-tint); color: var(--ws); } .role.cy .ric { background: rgba(56,214,239,.12); color: #38d6ef; } .role .ric svg { width: 21px; height: 21px; } .role .rbody { flex: 1; min-width: 0; } .role .rbody .rtop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .role .rbody h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; } .role .rbody .hot { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; color: var(--ws); background: var(--ws-tint); border: 1px solid var(--ws-bord); } .role .rbody p { font-size: 13.5px; color: var(--ink-dim); margin-top: 5px; line-height: 1.5; max-width: 60ch; } .role .rbody .rmeta { display: flex; gap: 16px; margin-top: 9px; } .role .rbody .rmeta span { font-size: 12px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 6px; } .role .rbody .rmeta svg { width: 13px; height: 13px; } .role .rcta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ws); white-space: nowrap; } .role.cy .rcta { color: #38d6ef; } .role .rcta svg { width: 15px; height: 15px; transition: transform .25s var(--ease); } .role:hover .rcta svg { transform: translateX(4px); } /* ═══ Learn / benefit two-col list ═══ */ .lb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .lb h5 { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px; } .lb .li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--hair); } .lb .li:first-of-type { border-top: none; } .lb .li .lic { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: var(--ws-tint); color: var(--ws); } .lb .li .lic svg { width: 17px; height: 17px; } .lb .li b { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; display: block; } .lb .li span { font-size: 13px; color: var(--ink-dim); line-height: 1.5; display: block; margin-top: 3px; } /* ═══ Checklist ═══ */ .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; } .checks .ck { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink); } .checks .ck .cc { width: 24px; height: 24px; border-radius: 999px; flex-shrink: 0; display: grid; place-items: center; background: var(--ws-tint); color: var(--ws); } .checks .ck .cc svg { width: 13px; height: 13px; } /* ═══ Responsive ═══ */ @media (max-width: 1000px) { .pillar { grid-template-columns: 48px 1fr; gap: 20px 22px; } .pillar .pl-cell { grid-column: 1 / -1; padding-left: 0; padding-top: 16px; border-left: none; border-top: 1px solid var(--ws-bord); margin-top: 4px; } .lb-grid { grid-template-columns: 1fr; gap: 30px; } .checks { grid-template-columns: 1fr; } .quote-block, .equity-box { padding: 30px 26px; } .role { flex-wrap: wrap; } .role .rcta { width: 100%; padding-left: 66px; } } @media (max-width: 1000px) { .xrow, .xrow.rev .xtext { grid-template-columns: 1fr; gap: 32px; } .xrow.rev .xtext { order: 0; } .steps { grid-template-columns: 1fr; } .steps-4 { grid-template-columns: 1fr 1fr; } .fcards { grid-template-columns: 1fr 1fr; } .tiers { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } .app { grid-template-columns: 1fr; } .app-side { display: none; } .stat-strip { grid-template-columns: 1fr 1fr; gap: 28px 0; } .stat-strip .sc { padding: 0 20px; } .stat-strip .sc:nth-child(odd) { border-left: none; padding-left: 0; } } @media (max-width: 620px) { .fcards { grid-template-columns: 1fr; } .steps-4 { grid-template-columns: 1fr; } .app-grid > [class*="col-"] { grid-column: span 12; } .stat-strip { grid-template-columns: 1fr; gap: 24px; } .stat-strip .sc { padding: 0; border-left: none; } .page-hero { padding: 30px 0 20px; } .app-frame { margin-top: 32px; } } /* ═══ Mockup life — flip card + live pulses (landing pages, --ws accent) ═══ */ .lab-flip { perspective: 1100px; } .lab-flip-in { position: relative; transform-style: preserve-3d; min-height: 132px; animation: labflip 7.5s ease-in-out infinite; } @keyframes labflip { 0%,40% { transform: rotateY(0); } 52%,90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } } .lab-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 24px 22px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--ws-tint); border: 1px solid var(--ws-bord); } .lab-fk { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; } .lab-front b { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; line-height: 1.32; } .lab-back { transform: rotateY(180deg); } .lab-back p { font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; } .lab-grade { flex: 1; text-align: center; padding: 11px; border-radius: 12px; border: 1px solid var(--hair); font-size: 13px; font-weight: 600; color: var(--ink-dim); } .lab-grade.easy { background: var(--ws); color: var(--ws-on); border-color: transparent; } .lab-live { display: inline-block; animation: labpulse 1.9s ease-in-out infinite; } @keyframes labpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* progress/skill bars grow in when rendered */ .bar2 i { transform-origin: left center; animation: bargrow 1.3s var(--ease) both; } @keyframes bargrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* sparkline draw-in (pathLength=1 → works at any path length) */ .tdraw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tdraw 1.9s var(--ease) forwards; } @keyframes tdraw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .lab-flip-in, .lab-live, .bar2 i { animation: none !important; } .tdraw { animation: none !important; stroke-dashoffset: 0; } }