/* Parikh Labs — one stylesheet for every page. Design tokens first, then layout, then components. Light theme only. Colour pairs used for text meet WCAG AA (4.5:1); lime is only ever used as a fill or on dark. */ @font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 300 700; font-display: optional; src: url('/assets/fonts/atkinson-hyperlegible-next-latin.woff2?v=18b2a1a39a') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 300 700; font-display: optional; src: url('/assets/fonts/atkinson-hyperlegible-next-latin-ext.woff2?v=7dae0c6c66') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 400 700; font-display: optional; src: url('/assets/fonts/familjen-grotesk-latin.woff2?v=414d5dfe5f') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 400 700; font-display: optional; src: url('/assets/fonts/familjen-grotesk-latin-ext.woff2?v=c53f18ecf4') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ───────────── tokens ───────────── */ :root { --font: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif; --display: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; --r-btn: 14px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-panel: 48px; --gutter: clamp(16px, 5vw, 120px); --panel-inset: clamp(8px, 3.4vw, 48px); /* A phone on its side: the notch and rounded corners take the sides (viewport-fit=cover), so nothing sits closer to an edge than its safe area. */ --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --max: 1200px; /* "only light": OS dark mode and Chrome's auto-dark never recolour the page. */ color-scheme: only light; --bg: #F8F5EE; --ink: #0C0B08; --ink2: #5E5B52; --dot: rgba(12,11,8,.13); --line: rgba(12,11,8,.09); --hairline: rgba(12,11,8,.22); --well: rgba(12,11,8,.045); --well2: rgba(12,11,8,.08); --g-top: rgba(255,255,255,.94); --g-bot: rgba(255,255,255,.82); --g-edge: rgba(255,255,255,.95); --g-hi: #fff; --g-solid: #FDFCF8; /* Depth: lifted paper. Every raised surface is a fill, a light edge (a highlight on top, a faint bevel at the bottom) and three shadows: contact, ambient, key. Touch screens keep the fill and a one-line edge and swap the three shadows for two static ones (the block at the end of this file). */ --edge: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(12,11,8,.05); --g-shadow: 0 1px 2px rgba(12,11,8,.06), 0 8px 20px -8px rgba(12,11,8,.10), 0 32px 64px -32px rgba(12,11,8,.28); --g-shadow-hover: 0 1px 2px rgba(12,11,8,.05), 0 14px 28px -10px rgba(12,11,8,.14), 0 44px 80px -36px rgba(12,11,8,.34); --g-shadow-press: 0 1px 2px rgba(12,11,8,.08), 0 4px 10px -6px rgba(12,11,8,.10); --sheet-shadow: 0 2px 4px rgba(12,11,8,.06), 0 16px 32px -12px rgba(12,11,8,.14), 0 56px 100px -40px rgba(12,11,8,.36); --node-shadow: 0 1px 2px rgba(12,11,8,.06), 0 6px 14px -6px rgba(12,11,8,.12), 0 20px 40px -24px rgba(12,11,8,.22); --node-shadow-on: 0 1px 2px rgba(12,11,8,.06), 0 10px 20px -8px rgba(12,11,8,.14), 0 28px 56px -28px rgba(12,11,8,.28); --chip-shadow: 0 1px 2px rgba(12,11,8,.06), 0 6px 14px -6px rgba(12,11,8,.12); --btn-edge: inset 0 1px 0 rgba(255,255,255,.14); --btn-shadow: 0 1px 2px rgba(12,11,8,.25), 0 8px 16px -8px rgba(12,11,8,.50); --soft-edge: inset 0 1px 0 rgba(255,255,255,.6); --recess: inset 0 1px 2px rgba(12,11,8,.06); --ring: 0 0 0 2px var(--lime); --dark-fill: linear-gradient(180deg, #1E1D18, #0C0B08); --paper-fill: linear-gradient(180deg, var(--g-top), var(--g-bot)); --press-dur: 120ms; --btn-bg: #0C0B08; --btn-ink: #F8F5EE; --btn2: rgba(12,11,8,.06); --btn2-hover: rgba(12,11,8,.10); --lime: #C4F033; --lime-ink: #4A5C0E; --lime-well: rgba(196,240,51,.28); --warn-ink: #7A4B00; --warn-well: rgba(230,160,40,.16); --danger-ink: #9B1C12; --danger-well: rgba(220,60,40,.12); --paper: #FFFFFF; } /* motion tokens: generated by site-src/build.mjs from assets/js/motion.js */ :root { --spring-snappy: linear(0, 0.0216, 0.0408, 0.0913, 0.1526, 0.2199, 0.2546, 0.3244, 0.393, 0.4586, 0.4901, 0.5498, 0.6048, 0.6304, 0.6782, 0.7211, 0.7594, 0.7769, 0.8088, 0.8368, 0.8613, 0.8723, 0.8921, 0.9092, 0.9239, 0.9304, 0.942, 0.9519, 0.9563, 0.9639, 0.9704, 0.9758, 0.9782, 0.9823, 0.9858, 0.9886, 0.9898, 0.9919, 0.9937, 0.9944, 0.9957, 0.9967, 0.9975, 0.9979, 0.9984, 0.9989, 0.9992, 0.9994, 1); --spring-snappy-dur: 346ms; --spring-standard: linear(0, 0.0098, 0.0305, 0.0768, 0.1152, 0.1576, 0.2028, 0.2496, 0.2972, 0.3683, 0.4147, 0.4599, 0.5034, 0.545, 0.5845, 0.6397, 0.6737, 0.7054, 0.7349, 0.7622, 0.7873, 0.8212, 0.8414, 0.8598, 0.8765, 0.8916, 0.9053, 0.9232, 0.9336, 0.9428, 0.9511, 0.9584, 0.9648, 0.9731, 0.9777, 0.9818, 0.9853, 0.9883, 0.9909, 0.9942, 0.9959, 0.9974, 0.9986, 0.9996, 1.0004, 1.0013, 1.0018, 1.0021, 1); --spring-standard-dur: 433ms; --spring-bouncy: linear(0, 0.0218, 0.0692, 0.111, 0.1841, 0.2647, 0.3483, 0.404, 0.4855, 0.5628, 0.6345, 0.6788, 0.7394, 0.7931, 0.8398, 0.8672, 0.903, 0.9328, 0.9573, 0.9709, 0.9877, 1.0006, 1.0103, 1.0151, 1.0205, 1.0238, 1.0255, 1.026, 1.0258, 1.0249, 1.0234, 1.0221, 1.0201, 1.018, 1.0158, 1.0144, 1.0123, 1.0104, 1.0086, 1.0075, 1.006, 1.0047, 1.0036, 1.0029, 1.0021, 1.0014, 1.0008, 1.0005, 1); --spring-bouncy-dur: 550ms; --fade: cubic-bezier(.2, 0, 0, 1); --fade-dur: 180ms; --native-scroll: linear(0, .004, .022, .063, .147, .303, .485, .615, .705, .77, .819, .86, .892, .917, .937, .955, .967, .98, .988, .994, .998, 1); --native-scroll-dur: 350ms; } @supports not (transition-timing-function: linear(0, 1)) { :root { --spring-snappy: cubic-bezier(.25, 1, .5, 1); --spring-standard: cubic-bezier(.2, .9, .25, 1); --spring-bouncy: cubic-bezier(.3, 1.3, .5, 1); --native-scroll: cubic-bezier(.2, .8, .2, 1); } } @media (prefers-reduced-motion: reduce) { :root { --spring-snappy-dur: 0ms; --spring-standard-dur: 0ms; --spring-bouncy-dur: 0ms; --fade-dur: 0ms; --native-scroll-dur: 0ms; } } /* end of motion tokens */ /* ───────────── base ───────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 104px; -webkit-tap-highlight-color: transparent; } body { margin: 0; min-height: 100vh; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--ink); background-color: var(--bg); background-image: radial-gradient(circle at 1px 1px, var(--dot) 1.1px, transparent 1.5px); background-size: 24px 24px; background-position: 12px 12px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } [hidden] { display: none !important; } a { color: inherit; } button, input, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0; text-wrap: balance; } p { margin: 0; } ul, ol { margin: 0; padding: 0; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 10px 16px; border-radius: var(--r-btn); background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; text-decoration: none; } .skip:focus { top: 12px; } .num { font-variant-numeric: tabular-nums lining-nums; } .mono { font-family: var(--mono); font-size: .92em; } /* ───────────── motion background: lime dots follow the pointer, tilt or scroll ───────────── */ .bg-glow { position: fixed; left: 0; top: 0; z-index: -1; width: 520px; height: 520px; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, var(--lime) 1.6px, transparent 2.1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(circle at center, #000 0, rgba(0,0,0,.35) 36%, transparent 68%); mask-image: radial-gradient(circle at center, #000 0, rgba(0,0,0,.35) 36%, transparent 68%); opacity: .75; transform: translate3d(calc(70vw - 260px), 120px, 0); will-change: transform; } /* Touch screens: no glow at all (see the phone block at the end): a fixed, masked, always-composited layer under everything cost more scrolling smoothness than it gave. */ /* ───────────── typography ───────────── */ .display { font-family: var(--display); font-weight: 600; font-size: clamp(52px, 7.3vw, 104px); line-height: .96; letter-spacing: -0.04em; } .h1-doc { font-family: var(--display); font-weight: 600; font-size: clamp(44px, 5.6vw, 80px); line-height: .98; letter-spacing: -0.035em; } .h2 { font-family: var(--display); font-weight: 600; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.04; letter-spacing: -0.03em; } .h3 { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; letter-spacing: -0.015em; } .lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; color: var(--ink2); max-width: 36em; } .sub { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; color: var(--ink2); } .eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .01em; color: var(--ink2); } .muted { color: var(--ink2); } .small { font-size: 14px; } .figure { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; } /* ───────────── layout ───────────── */ .wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(var(--gutter), var(--safe-l)) max(var(--gutter), var(--safe-r)); } main { display: flex; flex-direction: column; gap: clamp(88px, 11vw, 160px); padding-bottom: clamp(88px, 11vw, 160px); } .section-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; } .section-head .h2 { margin-top: 4px; } /* A display title's descenders hang below its tight line box: 12px more keeps them clear of the lead (About, Contact). */ .section-head > .display + .lead { margin-top: 12px; } .split-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; } /* ───────────── glass ───────────── */ .glass { background: var(--paper-fill); border: 1px solid var(--g-edge); box-shadow: var(--edge), var(--g-shadow); } /* A sheet: the larger surfaces (panels, the POS demo, the result card, the phone's panel). Not interactive. */ .surface-sheet { box-shadow: var(--edge), var(--sheet-shadow); } .panel { margin-inline: max(var(--panel-inset), var(--safe-l)) max(var(--panel-inset), var(--safe-r)); border-radius: clamp(36px, 4vw, 48px); padding: clamp(28px, 5vw, 72px) max(20px, calc(var(--gutter) - var(--panel-inset))); position: relative; } .panel > .panel-in { max-width: var(--max); margin-inline: auto; display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 48px); } @media (prefers-reduced-transparency: reduce) { .glass, .site-header::before, .menu-sheet { background: var(--g-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } /* ───────────── header ───────────── A floating glass bar: 64px, condensing to 56px with stronger glass once the page scrolls past 24px. */ .site-header { position: fixed; top: 20px; left: max(var(--panel-inset), var(--safe-l)); right: max(var(--panel-inset), var(--safe-r)); z-index: 30; height: 64px; border-radius: 20px; isolation: isolate; display: flex; align-items: center; gap: 20px; /* Like the panels and the footer: the glass reaches the panels' edges, its contents sit on the page column. The column's edge is max(gutter, (viewport − max) / 2), and 100% here is the viewport (a fixed box's containing block). The 6px on the right is the Contact link's own padding, so its text ends on the edge. */ padding: 0 max(12px, calc(max(var(--gutter), (100% - var(--max)) / 2) - var(--panel-inset) - 6px)) 0 max(16px, calc(max(var(--gutter), (100% - var(--max)) / 2) - var(--panel-inset))); } .site-header::before, .site-header::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; transition: transform var(--spring-snappy-dur) var(--spring-snappy), opacity var(--fade-dur) var(--fade); } .site-header::before { background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.64)); border: 1px solid var(--g-edge); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(12,11,8,.06), 0 8px 20px -8px rgba(12,11,8,.10), 0 28px 56px -28px rgba(12,11,8,.28); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); } .site-header::after { background: rgba(253,252,248,.9); box-shadow: 0 2px 8px rgba(12,11,8,.06), 0 20px 40px -24px rgba(12,11,8,.35); opacity: 0; } .site-header[data-scrolled="true"]::before, .site-header[data-scrolled="true"]::after { transform: scaleY(.875); } .site-header[data-scrolled="true"]::after { opacity: 1; } /* A page that opens already scrolled (a #link, a reload, Back) shows the condensed bar at once (site.js). */ .site-header[data-instant]::before, .site-header[data-instant]::after { transition-duration: 0s; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: 44px; flex-shrink: 0; } .brand svg { width: 12px; height: 22px; flex-shrink: 0; } .brand-word { font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; } .brand-word .dot { color: var(--lime); } .nav { margin-left: auto; } .nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; } .nav-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; border-radius: 10px; } .nav-link svg { width: 16px; height: 16px; transition: transform var(--spring-snappy-dur) var(--spring-snappy); } .nav-link[aria-expanded="true"] svg { transform: rotate(180deg); } /* Current page: a 2px lime underline under the link text. */ .nav-link[aria-current="page"], .nav-link[data-current="true"], .text-link[aria-current="page"], .menu-sheet a[aria-current="page"] { font-weight: 700; text-decoration-line: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 8px; } .nav-menu { position: relative; } .dropdown { position: absolute; top: calc(100% + 10px); left: -8px; z-index: 31; width: 288px; padding: 8px; border-radius: 18px; list-style: none; background: rgba(253,252,248,.98); -webkit-backdrop-filter: none; backdrop-filter: none; } .dropdown a { display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 8px 12px; border-radius: 12px; text-decoration: none; } .dropdown a span { font-weight: 600; } .dropdown a small { font-size: 13px; color: var(--ink2); } .dropdown a[aria-current="page"] span { text-decoration: underline 2px var(--lime); text-underline-offset: 5px; } .bar-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; } .text-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 15px; font-weight: 600; text-decoration: none; } .menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--btn2); box-shadow: var(--soft-edge); cursor: pointer; align-items: center; justify-content: center; } .menu-btn svg { width: 22px; height: 22px; } .menu-btn .i-close, .menu-btn[aria-expanded="true"] .i-open { display: none; } .menu-btn[aria-expanded="true"] .i-close { display: block; } /* Mobile menu: a full-height sheet under the bar, 56px rows. */ .menu-sheet { position: fixed; inset: 0; z-index: 29; overflow-y: auto; overscroll-behavior: contain; background-color: var(--bg); padding: 88px max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 24px; transition: opacity var(--fade-dur) var(--fade), transform var(--spring-snappy-dur) var(--spring-snappy); } @starting-style { .menu-sheet { opacity: 0; transform: translateY(-8px); } } .menu-sheet ul { list-style: none; } .menu-sheet li a { display: flex; align-items: center; min-height: 56px; padding: 0 4px; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 18px; font-weight: 600; } .menu-sheet .label { margin: 0 4px 4px; } .menu-sheet .sheet-more { margin-top: 20px; } .menu-sheet .btn { flex-shrink: 0; margin-top: 24px; } /* (inside the menu's nav, so inside its landmark) */ html.menu-open, html.menu-open body { overflow: hidden; } /* Locking the page removes a classic scrollbar; keeping its gutter stops the bar and the close button jumping sideways. */ html.menu-open { scrollbar-gutter: stable; } /* ───────────── buttons & chips ───────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: var(--r-btn); font-size: 16px; font-weight: 600; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform var(--spring-snappy-dur) var(--spring-snappy); } .btn:active { transform: scale(.97); transition-duration: var(--press-dur); } .btn svg { width: 20px; height: 20px; flex-shrink: 0; } .btn-primary { background: var(--dark-fill); color: var(--btn-ink); box-shadow: var(--btn-edge), var(--btn-shadow); } .btn-secondary { background: var(--btn2); color: var(--ink); box-shadow: var(--soft-edge); } .btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } .btn-lime { background: var(--lime); color: #0C0B08; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(12,11,8,.12), 0 8px 16px -8px rgba(74,92,14,.35); } .btn-sm { height: 44px; padding: 0 20px; font-size: 15px; } .btn-xs { height: 44px; padding: 0 14px; font-size: 14px; } .btn-block { width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } .row-btns { display: flex; gap: 12px; flex-wrap: wrap; } /* Labels and meta lines replace decorative pills. Pills stay only for real toggles and the demo label. */ .label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); line-height: 1.3; } .label-slash svg { width: 8px; height: 14px; } /* Each item draws a hairline on its left; the line is shifted and clipped by that much, so a wrapped line never starts with a separator. The " · " text between items is for screen readers and copying. */ .meta-line { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; margin-left: -21px; clip-path: inset(0 0 0 21px); font-size: 15px; color: var(--ink2); line-height: 1.4; } .meta-line > span:not(.visually-hidden) { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--hairline); line-height: 1.1; min-width: 0; } .tag-lime { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--lime); color: #0C0B08; font-size: 12px; font-weight: 700; white-space: nowrap; } .ticks { list-style: none; display: flex; flex-direction: column; gap: 12px; } .ticks li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.4; } .ticks li::before { content: ''; flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px; margin-top: -1px; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C0B08' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; } .icon-well { width: 40px; height: 40px; border-radius: 12px; background: var(--well); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink); } .icon-well svg { width: 20px; height: 20px; } .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; min-height: 44px; } .link-arrow svg { width: 18px; height: 18px; transition: transform var(--spring-snappy-dur) var(--spring-snappy); } /* ───────────── hero ───────────── */ .hero { padding-top: clamp(120px, 12vw, 176px); display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 40px; align-items: center; min-height: min(100vh, 900px); } .hero-copy { display: flex; flex-direction: column; gap: 28px; } .hero-copy .lead { max-width: 540px; } .hero-copy .tm { max-width: 540px; font-size: 13px; } .hero-art { position: relative; width: 560px; height: 640px; perspective: 1600px; } .hero-art .tilt { position: absolute; transform-style: preserve-3d; will-change: transform; } .hero-art .card-dash { left: 0; top: 120px; transform: rotateY(14deg) rotateX(6deg) rotateZ(-2deg); transform-origin: left center; } .hero-art .card-phone { left: 230px; top: 10px; transform: rotateY(-10deg) rotateX(4deg); } /* Mock dashboard (sample data) */ .mini-dash { width: 360px; border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 12px; } .mini-dash .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 700; } .mini-dash .big { font-size: 34px; line-height: 1.05; } .stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .stat { padding: 8px 10px; border-radius: 12px; background: var(--well); box-shadow: inset 0 1px 2px rgba(12,11,8,.05); display: flex; flex-direction: column; } .stat b { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; } .stat span { font-size: 12px; color: var(--ink2); } .bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; } .bars span { flex: 1; border-radius: 4px; background: var(--well2); } .bars span.on { background: var(--lime); } /* Result card (scanner's three answers). Used by the demo and the live scanner. */ .rcard { border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .rcard-type { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); } .rcard-type .icon-well { width: 28px; height: 28px; border-radius: 9px; } .rcard-type .icon-well svg { width: 15px; height: 15px; } .rcard-title { font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1.05; letter-spacing: -0.015em; overflow-wrap: anywhere; } .safe { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--well); font-size: 14px; line-height: 1.4; } .safe svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--lime-ink); margin-top: 1px; } .safe strong { display: block; font-size: 15px; } .safe.warn { background: var(--warn-well); } .safe.warn svg { color: var(--warn-ink); } .safe.danger { background: var(--danger-well); } .safe.danger svg { color: var(--danger-ink); } /* ───────────── product cards ───────────── */ .products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .pcard { border-radius: 36px; padding: 32px; display: flex; flex-direction: column; gap: 24px; } .pcard-art { height: 300px; border-radius: 28px; background: var(--well); box-shadow: var(--recess); display: flex; align-items: center; justify-content: center; gap: 20px; overflow: hidden; padding: 20px; } .pcard-head { display: flex; gap: 14px; align-items: flex-start; } .pcard-head .icon-well { width: 44px; height: 44px; } .pcard-head p { color: var(--ink2); font-size: 15px; margin-top: 2px; } .pcard .ticks { gap: 10px; } .code-tile { background: #fff; border-radius: 20px; padding: 18px; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(12,11,8,.08), 0 16px 32px -16px rgba(12,11,8,.35); flex-shrink: 0; } .code-tile svg { width: 124px; height: 124px; } /* ───────────── scanner demo (sample codes → result) ───────────── */ .scan-demo { display: flex; flex-direction: column; gap: 24px; } .samples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .sample { position: relative; border: 0; cursor: pointer; border-radius: 24px; padding: 16px 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; min-width: 0; color: var(--ink); } /* Selected: a lime ring, with no transition. */ .sample[aria-expanded="true"] { box-shadow: var(--ring), var(--edge), var(--g-shadow); transition: none; } .sample .code-face { width: 100%; aspect-ratio: 1.2 / 1; background: #fff; border-radius: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px rgba(12,11,8,.05); } .sample .code-face svg { width: 62%; height: auto; max-height: 82%; } .sample .lbl { display: inline-flex; align-items: center; gap: 8px; } .sample .lbl svg { width: 16px; height: 16px; } /* The result opens over the codes, in the space the grid already takes up: nothing below moves (CLS 0). */ .samples-stage { position: relative; } /* Covered by an open card: the codes fade out, then are hidden. Hidden, not just transparent: when an opacity fade ends, the browser paints the codes again (their QR images included: 19 ms a frame on a low-end Android); hidden content isn't painted at all. Coming back, visibility returns at once and the fade runs. */ .samples { transition: opacity var(--fade-dur) var(--fade), visibility 0s linear 0s; } .samples[data-covered="true"] { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--fade-dur) var(--fade), visibility 0s linear var(--fade-dur); } /* Reduced motion stretches every transition to .01ms (the rule under "scroll reveal"), visibility's too: the codes would still be hidden in the instant a card closes, too hidden to take focus back. */ @media (prefers-reduced-motion: reduce) { .samples { transition: none !important; } } /* No scroll box: the card's shadow is never clipped and the card never scrolls inside itself (scan-demo.js grows the stage when the card is taller than the codes). */ .result-slot { position: absolute; inset: 0; z-index: 2; } /* Fast open (scan-demo.js): every card is built ahead, laid out and hidden, its layout and paint contained so revealing one touches nothing else. Placed with `translate` (no layout). Its shadow moves and fades with it (only opacity and transform animate). A card leaving (data-leaving) is closed but still drawn while it fades, and click-through: the codes, or the next card, under it answer the pointer at once. The open card is always the one on top ("Try another code": the new card fades in over the old one, which fades out under it). */ .result-slot[data-mode="prepared"] { pointer-events: none; } .result-slot[data-mode="prepared"] > .result-card { position: absolute; top: 0; left: 0; right: 0; visibility: hidden; contain: layout paint; } .result-slot[data-mode="prepared"] > .result-card[data-open="true"] { visibility: visible; pointer-events: auto; z-index: 1; } .result-slot[data-mode="prepared"] > .result-card[data-leaving="true"] { visibility: visible; pointer-events: none; } /* ...except its Close: a double click or tap on Close lands there and does nothing, instead of opening the code under it (scan-demo.js keeps the focus on the code). */ .result-slot[data-mode="prepared"] > .result-card[data-leaving="true"] .rc-close { pointer-events: auto; } /* Reduced motion turns every change into a .01ms transition (the rule under "scroll reveal"), visibility's too: the card and its title would still count as hidden in the frame the title is focused, and the focus would be lost. */ @media (prefers-reduced-motion: reduce) { .result-slot[data-mode="prepared"] > .result-card, .result-slot[data-mode="prepared"] > .result-card * { transition: none !important; } } /* The hint on the home page: one pulse on the first code (a ring, transform and opacity only), then gone after the first tap. The ring is on z-index 1, painted after everything else: below it, each code after it and the rest of the page would need a layer of its own above the moving ring while it runs. */ .tap-hint { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; color: var(--ink2); transition: opacity var(--fade-dur) var(--fade); } .tap-hint svg { width: 18px; height: 18px; color: var(--lime-ink); flex-shrink: 0; } .tap-hint[data-done="true"] { opacity: 0; } .sample[data-hint="true"]::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; border: 2px solid var(--lime); pointer-events: none; opacity: 0; animation: tap-pulse 1.4s cubic-bezier(.2, 0, 0, 1) 1 backwards; } /* the ring closes onto the tile's edge: never outside it */ @keyframes tap-pulse { 0% { opacity: 0; transform: scale(.92); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } } .result-slot .result-card { background: var(--g-solid); } /* The demo's card groups its buttons into rows (scan-demo.js): the main button with the other actions, and the details button with "Try another code". On a phone the main button keeps its own full-width row. */ .result-slot .rc-acts, .result-slot .rc-foot { display: flex; flex-wrap: wrap; gap: 8px 12px; } .result-slot .rc-acts { align-items: flex-end; } .result-slot .rc-acts > .main-act { display: contents; } /* its note gets a row of its own; the button sits beside the other actions */ .result-slot .rc-acts > .main-act > .act-line { flex-basis: 100%; } @media (min-width: 641px) { .result-slot .rc-acts > .rc-secondary { margin-bottom: 6px; } } /* centred on the 56px main button beside it */ .result-slot .rc-foot { align-items: center; } .result-slot .rc-foot .rc-details-btn, .result-slot .rc-foot .rc-another { align-self: auto; } @media (max-width: 640px) { .result-slot .rc-acts > .main-act > * { flex-basis: 100%; } } .phone-link { grid-column: 1 / -1; border-radius: 28px; padding: 24px 28px; display: flex; gap: 24px; align-items: center; } .phone-link svg.qr { width: 104px; height: 104px; flex-shrink: 0; background: #fff; border-radius: 12px; padding: 6px; box-shadow: var(--recess); } .phone-link .url { font-size: 14px; color: var(--ink2); margin-top: 8px; } /* Phones and tablets are already where the scanner runs: the same width as the scanner page's desktop-only QR. */ @media (max-width: 960px) { .phone-link { display: none; } } .details { border-top: 1px solid var(--line); } .details dl { margin: 0; display: flex; flex-direction: column; } .details .kv { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; } .details .kv dt { flex-shrink: 0; } .details .kv dd { min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; } .details dt { color: var(--ink2); } .details dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; } /* ───────────── result card: one layout for every device ───────────── type → title → safety line → one main button → Copy / Share → details. Spacing from 4/8/12/16/24 only. */ .result-card { border-radius: 32px; padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; } .rc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; } .result-card .rcard-type { font-size: 14px; gap: 8px; } .rc-close { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 12px; background: var(--btn2); box-shadow: var(--soft-edge); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .rc-close svg { width: 20px; height: 20px; } /* The demo's "Try another code": the next sample's result, in place (assets/js/scan-demo.js). */ .result-card .rc-another { align-self: flex-start; } .rc-what { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .result-card .rcard-title { font-size: clamp(28px, 3vw, 36px); outline: none; } .result-card .main-action { align-self: flex-start; max-width: 100%; } .main-act { display: flex; flex-direction: column; gap: 8px; } .main-act .main-action { align-self: flex-start; } .demo-note:empty { display: none; } .rc-secondary { display: flex; flex-wrap: wrap; gap: 8px; } .rc-secondary:empty { display: none; } .rc-details-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-btn); background: var(--btn2); box-shadow: var(--soft-edge); font-size: 15px; font-weight: 600; cursor: pointer; } .rc-details-btn svg { width: 16px; height: 16px; transition: transform var(--spring-snappy-dur) var(--spring-snappy); } .rc-details-btn[aria-expanded="true"] svg { transform: rotate(180deg); } /* Details: the button toggles `hidden`; the contents ease in (card.js). */ .rc-details-in { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* The result card's contents (tools/qr-scanner/lib/card.js): the scanner, the demo and the phone preview share them. */ .results-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .results-head h2 { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.015em; } .num-badge { width: 32px; height: 32px; border-radius: 999px; background: var(--lime); color: #0C0B08; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .result-sub { color: var(--ink2); font-size: 15px; line-height: 1.45; } .alerts { display: flex; flex-direction: column; gap: 8px; } .alert strong { display: block; margin-bottom: 2px; } .main-act:empty { display: none; } .main-act .btn { height: 56px; font-size: 17px; } /* A label can be long ("Open in OpenStreetMap"), or as long as what was scanned ("Email asha@example.com"): it wraps inside its button rather than running past the card. One line keeps the usual height (44px, the main button 56px); the text starts beside its icon. The smaller buttons have the details button's 16px sides, so a phone number ("Call +1 202-555-0143") stays on one line on a 320px phone instead of breaking at a hyphen. */ .result-card .btn { max-width: 100%; height: auto; min-height: 44px; padding-block: 10px; white-space: normal; overflow-wrap: anywhere; text-align: left; } .result-card .btn-sm { padding-inline: 16px; } .result-card .main-act .btn { min-height: 56px; } .details-sec { border-top: 1px solid var(--line); padding-top: 12px; } .details-h { font-size: 14px; font-weight: 700; color: var(--ink2); margin-bottom: 4px; } .fields { margin: 0; display: flex; flex-direction: column; } .fields .row { display: grid; grid-template-columns: minmax(96px, 36%) minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; } .fields .row:last-child { border-bottom: 0; } .fields dt { color: var(--ink2); font-size: 15px; } .fields dd { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 16px; overflow-wrap: anywhere; min-width: 0; } .fields .val.em { font-weight: 700; } .fields .val.mono { font-family: var(--mono); font-size: 15px; } .fields .val.block { white-space: pre-wrap; display: block; width: 100%; } .basis { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 0 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink2); flex-wrap: wrap; min-width: 0; } .basis svg { width: 16px; height: 16px; color: var(--lime-ink); flex-shrink: 0; } .basis strong { color: var(--ink); } .basis-tag { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); } .fields .field-note { grid-column: 1 / -1; display: block; font-size: 14px; color: var(--ink2); } .mini { position: relative; min-height: 36px; min-width: 44px; padding: 0 12px; border-radius: 10px; border: 0; background: var(--btn2); box-shadow: var(--soft-edge); font-size: 14px; font-weight: 600; cursor: pointer; } /* A 44px-tall hit area around the 36px button, so the field rows keep their height. */ .mini::after { content: ''; position: absolute; inset: -4px 0; } .actions { display: flex; flex-wrap: wrap; gap: 8px; } .raw summary { cursor: pointer; font-size: 14px; color: var(--ink2); min-height: 44px; display: flex; align-items: center; } .raw pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 13px; background: var(--well); padding: 12px; border-radius: 12px; margin: 0 0 8px; max-height: 260px; overflow: auto; } .raw dl { margin: 0; display: grid; gap: 4px; font-size: 14px; } .raw dl div { display: flex; gap: 8px; } .raw dt { color: var(--ink2); } .raw dd { margin: 0; } .lookup { display: flex; flex-direction: column; gap: 12px; } .lookup-found:empty { display: none; } .lookup-hint, .lookup-note { font-size: 14px; color: var(--ink2); display: flex; gap: 8px; align-items: flex-start; } .lookup-note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--lime-ink); margin-top: 2px; } .ai-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; } .ai-label svg { width: 16px; height: 16px; } .lookup-error { font-size: 15px; color: var(--danger-ink); } .lookup-empty { font-size: 15px; color: var(--ink2); display: flex; flex-direction: column; gap: 8px; } .lookup-empty .lookup-says { color: var(--ink); } .lookup-name { font-family: var(--display); font-size: 22px; } .source { border-radius: 18px; background: var(--well); box-shadow: inset 0 1px 2px rgba(12,11,8,.05); padding: 14px 16px; } .source h4 { font-size: 14px; font-weight: 700; color: var(--ink2); } .attribution { font-size: 13px; color: var(--ink2); margin-top: 6px; } @media (max-width: 640px) { .result-card { padding: 20px; border-radius: 24px; } .result-card .main-action, .main-act .main-action { align-self: stretch; width: 100%; padding-inline: 8px; } /* full width, its label centred: a long one uses the sides before it wraps */ .fields .row { grid-template-columns: minmax(0, 1fr); } } /* Layer 1: up to three facts, then the one button with its line (a warning only when a trigger fired). */ /* Each fact is as wide as its value and shares a line only when that fits, so an ID or a network name is never broken mid-word by a column too narrow for it; a value wider than the card still wraps, as a last resort. */ dl.facts { margin: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; } dl.facts:empty { display: none; } dl.facts .fact { flex: 1 1 auto; min-width: min(128px, 100%); display: flex; flex-direction: column; gap: 2px; } .facts dt { font-size: 13px; color: var(--ink2); } .facts dd { margin: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; } .facts dd.mono { font-family: var(--mono); font-weight: 500; font-size: 15px; } .act-line { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 15px; line-height: 1.4; } .act-line svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; } .act-warn { padding: 12px; border-radius: 12px; background: var(--warn-well); } .act-warn svg { color: var(--warn-ink); } .act-warn[data-level="danger"] { background: var(--danger-well); } .act-warn[data-level="danger"] svg { color: var(--danger-ink); } .act-note { color: var(--ink2); } .act-note svg { color: var(--lime-ink); } .lookup-main:empty { display: none; } /* Payments: a specific app one tap further (Android), the three steps to pay from a saved image (iPhone), and one hint line. */ .apps-more summary { cursor: pointer; font-size: 15px; font-weight: 600; min-height: 44px; display: flex; align-items: center; } .apps-more[open] summary { margin-bottom: 8px; } .pay-apps { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; } .pay-apps .pay-app { width: 100%; } .pay-steps { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 4px; font-size: 15px; } .pay-hint { margin: 0; } /* Layer 2: sections with short labels, score chips, nutrient levels, and the database source. */ .details-sec h4 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); margin-bottom: 4px; } .lookup-panel-sections:empty, .lookup-sources:empty { display: none; } .lookup-panel-sections, .lookup-sources { display: flex; flex-direction: column; gap: 16px; } .fields .val.muted { color: var(--ink2); font-weight: 400; } .scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .score { border-radius: 14px; padding: 10px 12px; background: var(--well); box-shadow: inset 0 1px 2px rgba(12,11,8,.05); display: flex; flex-direction: column; gap: 2px; min-width: 0; } .score-name { font-size: 13px; color: var(--ink2); } .score-grade { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1.1; } .score[data-grade="none"] .score-grade { font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink2); } .score-meaning { font-size: 13px; color: var(--ink2); } .levels .row[data-level="high"] .level { color: var(--danger-ink); font-weight: 700; } .levels .row[data-level="medium"] .level { color: var(--warn-ink); font-weight: 700; } .levels .row[data-level="low"] .level { color: var(--lime-ink); font-weight: 700; } .additives { font-size: 15px; overflow-wrap: anywhere; } .ingredients summary { cursor: pointer; font-size: 15px; font-weight: 600; min-height: 44px; display: flex; align-items: center; } .ingredients p { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; } .source-links { margin-top: 6px; } .source-links a { font-weight: 600; } .ai-foot { font-size: 13px; color: var(--ink2); } /* ───────────── the scanner's surface ───────────── The live scanner (tools/qr-scanner/) and the phone preview share these rules, so the preview is drawn by the scanner's own CSS. Sizes follow the width of .scan-ui itself (a container), not the page: the preview is a phone wherever it sits. */ .privacy-line { display: flex; align-items: center; gap: 8px; color: var(--ink2); font-size: 15px; } .privacy-line svg { width: 18px; height: 18px; flex-shrink: 0; } .scan-ui { container: scan-ui / inline-size; } .scan-ui .scanner { display: flex; flex-direction: column; gap: 14px; outline: none; } .scan-ui .viewport { position: relative; aspect-ratio: 4 / 3; background: #0C0B08; border-radius: 28px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(248,245,238,.08); } .scan-ui .idle { position: relative; text-align: center; color: #F8F5EE; padding: 24px; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .scan-ui .idle-icon { width: 52px; height: 52px; color: var(--lime); } .scan-ui .idle p { font-size: 16px; line-height: 1.45; color: rgba(248,245,238,.86); } /* The viewfinder: lime corners and a scanline sweeping its height (84cqh: the frame is a size container). */ .scan-ui .frame { position: absolute; width: 62%; aspect-ratio: 1; max-height: 78%; pointer-events: none; container-type: size; } .scan-ui .frame i { position: absolute; width: 32px; height: 32px; border: 0 solid var(--lime); } .scan-ui .frame i:nth-child(1) { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 14px; } .scan-ui .frame i:nth-child(2) { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 14px; } .scan-ui .frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 14px; } .scan-ui .frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 14px; } .scan-ui .frame::after { content: ''; position: absolute; left: 6%; right: 6%; height: 2px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 12px var(--lime); top: 8%; animation: scanline 2.2s cubic-bezier(.45, 0, .2, 1) infinite alternate; } @keyframes scanline { to { transform: translateY(84cqh); } } @media (prefers-reduced-motion: reduce) { .scan-ui .frame::after { animation: none; top: 50%; } } .scan-ui .status { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0 auto; width: max-content; max-width: calc(100% - 24px); text-align: center; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 12px; background: rgba(248,245,238,.94); color: #0C0B08; } .scan-ui .status:empty { display: none; } .scan-ui .status.err { background: #FFE5E0; color: #7A1A10; } .scan-ui .controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .scan-ui .results-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .scan-ui .empty-result { border-radius: 28px; padding: 24px; display: flex; gap: 14px; align-items: flex-start; color: var(--ink2); font-size: 16px; line-height: 1.45; } .scan-ui .empty-result strong { color: var(--ink); display: block; } .scan-ui .results-col:has(.results:not(:empty)) .empty-result { display: none; } /* Scrolled to just under the header: html's scroll-padding-top leaves the header's room, this adds a little air. */ .scan-ui .results { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 16px; } .scan-ui .results:empty { display: none; } .scan-ui .result { animation: rise var(--spring-standard-dur) var(--spring-standard) both; } @keyframes rise { from { opacity: 0; transform: translateY(16px); } } .scan-ui .result .rcard-title { font-size: clamp(26px, 3vw, 34px); } @container scan-ui (max-width: 600px) { .scan-ui .viewport { aspect-ratio: 3 / 4; border-radius: 24px; } .scan-ui .controls .btn { flex: 1 1 auto; } .scan-ui .result { padding: 20px; border-radius: 24px; } .scan-ui .result .rcard-title { font-size: 26px; } .scan-ui .result .main-action, .scan-ui .main-act .main-action { align-self: stretch; width: 100%; padding-inline: 8px; } .scan-ui .fields .row { grid-template-columns: minmax(0, 1fr); } } /* ───────────── phone preview (the hero phone; the Scanner demo, further down) ───────────── An unbranded phone with the proportions of a current 6.3-inch flagship, in points: a 402 × 874 screen with 62 pt corners inside a 16 pt frame (434 × 906, 78 pt corners), a 126 × 37 pill cutout 11 pt from the top and a status bar beside it. Under the status bar is the browser's viewport: the scanner page at the scroll position the real page reaches (the hero's still frame sits at --pv-result-y, where the result card is in view), the site's header over it and the browser's address bar at the bottom. Drawn at 1 pt = 1 px and zoomed to fit where it's used. */ .pv { position: relative; width: 434px; height: 906px; flex-shrink: 0; border-radius: 78px; text-align: left; } .pv-device { position: absolute; inset: 0; border-radius: 78px; padding: 16px; background: #0C0B08; box-shadow: inset 0 0 0 1.5px #4A4740, inset 0 0 0 4px #1C1B18, 0 30px 60px -20px rgba(12,11,8,.45); } .pv-screen { position: relative; width: 402px; height: 874px; border-radius: 62px; overflow: hidden; background: var(--bg); isolation: isolate; } .pv-bar { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 54px; display: grid; grid-template-columns: 1fr 126px 1fr; align-items: center; background: var(--bg); color: #0C0B08; } .pv-time { justify-self: center; padding-top: 4px; font: 600 17px/1 -apple-system, system-ui, var(--font); letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .pv-island { width: 126px; height: 37px; border-radius: 19px; background: #000; align-self: start; margin-top: 11px; } .pv-sys { justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding-top: 4px; } .pv-sys svg { height: 12px; width: auto; fill: currentColor; } .pv-viewport { position: absolute; left: 0; right: 0; top: 54px; bottom: 0; overflow: hidden; } /* The page: the scanner panel as the site lays it out at 402 px (13.5 px inset, 40 × 20 padding). */ .pv-page { position: absolute; left: 0; right: 0; top: 0; padding: 0 0 240px; --pv-start-y: -98px; --pv-result-y: -676px; transform: translateY(var(--pv-start-y)); } .pv[data-state="result"] .pv-page { transform: translateY(var(--pv-result-y)); } .pv-panel { margin: 0 13.5px; padding: 40px 20px; border-radius: 36px; display: flex; flex-direction: column; gap: 28px; } .pv-h2 { font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1.04; letter-spacing: -0.03em; } .pv-app { display: flex; flex-direction: column; gap: 24px; position: relative; min-height: 1180px; } /* The results column sits under the scanner as in the real page (24 px gap), placed with a fixed transform at its place under the idle scanner (444 + 14 + two 52 px button rows and their 10 px gap). */ .pv-app .results-col { position: absolute; left: 0; right: 0; top: 0; transform: translateY(596px); } .pv-cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 45%, #3B3934, #151412 72%); } .pv-code { background: #fff; border-radius: 14px; padding: 14px; width: 190px; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: rotate(-3deg); box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); } /* The demo's camera box is always 3:4 portrait, so the viewfinder's height cap never applies there; and under the phone's zoom WebKit takes the cap's % of the zoomed height, which shrank the viewfinder to a fraction. */ .pv .scan-ui .frame { max-height: none; } .pv-code svg { width: 100%; height: auto; } .pv-code.is-bar svg { height: 96px; } .pv-code .ean-digits { font-size: 13px; } .pv-rh { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.015em; } /* The site's header as a phone shows it over a scrolled page. */ .pv-header { position: absolute; z-index: 2; top: 12px; left: 12px; right: 12px; height: 56px; padding: 0 6px 0 16px; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; background: var(--g-solid); /* opaque: nothing on the page shows through the phone's header */ border: 1px solid var(--g-edge); box-shadow: 0 2px 8px rgba(12,11,8,.06), 0 20px 40px -24px rgba(12,11,8,.35); } .pv-header .brand-word { font-size: 13px; } .pv-header .brand svg { width: 10px; height: 18px; } .pv-menu { width: 44px; height: 44px; border-radius: 12px; background: var(--btn2); display: inline-flex; align-items: center; justify-content: center; } .pv-menu svg { width: 20px; height: 20px; } /* The browser's address bar, floating at the bottom, and the home indicator. */ .pv-url { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 32px 16px 30px; background: linear-gradient(rgba(248,245,238,0), rgba(248,245,238,.94) 45%); } .pv-url-pill { height: 48px; border-radius: 24px; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(255,255,255,.9); box-shadow: 0 0 0 .5px rgba(12,11,8,.12), 0 8px 24px -8px rgba(12,11,8,.25); font: 500 16px/1 -apple-system, system-ui, var(--font); color: #0C0B08; } .pv-url-pill svg { width: 13px; height: 13px; } /* The simulated finger: an iPhone-style touch circle where the demo taps, fading out (the Scanner demo below). Placed with `translate`, animated with transform and opacity only. */ .pv-touch { position: absolute; z-index: 4; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(12,11,8,.16); border: 1.5px solid rgba(255,255,255,.75); opacity: 0; pointer-events: none; } .pv-home { position: absolute; z-index: 3; left: 50%; bottom: 8px; width: 140px; height: 5px; margin-left: -70px; border-radius: 3px; background: #0C0B08; } /* The phone's box (.pv-fit): each placement gives it a size, and assets/js/site.js sets --pv-zoom so the whole phone fits inside it with its own proportions, like an image with object-fit: contain. The values here are the same fit worked out for each placement's usual size, so the first frame (and no-JS) is right too. */ .pv-fit { --pv-zoom: .3; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; } .pv-fit > .pv { zoom: var(--pv-zoom); } .hero-art .card-phone .pv-fit { width: 300px; aspect-ratio: 434 / 906; --pv-zoom: .691; } @media (max-width: 640px) { .hero-art .card-phone .pv-fit { width: min(300px, 100%); } } /* ───────────── what it reads: a mind map (assets/js/reads-map.js) ───────────── The nested list reads as an indented tree with rails; from 1024px the script lays it out radially. */ .reads-map { position: relative; } .rm-lines { display: none; } .rm-root, .rm-groups, .rm-leaves { list-style: none; margin: 0; padding: 0; } .rm-center { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 16px; background: var(--dark-fill); box-shadow: var(--btn-edge), 0 1px 2px rgba(12,11,8,.25), 0 12px 24px -12px rgba(12,11,8,.5); color: var(--btn-ink); font-family: var(--display); font-weight: 600; font-size: 20px; white-space: nowrap; } .rm-groups { display: flex; flex-direction: column; gap: 16px; margin-left: 24px; padding: 16px 0 0 24px; border-left: 1px solid var(--hairline); } .rm-branch { position: relative; } .rm-branch::before { content: ''; position: absolute; left: -24px; top: 22px; width: 16px; height: 1px; background: var(--hairline); } .rm-group { min-height: 44px; padding: 0 16px; border: 1px solid var(--g-edge); border-radius: 12px; background: var(--paper-fill); box-shadow: inset 0 1px 0 #fff, var(--chip-shadow); font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap; color: var(--ink); transition: transform var(--press-dur) ease-out; } .rm-group[aria-pressed="true"] { background: var(--dark-fill); color: var(--btn-ink); border-color: transparent; } .rm-group:active { transform: scale(.96); } .rm-leaves { display: flex; flex-direction: column; gap: 8px; margin-left: 24px; padding: 8px 0 0 24px; border-left: 1px solid var(--hairline); } .rm-leaf { position: relative; display: flex; align-items: center; gap: 12px; max-width: 360px; min-width: 0; padding: 8px 12px; border-radius: 16px; border: 1px solid var(--g-edge); background: var(--paper-fill); box-shadow: inset 0 1px 0 #fff, var(--chip-shadow); } .rm-leaf::before { content: ''; position: absolute; left: -24px; top: 50%; width: 16px; height: 1px; background: var(--hairline); } .rm-leaf .icon-well { width: 36px; height: 36px; border-radius: 10px; } .rm-leaf .icon-well svg { width: 18px; height: 18px; } .rm-text { display: flex; flex-direction: column; min-width: 0; } .rm-name { font-weight: 700; font-size: 15px; } .rm-act { font-size: 14px; color: var(--ink2); overflow-wrap: anywhere; } .rm-branch[data-on="true"] .rm-leaf, .rm-branch[data-on="true"] .rm-group { box-shadow: var(--ring), inset 0 1px 0 #fff, 0 1px 2px rgba(12,11,8,.06), 0 10px 20px -8px rgba(12,11,8,.14); } .reads-map[data-layout="radial"] .rm-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .reads-map[data-layout="radial"] .rm-node { position: absolute; margin: 0; } .reads-map[data-layout="radial"] .rm-groups, .reads-map[data-layout="radial"] .rm-leaves { border: 0; margin: 0; padding: 0; } /* Nodes are positioned against the map itself, so nothing in between may be a containing block. */ .reads-map[data-layout="radial"] .rm-branch, .reads-map[data-layout="radial"] .rm-root > li { position: static; } .reads-map[data-layout="radial"] .rm-branch::before, .reads-map[data-layout="radial"] .rm-leaf::before { display: none; } .reads-map[data-layout="radial"] .rm-leaf { width: 216px; } .rm-lines path { fill: none; stroke: var(--hairline); stroke-width: 1.5; transition: opacity var(--spring-standard-dur) var(--spring-standard); } .rm-lines path:not([data-drawn]) { opacity: 0; } .rm-lines path[data-on="true"] { stroke: var(--lime-ink); stroke-width: 2.5; } /* ───────────── three answers / type grid ───────────── */ .answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; counter-reset: a; } .answer { border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 10px; } .answer .n { width: 40px; height: 40px; border-radius: 999px; background: var(--lime); color: #0C0B08; font-family: var(--display); font-weight: 700; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px -2px rgba(74,92,14,.4); } /* ───────────── diagrams ───────────── */ .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .chips .lbl { font-size: 14px; color: var(--ink2); margin-right: 8px; } .chip-btn { height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; background: var(--btn2); box-shadow: var(--soft-edge); font-size: 15px; font-weight: 500; transition: transform var(--press-dur) ease-out; } /* The pressed state swaps with no transition. */ .chip-btn[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; box-shadow: var(--btn-edge), 0 4px 10px -6px rgba(12,11,8,.5); } .chip-btn:active { transform: scale(.96); } .flow { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; position: relative; } .zone { position: relative; border-radius: 32px; padding: 24px; min-height: 460px; } .zone-phone { background: var(--well); border: 1px solid var(--line); box-shadow: inset 0 1px 3px rgba(12,11,8,.06); } .zone-out { border: 1px dashed var(--hairline); } .zone-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; } .zone-title svg { width: 18px; height: 18px; } .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 150px; position: relative; list-style: none; } /* Diagram node: the same fill and light edge as a card, smaller shadows. Active: a lime ring (and, with a mouse, a 2px lift). Dimmed: faded, text still AA. A pickable node is a real