/* ============================================================= BARONE / SPINAL CARE — funnel styles Dark editorial. Premium. Sales-letter rhythm. ============================================================= */ :root { /* base — overridden per palette below */ --bg: #0d0c0a; --bg-elev: #161410; --bg-card: #18150f; --fg: #f3ede0; --fg-soft: #d8d1c1; --fg-mute: #8a8475; --fg-faint: #5d574b; --hair: rgba(243, 237, 224, 0.10); --hair-strong: rgba(243, 237, 224, 0.22); --accent: #d4a358; --accent-ink:#1a1306; /* type */ --serif: "Instrument Serif", "EB Garamond", Georgia, serif; --sans: "Geist", "Söhne", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Roboto Mono", monospace; /* rhythm */ --section-y: 140px; --gutter: clamp(24px, 5vw, 80px); --max: 1320px; --rule: 0.5px; } /* palette variants applied at */ html[data-palette="amber"] { --bg:#0d0c0a; --bg-elev:#161410; --bg-card:#18150f; --fg:#f3ede0; --fg-soft:#d8d1c1; --fg-mute:#8a8475; --fg-faint:#5d574b; --hair:rgba(243,237,224,.10); --hair-strong:rgba(243,237,224,.22); --accent:#d4a358; --accent-ink:#1a1306; } html[data-palette="oxblood"] { --bg:#0b0908; --bg-elev:#15110f; --bg-card:#17120f; --fg:#f1ebe5; --fg-soft:#d4cbc2; --fg-mute:#867d72; --fg-faint:#5a5148; --hair:rgba(241,235,229,.10); --hair-strong:rgba(241,235,229,.22); --accent:#b25346; --accent-ink:#1a0807; } html[data-palette="ice"] { --bg:#0a0c0e; --bg-elev:#101418; --bg-card:#11161b; --fg:#ecf0f4; --fg-soft:#cdd5dd; --fg-mute:#7e8893; --fg-faint:#525a64; --hair:rgba(236,240,244,.10); --hair-strong:rgba(236,240,244,.22); --accent:#7ea9c4; --accent-ink:#0a141c; } /* density */ html[data-density="compact"] { --section-y: 96px; } html[data-density="regular"] { --section-y: 140px; } html[data-density="comfy"] { --section-y: 200px; } /* ───── reset ───── */ *,*::before,*::after { box-sizing:border-box; } html,body { margin:0; padding:0; } body { background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"ss01","cv11"; } img,svg { display:block; max-width:100%; } a { color:inherit; text-decoration:none; } button { font-family:inherit; cursor:pointer; } /* ───── typography ───── */ .serif { font-family:var(--serif); font-weight:400; letter-spacing:-0.01em; } .mono { font-family:var(--mono); font-weight:400; letter-spacing:0.02em; } .eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--fg-mute); } .eyebrow .dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:10px; vertical-align:1px; } h1, h2, h3, h4 { font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-0.015em; line-height:1.02; } h1 { font-size:clamp(44px, 5.4vw, 84px); line-height:1.18; } h2 { font-size:clamp(36px, 4vw, 60px); line-height:1.05; } h3 { font-size:clamp(26px, 2.4vw, 38px); line-height:1.15; } h4 { font-size:clamp(20px, 2vw, 28px); line-height:1.15; } p { margin:0; color:var(--fg-soft); text-wrap:pretty; } .lede { font-size:clamp(18px, 1.5vw, 22px); line-height:1.5; color:var(--fg-soft); max-width:58ch; } em, .italic { font-style:italic; color:var(--accent); font-family:var(--serif); } /* ───── layout ───── */ .wrap { width:100%; max-width:var(--max); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); } section { padding-top:var(--section-y); padding-bottom:var(--section-y); position:relative; } section + section { border-top:var(--rule) solid var(--hair); } .row { display:flex; } .between { justify-content:space-between; align-items:center; } .col { display:flex; flex-direction:column; } .grid { display:grid; gap:24px; } /* ───── nav ───── */ .nav { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:space-between; align-items:center; padding:18px var(--gutter); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); background:linear-gradient(to bottom, rgba(13,12,10,.6), rgba(13,12,10,.2)); border-bottom:var(--rule) solid var(--hair); } .brand { display:flex; align-items:center; gap:14px; } .brand .mark { width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--accent) 0%, var(--accent) 28%, transparent 60%), radial-gradient(circle at 70% 70%, rgba(255,255,255,0.05) 0%, transparent 60%); border:0.5px solid var(--hair-strong); position:relative; } .brand .mark::after{ content:""; position:absolute; inset:6px; border-radius:50%; border:0.5px solid rgba(255,255,255,0.15); } .brand .wordmark { display:flex; flex-direction:column; line-height:1; } .brand .wordmark .name { font-family:var(--serif); font-size:22px; letter-spacing:0.01em; } .brand .wordmark .div { font-family:var(--mono); font-size:9.5px; letter-spacing:0.25em; color:var(--fg-mute); margin-top:4px; text-transform:uppercase; } .nav-links { display:flex; gap:32px; } .nav-links a { font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--fg-soft); } .nav-links a:hover { color:var(--accent); } .btn { display:inline-flex; align-items:center; gap:10px; padding:13px 22px; font-family:var(--mono); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; border-radius:999px; border:0.5px solid var(--accent); background:var(--accent); color:var(--accent-ink); transition:transform 0.18s ease, background 0.18s ease; } .btn:hover { transform:translateY(-1px); } .btn.ghost { background:transparent; color:var(--fg); border-color:var(--hair-strong); } .btn.ghost:hover { border-color:var(--fg); } .btn .arrow { display:inline-block; transition:transform 0.18s ease; } .btn:hover .arrow { transform:translateX(3px); } /* ───── hero ───── */ .hero { padding-top:200px; padding-bottom:120px; position:relative; overflow:hidden; } .hero::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse 60% 50% at 75% 30%, color-mix(in oklab, var(--accent) 12%, transparent) 0%, transparent 60%), radial-gradient(ellipse 80% 60% at 0% 100%, rgba(255,255,255,0.03) 0%, transparent 50%); } .hero-grid { position:relative; display:grid; grid-template-columns: 1.6fr 0.9fr; gap:64px; align-items:end; } .hero h1 .light { color:var(--fg-mute); font-style:normal; } .hero h1 .accent { color:var(--accent); } .hero .lede { margin-top:64px; } .hero-cta { margin-top:44px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; } .hero-cta .note { font-family:var(--mono); font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--fg-mute); } .hero-frame { position:relative; aspect-ratio: 9 / 14; border:0.5px solid var(--hair-strong); border-radius:18px; overflow:hidden; background:var(--bg-elev); box-shadow:0 60px 120px rgba(0,0,0,0.5); } .hero-frame .strip { position:absolute; inset:0; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.04) 14px 15px); } .hero-frame .meta { position:absolute; left:14px; right:14px; top:14px; display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; letter-spacing:0.18em; color:var(--fg-soft); text-transform:uppercase; } .hero-frame .badge { position:absolute; left:14px; bottom:14px; font-family:var(--mono); font-size:10px; letter-spacing:0.18em; color:var(--fg-mute); text-transform:uppercase; } .hero-frame .play { position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; border:0.5px solid var(--hair-strong); background:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); } .hero-frame .play::after { content:""; width:0; height:0; border-left:11px solid var(--fg); border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:3px; } /* ───── marquee strip ───── */ .strip-band { padding:36px 0; border-top:var(--rule) solid var(--hair); border-bottom:var(--rule) solid var(--hair); background:var(--bg-elev); } .strip-band .wrap { display:flex; align-items:center; justify-content:space-between; gap:48px; flex-wrap:wrap; } .strip-platforms span { white-space:nowrap; } .strip-label { font-family:var(--mono); font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--fg-mute); } .strip-platforms { display:flex; gap:48px; align-items:center; flex-wrap:wrap; } .strip-platforms span { font-family:var(--serif); font-size:24px; color:var(--fg-soft); letter-spacing:-0.01em; } .strip-platforms .sep { color:var(--fg-faint); font-size:14px; } /* ───── section label ───── */ .section-head { display:grid; grid-template-columns: 220px 1fr; gap:48px; margin-bottom:64px; align-items:start; } .section-head .idx { font-family:var(--mono); font-size:11px; letter-spacing:0.22em; color:var(--fg-mute); text-transform:uppercase; } .section-head .title { max-width:18ch; } .section-head .kicker { margin-top:24px; max-width:60ch; } /* ───── founder story ───── */ .founder-grid { display:grid; grid-template-columns: 0.9fr 1.1fr; gap:80px; align-items:start; } .portrait { aspect-ratio: 4/5; background:var(--bg-elev); border:0.5px solid var(--hair-strong); border-radius:6px; position:relative; overflow:hidden; } .portrait .strip { position:absolute; inset:0; background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,0.04) 22px 23px); } .portrait .label { position:absolute; left:18px; bottom:18px; font-family:var(--mono); font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--fg-mute); } .founder-body p { font-size:18px; line-height:1.65; margin-bottom:24px; max-width:54ch; } .founder-body p:first-child { font-family:var(--serif); font-size:clamp(24px, 2.4vw, 32px); line-height:1.3; color:var(--fg); } .signoff { display:flex; align-items:center; gap:18px; margin-top:48px; } .signoff .scribble { font-family:"Caveat", "Snell Roundhand", cursive; font-size:32px; color:var(--accent); } .signoff .who { font-family:var(--mono); font-size:11px; letter-spacing:0.18em; color:var(--fg-mute); text-transform:uppercase; } /* ───── how it works ───── */ .steps { display:grid; grid-template-columns: repeat(3, 1fr); gap:1px; background:var(--hair); border-top:var(--rule) solid var(--hair); border-bottom:var(--rule) solid var(--hair); } .step { background:var(--bg); padding:48px 36px 56px; display:flex; flex-direction:column; gap:24px; min-height:420px; } .step .num { font-family:var(--serif); font-size:96px; line-height:1; color:var(--accent); } .step h3 { letter-spacing:-0.02em; } .step p { font-size:15px; line-height:1.6; color:var(--fg-soft); } .step .tag { margin-top:auto; font-family:var(--mono); font-size:10px; letter-spacing:0.22em; color:var(--fg-mute); text-transform:uppercase; } /* ───── trend board ───── */ .trend-grid { display:grid; grid-template-columns: 1.05fr 1fr; gap:60px; } .trend-list { display:flex; flex-direction:column; } .trend-row { display:grid; grid-template-columns: 60px 1fr auto auto; gap:24px; align-items:center; padding:22px 0; border-bottom:var(--rule) solid var(--hair); } .trend-row:first-child { border-top:var(--rule) solid var(--hair); } .trend-row .rank { font-family:var(--mono); font-size:12px; color:var(--fg-mute); letter-spacing:0.1em; } .trend-row .name { font-family:var(--serif); font-size:22px; color:var(--fg); } .trend-row .meta { font-family:var(--mono); font-size:11px; color:var(--fg-mute); letter-spacing:0.1em; } .trend-row .delta { font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:0.05em; } .trend-row.cooling .delta { color:var(--fg-mute); } .trend-side { background:var(--bg-elev); border:0.5px solid var(--hair); border-radius:6px; padding:36px; } .trend-side h4 { margin-bottom:18px; } .trend-side .list { display:flex; flex-direction:column; gap:14px; } .trend-side .list .item { display:flex; gap:14px; align-items:flex-start; } .trend-side .list .item .dot { width:5px; height:5px; border-radius:50%; background:var(--accent); margin-top:9px; flex-shrink:0; } .trend-side .list .item p { font-size:14.5px; line-height:1.55; } .trend-side .meta-row { margin-top:28px; padding-top:20px; border-top:var(--rule) solid var(--hair); display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; letter-spacing:0.18em; color:var(--fg-mute); text-transform:uppercase; } /* ───── before/after ───── */ .ba-grid { display:grid; grid-template-columns: 1fr 1fr; gap:32px; } .ba-card { display:flex; flex-direction:column; gap:14px; } .ba-frame { position:relative; aspect-ratio: 9/16; background:var(--bg-elev); border:0.5px solid var(--hair-strong); border-radius:14px; overflow:hidden; } .ba-frame.before .strip { background:repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,0.03) 18px 19px); } .ba-frame.after .strip { background:repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in oklab, var(--accent) 8%, transparent) 12px 13px); } .ba-frame .strip { position:absolute; inset:0; } .ba-frame .stamp { position:absolute; top:14px; left:14px; font-family:var(--mono); font-size:10px; letter-spacing:0.22em; padding:5px 9px; border-radius:3px; text-transform:uppercase; background:rgba(0,0,0,0.5); color:var(--fg-soft); border:0.5px solid var(--hair-strong); } .ba-frame.after .stamp { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); } .ba-frame .caption { position:absolute; bottom:14px; left:14px; right:14px; font-family:var(--mono); font-size:10px; letter-spacing:0.18em; color:var(--fg-mute); text-transform:uppercase; } .ba-card .meta { display:flex; justify-content:space-between; align-items:baseline; } .ba-card .label { font-family:var(--serif); font-size:18px; color:var(--fg); } .ba-card .views { font-family:var(--mono); font-size:11px; color:var(--fg-mute); letter-spacing:0.1em; } .ba-row { display:grid; grid-template-columns: 1fr 1fr; gap:32px; margin-bottom:32px; } /* ───── dashboard ───── */ .dash { border:0.5px solid var(--hair-strong); border-radius:12px; background:var(--bg-elev); overflow:hidden; } .dash-head { display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:0.5px solid var(--hair); background:var(--bg-card); } .dash-head .title { font-family:var(--serif); font-size:22px; } .dash-head .controls { display:flex; gap:16px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--fg-mute); } .dash-head .controls span.active { color:var(--accent); } .dash-stats { display:grid; grid-template-columns: repeat(4, 1fr); border-bottom:0.5px solid var(--hair); } .dash-stat { padding:28px 24px; border-right:0.5px solid var(--hair); display:flex; flex-direction:column; gap:8px; } .dash-stat:last-child { border-right:none; } .dash-stat .lbl { font-family:var(--mono); font-size:10px; letter-spacing:0.22em; color:var(--fg-mute); text-transform:uppercase; } .dash-stat .num { font-family:var(--serif); font-size:40px; color:var(--fg); line-height:1; } .dash-stat .delta { font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:0.05em; } .dash-stat .delta.neg { color:var(--fg-mute); } .dash-body { display:grid; grid-template-columns: 1.6fr 1fr; } .dash-chart { padding:28px 24px; border-right:0.5px solid var(--hair); } .dash-chart .chead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; } .dash-chart .chead .t { font-family:var(--mono); font-size:11px; letter-spacing:0.18em; color:var(--fg-mute); text-transform:uppercase; } .dash-chart .chead .v { font-family:var(--serif); font-size:28px; } .dash-chart svg { width:100%; height:220px; } .dash-side { padding:28px 24px; display:flex; flex-direction:column; gap:18px; } .dash-side .head { font-family:var(--mono); font-size:10.5px; letter-spacing:0.22em; color:var(--fg-mute); text-transform:uppercase; } .dash-side .item { display:grid; grid-template-columns: 40px 1fr auto; gap:14px; align-items:center; padding:10px 0; border-bottom:0.5px solid var(--hair); } .dash-side .item:last-child { border-bottom:none; } .dash-side .thumb { width:40px; height:54px; background:var(--bg-card); border-radius:3px; border:0.5px solid var(--hair); position:relative; overflow:hidden; } .dash-side .thumb::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, transparent 0 5px, rgba(255,255,255,0.04) 5px 6px); } .dash-side .info .t { font-family:var(--serif); font-size:15px; color:var(--fg); line-height:1.2; } .dash-side .info .s { font-family:var(--mono); font-size:10px; color:var(--fg-mute); letter-spacing:0.1em; margin-top:3px; text-transform:uppercase; } .dash-side .val { font-family:var(--mono); font-size:13px; color:var(--accent); letter-spacing:0.05em; } /* ───── case studies ───── */ .cases { display:grid; grid-template-columns: repeat(3, 1fr); gap:32px; } .case-card { border:0.5px solid var(--hair); background:var(--bg-elev); padding:36px 32px; border-radius:6px; display:flex; flex-direction:column; gap:20px; min-height:440px; } .case-card .who { font-family:var(--mono); font-size:11px; letter-spacing:0.22em; color:var(--fg-mute); text-transform:uppercase; } .case-card .num { font-family:var(--serif); font-size:96px; line-height:0.95; color:var(--accent); letter-spacing:-0.04em; } .case-card .desc { font-family:var(--serif); font-size:22px; line-height:1.25; color:var(--fg); } .case-card .stat-row { margin-top:auto; padding-top:24px; border-top:var(--rule) solid var(--hair); display:flex; justify-content:space-between; } .case-card .stat-row .s { display:flex; flex-direction:column; gap:4px; } .case-card .stat-row .s .l { font-family:var(--mono); font-size:9.5px; letter-spacing:0.2em; color:var(--fg-mute); text-transform:uppercase; } .case-card .stat-row .s .v { font-family:var(--serif); font-size:22px; color:var(--fg); } /* ───── testimonials ───── */ .tst-grid { display:grid; grid-template-columns: 1fr 1fr; gap:60px 80px; } .tst { border-top:var(--rule) solid var(--hair-strong); padding-top:32px; display:flex; flex-direction:column; gap:20px; } .tst .quote { font-family:var(--serif); font-size:clamp(22px, 2vw, 28px); line-height:1.35; color:var(--fg); } .tst .quote::before { content:"“"; font-size:1.4em; color:var(--accent); margin-right:6px; vertical-align:-0.15em; } .tst .by { display:flex; align-items:center; gap:14px; } .tst .by .av { width:36px; height:36px; border-radius:50%; background:var(--bg-elev); border:0.5px solid var(--hair-strong); position:relative; overflow:hidden;} .tst .by .av::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,0.05) 4px 5px); } .tst .by .name { font-family:var(--mono); font-size:11px; letter-spacing:0.16em; color:var(--fg-soft); text-transform:uppercase; } .tst .by .name span { color:var(--fg-mute); margin-left:8px; } /* ───── faq ───── */ .faq { display:flex; flex-direction:column; } .faq-row { display:grid; grid-template-columns: 60px 1fr 28px; gap:32px; padding:28px 0; border-top:var(--rule) solid var(--hair); align-items:start; } .faq-row:last-child { border-bottom:var(--rule) solid var(--hair); } .faq-row .n { font-family:var(--mono); font-size:11px; color:var(--fg-mute); letter-spacing:0.15em; padding-top:6px; } .faq-row .q { font-family:var(--serif); font-size:clamp(20px, 2vw, 28px); color:var(--fg); } .faq-row .a { margin-top:14px; font-size:15.5px; line-height:1.6; max-width:62ch; color:var(--fg-soft); display:none; } .faq-row.open .a { display:block; } .faq-row .t { font-family:var(--mono); font-size:18px; color:var(--fg-mute); justify-self:end; padding-top:4px; cursor:default; } .faq-row.open .t::after { content:"−"; } .faq-row .t::after { content:"+"; } /* ───── final cta / waitlist ───── */ .final { text-align:center; padding-top:160px; padding-bottom:160px; position:relative; overflow:hidden; } .final::before { content:""; position:absolute; inset:0; background: radial-gradient(ellipse 60% 50% at 50% 30%, color-mix(in oklab, var(--accent) 14%, transparent) 0%, transparent 60%); pointer-events:none; } .final .eyebrow { display:block; margin-bottom:36px; } .final h2 { max-width:18ch; margin:0 auto; } .final .lede { margin:36px auto 0; } .waitlist { margin:60px auto 0; max-width:560px; display:flex; gap:8px; align-items:stretch; padding:6px; border:0.5px solid var(--hair-strong); border-radius:999px; background:var(--bg-elev); } .waitlist input { flex:1; background:transparent; border:none; outline:none; color:var(--fg); font-family:var(--mono); font-size:13px; letter-spacing:0.05em; padding:14px 22px; } .waitlist input::placeholder { color:var(--fg-mute); letter-spacing:0.12em; text-transform:uppercase; font-size:11px; } .waitlist .btn { padding:14px 26px; } .final .note { margin-top:24px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.2em; color:var(--fg-mute); text-transform:uppercase; } /* ───── footer ───── */ footer { border-top:var(--rule) solid var(--hair); padding:60px var(--gutter) 36px; } footer .wrap-f { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; } footer h5 { font-family:var(--mono); font-size:10.5px; letter-spacing:0.22em; color:var(--fg-mute); text-transform:uppercase; margin:0 0 18px; font-weight:500; } footer ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } footer ul a { font-family:var(--sans); font-size:14px; color:var(--fg-soft); } footer ul a:hover { color:var(--accent); } footer .colophon { font-family:var(--mono); font-size:10.5px; letter-spacing:0.18em; color:var(--fg-faint); text-transform:uppercase; margin-top:60px; padding-top:24px; border-top:var(--rule) solid var(--hair); display:flex; justify-content:space-between; max-width:var(--max); margin-left:auto; margin-right:auto; } /* ───── responsive ───── */ @media (max-width: 980px) { .hero-grid, .founder-grid, .trend-grid, .dash-body, .ba-grid, .ba-row, .tst-grid { grid-template-columns:1fr; gap:48px; } .steps, .cases { grid-template-columns:1fr; } .section-head { grid-template-columns:1fr; gap:16px; } .dash-stats { grid-template-columns:repeat(2, 1fr); } .nav-links { display:none; } footer .wrap-f { grid-template-columns:1fr 1fr; } .hero { padding-top:140px; } } /* ───── sample / demo badges ───── */ .sample { display:inline-block; font-family:var(--mono); font-size:8.5px; letter-spacing:0.22em; padding:2px 6px; border-radius:3px; background:color-mix(in oklab, var(--accent) 16%, transparent); color:var(--accent); border:0.5px solid color-mix(in oklab, var(--accent) 40%, transparent); text-transform:uppercase; vertical-align:middle; margin-left:8px; position:relative; top:-1px; white-space:nowrap; font-weight:500; } .sample.sm { font-size:7.5px; padding:1px 5px; letter-spacing:0.18em; } .sample.block { display:inline-flex; margin-left:0; margin-bottom:14px; } #demo-bar { position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; justify-content:center; gap:14px; padding:8px 16px; background:color-mix(in oklab, var(--accent) 18%, var(--bg)); border-bottom:0.5px solid color-mix(in oklab, var(--accent) 50%, transparent); font-family:var(--mono); font-size:10px; letter-spacing:0.2em; color:var(--fg-soft); text-transform:uppercase; } #demo-bar b { color:var(--accent-ink); background:var(--accent); padding:2px 7px; border-radius:3px; font-weight:500; letter-spacing:0.22em; } body.with-demo-bar { padding-top:34px; } body.with-demo-bar .nav { top:34px; } @media (max-width: 720px) { #demo-bar { font-size:8.5px; letter-spacing:0.14em; gap:8px; padding:6px 10px; } }