/* ========================================================================== core.css — shared by every page of the store. Structure only, plus the one piece of chrome every page carries: the nav (a bar at the top; on a phone, a dock at the bottom). Reset, the custom-cursor switch, the page-to-page tiles and reveals. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; overflow-x: hidden; } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; padding: 0; } ul, ol { list-style: none; } ::selection { background: var(--select, rgba(35, 131, 226, .28)); } :focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 3px; border-radius: 4px; } /* hidden means gone, whatever display a component gives itself (a closed dialog left at display:grid would lie invisible over the page and swallow every hover and click) */ [hidden] { display: none !important; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .tnum { font-variant-numeric: tabular-nums; } /* --- Custom cursor switch: only for a mouse or trackpad (core.js adds .has-cursor) */ html.has-cursor, html.has-cursor * { cursor: none !important; } .cursor-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9990; contain: strict; } html:not(.has-cursor) .cursor-layer { display: none; } .cursor-layer.is-away { opacity: 0; transition: opacity .2s; } /* --- The nav ----------------------------------------------------------------- One bar, floating at the top in the middle; on a phone, a dock at the bottom. Every page has its own Notion tag colour and an icon that acts out what it is: Home's door opens, Templates fan out, Services' last block sets into place, Contact's letter rises out of its envelope. A highlight, the "ink", rests on the page you are on and crawls to whatever you point at (its leading edge first, its tail catching up), taking on that page's colour. Pointing a while opens a peek below: a small Notion page saying what is there, which slides and resizes as you move along. Book a call is the one dark button, with today's date on it and a light saying booking is open. */ [data-hue="orange"] { --cbg: var(--t-orange-bg); --cfg: var(--t-orange); --acc: #E9893A; } [data-hue="blue"] { --cbg: var(--t-blue-bg); --cfg: var(--t-blue); --acc: #4A90C2; } [data-hue="purple"] { --cbg: var(--t-purple-bg); --cfg: var(--t-purple); --acc: #9B6FC1; } [data-hue="green"] { --cbg: var(--t-green-bg); --cfg: var(--t-green); --acc: #4F9A6E; } [data-hue="yellow"] { --cbg: var(--t-yellow-bg); --cfg: var(--t-yellow); --acc: #E2A93B; } [data-hue="red"] { --cbg: var(--t-red-bg); --cfg: var(--t-red); --acc: #D9625B; } [data-hue="pink"] { --cbg: var(--t-pink-bg); --cfg: var(--t-pink); --acc: #C9629B; } .nav-wrap { position: fixed; top: 14px; left: 0; right: 0; z-index: 200; display: flex; justify-content: center; pointer-events: none; } .nav-wrap > * { pointer-events: auto; } .nav { position: relative; display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 15px; color: var(--ink-2); font: 500 14px/1 var(--f-ui); letter-spacing: -.005em; background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: 0 0 0 1px rgba(15, 15, 15, .06), 0 4px 10px rgba(15, 15, 15, .05), 0 14px 32px rgba(15, 15, 15, .09); transition: box-shadow .35s; } .nav.scrolled { box-shadow: 0 0 0 1px rgba(15, 15, 15, .07), 0 6px 14px rgba(15, 15, 15, .08), 0 20px 44px rgba(15, 15, 15, .14); } /* the ink: two edges with their own timing, so it stretches across and catches up */ .nav-ink { position: absolute; top: 5px; bottom: 5px; left: var(--l, 0); right: var(--r, 100%); border-radius: 10px; pointer-events: none; background: var(--ink-bg, var(--paper-2)); box-shadow: inset 0 0 0 1px rgba(15, 15, 15, .04); transition: left .46s cubic-bezier(.3, 1.35, .5, 1) var(--dl, 0s), right .46s cubic-bezier(.3, 1.35, .5, 1) var(--dr, 0s), background-color .35s, opacity .25s, transform .35s var(--e-spring); } .nav-ink.off { opacity: 0; transform: scale(.82); } .nav.jump .nav-ink { transition: none; } /* the pages */ .nav-i { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border-radius: 10px; white-space: nowrap; transition: color .3s; } .nav-i.lit, .nav-i[aria-current], .nav-i.here { color: var(--cfg); } .nav-i:focus-visible, .nav-cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 10px; } .nav-ic { position: relative; display: block; flex: none; } .nav-ic svg, .pk-ic svg { width: 22px; height: 22px; overflow: visible; fill: var(--sheet); stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .nav-ic svg *, .pk-ic svg * { transform-box: fill-box; transition: transform .55s var(--e-spring), fill .3s, opacity .25s, stroke .3s; } /* Home: the door swings open on a warm light */ .i-glow { fill: var(--acc); stroke: none; opacity: 0; } .i-door { transform-origin: left center; } .lit .i-glow { opacity: 1; } .lit .i-door { transform: scaleX(.26); } /* Templates: a stack, fanned */ .i-c { transform-origin: 50% 100%; } .i-c1 { transform: rotate(-11deg); } .i-c3 { transform: rotate(11deg); } .i-band { stroke: none; fill: transparent; } .lit .i-c1 { transform: rotate(-21deg) translateX(-1px); } .lit .i-c3 { transform: rotate(21deg) translateX(1px); } .lit .i-c2 { transform: translateY(-1.5px); } .lit .i-c2 .i-band { fill: var(--acc); } /* Services: the last block, lifted, sets into place */ .i-top { transform-origin: center; transform: translate(2.5px, -2.5px) rotate(16deg); } .lit .i-top { transform: none; fill: var(--acc); } /* Contact: the envelope opens and the letter rises */ .i-flap-up { opacity: 0; } .i-lines { stroke-width: 1.3; } .lit .i-letter { transform: translateY(-6px); } .lit .i-lines { stroke: var(--acc); } .lit .i-flap-up { opacity: 1; } .i-flap { stroke-width: 1.3; } /* Home: her photo, the way a site wears its logo (the word "Home" is there for screen readers, and shows in the phone's dock) */ .nav-home { padding: 0 8px; } .nav-home .nav-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nav-me img { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3px var(--line-2); transition: box-shadow .3s, transform .45s var(--e-spring); } .nav-home:hover .nav-me img, .nav-home.lit .nav-me img { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--acc); transform: scale(1.06); } /* About: she waves hello */ .i-wave { opacity: 0; transform: translate(-2px, 2px); } .lit .i-wave { opacity: 1; transform: none; stroke: var(--acc); } .lit .i-head { fill: var(--acc); transform: translateY(-1px); } /* Learn: a video, its page sliding out from behind as the play button fills */ .i-pg { transform-origin: 0% 100%; } .i-play { stroke-width: 1.3; } .lit .i-pg { transform: translate(1.5px, -1.5px) rotate(7deg); } .lit .i-play { fill: var(--acc); stroke: var(--acc); transform: scale(1.12); transform-origin: center; } /* Book a call: the one dark button, with today on its calendar */ .nav-sep { width: 1px; height: 22px; margin: 0 5px; background: var(--line-2); flex: none; } .nav-cta { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 11px; border-radius: 10px; white-space: nowrap; color: var(--on-ink); font-weight: 600; background: var(--ink); box-shadow: 0 6px 16px -6px rgba(25, 25, 24, .55); transition: transform .45s var(--e-spring), box-shadow .3s; } .nav-cta svg, .pk[data-peek="book"] .pk-ic svg { fill: none; stroke: currentColor; } .pk[data-peek="book"] .i-band { fill: #FDECC8; } .nav-cta .i-band { fill: #FDECC8; } .nav-cta .i-cal { transform-origin: 50% 100%; } .nav-cta .i-rings { transition: transform .4s var(--e-spring); } .nav-date { font: 700 7.4px/1 var(--f-ui); fill: currentColor; stroke: none; } .nav-live { position: absolute; right: -3px; top: -2px; width: 8px; height: 8px; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 2px var(--ink); } .nav-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #34C759; animation: nav-live 2.4s ease-out infinite; } @keyframes nav-live { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.6); opacity: 0; } } .nav-cta:hover, .nav-cta.lit { transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(25, 25, 24, .6), 0 0 0 3px rgba(253, 236, 200, .9); } .nav-cta:hover .i-cal, .nav-cta.lit .i-cal { transform: rotate(-9deg); } .nav-cta:hover .i-rings, .nav-cta.lit .i-rings { transform: translateY(-1.5px); } .nav-cta[aria-current] { box-shadow: 0 0 0 3px #FDECC8, 0 8px 18px -6px rgba(25, 25, 24, .55); } /* the peek: a small Notion page about where an item goes */ .peek { position: fixed; left: 0; top: 0; z-index: 199; width: var(--w, 300px); height: var(--h, 200px); transform: translate(var(--x, 0), var(--y, 0)); opacity: 0; visibility: hidden; pointer-events: none; transition: width .42s var(--e-out), height .42s var(--e-out), transform .42s var(--e-out), opacity .2s, visibility 0s .2s; } .peek.open { opacity: 1; visibility: visible; pointer-events: auto; transition: width .42s var(--e-out), height .42s var(--e-out), transform .42s var(--e-out), opacity .22s, visibility 0s; } .peek.jump, .peek.jump * { transition: none !important; } .peek::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* a bridge from the bar, so the pointer can cross */ .pk-card { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; background: var(--sheet); box-shadow: var(--sh-lift); transform-origin: var(--cx, 50%) 0; transform: translateY(-6px) scale(.97); transition: transform .4s var(--e-spring); } .peek.open .pk-card { transform: none; } .pk-caret { position: absolute; top: -5px; left: var(--cx, 50%); width: 12px; height: 12px; margin-left: -6px; border-radius: 3px 0 0 0; transform: rotate(45deg); background: var(--cbg); box-shadow: -1px -1px 0 rgba(15, 15, 15, .05); transition: left .42s var(--e-out), background-color .35s; } .pk-cover { position: absolute; left: 0; right: 0; top: 0; height: 34px; background: var(--cbg); transition: background-color .35s; } .pk { position: absolute; left: 0; top: 0; width: var(--pw, 300px); padding: 18px 16px 14px; opacity: 0; pointer-events: none; transition: opacity .22s, transform .42s var(--e-out); } .pk.on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .3s .06s, transform .42s var(--e-out); } .pk-ic { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--sheet); color: var(--cfg); box-shadow: 0 0 0 1px var(--line), 0 3px 8px rgba(15, 15, 15, .08); } .pk-ic svg { width: 24px; height: 24px; } .pk-ic img { width: 30px; height: 30px; border-radius: 50%; } .pk[data-peek="book"] .pk-ic { background: var(--ink); color: var(--on-ink); } .pk-k { display: flex; align-items: center; gap: 6px; margin-top: 12px; font: 500 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); } .pk-k b { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); } .pk-t { margin-top: 6px; font: 500 1.4rem/1.1 var(--f-display); letter-spacing: -.015em; color: var(--ink); } .pk-l { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); } .pk-b { margin-top: 12px; } .pk-go { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 10px 2px 0; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); } .pk-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--e-spring); } .pk-go:hover svg { transform: translateX(3px); } /* what each peek holds */ .pk-me { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: var(--paper); } .pk-me img { width: 34px; height: 34px; border-radius: 50%; } .pk-me span { display: grid; gap: 3px; flex: 1; font-size: 13.5px; color: var(--ink); } .pk-me small { font-size: 12px; color: var(--ink-3); } a.pk-me { transition: background-color .2s, box-shadow .2s; } a.pk-me:hover { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); } .pk-me em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-2); } a.pk-me:hover em { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } .pk-me .pk-badge { width: 32px; height: 32px; border-radius: 0; } .pk-covers { position: relative; height: 74px; } .pk-covers img { position: absolute; top: 4px; width: 104px; height: 64px; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 1px var(--line), 0 4px 10px rgba(15, 15, 15, .1); transition: transform .5s var(--e-spring); } .pk-covers img:nth-child(1) { left: 0; transform: rotate(-5deg); } .pk-covers img:nth-child(2) { left: 50%; margin-left: -52px; z-index: 1; transform: translateY(-3px); } .pk-covers img:nth-child(3) { right: 0; transform: rotate(5deg); } .pk.on .pk-covers img:nth-child(1) { transform: rotate(-8deg) translateX(-2px); } .pk.on .pk-covers img:nth-child(3) { transform: rotate(8deg) translateX(2px); } .pk-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .pk-facts .tag { font-size: 12px; } .pk-rows { display: grid; gap: 2px; margin: 0 -8px; } .pk-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 10px; padding: 7px 8px; border-radius: 8px; transition: background-color .2s; } .pk-row:hover { background: var(--hover); } .pk-row i { grid-row: span 2; width: 10px; height: 10px; border-radius: 3px; background: var(--d); } .pk-row b { font-size: 13.5px; font-weight: 600; color: var(--ink); } .pk-row small { grid-column: 2; font-size: 12px; line-height: 1.35; color: var(--ink-3); } .pk-row em { grid-row: 1 / span 2; grid-column: 3; font: 600 12px/1 var(--f-ui); font-style: normal; color: var(--ink-4); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .3s var(--e-spring); } .pk-row:hover em { opacity: 1; transform: none; color: var(--ink); } .pk-vids { display: grid; gap: 6px; } .pk-vid { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; font-size: 13px; line-height: 1.35; color: var(--ink-2); } .pk-vid img { width: 76px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; } .pk-mail { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 8px; background: var(--paper); font: 500 12.5px/1.2 var(--f-mono); color: var(--ink); } .pk-mail small { font: 600 10.5px/1 var(--f-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); } .pk-note { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); } .pk-note svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .pk-next { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; padding: 10px 12px; border-radius: 10px; background: var(--paper); } .pk-next i { grid-row: span 2; width: 9px; height: 9px; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 3px rgba(52, 199, 89, .2); } .pk-next small { font-size: 11.5px; color: var(--ink-4); } .pk-next b { font-size: 14.5px; font-weight: 650; color: var(--ink); } .pk-calls { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } .pk-calls .tag { font-size: 11.5px; } /* a narrow window (a tablet, half a screen): the pages as icons (their names are in the peek), the page you are on still named, and "Book" for Book a call, so the bar never runs into the keys on the right */ @media (min-width: 761px) and (max-width: 1060px) { .nav-i:not([aria-current]):not(.here) .nav-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nav-i { padding: 0 11px; } .nav-x { display: none; } } @media (max-width: 760px) { /* a dock at the bottom, under the thumb: icon over label, every page always named */ .nav-wrap { top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } .nav { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: min(calc(100% - 12px), 540px); gap: 1px; padding: 4px; border-radius: 18px; font-size: 11px; font-weight: 550; letter-spacing: -.01em; } /* seven pages: on the narrowest phones the names get a touch smaller so every one stays whole */ @media (max-width: 400px) { .nav { font-size: 9.6px; letter-spacing: -.025em; } .nav-i, .nav-cta { padding: 0 1px; } } .nav-sep { display: none; } .nav-i, .nav-cta { flex-direction: column; justify-content: center; gap: 4px; height: 54px; padding: 0 2px; border-radius: 13px; } .nav-ink { border-radius: 13px; } .nav-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .nav-x { display: none; } .nav-home .nav-t { position: static; width: auto; height: auto; clip: auto; } .nav-me img { width: 22px; height: 22px; } .nav-cta { margin-left: 2px; } .peek { display: none; } body { padding-bottom: 84px; } } @media (max-width: 340px) { .nav { font-size: 10px; } .nav-ic svg { width: 20px; height: 20px; } } /* --- Page-to-page: Notion tiles fold over the page and open on the next ------ */ .nx { position: fixed; inset: 0; z-index: 9800; pointer-events: none; overflow: hidden; } html.nx-in body::before { content: ""; position: fixed; inset: 0; z-index: 9799; background: var(--nx-bg, #F7F6F3); } html.nx-in.nx-go body::before { display: none; } .nx-notion { display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-rows: 1fr; } .nx-notion i { background: var(--c); transform: scale(0); border-radius: 18%; } .nx-notion.nx-cover i { animation: nxTileIn .42s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: var(--d); } .nx-notion.nx-reveal i { transform: scale(1.04); border-radius: 0; animation: nxTileOut .46s cubic-bezier(.55,0,.45,1) forwards; animation-delay: var(--d); } @keyframes nxTileIn { to { transform: scale(1.04); border-radius: 0; } } @keyframes nxTileOut { to { transform: scale(0); border-radius: 30%; } } /* --- Scroll reveals (opt-in with data-reveal) ------------------------------ */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i, 0) * 90ms); } [data-reveal].in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } html.nx-in body::before { display: none; } } /* --- The keys, top right (js/theme.js): Contrast, and light/dark ------------------------- */ .keys { position: fixed; top: 16px; right: clamp(14px, 2.2vw, 28px); z-index: 210; display: flex; gap: 6px; padding-bottom: 4px; } /* a keycap: a light top on a darker skirt, which shrinks as it goes down */ .key { --sk: 3px; --top: linear-gradient(#FFFFFF, #F1EFEA); --skirt: #D8D5CE; --edge: rgba(55,53,47,.17); --fg: var(--ink-2); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; height: 34px; padding: 0 9px; border-radius: 9px; cursor: pointer; background: var(--top); color: var(--fg); transform: translateY(calc(3px - var(--sk))); box-shadow: 0 0 0 1px var(--edge), 0 var(--sk) 0 0 var(--skirt), 0 var(--sk) 0 1px var(--edge), 0 calc(var(--sk) + 3px) 10px -3px rgba(25,25,24,.28), var(--glow, 0 0 0 0 transparent); transition: transform .12s cubic-bezier(.3,.7,.4,1), box-shadow .12s cubic-bezier(.3,.7,.4,1), background .4s, color .4s; } .key:hover:not(.down) { --sk: 4px; } .key.down { --sk: 0px; } .key:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .key b { font: 600 12.5px/1 var(--f-ui); } /* folded to its icon in a narrow window (js/theme.js), so it never runs into the nav */ .k-hc b, .k-sub b { display: inline-block; max-width: 90px; overflow: hidden; white-space: nowrap; transition: max-width .35s var(--e-out), opacity .25s, margin .35s var(--e-out); } .keys.mini .k-hc b, .keys.mini .k-sub b { max-width: 0; opacity: 0; margin-left: -6px; } .keys.still .k-hc b, .keys.still .k-sub b { transition: none; } /* --- the Subscribe icons (js/subscribe.js), drawn in one line weight, each acting out its option --------------- */ .si { width: 20px; height: 20px; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .si * { transform-box: fill-box; transform-origin: center; } /* mail (Subscribe): pointed at, the envelope's flap folds open, a letter rises out of it and a spark lights; leaving, it all tucks back in. In the dialog (.loop) it stays open, the letter bobbing. */ .si-mail .m-env { fill: var(--sheet, #fff); } .si-mail .m-flap { transform-origin: 50% 0%; transition: transform .38s var(--e-out); } .si-mail .m-letter { opacity: 0; transform: translateY(7px) scale(.9); transition: opacity .18s, transform .3s var(--e-out); } .si-mail .m-letter rect { fill: var(--sheet, #fff); } .si-mail .m-letter path { stroke: var(--si-a, #2383E2); stroke-width: 1.5; } .si-mail .m-spark { stroke: var(--si-a, #2383E2); stroke-width: 1.5; opacity: 0; } .k-sub:hover .si-mail .m-flap, .ft-sub:hover .si-mail .m-flap, .ft-sub:focus-within .si-mail .m-flap, .si-mail.loop .m-flap { transform: scaleY(-1); } .k-sub:hover .si-mail .m-letter, .ft-sub:hover .si-mail .m-letter, .ft-sub:focus-within .si-mail .m-letter, .si-mail.loop .m-letter { opacity: 1; transform: none; transition: opacity .2s .12s, transform .55s cubic-bezier(.34,1.7,.5,1) .12s; } .k-sub:hover .si-mail .m-spark, .ft-sub:hover .si-mail .m-spark, .si-mail.loop .m-spark { animation: si-twinkle .9s ease-out .4s; } .si-mail.loop .m-letter { animation: si-bob 2.4s ease-in-out .7s infinite; } .si-mail.loop .m-spark { animation-iteration-count: infinite; animation-duration: 2.4s; } @keyframes si-bob { 50% { transform: translateY(-1.2px); } } /* templates: a new card drops onto the stack, which takes the weight */ .si-drop .d-new { fill: var(--si-a, currentColor); stroke: var(--si-a, currentColor); } .si-drop .d-back { opacity: .5; } .si-drop .d-spark { stroke: var(--si-a, currentColor); stroke-width: 1.5; opacity: 0; } .sub-opt:hover .si-drop .d-spark, .si-drop.play .d-spark { animation: si-twinkle .9s ease-out .45s; } @keyframes si-twinkle { 0% { opacity: 0; transform: scale(.3) rotate(0); } 40% { opacity: 1; transform: scale(1.2) rotate(45deg); } 100% { opacity: 0; transform: scale(.6) rotate(90deg); } } .sub-opt:hover .si-drop .d-new, .si-drop.play .d-new { animation: si-fall .9s cubic-bezier(.3,1.4,.5,1); } .sub-opt:hover .si-drop .d-base, .si-drop.play .d-base { animation: si-take .9s ease-out; } @keyframes si-fall { 0% { transform: translateY(-9px) rotate(-12deg); opacity: 0; } 35% { opacity: 1; } 55% { transform: translateY(3px) rotate(0); } 75% { transform: translateY(-1px); } 100% { transform: none; } } @keyframes si-take { 0%, 50% { transform: none; } 62% { transform: scale(1.06, .9) translateY(.6px); } 80%, 100% { transform: none; } } /* videos & blog: the page writes its lines, then the play button pops in */ .si-page .g-l { stroke-dasharray: 8; stroke-dashoffset: 0; } .si-page .g-play { fill: var(--si-a, currentColor); stroke: var(--sheet, #fff); stroke-width: 1.6; } .si-page .g-tri { fill: #fff; stroke: none; } .sub-opt:hover .si-page .g-l, .si-page.play .g-l { animation: si-write .5s ease-out both; } .sub-opt:hover .si-page .g-l2, .si-page.play .g-l2 { animation-delay: .15s; } .sub-opt:hover .si-page .g-l3, .si-page.play .g-l3 { animation-delay: .3s; } .sub-opt:hover .si-page .g-play, .sub-opt:hover .si-page .g-tri, .si-page.play .g-play, .si-page.play .g-tri { animation: si-pop .5s cubic-bezier(.3,1.6,.5,1) .5s both; } @keyframes si-write { from { stroke-dashoffset: 8; } to { stroke-dashoffset: 0; } } @keyframes si-pop { 0% { transform: scale(0); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } } /* deals: the coupon tears along its dotted line, the % side tips away, and settles back */ .si-tick .t-perf { stroke-dasharray: 1.2 2.2; stroke-width: 1.4; } .si-tick .t-pct { stroke: var(--si-a, currentColor); } .si-tick .t-pct circle { fill: var(--si-a, currentColor); stroke: none; } .si-tick .t-r { transform-origin: 15px 17px; } .sub-opt:hover .si-tick .t-r, .si-tick.play .t-r { animation: si-tear 1s cubic-bezier(.3,1.3,.5,1); } .sub-opt:hover .si-tick .t-pct, .si-tick.play .t-pct { animation: si-spin 1s var(--e-out); } @keyframes si-tear { 0% { transform: none; } 35% { transform: translate(2px, 1px) rotate(14deg); } 70% { transform: translate(1px, 0) rotate(5deg); } 100% { transform: none; } } @keyframes si-spin { 0% { transform: none; } 40% { transform: rotate(-12deg) scale(1.12); } 100% { transform: none; } } @media (prefers-reduced-motion: reduce) { .si * { animation: none !important; } } .k-sub { --si-a: #2383E2; } :root[data-theme="dark"] .k-sub { --si-a: #529CCA; } .k-sub .si { width: 19px; height: 19px; } /* --- the Subscribe dialog (js/subscribe.js): an email, and what to hear about ------------- */ .sub { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(15,15,15,.38); opacity: 0; transition: opacity .25s; } .sub.on { opacity: 1; } .sub-card { position: relative; width: min(460px, 100%); max-height: calc(100svh - 32px); overflow: auto; padding: 22px 22px 18px; border-radius: 20px; background: var(--sheet); color: var(--ink); box-shadow: var(--sh-lift); transform: translateY(14px) scale(.98); transition: transform .45s var(--e-spring); } .sub.on .sub-card { transform: none; } .sub-x { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--paper); font-size: 18px; line-height: 1; color: var(--ink-3); } .sub-ic { --si-a: #2383E2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); } .sub-ic .si { width: 26px; height: 26px; } .sub-card h2 { margin-top: 12px; font: 500 1.7rem/1.1 var(--f-display); letter-spacing: -.02em; } .sub-card > p { margin-top: 6px; font-size: 14.5px; color: var(--ink-3); } .sub-f { display: grid; gap: 12px; margin-top: 16px; } .sub-email { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); } .sub-email:focus-within { box-shadow: inset 0 0 0 2px var(--focus); } .sub-email input { flex: 1; min-width: 0; border: 0; background: none; font-size: 15.5px; color: var(--ink); } .sub-email input:focus { outline: none; } .sub-k { font-size: 12.5px; font-weight: 600; color: var(--ink-3); } .sub-opts { display: grid; gap: 6px; } .sub-opt { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background-color .2s, box-shadow .2s; } .sub-opt:hover { background: var(--hover); } .sub-opt input { position: absolute; opacity: 0; pointer-events: none; } .sub-opt .chk { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.6px var(--line-2); display: grid; place-items: center; transition: background-color .2s, box-shadow .2s; } .sub-opt .chk::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .3s var(--e-spring); } .sub-opt:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--focus); background: color-mix(in srgb, var(--focus) 6%, var(--sheet)); } .sub-opt:has(input:checked) .chk { background: var(--focus); box-shadow: none; } .sub-opt:has(input:checked) .chk::after { transform: translateY(-1px) rotate(-45deg) scale(1); } .sub-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; } .sub-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-style: normal; color: var(--ink-2); background: color-mix(in srgb, var(--si-a) 9%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--si-a) 22%, transparent); } .sub-opt[data-k="templates"] { --si-a: #2383E2; } .sub-opt[data-k="videos"] { --si-a: #E03E3E; } .sub-opt[data-k="deals"] { --si-a: #0F7B6C; } :root[data-theme="dark"] .sub-opt[data-k="templates"] { --si-a: #529CCA; } :root[data-theme="dark"] .sub-opt[data-k="videos"] { --si-a: #FF7369; } :root[data-theme="dark"] .sub-opt[data-k="deals"] { --si-a: #4DAB9A; } :root[data-theme="dark"] .sub-ic { --si-a: #529CCA; } .sub-opt span { display: grid; font-size: 14.5px; font-weight: 600; } .sub-opt small { font-size: 12.5px; font-weight: 400; color: var(--ink-3); } .sub-go { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; } .sub-go .btn { flex: none; } .sub-fine { font-size: 12px; color: var(--ink-4); } .sub-msg { margin-top: 10px; font-size: 14px; color: var(--ink-2); } .sub-msg.ok { padding: 12px 14px; border-radius: 12px; background: var(--t-green-bg); color: var(--t-green); } .sub-msg.err { color: var(--t-red); } .sub-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } @media (max-width: 480px) { .sub { place-items: end center; padding: 0; } .sub-card { width: 100%; border-radius: 20px 20px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); } } .key svg { width: 18px; height: 18px; overflow: visible; } /* at night the keys are backlit: lit legends, and light leaking from under each cap */ .keys.lit .key { --top: linear-gradient(#323231, #282827); --skirt: #111; --edge: rgba(255,255,255,.09); --fg: #EDEBE6; --glow: 0 0 0 0 transparent; } .keys.lit .key b { text-shadow: none; } /* Contrast: a half-filled circle and its name; when it's on, the key is Notion blue */ .k-hc svg circle { fill: none; stroke: currentColor; stroke-width: 1.8; } .k-hc .hc-half { fill: currentColor; transform-origin: 10px 10px; transition: transform .6s var(--e-spring); } .k-hc:hover .hc-half { transform: rotate(180deg); } .keys.hc-on .k-hc { --top: linear-gradient(#3A93EC, #2383E2); --skirt: #1764B4; --edge: rgba(20,70,130,.5); --fg: #fff; --glow: 0 0 0 3px rgba(35,131,226,.18); } .keys.lit.hc-on .k-hc { --top: linear-gradient(#7DB9F2, #5BA6EE); --skirt: #2C6EAE; --edge: rgba(150,200,250,.4); --fg: #0C2238; --glow: 0 0 20px -2px rgba(91,166,238,.6); } .keys.lit.hc-on .k-hc b { text-shadow: none; } .keys.hc-on .k-hc .hc-half { transform: rotate(180deg); } /* light and dark: a sun that becomes a crescent moon */ .k-sky { width: 38px; padding: 0; } .k-sky svg { width: 22px; height: 22px; } .sky-disc { fill: #E9A23B; transition: fill .6s; } .sky-rays path { fill: none; stroke: #E9A23B; stroke-width: 2; stroke-linecap: round; transition: opacity .35s calc(var(--i) * 30ms), stroke .6s; } .sky-rays { transform-box: view-box; transform-origin: 50% 50%; transition: transform .8s var(--e-spring); } .sky-bite { transform: translate(9px, -9px); transition: transform .7s cubic-bezier(.65,0,.35,1); } .sky-star { fill: #FFE3A6; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0) rotate(-90deg); transition: opacity .3s, transform .5s var(--e-spring); } .k-sky:hover .sky-rays { transform: rotate(30deg); } .keys.lit .sky-rays { transform: rotate(-120deg) scale(.4); } .keys.lit .sky-rays path { opacity: 0; } .keys.lit .sky-disc { fill: #F4E7C8; } .keys.lit .sky-bite { transform: translate(0, 0); } .keys.lit .sky-star { opacity: 1; transform: none; animation: twinkle 2.6s ease-in-out infinite; } .keys.lit .sky-star.s1 { transition-delay: .45s; } .keys.lit .sky-star.s2 { transition-delay: .6s; animation-delay: -1.3s; } .keys.lit .k-sky:hover svg { animation: sway 1.4s ease-in-out infinite; } @keyframes twinkle { 50% { opacity: .35; transform: scale(.7); } } @keyframes sway { 50% { transform: rotate(-12deg); } } /* what each key does, said under it */ .keys-tip { position: absolute; right: 0; top: calc(100% + 6px); display: grid; gap: 4px; justify-items: end; padding: 8px 11px; border-radius: 9px; white-space: nowrap; background: var(--ink); color: var(--on-ink); box-shadow: var(--sh-block); opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .3s cubic-bezier(.34,1.56,.64,1); pointer-events: none; } .keys-tip b { font: 600 12.5px/1 var(--f-ui); } .keys-tip small { font: 500 11px/1.3 var(--f-ui); opacity: .72; } .k-sky:hover ~ .tip-sky, .k-sky:focus-visible ~ .tip-sky, .keys.tell .tip-sky, .k-hc:hover ~ .tip-hc, .k-hc:focus-visible ~ .tip-hc { opacity: 1; transform: none; } /* Contrast's tip shows what it adds: the same little card, without and then with its edge */ .tip-hc { white-space: normal; width: 230px; justify-items: start; text-align: left; } .hc-demo { display: flex; gap: 10px; margin-bottom: 4px; } .hc-demo i { position: relative; display: grid; align-content: center; gap: 5px; width: 60px; height: 40px; padding: 0 9px; border-radius: 6px; background: var(--paper); box-shadow: 0 3px 8px rgba(0,0,0,.18); } .hc-demo u { display: block; height: 4px; border-radius: 2px; background: var(--line-2); } .hc-demo u + u { width: 60%; } .hc-demo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .hc-demo rect { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 200; stroke-dashoffset: 200; } .k-hc:hover ~ .tip-hc rect, .k-hc:focus-visible ~ .tip-hc rect { animation: hc-draw 1.6s .15s cubic-bezier(.65,0,.35,1) infinite; } @keyframes hc-draw { 0% { stroke-dashoffset: 200; } 55%, 100% { stroke-dashoffset: 0; } } /* --- Contrast: a clear edge round everything (black in light mode, white in dark) -------- */ :root[data-contrast="on"] { --hc: #111110; --ink-3: #3F3D39; --ink-4: #55524D; --line: rgba(17,17,16,.5); --line-2: rgba(17,17,16,.72); --sh-block: 0 0 0 1.5px var(--hc), 0 3px 6px rgba(15,15,15,.06); --sh-lift: 0 0 0 1.5px var(--hc), 0 8px 18px rgba(15,15,15,.1); } :root[data-theme="dark"][data-contrast="on"] { --hc: #FFFFFF; --ink-3: #D9D6D1; --ink-4: #C2BFB9; --line: rgba(255,255,255,.5); --line-2: rgba(255,255,255,.72); --sh-block: 0 0 0 1.5px var(--hc), 0 3px 8px rgba(0,0,0,.35); --sh-lift: 0 0 0 1.5px var(--hc), 0 8px 18px rgba(0,0,0,.45); } :root[data-contrast="on"] :is(.btn, .nav, .tag, .chip, input, textarea, select, .send, .ik-bar, .bt, [class*="-card"], [class*="card-"]) { outline: 1.5px solid var(--hc); outline-offset: 0; } :root[data-contrast="on"] .nav :is(.nav-i, .nav-cta) { outline: 0; } /* a wrapper that only holds cards (the Services page's three) has no edge of its own: each card keeps its own */ :root[data-contrast="on"] div.help-cards, :root[data-contrast="on"] div.cb-card { outline: 0; } /* wrappers: the cards inside them carry their own edge */ /* the change: with View Transitions the new theme turns over in rows (js); without, colours ease */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* the nav and the keys float above anything that skips the snapshot (the Templates covers) */ .nav-wrap { view-transition-name: nav; } .keys { view-transition-name: keys; } html.theming, html.theming * { transition: background-color .55s, color .55s, border-color .55s, box-shadow .55s, fill .55s !important; } @media (max-width: 760px) { .k-sub b { display: none; } .keys { top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; } .key { height: 30px; min-width: 30px; padding: 0 7px; } .k-sky { width: 34px; } .key b { font-size: 11.5px; } } @media (hover: none) { .key:hover:not(.down) { --sk: 3px; } } /* --- Site.menu: a Notion-style menu in place of a