/* ===== 00-base.css ===== */ /* ========================================================================== Korelda: the design system for korelda.com (and the privacy, terms and support pages, which load this same stylesheet). Layout, sizes, spacing and motion follow the measured specs of Apple's iPhone 18 Pro page, rebuilt with our own code and our own class names (every class starts with k-, apart from the pieces carried over from the site before: the loading message, the pill navbar and the document pages). Breakpoints (Apple's): small <= 734px, medium 735 to 1068px, large >= 1069px, xlarge >= 1441px (xsmall <= 480px for a few radii). Large is the default below; medium and small override it. The markup contract for everything here is in src/COMPONENTS.md. ========================================================================== */ @font-face{font-family:"Instrument Serif";src:url("../assets/fonts/InstrumentSerif-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;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:"Instrument Serif";src:url("../assets/fonts/InstrumentSerif-Italic-ext.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"Geist";src:url("../assets/fonts/Geist.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap;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:"Geist";src:url("../assets/fonts/Geist-ext.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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} /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { color-scheme: dark; /* Surfaces (dark theme). Sections alternate #000 and #1d1d1f. */ --k-bg: #000; --k-bg-alt: #1d1d1f; --k-fill-2: #161617; --k-fill-3: #1d1d1f; --k-gray-3: #424245; --k-gray-4: #333336; /* Text */ --k-text: #f5f5f7; --k-glyph: #fff; --k-text-2: #86868b; --k-text-2-alt: #d2d2d7; --k-text-3: #6e6e73; --k-eyebrow: #6e6e73; --k-caption: rgba(255, 255, 255, .92); --k-fine: rgba(255, 255, 255, .56); --k-fine-link: rgba(255, 255, 255, .8); /* Links and buttons */ --k-link: #2997ff; --k-blue: #0071e3; --k-blue-hover: #0076df; --k-blue-active: #006edb; --k-focus: #0071e3; /* Status (Apple) and money (the app's own up and down colours) */ --k-red: #ff3037; --k-green: #03a10e; --k-orange: #ff791b; --k-positive: #30d158; --k-negative: #ff453a; /* Lines */ --k-keyline: #424245; --k-hairline: rgba(134, 134, 139, .37); --k-hairline-soft: rgba(255, 255, 255, .1); /* Glass controls: 36px circles (paddles, tile +, close), the 56px docked control bar, the hero platter, the floating local nav */ --k-glass: rgba(66, 66, 69, .72); --k-glass-hover: rgba(73, 73, 76, .7256); --k-glass-active: rgba(57, 57, 60, .7424); --k-glass-icon: rgba(255, 255, 255, .8); --k-glass-solid: #333336; --k-bar-rgb: 42, 42, 45; --k-platter: rgba(51, 51, 54, .72); --k-localnav-bg: rgba(18, 18, 18, .8); --k-localnav-ring: #282828; --k-localnav-solid: #121212; --k-ribbon-bg: rgba(29, 29, 31, .8); --k-scrim: rgba(0, 0, 0, .48); /* Korelda's own three category colours (savings blue, fixed violet, income green). Used as light only: the loading message and gradient text. */ --glow-blue: 120, 199, 255; --glow-violet: 191, 120, 219; --glow-green: 61, 230, 130; /* Type */ --k-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif; /* The navbar's own face (Geist, SIL OFL, hosted here): the page keeps SF */ --k-font-nav: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --k-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; --k-mono: ui-monospace, "SF Mono", Menlo, monospace; /* Geometry */ --k-radius: 28px; /* media, cards, placeholders */ --k-radius-tile: 18px; /* small tiles */ --k-content-max: 1260px; /* 420px at small */ --k-vw: 100vw; /* the JS replaces this with the width without the scrollbar */ --k-vh: 1vh; --k-gallery-pad: max(calc(var(--k-vw) * .0625), calc((var(--k-vw) - var(--k-content-max)) / 2)); --k-localnav-h: 72px; /* 52px pill + 10px above and below */ /* Section rhythm (large / medium / small) */ --k-pad: 144px; /* every section's top and default bottom */ --k-pad-reduced: 120px; /* reduced top, and the control bar's resting margin */ --k-pad-bar: 224px; /* bottom of a section that parks the floating control bar */ /* The phone. One height token per role; the width follows 720:1472. */ --k-phone-ratio: .48913; --k-phone-hero: clamp(480px, calc(78 * var(--k-vh)), 820px); --k-phone-stage: clamp(440px, calc(70 * var(--k-vh)), 600px); --k-phone-card: 420px; --k-phone-small: 300px; /* Easing canon: one curve per named ease (exact JS versions live in K.ease) */ --k-linear: linear; --k-ease: cubic-bezier(.25, .1, .25, 1); --k-ease-in: cubic-bezier(.42, 0, 1, 1); --k-ease-out: cubic-bezier(0, 0, .58, 1); --k-ease-in-out: cubic-bezier(.42, 0, .58, 1); --k-ease-in-quad: cubic-bezier(.11, 0, .5, 0); --k-ease-in-out-quad: cubic-bezier(.45, 0, .55, 1); --k-ease-out-cubic: cubic-bezier(.33, 1, .68, 1); --k-ease-in-out-cubic: cubic-bezier(.65, 0, .35, 1); --k-ease-out-quart: cubic-bezier(.25, 1, .5, 1); --k-ease-out-quint: cubic-bezier(.22, 1, .36, 1); --k-ease-in-out-sine: cubic-bezier(.37, 0, .63, 1); --k-ease-card: cubic-bezier(0, 0, .5, 1); /* card hover grow, 300ms */ --k-ease-rise: cubic-bezier(.33, 0, .83, 1); /* zoom reveal transform, 1500ms */ --k-fade-ease: var(--k-ease-in-out-cubic); /* crossfades: out-cubic on touch */ /* Springs as linear() curves (fallbacks for browsers without linear()) */ --k-spring-card: cubic-bezier(.3, 1.3, .5, 1); /* spring(1,100,14,0), 1000ms: pill to card */ --k-spring-in: cubic-bezier(.3, 1.35, .5, 1); /* spring(1,60,10,0), 450ms: stage media in */ --k-spring-pop: cubic-bezier(.3, 1.3, .5, 1); /* spring(1,56,10,0): close button in */ --k-spring-disc: cubic-bezier(.3, 1.45, .5, 1); /* spring(1.61,100,14,0), 1400ms: intro disc */ --k-spring-bouncy: cubic-bezier(.3, 1.6, .5, 1); /* k100 c8, 1750ms: control bar rise */ --k-spring-soft: cubic-bezier(.25, .9, .35, 1); /* k100 c20, 920ms: no overshoot */ --k-spring-snappy: cubic-bezier(.3, 1.2, .5, 1); /* k200 c20, 720ms: dots */ } @supports (height: 1svh) { :root { --k-vh: 1svh; } } @supports (transition-timing-function: linear(0, 1)) { :root { --k-ease-in-quad: linear(0, .0025, .01, .0225, .04, .0625, .09, .1225, .16, .2025, .25, .3025, .36, .4225, .49, .5625, .64, .7225, .81, .9025, 1); --k-ease-in-out-quad: linear(0, .005, .02, .045, .08, .125, .18, .245, .32, .405, .5, .595, .68, .755, .82, .875, .92, .955, .98, .995, 1); --k-ease-out-cubic: linear(0, .1426, .271, .3859, .488, .5781, .657, .7254, .784, .8336, .875, .9089, .936, .9571, .973, .9844, .992, .9966, .999, .9999, 1); --k-ease-in-out-cubic: linear(0, .0005, .004, .0135, .032, .0625, .108, .1715, .256, .3645, .5, .6355, .744, .8285, .892, .9375, .968, .9865, .996, .9995, 1); --k-ease-out-quart: linear(0, .1855, .3439, .478, .5904, .6836, .7599, .8215, .8704, .9085, .9375, .959, .9744, .985, .9919, .9961, .9984, .9995, .9999, 1, 1); --k-ease-out-quint: linear(0, .2262, .4095, .5563, .6723, .7627, .8319, .884, .9222, .9497, .9688, .9815, .9898, .9947, .9976, .999, .9997, .9999, 1, 1, 1); --k-ease-in-out-sine: linear(0, .0062, .0245, .0545, .0955, .1464, .2061, .273, .3455, .4218, .5, .5782, .6545, .727, .7939, .8536, .9045, .9455, .9755, .9938, 1); --k-spring-card: linear(0, .118, .357, .601, .797, .929, 1.005, 1.038, 1.046, 1.04, 1.029, 1.018, 1.009, 1.003, 1, .998, .998, .998, .999, .999, 1, 1, 1, 1, 1); --k-spring-in: linear(0, .117, .359, .613, .819, .959, 1.036, 1.067, 1.068, 1.054, 1.036, 1.02, 1.007, 1, .996, .995, .996, .997, .998, .999, 1, 1, 1, 1, 1); --k-spring-pop: linear(0, .106, .329, .569, .77, .915, 1.003, 1.046, 1.059, 1.055, 1.042, 1.027, 1.015, 1.006, 1, .997, .996, .997, .997, .998, .999, 1, 1, 1, 1); --k-spring-disc: linear(0, .143, .437, .733, .954, 1.079, 1.124, 1.115, 1.081, 1.042, 1.012, .993, .985, .985, .989, .994, .998, 1, 1.002, 1.002, 1.002, 1.001, 1, 1, 1); --k-spring-bouncy: linear(0, .0839, .2882, .545, .7982, 1.0087, 1.1558, 1.2348, 1.2533, 1.2262, 1.1713, 1.1054, 1.0422, .991, .9563, .9388, .9361, .9444, .959, .9758, .9915, 1.0039, 1.012, 1.0159, 1.016, 1.0136, 1.0098, 1.0055, 1.0016, .9986, .9967, .9959, .996, .9967, .9977, .9988, .9997, 1.0004, 1.0009, 1.001, 1); --k-spring-soft: linear(0, .0229, .0788, .1531, .2359, .3206, .4028, .48, .5507, .6144, .6709, .7205, .7636, .8008, .8327, .86, .8831, .9026, .919, .9328, .9444, .954, .9621, .9687, .9743, .9789, .9826, .9858, .9883, .9905, .9922, .9936, .9948, .9958, .9965, .9972, .9977, .9981, .9985, .9988, 1); --k-spring-snappy: linear(0, .0289, .1021, .2021, .3153, .4316, .5436, .6465, .7375, .8152, .8794, .9307, .9702, .9994, 1.0197, 1.0328, 1.0401, 1.043, 1.0427, 1.0401, 1.0362, 1.0314, 1.0264, 1.0215, 1.0169, 1.0127, 1.0092, 1.0062, 1.0038, 1.0019, 1.0004, .9994, .9988, .9984, .9982, .9981, .9982, .9984, .9986, .9988, 1); } } html.k-touch { --k-fade-ease: var(--k-ease-out-cubic); } @media (max-width: 1068px) { :root { --k-pad: 120px; --k-pad-reduced: 80px; --k-pad-bar: 176px; --k-phone-hero: clamp(420px, calc(66 * var(--k-vh)), 640px); --k-phone-stage: clamp(420px, calc(64 * var(--k-vh)), 560px); --k-phone-card: 400px; --k-phone-small: 260px; } } @media (max-width: 734px) { :root { --k-pad: 112px; --k-pad-reduced: 56px; --k-pad-bar: 144px; --k-content-max: 420px; --k-phone-hero: clamp(360px, calc(56 * var(--k-vh)), 500px); --k-phone-stage: clamp(360px, calc(58 * var(--k-vh)), 500px); --k-phone-card: 300px; --k-phone-small: 220px; } } /* Aliases the document pages and older markup still read */ :root { --bg: var(--k-bg); --text: var(--k-text); --text-2: var(--k-text-2); --text-3: var(--k-text-3); --surface: var(--k-bg-alt); --surface-2: var(--k-fill-2); --hairline: var(--k-hairline-soft); --radius: var(--k-radius); --ease: var(--k-ease-out-quint); --font: var(--k-font); --serif: var(--k-serif); --pill: #1f1f23; --focus: var(--k-focus); --positive: var(--k-positive); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; overflow-x: clip; background: var(--k-bg); } /* No page scrollbar. A classic one arrived as the loading message let go of the page and left whenever a sheet opened, and each time the whole page slid 15px sideways. Wheel, trackpad, keys and touch still scroll. */ html { scrollbar-width: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; } body { min-width: 320px; background: var(--k-bg); color: var(--k-text); font-family: var(--k-font); font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, video, svg { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; } p, ul, ol, figure, blockquote, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; margin: 0; } strong, b { font-weight: 600; } sup { font-size: .6em; vertical-align: baseline; position: relative; top: -.5em; } :focus-visible { outline: 2px solid var(--k-focus); outline-offset: 3px; } a:focus-visible { outline-offset: 1px; } :target { scroll-margin-top: var(--k-localnav-h); } .skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--k-text); color: var(--k-bg); padding: 10px 14px; border-radius: 10px; font-weight: 600; text-decoration: none; } .skip:focus { top: 12px; } .k-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* The one emphasis the site uses: one word per big headline in the italic serif, the way the loading message lands on "goes." */ .serif { font-family: var(--k-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.08em; line-height: 1; } /* ---------- Lenis ---------- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* Held until the loading message hands over. clip, not hidden: hidden would make the root a scroll container. */ html.is-locked, html.is-locked body { overflow: clip; overscroll-behavior: none; } html.k-modal-open, html.k-modal-open body { overflow: hidden; } /* -------------------------------------------------------------------------- 3. The loading message (carried over). It leaves by dissolving, not by the old curtain (Arnaud, 27 September 2026: "fade out, then the phone video fades in", then "silk smooth"): the words drift up a little and soften away, and the page starts under the panel just before it fades (00-core.js), so the panel's own fade is the hero's phone coming in: one dissolve from its glow to the phone, with no dip to black between. -------------------------------------------------------------------------- */ .preloader { position: fixed; inset: 0; z-index: 150; pointer-events: none; } .preloader__panel { position: absolute; inset: 0; background: radial-gradient(58% 44% at 16% 14%, rgba(var(--glow-blue), .34) 0%, rgba(var(--glow-blue), 0) 64%), radial-gradient(54% 42% at 86% 20%, rgba(var(--glow-violet), .28) 0%, rgba(var(--glow-violet), 0) 62%), radial-gradient(62% 46% at 72% 90%, rgba(var(--glow-green), .22) 0%, rgba(var(--glow-green), 0) 64%), radial-gradient(50% 40% at 8% 86%, rgba(var(--glow-blue), .18) 0%, rgba(var(--glow-blue), 0) 66%), #08090f; transition: opacity 1.3s cubic-bezier(.45, 0, .25, 1) .42s; will-change: opacity; } .preloader.is-out .preloader__panel { opacity: 0; } .preloader__text { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 24px; text-align: center; font-size: clamp(28px, 4vw, 44px); line-height: 1.2; letter-spacing: -.035em; font-weight: 600; color: var(--k-text); transition: opacity .75s cubic-bezier(.4, 0, .2, 1), filter .75s cubic-bezier(.4, 0, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1); } .preloader.is-out .preloader__text { opacity: 0; filter: blur(6px); transform: translateY(calc(-50% - 10px)); } .pre-word { display: inline-block; white-space: pre; padding: .14em .1em .3em; margin: -.14em -.1em -.3em; opacity: .001; filter: blur(3px); transform: translateY(2px); transition: opacity .6s cubic-bezier(.4, 0, .2, 1), filter .6s cubic-bezier(.4, 0, .2, 1), transform .6s cubic-bezier(.4, 0, .2, 1); } .pre-word.is-in { opacity: 1; filter: blur(0); transform: none; } .pre-word--last { font-family: var(--k-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.1em; } .veil { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: var(--k-bg); opacity: 0; transition: opacity .45s ease-in; } .veil.is-on { opacity: 1; transition: opacity .2s ease-out; } /* -------------------------------------------------------------------------- 5. Typography. One class per role on Apple's page (see COMPONENTS.md for the mapping). Large values first, then medium, then small. -------------------------------------------------------------------------- */ .k-t-body { font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; font-weight: 400; } .k-t-body-sm { font-size: 14px; line-height: 1.4286; letter-spacing: -.016em; font-weight: 400; } .k-t-fine { font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; font-weight: 400; color: var(--k-fine); } .k-t-fine a { color: var(--k-fine-link); } .k-t-hero-eyebrow { font-size: 32px; line-height: 1.125; letter-spacing: .004em; font-weight: 600; } .k-t-hero { font-size: 80px; line-height: 1.05; letter-spacing: -.015em; font-weight: 600; } .k-t-hero-price { font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; font-weight: 600; } .k-t-eyebrow { display: block; font-size: 21px; line-height: 1; letter-spacing: .011em; font-weight: 600; color: var(--k-eyebrow); } .k-t-xxl { font-size: 96px; line-height: 1.0417; letter-spacing: -.015em; font-weight: 600; } .k-t-xxl-copy, .k-t-xl-copy, .k-t-story-intro { font-size: 21px; line-height: 1.381; letter-spacing: .011em; font-weight: 600; color: var(--k-text-2); } .k-t-xl { font-size: 64px; line-height: 1.0625; letter-spacing: -.009em; font-weight: 600; } .k-t-section { font-size: 48px; line-height: 1.0835; letter-spacing: -.003em; font-weight: 600; } .k-t-section-link { font-size: 17px; line-height: 1.2354; letter-spacing: -.022em; font-weight: 400; } .k-t-card-label { font-size: 17px; line-height: 1.2354; letter-spacing: -.022em; font-weight: 600; } .k-t-card-title { font-size: 28px; line-height: 1.1429; letter-spacing: .007em; font-weight: 600; } .k-t-card-body { font-size: 17px; line-height: 1.2354; letter-spacing: -.022em; font-weight: 400; } .k-t-icon-body { font-size: 17px; line-height: 1.2354; letter-spacing: -.022em; font-weight: 400; } .k-t-media-caption { font-size: 28px; line-height: 1.1429; letter-spacing: .007em; font-weight: 600; } .k-t-callout { font-size: 21px; line-height: 1.1905; letter-spacing: .011em; font-weight: 600; } .k-t-tab-label { font-size: 24px; line-height: 1.1667; letter-spacing: .009em; font-weight: 600; } .k-t-story { font-size: 56px; line-height: 1.0714; letter-spacing: -.005em; font-weight: 600; } .k-t-story-callout { font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; font-weight: 600; } .k-t-stat { display: block; font-size: 40px; line-height: 1; letter-spacing: 0; font-weight: 600; font-variant-numeric: tabular-nums; } .k-t-stat-lg { display: block; font-size: 48px; line-height: 1; letter-spacing: -.003em; font-weight: 600; font-variant-numeric: tabular-nums; } .k-t-stat-caption { font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; font-weight: 400; color: var(--k-text-2); } .k-t-compare { font-size: 56px; line-height: 1.0714; letter-spacing: -.005em; font-weight: 600; } .k-t-compare-sub { font-size: 21px; line-height: 1.1905; letter-spacing: .011em; font-weight: 600; } .k-t-compare-caption { font-size: 19px; line-height: 1.2105; letter-spacing: .012em; font-weight: 600; } .k-t-modal { font-size: 56px; line-height: 1.0714; letter-spacing: -.005em; font-weight: 600; } .k-t-modal-label, .k-t-modal-body { font-size: 19px; line-height: 1.4211; letter-spacing: .012em; } .k-t-modal-label { font-weight: 600; } .k-t-modal-body { font-weight: 400; } .k-t-bar-title, .k-t-bar-body { font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; } .k-t-bar-title { font-weight: 600; } .k-t-bar-body { font-weight: 400; } .k-t-tile-pitch { font-size: 17px; line-height: 1.2354; letter-spacing: -.022em; font-weight: 600; } .k-t-tile-price { font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; font-weight: 400; } .k-t-tile-ctas { font-size: 17px; line-height: 1.1765; letter-spacing: -.022em; font-weight: 400; } .k-t-nav-name { font-size: 19px; line-height: 1.2105; letter-spacing: .012em; font-weight: 600; } .k-t-nav-link { font-size: 19px; line-height: 1.2105; letter-spacing: .012em; font-weight: 500; } .k-t-nav-title { font-size: 40px; line-height: 1.1; letter-spacing: 0; font-weight: 600; } /* Grey copy lights up its emphasised phrases in white */ .k-t-xxl-copy strong, .k-t-xxl-copy b, .k-t-xl-copy strong, .k-t-xl-copy b, .k-t-story-intro strong, .k-t-story-intro b, .k-hi { color: var(--k-text); font-weight: inherit; } .k-t-hero, .k-t-xxl, .k-t-xl, .k-t-section, .k-t-story, .k-t-compare, .k-t-modal, .k-t-card-title { text-wrap: balance; } .k-t-xxl-copy, .k-t-xl-copy, .k-t-story-intro, .k-t-body, .k-t-card-body, .k-t-media-caption { text-wrap: pretty; } .k-c-2 { color: var(--k-text-2); } .k-c-3 { color: var(--k-text-3); } .k-c-text { color: var(--k-text); } .k-c-up { color: var(--k-positive); } .k-c-down { color: var(--k-negative); } .k-num { font-variant-numeric: tabular-nums; } @media (max-width: 1068px) { .k-t-hero-eyebrow { font-size: 28px; line-height: 1.1429; letter-spacing: .007em; } .k-t-hero { font-size: 64px; line-height: 1.0625; letter-spacing: -.009em; } .k-t-xxl { font-size: 64px; line-height: 1.0625; letter-spacing: -.009em; } .k-t-xl { font-size: 48px; line-height: 1.0835; letter-spacing: -.003em; } .k-t-section { font-size: 40px; line-height: 1.1; letter-spacing: 0; } .k-t-card-title { font-size: 24px; line-height: 1.1667; letter-spacing: .009em; } .k-t-card-body { font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; } .k-t-media-caption { font-size: 24px; line-height: 1.1667; letter-spacing: .009em; } .k-t-tab-label { font-size: 21px; line-height: 1.1905; letter-spacing: .011em; } .k-t-compare { font-size: 48px; line-height: 1.0835; letter-spacing: -.003em; } .k-t-compare-caption { font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; } .k-t-modal { font-size: 48px; line-height: 1.0835; letter-spacing: -.003em; } .k-t-nav-title { font-size: 32px; line-height: 1.125; letter-spacing: .004em; } } @media (max-width: 734px) { .k-t-hero-eyebrow { font-size: 24px; line-height: 1.1667; letter-spacing: .009em; } .k-t-hero { font-size: 40px; line-height: 1.1; letter-spacing: 0; } .k-t-xxl { font-size: 40px; line-height: 1.1; letter-spacing: 0; } .k-t-xxl-copy, .k-t-xl-copy, .k-t-story-intro { font-size: 19px; line-height: 1.4211; letter-spacing: .012em; } .k-t-xl { font-size: 40px; line-height: 1.1; letter-spacing: 0; } .k-t-section { font-size: 32px; line-height: 1.125; letter-spacing: .004em; } .k-t-section-link { font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; } .k-t-card-label { font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; } .k-t-card-title { font-size: 21px; line-height: 1.1905; letter-spacing: .011em; } .k-t-icon-body { font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; } .k-t-media-caption { font-size: 17px; line-height: 1.2354; letter-spacing: -.022em; } .k-t-callout { font-size: 19px; line-height: 1.2105; letter-spacing: .012em; } .k-t-story { font-size: 32px; line-height: 1.125; letter-spacing: .004em; } .k-t-story-callout { font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; } .k-t-stat { font-size: 28px; letter-spacing: .007em; } .k-t-stat-caption { font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; } .k-t-compare { font-size: 28px; line-height: 1.1429; letter-spacing: .007em; } .k-t-compare-sub { font-size: 17px; line-height: 1.2354; letter-spacing: -.022em; } .k-t-modal { font-size: 40px; line-height: 1.1; letter-spacing: 0; } .k-t-modal-label, .k-t-modal-body { font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; } .k-t-bar-title, .k-t-bar-body { font-size: 14px; line-height: 1.4286; letter-spacing: -.016em; } .k-t-tile-pitch { font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; } .k-t-tile-price { font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; } .k-t-tile-ctas { font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; } .k-t-nav-title { font-size: 24px; line-height: 1.1667; letter-spacing: .009em; } } @media (max-width: 480px) { .k-t-modal { font-size: 32px; line-height: 1.125; letter-spacing: .004em; } } /* -------------------------------------------------------------------------- 6. Layout: sections, content column, grid, headers, lockups -------------------------------------------------------------------------- */ .k-section { --k-section-bg: var(--k-bg); --k-card-bg: var(--k-bg-alt); position: relative; padding-top: var(--k-pad); padding-bottom: var(--k-pad); background: var(--k-section-bg); color: var(--k-text); } .k-section--alt { --k-section-bg: var(--k-bg-alt); --k-card-bg: var(--k-bg); } /* The upgrader band: #1d1d1f fading to black over the first two paddings */ .k-section--fade { background: linear-gradient(180deg, var(--k-bg-alt) 0, var(--k-bg) calc(var(--k-pad) * 2)); } @media (max-width: 734px) { .k-section--fade { background: linear-gradient(0deg, var(--k-bg) 0, var(--k-bg-alt) var(--k-pad)); } } /* A section that parks the floating control bar gets the taller bottom */ .k-section--bar { padding-bottom: var(--k-pad-bar); } /* Two neighbours with the same background share one gap, like Apple's */ .k-section:not(.k-section--alt):not(.k-pad-keep):not(.k-section--bar):not(:has(.k-paddles)):has(+ .k-section:not(.k-section--alt)), .k-section.k-section--alt:not(.k-pad-keep):not(.k-section--bar):not(:has(.k-paddles)):has(+ .k-section.k-section--alt) { padding-bottom: 0; } /* Explicit modifiers win over all of the above */ .k-pad-top-reduced { padding-top: var(--k-pad-reduced); } .k-section.k-pad-top-0 { padding-top: 0; scroll-margin-top: var(--k-pad); } .k-section.k-pad-bottom-0 { padding-bottom: 0; } .k-section.k-pad-0 { padding-top: 0; padding-bottom: 0; } .k-content { width: 87.5%; max-width: var(--k-content-max); margin-inline: auto; } .k-content--hero { max-width: 1680px; } .k-bleed { width: 100%; } .k-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; } .k-span-2 { grid-column: span 2; } .k-span-3 { grid-column: span 3; } .k-span-4 { grid-column: span 4; } .k-span-5 { grid-column: span 5; } .k-span-6 { grid-column: span 6; } .k-span-7 { grid-column: span 7; } .k-span-8 { grid-column: span 8; } .k-span-10 { grid-column: span 10; } .k-span-12 { grid-column: span 12; } @media (max-width: 1068px) { .k-md-span-3 { grid-column: span 3; } .k-md-span-4 { grid-column: span 4; } .k-md-span-6 { grid-column: span 6; } .k-md-span-8 { grid-column: span 8; } .k-md-span-10 { grid-column: span 10; } .k-md-span-12 { grid-column: span 12; } } @media (max-width: 734px) { .k-sm-span-4 { grid-column: span 4; } .k-sm-span-6 { grid-column: span 6; } .k-sm-span-12 { grid-column: span 12; } } /* Column widths on the 87.5vw / 1260px grid, centred */ .k-w-4 { width: min(calc(var(--k-vw) * .2917), 420px); margin-inline: auto; } .k-w-6 { width: min(calc(var(--k-vw) * .4375), 630px); margin-inline: auto; } .k-w-8 { width: min(calc(var(--k-vw) * .5833), 840px); margin-inline: auto; } .k-w-10 { width: min(calc(var(--k-vw) * .7292), 1050px); margin-inline: auto; } @media (max-width: 1068px) { .k-w-8 { width: min(calc(var(--k-vw) * .7292), 1050px); } } @media (max-width: 734px) { .k-w-4, .k-w-6, .k-w-8, .k-w-10 { width: 100%; } } /* Section header: headline left, text link(s) right on its last baseline */ .k-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: last baseline; column-gap: 80px; row-gap: 20px; margin-bottom: 48px; } .k-header__title { flex: 0 1 auto; max-width: 75%; min-width: 50%; } .k-header__links { display: flex; flex-wrap: wrap; column-gap: 34px; row-gap: 6px; } @media (max-width: 1068px) { .k-header { margin-bottom: 40px; } } @media (max-width: 734px) { .k-header { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; } .k-header__title { max-width: 100%; min-width: 0; } .k-header__links { column-gap: 28px; row-gap: 5px; } } /* Type lockup: eyebrow, headline, copy, links. Centred unless told otherwise */ .k-lockup { text-align: center; } .k-lockup--start { text-align: start; } .k-lockup .k-t-eyebrow { margin-bottom: 20px; } .k-lockup .k-t-xxl, .k-lockup .k-t-hero { margin-bottom: 26px; } .k-lockup .k-t-xl { margin-bottom: 24px; } .k-lockup .k-t-story, .k-lockup .k-t-section, .k-lockup .k-t-compare { margin-bottom: 24px; } .k-lockup .k-t-xxl-copy, .k-lockup .k-t-xl-copy, .k-lockup .k-t-story-intro { margin-bottom: 16px; } .k-lockup--xl .k-t-eyebrow { margin-bottom: 18px; } .k-lockup > :last-child { margin-bottom: 0; } .k-lockup__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 33px; } .k-lockup--start .k-lockup__ctas { justify-content: flex-start; } @media (max-width: 1068px) { .k-lockup .k-t-eyebrow { margin-bottom: 18px; } .k-lockup .k-t-xxl, .k-lockup .k-t-hero { margin-bottom: 24px; } .k-lockup--xl .k-t-eyebrow { margin-bottom: 12px; } } @media (max-width: 734px) { .k-lockup--sm-start { text-align: start; } .k-lockup--sm-start .k-lockup__ctas { justify-content: flex-start; } .k-lockup .k-t-eyebrow { margin-bottom: 12px; } .k-lockup .k-t-xl { margin-bottom: 18px; } .k-lockup .k-t-xxl-copy, .k-lockup .k-t-xl-copy, .k-lockup .k-t-story-intro { margin-bottom: 14px; } .k-lockup--xl .k-t-eyebrow { margin-bottom: 10px; } .k-lockup__ctas { gap: 12px; } } /* A picture or placeholder between blocks of copy */ .k-media { margin-block: 64px; } @media (max-width: 1068px) { .k-media { margin-block: 48px; } } @media (max-width: 734px) { .k-media { margin-block: 32px; } } /* Callouts and stats in 3 or 4 columns (stacked and left-aligned below large) */ .k-callouts { display: grid; grid-template-columns: repeat(var(--k-cols, 3), minmax(0, 1fr)); column-gap: 20px; row-gap: 40px; text-align: center; margin-top: 96px; } .k-callout { padding-inline: 14px; } .k-callouts--elevated { row-gap: 80px; } .k-callouts--elevated .k-callout { padding-inline: 24px; } .k-callout__icon { display: block; width: 40px; height: 40px; margin: 0 auto 16px; color: var(--k-text); } .k-keyline { height: 1px; border: 0; margin: 24px 0; background: var(--k-keyline); } .k-callouts--elevated .k-keyline { margin-block: 32px; } .k-stat { display: block; } .k-stat .k-t-stat, .k-stat .k-t-stat-lg { margin-block: 4px; } @media (max-width: 1068px) { .k-callouts { grid-template-columns: minmax(0, 1fr); row-gap: 50px; text-align: start; margin-top: 72px; } .k-callout, .k-callouts--elevated .k-callout { padding-inline: 0; } .k-callout__icon { margin: 0 0 12px; } } @media (max-width: 734px) { .k-callouts { margin-top: 48px; } .k-keyline { margin-block: 20px; } .k-callouts--elevated .k-keyline { margin-block: 24px; } } /* -------------------------------------------------------------------------- 7. Buttons, links, icons, glass controls -------------------------------------------------------------------------- */ .k-btn { display: inline-flex; align-items: center; justify-content: center; gap: .3em; min-width: 60px; padding: 8px 15px; border: 1px solid transparent; border-radius: 980px; background: var(--k-blue); color: #fff; font: 400 14px/1.2858 var(--k-font); letter-spacing: -.016em; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; } .k-btn:hover { background: var(--k-blue-hover); text-decoration: none; } .k-btn:active { background: var(--k-blue-active); } .k-btn--lg, .k-btn--xl { min-width: 70px; font-size: 17px; line-height: 1.1765; letter-spacing: -.022em; } .k-btn--lg { padding: 11px 21px; } .k-btn--xl { padding: 17px 30px; } .k-btn--sm { min-width: 0; padding: 3px 10px; font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; } .k-btn--hero { min-width: 70px; padding: 11px 21px; font-size: 17px; line-height: 1.1765; letter-spacing: -.022em; } @media (max-width: 1068px) { .k-btn--hero { min-width: 60px; padding: 8px 15px; font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; } } .k-btn--outline { background: transparent; border-color: var(--k-link); color: var(--k-link); } .k-btn--outline:hover { background: var(--k-blue-hover); border-color: var(--k-blue-hover); color: #fff; } .k-btn--neutral { background: var(--k-text); color: #000; } .k-btn--neutral:hover { background: #fff; } .k-btn--neutral:active { background: #ededf2; } .k-btn--block { display: flex; width: 100%; border-radius: 8px; } .k-btn--block.k-btn--lg { border-radius: 10px; } .k-btn--block.k-btn--xl { border-radius: 12px; } .k-btn--block.k-btn--sm { border-radius: 5px; } /* The button family, 2026-09-26: one pill, one press, one focus ring. The press and a magnetic lean share one transform through --k-press and --k-mx / --k-my (34-buttons.js sets those on .k-btn--sweep and .k-magnetic, mouse and trackpad only). The primary, .k-btn--sweep, has a light band that crosses it every few seconds; .k-btn--glass is the secondary. Reduced motion keeps the colours and drops the rest. */ .k-btn { transform: translate3d(var(--k-mx, 0px), var(--k-my, 0px), 0) scale(var(--k-press, 1)); transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .35s var(--k-ease-out); } .k-btn:active { --k-press: .96; transition-duration: .09s; } .k-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--k-link); } .k-btn--sweep { position: relative; overflow: hidden; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 28px rgba(0, 113, 227, .34); } .k-btn--sweep:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 14px 34px rgba(0, 113, 227, .46); } .k-btn--sweep::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 42%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .32) 50%, rgba(255, 255, 255, 0)); transform: translateX(-160%) skewX(-18deg); animation: k-btn-sweep 5s var(--k-ease-in-out) 1.2s infinite; } @keyframes k-btn-sweep { 0%, 62% { transform: translateX(-160%) skewX(-18deg); } 100% { transform: translateX(330%) skewX(-18deg); } } .k-btn--glass { background: var(--k-glass); color: var(--k-text); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); } .k-btn--glass:hover { background: var(--k-glass-hover); color: #fff; } .k-btn--glass:active { background: var(--k-glass-active); } html.k-reduce .k-btn { transform: none; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; } html.k-reduce .k-btn--sweep::before { display: none; } .k-btn:disabled, .k-btn[aria-disabled="true"] { opacity: .36; pointer-events: none; } /* Text links. The label underlines on hover, the glyph never does. */ .k-link { color: var(--k-link); text-decoration: none; } .k-link:hover { text-decoration: underline; } .k-more { color: var(--k-link); text-decoration: none; white-space: nowrap; } .k-more > span { white-space: normal; } .k-more:hover { text-decoration: none; } .k-more:hover > span { text-decoration: underline; } .k-more::after { content: ""; display: inline-block; width: .5em; height: .82em; margin-inline-start: .24em; vertical-align: -.06em; background: currentColor; -webkit-mask: var(--k-glyph-more) center / contain no-repeat; mask: var(--k-glyph-more) center / contain no-repeat; --k-glyph-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 17'%3E%3Cpath d='M2 1.5 8.5 8.5 2 15.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .k-more--out::after { width: .7em; height: .7em; vertical-align: 0; --k-glyph-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M4.5 3H11v6.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .k-more--play::after { width: 1em; height: 1em; vertical-align: -.16em; --k-glyph-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M8 6.3v7.4l6-3.7z'/%3E%3C/svg%3E"); } .k-more--down::after { width: .75em; height: .5em; vertical-align: .1em; --k-glyph-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 2 8 8.5 14.5 2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Icons drawn as masks, in currentColor. */ .k-ico { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--k-ico) center / contain no-repeat; mask: var(--k-ico) center / contain no-repeat; } .k-ico--plus { --k-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4.5v11M4.5 10h11' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E"); } .k-ico--close { --k-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 5.5l9 9M14.5 5.5l-9 9' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E"); } .k-ico--prev { --k-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.5 4 6.5 10l6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .k-ico--next { --k-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 4l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .k-ico--up { --k-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 12.5l6-6 6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .k-ico--down { --k-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 7.5l6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .k-ico--play { --k-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 3.8v12.4c0 .6.6 1 1.1.7l9.9-6.2c.5-.3.5-1 0-1.3L7.1 3.1C6.6 2.8 6 3.2 6 3.8z'/%3E%3C/svg%3E"); } .k-ico--pause { --k-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='5' y='3.5' width='3.4' height='13' rx='1'/%3E%3Crect x='11.6' y='3.5' width='3.4' height='13' rx='1'/%3E%3C/svg%3E"); } .k-ico--replay { --k-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.6 8.2A6 6 0 1 0 9.8 4H7.2' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M9.2 1.6 6.8 4l2.4 2.4' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .k-ico--plus-circle { --k-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11.2' fill='none' stroke='black' stroke-width='1.3'/%3E%3Cpath d='M12 7v10M7 12h10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } .k-ico--check { --k-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .k-ico--dash { --k-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); } /* 36px glass circle inside a 44px hit area: paddles, tile +, close, play */ .k-glass-btn { position: relative; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--k-glass); color: var(--k-glass-icon); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: background-color .1s linear, color .1s linear, opacity .1s linear; } .k-glass-btn::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; } .k-glass-btn:hover { background: var(--k-glass-hover); color: #fff; } .k-glass-btn:active { background: var(--k-glass-active); } .k-glass-btn:disabled, .k-glass-btn[aria-disabled="true"] { opacity: .42; cursor: default; background: var(--k-glass); color: var(--k-glass-icon); } .k-glass-btn--solid { background: var(--k-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } .k-glass-btn--solid:hover { background: #37373a; } .k-glass-btn--solid:active { background: #2f2f32; } /* The + (or chevron) in a card's corner; the whole card is the control */ .k-tile-btn { position: absolute; right: 16px; bottom: 16px; z-index: 3; pointer-events: none; } @media (max-width: 1068px) { .k-tile-btn { right: 13px; bottom: 13px; } } .k-card-control { position: absolute; inset: 0; z-index: 2; border-radius: inherit; cursor: pointer; } .k-card-control:focus-visible { outline: 2px solid var(--k-focus); outline-offset: -3px; } .k-card-control:hover ~ .k-tile-btn, .k-card-control:focus-visible ~ .k-tile-btn { background: var(--k-glass-hover); color: #fff; } /* Badge: a small pill ("Save 33%", "Plus", "Coming") */ .k-badge { display: inline-block; padding: 2px 8px; border-radius: 980px; font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; font-weight: 600; white-space: nowrap; background: rgba(48, 209, 88, .16); color: var(--k-positive); } .k-badge--neutral { background: rgba(255, 255, 255, .1); color: var(--k-text-2-alt); } .k-badge--blue { background: rgba(41, 151, 255, .16); color: var(--k-link); } /* Logos: the Korelda and Korelda Plus wordmarks share one letter height, so give both the same CSS height and they sit on one baseline. */ .k-logo { display: block; height: var(--k-logo-h, 24px); width: auto; max-width: none; } /* -------------------------------------------------------------------------- 8. The phone. Apple's iPhone, whole, front-on and still. Nothing on this element or its images may move, scale, tilt, blur, shadow or clip; the only change allowed is swapping which screen shows, by an opacity crossfade between two stacked images (K.screen). -------------------------------------------------------------------------- */ .k-phone { --k-phone-h: var(--k-phone-card); position: relative; display: block; flex: none; height: var(--k-phone-h); width: calc(var(--k-phone-h) * var(--k-phone-ratio)); max-width: 100%; transform: none !important; transition: none !important; animation: none !important; filter: none !important; box-shadow: none !important; clip-path: none !important; -webkit-mask: none !important; mask: none !important; opacity: 1 !important; } .k-phone--hero { --k-phone-h: var(--k-phone-hero); } .k-phone--stage { --k-phone-h: var(--k-phone-stage); } .k-phone--card { --k-phone-h: var(--k-phone-card); } .k-phone--small { --k-phone-h: var(--k-phone-small); } .k-phone > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 50%; transform: none !important; filter: none !important; animation: none !important; } /* More than one screen: the first shows until K.screen picks another */ .k-phone > img + img { opacity: 0; } .k-phone.is-screens > img { opacity: 0; z-index: 0; } .k-phone.is-screens > img.is-prev { opacity: 1; z-index: 1; } .k-phone.is-screens > img.is-on { opacity: 1; z-index: 2; transition: opacity var(--k-screen-dur, .5s) var(--k-fade-ease); } /* Lifted pieces of the app (render/*.webp). They may float, beside a phone, never over it. */ .k-piece { display: block; width: var(--k-piece-w, 320px); height: auto; max-width: 100%; } .k-float { animation: k-bob 6.5s ease-in-out infinite; } .k-float--late { animation-delay: -3.2s; } @keyframes k-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } /* -------------------------------------------------------------------------- 9. Placeholders for film and pictures we do not have yet. Text only.

One line.

-------------------------------------------------------------------------- */ .k-ph { position: relative; display: grid; place-content: center; justify-items: center; gap: 10px; width: 100%; aspect-ratio: 16 / 9; padding: 24px; overflow: hidden; border-radius: var(--k-radius); text-align: center; background: linear-gradient(155deg, #232326 0%, #18181a 48%, #0f0f10 100%); box-shadow: inset 0 0 0 1px var(--k-hairline-soft); color: var(--k-text-2); font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; font-weight: 400; } .k-section--alt .k-ph { background: linear-gradient(155deg, #0e0e0f 0%, #060607 55%, #000 100%); } .k-ph::before { content: attr(data-ph); font-size: 12px; line-height: 1.3334; letter-spacing: .08em; font-weight: 600; text-transform: uppercase; color: var(--k-fine); } .k-ph[data-ratio]::after { content: attr(data-ratio); font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; color: rgba(255, 255, 255, .36); } .k-ph > * { max-width: 34em; margin: 0; } .k-ph--bleed { border-radius: 0; box-shadow: none; } .k-ph--tile { border-radius: var(--k-radius-tile); } .k-ph--fill { position: absolute; inset: 0; width: auto; aspect-ratio: auto; } @media (max-width: 734px) { .k-ph { font-size: 14px; line-height: 1.4286; letter-spacing: -.016em; padding: 20px; } } /* A slot that has its picture: the placeholder's box and size stay, its look goes. The picture (a lifted card on transparency) sits centred and whole inside it. */ .k-ph.k-ph--filled { background: none !important; box-shadow: none !important; padding: 0 !important; display: block; --k-fill-pad: 0px; } .k-ph.k-ph--filled > picture { display: contents; } .k-ph.k-ph--filled::before, .k-ph.k-ph--filled::after { content: none !important; display: none !important; } .k-ph.k-ph--filled > img, .k-ph.k-ph--filled > picture > img { position: absolute; left: var(--k-fill-pad); top: var(--k-fill-pad); width: calc(100% - 2 * var(--k-fill-pad)); height: calc(100% - 2 * var(--k-fill-pad)); max-width: none; object-fit: contain; } /* A photograph in a slot fills it edge to edge, cropped around its subject */ .k-ph.k-ph--filled.k-ph--photo > img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } /* Drawn pieces (line art, type) sit in a filled slot as inline SVG, at the slot's own shape, and take the page's font (a bank's raw line keeps the monospace it names). */ .k-ph.k-ph--filled > svg.k-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .k-ph.k-ph--filled > svg.k-art text:not([font-family]) { font-family: var(--k-font); } /* Lifted tiles: the screen, then the zoom card lifting off it. The layers keep the tile's own shape inside whatever box holds them (as contain would), the card starts flat over its original at its original size, and rises into place once the tile is in view (31-lift.js adds .is-lifted). */ .k-ph.k-ph--filled:has(> .k-lift) { container-type: size; } .k-lift { position: absolute; left: 50%; top: 50%; width: min(100cqw, calc(100cqh * var(--r))); aspect-ratio: var(--r); transform: translate(-50%, -50%); } .k-lift > img { position: absolute; display: block; max-width: none; } .k-lift__base, .k-lift__ghosts { inset: 0; width: 100%; height: 100%; } .k-lift__zoom { left: var(--zl); top: var(--zt); width: var(--zw); height: auto; filter: drop-shadow(0 11px 17px rgba(0, 0, 0, .72)); transition: transform 1.4s cubic-bezier(.3, 0, .15, 1) .55s, filter 1.4s cubic-bezier(.3, 0, .15, 1) .55s; will-change: transform; } .k-lift--light .k-lift__zoom { filter: drop-shadow(0 9px 15px rgba(0, 0, 0, .45)); } .k-lift__ghosts { transition: opacity .8s ease 1.2s; } html.k-js:not(.k-reduce) .k-lift:not(.is-lifted) .k-lift__zoom { transform: translate(var(--tx), var(--ty)) scale(var(--s0)); filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) brightness(.94); } html.k-js:not(.k-reduce) .k-lift:not(.is-lifted) .k-lift__ghosts { opacity: 0; } .k-lift--tall { display: none; } @media (max-width: 734px) { .k-lift--wide { display: none; } .k-lift--tall { display: block; } } /* The chat tile plays the conversation first: the question goes out, the app shows Thinking, the answer lands, the next question goes out, and only then does the answer lift. Without script, or with reduced motion, it is the finished chat with the answer already lifted. */ .k-chat__think { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .k-chat__think text { font-family: var(--k-font); } .k-chat__spin { transform-box: fill-box; transform-origin: center; } .k-chat__m { height: auto; } /* On a phone the card's + button is big against the tile and would sit on the second question; the tile gives it room by standing a little higher. */ @media (max-width: 734px) { .k-lift--chat { width: min(92cqw, calc(92cqh * var(--r))); top: 46%; } } .k-chat__b1, .k-chat__b2 { transform-origin: 100% 100%; } html.k-js:not(.k-reduce) .k-lift--chat .k-lift__zoom { transition: none; } html.k-js:not(.k-reduce) .k-lift--chat:not(.is-lifted) .k-chat__m, html.k-js:not(.k-reduce) .k-lift--chat:not(.is-lifted) .k-lift__zoom { opacity: 0; } html.k-js:not(.k-reduce) .k-lift--chat.is-lifted .k-chat__b1 { animation: k-chat-sent .5s var(--k-ease-out-quart) .2s both; } html.k-js:not(.k-reduce) .k-lift--chat.is-lifted .k-chat__think { animation: k-chat-think 1s ease .7s both; } html.k-js:not(.k-reduce) .k-lift--chat.is-lifted .k-chat__spin { animation: k-chat-spin .9s steps(8) infinite; } html.k-js:not(.k-reduce) .k-lift--chat.is-lifted .k-chat__label { animation: k-chat-fade .35s ease 1.6s both; } html.k-js:not(.k-reduce) .k-lift--chat.is-lifted .k-lift__zoom { animation: k-chat-answer 4.4s linear both; } html.k-js:not(.k-reduce) .k-lift--chat.is-lifted .k-chat__b2 { animation: k-chat-sent .5s var(--k-ease-out-quart) 2.35s both; } @keyframes k-chat-sent { from { opacity: 0; transform: translateY(16%) scale(.94); } to { opacity: 1; transform: none; } } @keyframes k-chat-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes k-chat-think { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } } @keyframes k-chat-spin { to { transform: rotate(360deg); } } /* One track for the answer, so arriving and lifting never fight over the transform: in at 1.6s, still until 2.95s, then the same lift as the rest. */ @keyframes k-chat-answer { 0%, 36.4% { opacity: 0; transform: translate(var(--tx), calc(var(--ty) + 4%)) scale(calc(var(--s0) * .97)); filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) brightness(.94); animation-timing-function: cubic-bezier(.25, 1, .5, 1); } 47.7%, 67% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(var(--s0)); filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) brightness(.94); animation-timing-function: cubic-bezier(.3, 0, .15, 1); } 100% { opacity: 1; transform: none; filter: drop-shadow(0 11px 17px rgba(0, 0, 0, .72)) brightness(1); } } /* Dealt cards: a pile put down one card at a time, each coming up out of a slight turn and settling on the one before (31-lift.js adds .is-played). */ .k-ph.k-ph--filled > .k-deal { position: absolute; left: var(--k-fill-pad); top: var(--k-fill-pad); width: calc(100% - 2 * var(--k-fill-pad)); height: calc(100% - 2 * var(--k-fill-pad)); } .k-deal__card { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; transform-origin: var(--ox) var(--oy); } .k-deal__card:nth-child(1) { --d: .1s; } .k-deal__card:nth-child(2) { --d: .5s; } .k-deal__card:nth-child(3) { --d: .9s; } html.k-js:not(.k-reduce) .k-deal:not(.is-played) .k-deal__card { opacity: 0; transform: translate3d(0, 9%, 0) rotate(3deg) scale(.96); } html.k-js:not(.k-reduce) .k-deal.is-played .k-deal__card { transition: opacity .22s ease var(--d), transform 1.1s var(--k-ease-out-quint) var(--d); } /* Drawn art that plays in once its card is in view (31-lift.js adds .is-played to .k-play). Each piece has its own entrance, set by these classes on its parts with a delay (--d) and a length (--t): a-draw strokes draw from their first point (pathLength 1; waiting just inside a gap twice its length, so a round cap leaves no dot), a-pop springs in, a-grow widens from its left edge, a-slide is the switch knob coming home, a-drop is a pin landing, a-swing a tag settling on its string, a-type and a-dot light one character or one dot at a time. The start states only apply while waiting to play, so no script and reduced motion show it finished. */ .k-art .a-draw { stroke-dasharray: 1 2; } .k-art :is(.a-pop, .a-grow, .a-up, .a-left, .a-drop) { transform-box: fill-box; } .k-art .a-pop { transform-origin: center; } .k-art .a-grow { transform-origin: 0 50%; } .k-art .a-swing { transform-box: view-box; } html.k-js:not(.k-reduce) .k-play:not(.is-played) .a-draw { stroke-dashoffset: 1.01; } html.k-js:not(.k-reduce) .k-play:not(.is-played) :is(.a-fade, .a-type, .a-dot, .a-pop, .a-drop, .a-swing) { opacity: 0; } html.k-js:not(.k-reduce) .k-play:not(.is-played) .a-up { opacity: 0; transform: translateY(8px); } html.k-js:not(.k-reduce) .k-play:not(.is-played) .a-left { opacity: 0; transform: translateX(-18px); } html.k-js:not(.k-reduce) .k-play:not(.is-played) .a-grow { transform: scaleX(0); } html.k-js:not(.k-reduce) .k-play:not(.is-played) .a-slide { transform: translateX(96px); } .k-play.is-played .a-draw { transition: stroke-dashoffset var(--t, .8s) var(--k-ease-in-out-cubic) var(--d, 0s); } .k-play.is-played :is(.a-fade, .a-up, .a-left) { transition: opacity .6s var(--k-ease) var(--d, 0s), transform .9s var(--k-ease-out-quint) var(--d, 0s); } .k-play.is-played :is(.a-type, .a-dot) { transition: opacity .12s linear var(--d, 0s); } .k-play.is-played .a-grow { transition: transform var(--t, .7s) var(--k-ease-out-cubic) var(--d, 0s); } .k-play.is-played .a-slide { transition: transform 1.1s var(--k-ease-in-out-cubic) var(--d, 0s); } html.k-js:not(.k-reduce) .k-play.is-played .a-pop { animation: k-a-pop .6s linear var(--d, 0s) both; } html.k-js:not(.k-reduce) .k-play.is-played .a-drop { animation: k-a-drop .9s linear var(--d, 0s) both; } html.k-js:not(.k-reduce) .k-play.is-played .a-swing { animation: k-a-swing 2s linear var(--d, 0s) both; } @keyframes k-a-pop { 0% { opacity: 0; transform: scale(.2); animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 55% { opacity: 1; transform: scale(1.1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 100% { opacity: 1; transform: none; } } @keyframes k-a-drop { 0% { opacity: 0; transform: translateY(-38px); animation-timing-function: cubic-bezier(.5, 0, .9, .6); } 15% { opacity: 1; } 52% { transform: none; animation-timing-function: cubic-bezier(.2, .6, .4, 1); } 72% { transform: translateY(-6px); animation-timing-function: cubic-bezier(.5, 0, .8, .5); } 86% { transform: none; animation-timing-function: cubic-bezier(.2, .6, .4, 1); } 93% { transform: translateY(-1.5px); animation-timing-function: cubic-bezier(.5, 0, .8, .5); } 100% { opacity: 1; transform: none; } } @keyframes k-a-swing { 0% { opacity: 0; transform: rotate(26deg); animation-timing-function: cubic-bezier(.35, 0, .55, 1); } 10% { opacity: 1; } 32% { transform: rotate(-12deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 54% { transform: rotate(6deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 74% { transform: rotate(-2.5deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 100% { opacity: 1; transform: none; } } /* A feature that comes with Korelda Plus: a small tag after its title. Chapters carry this, never a sentence about plans; prices live in #pricing only. */ .k-plus-tag { display: inline-block; vertical-align: .3em; margin-left: .3em; padding: 3px 8px 3px; border-radius: 999px; background: #0071e3; color: #fff; font-family: var(--k-font); font-style: normal; font-size: 12px; line-height: 1.2; font-weight: 600; letter-spacing: .02em; white-space: nowrap; } /* An old anchor kept for links from other pages */ .k-anchor { display: block; height: 0; overflow: hidden; } /* Starts a piece's CSS animations over: added, read, taken off again */ .k-restart, .k-restart * { animation: none !important; } /* A placeholder beside a picture that is already there: its box stays plain, its words go */ .k-ph.k-ph--quiet::before, .k-ph.k-ph--quiet::after { content: none !important; display: none !important; } .k-ph.k-ph--quiet > * { display: none !important; } /* A slot with nothing to show yet, where an empty box would look broken */ .k-empty { display: none !important; } /* -------------------------------------------------------------------------- 10. Motion. Reveals are one-way and start when the element's top reaches 85% of the viewport (Apple's "t - 85vh"). Nothing is hidden without JS, and reduced motion shows everything at rest. -------------------------------------------------------------------------- */ html.k-js:not(.k-reduce) [data-reveal="fade-up"]:not(.is-in), html.k-js:not(.k-reduce) [data-reveal="stagger"]:not(.is-in) [data-reveal-item]:not([data-reveal-item="fade"]) { opacity: 0; transform: translate3d(0, 30px, 0); } html.k-js:not(.k-reduce) [data-reveal="fade"]:not(.is-in), html.k-js:not(.k-reduce) [data-reveal="stagger"]:not(.is-in) [data-reveal-item="fade"] { opacity: 0; } [data-reveal="fade-up"].is-in:not(.is-done), [data-reveal="fade"].is-in:not(.is-done), [data-reveal="stagger"].is-in [data-reveal-item]:not(.is-done) { transition: opacity .9s var(--k-ease-in-out-quad) var(--k-delay, 0s), transform .7s var(--k-ease-in-out-quad) var(--k-delay, 0s); } /* zoom: a picture arrives 80px low at 1.2x and settles (Apple's performance picture) */ html.k-js:not(.k-reduce) [data-reveal="zoom"]:not(.is-in) { opacity: 0; transform: translate3d(0, 80px, 0) scale(1.2); } [data-reveal="zoom"].is-in:not(.is-done) { transition: opacity .9s var(--k-ease-in-out-quad) var(--k-delay, 0s), transform 1.5s var(--k-ease-rise) var(--k-delay, 0s); } /* split: words rise out of their own line, one after another */ .k-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; } .k-wi { display: inline-block; } html.k-js:not(.k-reduce) .k-wi { transform: translate3d(0, 108%, 0); transition: transform 1s var(--k-ease-out-quint) calc(var(--i, 0) * 45ms + var(--k-delay, 0s)); } html.k-js:not(.k-reduce) .is-in .k-wi, html.k-js:not(.k-reduce) .is-in.k-split .k-wi { transform: none; } /* sweep: gradient text lit left to right once, 3.5s linear, at 80% down */ .k-gradient-text { background-image: linear-gradient(270deg, #0a0f1c 0%, #12305a 16%, #2b6fd0 32%, #78c7ff 48%, #3de682 64%, #b9f5d2 80%, #fff 100%); background-size: 300% 100%; background-repeat: no-repeat; background-position: 0% 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: .06em; margin-bottom: -.06em; } html.k-js:not(.k-reduce) [data-reveal="sweep"]:not(.is-in) { background-position: 160% 0; } html.k-js:not(.k-reduce) [data-reveal="sweep"].is-in { animation: k-sweep 3.5s linear both; } @keyframes k-sweep { from { background-position: 160% 0; } to { background-position: 0% 0; } } /* bars: each bar wipes in from the left, 500ms after the block reaches mid-screen */ .k-bars { display: grid; gap: 12px; } .k-bar { position: relative; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(255, 255, 255, .08); } .k-bar__fill { position: absolute; inset: 0 auto 0 0; width: var(--w, 100%); border-radius: 5px; background: var(--k-bar-color, var(--k-text)); } html.k-js:not(.k-reduce) [data-reveal="bars"]:not(.is-in) .k-bar__fill { opacity: 0; transform: translate3d(-100%, 0, 0); } [data-reveal="bars"].is-in:not(.is-done) .k-bar__fill { transition: opacity 1.2s var(--k-ease-out-cubic) calc(.5s + var(--i, 0) * .1s), transform 1.2s var(--k-ease-out-cubic) calc(.5s + var(--i, 0) * .1s); } /* index: a site map's titles and links drop 4px into place, 20ms apart */ html.k-js:not(.k-reduce) [data-reveal="index"]:not(.is-in) [data-reveal-item] { opacity: 0; transform: translate3d(0, -4px, 0); } [data-reveal="index"].is-in:not(.is-done) [data-reveal-item] { transition: opacity .32s var(--k-ease) var(--k-delay, 0s), transform .32s var(--k-ease) var(--k-delay, 0s); } /* The phone never takes part in a reveal: any revealed box holding one stays still */ [data-reveal]:not([data-reveal="stagger"]):not([data-reveal="index"]):not([data-reveal="bars"]):has(.k-phone), [data-reveal-item]:has(.k-phone), [data-scrub]:has(.k-phone), .k-static { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; filter: none !important; } /* Helpers for scroll-driven and stepped content */ .k-step-fade { opacity: 0; transition: opacity .5s var(--k-fade-ease); } .k-step-fade.is-on { opacity: 1; } .k-will { will-change: transform, opacity; } /* -------------------------------------------------------------------------- 11. Sticky stage: a tall track with a pinned, viewport-high frame. The JS writes the progress 0..1 to --p on .k-stage and the current step to data-stage-step; [data-step-at] children get .is-on for their step. -------------------------------------------------------------------------- */ .k-stage { position: relative; height: var(--k-stage-h, 220vh); --p: 0; } .k-stage__pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: var(--k-stage-min, 620px); overflow: clip; } @media (max-width: 1068px) { .k-stage__pin { min-height: var(--k-stage-min-md, 520px); } } @media (max-width: 734px) { .k-stage__pin { min-height: var(--k-stage-min-sm, 500px); } } /* -------------------------------------------------------------------------- 12. Highlights gallery (data-k="gallery") and its docked control bar. Cards min(87.5vw, 1260px) x 612 / 576 / 480, 20px apart, centred with the neighbours peeking; one card every 6.15s, 1s slide. -------------------------------------------------------------------------- */ .k-gallery { --k-card-w: min(max(calc(var(--k-vw) * .875), 280px), 1260px); --k-card-h: 612px; --k-cap-inset: 48px; --k-cap-w: 584px; --k-cap-left-w: 400px; } .k-gallery__scroller, .k-cards__scroller { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scroll-padding-inline: var(--k-gallery-pad); padding-bottom: 30px; margin-bottom: -30px; } .k-gallery__scroller::-webkit-scrollbar, .k-cards__scroller::-webkit-scrollbar { display: none; } .k-gallery.is-locked .k-gallery__scroller { overflow-x: hidden; } .k-gallery__track { display: grid; grid-auto-flow: column; grid-auto-columns: var(--k-card-w); gap: 20px; width: max-content; padding: 0 var(--k-gallery-pad); } .k-gallery__item { height: var(--k-card-h); scroll-snap-align: center; } .k-gallery__item:not(.is-current) { cursor: pointer; } .k-gallery.is-sliding .k-gallery__track { pointer-events: none; } .k-gallery__card { position: relative; display: grid; height: 100%; overflow: hidden; isolation: isolate; border-radius: var(--k-radius); background: var(--k-bg); } .k-gallery__card > * { grid-area: 1 / 1; min-width: 0; min-height: 0; } .k-gallery__caption { z-index: 2; align-self: start; justify-self: center; width: min(var(--k-cap-w), calc(100% - var(--k-cap-inset) * 2)); margin-top: var(--k-cap-inset); text-align: center; color: var(--k-caption); pointer-events: none; } .k-gallery__caption--left { align-self: center; justify-self: start; width: var(--k-cap-left-w); margin: 0 0 0 var(--k-cap-inset); text-align: start; } .k-gallery__cap { will-change: transform, opacity; } .k-gallery__note { margin-top: 17px; font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; font-weight: 400; color: var(--k-fine); } .k-gallery__media { z-index: 1; position: relative; display: flex; align-items: center; justify-content: center; } .k-gallery__media--bottom { align-items: flex-end; padding-bottom: var(--k-cap-inset); } .k-gallery__media > .k-ph { border-radius: 0; box-shadow: none; height: 100%; aspect-ratio: auto; } @media (max-width: 1068px) { .k-gallery { --k-card-w: calc(var(--k-vw) * .875); --k-card-h: 576px; --k-cap-inset: 44px; --k-cap-w: 555px; --k-cap-left-w: 320px; } .k-gallery__caption--left { align-self: start; justify-self: center; width: min(var(--k-cap-w), calc(100% - var(--k-cap-inset) * 2)); margin: var(--k-cap-inset) 0 0; text-align: center; } } @media (max-width: 734px) { .k-gallery { --k-card-w: calc(min(calc(var(--k-vw) * .875), 420px) - 20px); --k-card-h: 480px; --k-cap-inset: 32px; } .k-gallery__item { scroll-snap-align: start; } .k-gallery__caption, .k-gallery__caption--left { align-self: start; justify-self: stretch; width: auto; margin: var(--k-cap-inset) var(--k-cap-inset) 0; padding-inline: 16px; text-align: center; } } /* The control bar: a dot pill with a progress track, and a play button. It sits over the whole section, sticky 32px (20px) above the viewport bottom, and rests 120 / 80 / 56px above the section's bottom edge. */ .k-ctrlbar-wrap { position: absolute; inset: 0; z-index: 30; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; overflow: clip; } .k-ctrlbar { position: sticky; bottom: 32px; margin-top: 380px; margin-bottom: var(--k-pad-reduced); display: flex; align-items: center; gap: 16px; height: 56px; max-width: calc(100vw - 40px); pointer-events: none; } .k-ctrlbar:not(.is-active) { visibility: hidden; } .k-ctrlbar > * { pointer-events: auto; } .k-ctrlbar__dots, .k-ctrlbar__play { position: relative; height: 56px; border-radius: 28px; pointer-events: auto; background: rgba(var(--k-bar-rgb), .72); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); box-shadow: inset 0 0 0 1px rgba(232, 232, 237, .11); } .k-ctrlbar__dots { display: flex; align-items: center; justify-content: center; min-width: 192px; padding: 0 16px; } .k-ctrlbar__dot { position: relative; flex: none; width: 8px; height: 8px; margin: 0 8px; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .36); transition: background-color .25s linear; } .k-ctrlbar__dot::before { content: ""; position: absolute; inset: -18px -8px; } .k-ctrlbar__dot:hover { background: rgba(255, 255, 255, .48); } .k-ctrlbar__dot::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; width: calc(var(--k-fill, 0) * 100%); background: var(--k-text); } .k-ctrlbar__play { display: grid; place-items: center; width: 56px; color: var(--k-text); transition: background-color .1s linear; } .k-ctrlbar__play:hover { background: rgba(73, 73, 76, .726); } .k-ctrlbar__play:active { background: rgba(57, 57, 60, .742); } .k-ctrlbar__play .k-ico { width: 22px; height: 22px; display: none; } .k-ctrlbar.is-playing .k-ico--pause, .k-ctrlbar.is-paused .k-ico--play, .k-ctrlbar.is-ended .k-ico--replay { display: block; } .k-ctrlbar__play:focus-visible, .k-ctrlbar__dot:focus-visible { outline-offset: 3px; } @media (max-width: 1068px) { .k-ctrlbar { margin-top: 340px; } } @media (max-width: 734px) { .k-ctrlbar { bottom: 20px; } .k-ctrlbar__dots { min-width: 176px; } } /* The intro: a bead drops in, the pill springs up from 180px below, then the two bubbles slide out from the centre and the dots arrive 20ms apart. */ .k-ctrlbar::before { content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 28px; background: rgb(var(--k-bar-rgb)); opacity: 0; pointer-events: none; } .k-ctrlbar.is-intro { animation: k-bar-rise 1.75s var(--k-spring-bouncy) 30ms both; } .k-ctrlbar.is-intro::before { animation: k-bead .52s linear 20ms both; } .k-ctrlbar.is-intro .k-ctrlbar__dots { animation: k-bubble-dots 1s var(--k-spring-soft) .5s both, k-glass-in .92s var(--k-spring-soft) 1s both; } .k-ctrlbar.is-intro .k-ctrlbar__play { animation: k-bubble-play .96s var(--k-spring-soft) .54s both, k-glass-in .92s var(--k-spring-soft) 1s both; } .k-ctrlbar.is-intro .k-ctrlbar__dot { animation: k-dot-in .72s var(--k-spring-snappy) calc(.74s + var(--i, 0) * 20ms) both; } .k-ctrlbar.is-intro .k-ctrlbar__play .k-ico { animation: k-icon-in .2s var(--k-ease-out) .94s both; } @keyframes k-bar-rise { from { transform: translate3d(0, 180px, 0); } to { transform: none; } } @keyframes k-bead { 0% { opacity: 1; transform: scale(1.3) scaleX(.54) scaleY(1.43); } 40% { transform: scale(.8) scaleX(.9) scaleY(1.1); } 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } @keyframes k-bubble-dots { from { opacity: 0; transform: translate3d(36px, 0, 0) scale(.21, .64); } 12% { opacity: 1; } to { opacity: 1; transform: none; } } @keyframes k-bubble-play { from { opacity: 0; transform: translate3d(-104px, 0, 0) scale(0); } 12% { opacity: 1; } to { opacity: 1; transform: none; } } @keyframes k-glass-in { from { background-color: rgb(var(--k-bar-rgb)); } to { background-color: rgba(var(--k-bar-rgb), .72); } } @keyframes k-dot-in { from { opacity: 0; transform: translate3d(36px, 0, 0) scale(.5); } 14% { opacity: 1; } to { opacity: 1; transform: none; } } @keyframes k-icon-in { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 13. Card galleries (data-k="cards") with paddles, and the card family: feature cards, caption tiles, icon cards. -------------------------------------------------------------------------- */ .k-cards { position: relative; } .k-cards__track { display: flex; align-items: flex-start; gap: 20px; width: max-content; padding: 0 var(--k-gallery-pad); } .k-cards__track > * { flex: none; scroll-snap-align: start; } .k-cards--stretch .k-cards__track { align-items: stretch; } .k-paddles { display: flex; justify-content: flex-end; gap: 18px; width: 87.5%; max-width: var(--k-content-max); margin: 0 auto; padding-top: 24px; transition: opacity .2s var(--k-ease-out), visibility .2s; } .k-paddles.is-hidden { opacity: 0; visibility: hidden; } /* Feature card: label, title, body, then media pinned to the bottom */ .k-card { position: relative; flex: none; display: flex; flex-direction: column; width: 372px; min-height: 612px; overflow: hidden; isolation: isolate; border-radius: var(--k-radius); background: var(--k-card-bg); color: var(--k-text); } .k-card--short { min-height: 387px; } .k-card--wide { width: 696px; } .k-card__copy { position: relative; z-index: 1; padding: 32px 32px 0; } .k-card__title { margin-top: 8px; } .k-card__body { margin-top: 12px; color: var(--k-text-2-alt); } .k-card__media { position: relative; margin-top: auto; display: flex; align-items: flex-end; justify-content: center; } .k-card__media > .k-ph { border-radius: 0; box-shadow: none; } @media (hover: hover) and (pointer: fine) { .k-card--hover { transition: transform .3s var(--k-ease-card), background-color .344s var(--k-ease); } .k-card--hover:hover { transform: scale(var(--k-hs, 1.016)); } .k-card--hover:has(.k-phone):hover { transform: none; } } @media (max-width: 1068px) { .k-card { width: 344px; min-height: 576px; } .k-card--short { min-height: 356px; } .k-card--wide { width: 643px; } .k-card__copy { padding: 28px 28px 0; } } @media (max-width: 734px) { .k-card, .k-card--wide { width: 260px; min-height: 480px; } .k-card--short { min-height: 255px; } .k-card__copy { padding: 24px 24px 0; } } /* Caption tile: a picture tile with its caption underneath */ .k-tile-item { flex: none; width: 372px; } .k-tile-item--wide { width: 696px; } .k-tile { position: relative; display: flex; align-items: center; justify-content: center; height: 452px; overflow: hidden; isolation: isolate; border-radius: var(--k-radius); background: var(--k-card-bg); } .k-tile--border { box-shadow: inset 0 0 0 1px var(--k-gray-4); } .k-tile > .k-ph { height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; } .k-tile__caption { margin-top: 20px; padding-inline-end: 16px; color: var(--k-text-2); } .k-tile__caption b, .k-tile__caption strong { color: var(--k-text); font-weight: 600; } .k-tile__fine { margin-top: 17px; font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; font-weight: 600; color: var(--k-text-2); } @media (max-width: 1068px) { .k-tile-item { width: 344px; } .k-tile-item--wide { width: 644px; } .k-tile { height: 416px; } } @media (max-width: 734px) { .k-tile-item, .k-tile-item--wide { width: 260px; } .k-tile { height: 316px; } } /* Icon card: icon, title, body; a link or + card */ .k-icard { position: relative; flex: none; display: flex; flex-direction: column; gap: 12px; width: 372px; min-height: 204px; padding: 32px 32px 48px; border-radius: var(--k-radius); background: var(--k-card-bg); color: var(--k-text); } .k-icard__icon { width: 56px; height: 56px; margin-bottom: 8px; color: var(--k-text); } @media (max-width: 1068px) { .k-icard { width: 344px; min-height: 244px; padding: 28px 28px 48px; } } @media (max-width: 734px) { .k-icard { width: 260px; min-height: 228px; padding: 24px 24px 48px; } } .k-icard--grid { width: auto; } /* -------------------------------------------------------------------------- 14. Product viewer (data-k="viewer"): glass pills on the left open into cards; the phone to the right of centre swaps its screen. -------------------------------------------------------------------------- */ .k-viewer { --k-viewer-h: 760px; --k-viewer-shift: 220px; --k-vcard-w: 423px; --k-pills-left: min(90px, calc(var(--k-vw) * .0625)); } .k-viewer__stage { position: relative; max-width: 1440px; height: var(--k-viewer-h); margin: 0 auto; overflow: hidden; background: var(--k-bg); isolation: isolate; } .k-viewer__phone { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding-left: calc(var(--k-viewer-shift) * 2); pointer-events: none; } .k-viewer__media { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s var(--k-ease-in-quad), visibility 0s linear .15s; } .k-viewer__media.is-on { opacity: 1; visibility: visible; transition: opacity .45s var(--k-spring-in) .1s, visibility 0s; } .k-viewer__pills { position: absolute; z-index: 3; left: var(--k-pills-left); top: 50%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; transform: translate3d(0, calc(-50% + var(--k-col-y, 0px)), 0); transition: transform 1s var(--k-spring-card); } .k-viewer__item { position: relative; flex: none; height: 56px; width: 56px; border-radius: 28px; overflow: hidden; transition: width 1s var(--k-spring-card), height 1s var(--k-spring-card); } .k-viewer__item::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(var(--k-bar-rgb), .72); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 .5px rgba(0, 0, 0, .11); transition: background-color .25s linear; } .k-viewer__pills:not(.is-touring) .k-viewer__item:not(.is-open):hover::before { background: rgba(var(--k-bar-rgb), .92); } .k-viewer__pill { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 32px 0 14px; white-space: nowrap; color: var(--k-text); font-size: 17px; line-height: 1.2354; letter-spacing: -.022em; font-weight: 600; transition: opacity .4s var(--k-ease-in-out) .35s; } .k-viewer__pill .k-ico { width: 24px; height: 24px; color: #f4f4f7; } .k-viewer__item.is-open .k-viewer__pill { opacity: 0; pointer-events: none; transition: opacity .05s var(--k-ease-in-out); } .k-viewer__card { position: absolute; left: 0; top: 0; width: var(--k-vcard-w); padding: 28px; font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; font-weight: 400; color: var(--k-text); visibility: hidden; opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .3s var(--k-ease-in-out), transform .4s var(--k-ease-in-out), visibility 0s linear .4s; } .k-viewer__card b, .k-viewer__card strong { font-weight: 600; } .k-viewer__item.is-open .k-viewer__card { visibility: visible; opacity: 1; transform: none; transition: opacity .6s var(--k-ease-in-out) .25s, transform .4s var(--k-ease-in-out), visibility 0s; } .k-viewer__close { position: absolute; z-index: 4; top: 16px; right: 16px; } .k-viewer__paddles { position: absolute; z-index: 4; left: 0; width: var(--k-pills-left); top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; } .k-viewer__close, .k-viewer__paddles { visibility: hidden; scale: 0; translate: 0 120px; transition: scale .3s var(--k-ease-out-quart), translate .6s var(--k-ease-out-quart), visibility 0s linear .6s; } .k-viewer.is-touring .k-viewer__close, .k-viewer.is-touring .k-viewer__paddles { visibility: visible; scale: 1; translate: 0 0; transition: scale .3s var(--k-spring-pop), translate .6s var(--k-spring-pop), visibility 0s; } .k-viewer.is-touring .k-viewer__paddles { transition: scale .3s var(--k-ease-out-quart), translate .6s var(--k-ease-out-quart), visibility 0s; } /* Intro: the middle pill blooms from a disc, the rest open outwards */ html.k-js:not(.k-reduce) .k-viewer.is-pre .k-viewer__item { opacity: 0; } .k-viewer.is-intro .k-viewer__item { animation: k-pill-in 1s var(--k-spring-card) calc(.6s + var(--o, 0) * 50ms) both; } .k-viewer.is-intro .k-viewer__item.is-middle { animation: k-disc-in 1.4s var(--k-spring-disc) both; } .k-viewer.is-intro .k-viewer__pill > span:not(.k-ico) { animation: k-label-in .4s var(--k-ease-in) calc(.8s + var(--o, 0) * 40ms) both; } @keyframes k-pill-in { from { opacity: 0; transform: translate3d(0, calc(var(--dir, 0) * -35px), 0) scale(.5); } 20% { opacity: 1; } to { opacity: 1; transform: none; } } @keyframes k-disc-in { from { opacity: 1; transform: translate3d(-100px, 0, 0) scale(0); } to { opacity: 1; transform: none; } } @keyframes k-label-in { from { opacity: 0; transform: translate3d(0, calc(var(--dir, 0) * -7px), 0); } to { opacity: 1; transform: none; } } @media (min-width: 1441px) { .k-viewer__stage { border-radius: var(--k-radius); } } @media (max-width: 1068px) { .k-viewer { --k-viewer-h: 720px; --k-viewer-shift: 190px; --k-vcard-w: 374px; --k-pills-left: calc(var(--k-vw) * .0625); } } @media (max-width: 734px) { /* Apple's small stage is 640px; ours grows so the phone never sits under an open card */ .k-viewer { --k-viewer-h: max(640px, calc(var(--k-phone-stage) + 240px)); --k-viewer-shift: 0px; --k-vcard-w: min(calc(var(--k-vw) - 80px), 400px); } .k-viewer__stage { background: transparent; } .k-viewer__stage::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--k-bg); clip-path: inset(0 calc(var(--k-clip, 1) * var(--k-vw) * .0625) round calc(var(--k-clip, 1) * 28px)); } .k-viewer__phone { align-items: flex-start; padding: 40px 0 200px; } .k-viewer__pills { left: 0; right: 0; top: auto; bottom: 20px; transform: none; transition: none; flex-direction: row; align-items: flex-end; overflow-x: auto; scrollbar-width: none; padding: 0 calc(var(--k-vw) * .0625); scroll-padding-inline: calc(var(--k-vw) * .0625); } .k-viewer__pills::-webkit-scrollbar { display: none; } .k-viewer__pill { padding: 0 32px 0 16px; font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; } .k-viewer__card { padding: 24px; font-size: 14px; line-height: 1.4286; letter-spacing: -.016em; } .k-viewer__paddles { display: none; } .k-viewer__close { top: 20px; right: 20px; } } /* -------------------------------------------------------------------------- 15. Segmented pill (tab switcher, billing toggle) and data-k="tabs" -------------------------------------------------------------------------- */ .k-tabnav { position: relative; display: inline-flex; align-items: center; max-width: 100%; height: 44px; padding: 4px; border-radius: 980px; background: var(--k-glass-solid); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); overflow-x: auto; scrollbar-width: none; } .k-tabnav::-webkit-scrollbar { display: none; } .k-tabnav__glider { position: absolute; top: 4px; bottom: 4px; left: var(--k-gl, 4px); width: var(--k-gw, 0); border-radius: 980px; background: var(--k-text); pointer-events: none; transition: left .32s var(--k-ease-out), width .32s var(--k-ease-out); } .k-tabnav.is-static .k-tabnav__glider { transition: none; } .k-tabnav__btn { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 980px; white-space: nowrap; font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; font-weight: 400; color: var(--k-text); opacity: .8; transition: color .12s var(--k-ease-out), opacity .1s var(--k-ease-in-out); } .k-tabnav__btn:hover { opacity: 1; } .k-tabnav__btn[aria-selected="true"], .k-tabnav__btn[aria-checked="true"], .k-tabnav__btn[aria-pressed="true"] { color: #000; opacity: 1; transition: color .16s var(--k-ease-in) .16s, opacity .1s var(--k-ease-in-out); } .k-tabnav__btn[aria-checked="true"] .k-badge, .k-tabnav__btn[aria-selected="true"] .k-badge { background: rgba(20, 120, 60, .14); color: #0b7a36; } .k-tabnav__btn:focus-visible { outline-offset: -2px; } .k-tabnav--lg { height: 56px; padding: 6px; } .k-tabnav--lg .k-tabnav__glider { top: 6px; bottom: 6px; } .k-tabnav--lg .k-tabnav__btn { height: 44px; padding: 0 22px; font-size: 17px; line-height: 1.2354; letter-spacing: -.022em; } .k-tabs__panels, .k-tabs__captions { display: grid; } .k-tabs__panel, .k-tabs__caption { grid-area: 1 / 1; min-width: 0; } .k-tabs__panel { opacity: 0; visibility: hidden; z-index: 0; } .k-tabs__panel.is-on { opacity: 1; visibility: visible; z-index: 1; } .k-tabs__panel.is-in { visibility: visible; z-index: 2; } .k-tabs__caption { opacity: 0; visibility: hidden; transition: opacity .3s var(--k-ease-out-cubic), visibility 0s linear .3s; } .k-tabs__caption.is-on { opacity: 1; visibility: visible; transition: opacity .3s var(--k-ease-out-cubic), visibility 0s; } html:not(.k-js) .k-tabs__panel:first-child, html:not(.k-js) .k-tabs__caption:first-child { opacity: 1; visibility: visible; } /* -------------------------------------------------------------------------- 16. Compare (data-k="compare"): a pill select, or a segmented pill, that swaps which group of tiles shows. -------------------------------------------------------------------------- */ .k-select { position: relative; display: inline-block; width: 314px; max-width: 100%; } .k-select select { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; padding: 0 45px 0 24px; border: 1px solid var(--k-text-3); border-radius: 980px; background: rgba(255, 255, 255, .04); color: var(--k-text); font: 400 17px/1.2354 var(--k-font); letter-spacing: -.022em; cursor: pointer; } .k-select select:focus { border: 2px solid var(--k-focus); padding-left: 23px; padding-right: 44px; outline: none; } .k-select select:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 3px; } .k-select select option { color: #000; background: #fff; } .k-select::after { content: ""; position: absolute; right: 18px; bottom: 9.5px; width: 25px; height: 25px; background: var(--k-text-2); pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='M7 10l5.5 5.5L18 10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%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 25 25'%3E%3Cpath d='M7 10l5.5 5.5L18 10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .k-select__label { display: block; margin-bottom: 8px; font-size: 17px; line-height: 1.2354; letter-spacing: -.022em; color: var(--k-text-2); } @media (max-width: 1068px) { .k-select { width: 260px; } .k-select select { height: 36px; } .k-select::after { bottom: 5.5px; } } @media (max-width: 734px) { .k-select { width: 100%; } } html.k-js .k-compare__group:not(.is-on) { display: none !important; } html:not(.k-js) .k-compare__picker { display: none; } html:not(.k-js) .k-compare__group + .k-compare__group { margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .24); } /* The upgrader panel and its tiles (#1d1d1f card, #000 tiles) */ .k-upgrader { border-radius: var(--k-radius); background: var(--k-bg-alt); padding: 80px 0; } .k-upgrader__inner { width: 83.333%; margin: 0 auto; } .k-upgrader__tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; } .k-upgrader__tile { grid-column: span 4; height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; text-align: center; border-radius: var(--k-radius); overflow: hidden; background: var(--k-bg); } @media (max-width: 1068px) { .k-upgrader__tile { height: 220px; padding: 28px 8.333%; border-radius: 15px; } .k-upgrader { padding: 64px 0; } } @media (max-width: 734px) { .k-upgrader { border-radius: 0; background: transparent; padding: 0; } .k-upgrader__inner { width: 100%; } .k-upgrader__tile { grid-column: span 6; height: 192px; padding: 20px 8.333%; } } /* -------------------------------------------------------------------------- 17. The navbar lives in 90-localnav.css (rebuilt 27 September 2026). -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 18. Ribbon: one centred line over the hero that drops in once the page shows (800ms ease-in-out). -------------------------------------------------------------------------- */ .k-ribbon { position: relative; z-index: 3; overflow: hidden; opacity: 0; pointer-events: none; } .k-ribbon.is-loaded { opacity: 1; pointer-events: auto; } .k-ribbon__drop { background: var(--k-ribbon-bg); transform: translate3d(0, -100%, 0); } body.is-revealing .k-ribbon__drop { animation: k-ribbon-drop .8s var(--k-ease-in-out) forwards; } .k-ribbon__text { width: 83.333%; min-width: 288px; margin: 0 auto; padding: 16px 0; text-align: center; font-size: 14px; line-height: 1.4286; letter-spacing: -.016em; color: var(--k-text); } @keyframes k-ribbon-drop { from { transform: translate3d(0, -100%, 0); } to { transform: none; } } /* -------------------------------------------------------------------------- 19. Modal sheet (data-k="modal"): a rounded sheet over a blurred scrim, 800ms easeInOutCubic both ways. -------------------------------------------------------------------------- */ .k-modal { position: fixed; inset: 0; z-index: 200; display: none; overflow-y: auto; overscroll-behavior: contain; } .k-modal.is-open { display: block; } .k-modal__scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background-color .8s var(--k-ease-in-out-cubic), -webkit-backdrop-filter .8s var(--k-ease-in-out-cubic), backdrop-filter .8s var(--k-ease-in-out-cubic); } .k-modal.is-shown .k-modal__scrim { background: var(--k-scrim); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .k-modal__panel { position: relative; width: 816px; max-width: calc(100vw - 20px); margin: 80px auto; border-radius: var(--k-radius); background: var(--k-bg-alt); padding: 76px; opacity: 0; transform: translate3d(0, 60px, 0); transition: opacity .6s var(--k-ease-in-out-cubic) .2s, transform .8s var(--k-ease-in-out-cubic); } .k-modal--black .k-modal__panel { background: var(--k-bg); } .k-modal.is-shown .k-modal__panel { opacity: 1; transform: none; } .k-modal__close { position: sticky; top: 20px; z-index: 2; display: grid; margin: -56px -56px 20px auto; } .k-modal__panel .k-t-modal-label { display: block; margin-bottom: 8px; } .k-modal__panel .k-t-modal { margin-bottom: 32px; } .k-modal__panel .k-t-modal-body + .k-t-modal-body { margin-top: 1em; } .k-modal__panel .k-t-modal-body b, .k-modal__panel .k-t-modal-body strong { font-weight: 600; } @media (max-width: 1068px) { .k-modal__panel { width: 692px; } } @media (max-width: 734px) { .k-modal__panel { width: calc(100vw - 20px); max-width: 480px; margin: 10px auto; padding: 76px 6.25% 60px; } .k-modal__close { margin: -56px 0 20px auto; } } /* -------------------------------------------------------------------------- 20. Document pages (privacy, terms, support) and the shared footer. The legal pages are generated from the app and keep these class names. -------------------------------------------------------------------------- */ .wrap { width: min(980px, 100% - 44px); margin-inline: auto; } .lede { font-size: 21px; line-height: 1.381; letter-spacing: .011em; font-weight: 600; color: var(--k-text-2); } .small { font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; color: var(--k-fine); } .link { color: var(--k-link); text-decoration: none; } .link:hover { text-decoration: underline; } .doc main { padding: 140px 0 112px; } .doc main .wrap { max-width: 720px; } .doc h1 { font-size: 48px; line-height: 1.0835; letter-spacing: -.003em; font-weight: 600; margin-bottom: 20px; } .doc main h2 { font-size: 21px; line-height: 1.1905; letter-spacing: .011em; font-weight: 600; margin: 44px 0 12px; } .doc main p, .doc main li { color: var(--k-text-2); } .doc main p { margin: 0 0 14px; } .doc main ul { list-style: disc; padding-left: 22px; margin: 0 0 14px; } .doc main ol { list-style: decimal; padding-left: 22px; margin: 0 0 14px; } .doc main li { margin-bottom: 6px; } .doc main a { color: var(--k-link); text-decoration: none; } .doc main a:hover { text-decoration: underline; } .doc main strong { color: var(--k-text); font-weight: 600; } .doc .lede { margin-bottom: 12px; } .doc .meta { font-size: 14px; line-height: 1.4286; letter-spacing: -.016em; color: var(--k-text-3); margin-bottom: 8px; } .doc .box { background: var(--k-bg-alt); border-radius: var(--k-radius-tile); padding: 24px 28px; margin: 28px 0; } .doc .box h2 { margin-top: 0; } .doc .box p:last-child { margin-bottom: 0; } @media (max-width: 1068px) { .doc h1 { font-size: 40px; line-height: 1.1; letter-spacing: 0; } } @media (max-width: 734px) { .doc main { padding: 120px 0 80px; } .doc h1 { font-size: 32px; line-height: 1.125; letter-spacing: .004em; } .doc .lede { font-size: 19px; line-height: 1.4211; letter-spacing: .012em; } } .footer { background: var(--k-bg-alt); color: var(--k-fine); font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; padding: 40px 0 24px; } .footer__grid { display: grid; gap: 32px; } .footer__brand { display: grid; gap: 12px; justify-items: start; } .footer__brand img { height: 20px; width: auto; } .footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .footer__col { display: grid; gap: 8px; align-content: start; } .footer__col h2 { font-size: 12px; line-height: 1.3334; font-weight: 600; letter-spacing: -.01em; color: var(--k-text); margin-bottom: 4px; } .footer__col a { color: var(--k-fine-link); text-decoration: none; } .footer__col a:hover { color: var(--k-text); text-decoration: underline; } .footer__fine { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--k-keyline); display: grid; gap: 6px; } @media (min-width: 735px) { .footer__grid { grid-template-columns: 1.4fr 1fr; } .footer__cols { grid-template-columns: repeat(3, 1fr); } } /* -------------------------------------------------------------------------- 21. Reduced motion: every reveal, scrub, intro and autoplay rests at its end state. Crossfades become instant. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } [data-reveal], [data-reveal-item], .k-wi, .k-bar__fill { opacity: 1 !important; transform: none !important; } [data-reveal="sweep"] { background-position: 0% 0 !important; } .pre-word { opacity: 1; filter: none; transform: none; } .k-float { animation: none !important; } .k-ribbon__drop { transform: none; animation: none !important; } .k-ctrlbar { visibility: visible; } .k-viewer.is-pre .k-viewer__item { opacity: 1; } } /* ===== 00-hero.css ===== */ /* ========================================================================== 00 Hero: Apple's media hero (section-media-hero), rebuilt as one grid. Apple: a full-bleed stage, height clamp(min, 100svh, max) less its global bar and ribbon (we have neither: the pill navbar floats over the top, so the grid keeps its top clear for it. At medium and large that is 146px, so the navbar's open menu (20 + 51 pill + 15 gap + 50 menu + 10) never drops onto the phone; at small it is 91px (20 + 51 + 20), where the open menu only crosses the headline). Text layer: product name (eyebrow-super) over the headline (media-hero headline elevated), bottom-left, 64px above the bottom; the frosted price platter bottom-right on the same bottom line. At 1068px and below the platter becomes a full-bleed glass bar flush with the bottom, 24px under the headline; at 734px and below the headline moves to the top, centred. Korelda: the film is replaced by the big iPhone (--k-phone-hero), centred: the still phone holds the place, and our 3D phone (00-hero.js) is drawn over it. Nothing else sits on it: the grid gives the phone its own column, the headline and platter live in the gutters beside it (the headline fits its gutter with container units, never above Apple's size), and where the gutters are too narrow the headline drops below the phone and the section grows (Apple's height guard, which grows the hero rather than clip it, done in CSS). ========================================================================== */ .k-hero { /* Apple's min / max stage heights (large) */ --hero-min: 780px; --hero-max: 1080px; --hero-h: max(var(--hero-min), min(calc(100 * var(--k-vh)), var(--hero-max))); /* Room left at the top for the fixed pill navbar and its open menu: 20px + the 51px pill + 15px + the 50px menu bar + 10px */ --hero-clear: 146px; /* Apple's .marquee padding-bottom (platter-bottom-pad-64) */ --hero-pad-b: 64px; /* Clear air between the phone and the copy beside it */ --hero-gap: 32px; /* The hero content column: 87.5% wide, max 1680px (Apple's width-hero) */ --hero-content: min(calc(var(--k-vw) * .875), 1680px); --hero-edge: max(6.25%, calc((100% - 1680px) / 2)); /* One gutter beside the phone, for things that are not grid items */ --hero-gutter: calc((var(--hero-content) - var(--k-phone-hero) * var(--k-phone-ratio)) / 2); display: grid; min-height: var(--hero-h); grid-template-columns: [bleed-start] var(--hero-edge) [content-start] minmax(0, 1fr) [phone-start] auto [phone-end] minmax(0, 1fr) [content-end] var(--hero-edge) [bleed-end]; /* The phone's top sits 40% of the way down the free height, never higher than the navbar clearance; the rest of the height goes under it (a flexible row, so the grid grows when content needs more). */ --hero-top: max(var(--hero-clear), calc((var(--hero-h) - var(--k-phone-hero)) * .4)); grid-template-rows: [top] var(--hero-top) [phone-top] auto [phone-bottom] minmax(32px, 1fr) [end]; overflow-x: clip; } @media (min-width: 1441px) { .k-hero { --hero-min: 860px; --hero-max: 1300px; } } .k-hero > * { position: relative; z-index: 1; min-width: 0; } /* ---------- The phone (Apple's media layer): its own column, nothing on it ---------- */ .k-hero__phone { grid-column: phone-start / phone-end; grid-row: phone-top / phone-bottom; align-self: start; justify-self: center; } /* ---------- Header: product name + headline, bottom-left in the left gutter ---------- */ :is(.k-hero__header, .k-show__caps) { grid-column: content-start / phone-start; grid-row: phone-top / end; align-self: end; margin: 0 var(--hero-gap) var(--hero-pad-b) 0; text-align: start; container: k-hero-copy / inline-size; } .k-hero__eyebrow { color: var(--k-text); } .k-hero__headline { margin-top: 8px; color: var(--k-text); } /* Beside the phone the headline is set on three lines (Payday to / tax time, / in one app.) and sized to its gutter: Apple's 80px (64px medium) when the gutter allows, smaller only so it never reaches the phone. 5.5em was set for the old widest line ("Know where", 5.31em to 5.46em in SF); the widest now, "in one app.", measures 4.32em at 80px and 4.52em at 40px, so there's room to spare. Each line is nowrap, so a wider face (Segoe UI, Roboto) never breaks one. The first font-size is the fallback without container units. */ .k-hero__line { display: block; white-space: nowrap; } .k-hero__headline { font-size: clamp(40px, calc((var(--hero-gutter) - var(--hero-gap)) / 5.5), 80px); font-size: clamp(40px, calc(100cqi / 5.5), 80px); } /* ---------- The price platter (Apple's .marquee-detail) ---------- */ .k-hero__detail { grid-column: phone-end / content-end; grid-row: phone-top / end; align-self: end; display: flex; justify-content: flex-end; margin: 0 0 var(--hero-pad-b) var(--hero-gap); } /* Only the large pill sizes itself to its gutter. At 1068px and below the detail is the full-bleed bar, so it is not a container: a phone 372px wide or less must keep Apple's bar (copy left, button right), not the narrow-large card below. */ @media (min-width: 1069px) { .k-hero__detail { container: k-hero-platter / inline-size; } } /* The pill: 10px round, copy 14px in at the start and 34px at the end, glass rgba(51,51,54,.72) + 20px blur, fully round. */ .k-hero__platter { display: flex; align-items: center; max-width: 100%; padding: 10px; border-radius: 10em; background: var(--k-platter); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .k-hero__pricing { display: flex; flex-direction: column; gap: 6px; flex: 0 1 auto; min-width: 0; padding: 0 34px 0 14px; color: var(--k-text); text-wrap: pretty; } .k-hero__buy { flex: none; } /* The pill keeps to its gutter on one line (the price is about 145px with its marker, so the pill needs about 347px: from about 1250px wide up). Narrower than that, the line sits over the button, still on glass, filling the gutter with the corners of a card instead of a pill. */ @container k-hero-platter (max-width: 346px) { .k-hero__platter { width: 100%; flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 16px 16px; border-radius: var(--k-radius-tile); text-align: center; } .k-hero__pricing { padding: 0; } } /* ---------- The phone in 3D (00-hero.js) ---------- The script plays the hero's film once the loading message fades and marks the stage .is-live once the phone is ready; nothing is pinned. The canvas fills the hero, one layer under the words, over the ambient canvas (the screen at 24 x 52, blown up and blurred). The still picture turns transparent but keeps its place (and its description for screen readers), so the grid never moves; the sharp one the phone's glass shows is never shown itself. */ .k-hero { position: relative; background: #000; } .k-hero-stage.is-live > .k-hero { overflow: clip; } .k-hero > .k-hero__ambient { position: absolute; left: -10%; top: -10%; z-index: 0; width: 120%; height: 120%; filter: blur(44px) saturate(1.4); opacity: 0; pointer-events: none; } .k-hero > .k-hero__3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* In a window taller than the hero, the next section shows under it: the screen fades into the black there rather than stopping on a line */ .k-hero.is-short > .k-hero__3d { -webkit-mask-image: linear-gradient(#000 calc(100% - 96px), transparent); mask-image: linear-gradient(#000 calc(100% - 96px), transparent); } .k-hero > .k-hero__still { display: none; } .k-hero.is-3d .k-hero__phone > img { opacity: 0; } /* The words come in once the phone is back in its place: --hero-in runs 0 to 1 (the script sets it; 1 without script or with reduced motion). The name and the headline come first, rising out of a blur, then the platter. */ .k-hero-stage.is-live .k-hero__header { --t: clamp(0, calc(var(--hero-in, 1) / .7), 1); } .k-hero-stage.is-live .k-hero__detail { --t: clamp(0, calc((var(--hero-in, 1) - .45) / .55), 1); } .k-hero-stage.is-live :is(.k-hero__header, .k-hero__detail) { opacity: calc(var(--t) * (1 - var(--show-out, 0))); transform: translateY(calc((1 - var(--t)) * 26px - var(--show-out, 0) * 48px)); filter: blur(calc((1 - var(--t)) * 8px + var(--show-out, 0) * 6px)); } .k-hero-stage.is-live.is-shown :is(.k-hero__header, .k-hero__detail) { pointer-events: none; } .k-hero.is-quiet .k-hero__detail { pointer-events: none; } /* The bar steps aside while the camera is over the glass and comes back with the words (00-hero.js toggles .is-hushed); its rules are with the rest of the bar in 90-localnav.css. */ /* No entrance: Apple's eyebrow, headline and platter are static on load, so ours are simply there as the loading message fades off them. */ /* ========================================================================== Medium (735 to 1068px): the platter becomes a full-bleed bar, 72px tall, flush with the bottom; copy left, button right (default 14px size). ========================================================================== */ @media (max-width: 1068px) { .k-hero { --hero-min: 600px; --hero-max: 900px; --hero-top: max(var(--hero-clear), calc((var(--hero-h) - 72px - var(--k-phone-hero)) * .4)); grid-template-rows: [top] var(--hero-top) [phone-top] auto [phone-bottom] minmax(24px, 1fr) [bar] auto [end]; } :is(.k-hero__header, .k-show__caps) { grid-row: phone-top / bar; margin-bottom: 24px; /* Apple's .marquee-detail padding-top */ } .k-hero__headline { font-size: clamp(40px, calc((var(--hero-gutter) - var(--hero-gap)) / 5.5), 64px); font-size: clamp(40px, calc(100cqi / 5.5), 64px); } .k-hero__detail { grid-column: bleed-start / bleed-end; grid-row: bar / end; align-self: stretch; margin: 0; } .k-hero__platter { flex: 1 1 auto; justify-content: space-between; gap: 10px; padding: 18px max(6.25%, calc((100% - 1680px) / 2)); border-radius: 0; } .k-hero__pricing { padding: 0; } } /* Medium, when the gutters beside the phone are too narrow for the headline at 42px or more (portrait tablets): Apple's medium order, stacked. The phone, then the headline bottom-left at its full 64px, 24px above the bar, and the section grows to hold them. The bands are where the gutter, (87.5vw - phone width) / 2 - 32px, falls under 5.4 x 42px (about 41px at the 5.5em divisor), taking the tallest height in each band (so a doubtful case stacks). */ @media (min-width: 735px) and (max-width: 830px) and (max-height: 636px), (min-width: 735px) and (max-width: 876px) and (min-height: 637px) and (max-height: 760px), (min-width: 735px) and (max-width: 920px) and (min-height: 761px) and (max-height: 880px), (min-width: 735px) and (max-width: 953px) and (min-height: 881px) { .k-hero { grid-template-rows: [top] var(--hero-clear) [phone-top] auto [phone-bottom] minmax(32px, 1fr) [head] auto [head-end] 24px [bar] auto [end]; } :is(.k-hero__header, .k-show__caps) { grid-column: content-start / content-end; grid-row: head / head-end; align-self: end; margin: 0; } .k-hero__line { display: inline; } .k-hero__headline { font-size: 64px; text-wrap: balance; } } /* ========================================================================== Small (734px and below): Apple anchors the header to the top, centred, and pushes the bar to the bottom; the phone stands between them. ========================================================================== */ @media (max-width: 734px) { .k-hero { --hero-min: 696px; --hero-max: 900px; /* the open menu only crosses the headline here, never the phone */ --hero-clear: 91px; --hero-content: min(calc(var(--k-vw) * .875), 420px); --hero-edge: max(6.25%, calc((100% - 420px) / 2)); grid-template-rows: [top] var(--hero-clear) [head] auto [head-end] 24px [phone-top] auto [phone-bottom] minmax(16px, 1fr) [bar] auto [end]; } :is(.k-hero__header, .k-show__caps) { grid-column: content-start / content-end; grid-row: head / head-end; align-self: start; margin: 0; text-align: center; } .k-hero__headline { margin-top: 6px; font-size: 40px; text-wrap: balance; } .k-hero__line { display: inline; } /* Apple's bar: 28px of padding, 38px up to 400px wide and 29px up to 384px (its overrides for a two-line price); copy left, button right */ .k-hero__platter { align-items: center; padding-block: 28px; padding-inline: max(6.25%, calc((100% - 420px) / 2)); text-align: start; } } /* Under 340px "Know where your" no longer fits one line: set the three phrases on their own lines rather than leave "Know" alone. */ @media (max-width: 340px) { .k-hero__line { display: block; } } @media (max-width: 400px) { .k-hero__platter { padding-block: 38px; } } @media (max-width: 384px) { .k-hero__platter { padding-block: 29px; } } /* ========================================================================== The showcase (00-hero.js, 27 September 2026). Once the film has stood the phone up, the hero holds (the stage grows by the showcase's length and the hero sticks) while the page scrolls, and the phone, still the centre of it all, steps through the four tabs. The script writes, on the hero: --pc-x, --pc-y the phone's centre (px, in the hero) --ph the phone's height (px) --show-out 0 to 1: the headline and the button giving way and on each tab's set of pieces and its caption, --d: how far the tab being shown is from this one (0 on it, -1 still to come, 1 gone past), so a tab's pieces rise in from below as it comes and carry on up as it goes, continuous with the scroll. Nearer pieces (--z) move further. Reduced motion, no WebGL, no script: none of it (the hero is as it was). ========================================================================== */ .k-hero-stage.is-show > .k-hero { position: sticky; top: 0; } .k-show { position: absolute; inset: 0; z-index: 2; display: none; pointer-events: none; } .k-hero-stage.is-show .k-show { display: block; } .k-show__set { --d: -1; } .k-show__piece { --dd: calc(var(--d) + (var(--i, 0) - 1) * .08); --ad: max(var(--dd), calc(var(--dd) * -1)); --v: clamp(0, 1 - var(--ad) * 1.3, 1); /* beside the phone (its half width is .2385 of its height), never wider than the space there */ --pw: min(calc(var(--w) * var(--ph, 600px) * .88), calc(var(--gut, 400px) - 30px)); position: absolute; left: calc(var(--pc-x, 50%) + var(--side, 1) * (var(--ph, 600px) * .2385 + 22px + var(--pw) / 2 + min(var(--xo, 0) * var(--pw), max(0px, var(--gut, 400px) - 26px - var(--pw))))); top: calc(var(--pc-y, 50%) + var(--y) * var(--ph, 600px)); width: var(--pw); height: auto; max-width: none; translate: calc(-50% + var(--side, 1) * var(--ad) * 70px) calc(-50% - var(--dd) * 170px * var(--z, 1)); scale: calc(.9 + .1 * var(--v)); opacity: var(--v); border-radius: calc(var(--ph, 600px) * .018); filter: drop-shadow(0 22px 44px rgba(0, 0, 0, .6)); will-change: translate, scale, opacity; } /* the captions, one a tab, where the headline was */ .k-show__caps { display: none; } .k-hero-stage.is-show .k-show__caps { display: block; z-index: 2; pointer-events: none; } .k-show__cap { --ad: max(var(--d, -1), calc(var(--d, -1) * -1)); --v: clamp(0, 1 - var(--ad) * 1.6, 1); position: absolute; left: 0; bottom: 0; width: 100%; max-width: 12em; margin: 0; font-size: clamp(30px, calc(100cqi / 9), 44px); line-height: 1.12; letter-spacing: -.012em; font-weight: 600; color: var(--k-text); text-wrap: balance; opacity: var(--v); translate: 0 calc(var(--d, -1) * -46px); filter: blur(calc(var(--ad) * 10px)); } .k-show__cap-tab { display: block; margin-bottom: 12px; font-size: 19px; line-height: 1.2; letter-spacing: .01em; font-weight: 600; color: var(--k-text-3); } /* too little room beside the phone for a piece to read: the captions alone */ .k-hero.is-narrow .k-show__piece { display: none; } @media (max-width: 734px) { .k-show__piece { display: none; } .k-show__cap { top: 0; bottom: auto; max-width: none; text-align: center; font-size: 30px; } .k-show__cap-tab { font-size: 17px; margin-bottom: 8px; } } /* ===== 01-tour.css ===== */ /* ========================================================================== 01 The tour (once Closer look): Apple's product viewer, rebuilt around the core viewer (data-k="viewer"). Everything here is scoped to #tour. What this file adds to the core component, from the measured spec: - the header block's 72 / 56 / 42px gap and the iPhone-only link slot - the exact large and medium intro: a solid 56px disc at the middle pill (1.4s spring, hidden at 600ms), then every pill's glass, scale, rise and label on its own clock, and the glass blur arriving last - Apple's small intro: the row rises 180px, a squashed disc births the pills at the centre, they fan out to the row and turn to glass - card text fading on its own clock (the cards' media and the picker pill's four tabs, .k-cl-media, .k-cl-tabs and .k-cl-sw, sit dormant since 2026-09-26: each card is words and one link now) - the small stage: sized to the tallest card, the black backdrop opening from an inset card over Apple's exact scroll range The phone is never touched: only its screen crossfades (K.screen). ========================================================================== */ #tour { /* springs the core does not carry (exact curves in @supports below) */ --k-cl-spring-50: cubic-bezier(.3, 1.25, .5, 1); /* spring(1,50,10,0): the disc's inner fill */ --k-cl-spring-10: cubic-bezier(.3, 1.5, .5, 1); /* k100 c10, 1.4s: small pill widths, small disc pop */ --k-cl-crit-5: cubic-bezier(.25, .8, .35, 1); /* critically damped, 0.5s response: small disc scale */ --k-cl-crit-3: cubic-bezier(.25, .8, .35, 1); /* critically damped, 0.3s response: small pill scale */ } @supports (transition-timing-function: linear(0, 1)) { #tour { --k-cl-spring-50: linear(0, .092, .289, .507, .698, .845, .945, 1.004, 1.034, 1.043, 1.041, 1.033, 1.023, 1.015, 1.008, 1.003, 1, .999, .998, .998, .999, .999, .999, 1, 1); --k-cl-spring-10: linear(0, .0541, .1891, .3671, .5573, .7367, .89, 1.0093, 1.0924, 1.1415, 1.1616, 1.1593, 1.1413, 1.1142, 1.0834, 1.0532, 1.0265, 1.0049, .9892, .9792, .9744, .9735, .9757, .9797, .9845, .9896, .9942, .998, 1.0009, 1.0029, 1.004, 1.0043, 1.0041, 1.0036, 1.0028, 1.002, 1.0012, 1.0005, 1, .9996, 1); --k-cl-crit-5: linear(0, .0392, .1285, .2385, .3517, .4587, .5547, .638, .7085, .7672, .8153, .8543, .8856, .9106, .9304, .946, .9582, .9677, .9752, .9809, .9854, .9888, .9915, .9935, .995, .9962, .9971, .9978, .9984, .9988, 1); --k-cl-crit-3: linear(0, .0573, .1797, .3199, .4541, .5719, .67, .7491, .8113, .8594, .8959, .9235, .9441, .9593, .9705, .9787, .9847, .989, .9921, .9944, .996, .9971, .998, .9986, 1); } } /* -------------------------------------------------------------------------- Header: Apple's viewport-content, left aligned, 72 / 56 / 42px to the stage -------------------------------------------------------------------------- */ #tour .k-cl__head { margin-bottom: 72px; } /* the headline is the lockup's last child, but the base lockup's medium and small margins come after its last-child reset and win; hold it at 0 so the link below keeps Apple's 0.8em */ #tour .k-cl__headline { margin-bottom: 0; } /* Apple's AR slot: body text, 0.8em above, link blue with a trailing glyph. Hidden unless the device can use it (an iPhone, for a TestFlight beta). Empty, its margin folds into the 72px below, as Apple's does. */ #tour .k-cl__device { margin-top: .8em; font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; font-weight: 400; } #tour .k-cl__device-link { display: none; } #tour.k-cl--iphone .k-cl__device-link { display: inline; } /* -------------------------------------------------------------------------- The phone's screen swaps. Opening, stepping or closing a pill uses Apple's stage-media timing (in 450ms, spring, after 100ms); the picker's discs use the core's 500ms crossfade (the JS drops this class for them). Either way it is one screen image fading in over another; the phone never moves. -------------------------------------------------------------------------- */ #tour .k-phone.k-cl-pillfade.is-screens > img.is-on { transition: opacity .45s var(--k-spring-in) .1s; } /* -------------------------------------------------------------------------- Pills: never clickable before they have arrived (Apple: until the disc tween ends, 1.4s) -------------------------------------------------------------------------- */ #tour .k-viewer.is-pre .k-viewer__pills, #tour .k-viewer.k-cl-lock .k-viewer__pills { pointer-events: none; } /* and, while hidden, out of the tab order too */ #tour .k-viewer.is-pre .k-viewer__item, #tour .k-viewer.k-cl-sm-wait .k-viewer__item { visibility: hidden; } #tour .k-viewer__item { --k-cl-i: max(0, calc(var(--o, 1) - 1)); } /* -------------------------------------------------------------------------- Cards: the card box itself stays put; its text and its media fade on their own clocks (Apple's control-item-content-inner and control-item-media) -------------------------------------------------------------------------- */ #tour .k-viewer__card, #tour .k-viewer__item.is-open .k-viewer__card { opacity: 1; transform: none; } #tour .k-viewer__card { transition: visibility 0s linear .4s; } #tour .k-viewer__item.is-open .k-viewer__card { transition: visibility 0s; } #tour .k-cl-copy { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .3s var(--k-ease-in-out), transform .4s var(--k-ease-in-out); } #tour .k-viewer__item.is-open .k-cl-copy { opacity: 1; transform: none; transition: opacity .6s var(--k-ease-in-out) .25s, transform .4s var(--k-ease-in-out); } #tour .k-cl-copy b { font-weight: 600; } #tour .k-cl-copy p { text-wrap: pretty; } /* Card media: 16:9 at the card's foot, flush to its edges; the item's 28px corners round it */ #tour .k-cl-media { margin: 24px -28px -28px; opacity: 0; transition: opacity .2s var(--k-ease-in-out); } #tour .k-viewer__item.is-open .k-cl-media { opacity: 1; transition: opacity .2s var(--k-ease-in-out) .25s; } /* A real photo in the media slot: flush, 16:9, the house kept in frame */ #tour .k-cl-media > .k-cl-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 58%; background: #121213; } #tour .k-cl-media > .k-ph { border-radius: 0; box-shadow: inset 0 1px 0 var(--k-hairline-soft); background: linear-gradient(155deg, #2a2a2d 0%, #19191b 52%, #0d0d0e 100%); font-size: 14px; line-height: 1.4286; letter-spacing: -.016em; padding: 20px 28px; } /* -------------------------------------------------------------------------- The picker pill (Apple's colours): a 24px disc before the label, and a centred row of four discs in 32px rings inside the card -------------------------------------------------------------------------- */ #tour .k-cl-sw { position: relative; display: block; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #3a3a3d; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14); } #tour .k-cl-sw::after { content: ""; position: absolute; inset: 5.5px; background: var(--k-text); -webkit-mask: var(--k-cl-glyph) center / contain no-repeat; mask: var(--k-cl-glyph) center / contain no-repeat; } #tour .k-cl-sw[data-tab="wealth"] { --k-cl-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 12.2 5.6 8.6l2.6 2.2 4.6-5.3' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='13.4' cy='4.5' r='1.6'/%3E%3C/svg%3E"); } #tour .k-cl-sw[data-tab="analytics"] { --k-cl-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='8.5' width='3' height='5.5' rx='1'/%3E%3Crect x='6.5' y='3' width='3' height='11' rx='1'/%3E%3Crect x='11' y='6' width='3' height='8' rx='1'/%3E%3C/svg%3E"); } #tour .k-cl-sw[data-tab="activity"] { --k-cl-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='3' cy='4' r='1.3'/%3E%3Ccircle cx='3' cy='8' r='1.3'/%3E%3Ccircle cx='3' cy='12' r='1.3'/%3E%3Cpath d='M6.5 4h7M6.5 8h7M6.5 12h7' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } #tour .k-cl-sw[data-tab="bills"] { --k-cl-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='3.2' width='12' height='10.8' rx='2.4' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M2.6 6.8h10.8' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M5.4 1.8v2.8M10.6 1.8v2.8' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Crect x='4.6' y='9' width='2.4' height='2.4' rx='.6'/%3E%3C/svg%3E"); } #tour .k-cl-tabs { margin: 0; padding: 0; border: 0; min-width: 0; } #tour .k-cl-tabs__list { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 8px; margin: 0; padding: 24px 0 0; list-style: none; } #tour .k-cl-tabs__item { position: relative; margin: -1px 4px; } #tour .k-cl-tabs__input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; } #tour .k-cl-tabs__link { display: inline-flex; box-sizing: border-box; width: 32px; height: 32px; padding: 2px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; opacity: 0; transform: scale(0); /* closing: hold the discs until the sentence above has faded (300ms), so they leave with the card's text instead of blinking out first */ transition: opacity 0s linear .3s, transform 0s linear .3s; } #tour .k-cl-tabs__input:checked + .k-cl-tabs__link { border-color: var(--k-text); cursor: default; } #tour .k-cl-tabs__input:focus-visible + .k-cl-tabs__link { outline: 2px solid var(--k-focus); outline-offset: 1px; } /* the discs pop in 50ms apart as the card opens (Apple's overshooting curve) */ #tour .k-viewer__item.is-open .k-cl-tabs__link { opacity: 1; transform: none; transition: opacity .4s cubic-bezier(.3, 2, .5, 1) calc(var(--n, 0) * 50ms), transform .4s cubic-bezier(.3, 2, .5, 1) calc(var(--n, 0) * 50ms); } /* -------------------------------------------------------------------------- Large and medium intro (Apple's timeline, t = 0 when 60% of the stage shows). The core adds .is-intro at t = 0 and removes it at 2s; the JS here starts each pill's width on Apple's clock (600 + 50ms x step). -------------------------------------------------------------------------- */ #tour .k-cl-disc { display: none; } @media (min-width: 735px) { #tour .k-cl-disc { display: block; position: absolute; left: 0; top: 0; z-index: 0; width: 56px; height: 56px; border-radius: 56px; background: rgb(var(--k-bar-rgb)); opacity: 0; pointer-events: none; } #tour .k-cl-disc::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(var(--k-bar-rgb)); scale: 0; } /* the core's whole-pill keyframes give way to Apple's separate tweens */ #tour .k-viewer.is-intro .k-viewer__item { animation: none; } #tour .k-viewer.is-intro .k-viewer__item:not(.is-open) { overflow: visible; } #tour .k-viewer.is-intro .k-viewer__item { transition: width .8s var(--k-spring-card), height 1s var(--k-spring-card); } #tour .k-viewer.is-intro .k-viewer__item.is-middle { transition: width .6s var(--k-spring-card), height 1s var(--k-spring-card); } /* t 0: the solid disc slides 100px in and grows (1.4s spring), its inner fill scales to 1.008 from 400ms; hidden at 600ms */ #tour .k-viewer.is-intro .k-cl-disc { animation: k-cl-disc 1.4s var(--k-spring-disc) both, k-cl-off 1ms linear .6s both; } #tour .k-viewer.is-intro .k-cl-disc::before { animation: k-cl-pe .6s var(--k-cl-spring-50) .4s both; } /* the glass: middle one appears at 600ms (width 56 to full over 600ms); the others fade in 200ms after 700ms, grow from half size (800ms from 600 + 50ms x step) and rise or drop 35px towards the middle (1s from 650ms); every blur goes 0 to 20px over 1s from 1s, ease-in */ #tour .k-viewer.is-intro .k-viewer__item::before { transform-origin: 50% 100%; animation: k-cl-in .2s var(--k-spring-card) .7s both, k-cl-half .8s var(--k-spring-card) calc(.6s + var(--k-cl-i) * 50ms) both, k-cl-rise35 1s var(--k-spring-card) .65s both, k-cl-blur 1s var(--k-ease-in) 1s both; } #tour .k-viewer.is-intro .k-viewer__item.is-middle::before { animation: k-cl-in 1ms linear .6s both, k-cl-blur 1s var(--k-ease-in) 1s both; } /* the labels (icon and words): fade 400ms from 800 + 40ms x step, rise 7px over 200ms from 760 + 20ms x step, ease-in; the middle one fades 250ms from 850ms */ #tour .k-viewer.is-intro .k-viewer__pill > * { animation: k-cl-in .4s var(--k-ease-in) calc(.8s + var(--k-cl-i) * 40ms) both, k-cl-rise7 .2s var(--k-ease-in) calc(.76s + var(--k-cl-i) * 20ms) both; } #tour .k-viewer.is-intro .k-viewer__item.is-middle .k-viewer__pill > * { animation: k-cl-in .25s var(--k-ease-in) .85s both; } /* the picker's disc behaves like glass: from nothing, rising 35px */ #tour .k-viewer.is-intro .k-viewer__pill > .k-cl-active { animation: k-cl-in .2s var(--k-spring-card) .7s both, k-cl-grow .8s var(--k-spring-card) calc(.6s + var(--k-cl-i) * 50ms) both, k-cl-rise35 1s var(--k-spring-card) .65s both; } } @keyframes k-cl-disc { from { translate: -100px 0; scale: 0; } to { translate: 0 0; scale: 1; } } @keyframes k-cl-pe { from { scale: 0; } to { scale: 1.008; } } @keyframes k-cl-in { from { opacity: 0; } to { opacity: 1; } } @keyframes k-cl-off { from { opacity: 1; } to { opacity: 0; } } @keyframes k-cl-half { from { scale: .5; } to { scale: 1; } } @keyframes k-cl-grow { from { scale: 0; } to { scale: 1; } } @keyframes k-cl-rise35 { from { translate: 0 calc(var(--dir, 0) * -35px); } to { translate: 0 0; } } @keyframes k-cl-rise7 { from { translate: 0 calc(var(--dir, 0) * -7px); } to { translate: 0 0; } } @keyframes k-cl-blur { from { -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } to { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } } /* -------------------------------------------------------------------------- Medium (735 to 1068px): the core already sets 720px, +190px and 374px cards; the header gap narrows -------------------------------------------------------------------------- */ @media (max-width: 1068px) { #tour .k-cl__head { margin-bottom: 56px; } /* Keep the phone clear of the open card. The card's 1s spring overshoots its width by about 5%, so at the low end of medium (735 to about 800px) Apple's +190px shift would let the glass card, with its blur, run over the phone's edge. The phone's wrapper takes more left padding there, so the phone starts 24px past the resting card; Apple's 190px holds wherever it already fits. A layout change on the wrapper, never a transform on the phone. */ @media (min-width: 735px) { #tour .k-viewer__phone { padding-left: max(calc(var(--k-viewer-shift) * 2), calc(2 * (var(--k-pills-left) + var(--k-vcard-w) + 24px) + var(--k-phone-stage) * var(--k-phone-ratio) - var(--k-vw))); } } } /* -------------------------------------------------------------------------- Small (734px and under) -------------------------------------------------------------------------- */ @media (max-width: 734px) { #tour .k-cl__head { margin-bottom: 42px; } /* The stage holds the phone (40px down) and, below it, a band as tall as the tallest card plus 40px (Apple: controls = tallest card + 96px), so an open card never sits over the phone */ #tour .k-viewer { --k-viewer-h: max(640px, calc(var(--k-phone-stage) + 40px + var(--k-cl-band, 200px))); } #tour .k-viewer__phone { padding-bottom: var(--k-cl-band, 200px); } /* The black backdrop opens from a card inset 6.25vw with 28px corners (progress written by this section's JS on Apple's range) */ #tour .k-viewer__stage::before { clip-path: inset(0 calc(var(--k-cl-clip, 0) * var(--k-vw) * .0625) round calc(var(--k-cl-clip, 0) * 28px)); } /* the close button rides down the stage like Apple's sticky one (JS). Apple's small close does not rise: it fades in (500ms) and scales 0 to 1 (630ms, bouncy); out, 300ms each */ #tour .k-viewer__close { top: var(--k-cl-close-y, 20px); translate: none; opacity: 0; transition: opacity .3s var(--k-ease-out), scale .3s var(--k-ease-out-quart), visibility 0s linear .3s; } #tour .k-viewer.is-touring .k-viewer__close { opacity: 1; transition: opacity .5s var(--k-ease-out), scale .63s var(--k-spring-pop), visibility 0s; } /* Apple's per-card previous and next: the core's paddles, laid flat as a pair in an 88px strip at the card's foot, one chevron in each gutter beside the centred card. They sit in the band below the phone, never over it; the core's scale-in, disabled states and labels carry over. */ #tour .k-viewer__paddles { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; left: 0; right: 0; top: auto; bottom: 20px; width: auto; height: 88px; padding-inline: max(0px, calc((var(--k-vw) - var(--k-vcard-w)) / 2 - 54px)); translate: none; pointer-events: none; } #tour .k-viewer__paddles .k-glass-btn { pointer-events: auto; } #tour .k-viewer__up .k-ico, #tour .k-viewer__down .k-ico { rotate: -90deg; } /* While a card is open the row gets enough end room for the first and last cards to centre too, with neighbours peeking on both sides */ #tour .k-viewer__pills.is-touring { padding-inline: max(calc(var(--k-vw) * .0625), calc((var(--k-vw) - var(--k-vcard-w)) / 2)); } /* Card media at 2:1 here (and no ratio note), to keep the card band low */ #tour .k-cl-media { margin: 20px -24px -24px; } #tour .k-cl-media > .k-ph { aspect-ratio: 2 / 1 !important; padding: 16px 24px; gap: 8px; } #tour .k-cl-media > .k-cl-photo { aspect-ratio: 2 / 1; } #tour .k-cl-media > .k-ph::after { display: none; } #tour .k-viewer__pill > .k-cl-active { margin-right: 5px; } /* Apple: 19px from disc to words */ /* Card text: 24px rise, 420ms in (opacity after 200ms), out 300 / 200ms, ease-out */ #tour .k-cl-copy { transform: translate3d(0, 24px, 0); transition: opacity .2s var(--k-ease-out), transform .3s var(--k-ease-out); } #tour .k-viewer__item.is-open .k-cl-copy { transition: opacity .42s var(--k-ease-out) .2s, transform .42s var(--k-ease-out); } /* Pill words: out 200ms (shrinking to .8 over 300ms), back 300ms after 200ms */ #tour .k-viewer__pill { transition: opacity .3s var(--k-ease-out) .2s, transform .3s var(--k-ease-out) .2s; } #tour .k-viewer__item.is-open .k-viewer__pill { transform: scale(.8); transition: opacity .2s var(--k-ease-out), transform .3s var(--k-ease-out); } /* The pills wait, hidden, for the stage bottom to come 20px up the screen */ #tour .k-viewer.k-cl-sm-wait .k-viewer__item { opacity: 0; } #tour .k-viewer.k-cl-sm-wait .k-viewer__pills, #tour .k-viewer.k-cl-sm-intro .k-viewer__pills { pointer-events: none; } /* the core's large-screen keyframes are not used here */ #tour .k-viewer.is-intro:not(.k-cl-sm-intro) .k-viewer__item, #tour .k-viewer.is-intro:not(.k-cl-sm-intro) .k-viewer__pill > * { animation: none; } /* Apple's small intro, t = 0 at the trigger: 30ms the row rises 180px (k100 c8 spring) 20ms a solid disc shows at the bottom centre, 30 x 80 at 1.3x, easing to .7x; 50ms its width springs to 56, 150ms its height to 56; gone at 520ms 100ms the first pill (stacked at the centre, 40 x 36) settles from 1.3x; 200ms the rest grow from nothing 500ms widths spring out; 600ms the pills fan out to the row; 700ms they grow to 56px tall; 720ms words fade in (300ms ease-in); 910ms the picker disc pops; 1100ms the fill turns to glass; 1600ms done */ /* During the intro each pill is placed absolutely at its resting x (the JS writes --k-cl-x), as Apple's springs place them, so a pill's growing width never shoves its neighbours; the row stops clipping for the 1.3x disc and pills */ #tour .k-viewer.k-cl-sm-intro .k-viewer__pills { overflow: visible; height: 56px; animation: k-cl-row 1.75s var(--k-spring-bouncy) 30ms both; } #tour .k-viewer.k-cl-sm-intro .k-viewer__item { position: absolute; left: var(--k-cl-x, 0px); bottom: 0; } #tour .k-viewer.k-cl-sm-intro .k-viewer__pills::before { content: ""; position: absolute; left: 50%; bottom: 0; z-index: 0; width: 56px; height: 56px; border-radius: 56px; translate: -50% 0; background: rgb(var(--k-bar-rgb)); pointer-events: none; animation: k-cl-blink .52s linear both, k-cl-squash .74s var(--k-cl-crit-5) 20ms both, k-cl-disc-w 1.75s var(--k-spring-bouncy) 50ms both, k-cl-disc-h 1.75s var(--k-spring-bouncy) .15s both; } #tour .k-viewer.k-cl-sm-intro .k-viewer__item { animation: k-cl-grow .44s var(--k-cl-crit-3) .2s both, k-cl-sm-w 1.4s var(--k-cl-spring-10) .5s both, k-cl-fan .92s var(--k-spring-soft) .6s both, k-cl-sm-h .92s var(--k-spring-soft) .7s both; } #tour .k-viewer.k-cl-sm-intro .k-viewer__item:first-child { animation-name: k-cl-settle, k-cl-sm-w, k-cl-fan, k-cl-sm-h; animation-delay: .1s, .5s, .6s, .7s; } #tour .k-viewer.k-cl-sm-intro .k-viewer__item::before { animation: k-cl-glass .92s var(--k-spring-soft) 1.1s both; } #tour .k-viewer.k-cl-sm-intro .k-viewer__pill > * { animation: k-cl-in .3s var(--k-ease-in) .72s both; } #tour .k-viewer.k-cl-sm-intro .k-viewer__pill > .k-cl-active { animation: k-cl-in .3s var(--k-ease-in) .72s both, k-cl-grow 1.4s var(--k-cl-spring-10) .91s both; } } /* Short phones (iPhone SE and the like): the card media goes, so the card band falls back towards 200px and the phone and the tallest card fit one screen (the JS re-reads card heights on resize) */ @media (max-width: 734px) and (max-height: 700px) { #tour .k-cl-media { display: none; } } @keyframes k-cl-row { from { translate: 0 180px; } to { translate: 0 0; } } @keyframes k-cl-blink { 0%, 3.8% { opacity: 0; } 3.9%, 99.8% { opacity: 1; } 100% { opacity: 0; } } @keyframes k-cl-squash { from { scale: 1.3; } to { scale: .7; } } @keyframes k-cl-disc-w { from { width: 30px; } to { width: 56px; } } @keyframes k-cl-disc-h { from { height: 80px; } to { height: 56px; } } @keyframes k-cl-settle { from { scale: 1.3; } to { scale: 1; } } /* no "to": each runs to the size and place the core gave the pill */ @keyframes k-cl-sm-w { from { width: 40px; } } @keyframes k-cl-sm-h { from { height: 36px; } } @keyframes k-cl-fan { from { translate: var(--k-cl-fan, 0px) 0; } } @keyframes k-cl-glass { from { background-color: rgb(var(--k-bar-rgb)); } } /* Reduced motion: no intro of any kind, pills and glass at rest */ @media (prefers-reduced-motion: reduce) { #tour .k-viewer.k-cl-sm-wait .k-viewer__item, #tour .k-viewer.is-pre .k-viewer__item { opacity: 1; visibility: visible; } #tour .k-cl-disc { display: none; } } /* The link at the foot of each card, to the chapter it sums up */ .k-cl-go { margin-top: 10px !important; } /* Made for Australia, one line under the stage */ .k-cl-au { max-width: 820px; margin: 40px auto 0; text-align: center; font-size: 19px; line-height: 1.42; letter-spacing: .012em; color: var(--k-text-2); } .k-cl-au b { color: var(--k-text); font-weight: 600; } @media (max-width: 734px) { .k-cl-au { text-align: start; font-size: 17px; margin-top: 28px; } } /* ===== 02-banks.css ===== */ /* ========================================================================== 02 Bank feeds (02-banks.html, 02-banks.js): a lockup, two rows of words that run with the scroll, the pinned walk-through that slides sideways, the fine print as four cards, and the way on to import. The pictures in the walk-through are pieces of the app's own screens, each playing when its panel arrives (the core's steps put .is-on on the panel, and it stays on while later panels play, so nothing rewinds as it slides away). Start states only under html.k-js:not(.k-reduce): without script, and with reduced motion, the panels stack and every picture is finished. ========================================================================== */ .k-banks { overflow: clip; } /* 1. Lockup */ .kbf-eyebrow { display: inline-flex; align-items: center; gap: 12px; } .k-lockup .kbf-eyebrow { margin-bottom: 20px; } .kbf-tag { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: rgba(255, 154, 77, .14); box-shadow: inset 0 0 0 1px rgba(255, 154, 77, .32); color: #ffb27a; font-size: 11px; line-height: 1.1; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .kbf-lede { max-width: 860px; margin-inline: auto; color: var(--k-text); } @media (max-width: 734px) { .kbf-lede { margin-inline: 0; } } /* 2. The rows of words */ .kbf-marquee { margin: 96px 0 8px; padding-block: 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .kbf-marquee__row { font-size: clamp(54px, 8.6vw, 132px); line-height: 1.08; letter-spacing: -.025em; font-weight: 600; white-space: nowrap; color: rgba(255, 255, 255, .13); } .kbf-marquee__row .fx-marquee__set > span { padding-right: .55em; } .kbf-marquee__row .serif { font-size: 1.04em; color: rgba(255, 255, 255, .26); } .kbf-marquee__row--two { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .24); } .kbf-marquee__row--two .serif { -webkit-text-stroke: 0; color: rgba(100, 210, 255, .42); } @media (max-width: 734px) { .kbf-marquee { margin-top: 64px; } } /* -------------------------------------------------------------------------- 3. The walk-through. Four panels in a row, the first centred; the stage's scroll (--p) slides the row so each comes to the middle in turn, holding the first and the last for a moment (--kbf-hold). The stage is as tall as the slide is long (a little more), so a screen's scroll down moves the row about a screen's width across. A panel away from the middle sinks back. -------------------------------------------------------------------------- */ .kbf-show { --kbf-n: 4; --kbf-w: min(1040px, calc(var(--k-vw) * .8)); --kbf-h: min(600px, calc(100svh - 190px)); --kbf-gap: 32px; --kbf-hold: .06; --kbf-travel: calc((var(--kbf-n) - 1) * (var(--kbf-w) + var(--kbf-gap))); --q: clamp(0, (var(--p) - var(--kbf-hold)) / (1 - 2 * var(--kbf-hold)), 1); --k-stage-h: calc(100vh + var(--kbf-travel) * 1.15); margin-top: 40px; } .kbf-pin { display: flex; flex-direction: column; justify-content: center; } .kbf-track { display: flex; align-items: stretch; gap: var(--kbf-gap); width: max-content; margin: 0; padding: 0 calc((var(--k-vw) - var(--kbf-w)) / 2); list-style: none; transform: translate3d(calc(var(--q) * -1 * var(--kbf-travel)), 0, 0); will-change: transform; } .kbf-step { --d: calc(var(--q) * (var(--kbf-n) - 1) - var(--i)); --ad: min(1, max(var(--d), calc(var(--d) * -1))); position: relative; flex: none; box-sizing: border-box; width: var(--kbf-w); height: var(--kbf-h); display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); align-items: center; gap: 52px; padding: 24px 56px 24px 24px; border-radius: 34px; background: radial-gradient(90% 80% at 0% 0%, rgba(64, 200, 224, .08), transparent 60%), linear-gradient(180deg, #111214, #0a0a0b); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .07), 0 40px 90px -40px rgba(0, 0, 0, .9); scale: calc(1 - var(--ad) * .06); opacity: calc(1 - var(--ad) * .5); /* the panels either side turn away a little, like pages on a stand */ transform: perspective(1600px) rotateY(calc(max(-1, min(1, var(--d))) * 9deg)); } /* The picture side: a dark well the app's screen floats in */ .kbf-art { position: relative; display: grid; place-items: center; box-sizing: border-box; height: 100%; min-height: 0; container-type: size; overflow: hidden; border-radius: 24px; background: radial-gradient(60% 55% at 50% 62%, rgba(10, 132, 255, .16), transparent 72%), radial-gradient(40% 40% at 80% 10%, rgba(64, 200, 224, .10), transparent 70%), #07080a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); } /* The copy side */ .kbf-copy { max-width: 420px; } .kbf-n { margin: 0 0 22px; font-size: 14px; line-height: 1; letter-spacing: .1em; font-weight: 600; color: rgb(100, 210, 255); font-variant-numeric: tabular-nums; } .kbf-h { margin: 0 0 18px; font-size: 40px; line-height: 1.1; letter-spacing: -.01em; font-weight: 600; color: var(--k-text); text-wrap: balance; } .kbf-p { margin: 0; font-size: 19px; line-height: 1.42; letter-spacing: .012em; font-weight: 600; color: var(--k-text-2); text-wrap: pretty; } html.k-js:not(.k-reduce) .kbf-copy > * { transition: opacity .7s var(--k-ease-out-cubic), transform .9s var(--k-ease-out-quint); } html.k-js:not(.k-reduce) .kbf-step:not(.is-on) .kbf-copy > * { opacity: 0; transform: translate3d(0, 18px, 0); } .kbf-step.is-on .kbf-h { transition-delay: .08s; } .kbf-step.is-on .kbf-p { transition-delay: .16s; } /* The progress under the row: a segment per panel, filling as it arrives */ .kbf-progress { position: absolute; left: 50%; bottom: max(26px, 3.6vh); translate: -50% 0; display: flex; gap: 8px; } .kbf-progress span { position: relative; width: 40px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .14); } .kbf-progress span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .9); transform-origin: 0 50%; transform: scaleX(clamp(0, calc(var(--q) * (var(--kbf-n) - 1) - var(--i) + 1), 1)); } /* -------------------------------------------------------------------------- The pictures: pieces of the app's own Bank feeds screens (assets/banks), laid out in a box (.kbf-comp) sized to its well: --cw is the box's width, as much of the well as fits both ways, and every length inside is a share of it (the pieces' widths --pw, the space above --mt and before --ml), so a picture keeps its layout at any size. Cards get a shadow the size of the app's 16 pt corner at that scale (a card is 362 pt wide). Each piece arrives at its own moment (--t, in seconds) when the panel does, and while the row slides each drifts by its depth (--z) against the well, the nearer ones further, so the picture has layers. -------------------------------------------------------------------------- */ .kbf-comp { --cw: min(86cqw, 100cqh); position: relative; display: flex; flex-direction: column; align-items: flex-start; width: var(--cw); } .kbf-comp--connect { --cw: min(86cqw, 112cqh); } .kbf-comp--secure { --cw: min(86cqw, 97cqh); } .kbf-comp--stack { --cw: min(88cqw, 180cqh); } .kbf-comp--in { --cw: min(84cqw, 76cqh); } .kbf-pc { --pw: 1; --mt: 0; --ml: 0; --z: 1; position: relative; display: block; flex: none; box-sizing: border-box; width: calc(var(--cw) * var(--pw)); height: auto; margin: calc(var(--cw) * var(--mt)) 0 0 calc(var(--cw) * var(--ml)); transform: translate3d(calc(var(--d, 0) * var(--z) * -34px), 0, 0); } .kbf-pc > img { display: block; width: 100%; height: auto; } .kbf-card { border-radius: calc(var(--cw) * var(--pw) * .0442); box-shadow: 0 calc(var(--cw) * .05) calc(var(--cw) * .1) calc(var(--cw) * -.03) rgba(0, 0, 0, .75); } /* the arrival: up from a little below, or in from the right for the rows of Activity */ html.k-js:not(.k-reduce) .kbf-pc { opacity: 0; translate: 0 calc(var(--cw) * .06); scale: .97; transition: opacity .6s var(--k-ease-out-cubic), translate 1s var(--k-ease-out-quint), scale 1s var(--k-ease-out-quint); } html.k-js:not(.k-reduce) .kbf-pc--land { translate: calc(var(--cw) * .1) 0; scale: .94; } html.k-js:not(.k-reduce) .kbf-step.is-on .kbf-pc { opacity: 1; translate: none; scale: none; transition-delay: calc(var(--t, 0) * 1s); } /* a tap: the control sinks a touch and a ring of light spreads from the finger (dark on the white button, light on the dark pill); on the first panel it's Connect a bank, on the second the consent browser's "How secure is this?", whose answers then come up under it */ .kbf-press { border-radius: 999px; } .kbf-tap { position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)); opacity: 0; scale: .1; pointer-events: none; } .kbf-press--light .kbf-tap { width: 22%; background: radial-gradient(closest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)); } html.k-js:not(.k-reduce) .kbf-step.is-on .kbf-tap { animation: kbf-tap 1s var(--k-ease-out-cubic) calc(var(--t, 0) * 1s + .45s) both; } html.k-js:not(.k-reduce) .kbf-step.is-on .kbf-press > img { animation: kbf-press .9s var(--k-ease-out-cubic) calc(var(--t, 0) * 1s + .45s) both; } @keyframes kbf-tap { 0% { opacity: 0; scale: .1; } 18% { opacity: 1; } 100% { opacity: 0; scale: 1.5; } } @keyframes kbf-press { 0%, 100% { scale: 1; } 18% { scale: .965; } 46% { scale: 1; } } /* Middle widths: a narrower row, a smaller type */ @media (max-width: 1068px) { .kbf-show { --kbf-w: calc(var(--k-vw) * .86); --kbf-gap: 24px; --kbf-h: min(540px, calc(100svh - 170px)); } .kbf-step { gap: 32px; padding: 20px 36px 20px 20px; border-radius: 30px; } .kbf-h { font-size: 32px; } .kbf-p { font-size: 17px; line-height: 1.47; } } /* Phones: the picture above the words, the row one panel wide */ @media (max-width: 734px) { .kbf-show { --kbf-w: calc(var(--k-vw) - 40px); --kbf-gap: 12px; --kbf-h: auto; margin-top: 24px; } .kbf-step { transform: none; } .kbf-pin { justify-content: center; padding-top: 44px; box-sizing: border-box; } .kbf-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; align-items: start; gap: 20px; padding: 12px 12px 26px; border-radius: 26px; } .kbf-art { height: min(380px, 46svh); border-radius: 18px; } .kbf-comp { --cw: min(90cqw, 104cqh); } .kbf-comp--connect { --cw: min(90cqw, 116cqh); } .kbf-comp--stack { --cw: min(92cqw, 180cqh); } .kbf-comp--in { --cw: min(90cqw, 80cqh); } .kbf-copy { padding: 0 10px; max-width: none; } .kbf-n { margin-bottom: 12px; font-size: 12px; } .kbf-h { margin-bottom: 10px; font-size: 26px; line-height: 1.15; } .kbf-p { font-size: 16px; line-height: 1.45; } .kbf-progress { bottom: max(18px, 2.4vh); } } /* No script, or reduced motion: no pinning, the four panels one under another, every picture finished */ html:not(.k-js) .kbf-show, html.k-reduce .kbf-show { --k-stage-h: auto; height: auto; } html:not(.k-js) .kbf-pin, html.k-reduce .kbf-pin { position: static; height: auto; min-height: 0; overflow: visible; } html:not(.k-js) .kbf-track, html.k-reduce .kbf-track { flex-direction: column; align-items: center; width: auto; padding: 0; transform: none; } html:not(.k-js) .kbf-step, html.k-reduce .kbf-step { width: min(var(--kbf-w), 87.5vw); height: var(--kbf-h, auto); scale: none; opacity: 1; transform: none; } html:not(.k-js) .kbf-progress, html.k-reduce .kbf-progress { display: none; } html:not(.k-js) .kbf-pc, html.k-reduce .kbf-pc { transform: none; } @media (max-width: 734px) { html:not(.k-js) .kbf-step, html.k-reduce .kbf-step { width: calc(100% - 40px); height: auto; } } /* -------------------------------------------------------------------------- 4. The fine print, up front -------------------------------------------------------------------------- */ .kbf-facts-wrap { padding-top: 132px; } .kbf-facts-title { margin: 0 0 48px; text-align: center; } .kbf-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .kbf-fact { position: relative; overflow: hidden; isolation: isolate; box-sizing: border-box; padding: 28px 26px 30px; border-radius: 24px; background: linear-gradient(180deg, #111214, #0c0c0d); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } .kbf-fact__ico { display: block; width: 28px; height: 28px; margin-bottom: 22px; fill: none; stroke: rgb(100, 210, 255); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .kbf-fact h4 { margin: 0 0 10px; font-size: 19px; line-height: 1.26; letter-spacing: .012em; font-weight: 600; color: var(--k-text); } .kbf-fact p { margin: 0; font-size: 15px; line-height: 1.47; letter-spacing: -.012em; color: var(--k-text-2); text-wrap: pretty; } @media (max-width: 1068px) { .kbf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 734px) { .kbf-facts-wrap { padding-top: 96px; } .kbf-facts-title { margin-bottom: 32px; text-align: start; } .kbf-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; } } /* 5. Until then: one line and the way on */ .kbf-until { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; margin-top: 40px; padding: 24px 28px; border-radius: 24px; background: linear-gradient(90deg, rgba(255, 154, 77, .09), rgba(255, 154, 77, .02) 70%); box-shadow: inset 0 0 0 1px rgba(255, 154, 77, .2); } .kbf-until__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; font-size: 21px; line-height: 1.38; letter-spacing: .011em; font-weight: 600; color: var(--k-text-2); } .kbf-until__em { color: var(--k-text); } .kbf-until__link { font-size: 17px; } @media (max-width: 734px) { .kbf-until { padding: 20px 20px 22px; } .kbf-until__line { font-size: 19px; } } /* -------------------------------------------------------------------------- 3b. Look up your bank. The list is the page's own (every bank, a plain
  • ); with script it becomes three rows of chips drifting past (built by 02-banks.js, run by 36-fx.js), and typing in the search swaps the rows for the matches, laid out as the same chips. Without script, the list in columns. Each chip: an initials disc in a quiet tint of its own, the name, and "Business" for the business-only ones. -------------------------------------------------------------------------- */ .kbk { padding-top: 140px; } .kbk-head { max-width: 760px; margin: 0 auto; text-align: center; } .kbk-title { margin: 0 0 18px; } .kbk-lede { margin: 0 auto 32px; max-width: 640px; font-size: 19px; line-height: 1.42; letter-spacing: .012em; font-weight: 600; color: var(--k-text-2); text-wrap: pretty; } .kbk-search { position: relative; display: flex; align-items: center; max-width: 440px; margin: 0 auto; } .kbk-search__ico { position: absolute; left: 18px; width: 20px; height: 20px; fill: none; stroke: var(--k-text-2); stroke-width: 1.7; stroke-linecap: round; pointer-events: none; } .kbk-input { width: 100%; height: 52px; box-sizing: border-box; padding: 0 20px 0 48px; border: 0; border-radius: 26px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--k-text); font: inherit; font-size: 17px; letter-spacing: -.01em; outline: none; transition: background-color .2s var(--k-ease), box-shadow .2s var(--k-ease); -webkit-appearance: none; appearance: none; } .kbk-input::placeholder { color: rgba(255, 255, 255, .45); } .kbk-input:focus { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(100, 210, 255, .55), 0 0 0 4px rgba(100, 210, 255, .12); } .kbk-input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); } /* the chip, in the rows and in the results */ .kbk-chip, .kbk-list > li { display: inline-flex; align-items: center; gap: 12px; box-sizing: border-box; height: 56px; padding: 0 20px 0 10px; border-radius: 28px; background: linear-gradient(180deg, #151618, #0f1011); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: var(--k-text); font-size: 17px; line-height: 1; letter-spacing: -.01em; font-weight: 600; white-space: nowrap; } .kbk-disc { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: hsl(var(--h, 210) 28% 22%); color: hsl(var(--h, 210) 70% 86%); font-size: 13px; line-height: 1; letter-spacing: .02em; font-weight: 700; box-shadow: inset 0 0 0 1px hsl(var(--h, 210) 40% 40% / .5); } .kbk-tag { margin-left: 2px; padding: 4px 7px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: var(--k-text-2); font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } /* the rows drift past with the scroll (36-fx.js's marquee) */ .kbk-rows { display: none; margin-top: 56px; } html.k-js .kbk-rows { display: grid; gap: 14px; } .kbk-rows .fx-marquee__set { gap: 14px; padding-right: 14px; } .kbk-rows { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); max-height: 260px; transition: opacity .3s var(--k-ease), filter .3s var(--k-ease), max-height .5s var(--k-ease-out-quint, ease), margin .5s var(--k-ease-out-quint, ease); } /* searching: the rows fold away so the matches sit right under the search */ .kbk.is-searching ~ .kbk-rows { opacity: 0; filter: blur(6px); max-height: 0; margin-top: 0; pointer-events: none; } /* the list: all of it without script, only the matches with it */ .kbk-foot { padding-top: 8px; } .kbk-status { min-height: 22px; margin: 18px 0 14px; text-align: center; font-size: 15px; line-height: 1.4; color: var(--k-text-2); } .kbk-status a { color: var(--k-link); } .kbk-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; } .kbk-list > li { padding-left: 20px; } html.k-js .kbk-list > li { padding-left: 10px; } html.k-js .kbk-list { display: none; } html.k-js .kbk-foot.is-searching .kbk-list { display: flex; } html.k-js .kbk-list > li[hidden] { display: none; } html.k-js:not(.k-reduce) .kbk-foot.is-searching .kbk-list > li:not([hidden]) { animation: kbk-in .35s var(--k-ease-out-quint, ease) both; } @keyframes kbk-in { from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.97); } to { opacity: 1; transform: none; } } .kbk-fine { max-width: 760px; margin: 36px auto 0; text-align: center; font-size: 12px; line-height: 1.55; color: var(--k-text-3); text-wrap: pretty; } @media (max-width: 734px) { .kbk { padding-top: 104px; } .kbk-head { text-align: start; } .kbk-lede { font-size: 17px; margin-left: 0; } .kbk-search { margin: 0; max-width: none; } .kbk-chip, .kbk-list > li { height: 48px; font-size: 15px; gap: 10px; } .kbk-disc { width: 30px; height: 30px; font-size: 11px; } .kbk-rows { margin-top: 40px; gap: 10px; } .kbk-list { justify-content: flex-start; gap: 10px; } .kbk-fine, .kbk-status { text-align: start; } } /* ===== 03-import.css ===== */ /* ========================================================================== 02 Get it in (import and tidy): the long product story (Apple's camera chapter) A the pinned stage: a 300vh track, a 100svh pinned film layer (placeholder), the eyebrow and headline over its first viewport fading from t - 30vh to t - 10vh, then the phone scrolling up into a sticky hold with statement lines tidying beside it (scrubbed), and leaving before B reaches it B the details: black, margin-top -22vh over the stage with a 144 / 240 / 224px gradient above; intro, two keyline stats D section header, then five caption tiles (wide film, normal, wide photo, normal photo, wide art) Dormant since 2026-09-26, kept for reuse: the three spec callouts (.k-imp-callout) and C, the three-way payee switcher (.k-imp-switch, .k-imp-panel, .k-imp-stmt, .k-imp-row, .k-imp-cap and the no-script tabs). Nothing on the page uses them; archive/2026-09-26 has the page they played on. The scrubbed layout only runs where the core allows scroll scrubs (html.k-enhanced, no reduced motion). Everywhere else the stage is a plain column: headline, a still, the phone with tidy rows beside it. ========================================================================== */ .k-imp { --k-imp-accent: #78c7ff; /* Korelda's own blue, in place of Apple's camera yellow */ --k-imp-grad: 144px; /* the details' gradient: 144 / 240 / 224px */ --k-imp-slot-w: min(420px, calc((min(var(--k-vw) * .875, 1260px) - var(--k-phone-stage) * var(--k-phone-ratio)) / 2 - 40px)); padding-top: var(--k-pad); padding-bottom: 0; overflow: clip; } html.k-js.k-enhanced:not(.k-reduce) .k-imp { padding-top: 0; } /* -------------------------------------------------------------------------- A. The stage. Resting (static) layout first, the scrubbed one after. -------------------------------------------------------------------------- */ .k-imp-tom { position: relative; } .k-imp-tom__pin { display: none; } /* The phone's layer sits above the copy's, so nothing is painted over the phone */ .k-imp-tom__copy { position: relative; z-index: 1; } .k-imp-still { margin-top: 48px; } /* full width, like Apple's fallback */ .k-imp-tom__track { position: relative; z-index: 2; margin: 64px 0 36px; } .k-imp-hold { position: relative; display: flex; align-items: center; justify-content: center; gap: 40px; } /* The last element of a lockup keeps no bottom margin at any width. The core's medium and small margins come after its own :last-child reset and win, so this section restates it (a core fix would make this line redundant). */ .k-imp .k-lockup > :last-child { margin-bottom: 0; } html.k-js.k-enhanced:not(.k-reduce) .k-imp-tom { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 300vh; /* the statement's rows peel off in the first screen, then the phone rises */ } html.k-js.k-enhanced:not(.k-reduce) .k-imp-tom__pin { display: block; grid-area: 1 / 1; align-self: start; position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; min-height: 620px; overflow: clip; background: var(--k-bg); } html.k-js.k-enhanced:not(.k-reduce) .k-imp-tom__copy { grid-area: 1 / 1; align-self: start; display: grid; place-items: center; height: 100vh; height: 100svh; min-height: 620px; padding-bottom: 64px; /* Apple's lockup margin: nudges the centred copy up by 32px */ pointer-events: none; } html.k-js.k-enhanced:not(.k-reduce) .k-imp-still { display: none; } /* The phone's track starts below the headline and ends early enough that the details' gradient never reaches the phone: the gap stays at least 24px. */ html.k-js.k-enhanced:not(.k-reduce) .k-imp-tom__track { position: absolute; left: 0; right: 0; margin: 0; top: max(140vh, calc(126vh + 110px)); bottom: calc(22vh + var(--k-imp-grad) + 24px); } /* Centred in the viewport, but never under the floating local nav */ html.k-js.k-enhanced:not(.k-reduce) .k-imp-hold { position: sticky; top: max(var(--k-localnav-h), calc(50 * var(--k-vh) - var(--k-phone-stage) / 2)); } /* The film: the printed statement, cover-scaled behind everything. It sits dimmed under the headline (--lit, as the headline goes), then its 28 rows peel off the paper top to bottom (--lift), each drifting up and out of focus over bare paper, while the page pushes in a touch; then the whole film fades to black as the phone rises through it (opacity). The phone's layer is above it: nothing is painted over the phone. */ .k-imp-film { position: absolute; inset: 0; overflow: hidden; background: #000; --lit: 0; --lift: 0; } .k-imp-film__art { position: absolute; left: 50%; top: 50%; width: max(100%, calc(max(100svh, 620px) * 1.339)); aspect-ratio: 1600 / 1195; transform: translate(-50%, -50%) scale(calc(1.02 + .07 * var(--lift))); } .k-imp-film__art > img { position: absolute; display: block; max-width: none; } .k-imp-film__base { inset: 0; width: 100%; height: 100%; } .k-imp-strip { --q: clamp(0, calc((var(--lift) - var(--k) * .024) / .3), 1); left: var(--l); top: var(--t); width: var(--w); height: auto; transform: translate3d(calc(var(--q) * 4%), calc(var(--q) * -110%), 0) scale(calc(1 + .12 * var(--q))); opacity: calc(1 - var(--q) * var(--q)); filter: blur(calc(var(--q) * 7px)); will-change: transform, opacity; } .k-imp-film__dim { position: absolute; inset: 0; background: #000; opacity: calc(.7 - .56 * var(--lit)); pointer-events: none; } .k-imp-film::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 95% at 50% 46%, transparent 52%, rgba(0, 0, 0, .62) 100%); pointer-events: none; } /* The still, where the stage is off: the same statement, full width */ .k-imp-still > img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 688; object-fit: cover; object-position: 50% 45%; } /* Statement lines beside the phone: a raw line (mono) turning into the lifted tidy row. The slot matches the row picture, whose card sits 10% in from the sides and 31.36% in from the top and bottom. */ .k-imp-rows { flex: none; display: flex; flex-direction: column; align-items: center; } .k-imp-rows--r { margin-top: calc(var(--k-imp-slot-w) * .62); } .k-imp-slot { position: relative; width: var(--k-imp-slot-w); aspect-ratio: 901 / 287; } .k-imp-tidy { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; } .k-imp-raw { display: none; position: absolute; inset: 31.36% 10%; align-items: center; gap: .9em; padding: 0 1.1em; border-radius: 12px; font: 400 max(10px, calc(var(--k-imp-slot-w) * .029))/1 var(--k-mono); letter-spacing: 0; color: var(--k-text-3); white-space: nowrap; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } .k-imp-raw span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--k-text-2-alt); } .k-imp-raw span:last-child { color: var(--k-text-2); } html.k-js.k-enhanced:not(.k-reduce) .k-imp-raw { display: flex; } /* -------------------------------------------------------------------------- B. The details -------------------------------------------------------------------------- */ .k-imp-details { position: relative; z-index: 3; background: var(--k-bg); padding-top: 28px; } html.k-js.k-enhanced:not(.k-reduce) .k-imp-details { margin-top: -22vh; padding-top: 64px; } html.k-js.k-enhanced:not(.k-reduce) .k-imp-details::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--k-imp-grad); pointer-events: none; background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .738) 19%, rgba(0, 0, 0, .541) 34%, rgba(0, 0, 0, .382) 47%, rgba(0, 0, 0, .278) 56.5%, rgba(0, 0, 0, .194) 65%, rgba(0, 0, 0, .126) 73%, rgba(0, 0, 0, .075) 80.2%, rgba(0, 0, 0, .042) 86.1%, rgba(0, 0, 0, .021) 91%, rgba(0, 0, 0, .008) 95.2%, rgba(0, 0, 0, .002) 98.2%, rgba(0, 0, 0, 0) 100%); } /* 8 of 12 columns (1 column = min(7.2916vw, 105px)) */ .k-imp-details__inner { width: min(calc(var(--k-vw) * .58333), 840px); margin: 0 auto; } .k-imp-intro { text-align: center; } .k-imp-stats { display: flex; align-items: flex-start; margin-top: 96px; } .k-imp-stats__col { flex: none; display: grid; row-gap: 48px; width: min(calc(var(--k-vw) * .145833), 210px); } .k-imp-callouts { flex: none; width: min(calc(var(--k-vw) * .364583), 525px); margin-inline-start: min(calc(var(--k-vw) * .072917), 105px); } .k-imp-stat { border-top: 1px solid var(--k-text-3); padding-top: 25px; font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; font-weight: 400; color: var(--k-text-3); } .k-imp-stat__val { display: block; margin-block: 4px; font-size: 48px; line-height: 1; letter-spacing: -.003em; font-weight: 600; color: #fff; } .k-imp-callout { font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; font-weight: 600; color: var(--k-text-2); } .k-imp-callout:first-child { border-top: 1px solid var(--k-text-3); padding-top: 25px; } .k-imp-callout + .k-imp-callout { margin-top: 24px; } .k-imp-callout__title { color: #fff; } /* -------------------------------------------------------------------------- C. The switcher -------------------------------------------------------------------------- */ .k-imp-sub { padding-top: var(--k-pad); } .k-imp-ap__lockup { width: min(calc(var(--k-vw) * .58333), 840px); margin: 0 auto 64px; } .k-imp-switch { display: grid; max-width: 1145px; margin: 0 auto; } .k-imp-switch__media { grid-template-rows: minmax(0, 1fr); width: 91.667%; margin: 0 auto; aspect-ratio: 1.7157; border-radius: var(--k-radius); overflow: hidden; isolation: isolate; background: var(--k-bg); } .k-imp-panel { display: grid; place-items: center; min-height: 0; background: radial-gradient(80% 75% at 50% 45%, #19191c 0%, #0c0c0d 62%, #060606 100%); } .k-imp-switch__nav { display: flex; justify-content: center; min-width: 0; margin: 32px auto; width: 100%; } .k-imp-tabnav .k-tabnav__glider { background: #000; } .k-imp-tabnav .k-tabnav__btn[aria-selected="true"] { color: var(--k-imp-accent); } .k-imp-tabnav .k-tabnav__btn:focus-visible { outline-color: #fff; outline-offset: -2px; } .k-imp-switch__caps { width: 66.667%; margin: 0 auto; text-align: center; } .k-imp-cap { font-size: 17px; line-height: 1.2354; letter-spacing: -.022em; font-weight: 600; color: var(--k-text-2); } .k-imp-cap__h, .k-imp-cap p { display: inline; font: inherit; letter-spacing: inherit; } .k-imp-cap__token { color: var(--k-imp-accent); } .k-imp-cap__em { color: #fff; } /* Without JS every state shows, each followed by its caption, and the pills go */ html:not(.k-js) .k-imp-switch__media, html:not(.k-js) .k-imp-switch__caps { display: contents; } html:not(.k-js) .k-imp-switch__nav { display: none; } html:not(.k-js) .k-imp .k-tabs__panel { grid-area: auto; opacity: 1; visibility: visible; width: 91.667%; margin: 0 auto; aspect-ratio: 1.7157; border-radius: var(--k-radius); overflow: hidden; } html:not(.k-js) .k-imp .k-tabs__caption { grid-area: auto; opacity: 1; visibility: visible; width: 66.667%; margin: 32px auto 64px; } html:not(.k-js) .k-imp .k-tabs__caption:last-child { margin-bottom: 0; } html:not(.k-js) .k-imp .k-tabs__panel:nth-child(1) { order: 1; } html:not(.k-js) .k-imp .k-tabs__caption:nth-child(1) { order: 2; } html:not(.k-js) .k-imp .k-tabs__panel:nth-child(2) { order: 3; } html:not(.k-js) .k-imp .k-tabs__caption:nth-child(2) { order: 4; } html:not(.k-js) .k-imp .k-tabs__panel:nth-child(3) { order: 5; } html:not(.k-js) .k-imp .k-tabs__caption:nth-child(3) { order: 6; } /* Panel 1: the statement as printed */ .k-imp-stmt { --fs: 19px; width: 78%; font: 400 var(--fs)/1.3 var(--k-mono); letter-spacing: 0; color: var(--k-text-3); } .k-imp-stmt__head, .k-imp-stmt__line { display: grid; grid-template-columns: calc(var(--fs) * 7) minmax(0, 1fr) calc(var(--fs) * 5); column-gap: calc(var(--fs) * 1.2); align-items: baseline; padding: calc(var(--fs) * .7) calc(var(--fs) * .9); } .k-imp-stmt__head { padding-top: 0; margin-bottom: calc(var(--fs) * .4); border-bottom: 1px solid rgba(255, 255, 255, .1); font: 600 12px/1.3334 var(--k-font); letter-spacing: .08em; text-transform: uppercase; color: var(--k-text-3); } .k-imp-stmt__head span:last-child, .k-imp-stmt__line span:last-child { text-align: right; } .k-imp-stmt__line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .k-imp-stmt__line.is-dim { opacity: .62; } .k-imp-stmt__line.is-focus { color: var(--k-text); border-radius: 8px; background: rgba(120, 199, 255, .08); box-shadow: inset 2px 0 0 var(--k-imp-accent); } /* Panels 2 and 3: the row as the app shows it */ .k-imp-list { width: 64%; max-width: 680px; overflow: hidden; border-radius: 22px; background: #1c1c1e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } .k-imp-row { display: flex; align-items: center; gap: 18px; padding: 20px 24px; } .k-imp-row + .k-imp-row { border-top: 1px solid rgba(255, 255, 255, .08); } .k-imp-row.is-dim { opacity: .38; } .k-imp-row__ico { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--k-text-2); } .k-imp-row__ico::before { content: ""; position: absolute; inset: 25%; background: currentColor; -webkit-mask: var(--k-imp-ico) center / contain no-repeat; mask: var(--k-imp-ico) center / contain no-repeat; } .k-imp-row__ico--dots { --k-imp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E"); } .k-imp-row__ico--fuel { color: #78c7ff; --k-imp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 20V5.5A1.5 1.5 0 0 1 6.5 4h7A1.5 1.5 0 0 1 15 5.5V20M3.5 20h13M7.5 7.5h5v4h-5zM15 10h1.5a1.5 1.5 0 0 1 1.5 1.5v4.5a1.25 1.25 0 0 0 2.5 0V8.5L18 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Commute, as the app files a Transport for NSW tap: a car */ .k-imp-row__ico--car { color: var(--k-imp-accent); background: rgba(120, 199, 255, .14); --k-imp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 17.5V13l2.1-5.2A2 2 0 0 1 8 6.5h8a2 2 0 0 1 1.9 1.3L20 13v4.5M4 13h16M3.5 17.5h17M6 17.5v2M18 17.5v2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='7.5' cy='15.2' r='1.1'/%3E%3Ccircle cx='16.5' cy='15.2' r='1.1'/%3E%3C/svg%3E"); } .k-imp-row__txt { flex: 1; min-width: 0; display: grid; gap: 2px; } .k-imp-row__name { font-size: 24px; line-height: 1.1667; letter-spacing: .009em; font-weight: 600; color: var(--k-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .k-imp-row__sub { font-size: 15px; line-height: 1.3; letter-spacing: -.012em; color: var(--k-text-2); } .k-imp-row__sub.is-set { color: var(--k-imp-accent); } .k-imp-row__amt { flex: none; font-size: 24px; line-height: 1.1667; font-weight: 500; color: var(--k-text); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- D. The caption tiles -------------------------------------------------------------------------- */ .k-imp-ctrl { padding-bottom: var(--k-pad); } .k-imp-tiles .k-tile-item:last-child { scroll-snap-align: start end; } .k-imp-tcap { margin-top: 0; padding: 28px 16px 0; font-size: 17px; line-height: 1.2354; letter-spacing: -.022em; font-weight: 600; color: var(--k-text-2); } .k-imp-tfine { padding-inline: 16px; font-weight: 400; } .k-tile-item--wide .k-imp-tcap, .k-tile-item--wide .k-imp-tfine { max-width: 512px; } /* Card 2: the lifted rows, floating */ .k-imp-stack { flex-direction: column; } .k-imp-stack .k-piece { width: 440px; margin: -24px 0; } .k-imp-stack .k-piece:nth-child(2) { margin-inline-start: 96px; } .k-imp-stack .k-piece:nth-child(3) { margin-inline-end: 48px; } /* Cards 7 and 8: lifted pieces of the app on the bordered tiles */ .k-imp-piece .k-piece { width: 300px; } /* Card 5: the clip. The button shows once the clip is ready (100ms linear), presses to .95 (200ms ease); the end frame fades in over 200ms ease-out. */ .k-imp-clip__btn { position: absolute; right: 20px; bottom: 20px; z-index: 3; opacity: 0; pointer-events: none; transition: background-color .1s linear, color .1s linear, opacity .1s linear, transform .2s ease; } .k-imp-clip.is-ready .k-imp-clip__btn { opacity: 1; pointer-events: auto; } .k-imp-clip__btn:active { transform: scale(.95); } .k-imp-clip__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--k-focus); } .k-imp-clip__btn .k-ico { display: none; width: 18px; height: 18px; } .k-imp-clip:not(.is-playing):not(.is-ended) .k-ico--play, .k-imp-clip.is-playing .k-ico--pause, .k-imp-clip.is-ended .k-ico--replay { display: block; } .k-imp-clip__meter { position: absolute; z-index: 2; left: 32px; right: 76px; bottom: 37px; height: 2px; border-radius: 1px; overflow: hidden; background: rgba(255, 255, 255, .14); } .k-imp-clip__bar { position: absolute; inset: 0; background: rgba(255, 255, 255, .72); transform-origin: 0 50%; transform: scaleX(0); } .k-imp-clip__end { position: absolute; z-index: 2; left: 24px; top: 20px; font-size: 12px; line-height: 1.3334; letter-spacing: .08em; font-weight: 600; text-transform: uppercase; color: var(--k-imp-accent); opacity: 0; transition: opacity .2s ease-out; } .k-imp-clip.is-ended .k-imp-clip__end { opacity: 1; } html:not(.k-js) .k-imp-clip__meter { display: none; } /* -------------------------------------------------------------------------- Medium (735 to 1068px) -------------------------------------------------------------------------- */ @media (max-width: 1068px) { .k-imp { --k-imp-grad: 240px; --k-imp-slot-w: min(400px, calc(var(--k-vw) * .8)); } html.k-js.k-enhanced:not(.k-reduce) .k-imp-tom__pin, html.k-js.k-enhanced:not(.k-reduce) .k-imp-tom__copy { min-height: 520px; } .k-imp-still > img { aspect-ratio: 1068 / 558; } /* One statement line, under the phone rather than beside it */ .k-imp-hold { flex-direction: column; gap: 8px; } .k-imp-rows--l { order: 2; } .k-imp-rows--r, .k-imp-rows--l .k-imp-slot + .k-imp-slot { display: none; } html.k-js.k-enhanced:not(.k-reduce) .k-imp-rows--l { position: absolute; left: 0; right: 0; top: calc(100% + 8px); } html:not(.k-js) .k-imp .k-tabs__panel { width: 100%; } html.k-js.k-enhanced:not(.k-reduce) .k-imp-details { padding-top: 56px; } /* 10 of 12 columns: stats 3, one column gap, callouts 6 */ .k-imp-details__inner { width: min(calc(var(--k-vw) * .729167), 1050px); } .k-imp-stats__col { width: min(calc(var(--k-vw) * .21875), 315px); } .k-imp-callouts { width: min(calc(var(--k-vw) * .4375), 630px); } .k-imp-switch { max-width: none; width: min(calc(var(--k-vw) * .729167), 1050px); } .k-imp-switch__media { width: 100%; } .k-imp-stmt { --fs: 15px; width: 82%; } .k-imp-list { width: 70%; border-radius: 18px; } .k-imp-row { gap: 14px; padding: 16px 20px; } .k-imp-row__ico { width: 40px; height: 40px; } .k-imp-row__name, .k-imp-row__amt { font-size: 20px; line-height: 1.2; } .k-imp-row__sub { font-size: 13px; } .k-imp-stack .k-piece { width: 400px; margin: -22px 0; } .k-imp-stack .k-piece:nth-child(2) { margin-inline-start: 80px; } .k-imp-piece .k-piece { width: 280px; } } /* -------------------------------------------------------------------------- Small (734px and under) -------------------------------------------------------------------------- */ @media (max-width: 734px) { .k-imp { --k-imp-grad: 224px; --k-imp-slot-w: min(360px, calc(var(--k-vw) * .82)); } html.k-js.k-enhanced:not(.k-reduce) .k-imp-tom__pin, html.k-js.k-enhanced:not(.k-reduce) .k-imp-tom__copy { min-height: 500px; } html.k-js.k-enhanced:not(.k-reduce) .k-imp-tom__copy { padding-bottom: 32px; } .k-imp-still { width: 87.5%; max-width: 420px; margin-inline: auto; } .k-imp-still > img { aspect-ratio: 420 / 401; border-radius: var(--k-radius); } .k-imp-tom__track { margin: 32px 0 36px; } /* The pinned film's ratio note would run into the eyebrow; the still carries it */ html.k-js.k-enhanced:not(.k-reduce) .k-imp-details { padding-top: 48px; } .k-imp-details__inner { width: auto; } .k-imp-intro { text-align: start; } .k-imp-stats { display: block; margin-top: 42px; } .k-imp-stats__col { width: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; row-gap: 0; margin-bottom: 40px; } .k-imp-callouts { width: auto; margin-inline-start: 0; } .k-imp-stat__val { margin-block: 2px; } .k-imp-callout { font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; } .k-imp-ap__lockup { width: auto; margin-bottom: 32px; } .k-imp-switch { width: auto; } .k-imp-switch__media { aspect-ratio: .75; } .k-imp-switch__nav { margin-block: 28px; } .k-imp-switch__caps { width: 100%; } .k-imp-cap { font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; } html:not(.k-js) .k-imp .k-tabs__panel { aspect-ratio: .75; } html:not(.k-js) .k-imp .k-tabs__caption { width: 100%; margin: 28px auto 48px; } .k-imp-stmt { --fs: 13px; width: 88%; } .k-imp-stmt__head { display: none; } .k-imp-stmt__line { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding: 10px 12px; } .k-imp-stmt__line span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } .k-imp-list { width: 88%; border-radius: 16px; } .k-imp-row { gap: 12px; padding: 14px 16px; } .k-imp-row__ico { width: 36px; height: 36px; } .k-imp-row__name, .k-imp-row__amt { font-size: 17px; line-height: 1.2354; letter-spacing: -.022em; } .k-imp-row__sub { font-size: 12px; } .k-imp-tcap { padding-top: 24px; font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; } .k-imp-stack .k-piece { width: 250px; margin: -14px 0; } .k-imp-stack .k-piece:nth-child(2) { margin-inline-start: 0; } .k-imp-stack .k-piece:nth-child(3) { margin-inline-end: 0; } .k-imp-piece .k-piece { width: 216px; } .k-imp-clip__meter { left: 24px; right: 72px; } } /* At 420px and under the switcher runs edge to edge with square corners */ @media (max-width: 420px) { .k-imp-ap__wrap { width: 100%; } .k-imp-switch__media { border-radius: 0; } .k-imp-switch__nav, .k-imp-switch__caps { width: 87.5%; } html:not(.k-js) .k-imp .k-tabs__panel { border-radius: 0; } html:not(.k-js) .k-imp .k-tabs__caption { width: 87.5%; } } /* Where the phone and the row under it cannot both fit in the window, the row goes (medium: under 611px tall; small: under about 533px at 734 wide) */ @media (min-width: 735px) and (max-width: 1068px) and (max-height: 640px) { html.k-js.k-enhanced:not(.k-reduce) .k-imp-rows--l { display: none; } } @media (max-width: 734px) and (max-height: 540px) { html.k-js.k-enhanced:not(.k-reduce) .k-imp-rows--l { display: none; } } /* ===== 04-goes.css ===== */ /* ========================================================================== 03 Where it goes: Analytics and Activity. 1. Lockup: eyebrow, xxl headline, xl copy; 8 columns, centred at large and medium, left on phones. 2. The show: the still phone (stage size) beside the dealt charts, the pair centred and 64px apart; the deal is a 372 / 452 box up to 460px wide. Below 735px the deal goes under the phone. 3. At a glance: a grey heading over four numbers in a row (two by two on phones), each a grey label over a white figure. 4. Four callouts for Activity, each an icon, a title and grey copy, four across, two on tablets, one on phones. ========================================================================== */ .k-goes { overflow: clip; } /* 1 */ .k-goes__lockup > :last-child { margin-bottom: 0; } /* 2 */ .k-goes__show { display: flex; align-items: center; justify-content: center; gap: 64px; margin-top: 64px; } .k-goes__phone-cell { flex: none; } .k-goes__deal-cell { flex: 0 1 460px; min-width: 0; } .k-goes__deal { width: 100%; } @media (max-width: 1068px) { .k-goes__show { gap: 40px; margin-top: 56px; } } @media (max-width: 734px) { .k-goes__show { flex-direction: column; gap: 32px; margin-top: 44px; } .k-goes__deal-cell { width: min(100%, 340px); flex-basis: auto; } } /* 3 */ .k-goes__glance { margin-top: 88px; } .k-goes__glance-h { margin: 0 0 20px; font-size: 21px; line-height: 1.19; font-weight: 600; letter-spacing: .011em; color: var(--k-text-2); } .k-goes__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--k-keyline); } .k-goes__stat { padding: 22px 24px 0 0; } .k-goes__stat dt { font-size: 17px; line-height: 1.24; letter-spacing: -.022em; color: var(--k-text-2); } .k-goes__stat dd { margin: 6px 0 0; font-size: 40px; line-height: 1.1; letter-spacing: -.01em; font-weight: 600; color: var(--k-text); } .k-goes__stat dd.k-c-up { color: var(--k-positive); } .k-goes__stat:last-child dd { font-size: 28px; line-height: 1.43; } @media (max-width: 1068px) { .k-goes__stat dd { font-size: 32px; } .k-goes__stat:last-child dd { font-size: 22px; line-height: 1.45; } } @media (max-width: 734px) { .k-goes__glance { margin-top: 64px; } .k-goes__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; } .k-goes__stat dd { font-size: 28px; } .k-goes__stat:last-child dd { font-size: 19px; line-height: 1.47; } } /* 4 */ .k-goes__more { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; } .k-goes__more h3 { margin: 14px 0 6px; font-size: 19px; line-height: 1.21; font-weight: 600; letter-spacing: .012em; color: var(--k-text); } .k-goes__more p { margin: 0; font-size: 17px; line-height: 1.47; letter-spacing: -.022em; color: var(--k-text-2); } .k-goes__ico { display: block; width: 30px; height: 30px; fill: none; stroke: var(--k-glyph); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 1068px) { .k-goes__more { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 734px) { .k-goes__more { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 56px; } } /* ===== 05-budget.css ===== */ /* ========================================================================== 04 Budget (Apple's pro video chapter, section 06 of the iPhone 18 Pro page) 1. Headline lockup: eyebrow + two-line xxl headline, 10 columns, centred at large and medium, left at small. Never animated. 2. The prism: a stage pinned for a few screens of scroll (k-stage writes --p). The pay comes in as one beam of white light, passes behind the phone and comes out as three beams in the app's own colours for the shares (its dark-mode allocation bar): savings blue, fixed costs violet, spending amber, each as wide as its share of the pay. Beside the white beam a counter runs "Left to allocate" down; the labels wait at the ends of the coloured beams; the stage ends on "Budget set". 06-budget.js draws the beams from where the phone and the labels are, writes how far each has drawn (--kb-in, --kb-save, --kb-fixed, --kb-spend, 0 to 1) and the finale (--kb-fin), and moves the riders. All of those default to 1 here, the last frame: no script shows the labels and "Budget set" beside the phone, without the beams; reduced motion pins the last frame, beams drawn, nothing riding. Landscape windows run the beams sideways, the phone in the middle; portrait ones (phones, tablets upright) run them downwards, the pay from above and the three labels in a row under the phone. 3. Paragraph: 8 columns at large and medium, stagger fade-up. 4. Gallery: header + five caption tiles (wide bordered, wide film, narrow, wide bordered, narrow bordered), 150ms stagger anchored on the strip, paddles under the right edge. ========================================================================== */ .k-budget { overflow: clip; } /* 1. Headline lockup */ .k-budget__lockup { position: relative; z-index: 4; } /* The core's .k-lockup > :last-child reset sits before its <=1068 and <=734 blocks, which win at the same specificity; this file loads after them. */ .k-budget__lockup > :last-child, .k-budget__copy > :last-child { margin-bottom: 0; } /* 2. The prism */ .k-budget__show { --p: 1; --k-stage-h: 300vh; --kb-in: 1; --kb-save: 1; --kb-fixed: 1; --kb-spend: 1; --kb-fin: 1; --kb-blue: 0 172 255; --kb-violet: 152 108 248; --kb-amber: 250 154 0; margin-block: 24px 64px; } @media (max-width: 1068px) { .k-budget__show { --k-stage-h: 290vh; } } @media (max-width: 734px) { .k-budget__show { --k-stage-h: 270vh; margin-block: 8px 40px; } } html.k-reduce .k-budget__show { --p: 1 !important; --k-stage-h: auto; } html:not(.k-js) .k-budget__show { --k-stage-h: auto; } html.k-reduce .k-budget__pin, html:not(.k-js) .k-budget__pin { position: relative; height: auto; min-height: 820px; } .k-budget__scene { --kb-axis: x; --kb-ph-h: clamp(420px, calc(72 * var(--k-vh, 1vh)), 720px); --kb-ph-w: calc(var(--kb-ph-h) * var(--k-phone-ratio)); --kb-run: clamp(140px, 16vw, 300px); /* beam past the phone, before its label */ --kb-gut: calc((100% - min(87.5%, var(--k-content-max))) / 2); --kb-beam: calc(var(--kb-ph-h) * .13); /* the white beam; 06-budget.js uses the same */ position: relative; width: 100%; height: 100%; min-height: inherit; } /* The phone: in the middle, still. Only its screen changes (K.screen) */ .k-budget__phone-cell { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; } .k-budget__phone { --k-phone-h: var(--kb-ph-h); } /* Light round the phone where the beams meet it, behind it (z -1 inside the cell), each colour on the side its beam leaves by */ .kb-halo { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .kb-halo__c { position: absolute; width: 180%; height: 80%; border-radius: 50%; translate: -50% -50%; background: radial-gradient(closest-side, rgb(var(--c) / .42), rgb(var(--c) / .14) 52%, rgb(var(--c) / 0)); opacity: var(--o); } .kb-halo__c--in { --c: 255 255 255; --o: calc(var(--kb-in) * .7); left: 0; top: 50%; } .kb-halo__c--save { --c: var(--kb-blue); --o: calc(var(--kb-save) * .9); left: 100%; top: 36%; } .kb-halo__c--fixed { --c: var(--kb-violet); --o: calc(var(--kb-fixed) * .9); left: 100%; top: 50%; } .kb-halo__c--spend { --c: var(--kb-amber); --o: calc(var(--kb-spend) * .9); left: 100%; top: 64%; } /* The beams: one layer each, built by 06-budget.js (a blurred copy for the glow, the ribbon, its strands and the bar it lands on). Each is revealed along its way by a soft-edged mask whose edge (--r, px along the axis) the script moves; a bright head rides the edge while it draws. */ .kb-beams, .kb-flow { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .kb-flow { overflow: hidden; } .kb-beam { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(var(--kb-dir, 90deg), #000 calc(var(--r, 0px) - 56px), transparent var(--r, 0px)); mask-image: linear-gradient(var(--kb-dir, 90deg), #000 calc(var(--r, 0px) - 56px), transparent var(--r, 0px)); } .k-budget__scene[data-axis="y"] .kb-beam { --kb-dir: 180deg; } .kb-beam.is-full { -webkit-mask-image: none; mask-image: none; } .kb-beam.is-empty { visibility: hidden; } .kb-beam > svg { position: absolute; left: 0; top: 0; overflow: visible; } .kb-beam--in { --c: 255 255 255; } .kb-beam--save { --c: var(--kb-blue); } .kb-beam--fixed { --c: var(--kb-violet); } .kb-beam--spend { --c: var(--kb-amber); } .kb-beam__glow { filter: blur(24px); opacity: .62; } .kb-beam__glow path, .kb-beam__glow rect { fill: rgb(var(--c)); } .kb-beam--in .kb-beam__glow { opacity: .4; } /* four widths stacked, softened a touch so no seam shows between them */ .kb-beam__core { filter: blur(1.5px); } .kb-beam--in .kb-beam__core { filter: blur(3px); } .kb-beam__body { opacity: .2; } .kb-beam__mid { opacity: .22; } .kb-beam__inner { opacity: .3; } .kb-beam__hot { opacity: .95; } .kb-beam--in .kb-beam__body { opacity: .14; } .kb-beam--in .kb-beam__mid { opacity: .16; } .kb-beam--in .kb-beam__inner { opacity: .22; } .kb-beam__node { fill: rgb(var(--c)); } /* Where a beam lands (or, for the pay, where it meets the phone): a flash the moment it arrives */ .kb-burst { position: absolute; left: 0; top: 0; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; pointer-events: none; opacity: 0; scale: .2; background: radial-gradient(closest-side, rgb(255 255 255 / .95), rgb(var(--c) / .65) 22%, rgb(var(--c) / .18) 55%, rgb(var(--c) / 0)); mix-blend-mode: screen; } .kb-burst.is-on { animation: kb-burst .9s var(--k-ease-out) both; } @keyframes kb-burst { 0% { opacity: 0; scale: .2; } 18% { opacity: 1; } 100% { opacity: 0; scale: 1.5; } } html.k-reduce .kb-burst { display: none; } /* The head: a spark riding the edge of the reveal */ .kb-head { position: absolute; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, #fff 0, rgb(var(--c) / .9) 10%, rgb(var(--c) / .32) 34%, rgb(var(--c) / 0) 100%); mix-blend-mode: screen; will-change: transform, opacity; } /* The finale: every beam flares once as the budget is set, then the glow keeps breathing while the stage is on screen */ .k-budget__scene.is-set .kb-beam__core { animation: kb-flare 1.4s var(--k-ease-out) both; } @keyframes kb-flare { 0% { filter: blur(1.5px) brightness(1); } 22% { filter: blur(1.5px) brightness(1.9); } 100% { filter: blur(1.5px) brightness(1); } } html:not(.k-reduce) .k-budget__scene.is-live .kb-beam__glow { animation: kb-breathe 4.8s ease-in-out infinite; } html:not(.k-reduce) .k-budget__scene.is-live .kb-beam--fixed .kb-beam__glow { animation-delay: -1.6s; } html:not(.k-reduce) .k-budget__scene.is-live .kb-beam--spend .kb-beam__glow { animation-delay: -3.2s; } @keyframes kb-breathe { 0%, 100% { opacity: .5; } 50% { opacity: .8; } } /* Riders: what each beam carries, and sparks. Placed every frame by the script; they start behind the phone and come out from under its edge. */ .kb-chip, .kb-spark { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; } .kb-chip { --c: 255 255 255; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(20, 20, 22, .9); box-shadow: inset 0 0 0 1px rgb(var(--c) / .5), 0 8px 22px rgba(0, 0, 0, .5); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; color: #d2d2d7; } .kb-chip::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 8px rgb(var(--c) / .9); } .kb-chip b { font-weight: 600; color: #f5f5f7; font-variant-numeric: tabular-nums; } .kb-chip[data-beam="save"] { --c: var(--kb-blue); } .kb-chip[data-beam="fixed"] { --c: var(--kb-violet); } .kb-chip[data-beam="spend"] { --c: var(--kb-amber); } .kb-spark { width: var(--sz, 3px); height: var(--sz, 3px); margin: calc(var(--sz, 3px) / -2) 0 0 calc(var(--sz, 3px) / -2); border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgb(var(--c) / .9); } html.k-reduce .kb-flow, html:not(.k-js) .kb-flow, html.k-reduce .kb-head { display: none; } /* The counter over the white beam, and "Budget set" in its place at the end. Their bottom edge stays 36px above the beam. */ .kb-count, .kb-set { position: absolute; z-index: 3; left: var(--kb-gut); bottom: calc(50% + var(--kb-beam) / 2 + 36px); width: calc(50% - var(--kb-ph-w) / 2 - var(--kb-gut) - 32px); margin: 0; } .kb-count p, .kb-set p { margin: 0; } .kb-count__eyebrow, .kb-set__eyebrow { display: grid; font-size: 21px; line-height: 1.1905; letter-spacing: .011em; font-weight: 600; color: var(--k-text-2); } .kb-count__eyebrow > span { grid-area: 1 / 1; } .kb-count__pay { opacity: calc(1 - min(1, var(--kb-save) * 8)); } .kb-count__left { opacity: min(1, var(--kb-save) * 8); } .kb-count__num, .kb-set__num { margin-top: 6px !important; font-size: clamp(48px, 5vw, 80px); line-height: 1.05; letter-spacing: -.015em; font-weight: 600; color: #f5f5f7; font-variant-numeric: tabular-nums; white-space: nowrap; } .kb-set__eyebrow { color: var(--k-positive); } .kb-set__cap { margin-top: 8px !important; font-size: 21px; line-height: 1.1905; letter-spacing: .011em; font-weight: 600; color: var(--k-text-2); } .kb-count { opacity: calc(1 - var(--kb-fin)); } .kb-set { opacity: var(--kb-fin); translate: 0 calc((1 - var(--kb-fin)) * 16px); } /* The labels at the ends of the coloured beams. The outer box stays put (the script measures it); the inside comes in as its beam arrives. */ .kb-label { position: absolute; z-index: 3; left: calc(50% + var(--kb-ph-w) / 2 + var(--kb-run)); width: min(290px, calc(50% - var(--kb-ph-w) / 2 - var(--kb-run) - 20px)); top: var(--kb-ly); translate: 0 -50%; } .kb-label--save { --kb-ly: 24%; --kb-d: var(--kb-save); --c: var(--kb-blue); } .kb-label--fixed { --kb-ly: 50%; --kb-d: var(--kb-fixed); --c: var(--kb-violet); } .kb-label--spend { --kb-ly: 76%; --kb-d: var(--kb-spend); --c: var(--kb-amber); } .kb-label__in { --l: clamp(0, calc((var(--kb-d) - .62) / .38), 1); opacity: var(--l); transform: translate3d(calc((1 - var(--l)) * -18px), 0, 0); } .kb-label p { margin: 0; } .kb-label__eyebrow { font-size: 17px; line-height: 1.2353; letter-spacing: -.022em; font-weight: 600; color: rgb(var(--c)); } .kb-label__num { margin-top: 4px !important; font-size: clamp(34px, 3.4vw, 52px); line-height: 1.08; letter-spacing: -.012em; font-weight: 600; color: #f5f5f7; font-variant-numeric: tabular-nums; white-space: nowrap; } .kb-label__sub { margin-top: 8px !important; font-size: 15px; line-height: 1.3334; letter-spacing: -.012em; color: var(--k-text-2); } @media (max-width: 1068px) { .kb-count__eyebrow, .kb-set__eyebrow, .kb-set__cap { font-size: 17px; line-height: 1.2353; letter-spacing: -.022em; } .kb-label__eyebrow { font-size: 15px; } .kb-label__sub { font-size: 13px; } .kb-chip { font-size: 12px; padding: 5px 10px 5px 9px; } } /* Portrait windows: the pay comes down from above, the phone sits a fifth of the way down, and the three labels share the bottom row; the counter takes the top left, clear of the white beam. No chips: no room. */ @media (max-aspect-ratio: 1/1) { .k-budget__scene { --kb-axis: y; --kb-ph-h: clamp(280px, calc(44 * var(--k-vh, 1vh)), 540px); --kb-top: max(19%, 168px); --kb-beam: calc(var(--kb-ph-w) * .2); } .k-budget__phone-cell { top: var(--kb-top); translate: -50% 0; } .kb-halo__c { width: 90%; height: 60%; } .kb-halo__c--in { left: 50%; top: 0; } .kb-halo__c--save { left: 22%; top: 100%; } .kb-halo__c--fixed { left: 50%; top: 100%; } .kb-halo__c--spend { left: 78%; top: 100%; } .kb-count, .kb-set { top: max(72px, 8%); bottom: auto; width: calc(50% - var(--kb-gut) - var(--kb-beam) / 2 - 16px); } .kb-count__num, .kb-set__num { font-size: clamp(24px, 7vw, 48px); } .kb-label { top: auto; bottom: max(4%, 20px); translate: none; text-align: center; width: calc((100% - 2 * var(--kb-gut)) / 3); } .kb-label--save { left: var(--kb-gut); } .kb-label--fixed { left: calc(var(--kb-gut) + (100% - 2 * var(--kb-gut)) / 3); } .kb-label--spend { left: calc(var(--kb-gut) + (100% - 2 * var(--kb-gut)) * 2 / 3); } .kb-label__in { transform: translate3d(0, calc((1 - var(--l)) * 14px), 0); } .kb-label__num { font-size: clamp(20px, 4.4vw, 40px); } /* the three stand on one line, so their beams land level: every description keeps room for two lines */ .kb-label__sub { min-height: calc(2em * 1.3334); } .kb-chip { display: none; } } @media (max-aspect-ratio: 1/1) and (max-width: 599px) { .kb-count__eyebrow, .kb-set__eyebrow, .kb-set__cap { font-size: 13px; line-height: 1.3; letter-spacing: -.01em; } .kb-label__eyebrow { font-size: clamp(10px, 3.1vw, 12px); line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; } .kb-label__sub { display: none; } } /* 3. Paragraph: 8 columns at large and medium (Apple keeps 8 at medium), full width and left at small */ .k-budget__copy { position: relative; z-index: 4; width: min(calc(var(--k-vw) * .5833), 840px); margin-inline: auto; } @media (max-width: 734px) { .k-budget__copy { width: 100%; } } /* 4. Gallery: the container carries the section's real bottom padding */ .k-budget__gallery { padding-block: var(--k-pad); } .k-budget__strip .k-cards__scroller { padding-top: 10px; margin-top: -10px; } .k-budget__strip .k-cards__track > :last-child { scroll-snap-align: start end; } /* Apple's paddles sit under the row without adding height. The strip's box includes the scroller's 30px bottom padding (its -30px margin collapses out through .k-cards), so step back 30px: the arrows then sit the core's 24px under the captions, like every other card row. */ .k-budget__strip .k-paddles { position: absolute; top: calc(100% - 30px); left: 0; right: 0; } /* Caption tile: caption first in the markup, drawn under the card */ .k-budget__item { display: grid; grid-template-rows: auto auto; align-content: start; } .k-budget__tile { grid-row: 1; } .k-budget__cap { grid-row: 2; padding: 28px 16px 0; font-size: 17px; line-height: 1.2354; letter-spacing: -.022em; font-weight: 600; color: var(--k-text-2); } .k-budget__cap h4, .k-budget__cap p { display: inline; font: inherit; letter-spacing: inherit; } .k-budget__cap h4 { color: var(--k-text); } .k-tile-item--wide .k-budget__cap { max-width: 480px; } /* A real 1px ring over whatever fills the tile (an inset shadow would sit under the media) */ .k-budget__tile.k-tile--border::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--k-gray-4); } @media (max-width: 1068px) { .k-budget__item.k-tile-item--wide { width: 643px; } .k-budget__item--film.k-tile-item--wide { width: 644px; } } @media (max-width: 734px) { .k-budget__item, .k-budget__item.k-tile-item--wide, .k-budget__item--film.k-tile-item--wide { width: 260px; } .k-budget__cap { padding-top: 24px; font-size: 14px; line-height: 1.2858; letter-spacing: -.016em; } .k-tile-item--wide .k-budget__cap { max-width: none; } } /* The film tile, once a