/* Shared styles for every Creeda page — tokens from the Creeda design system */ :root { color-scheme: light; --blue-300: #A8D6FF; --blue-400: #8CC9FF; --blue-600: #2A6FAD; --neutral-0: #FFFFFF; --neutral-50: #FAF9F7; --neutral-100: #F5F3F1; --neutral-200: #ECE9E5; --neutral-300: #DDDDDD; --neutral-400: #BDBAB6; --neutral-500: #8E8B87; --neutral-600: #64625F; --neutral-700: #403F3D; --neutral-800: #262625; --neutral-900: #131313; --green-100: #E1EDE3; --green-700: #2F5E3D; --amber-100: #F5EAD3; --amber-700: #7A5515; --font-serif-display: "Source Serif 4", "Tiempos Headline", Georgia, serif; --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --radius-sm: 5px; --control-h-lg: 44px; --focus-ring: 0 0 0 3px rgba(42,111,173,.35); --ease-standard: cubic-bezier(.2,0,0,1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; --gutter: 56px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--neutral-100); color: var(--neutral-900); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; } a { color: var(--neutral-900); } a:hover { color: inherit; text-decoration-thickness: 2px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); } img { max-width: 100%; } h1, h2 { margin: 0; font-weight: 500; } .wrap { max-width: 1280px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* Dark ink bands: flat #131313, no texture (design guide: flat backgrounds) */ .ink { background: var(--neutral-900); color: var(--neutral-100); position: relative; overflow: hidden; } .ink > * { position: relative; z-index: 2; } /* Looping background video: faded and masked so it reads as atmosphere, not a video rectangle. Decorative only (aria-hidden, no controls). */ .ink > .hero-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; pointer-events: none; filter: brightness(.38) contrast(1.1); opacity: .22; -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 55%, #000 22%, transparent 82%); mask-image: radial-gradient(ellipse 70% 75% at 50% 55%, #000 22%, transparent 82%); } @media (prefers-reduced-motion: reduce) { .ink > .hero-bg { display: none; } } /* Brand period, masked so it takes the text colour */ .dot { display: inline-block; height: .13em; aspect-ratio: 87 / 94; margin-left: .04em; background: currentColor; -webkit-mask: url(period-ink.png) center / contain no-repeat; mask: url(period-ink.png) center / contain no-repeat; } .serif { font-family: var(--font-serif-display); font-weight: 500; } /* Lucide arrow-right, masked so it takes the text colour (design guide: no unicode symbols as icons) */ .i-arrow { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -.125em; margin-left: .3em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; } .btn .i-arrow { margin-left: 0; } /* Buttons (design-system Button, size lg) */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-h-lg); padding: 0 18px; font-family: var(--font-sans); font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); } .btn-accent { background: var(--blue-400); color: var(--neutral-900); } .btn-accent:hover { background: var(--blue-300); color: var(--neutral-900); } .btn-secondary { background: var(--neutral-0); color: var(--neutral-900); border-color: var(--neutral-300); } .btn-secondary:hover { background: var(--neutral-50); color: var(--neutral-900); } .btn-primary { background: var(--neutral-900); color: var(--neutral-100); } .btn-primary:hover { background: var(--neutral-700); color: var(--neutral-100); } .btn:disabled { opacity: .45; cursor: not-allowed; } /* Header: pinned to the top like Kito. The bar keeps its geometry; only its ink background fades in as the page scrolls (--header-bg is set by site.js). */ :root { --header-h: 74px; } html { scroll-padding-top: var(--header-h); } .site-top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: var(--neutral-100); } .site-top::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--neutral-900); border: 1px solid transparent; border-bottom-color: var(--neutral-800); opacity: var(--header-bg, 0); transition: inset .7s var(--morph-ease), border-radius .7s var(--morph-ease), box-shadow .7s var(--morph-ease), border-color .7s var(--morph-ease), opacity .3s linear; } /* Kito's header morph: past 50px of scroll the bar becomes a floating pill (desktop only) */ :root { --morph-ease: cubic-bezier(.32, .72, 0, 1); --pill-w: 56rem; --pill-side: max(24px, calc(50% - var(--pill-w) / 2)); --frame-inset: max(var(--gutter), calc((100% - 1168px) / 2)); } .site-top .site-header { max-width: none; margin: 0; padding-left: var(--frame-inset); padding-right: var(--frame-inset); transition: padding .7s var(--morph-ease); } body.is-header-pill .site-top::before { inset: 10px var(--pill-side); border-radius: 999px; border-color: rgba(19,19,19,.08); box-shadow: 0 12px 32px -14px rgba(19,19,19,.22); opacity: 1; } /* The demo button nests in the pill's right end: same 8px gap on top, bottom and right, so its 19px curve runs parallel to the pill's 27px end. */ body.is-header-pill .site-top .site-header { padding-left: calc(var(--pill-side) + 22px); padding-right: calc(var(--pill-side) + 8px); } .site-top.menu-open::before { opacity: 1; } .site-header { height: var(--header-h); display: flex; align-items: center; gap: 40px; } .site-header .logo img { height: 30px; width: auto; display: block; } /* Optical centring: most of the wordmark's ink sits low in its box (only the C and d reach the top), so lift it slightly so it reads as centred in the bar. */ .site-header .logo img { transform: translateY(-10%); } .site-nav { display: flex; gap: 36px; margin-left: auto; font-size: 14px; font-weight: 500; } .site-nav a { color: var(--neutral-100); text-decoration: none; white-space: nowrap; text-underline-offset: 6px; } .site-nav a:hover, .site-nav a[aria-current] { color: var(--neutral-100); text-decoration: underline; text-decoration-thickness: 1px; } .header-actions { display: flex; align-items: center; gap: 24px; } .header-cta { display: inline-flex; align-items: center; gap: 10px; color: var(--neutral-100); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; border: 1px solid var(--neutral-100); border-radius: var(--radius-sm); padding: 11px 16px; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-radius .7s var(--morph-ease), padding .7s var(--morph-ease); } .header-cta .i-arrow { margin-left: 0; } body.is-header-pill .header-cta { border-radius: 999px; padding: 9px 18px; } .header-cta:hover { background: var(--neutral-100); color: var(--neutral-900); } .menu-btn { display: none; align-items: center; gap: 12px; min-height: 44px; padding: 0; background: none; border: 0; color: var(--neutral-100); font: 500 14px var(--font-sans); cursor: pointer; } .menu-lines { position: relative; display: block; width: 20px; height: 8px; } .menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform var(--dur-base) var(--ease-standard), top var(--dur-base) var(--ease-standard); } .menu-lines::before { top: 0; } .menu-lines::after { top: 6.5px; } .menu-btn[aria-expanded="true"] .menu-lines::before { top: 3.25px; transform: rotate(45deg); } .menu-btn[aria-expanded="true"] .menu-lines::after { top: 3.25px; transform: rotate(-45deg); } .mobile-menu { display: none; } /* Heroes start under the pinned bar */ .ink > .doc-hero:first-child { padding-top: calc(var(--header-h) + 96px); } /* Footer (sits inside an .ink band) */ .site-footer { color: var(--neutral-100); padding-top: 24px; padding-bottom: 32px; border-top: 1px solid var(--neutral-800); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; } .footer-brand { display: flex; align-items: center; gap: 18px; } .footer-brand img { height: 18px; display: block; } .footer-right { display: flex; align-items: center; gap: 18px; } .site-footer a { color: var(--neutral-100); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); } .site-footer a:hover { color: var(--neutral-100); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 960px) { :root { --gutter: 32px; } .site-nav { display: none; } .header-actions { margin-left: auto; gap: 20px; } .menu-btn { display: inline-flex; } .mobile-menu.open { display: flex; flex-direction: column; padding-bottom: 16px; } .mobile-menu a { color: var(--neutral-100); text-decoration: none; font-size: 17px; padding: 12px 0; border-top: 1px solid var(--neutral-800); } .mobile-menu a:hover { color: var(--neutral-100); text-decoration: underline; text-underline-offset: 4px; } } @media (max-width: 720px) { :root { --gutter: 20px; } :root { --header-h: 64px; } .header-cta { font-size: 13px; padding: 9px 12px; } .menu-label { display: none; } /* With the label hidden, pad the button so its tap target stays a full 44px wide, not just the 20px icon */ .menu-btn { min-width: 44px; justify-content: center; gap: 0; } .site-header .logo img { height: 26px; } .site-footer { flex-direction: column; align-items: flex-start; gap: 14px; } .footer-brand { flex-wrap: wrap; gap: 10px 18px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } /* Document pages (privacy, terms) */ .doc-hero { padding-top: 96px; padding-bottom: 72px; } .doc-hero .overline { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--neutral-100); margin-bottom: 24px; } .doc-hero h1 { font-size: clamp(44px, 6vw, 72px); line-height: 1; letter-spacing: -.035em; } .doc-hero .meta { font-size: 14px; color: var(--neutral-100); margin: 20px 0 0; } .doc { padding-top: 72px; padding-bottom: 144px; } .doc-body { max-width: 720px; } .doc-body h2 { font-family: var(--font-serif-display); font-size: 28px; line-height: 1.2; letter-spacing: -.015em; border-top: 1px solid var(--neutral-300); padding-top: 24px; margin: 48px 0 16px; } .doc-body p { font-size: 17px; line-height: 1.65; color: var(--neutral-900); margin: 0 0 16px; } .doc-body a { text-underline-offset: 2px; } /* Card pages (QuickBooks connect / dashboard / disconnect) */ .card-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: max(40px, env(safe-area-inset-top)) 20px max(40px, env(safe-area-inset-bottom)); } .card-page .logo { margin: auto 0 32px; } .card-page .logo img { height: 26px; display: block; } .card { margin-bottom: auto; width: 100%; max-width: 520px; background: var(--neutral-0); border: 1px solid var(--neutral-300); border-radius: 12px; padding: 40px 36px; text-align: center; box-shadow: 0 16px 40px -8px rgba(19,19,19,.10), 0 0 0 1px rgba(19,19,19,.03); } .card h1 { font-family: var(--font-serif-display); font-size: 32px; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 12px; } .card p { font-size: 15px; line-height: 1.65; color: var(--neutral-900); margin: 0 0 20px; } .card .panel { text-align: left; background: var(--neutral-50); border: 1px solid var(--neutral-200); border-radius: 8px; padding: 18px 20px; margin: 24px 0; font-size: 14px; line-height: 1.6; color: var(--neutral-900); } .card .panel p { font-size: 14px; color: var(--neutral-900); margin: 0 0 8px; } .card .panel p:last-child { margin-bottom: 0; } .card .panel strong { color: var(--neutral-900); font-weight: 600; } .card .status { display: inline-block; background: var(--green-100); color: var(--green-700); padding: 4px 12px; border-radius: 99px; font-size: 13px; margin-bottom: 20px; } .card .icon { width: 52px; height: 52px; border-radius: 50%; background: var(--green-100); color: var(--green-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; } .card .icon svg { width: 26px; height: 26px; } .card .note { margin-top: 24px; font-size: 13px; color: var(--neutral-900); } .card .note a { color: var(--neutral-900); text-underline-offset: 2px; } @media (max-width: 720px) { .doc-hero { padding-top: 64px; padding-bottom: 48px; } .ink > .doc-hero:first-child { padding-top: calc(var(--header-h) + 56px); } .doc { padding-top: 48px; padding-bottom: 96px; } .doc-body h2 { font-size: 24px; margin-top: 40px; } .card { padding: 32px 22px; } .card h1 { font-size: 28px; } } /* ---------- Shared sections (home + audience + company pages) ---------- */ .overline { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--neutral-100); margin-bottom: 30px; } @media (max-width: 720px) { .overline { font-size: 13px; margin-bottom: 22px; } } /* Statement */ .statement { padding-top: 160px; padding-bottom: 160px; text-align: center; display: flex; justify-content: center; } .statement h2 { font-size: clamp(38px, 5vw, 64px); line-height: 1.06; letter-spacing: -.03em; max-width: 980px; text-wrap: balance; } .statement .muted { font-style: italic; font-weight: 400; } /* Audiences */ .audiences { padding-bottom: 144px; } .audience-list { border-top: 1px solid var(--neutral-900); } .audience { display: grid; grid-template-columns: 320px 1fr 40px; gap: 32px; align-items: baseline; padding: 36px 0; border-bottom: 1px solid var(--neutral-300); text-decoration: none; position: relative; } .audience .who { font-size: 15px; color: var(--neutral-900); transition: color var(--dur-base) var(--ease-standard); } .audience .line { font-family: var(--font-serif-display); font-size: clamp(28px, 3.2vw, 40px); font-weight: 500; letter-spacing: -.02em; display: inline-block; transition: transform var(--dur-base) var(--ease-standard); } .audience .arrow { font-size: 22px; text-align: right; transition: transform var(--dur-base) var(--ease-standard); } .audience::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; background: linear-gradient(to right, transparent, rgba(19,19,19,.05) 18%, rgba(19,19,19,.05) 82%, transparent); opacity: 0; z-index: -1; pointer-events: none; transition: opacity var(--dur-base) var(--ease-standard); } .audience:hover::before { opacity: 1; } .audience:hover .who { color: var(--neutral-600); } .audience:hover .line { transform: translateX(6px); } .audience:hover .arrow { transform: translateX(6px); } @media (hover: none) { .audience:hover::before { opacity: 0; } .audience:hover .who { color: var(--neutral-900); } .audience:hover .line, .audience:hover .arrow { transform: none; } } @media (prefers-reduced-motion: reduce) { .audience, .audience .who, .audience .line, .audience .arrow { transition: none; } } /* Security / Team */ .pair { padding-bottom: 144px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } .pair-item { border-top: 1px solid var(--neutral-900); padding-top: 24px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; } .pair-item .kicker { font-size: 13px; color: var(--neutral-900); } .pair-item .head { font-family: var(--font-serif-display); font-size: 32px; font-weight: 500; letter-spacing: -.015em; line-height: 1.15; transition: transform var(--dur-base) var(--ease-standard); } .pair-item .link { font-size: 15px; text-decoration: underline; text-underline-offset: 2px; transition: transform var(--dur-base) var(--ease-standard); display: inline-block; } .pair-item .names { font-size: 15px; color: var(--neutral-900); } a.pair-item:hover .head, a.pair-item:hover .link { transform: translateX(6px); } @media (hover: none) { a.pair-item:hover .head, a.pair-item:hover .link { transform: none; } } @media (prefers-reduced-motion: reduce) { .pair-item .head, .pair-item .link { transition: none; } } /* Closing band */ .closing { padding-top: 160px; padding-bottom: 120px; display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; } .closing h2 { font-size: clamp(56px, 8.75vw, 112px); line-height: .98; letter-spacing: -.04em; } .closing h2.one-line { font-size: clamp(20px, 7vw, 112px); white-space: nowrap; } /* Page hero (audience + company pages) */ .page-hero { padding-top: 112px; padding-bottom: 112px; } .page-hero h1 { font-size: clamp(46px, 6.6vw, 84px); line-height: 1; letter-spacing: -.035em; max-width: 980px; text-wrap: balance; } .page-hero .sub { font-size: 19px; line-height: 1.55; color: var(--neutral-100); max-width: 560px; margin: 28px 0 40px; } /* Three short lines (audience pages) */ .lines { padding-bottom: 144px; } .lines-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 56px; } .lines-grid > div { border-top: 1px solid var(--neutral-900); padding-top: 24px; font-family: var(--font-serif-display); font-size: clamp(26px, 2.6vw, 32px); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; } @media (max-width: 1080px) { .audience { grid-template-columns: 240px 1fr 40px; } } @media (max-width: 960px) { .statement { padding-top: 112px; padding-bottom: 112px; } .audiences, .pair, .lines { padding-bottom: 104px; } .pair { grid-template-columns: 1fr; gap: 48px; } .lines-grid { grid-template-columns: 1fr; gap: 40px; } .closing { flex-direction: column; align-items: flex-start; padding-top: 112px; padding-bottom: 88px; } .page-hero { padding-top: 80px; padding-bottom: 80px; } } @media (max-width: 720px) { .statement { padding-top: 88px; padding-bottom: 88px; } .audiences, .pair, .lines { padding-bottom: 80px; } .audience { grid-template-columns: 1fr 24px; gap: 8px 16px; padding: 28px 0; } .audience .who { grid-column: 1 / -1; } .audience .arrow { align-self: end; } .pair-item .head { font-size: 27px; } .closing { padding-top: 88px; padding-bottom: 72px; gap: 36px; } .page-hero { padding-top: 56px; padding-bottom: 64px; } .page-hero .sub { font-size: 17px; margin: 22px 0 32px; } } /* Demo form (every marketing page) */ /* Contact */ .contact { padding-bottom: 144px; } .contact-grid { border-top: 1px solid var(--neutral-900); padding-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } .contact h2 { font-size: clamp(38px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -.03em; margin: 14px 0 20px; } .contact p { font-size: 17px; line-height: 1.6; color: var(--neutral-900); max-width: 460px; margin: 0 0 20px; } .contact-email { font-size: 15px; text-underline-offset: 2px; } .form-group { margin-bottom: 16px; } .form-group > label { display: block; font-size: 13px; font-weight: 500; color: var(--neutral-900); margin-bottom: 6px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .contact input[type=text], .contact input[type=email], .contact select, .contact textarea { width: 100%; height: var(--control-h-lg); padding: 0 12px; font: 15px var(--font-sans); color: var(--neutral-900); background: var(--neutral-0); border: 1px solid var(--neutral-300); border-radius: var(--radius-sm); transition: border-color var(--dur-fast) var(--ease-standard); } .contact textarea { height: 96px; padding: 10px 12px; resize: vertical; } .contact input:hover, .contact select:hover, .contact textarea:hover { border-color: var(--neutral-400); } .contact input:focus, .contact select:focus, .contact textarea:focus { border-color: var(--blue-600); } .form-success { display: none; padding: 48px 0; font-size: 17px; color: var(--neutral-900); } .form-success.show { display: block; } @media (max-width: 960px) { .contact { padding-bottom: 104px; } .contact-grid { grid-template-columns: 1fr; gap: 48px; } } @media (max-width: 720px) { .contact { padding-bottom: 80px; } .form-row { grid-template-columns: 1fr; gap: 0; } } .pair.first { padding-top: 144px; } @media (max-width: 960px) { .pair.first { padding-top: 104px; } } @media (max-width: 720px) { .pair.first { padding-top: 80px; } } /* ---------- Home hero and Close card (shared) ---------- */ /* Full-screen hero: header + hero fill exactly one screen, copy centred under the header */ .ink-hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; } .ink-hero > .hero, .ink-hero > .page-hero { flex: 1; width: 100%; display: flex; align-items: center; padding-top: calc(var(--header-h) + 40px); padding-bottom: 72px; } .hero-copy { max-width: 900px; } .hero h1 { font-size: clamp(48px, 7vw, 100px); line-height: .98; letter-spacing: -.035em; text-wrap: balance; } .hero h1 em { font-style: italic; } .hero-sub { font-size: 19px; line-height: 1.55; color: var(--neutral-100); max-width: 460px; margin: 28px 0 40px; } /* Statement sits close to the dashboard it introduces */ .statement:has(+ .product) { padding-bottom: 64px; } /* Product panel: the Close card, shown as proof under the statement */ .product { padding-bottom: 144px; } .close-panel { max-width: 860px; margin: 0 auto; background: var(--neutral-0); color: var(--neutral-900); border: 1px solid var(--neutral-300); border-radius: 12px; padding: 24px; } .close-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; } .close-title { font-family: var(--font-serif-display); font-size: 20px; font-weight: 600; } .close-meta { font-size: 13px; color: var(--neutral-900); margin-top: 2px; } .pills { display: flex; gap: 8px; font-size: 12px; flex-wrap: wrap; justify-content: flex-end; } .pill { padding: 4px 10px; border-radius: 99px; white-space: nowrap; } .pill-ok { background: var(--green-100); color: var(--green-700); } .pill-warn { background: var(--amber-100); color: var(--amber-700); } .ledger { background: var(--neutral-0); border: 1px solid var(--neutral-200); border-radius: 8px; font-size: 13px; } .ledger .row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 104px 92px 92px; padding: 12px 14px; border-bottom: 1px solid var(--neutral-200); align-items: center; } .ledger .row:last-child { border-bottom: none; } .ledger .row.th { padding: 10px 14px; color: var(--neutral-900); font-size: 12px; border-bottom-color: var(--neutral-300); } .ledger .row.flag { background: var(--neutral-50); } .ledger .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .ledger .r { text-align: right; } .ledger .acct { color: var(--neutral-900); } .ledger .note { font-size: 12px; color: var(--neutral-900); margin-top: 2px; } .ledger .ok { color: var(--green-700); } .ledger .warn { color: var(--amber-700); } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .ink-hero > .hero, .ink-hero > .page-hero { padding-top: calc(var(--header-h) + 32px); padding-bottom: 56px; } .product { padding-bottom: 104px; } } @media (max-width: 720px) { .ink-hero > .hero, .ink-hero > .page-hero { padding-top: calc(var(--header-h) + 24px); padding-bottom: 48px; } .hero-sub { font-size: 17px; margin: 22px 0 32px; } .product { padding-bottom: 80px; } .close-panel { padding: 16px 14px; } .close-head { flex-direction: column; align-items: flex-start; } .pills { justify-content: flex-start; } .ledger { font-size: 12.5px; } .ledger .row { grid-template-columns: 34px minmax(0, 1fr) 82px 78px; padding: 11px 10px; column-gap: 6px; } .ledger .row.th { padding: 9px 10px; } .ledger .acct { display: none; } } .ink-hero > .page-hero { flex-direction: column; justify-content: center; align-items: flex-start; } .ink-hero > .page-hero h1 { font-size: clamp(48px, 7vw, 100px); line-height: .98; } /* Close card: loading animation. The markup holds the finished close, so without JS (or with reduced motion) the card reads as-is. */ .close-progress { height: 2px; background: var(--neutral-200); border-radius: 2px; margin: 0 0 16px; overflow: hidden; } .close-progress span { display: block; height: 100%; width: 100%; background: var(--neutral-900); } .close-panel.is-live .ledger .row:not(.th) { opacity: 0; transform: translateY(4px); } .close-panel.is-live .ledger .row.in { opacity: 1; transform: none; transition: opacity 280ms var(--ease-standard), transform 280ms var(--ease-standard), background 280ms var(--ease-standard); } .close-panel.is-live .ledger .row.flag { background: transparent; } .close-panel.is-live .ledger .row.flag.done { background: var(--neutral-50); } .close-panel.is-live .ledger .row.flag .note { opacity: 0; } .close-panel.is-live .ledger .row.flag.done .note { opacity: 1; transition: opacity 280ms var(--ease-standard); } .ledger .st.pending::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--neutral-900); vertical-align: 1px; } .product-solo { padding-top: 144px; } /* Security strip (audience pages): the trust line plus three published facts */ .trust-strip { padding-bottom: 144px; } .trust-inner { border-top: 1px solid var(--neutral-900); padding-top: 24px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; } .trust-inner:has(> :only-child) { grid-template-columns: 1fr; } .trust-inner .kicker { display: block; font-size: 13px; margin-bottom: 14px; } .trust-inner .head { font-family: var(--font-serif-display); font-size: 32px; font-weight: 500; letter-spacing: -.015em; line-height: 1.15; display: block; margin-bottom: 16px; } .trust-inner .link { font-size: 15px; text-underline-offset: 2px; } .trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .trust-list li { border-top: 1px solid var(--neutral-300); padding-top: 14px; font-size: 16px; line-height: 1.45; } /* Team (About page): names and titles */ .team { padding-top: 144px; padding-bottom: 144px; } .team-grid { border-top: 1px solid var(--neutral-900); padding-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; } .member .name { display: block; font-family: var(--font-serif-display); font-size: 32px; font-weight: 500; letter-spacing: -.015em; line-height: 1.15; } .member .role { display: block; font-size: 15px; margin-top: 8px; } /* Security page: grouped facts */ @media (max-width: 960px) { .product-solo, .team { padding-top: 104px; } .trust-strip, .team { padding-bottom: 104px; } .trust-inner { grid-template-columns: 1fr; gap: 28px; } .team-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 720px) { .product-solo, .team { padding-top: 80px; } .trust-strip, .team { padding-bottom: 80px; } .trust-list, .team-grid { grid-template-columns: 1fr; gap: 20px; } .trust-inner .head, .member .name { font-size: 27px; } } /* No button under the hero copy any more: drop the trailing gap so the copy stays centred */ .hero-sub:last-child, .page-hero .sub:last-child { margin-bottom: 0; } /* ---------- Hero to page: Kito's "glass slide" ---------- The full-screen hero stays pinned while the rest of the page slides up over it as one sheet with rounded top corners. The hero copy rises and fades as the sheet arrives (--hero-out), and the video fades a little later (--hero-fade). site.js sets both variables; without JS the page simply scrolls normally. */ .ink.ink-hero { position: sticky; top: var(--hero-sticky-top, 0px); z-index: 0; } .ink-hero > .hero, .ink-hero > .page-hero { transform: translate3d(0, calc(var(--hero-out, 0) * -90px), 0); opacity: calc(1 - var(--hero-out, 0)); will-change: transform, opacity; } /* The coin (home page) reads brighter than the clouds (audience pages) at the same opacity, since it's a sharper, higher-contrast subject -- so each gets its own level. */ .ink-hero > .hero-bg.is-coin { opacity: calc(.23 * (1 - var(--hero-fade, 0))); } .ink-hero > .hero-bg.is-clouds { opacity: calc(.3 * (1 - var(--hero-fade, 0))); } .sheet { position: relative; z-index: 1; background: var(--neutral-100); border-radius: 32px 32px 0 0; box-shadow: 0 -24px 48px -24px rgba(0,0,0,.5); } .sheet > .ink:last-child { border-radius: 0; } @media (max-width: 900px) { body.is-header-pill .site-top::before { inset: 0; border-radius: 0; box-shadow: none; border-color: transparent transparent var(--neutral-300); } body.is-header-pill .site-top .site-header { padding-left: var(--frame-inset); padding-right: var(--frame-inset); } body.is-header-pill .header-cta { border-radius: var(--radius-sm); padding: 9px 12px; } .sheet { border-radius: 24px 24px 0 0; } } @media (prefers-reduced-motion: reduce) { .ink.ink-hero { position: relative; top: auto; } .ink-hero > .hero, .ink-hero > .page-hero { transform: none; opacity: 1; } .site-top::before, .site-top .site-header, .header-cta { transition: none; } } /* Light header: once the dark hero has scrolled away, the bar switches to paper and ink. site.js adds .is-header-light when the paper reaches the bar, and .is-header-pill when no black is left on screen. */ .site-top::before { transition: inset .7s var(--morph-ease), border-radius .7s var(--morph-ease), box-shadow .7s var(--morph-ease), border-color .7s var(--morph-ease), opacity .3s linear, background-color .3s linear; } .site-top, .site-nav a, .header-cta, .menu-btn, .mobile-menu a { transition-property: color, background-color, border-color, border-radius, padding; transition-duration: .3s, .3s, .3s, .7s, .7s; transition-timing-function: linear, linear, linear, var(--morph-ease), var(--morph-ease); } .site-header .logo img { transition: filter .3s linear; } body.is-header-light .site-top { color: var(--neutral-900); } body.is-header-light .site-top::before { background: var(--neutral-100); border-bottom-color: var(--neutral-300); } body.is-header-light .site-header .logo img { filter: invert(1) brightness(.6); } body.is-header-light .site-nav a, body.is-header-light .site-nav a:hover, body.is-header-light .site-nav a[aria-current] { color: var(--neutral-900); } body.is-header-light .header-cta { color: var(--neutral-900); border-color: var(--neutral-900); } body.is-header-light .header-cta:hover { background: var(--neutral-900); color: var(--neutral-100); } body.is-header-light .menu-btn { color: var(--neutral-900); } body.is-header-light .mobile-menu a, body.is-header-light .mobile-menu a:hover { color: var(--neutral-900); border-top-color: var(--neutral-300); } @media (prefers-reduced-motion: reduce) { .site-top, .site-nav a, .header-cta, .menu-btn, .mobile-menu a, .site-header .logo img { transition: none; } } /* A pair section with a single item spans the full width */ .pair:has(> :only-child) { grid-template-columns: 1fr; } /* Footer: line the wordmark up with the text on a shared baseline. The logo's letters sit on the bottom edge of the image, so centring the boxes left it looking low. */ .site-footer, .footer-brand, .footer-right { align-items: baseline; } /* Scroll reveal: each content section fades up once, the first time it's scrolled into view. Hidden by default only when JS can actually deliver the reveal (see the