/* ============================================================ UX Case Study — shared design system Per-page accent set via ============================================================ */ :root{ --ink:#0F172A; --muted:#5B6472; --dim:#8A93A3; --bg:#ffffff; --soft:#F5F7FB; --soft2:#EEF2F8; --line:#E6E9F0; --accent:#5B7CFA; --accent2:#0EA5A5; --ff:'Inter',system-ui,-apple-system,sans-serif; --fd:'Plus Jakarta Sans',var(--ff); --maxw:940px; --shadow:0 10px 30px -12px rgba(15,23,42,.15); --radius:18px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--ff);color:var(--ink);background:var(--soft);line-height:1.7;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit} /* top bar */ .topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .topbar .in{max-width:var(--maxw);margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between} .topbar a.back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none} .topbar a.back:hover{color:var(--accent)} .topbar .brand{font-family:var(--fd);font-weight:800;font-size:15px;letter-spacing:-.02em} .topbar .brand b{color:var(--accent)} /* hero */ .hero{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;position:relative;overflow:hidden} .hero::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.12);top:-160px;right:-120px} .hero .in{max-width:var(--maxw);margin:0 auto;padding:64px 28px 56px;position:relative;z-index:1} .hero .tag{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.2);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} .hero h1{font-family:var(--fd);font-size:clamp(2.1rem,5vw,3.3rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:18px 0 12px;max-width:760px} .hero p.sub{font-size:1.15rem;max-width:620px;color:rgba(255,255,255,.94)} .hero .meta{display:flex;flex-wrap:wrap;gap:26px;margin-top:34px} .hero .meta div .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.8;font-weight:700} .hero .meta div .v{font-size:15px;font-weight:600;margin-top:3px} /* layout */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} main{background:var(--bg)} section.blk{padding:56px 0;border-bottom:1px solid var(--line)} section.blk:last-child{border-bottom:0} .kicker{display:flex;align-items:center;gap:12px;margin-bottom:14px} .kicker .num{font-family:var(--fd);font-weight:800;font-size:14px;color:#fff;background:var(--accent);width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0} .kicker h2{font-family:var(--fd);font-size:1.7rem;font-weight:800;letter-spacing:-.02em} .lead{font-size:1.12rem;color:var(--muted);max-width:720px;margin-bottom:8px} p{margin:14px 0;color:#33404f} p strong{color:var(--ink)} .small{font-size:.9rem;color:var(--dim)} h3.sub{font-family:var(--fd);font-size:1.12rem;font-weight:700;margin:26px 0 10px} /* problem statement callout */ .statement{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,#fff),color-mix(in srgb,var(--accent2) 8%,#fff));border:1px solid color-mix(in srgb,var(--accent) 22%,#fff);border-left:5px solid var(--accent);border-radius:14px;padding:24px 26px;margin:22px 0} .statement .lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--accent)} .statement p{font-family:var(--fd);font-size:1.35rem;font-weight:600;line-height:1.4;color:var(--ink);margin:8px 0 0} /* stat grid */ .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:22px 0} .stat{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:20px} .stat .n{font-family:var(--fd);font-size:2rem;font-weight:800;letter-spacing:-.02em;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .stat .l{font-size:.85rem;color:var(--muted);margin-top:4px} /* insights list */ .insights{list-style:none;display:grid;gap:12px;margin:18px 0} .insights li{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;gap:14px} .insights li .ic{flex-shrink:0;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent);display:grid;place-items:center;font-weight:800;font-family:var(--fd)} .insights li b{display:block;color:var(--ink)} .insights li span{color:var(--muted);font-size:.95rem} /* personas */ .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin:22px 0} .persona{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:24px} .persona .top{display:flex;align-items:center;gap:14px;margin-bottom:16px} .persona .avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:grid;place-items:center;font-family:var(--fd);font-weight:800;font-size:20px} .persona .top h4{font-family:var(--fd);font-size:1.15rem;font-weight:700} .persona .top .role{font-size:.85rem;color:var(--muted)} .persona .quote{font-style:italic;color:var(--ink);border-left:3px solid var(--accent);padding-left:12px;margin:14px 0;font-size:.98rem} .persona .row{margin-top:12px} .persona .row .h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--dim);margin-bottom:5px} .persona ul{list-style:none;display:grid;gap:5px} .persona ul li{font-size:.92rem;color:#33404f;padding-left:18px;position:relative} .persona ul li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--accent)} .persona .goals li::before{background:var(--accent2)} /* user flow */ .flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin:22px 0} .flow .step{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:120px;flex:1;position:relative} .flow .step .s{font-family:var(--fd);font-size:11px;font-weight:800;color:var(--accent)} .flow .step .t{font-weight:600;font-size:.95rem;margin-top:2px} .flow .arrow{display:grid;place-items:center;color:var(--dim);padding:0 10px;font-size:20px;font-weight:700} @media(max-width:640px){.flow{flex-direction:column}.flow .arrow{transform:rotate(90deg);padding:6px 0}} /* wireframes (CSS low-fi) */ .wire-row{display:flex;gap:22px;flex-wrap:wrap;margin:22px 0;align-items:flex-start} .wf{background:#fff;border:2px dashed #C9D2E0;border-radius:16px;padding:14px;flex-shrink:0} .wf.phone{width:190px} .wf.desk{width:340px;border-radius:12px} .wf-cap{font-size:.8rem;color:var(--dim);text-align:center;margin-top:8px;font-weight:600} .sk{background:#E3E8F0;border-radius:6px} .sk.bar{height:10px;margin:7px 0} .sk.bar.sm{width:55%}.sk.bar.md{width:75%} .sk.box{height:64px;margin:8px 0;border-radius:10px} .sk.tall{height:96px} .sk.circle{width:36px;height:36px;border-radius:50%} .sk.pill{height:34px;border-radius:999px;width:60%} .sk.accent{background:color-mix(in srgb,var(--accent) 30%,#E3E8F0)} .wf .rowf{display:flex;gap:8px;align-items:center} .wf .rowf .sk.bar{flex:1;margin:0} .wf .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px} .wf .grid3 .sk{height:40px;margin:0} /* figures / device frames */ .figure{margin:24px 0} .figure figcaption{font-size:.88rem;color:var(--dim);text-align:center;margin-top:12px} .shots{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;align-items:flex-start} .device{background:#fff;border:1px solid var(--line);border-radius:26px;padding:10px;box-shadow:var(--shadow)} .device.phone{width:270px;border-radius:34px} .device.phone img{border-radius:26px} .device.desktop{width:100%;max-width:820px;border-radius:14px;padding:0;overflow:hidden} .device.desktop .bar{background:var(--soft2);padding:10px 14px;display:flex;gap:6px;border-bottom:1px solid var(--line)} .device.desktop .bar i{width:11px;height:11px;border-radius:50%;background:#CBD3E0;display:block} .device.desktop img{width:100%} /* iterations before/after */ .iter{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:14px 0} .iter .tagline{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px} .iter b{color:var(--ink)} /* testing table */ .tbl{width:100%;border-collapse:collapse;margin:20px 0;font-size:.95rem;border:1px solid var(--line);border-radius:12px;overflow:hidden} .tbl th,.tbl td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)} .tbl thead th{background:var(--soft);font-family:var(--fd);font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .tbl tbody tr:last-child td{border-bottom:0} .tbl td .good{color:#16A34A;font-weight:700} .tbl td .warn{color:#D97706;font-weight:700} /* tags */ .tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0} .tags span{font-size:.82rem;font-weight:600;color:var(--muted);background:var(--soft);border:1px solid var(--line);padding:6px 12px;border-radius:999px} /* reflection */ .reflect{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,#fff),color-mix(in srgb,var(--accent2) 7%,#fff));border:1px solid var(--line);border-radius:16px;padding:26px} /* footer */ .foot{max-width:var(--maxw);margin:0 auto;padding:40px 28px 60px;color:var(--dim);font-size:.9rem;text-align:center} .foot a{color:var(--accent);text-decoration:none;font-weight:600} /* section nav dots */ .dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:11px} .dots a{width:10px;height:10px;border-radius:50%;background:#CBD3E0;transition:.25s;position:relative} .dots a:hover,.dots a.on{background:var(--accent);transform:scale(1.3)} .dots a span{position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:12px;font-weight:600;background:var(--ink);color:#fff;padding:4px 9px;border-radius:7px;opacity:0;pointer-events:none;transition:.2s} .dots a:hover span{opacity:1} @media(max-width:1200px){.dots{display:none}} @media print{ @page{margin:12mm} html,body{background:#fff} body{-webkit-print-color-adjust:exact;print-color-adjust:exact} .topbar,.dots{display:none} a{text-decoration:none} .hero{border-radius:0} .hero .in{padding:38px 0} .hero::after{display:none} section.blk{padding:22px 0} .kicker,h2,h3.sub{break-after:avoid} section.blk,.figure,.wire-row,.flow,.stat-grid,.grid-2,.persona,.stat,.wf,.device,.iter,.reflect,.statement,.insights li,.tbl,.tbl tr{break-inside:avoid} .device,.stat,.persona,.wf{box-shadow:none} }