/* tideline — marketing landing page. Extends the shared token language of style.css with the full Tideline Design System palette. First-class light/dark driven by data-theme on (header toggle; localStorage; prefers-color-scheme default). Pure-fluid responsive: flex-wrap + clamp() + auto-fit grids, no breakpoints. */ /* ---------- Palette (design system base ramps) ---------- */ :root { --sand-50:#FBF9F5; --sand-100:#F7F3EC; --sand-150:#F1ECE2; --sand-200:#E9E2D5; --sand-300:#D9CFBE; --sand-400:#BCAF99; --sand-500:#978A73; --sand-600:#6F6553; --sand-700:#4C4536; --sand-800:#2F2A20; --sand-900:#1C1813; --sea-50:#E7F1F2; --sea-100:#CFE5E7; --sea-200:#A5D0D4; --sea-300:#6FB4BA; --sea-400:#3E939B; --sea-500:#2E7D86; --sea-600:#246069; --sea-700:#1C4A52; --sea-800:#14363C; --sea-900:#0E272B; --sky-50:#EDF2F6; --sky-100:#DCE7EF; --sky-200:#BFD2E0; --sky-300:#97B4C9; --sky-400:#6C90AC; --sky-500:#4E7392; --clay-100:#F4E3D3; --clay-300:#DDA878; --clay-500:#B9763F; --clay-600:#975C2E; --moss-50:#E9F0EA; --moss-100:#D2E2D4; --moss-300:#8FB89A; --moss-500:#4F8A6B; --moss-600:#3D6E55; --moss-700:#2E5340; --ink-700:#2A3A3A; --ink-900:#14201F; /* Fonts (Newsreader + IBM Plex Mono loaded via ) */ --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-serif: "Newsreader", "New York", Georgia, "Times New Roman", serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Radii */ --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --radius-xl:24px; --radius-2xl:32px; --radius-pill:999px; /* Motion */ --ease-tide: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-settle: cubic-bezier(0.33, 0, 0.2, 1); --ease-recede: cubic-bezier(0.4, 0, 0.7, 0.2); } /* ---------- Light theme (default) ---------- */ :root, [data-theme="light"] { --bg-base: var(--sand-100); --bg-sunken: var(--sand-150); --surface-card: #FFFFFF; --text-primary: var(--ink-900); --text-secondary: #51605F; --text-tertiary: #7C8987; --text-quiet: #9AA5A3; --text-on-accent: #FFFFFF; --accent: var(--sea-500); --accent-on-soft: var(--sea-700); --accent-soft: var(--sea-50); --horizon: var(--sea-200); --line-hair: rgba(28, 32, 31, 0.08); --line-soft: var(--sand-200); --line-strong: var(--sand-300); --conf-confirmed: var(--sea-600); --conf-inferred: var(--sky-500); --conf-possible: var(--sand-500); --private-fg: var(--moss-600); --private-soft: var(--moss-50); --cloud-fg: var(--sky-500); --cloud-soft: var(--sky-50); --resolved-fg: var(--moss-600); --resolved-soft: var(--moss-50); --kind-decision: var(--sea-500); --kind-question: var(--sky-500); --kind-task: var(--clay-500); --attention-fg: var(--clay-600); --shadow-1: 0 1px 2px rgba(20,54,60,0.05), 0 1px 1px rgba(20,54,60,0.04); --shadow-2: 0 2px 8px rgba(20,54,60,0.07), 0 1px 2px rgba(20,54,60,0.05); --shadow-phone: 0 40px 80px rgba(14,39,43,0.24); --glass-fill: rgba(255,255,255,0.62); --glass-blur: saturate(180%) blur(20px); --glass-stroke: rgba(255,255,255,0.55); color-scheme: light; } /* ---------- Dark theme ---------- */ [data-theme="dark"] { --bg-base: #0E1718; --bg-sunken: #0A1213; --surface-card: #15211F; --text-primary: #E9EEED; --text-secondary: #A4B2B0; --text-tertiary: #76847F; --text-quiet: #5A6764; --text-on-accent: #07100F; --accent: var(--sea-300); --accent-on-soft: var(--sea-200); --accent-soft: rgba(95,179,189,0.12); --horizon: var(--sea-700); --line-hair: rgba(233,238,237,0.09); --line-soft: rgba(233,238,237,0.10); --line-strong: rgba(233,238,237,0.16); --conf-confirmed: var(--sea-300); --conf-inferred: var(--sky-300); --conf-possible: var(--sand-400); --private-fg: var(--moss-300); --private-soft: rgba(143,184,154,0.12); --cloud-fg: var(--sky-300); --cloud-soft: rgba(151,180,201,0.12); --resolved-fg: var(--moss-300); --resolved-soft: rgba(143,184,154,0.12); --kind-decision: var(--sea-300); --kind-question: var(--sky-300); --kind-task: var(--clay-300); --attention-fg: var(--clay-300); --shadow-1: 0 1px 2px rgba(0,0,0,0.35); --shadow-2: 0 2px 10px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30); --shadow-phone: 0 40px 80px rgba(0,0,0,0.5); --glass-fill: rgba(22,34,33,0.55); --glass-blur: saturate(180%) blur(20px); --glass-stroke: rgba(255,255,255,0.10); color-scheme: dark; } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body.landing { margin: 0; font-family: var(--font-ui); font-size: 17px; line-height: 1.55; color: var(--text-primary); background: var(--bg-base); -webkit-font-smoothing: antialiased; transition: background-color .4s var(--ease-tide), color .4s var(--ease-tide); } .landing a { color: var(--accent); text-underline-offset: 2px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .container { max-width: 1160px; margin: 0 auto; padding-inline: 28px; } .section { padding-block: clamp(48px, 7vw, 96px); } .eyebrow { font: 600 13px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; } .serif-h2 { font: 500 clamp(28px, 4vw, 40px)/1.12 var(--font-serif); letter-spacing: -0.01em; color: var(--text-primary); margin: 0; text-wrap: balance; } .horizon-rule { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--horizon), transparent); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--line-hair); } .site-header .container { padding-block: 14px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .wordmark { display: flex; align-items: center; gap: 9px; text-decoration: none; } .wordmark span { font: 400 24px/1 var(--font-serif); letter-spacing: -0.2px; color: var(--text-primary); text-transform: lowercase; } .header-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); flex-wrap: wrap; } .header-nav a { font: 500 15px/1 var(--font-ui); color: var(--text-secondary); text-decoration: none; } .header-nav a:hover { color: var(--text-primary); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-pill); border: 1px solid var(--line-soft); background: var(--surface-card); color: var(--text-secondary); cursor: pointer; flex-shrink: 0; transition: color .2s, transform .1s; } .theme-toggle:hover { color: var(--text-primary); } .theme-toggle:active { transform: translateY(1px); opacity: .8; } .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: inline; } /* ---------- Buttons / App Store badge ---------- */ .appstore-badge { display: inline-flex; align-items: center; gap: 11px; padding: 11px 20px 11px 16px; border-radius: var(--radius-md); background: var(--text-primary); color: var(--bg-base); text-decoration: none; box-shadow: var(--shadow-2); cursor: default; } .appstore-badge .coming { font: 500 10px/1.2 var(--font-ui); opacity: .8; letter-spacing: .3px; text-transform: uppercase; } .appstore-badge .lines { display: flex; flex-direction: column; } .appstore-badge .l1 { font: 400 11px/1.2 var(--font-ui); opacity: .85; } .appstore-badge .l2 { font: 600 17px/1.15 var(--font-ui); letter-spacing: -0.2px; } .appstore-badge.sand { background: var(--sand-50); color: var(--sea-900); } .btn-cta { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 20px; border-radius: var(--radius-sm); font: 600 15px/1 var(--font-ui); text-decoration: none; cursor: pointer; border: 1px solid var(--line-soft); background: var(--surface-card); color: var(--text-primary); width: 100%; transition: opacity .15s, transform .1s; } .btn-cta:active { opacity: .7; transform: translateY(1px); } .btn-cta.primary { background: var(--accent); color: var(--text-on-accent); border-color: transparent; } /* microline w/ icon */ .microline { display: inline-flex; align-items: center; gap: 7px; font: 400 14px/1.4 var(--font-ui); color: var(--text-tertiary); margin: 16px 0 0; } /* ---------- Hero ---------- */ .hero .container { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); align-items: center; justify-content: center; } .hero-copy { flex: 1 1 380px; max-width: 560px; } .hero-copy h1 { font: 500 clamp(38px, 5.5vw, 62px)/1.06 var(--font-serif); letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 18px; text-wrap: balance; } .hero-copy .sub { font: 400 clamp(17px, 2.2vw, 20px)/1.55 var(--font-ui); color: var(--text-secondary); margin: 0 0 26px; text-wrap: pretty; } .pill-eyebrow { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 var(--font-ui); color: var(--private-fg); background: var(--private-soft); border-radius: var(--radius-pill); padding: 7px 14px; margin: 0 0 20px; } .hero-phone { flex: 0 0 auto; } /* ---------- How it works ---------- */ .how-intro { text-align: center; max-width: 720px; margin-inline: auto; } .how-intro .serif-h2 { margin-top: 6px; } .beats { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 80px); margin-top: clamp(40px, 6vw, 72px); } .beat { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 60px); align-items: center; justify-content: center; } .beat.reverse .beat-phone { order: -1; } .beat-copy { flex: 1 1 320px; max-width: 440px; } .beat-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-on-soft); font: 600 17px/1 var(--font-ui); margin-bottom: 16px; } .beat-copy h3 { font: 500 clamp(22px, 3vw, 28px)/1.2 var(--font-serif); color: var(--text-primary); margin: 0 0 10px; letter-spacing: -0.01em; } .beat-copy p { font: 400 16px/1.6 var(--font-ui); color: var(--text-secondary); margin: 0; text-wrap: pretty; } .beat-phone { flex: 0 0 auto; } /* ---------- Trust ---------- */ .trust { background: var(--bg-sunken); border-top: 1px solid var(--line-hair); border-bottom: 1px solid var(--line-hair); } .trust-intro { text-align: center; max-width: 660px; margin: 0 auto clamp(36px, 5vw, 56px); } .trust-intro p { font: 400 17px/1.6 var(--font-ui); color: var(--text-secondary); margin: 14px 0 0; text-wrap: pretty; } .trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 920px; margin-inline: auto; } .trust-card { background: var(--surface-card); border: 1px solid var(--line-hair); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-1); } .trust-card h3 { font: 600 18px/1.2 var(--font-ui); color: var(--text-primary); margin: 0 0 4px; } .trust-card > p.card-sub { font: 400 15px/1.55 var(--font-ui); color: var(--text-secondary); margin: 0 0 20px; text-wrap: pretty; } .conf-row { display: flex; align-items: center; gap: 14px; padding: 8px 0; } .conf-row .label { font: 600 14px/1.2 var(--font-ui); } .conf-row .desc { font: 400 13px/1.3 var(--font-ui); color: var(--text-tertiary); margin-top: 2px; } .prov-well { background: var(--bg-sunken); border-radius: var(--radius-md); padding: 16px 18px; } .prov-well .eyeb { font: 600 11px/1 var(--font-ui); letter-spacing: .5px; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 12px; } .prov-quote { font: 400 15px/1.6 var(--font-mono); color: var(--text-primary); border-left: 2px solid var(--horizon); padding-left: 14px; margin: 0 0 14px; } .source-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--private-soft); color: var(--private-fg); border-radius: var(--radius-pill); padding: 6px 12px; font: 500 12px/1 var(--font-ui); } .trust-privacy { text-align: center; max-width: 620px; margin: clamp(32px, 5vw, 44px) auto 0; } .trust-privacy p { font: 400 15px/1.6 var(--font-ui); color: var(--private-fg); margin: 0; text-wrap: pretty; } /* ---------- Sources ---------- */ .sources .container { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 60px); align-items: center; justify-content: center; } .sources-copy { flex: 1 1 360px; max-width: 500px; } .sources-copy .sub { font: 400 17px/1.6 var(--font-ui); color: var(--text-secondary); margin: 14px 0 24px; text-wrap: pretty; } .source-list { border: 1px solid var(--line-hair); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); } .source-item { display: flex; align-items: center; gap: 13px; padding: 15px 16px; background: var(--surface-card); border-top: 1px solid var(--line-hair); } .source-item:first-child { border-top: 0; } .source-item.byo { background: var(--accent-soft); } .source-item .ico { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--private-soft); color: var(--private-fg); } .source-item.cloud .ico { background: var(--cloud-soft); color: var(--cloud-fg); } .source-item.byo .ico { background: var(--accent); color: var(--text-on-accent); } .source-item .body { flex: 1; min-width: 0; } .source-item .name { display: block; font: 600 15px/1.2 var(--font-ui); color: var(--text-primary); } .source-item.byo .name { color: var(--accent-on-soft); } .source-item .detail { display: block; font: 400 13px/1.3 var(--font-ui); color: var(--text-tertiary); margin-top: 2px; } .source-item.byo .detail { font-family: var(--font-mono); color: var(--accent-on-soft); opacity: .8; } .source-item .tag { font: 600 11px/1 var(--font-ui); letter-spacing: .4px; text-transform: uppercase; color: var(--private-fg); } .source-item.cloud .tag { color: var(--cloud-fg); } .source-item.byo .tag { color: var(--accent-on-soft); } .sources-phone { flex: 0 0 auto; } /* ---------- Pricing ---------- */ .pricing { background: var(--bg-sunken); } .pricing-intro { text-align: center; max-width: 640px; margin: 0 auto clamp(36px, 5vw, 52px); } .pricing-intro p { font: 400 17px/1.6 var(--font-ui); color: var(--text-secondary); margin: 14px 0 0; text-wrap: pretty; } .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; max-width: 920px; margin-inline: auto; align-items: stretch; } .price-card { position: relative; background: var(--surface-card); border: 1px solid var(--line-hair); border-radius: var(--radius-lg); padding: 28px 24px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-1); } .price-card.featured { border: 1.5px solid var(--accent); box-shadow: var(--shadow-2); } .price-ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--text-on-accent); font: 600 11px/1 var(--font-ui); letter-spacing: .4px; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-pill); } .price-card .plan { font: 600 14px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); } .price-card .amount { font: 600 40px/1 var(--font-ui); letter-spacing: -1px; color: var(--text-primary); margin: 8px 0 4px; } .price-card .amount .per { font: 400 16px/1 var(--font-ui); letter-spacing: 0; color: var(--text-tertiary); } .price-card .blurb { font: 400 14px/1.5 var(--font-ui); color: var(--text-secondary); margin: 0 0 auto; padding-bottom: 18px; } /* ---------- FAQ ---------- */ .faq-intro { text-align: center; max-width: 640px; margin: 0 auto clamp(32px, 4vw, 44px); } .faq-group { max-width: 820px; margin-inline: auto; border: 1px solid var(--line-hair); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); } .faq-row { padding: 22px 24px; background: var(--surface-card); border-top: 1px solid var(--line-hair); } .faq-row:first-child { border-top: 0; } .faq-row .q { font: 600 17px/1.3 var(--font-ui); color: var(--text-primary); margin: 0 0 7px; } .faq-row .a { font: 400 15px/1.6 var(--font-ui); color: var(--text-secondary); margin: 0; text-wrap: pretty; } /* ---------- Closing CTA ---------- */ .closing { padding-block: clamp(40px, 6vw, 72px); } .closing-panel { position: relative; max-width: 1160px; margin-inline: auto; background: var(--sea-800); border-radius: var(--radius-2xl); padding: clamp(48px, 7vw, 88px) clamp(28px, 5vw, 64px); text-align: center; overflow: hidden; } .closing-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--sea-300), transparent); } .closing-panel h2 { font: 500 clamp(28px, 4vw, 44px)/1.15 var(--font-serif); color: #F1ECE2; margin: 0 0 14px; text-wrap: balance; letter-spacing: -0.01em; } .closing-panel p { font: 400 17px/1.6 var(--font-ui); color: var(--sea-100); margin: 0 0 26px; text-wrap: pretty; } /* ---------- Footer ---------- */ .site-footer { background: var(--bg-base); border-top: 1px solid var(--line-hair); } .site-footer .container { padding-block: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; } .site-footer .wordmark span { font-size: 20px; } .footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; } .footer-links a { font: 400 14px/1 var(--font-ui); color: var(--text-secondary); text-decoration: none; } .footer-links a:hover { color: var(--accent); text-decoration: underline; } .footer-copy { width: 100%; font: 400 13px/1.5 var(--font-ui); color: var(--text-tertiary); } /* ---------- Phone mocks ---------- */ .phone-scale { width: 314px; height: 682px; position: relative; } .phone-scale > .phone { position: absolute; top: 0; left: 0; transform: scale(0.8); transform-origin: top left; } .phone { width: 393px; height: 852px; position: relative; flex-shrink: 0; background: var(--bg-base); border-radius: 54px; overflow: hidden; box-shadow: 0 0 0 12px #0c0f10, 0 0 0 14px #2a2f31, var(--shadow-phone); font-family: var(--font-ui); } .phone .statusbar { position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; pointer-events: none; color: var(--text-primary); } .phone .statusbar .time { font: 600 16px/1 var(--font-ui); letter-spacing: .2px; } .phone .statusbar .icons { display: flex; align-items: center; gap: 7px; } .phone .island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 124px; height: 36px; background: #000; border-radius: 20px; z-index: 31; } .phone .screen { position: absolute; inset: 0; overflow: hidden; } .phone .home-ind { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); width: 138px; height: 5px; border-radius: 3px; background: var(--text-primary); opacity: .4; z-index: 40; } .phone .scroll { height: 100%; overflow: hidden; background: var(--bg-base); } /* screen internals */ .p-head { padding: 66px 20px 8px; display: flex; align-items: flex-start; justify-content: space-between; } .p-title { margin: 0; font: 700 34px/1 var(--font-ui); letter-spacing: .36px; color: var(--text-primary); } .p-date { margin-top: 6px; font: 400 15px/1 var(--font-ui); color: var(--text-tertiary); } .p-sec { padding: 0 20px; display: flex; flex-direction: column; gap: 12px; } .p-body { display: flex; flex-direction: column; gap: 26px; padding: 14px 20px 40px; } .sec-head { display: flex; align-items: center; gap: 8px; padding-top: 6px; } .sec-head .t { font: 600 13px/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); } .sec-head .count { font: 600 11px/1 var(--font-ui); color: var(--accent-on-soft); background: var(--accent-soft); border-radius: var(--radius-pill); padding: 3px 7px; } .sec-head .rule { flex: 1; height: 1px; background: var(--line-hair); } .sec-head .action { font: 500 13px/1 var(--font-ui); color: var(--accent); } .quiet-read { font: 400 19px/1.5 var(--font-serif); color: var(--text-primary); letter-spacing: -0.01em; margin: 0; text-wrap: pretty; } .item-card { background: var(--surface-card); border: 1px solid var(--line-hair); border-radius: 16px; padding: 14px; box-shadow: var(--shadow-1); display: flex; gap: 12px; align-items: flex-start; } .item-card .kbar { width: 3px; align-self: stretch; border-radius: 2px; flex-shrink: 0; } .item-card.decision .kbar { background: var(--kind-decision); } .item-card.question .kbar { background: var(--kind-question); } .item-card.task .kbar { background: var(--kind-task); } .item-card .main { flex: 1; min-width: 0; } .item-card .text { font: 400 16px/1.35 var(--font-ui); color: var(--text-primary); letter-spacing: -0.2px; margin: 0 0 8px; } .item-card.done .text { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: var(--line-strong); } .item-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .conf-badge { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--font-ui); } .conf-badge svg { flex-shrink: 0; overflow: visible; } .conf-badge.confirmed { color: var(--conf-confirmed); } .conf-badge.inferred { color: var(--conf-inferred); } .conf-badge.possible { color: var(--conf-possible); } .src-chip { display: inline-flex; align-items: center; gap: 5px; font: 500 11px/1 var(--font-ui); color: var(--private-fg); background: var(--private-soft); border-radius: var(--radius-pill); padding: 4px 9px; } .item-card .check { width: 26px; height: 26px; border-radius: var(--radius-pill); flex-shrink: 0; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--text-quiet); } .item-card.done .check { background: var(--resolved-soft); border-color: transparent; color: var(--resolved-fg); } /* agenda */ .agenda-row { display: flex; gap: 14px; padding: 10px 0; align-items: flex-start; } .agenda-row .time { width: 52px; flex-shrink: 0; text-align: right; font: 600 13px/1.2 var(--font-ui); color: var(--text-primary); } .agenda-row .bar { width: 2px; align-self: stretch; border-radius: 2px; opacity: .5; margin-top: 2px; } .agenda-row .at { font: 500 16px/1.25 var(--font-ui); color: var(--text-primary); letter-spacing: -0.2px; } .agenda-row .aw { font: 400 13px/1.3 var(--font-ui); color: var(--text-tertiary); margin-top: 2px; } /* floating chrome */ .capture-bar { position: absolute; left: 20px; right: 20px; bottom: 96px; z-index: 20; display: flex; align-items: center; gap: 12px; background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-stroke); border-radius: var(--radius-2xl); padding: 12px 14px; box-shadow: var(--shadow-2); } .capture-bar .field { flex: 1; font: 400 15px/1 var(--font-ui); color: var(--text-tertiary); } .capture-bar .mic { width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--accent); color: var(--text-on-accent); display: inline-flex; align-items: center; justify-content: center; } .tab-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; z-index: 20; display: flex; align-items: flex-start; justify-content: space-around; padding-top: 12px; background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--line-hair); } .tab-bar .tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 500 10px/1 var(--font-ui); color: var(--text-quiet); } .tab-bar .tab.on { color: var(--accent); } /* capture screen */ .cap-head { padding: 62px 16px 8px; display: flex; align-items: center; justify-content: space-between; } .cap-head .ttl { font: 600 17px/1 var(--font-ui); color: var(--text-primary); } .icon-btn { width: 44px; height: 44px; border-radius: var(--radius-pill); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); background: transparent; } .icon-btn.soft { background: var(--accent-soft); color: var(--accent-on-soft); } .cap-textarea { padding: 12px 20px; font: 400 19px/29px var(--font-ui); letter-spacing: -0.2px; color: var(--text-primary); flex: 1; } .cap-textarea .cursor { display: inline-block; width: 2px; height: 22px; background: var(--accent); vertical-align: -4px; margin-left: 1px; opacity: .8; animation: caret 1.1s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } .cap-controls { padding: 12px 20px 36px; display: flex; gap: 12px; align-items: center; } .cap-controls .organize { flex: 1; height: 52px; border-radius: var(--radius-md); background: var(--accent); color: var(--text-on-accent); font: 600 16px/1 var(--font-ui); display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .cap-mic { width: 52px; height: 52px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-on-soft); display: inline-flex; align-items: center; justify-content: center; } /* review screen */ .rev-head { padding: 62px 16px 8px; display: flex; align-items: center; justify-content: space-between; background: var(--bg-base); } .rev-head .ct { text-align: center; } .rev-head .ct .t1 { font: 600 17px/1.1 var(--font-ui); color: var(--text-primary); } .rev-head .ct .t2 { font: 400 12px/1.2 var(--font-ui); color: var(--text-tertiary); } .rev-body { padding: 16px; display: flex; flex-direction: column; gap: 22px; background: var(--bg-sunken); flex: 1; overflow: hidden; } .group-card { background: var(--surface-card); border: 1px solid var(--line-hair); border-radius: 18px; box-shadow: var(--shadow-1); overflow: hidden; } .keep-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line-hair); } .keep-row:first-child { border-top: 0; } .keep-row .kbar2 { width: 3px; align-self: stretch; border-radius: 2px; flex-shrink: 0; min-height: 34px; } .keep-row.decision .kbar2 { background: var(--kind-decision); } .keep-row.question .kbar2 { background: var(--kind-question); } .keep-row.task .kbar2 { background: var(--kind-task); } .keep-row .km { flex: 1; min-width: 0; } .keep-row .kt { font: 400 15px/1.35 var(--font-ui); color: var(--text-primary); margin: 0 0 6px; } .keep-row.off .kt { color: var(--text-tertiary); } .toggle { width: 44px; height: 27px; border-radius: var(--radius-pill); background: var(--accent); position: relative; flex-shrink: 0; } .toggle::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .2s; } .toggle.off { background: var(--line-strong); } .toggle.off::after { left: 19.5px; } .save-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 20px 32px; z-index: 20; background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--line-hair); display: flex; align-items: center; gap: 14px; } .save-bar .count { flex: 1; font: 400 14px/1.3 var(--font-ui); color: var(--text-secondary); } .save-bar .count b { color: var(--text-primary); } .save-bar .save { height: 40px; padding: 0 18px; border-radius: var(--radius-sm); background: var(--accent); color: var(--text-on-accent); font: 600 15px/1 var(--font-ui); display: inline-flex; align-items: center; gap: 7px; } /* sources phone */ .conn-privacy { margin: 12px 20px 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--private-soft); border-radius: 14px; } .conn-privacy p { margin: 0; font: 400 13px/1.45 var(--font-ui); color: var(--private-fg); } .conn-body { padding: 20px 20px 40px; display: flex; flex-direction: column; gap: 22px; } .conn-group { display: flex; flex-direction: column; gap: 10px; } .conn-card { background: var(--surface-card); border: 1px solid var(--line-hair); border-radius: 18px; box-shadow: var(--shadow-1); overflow: hidden; } .conn-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line-hair); } .conn-row:first-child { border-top: 0; } .conn-row .ci { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--private-soft); color: var(--private-fg); } .conn-row.cloud .ci { background: var(--cloud-soft); color: var(--cloud-fg); } .conn-row.add .ci { background: var(--accent-soft); color: var(--accent-on-soft); } .conn-row .cb { flex: 1; min-width: 0; } .conn-row .cn { display: block; font: 600 16px/1.2 var(--font-ui); color: var(--text-primary); } .conn-row .cd { display: block; font: 400 13px/1.3 var(--font-ui); color: var(--text-tertiary); margin-top: 2px; } .conn-row .cd.mono { font-family: var(--font-mono); } .conn-row .verb { font: 600 13px/1 var(--font-ui); color: var(--accent); } .conn-row .mark { font: 600 11px/1 var(--font-ui); letter-spacing: .4px; text-transform: uppercase; color: var(--private-fg); } .conn-row.cloud .mark { color: var(--cloud-fg); }