/* FlipOn landing. Tokens are identical to flipon-app/src/styles.css (light + dark). */ :root { color-scheme: light; --background: #ffffff; --foreground: #3f3f46; --card: #ffffff; --muted: #f4f4f5; --muted-foreground: #71717a; --secondary-foreground: #52525b; --border: #e4e4e7; --input: #e4e4e7; --primary: #52525b; --primary-hover: #3f3f46; --primary-foreground: #fafafa; --accent: #5b6f99; --accent-foreground: #fafafa; --destructive: #b6524e; --warning: #b9803f; --success: #4a8a66; --ring: var(--accent); --track: rgb(82 82 91 / 0.14); --shadow-popover: 0 10px 30px -10px rgb(0 0 0 / 0.18), 0 4px 6px -4px rgb(0 0 0 / 0.08); --radius: 0.625rem; --ink: #18181b; --font-sans: "Geist Variable", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --font-mono: "Geist Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } html.dark { color-scheme: dark; --background: #18181b; --foreground: #e4e4e7; --card: #1c1c1f; --muted: #27272a; --muted-foreground: #8b8b94; --secondary-foreground: #a1a1aa; --border: #2e2e33; --input: #3a3a40; --primary: #d4d4d8; --primary-hover: #e4e4e7; --primary-foreground: #18181b; --accent: #8fa3cf; --accent-foreground: #16202e; --destructive: #d98d89; --warning: #d7a868; --success: #7dc79b; --track: rgb(212 212 216 / 0.14); --shadow-popover: 0 16px 40px -12px rgb(0 0 0 / 0.6); --ink: #fafafa; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; font-family: var(--font-sans); background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.55; overflow-x: clip; } img, svg { display: block; max-width: 100%; } button, input, select { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; } h1, h2, h3, p { margin: 0; } code, .mono { font-family: var(--font-mono); } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } [hidden] { display: none !important; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } /* reveal */ .js .rv { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1); } .js .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---------- buttons / badges (shadcn look) ---------- */ .btn { appearance: none; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border-radius: 8px; font-weight: 500; height: 32px; padding: 0 12px; font-size: 13px; text-decoration: none; transition: background-color .12s ease, transform .12s ease; } .btn.sm { height: 28px; padding: 0 10px; font-size: 12px; } .btn.lg { height: 46px; padding: 0 20px; font-size: 15px; border-radius: 10px; } .btn-default { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 1px 2px rgb(0 0 0 / .06); } .btn-default:hover { background: var(--primary-hover); } .btn-outline { background: var(--background); color: var(--foreground); border: 1px solid var(--input); box-shadow: 0 1px 2px rgb(0 0 0 / .04); } .btn-outline:hover { background: var(--muted); } .btn-accent { background: var(--accent); color: var(--accent-foreground); box-shadow: 0 1px 2px rgb(0 0 0 / .06); } .btn-accent:hover { filter: brightness(.93); } .btn-ghost { background: transparent; color: var(--foreground); } .btn-ghost:hover { background: var(--muted); } .icon-btn { appearance: none; border: 0; background: transparent; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--foreground); font-size: 13px; } .icon-btn:hover { background: var(--muted); } .badge { display: inline-flex; align-items: center; border-radius: 6px; padding: 0 6px; height: 18px; font-size: 11px; font-weight: 500; border: 1px solid var(--border); color: var(--secondary-foreground); flex: none; } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--background) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent); } .nav .wrap { height: 64px; display: flex; align-items: center; gap: 28px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; color: var(--ink); } .brand img { width: 28px; height: 28px; } .nav-links { display: flex; gap: 22px; font-size: 14px; color: var(--muted-foreground); margin-left: 8px; } .nav-links a { text-decoration: none; } .nav-links a:hover { color: var(--foreground); } .nav-end { margin-left: auto; display: flex; gap: 8px; align-items: center; } /* ---------- hero ---------- */ .hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; padding: 56px 0 88px; } .eyebrow { font: 500 12px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); } h1 { font-size: clamp(38px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -.04em; font-weight: 600; color: var(--ink); margin: 18px 0 20px; text-wrap: balance; } .lede { font-size: 19px; color: var(--secondary-foreground); max-width: 32em; } .dl-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .dl-note { margin-top: 14px; font-size: 13.5px; color: var(--muted-foreground); max-width: 34em; } .dl-note a { color: var(--accent); text-decoration: none; font-weight: 500; } .dl-note a:hover { text-decoration: underline; } .facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; font: 400 12.5px/1.4 var(--font-mono); color: var(--muted-foreground); } .facts span::before { content: "\2713\00a0"; color: var(--success); } .stage { position: relative; background: var(--muted); border: 1px solid var(--border); border-radius: 24px; padding: 18px 18px 26px; background-image: radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--border) 80%, transparent) 1px, transparent 0); background-size: 18px 18px; } .tray { display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 34px; padding: 0 14px; border-radius: 10px; background: #2b2b2f; color: #fff; margin: 0 0 12px auto; width: max-content; max-width: 100%; font-size: 12px; box-shadow: 0 6px 16px -8px rgb(0 0 0 / .5); } .tray .ti { width: 14px; height: 14px; border-radius: 4px; background: rgb(255 255 255 / .22); } .tray .ti.s { width: 12px; height: 12px; border-radius: 999px; } .tray .me { display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; height: 26px; border-radius: 7px; background: rgb(255 255 255 / .12); } .tray .me b { font-weight: 600; font-size: 12px; } .tray .clock { font: 400 11.5px var(--font-mono); opacity: .8; } /* ---------- usage bars ---------- */ .bar { position: relative; width: 100%; overflow: hidden; border-radius: 999px; background: var(--track); height: 6px; } .bar.lg { height: 8px; } .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--primary); width: 0; transition: width .5s cubic-bezier(.2, .8, .2, 1), background-color .3s; } .bar.warn i { background: var(--warning); } .bar.crit i { background: var(--destructive); } .bar b { position: absolute; top: 0; bottom: 0; width: 2px; background: color-mix(in oklab, var(--foreground) 40%, transparent); transition: left .5s linear; } /* ---------- popover replica ---------- */ .pop { position: relative; width: 100%; max-width: 380px; margin: 0 auto; background: var(--background); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-popover); color: var(--foreground); font-size: 13px; line-height: 1.4; text-align: left; user-select: none; } .pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 12px; border-bottom: 1px solid var(--border); } .pop-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .pop-sub { font-size: 12px; color: var(--muted-foreground); margin-top: 1px; } .pop-actions { display: flex; align-items: center; gap: 4px; } .pop-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; } .acard { display: flex; gap: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 12px 12px 12px 6px; box-shadow: 0 1px 2px rgb(0 0 0 / .03); transition: border-color .3s; } .acard.active { border-color: var(--accent); } .arank { width: 24px; flex: none; display: flex; flex-direction: column; align-items: center; } .arank button { appearance: none; border: 0; background: transparent; width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--foreground); } .arank button:hover { background: var(--muted); } .arank button:disabled { opacity: .3; pointer-events: none; } .arank span { font: 400 11px/16px var(--font-mono); color: var(--muted-foreground); } .amain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .arow { position: relative; display: flex; align-items: center; gap: 10px; } .aid { min-width: 0; flex: 1; } .atitle { display: flex; align-items: center; gap: 7px; min-width: 0; } .aname { font-size: 14px; font-weight: 600; letter-spacing: -.01em; flex: none; } .amail { font-size: 11px; color: var(--muted-foreground); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .atoday { margin-top: 2px; display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .astatus { margin-top: 2px; font-size: 12px; } .astatus.crit { color: var(--destructive); } .aswitch { position: absolute; right: 40px; top: 50%; transform: translateY(-50%) scale(.96); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; box-shadow: 0 2px 8px rgb(0 0 0 / .18), -18px 0 14px -6px var(--card); } .acard:hover .aswitch { opacity: 1; transform: translateY(-50%); pointer-events: auto; } .alimits { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 10px; } .alimit .top { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; } .alimit .top b { font-weight: 600; } .alimit .top .mu { color: var(--muted-foreground); font-weight: 400; } .alimit .pc { font-family: var(--font-mono); } .alimit .bar { margin-top: 6px; } .trend { margin-left: 5px; font-size: 11px; color: var(--muted-foreground); } .climits { display: flex; flex-direction: column; gap: 7px; } .climit { font-size: 11px; color: var(--muted-foreground); } .climit .top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .climit .top .n { font-weight: 500; color: var(--foreground); } .climit .pc { font-family: var(--font-mono); flex: none; } .climit .bar { margin-top: 4px; } .toast { position: absolute; z-index: 5; left: 14px; right: 14px; bottom: -18px; display: flex; gap: 10px; align-items: flex-start; background: #2b2b2f; color: #fff; border-radius: 12px; padding: 11px 13px; box-shadow: 0 16px 34px -12px rgb(0 0 0 / .6); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1); } .toast.show { opacity: 1; transform: none; } .toast .ic { width: 26px; height: 26px; border-radius: 7px; flex: none; } .toast strong { display: block; font-size: 13px; font-weight: 600; } .toast span { display: block; font-size: 12px; color: #a1a1aa; margin-top: 1px; } /* ---------- sections ---------- */ section.sec { padding: 80px 0; border-top: 1px solid var(--border); } .sec-head { max-width: 44em; margin-bottom: 40px; } h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; letter-spacing: -.032em; font-weight: 600; color: var(--ink); margin-top: 12px; text-wrap: balance; } .sec-sub { color: var(--secondary-foreground); margin-top: 14px; max-width: 40em; } .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .cell { background: var(--background); padding: 24px; } .cell .eyebrow { display: block; margin-bottom: 14px; } .cell h3 { font-size: 17px; letter-spacing: -.012em; margin-bottom: 8px; color: var(--ink); } .cell p { font-size: 15px; color: var(--secondary-foreground); } /* ---------- strategy lab ---------- */ .lab { display: grid; grid-template-columns: minmax(0, 370px) minmax(0, 1fr); gap: 22px; align-items: start; background: var(--muted); border: 1px solid var(--border); border-radius: 24px; padding: 22px; background-image: radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--border) 85%, transparent) 1px, transparent 0); background-size: 18px 18px; } .lab-left { display: flex; flex-direction: column; gap: 10px; } .lab-label { font-size: 13px; font-weight: 500; color: var(--foreground); margin: 0 0 2px; } .strat { display: flex; width: 100%; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--border); background: var(--card); border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 2px rgb(0 0 0 / .04); transition: border-color .15s, box-shadow .15s, transform .15s; } .strat:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); } .strat[aria-checked="true"] { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 6%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent), 0 8px 18px -12px rgb(0 0 0 / .3); } .strat .ico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--muted); color: var(--muted-foreground); transition: background-color .15s, color .15s; } .strat[aria-checked="true"] .ico { background: var(--accent); color: var(--accent-foreground); } .strat .tx { min-width: 0; flex: 1; } .strat .tt { font-size: 13px; font-weight: 600; color: var(--foreground); } .strat .ds { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted-foreground); } .strat .ck { color: var(--accent); font-size: 14px; opacity: 0; flex: none; margin-top: 2px; } .strat[aria-checked="true"] .ck { opacity: 1; } .set-card { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 0 16px; box-shadow: 0 1px 2px rgb(0 0 0 / .04); } .slider-row { padding: 14px 0; } .slider-row + .slider-row { border-top: 1px solid var(--border); } .slider-row .top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; } .slider-row output { font: 400 13px var(--font-mono); } .slider-row input[type=range] { width: 100%; margin: 10px 0 0; accent-color: var(--accent); } .board { border: 1px solid var(--border); border-radius: 16px; background: var(--card); padding: 22px; min-width: 0; box-shadow: 0 14px 34px -22px rgb(0 0 0 / .35), 0 2px 6px -2px rgb(0 0 0 / .06); } .board-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; } .board-top .tt { font-size: 15px; font-weight: 600; color: var(--ink); } .axis { display: flex; justify-content: space-between; margin: 8px 0 0; font: 400 11px var(--font-mono); color: var(--muted-foreground); } .log { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border); list-style: none; display: grid; gap: 8px; max-height: 232px; overflow: auto; } .log li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; font-size: 13px; color: var(--foreground); } .log li .tm { font: 500 12px var(--font-mono); color: var(--accent); padding-top: 1px; } .note { margin-top: 14px; font-size: 12.5px; color: var(--muted-foreground); } /* ---------- details (replicas) ---------- */ .details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .dcard { border: 1px solid var(--border); border-radius: 16px; background: var(--card); padding: 20px; display: flex; flex-direction: column; gap: 16px; } .dcard h3 { font-size: 16px; letter-spacing: -.01em; color: var(--ink); } .dcard p.cap { font-size: 14px; color: var(--secondary-foreground); } .dcard .vis { margin-top: auto; background: var(--muted); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: grid; gap: 10px; } .dlg { background: var(--background); border: 1px solid var(--border); border-radius: 12px; padding: 14px; box-shadow: var(--shadow-popover); font-size: 13px; } .dlg .t { font-size: 15px; font-weight: 600; color: var(--ink); } .dlg .a { margin-top: 2px; font-size: 12px; color: var(--muted-foreground); } .dlg .x { margin-top: 8px; font-size: 12px; color: var(--muted-foreground); line-height: 1.45; } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .chip { border: 1px solid var(--input); background: var(--background); border-radius: 8px; height: 30px; padding: 0 12px; font-size: 13px; font-weight: 500; } .chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-foreground); } .chip:hover:not(.on) { background: var(--muted); } .notice { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--background); padding: 8px 10px; font-size: 12px; } .notice .act { margin-left: auto; color: var(--accent); font-weight: 500; background: none; border: 0; padding: 0 2px; } .os-note { display: flex; gap: 10px; background: #2b2b2f; color: #fff; border-radius: 12px; padding: 11px 13px; box-shadow: 0 12px 28px -14px rgb(0 0 0 / .6); } .os-note img { width: 26px; height: 26px; flex: none; } .os-note strong { display: block; font-size: 13px; font-weight: 600; } .os-note span { display: block; font-size: 12px; color: #a1a1aa; margin-top: 1px; } .presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .preset { border: 1px solid var(--border); border-radius: 10px; background: var(--background); padding: 8px; text-align: center; font-size: 11px; color: var(--muted-foreground); } .preset[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 7%, var(--background)); color: var(--accent); } .preset .sw { height: 34px; border-radius: 7px; background: #2b2b2f; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; color: #fff; } .mini { position: relative; overflow: hidden; border-radius: 999px; border: 1px solid rgb(255 255 255 / .5); width: 28px; height: 10px; } .mini i { position: absolute; inset: 2px auto 2px 2px; border-radius: 999px; min-width: 6px; } .ring { width: 20px; height: 20px; border-radius: 50%; } .hist { display: flex; height: 18px; align-items: flex-end; gap: 2px; } .hist i { width: 3px; border-radius: 1px; } .use-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted-foreground); } .use-row input { flex: 1; accent-color: var(--accent); } .use-row output { font: 400 12px var(--font-mono); width: 34px; text-align: right; color: var(--foreground); } /* ---------- comparison ---------- */ .tbl-wrap { border: 1px solid var(--border); border-radius: 16px; overflow-x: auto; background: var(--card); } table.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 760px; } .cmp th, .cmp td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); } .cmp thead th { border-top: 0; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--muted); position: sticky; top: 0; } .cmp thead th small { display: block; font: 400 11.5px var(--font-mono); color: var(--muted-foreground); margin-top: 2px; } .cmp tbody th { font-weight: 500; color: var(--foreground); width: 31%; } .cmp td.rw { background: color-mix(in oklab, var(--accent) 6%, var(--card)); } .cmp thead th.rw { background: color-mix(in oklab, var(--accent) 13%, var(--muted)); color: var(--ink); } .cmp tr.grp th { background: var(--background); font: 600 11.5px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground); padding-top: 18px; } .cmp tr.grp td { background: var(--background); } .cmp .y { color: var(--success); font-weight: 600; } .cmp .n { color: var(--muted-foreground); } .cmp .p { color: var(--secondary-foreground); } .cmp td small { display: block; color: var(--muted-foreground); font-size: 12px; margin-top: 2px; } .cmp-note { margin-top: 14px; font-size: 13px; color: var(--muted-foreground); max-width: 56em; } .cmp-note a { color: var(--accent); } .honest { margin-top: 22px; border: 1px dashed var(--border); border-radius: 14px; padding: 18px 20px; background: var(--card); display: grid; gap: 6px; } .honest h3 { font-size: 15px; color: var(--ink); } .honest ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; color: var(--secondary-foreground); } /* ---------- trust ---------- */ .touch { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--card); margin: 0; } .touch div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; padding: 18px 24px; } .touch div + div { border-top: 1px solid var(--border); } .touch dt { font: 500 12.5px var(--font-mono); color: var(--muted-foreground); padding-top: 2px; } .touch dd { margin: 0; font-size: 15px; color: var(--foreground); } .touch code { font-size: 12.5px; background: var(--muted); padding: 1px 6px; border-radius: 6px; } /* ---------- faq / cta / footer ---------- */ details { border-top: 1px solid var(--border); } details:last-of-type { border-bottom: 1px solid var(--border); } summary { cursor: pointer; padding: 20px 0; font-weight: 600; font-size: 17px; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; font: 400 20px var(--font-mono); color: var(--muted-foreground); } details[open] summary::after { content: "\2013"; } details p { margin: 0 0 20px; color: var(--secondary-foreground); max-width: 46em; } details p + p { margin-top: -8px; } .cta { border-radius: 28px; background: var(--ink); color: var(--background); padding: 56px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; } html.dark .cta { background: var(--muted); color: var(--foreground); } .cta h2 { color: inherit; margin-top: 0; } .cta p { color: color-mix(in oklab, currentColor 62%, transparent); margin-top: 12px; } .cta .btn-default { background: var(--background); color: var(--ink); } .cta .btn-outline { background: transparent; color: inherit; border-color: color-mix(in oklab, currentColor 28%, transparent); } .cta .btn-outline:hover { background: color-mix(in oklab, currentColor 10%, transparent); } .cta-actions { display: grid; gap: 12px; } .cta-actions .row { display: flex; flex-wrap: wrap; gap: 10px; } .cta-actions a.tx { font-size: 13.5px; color: color-mix(in oklab, currentColor 62%, transparent); text-decoration: none; } .cta-actions a.tx:hover { color: inherit; text-decoration: underline; } .cta-actions .os { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; } .cta-actions .os a { color: color-mix(in oklab, currentColor 62%, transparent); text-decoration: underline; text-underline-offset: 3px; } .cta-actions .os a:hover { color: inherit; } .survey { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: min(360px, calc(100vw - 40px)); background: var(--background); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-popover); padding: 16px; transform: translateY(16px); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1); } .survey.show { transform: none; opacity: 1; pointer-events: auto; } .survey .t { font-size: 14px; font-weight: 600; color: var(--ink); padding-right: 24px; } .survey .s { margin-top: 2px; font-size: 12.5px; color: var(--muted-foreground); } .survey .x { position: absolute; top: 8px; right: 8px; } .survey .chips { margin-top: 12px; } .survey .thanks { display: none; font-size: 13px; color: var(--secondary-foreground); margin-top: 12px; } .survey.done .chips { display: none; } .survey.done .thanks { display: block; } footer { padding: 40px 0 56px; margin-top: 56px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 13.5px; } footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } footer p { max-width: 46em; } /* ---------- responsive ---------- */ @media (max-width: 940px) { .hero, .lab, .cta { grid-template-columns: minmax(0, 1fr); } .grid3, .details { grid-template-columns: minmax(0, 1fr); } .nav-links { display: none; } .touch div { grid-template-columns: minmax(0, 1fr); gap: 4px; } .cta { padding: 36px 24px; } } @media (max-width: 480px) { .gh-t { display: none; } .wrap { padding: 0 16px; } .stage { padding: 12px 10px 24px; border-radius: 18px; } .arank { display: none; } .acard { padding: 12px; } .board { padding: 14px; } .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .btn.lg { width: 100%; } } @media (max-width: 480px) { } /* ---------- strategy lab: palette and board ---------- */ :root { --c-work: #5b6f99; --c-work-fg: #ffffff; --c-personal: #52525b; --c-personal-fg: #ffffff; --c-side: #a9b9dd; --c-side-fg: #1f2a40; } html.dark { --c-work: #8fa3cf; --c-work-fg: #16202e; --c-personal: #d4d4d8; --c-personal-fg: #18181b; --c-side: #4f6288; --c-side-fg: #f1f4fb; } .a-work { --c: var(--c-work); --cf: var(--c-work-fg); } .a-personal { --c: var(--c-personal); --cf: var(--c-personal-fg); } .a-side { --c: var(--c-side); --cf: var(--c-side-fg); } .board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .board-head .tt { font-size: 17px; font-weight: 600; letter-spacing: -.012em; color: var(--ink); } .board-head .sub { margin-top: 2px; font-size: 12.5px; color: var(--muted-foreground); } .pill { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; flex: none; background: color-mix(in oklab, var(--accent) 12%, var(--card)); color: var(--accent); font: 500 12px var(--font-mono); white-space: nowrap; } .lab-say { margin-top: 18px; font-size: 18px; line-height: 1.4; letter-spacing: -.01em; color: var(--foreground); min-height: 26px; } .nm { font-weight: 600; color: var(--ink); box-shadow: inset 0 -.42em 0 color-mix(in oklab, var(--c) 38%, transparent); } .strip-wrap { position: relative; margin-top: 26px; } .strip { display: flex; gap: 3px; height: 82px; } .seg { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; padding: 0 12px; border-radius: 12px; overflow: hidden; white-space: nowrap; color: var(--cf); background: linear-gradient(180deg, color-mix(in oklab, var(--c) 86%, #fff), var(--c)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 6px 14px -10px var(--c); transform-origin: left center; animation: segIn .5s cubic-bezier(.2, .8, .2, 1) both; } .seg .n { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: clip; } .seg .t { font: 500 10.5px var(--font-mono); opacity: .82; overflow: hidden; text-overflow: ellipsis; } @keyframes segIn { from { opacity: .3; transform: scaleX(.6); } } .dots { position: absolute; inset: 0; pointer-events: none; } .dots i { position: absolute; top: -9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); } .axis { display: flex; justify-content: space-between; margin-top: 10px; font: 400 11px var(--font-mono); color: var(--muted-foreground); } .who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 18px 0 0; padding: 0; } .who li { border: 1px solid var(--border); border-radius: 12px; background: var(--background); padding: 12px 14px; display: grid; gap: 8px; min-width: 0; } .who .wh { display: flex; align-items: center; gap: 9px; min-width: 0; } .who .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; } .who b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.2; } .who small { display: block; font: 400 11px var(--font-mono); color: var(--muted-foreground); } .who strong { font: 600 19px/1 var(--font-sans); letter-spacing: -.02em; color: var(--ink); } .who strong em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted-foreground); margin-left: 1px; } .share { height: 5px; border-radius: 999px; background: var(--track); overflow: hidden; } .share i { display: block; height: 100%; border-radius: 999px; background: var(--c); transition: width .45s cubic-bezier(.2, .8, .2, 1); } details.more { border: 0; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); } details.more:last-of-type { border-bottom: 0; } details.more summary { padding: 0; font-size: 13px; font-weight: 500; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; } details.more summary::after { content: "\203A"; font: 400 16px var(--font-mono); color: var(--accent); transition: transform .15s; } details.more[open] summary::after { content: "\203A"; transform: rotate(90deg); } details.more .log { margin-top: 12px; padding-top: 0; border-top: 0; } @media (prefers-reduced-motion: reduce) { .seg { animation: none; } } @media (max-width: 940px) { .lab { padding: 16px; gap: 16px; } } @media (max-width: 480px) { .lab { padding: 10px; border-radius: 18px; } .board { padding: 16px; } .lab-say { font-size: 16px; min-height: 46px; } .strip { height: 64px; } .who { gap: 8px; } .who li { padding: 10px; } .who small { display: none; } .who strong { font-size: 16px; } .axis span:nth-child(2), .axis span:nth-child(3) { display: none; } } /* hero popover is built once; the active card swaps its detail block with CSS */ .acard:not(.active) .alimits { display: none; } .acard.active .climits, .acard.active .aswitch { display: none; } /* the release line is one short sentence: keep it on one row and never strand "report" on its own line */ .hero .dl-note { max-width: 46em; } .dl-note [data-vt] { white-space: nowrap; } /* quality-mark style link to the public VirusTotal report: neutral shield, no tick and no green (it is a report, not a verdict) */ .dl-note a.vt-badge { display: inline-flex; align-items: center; gap: 6px; vertical-align: 1px; margin-left: 4px; padding: 1px 10px 1px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--secondary-foreground); font-size: 12px; font-weight: 500; line-height: 20px; text-decoration: none; transition: border-color .15s, color .15s; } .dl-note a.vt-badge i { color: var(--accent); font-size: 11px; } .dl-note a.vt-badge:hover { border-color: var(--accent); color: var(--foreground); text-decoration: none; } /* Custom dropdown that replaces the native