/* ============================================================ W&B one-pager site — design system Themes switch on ============================================================ */ :root { /* neutral base (shared) */ --ink: #171717; --ink-soft: #3f3f46; --muted: #6b7280; --bg: #ffffff; --bg-alt: #fbfaf7; --line: rgba(0, 0, 0, 0.08); --line-strong: rgba(0, 0, 0, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08); --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.12); --radius: 18px; --radius-sm: 12px; --maxw: 1080px; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; /* the two theme palettes, always available so cross-links can borrow */ --yellow: #ffcc33; --yellow-strong: #e8a400; --yellow-tint: #fff9e8; --yellow-grad-a: #ffd75e; --yellow-grad-b: #ffc53d; --blue: #2e90fa; --blue-strong: #3b82e6; --blue-tint: #f3f9ff; --blue-grad-a: #ebeffc; --blue-grad-b: #e1e9fb; } /* active theme aliases */ body[data-theme="product"] { --accent: var(--yellow); --accent-strong: var(--yellow-strong); --accent-tint: var(--yellow-tint); --grad-a: var(--yellow-grad-a); --grad-b: var(--yellow-grad-b); --accent-ink: #4a3500; } body[data-theme="usecase"] { --accent: #62aef7; --accent-strong: var(--blue-strong); --accent-tint: var(--blue-tint); --grad-a: var(--blue-grad-a); --grad-b: var(--blue-grad-b); --accent-ink: #06305f; } /* ---------- reset-ish ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.75); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand-group { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .home-up { color: var(--muted); font-weight: 600; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; transition: color 0.15s ease; } .home-up:hover { color: var(--ink); } .home-up-mini { display: none; } .brand-sep { color: var(--line-strong); font-weight: 400; } @media (max-width: 640px) { .home-up-full { display: none; } .home-up-mini { display: inline; font-size: 18px; } .brand-sep { display: none; } .brand-group { gap: 6px; } } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; font-size: 17px; } .brand .dot { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--yellow-grad-a), var(--yellow-strong)); display: inline-block; box-shadow: var(--shadow-sm); } /* product PNG icons (icons/products/.png) fill their container like the SVGs */ .pico { display: block; width: 100%; height: 100%; object-fit: contain; } .chip .pico { width: 14px; height: 14px; } .brand-logo { height: 44px; width: auto; display: block; } .brand-fallback { display: none; align-items: center; gap: 10px; } @media (max-width: 640px) { .brand-logo { height: 34px; } } .nav { display: flex; align-items: center; gap: 8px; } .nav a { padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; transition: background 0.15s, color 0.15s; } @media (max-width: 640px) { .nav { gap: 2px; } .nav a { padding: 8px 8px; } .nav a.ext { display: none; } } .nav a:hover { background: var(--bg-alt); color: var(--ink); } .nav a.is-active[data-theme-nav="product"] { color: var(--yellow-strong); background: var(--yellow-tint); } .nav a.is-active[data-theme-nav="usecase"] { color: var(--blue-strong); background: var(--blue-tint); } .nav a.ext { color: var(--muted); } .nav a.ext::after { content: " ↗"; font-size: 11px; opacity: 0.7; } .lang-switch { display: inline-flex; gap: 2px; margin-left: 6px; padding: 2px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); } .lang-switch button { border: 0; background: transparent; cursor: pointer; font: 700 12px var(--font); color: var(--muted); padding: 4px 9px; border-radius: 999px; line-height: 1; } .lang-switch button.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); } .lang-switch button:hover:not(.is-active) { color: var(--ink); } /* ---------- hero ---------- */ .hero { padding: 72px 0 40px; text-align: center; background: radial-gradient(1100px 420px at 50% -10%, var(--accent-tint), transparent 70%); } .hero h1 { font-size: clamp(30px, 5vw, 48px); font-weight: 800; max-width: 22ch; margin: 0 auto; } .hero p.lead { margin: 18px auto 0; font-size: clamp(16px, 2.2vw, 19px); color: var(--ink-soft); max-width: 68ch; } .hero .cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; border: 1px solid transparent; cursor: pointer; transition: transform 0.12s, box-shadow 0.15s, background 0.15s; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); } .btn-primary:hover { box-shadow: var(--shadow-md); } .btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-strong); } .btn-ghost:hover { background: var(--bg-alt); } .btn-blue { background: var(--blue); color: #fff; box-shadow: var(--shadow-sm); } .btn-blue:hover { box-shadow: var(--shadow-md); } .btn-yellow { background: var(--yellow); color: #4a3500; box-shadow: var(--shadow-sm); } /* ---------- section ---------- */ section.block { padding: 40px 0; } .group-head { margin-bottom: 22px; } .group-head h2 { font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 10px; } .group-head h2::before { content: ""; width: 10px; height: 22px; border-radius: 4px; background: linear-gradient(var(--grad-a), var(--grad-b)); } .group-head p { margin: 6px 0 0; color: var(--muted); font-size: 15px; } /* ---------- card grid ---------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 860px) { .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } } .card { position: relative; display: flex; flex-direction: column; padding: 24px; border-radius: var(--radius); background: linear-gradient(160deg, var(--grad-a), var(--grad-b)); color: var(--accent-ink); box-shadow: var(--shadow-sm); border: 1px solid rgba(0, 0, 0, 0.06); transition: transform 0.16s ease, box-shadow 0.16s ease; overflow: hidden; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .card .icon { width: 54px; height: 54px; margin-bottom: 16px; color: var(--accent-ink); } .card .icon svg { width: 100%; height: 100%; } .card h3 { font-size: 20px; font-weight: 800; } .card .tagline { font-style: italic; font-weight: 700; margin-top: 4px; opacity: 0.85; } .card .desc { margin-top: 10px; font-size: 14.5px; line-height: 1.55; opacity: 0.92; } .card .more { margin-top: auto; padding-top: 16px; font-weight: 700; font-size: 14px; } .card .more::after { content: " →"; transition: margin 0.15s; } .card:hover .more::after { margin-left: 4px; } /* "Others" tile — neutral, points to the Challenge → Solution table */ .card.card-others { background: var(--bg-alt); color: var(--ink); border: 1px dashed var(--line-strong); box-shadow: none; } .card.card-others .icon { color: var(--accent-strong); } .card.card-others .more { color: var(--accent-strong); } .card.card-others:hover { border-color: var(--accent); } /* number badge (use case cards) */ .card .num { position: absolute; top: 18px; right: 20px; font-weight: 800; font-size: 13px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); color: var(--accent-ink); } .card .badge { display: inline-block; margin-top: 12px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); width: fit-content; } /* chips */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid transparent; transition: transform 0.12s, box-shadow 0.12s; } .chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .chip svg { width: 14px; height: 14px; } .chip-yellow { background: var(--yellow-tint); color: var(--yellow-strong); border-color: rgba(232, 164, 0, 0.35); } .chip-blue { background: var(--blue-tint); color: var(--blue-strong); border-color: rgba(59, 130, 230, 0.32); } /* ---------- detail page ---------- */ .breadcrumb { padding-top: 28px; font-size: 13.5px; color: var(--muted); font-weight: 600; } .breadcrumb a:hover { color: var(--ink); } .breadcrumb .sep { margin: 0 8px; opacity: 0.5; } .detail-head { padding: 20px 0 8px; } .detail-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 13px; letter-spacing: 0.02em; color: var(--accent-strong); text-transform: uppercase; } .detail-head .eyebrow .num { background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: 2px 8px; font-size: 13px; } .detail-head .eyebrow .icon-inline { display: inline-flex; width: 16px; height: 16px; } .detail-head .eyebrow .icon-inline svg { width: 100%; height: 100%; } .detail-head h1 { font-size: clamp(28px, 4.5vw, 42px); font-weight: 800; margin-top: 14px; } .detail-head .tagline { font-style: italic; font-weight: 700; color: var(--ink-soft); font-size: 19px; margin-top: 6px; } .detail-head .intro { margin-top: 14px; font-size: 17px; color: var(--ink-soft); } .detail-head .badge-inline { display: inline-block; margin-left: 10px; vertical-align: middle; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-strong); } /* hero image placeholder panel */ .hero-panel { margin: 28px 0 8px; border-radius: var(--radius); min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--accent-ink); background: linear-gradient(160deg, var(--grad-a), var(--grad-b)); border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: var(--shadow-md); position: relative; overflow: hidden; } .hero-panel::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 200px at 20% 0%, rgba(255,255,255,0.4), transparent 60%); pointer-events: none; } .hero-panel .big-icon { width: 72px; height: 72px; } .hero-panel .big-icon svg { width: 100%; height: 100%; display: block; } .hero-panel .label { font-weight: 800; font-size: 22px; } .hero-panel .hint { font-size: 12.5px; opacity: 0.7; font-weight: 600; } /* real screenshot (when present) covers the placeholder; removed via onerror if missing */ /* when a real screenshot is present, show the whole image (no cropping); the panel grows to the image height and the placeholder content is hidden */ .hero-panel .hero-img { position: static; display: block; width: 100%; height: auto; background: #fff; } .hero-panel:has(.hero-img) { min-height: 0; padding: 0; background: #fff; } .hero-panel:has(.hero-img)::after { display: none; } .hero-panel:has(.hero-img) .big-icon, .hero-panel:has(.hero-img) .label, .hero-panel:has(.hero-img) .hint { display: none; } /* markdown body */ .md { font-size: 16.5px; color: var(--ink-soft); } .md h2 { font-size: 22px; font-weight: 800; color: var(--ink); margin: 36px 0 14px; display: flex; align-items: center; gap: 10px; } .md h2::before { content: ""; width: 8px; height: 20px; border-radius: 4px; background: linear-gradient(var(--grad-a), var(--grad-b)); } .md h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 26px 0 10px; } .md p { margin: 12px 0; } .md ul, .md ol { margin: 12px 0; padding-left: 4px; } .md ul { list-style: none; } .md ul li { position: relative; padding-left: 30px; margin: 10px 0; } .md ul li::before { content: ""; position: absolute; left: 6px; top: 11px; width: 8px; height: 8px; border-radius: 3px; background: var(--accent); } .md ol { counter-reset: step; list-style: none; padding-left: 0; } .md ol li { position: relative; padding-left: 46px; margin: 14px 0; min-height: 30px; } .md ol li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; } .md strong { color: var(--ink); font-weight: 700; } .md a { color: var(--accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .md code { background: var(--bg-alt); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; font-size: 0.9em; } /* challenge (use-case detail) — prose, shown in the head above the hero image */ .detail-head .challenge-lead { margin-top: 20px; } .detail-head .challenge-lead .label { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .detail-head .challenge-lead .label::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--muted); } .detail-head .challenge-lead p { margin: 8px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); } /* supporting note under the solution steps */ .md p.supporting { font-size: 14.5px; color: var(--muted); background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; margin-top: 16px; } /* outcome list uses check markers instead of the default square bullet */ .md ul.outcome { list-style: none; } .md ul.outcome li::before { content: "✓"; left: 3px; top: 1px; width: auto; height: auto; background: transparent; color: var(--accent-strong); font-weight: 900; font-size: 15px; border-radius: 0; } /* related / used section */ .related { margin: 40px 0 8px; } .related h2 { font-size: 20px; font-weight: 800; margin-bottom: 4px; } .related p.sub { color: var(--muted); font-size: 14px; margin: 0 0 14px; } /* detail CTA + prev/next */ .detail-cta { margin: 30px 0; display: flex; gap: 12px; flex-wrap: wrap; } .pager { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 20px; padding-top: 24px; border-top: 1px solid var(--line); } .pager a { flex: 1; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--bg-alt); border: 1px solid var(--line); transition: border-color 0.15s, transform 0.12s; } .pager a:hover { border-color: var(--accent); transform: translateY(-2px); } .pager .dir { font-size: 12px; color: var(--muted); font-weight: 700; } .pager .name { font-weight: 700; margin-top: 2px; } .pager a.next { text-align: right; } /* ---------- "Why W&B" band (home) ---------- */ .why-head { margin: 0 0 28px; } .why-head h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; display: flex; align-items: center; gap: 10px; } .why-head h2::before { content: ""; width: 10px; height: 22px; border-radius: 4px; flex: 0 0 auto; background: linear-gradient(var(--grad-a), var(--grad-b)); } .why-positioning { margin: 14px 0 0; font-size: 17px; line-height: 1.7; color: var(--ink-soft); } .why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } @media (max-width: 820px) { .why-grid { grid-template-columns: 1fr; } } .pillar { padding: 22px; border-radius: var(--radius); background: var(--bg-alt); border: 1px solid var(--line); } .pillar h3 { font-size: 16.5px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 9px; } .pillar h3::before { content: ""; width: 8px; height: 20px; border-radius: 4px; flex: 0 0 auto; background: linear-gradient(var(--grad-a), var(--grad-b)); } .pillar ul { list-style: none; margin: 0; padding: 0; } .pillar li { position: relative; padding-left: 20px; margin: 10px 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; } .pillar li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); } .quote { margin: 36px auto 0; max-width: 820px; text-align: center; } .quote p { margin: 0; font-size: 19px; font-style: italic; color: var(--ink); line-height: 1.6; } .quote p::before { content: "“"; } .quote p::after { content: "”"; } .quote cite { display: block; margin-top: 14px; font-style: normal; font-weight: 700; color: var(--muted); font-size: 14px; } /* tighten spacing around the Challenges banner on the use-cases page */ .cs-lead { padding: 0; } body[data-page="use-cases"] .hero { padding-bottom: 24px; } .cs-lead + .block { padding-top: 24px; } /* ---------- floating contact button (all pages) ---------- */ .fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--yellow); color: #4a3500; font-weight: 800; font-size: 14px; box-shadow: var(--shadow-lg); transition: transform 0.12s, box-shadow 0.15s; } .fab:hover { transform: translateY(-2px); box-shadow: 0 22px 46px rgba(0, 0, 0, 0.2); } .fab-ic { width: 18px; height: 18px; } @media (max-width: 560px) { .fab { padding: 13px; right: 16px; bottom: 16px; } .fab-label { display: none; } } /* ---------- Challenges banner (use-cases page, under the hero) ---------- */ .cs-lead { padding-top: 8px; padding-bottom: 8px; } .cs-banner { display: flex; align-items: center; gap: 18px; padding: 18px 24px; border-radius: var(--radius); background: var(--bg-alt); border: 1px dashed var(--line-strong); transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s; } .cs-banner:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .cs-banner-icon { width: 40px; height: 40px; color: var(--accent-strong); flex: 0 0 auto; } .cs-banner-icon svg { width: 100%; height: 100%; } .cs-banner-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; } .cs-banner-txt strong { font-size: 18px; font-weight: 800; color: var(--ink); } .cs-banner-txt span { color: var(--muted); font-size: 14.5px; } .cs-banner-arrow { color: var(--accent-strong); font-weight: 800; font-size: 14px; white-space: nowrap; } @media (max-width: 560px) { .cs-banner-arrow { display: none; } } /* ---------- Challenge → Solution table (use-cases page) ---------- */ .cs-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .cs-table { width: 100%; border-collapse: collapse; } .cs-table th, .cs-table td { text-align: left; padding: 14px 20px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); vertical-align: middle; } .cs-table thead th { border-top: 0; background: var(--accent-tint); color: var(--ink); font-weight: 800; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; } .cs-table td { color: var(--ink); } .cs-table td.sol, .cs-table th.sol { width: 130px; } .cs-table td.sol .chip { white-space: nowrap; } .cs-table td.feat, .cs-table th.feat { width: 120px; white-space: nowrap; } .cs-table td.feat { font-weight: 700; color: var(--ink-soft); } .cs-table td.feat a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; } .cs-table td.feat a:hover { color: var(--accent); } .cs-table tbody tr:hover td { background: var(--bg-alt); } @media (max-width: 640px) { .cs-wrap { overflow-x: auto; } .cs-table { min-width: 620px; } } /* ---------- bridge strip ---------- */ .bridge { padding: 20px 0 60px; } .bridge .inner { border-radius: var(--radius); padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .bridge.to-usecase .inner { background: var(--blue-tint); border: 1px solid rgba(24,88,196,0.18); } .bridge.to-product .inner { background: var(--yellow-tint); border: 1px solid rgba(232,164,0,0.25); } .bridge h3 { font-size: 20px; font-weight: 800; } .bridge p { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; } /* ---------- contact block (detail pages) ---------- */ .contact { margin: 34px 0 8px; border-radius: var(--radius); padding: 26px 28px; background: var(--accent-tint); border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .contact h3 { font-size: 19px; font-weight: 800; } .contact p { margin: 5px 0 0; color: var(--ink-soft); font-size: 14.5px; } .contact .btn { white-space: nowrap; } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--line); background: var(--bg-alt); padding: 36px 0; color: var(--muted); font-size: 14px; } .site-footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .site-footer a { font-weight: 600; color: var(--ink-soft); } .site-footer a:hover { color: var(--ink); } .site-footer .foot-links { display: flex; gap: 18px; flex-wrap: wrap; } .site-footer .foot-contact { display: flex; gap: 20px; flex-wrap: wrap; } .site-footer .foot-contact a { color: var(--accent-strong); font-weight: 700; } /* ---------- states ---------- */ .state { max-width: 640px; margin: 80px auto; text-align: center; padding: 0 24px; } .state h2 { font-size: 24px; font-weight: 800; } .state p { color: var(--muted); margin-top: 10px; } .state code { background: var(--bg-alt); padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); } /* ---------- responsive ---------- */ @media (max-width: 640px) { .site-header .wrap { height: 56px; } .nav a { padding: 7px 9px; font-size: 13px; } .nav a.ext { display: none; } .hero { padding: 48px 0 28px; } .bridge .inner { flex-direction: column; align-items: flex-start; } .pager { flex-direction: column; } .pager a.next { text-align: left; } }