/* Presently, the website. The same rules as the app: ink on white, night paper after sunset, one color that belongs to the hour, New York for time and titles, SF for the rest. sky.js sets data-phase and data-paper on from the visitor's own sunrise and sunset; without it the page stays on midday. */ @font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; } /* Registered so the page can fade from one hour to the next. */ @property --hour { syntax: ""; inherits: true; initial-value: #1E7BFF; } @property --hour-text { syntax: ""; inherits: true; initial-value: #1E7BFF; } @property --on-hour { syntax: ""; inherits: true; initial-value: #FFFFFF; } @property --paper { syntax: ""; inherits: true; initial-value: #FFFFFF; } @property --ink { syntax: ""; inherits: true; initial-value: #17152E; } @property --quiet { syntax: ""; inherits: true; initial-value: #6A6591; } :root { /* Ink.swift */ --ink: #17152E; --quiet: #6A6591; --paper: #FFFFFF; --hair: rgba(23, 21, 46, 0.10); /* Sky.swift, in the logo's order */ --night: #3F3BD1; --dawn: #E84F7A; --sunrise: #F7622D; --morning: #EC9600; --midday: #1E7BFF; --golden: #F58018; --sunset: #EE435F; --dusk: #7F4FF0; --hour: var(--midday); --hour-text: var(--midday); --on-hour: #FFFFFF; --serif: ui-serif, "Source Serif 4", Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif; /* Type: five sizes. The two headline sizes and the large text grow with the screen, from a 390 px phone to a 1440 px laptop. h2 is half of the display size; body text is 18 on a laptop, 17 on a phone. */ --t-display: clamp(46px, 30.4px + 4vw, 88px); --t-h2: clamp(30px, 24.8px + 1.33vw, 44px); --t-lg: clamp(19px, 17.9px + 0.29vw, 22px); --t-body: clamp(17px, 16.6px + 0.1vw, 18px); --t-sm: 15px; /* Space: one scale on an 8 px grid (4 for the smallest steps). Inside a group the space is small; between groups it at least doubles. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* Between sections, and between a block of text and its picture. */ --section: clamp(96px, 60px + 7vw, 160px); --to-media: clamp(48px, 42.4px + 1.52vw, 64px); /* Layout: everything sits inside one width, 1040, with side margins that grow with the window (20 on a phone, up to 80 on a laptop), so nothing runs to the edge. The header, the words and every picture share those edges. Centered paragraphs share a narrower width, about 65 characters. */ --content: 1040px; --gutter: clamp(20px, 5vw, 80px); --text: 620px; /* Depth: two shadows, one for a whole screen and one for a card on it. */ --shadow-lg: 0 0 0 1px var(--hair), 0 32px 80px -32px rgba(23, 21, 46, .35); --shadow-md: 0 20px 48px -24px rgba(23, 21, 46, .36); color-scheme: light; transition: --hour .7s ease, --hour-text .7s ease, --on-hour .7s ease, --paper .7s ease, --ink .7s ease, --quiet .7s ease; } /* Each hour: the fill, the color for text on day paper (gold and amber darkened until they read), and what sits on the fill. */ :root[data-phase="night"] { --hour: var(--night); --hour-text: var(--night); } :root[data-phase="dawn"] { --hour: var(--dawn); --hour-text: var(--dawn); } :root[data-phase="sunrise"] { --hour: var(--sunrise); --hour-text: var(--sunrise); } :root[data-phase="morning"] { --hour: var(--morning); --hour-text: #B86C00; --on-hour: var(--ink-fixed, #17152E); } :root[data-phase="midday"] { --hour: var(--midday); --hour-text: var(--midday); } :root[data-phase="golden"] { --hour: var(--golden); --hour-text: #BF5C0E; --on-hour: var(--ink-fixed, #17152E); } :root[data-phase="sunset"] { --hour: var(--sunset); --hour-text: var(--sunset); } :root[data-phase="dusk"] { --hour: var(--dusk); --hour-text: var(--dusk); } /* Night paper. The hour as text is lifted toward white so it reads. */ :root[data-paper="night"] { --paper: #121026; --ink: #F2F0FF; --quiet: #A7A2CF; --hair: rgba(255, 255, 255, 0.12); --shadow-lg: 0 0 0 1px var(--hair), 0 32px 80px -32px rgba(0, 0, 0, .7); --shadow-md: 0 20px 48px -24px rgba(0, 0, 0, .8); color-scheme: dark; } :root[data-paper="night"][data-phase="night"] { --hour-text: #908DE4; } :root[data-paper="night"][data-phase="dawn"] { --hour-text: #F299B2; } :root[data-paper="night"][data-phase="sunrise"] { --hour-text: #FAA485; } :root[data-paper="night"][data-phase="morning"] { --hour-text: #F4C26B; } :root[data-paper="night"][data-phase="midday"] { --hour-text: #7CB2FF; } :root[data-paper="night"][data-phase="golden"] { --hour-text: #F9B579; } :root[data-paper="night"][data-phase="sunset"] { --hour-text: #F592A2; } :root[data-paper="night"][data-phase="dusk"] { --hour-text: #B599F9; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } ::selection { background: color-mix(in srgb, var(--hour) 28%, transparent); } :focus-visible { outline: 2px solid var(--hour-text); outline-offset: 3px; border-radius: 6px; } .wrap { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- The logo: the day as eight stripes ---------- */ .mark { display: inline-flex; width: 22px; height: 20px; border-radius: 5px; overflow: hidden; flex: none; } .mark i { flex: 1; transition: opacity .7s ease; } .mark i:nth-child(1) { background: var(--night); } .mark i:nth-child(2) { background: var(--dawn); } .mark i:nth-child(3) { background: var(--sunrise); } .mark i:nth-child(4) { background: var(--morning); } .mark i:nth-child(5) { background: var(--midday); } .mark i:nth-child(6) { background: var(--golden); } .mark i:nth-child(7) { background: var(--sunset); } .mark i:nth-child(8) { background: var(--dusk); } /* The stripes already behind you fade, like the menu bar glyph. */ .mark i.done { opacity: .32; } /* ---------- Top bar ---------- */ .top { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; } .top nav { display: flex; align-items: center; gap: var(--s-5); font-size: var(--t-sm); } .top nav a { text-decoration: none; color: var(--quiet); } .top nav a:hover { color: var(--ink); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 var(--s-5); border-radius: 999px; border: 0; background: var(--hour); color: var(--on-hour); font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .15s ease, filter .15s ease; } .btn:hover { filter: brightness(1.06); } .btn:active { transform: scale(.98); } .btn.small { height: 36px; padding: 0 var(--s-4); font-size: var(--t-sm); } .btn.ghost { background: transparent; color: var(--hour-text); box-shadow: inset 0 0 0 1.5px var(--hour); } .top nav .btn { color: var(--on-hour); } /* ---------- Type ---------- */ h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.015em; text-wrap: balance; } .lead, .body { text-wrap: balance; } /* Big type sits tight, small type breathes: line height and tracking loosen as the size comes down. */ h1 { font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.02em; } h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.015em; } h3 { font-size: var(--t-lg); line-height: 1.3; letter-spacing: -0.005em; } h1 em, h2 em { font-style: italic; color: var(--hour-text); } .eyebrow { display: block; margin: 0 0 16px; font: 600 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--hour-text); } .lead { font-size: var(--t-lg); line-height: 1.5; color: var(--quiet); margin: var(--s-5) 0 0; } p { margin: 0; } .body { color: var(--quiet); font-size: var(--t-body); margin-top: var(--s-4); max-width: var(--text); } .body strong, .lead strong { color: var(--ink); font-weight: 500; } kbd { font: 500 .9em var(--sans); padding: 1px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); } /* ---------- Hero ---------- */ .hero { text-align: center; padding: clamp(48px, 30.2px + 4.57vw, 96px) 0 0; } .hero .lead { max-width: var(--text); margin-left: auto; margin-right: auto; } .cta { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-6); flex-wrap: wrap; } .cta-note { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--quiet); text-wrap: balance; } /* The screen: a menu bar with a notch, the island grown out of it, and the week window under both. */ .screen { position: relative; margin: var(--to-media) auto 0; border-radius: 18px; overflow: hidden; background: var(--paper); box-shadow: var(--shadow-lg); } .menubar { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 18px; height: 34px; padding: 0 18px; font-size: 13.5px; color: var(--ink); border-bottom: 1px solid var(--hair); background: var(--paper); } .menubar .left { margin-right: auto; display: flex; gap: 20px; } .menubar .left b { font-weight: 700; } .menubar .left span { color: var(--ink); opacity: .85; } .menubar .item { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; } /* The Join pill the app adds beside its icon while a call is starting. */ .pill { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 6px; background: var(--hour); color: var(--on-hour); font: 600 12.5px/1 var(--sans); opacity: 0; transform: scale(.8); transition: opacity .2s ease, transform .45s cubic-bezier(.2, 1.3, .35, 1); } .screen.island-open .pill, .pill.on { opacity: 1; transform: none; } .menubar .item .mark { width: 17px; height: 14px; border-radius: 3.5px; } .notch { position: absolute; left: 50%; top: 0; width: 190px; height: 34px; transform: translateX(-50%); background: #000; border-radius: 0 0 11px 11px; z-index: 3; } /* The desktop under the menu bar, tinted by the hour, with the week window standing on it. */ .desk { padding: 76px 56px 0; background: color-mix(in srgb, var(--hour) 11%, var(--paper)); } .window { position: relative; display: block; width: 100%; aspect-ratio: 1440 / 900; border-radius: 12px 12px 0 0; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px var(--hair), var(--shadow-md); } .window img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .6s ease; } .window img:not(.on) { opacity: 0; } /* The window's three buttons, where the render leaves room for them. */ .lights { position: absolute; left: .97%; top: 1.5%; display: flex; justify-content: space-between; width: 3.62%; z-index: 2; } .lights i { flex: none; width: 23%; aspect-ratio: 1; border-radius: 50%; } .lights i:nth-child(1) { background: #FF5F57; } .lights i:nth-child(2) { background: #FEBC2E; } .lights i:nth-child(3) { background: #28C840; } /* ---------- The island ---------- */ .island-host { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 4; } .island { position: relative; display: flex; align-items: center; gap: 12px; min-width: 200px; padding: 40px 10px 10px 17px; background: #000; color: #fff; border-radius: 0 0 22px 22px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset; transform-origin: 50% 0; transform: scale(.5, .35); opacity: 0; transition: transform .62s cubic-bezier(.2, 1.25, .35, 1), opacity .2s ease; white-space: nowrap; text-align: left; } /* The flares where the island meets the top of the screen. */ .island::before, .island::after { content: ""; position: absolute; top: 0; width: 11px; height: 11px; } .island::before { left: -11px; background: radial-gradient(circle at 0 100%, transparent 10.5px, #000 11px); } .island::after { right: -11px; background: radial-gradient(circle at 100% 100%, transparent 10.5px, #000 11px); } .island.open { transform: none; opacity: 1; } .island > * { opacity: 0; transition: opacity .3s ease .18s; } .island.open > * { opacity: 1; } .island .mark { width: 19px; height: 17px; border-radius: 4px; } .island .words { display: flex; flex-direction: column; gap: 1px; margin-right: 18px; } .island .title { font: 400 16px/1.2 var(--serif); } .island .sub { font-size: 12px; color: rgba(255, 255, 255, .66); font-variant-numeric: tabular-nums; } .island .later { background: none; border: 0; padding: 6px 8px; margin-left: auto; font: 13px var(--sans); color: rgba(255, 255, 255, .72); cursor: pointer; } .island .later:hover { color: #fff; } .island .go { border: 0; cursor: pointer; padding: 7px 15px; border-radius: 999px; background: var(--hour); color: var(--on-hour); font: 600 13.5px/1.1 var(--sans); text-decoration: none; } /* ---------- Sections ---------- */ section { padding: var(--section) 0 0; } .center { text-align: center; } .center .body { margin-left: auto; margin-right: auto; } /* ---------- The color of the hour ---------- */ .hours { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); align-items: center; } /* Words across six columns, the panel across five, one column of air. */ .hours > .copy { grid-column: 1 / span 6; } .hours > .panel-stage { grid-column: 8 / span 5; } .now-line { margin: 0 0 var(--s-7); font: 400 var(--t-lg)/1.35 var(--serif); color: var(--ink); } .now-line .phase { font-style: italic; color: var(--hour-text); } .ribbon-wrap { margin-top: var(--s-7); user-select: none; -webkit-user-select: none; } .ribbon { position: relative; height: 56px; border-radius: 14px; overflow: visible; cursor: ew-resize; touch-action: none; } .ribbon .bands { position: absolute; inset: 0; display: flex; border-radius: 14px; overflow: hidden; } .ribbon .bands i { height: 100%; transition: flex-grow .9s cubic-bezier(.65, 0, .35, 1); } .ribbon .bands i + i { box-shadow: -2px 0 0 var(--paper); } .ribbon .thumb { position: absolute; top: -8px; bottom: -8px; width: 4px; margin-left: -2px; border-radius: 4px; background: var(--ink); box-shadow: 0 0 0 3px var(--paper); pointer-events: none; } .ribbon .thumb::after { content: attr(data-time); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--hour-text); white-space: nowrap; } .ribbon-scale { display: flex; justify-content: space-between; margin-top: var(--s-3); font-size: var(--t-sm); color: var(--quiet); font-variant-numeric: tabular-nums; } .ribbon-help { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-5); font-size: var(--t-sm); color: var(--quiet); min-height: 36px; } .ribbon-help button[hidden] { display: none; } .panel-stage { position: relative; display: grid; justify-items: center; } .panel-stage img { grid-area: 1 / 1; width: min(360px, 100%); border-radius: 24px; box-shadow: var(--shadow-md); transition: opacity .35s ease; } .panel-stage img:not(.on) { opacity: 0; } /* ---------- Footer ---------- */ footer { margin-top: var(--section); padding: var(--s-6) 0 var(--s-7); border-top: 1px solid var(--hair); font-size: var(--t-sm); color: var(--quiet); } footer .row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; } footer nav { display: flex; gap: var(--s-5); flex-wrap: wrap; } footer a { text-decoration: none; } footer a:hover { color: var(--ink); } footer .sun { display: inline-flex; align-items: center; gap: 8px; } footer .sun i { width: 9px; height: 9px; border-radius: 50%; background: var(--hour); } /* ---------- Plain pages (privacy, support) ---------- */ .doc { max-width: calc(var(--text) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s-8) var(--gutter) 0; } .doc h1 { font-size: var(--t-h2); } .doc .updated { margin-top: var(--s-3); color: var(--quiet); font-size: var(--t-sm); } /* A document needs one step between the title and the text: 28. */ .doc h2 { font-size: 28px; line-height: 1.2; margin: var(--s-7) 0 var(--s-3); } .doc h3 { font-size: var(--t-lg); margin: var(--s-6) 0 var(--s-2); } .doc p, .doc li { color: var(--quiet); font-size: var(--t-body); } .doc p + p { margin-top: var(--s-4); } .doc ul { padding-left: var(--s-5); margin: var(--s-3) 0; } .doc li + li { margin-top: var(--s-2); } .doc strong { color: var(--ink); font-weight: 600; } .doc a { color: var(--hour-text); text-underline-offset: 3px; } .doc .intro { font-size: var(--t-lg); margin-top: var(--s-5); color: var(--quiet); } .doc table { width: 100%; border-collapse: collapse; margin: var(--s-4) 0; font-size: var(--t-sm); } .doc th, .doc td { text-align: left; padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--hair); vertical-align: top; color: var(--quiet); } .doc th { color: var(--ink); font-weight: 600; } .get .mark.big { width: 64px; height: 58px; border-radius: 14px; margin: 0 auto var(--s-6); } .get .cta { margin-top: var(--s-7); } .get .body { text-wrap: balance; } .get .body a { color: var(--hour-text); text-underline-offset: 3px; white-space: nowrap; } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; } .reveal.seen { opacity: 1; transform: none; } /* ?at= previews: a still picture, nothing mid-animation. */ .still, .still * { transition: none !important; } @media (prefers-reduced-motion: reduce) { :root { transition: none; } html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .island, .island > * { transition: none; } .enter, .hero h1 .line { animation: none; } .cap, .panel, .panel img, .widget img, .palette, .cover, .pill, .focus, .tour-caps p, .ribbon, .ribbon .bands i, .ribbon .thumb, .get .mark.big i { transition: none !important; } .caret { animation: none; } } /* ---------- Narrower screens ---------- */ @media (max-width: 980px) { .hours { row-gap: var(--to-media); } .hours > .copy, .hours > .panel-stage { grid-column: 1 / -1; } } @media (max-width: 640px) { .top { height: 64px; } .top nav { gap: var(--s-4); } .top nav .hide-sm { display: none; } .screen { border-radius: 12px; } .menubar { height: 26px; font-size: 11px; padding: 0 10px; gap: 10px; } .menubar .left span, .menubar .clock { display: none; } .notch { width: 96px; height: 26px; border-radius: 0 0 8px 8px; } .hero .island-host { transform: translateX(-50%) scale(.62); transform-origin: 50% 0; } .desk { padding: var(--s-7) var(--s-4) 0; } .lights { display: none; } } /* ---------- Day and night versions of one thing ---------- */ .night-only { display: none; } :root[data-paper="night"] .night-only { display: inline; } :root[data-paper="night"] .day-only { display: none; } /* ---------- The hero arrives ---------- */ .hero h1 .line { display: inline-block; text-wrap: balance; animation: rise 1s cubic-bezier(.2, .7, .2, 1) both; } .hero h1 em.line { animation-delay: 90ms; } .enter { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0ms); } .enter.rise { animation-name: rise-far; animation-duration: 1.3s; } @keyframes rise { from { opacity: 0; transform: translateY(16px); } } @keyframes rise-far { from { opacity: 0; transform: translateY(56px); } } .still .enter, .still .hero h1 .line { animation: none; } /* ---------- A day, as you scroll ---------- The track is tall; the pin stays put while the track scrolls past it. story.js sets --chapters-h (how much scrolling the day takes) and --s (the Mac's scale), and moves the scene. */ .day { padding: 0; margin-top: var(--section); } .day-track { position: relative; height: calc(100vh + var(--chapters-h, 400vh)); height: calc(100svh + var(--chapters-h, 400svh)); } .day-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(var(--s-5), 4.5vh, var(--s-7)); overflow: hidden; } .day-copy { text-align: center; } .day-clock { margin: 0 0 var(--s-3); font: 400 var(--t-lg)/1 var(--serif); font-variant-numeric: tabular-nums; color: var(--hour-text); } .day-clock .day-when { font-style: italic; color: var(--quiet); } .caps { display: grid; } .cap { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .7s cubic-bezier(.2, .7, .2, 1); } .cap.on { opacity: 1; transform: none; transition-delay: .08s; } .cap p { margin: var(--s-4) auto 0; max-width: var(--text); color: var(--quiet); text-wrap: balance; } /* The caption block keeps its height while a long run plays without words. */ .caps { min-height: 7.4em; } .mac-fit { position: relative; height: calc(var(--mac-h, 540) * var(--s, 1) * 1px); } .mac { position: absolute; left: 50%; top: 0; width: 1040px; height: 540px; transform: translateX(-50%) scale(var(--s, 1)); transform-origin: 50% 0; border-radius: 18px; overflow: hidden; background: var(--paper); box-shadow: var(--shadow-lg); } .mac-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 14px; height: 32px; padding: 0 16px; font-size: 13.5px; color: var(--ink); background: var(--paper); border-bottom: 1px solid var(--hair); font-variant-numeric: tabular-nums; } .mac-bar .left { margin-right: auto; display: flex; gap: 20px; } .mac-bar .left b { font-weight: 700; } .mac-bar .item { display: inline-flex; align-items: center; gap: 6px; min-width: 17px; } .mac-bar .item .mark { width: 17px; height: 14px; border-radius: 3.5px; } .mac-bar .words:empty { display: none; } .mac-bar .words.bold { font-weight: 600; } .mac-bar .pill { margin-right: -6px; } .mac .notch { position: absolute; left: 50%; top: 0; z-index: 3; width: 180px; height: 32px; transform: translateX(-50%); background: #000; border-radius: 0 0 10px 10px; } .mac-desk { position: absolute; inset: 32px 0 0 0; background: color-mix(in srgb, var(--hour) 11%, var(--paper)); } /* The widget on the desktop, and the panel under the menu bar. */ .widget { position: absolute; left: 36px; top: 74px; width: 364px; height: 170px; transition: opacity .3s ease; } .mac[data-scene="type"] .widget { opacity: .45; } .widget img, .panel img { position: absolute; left: 0; top: 0; width: 100%; transition: opacity .3s ease; } .widget img { height: 100%; border-radius: 23px; box-shadow: var(--shadow-md); } .widget img:not(.on), .panel img:not(.on) { opacity: 0; } .panel { position: absolute; right: 28px; top: 8px; width: 360px; height: 440px; transform-origin: 80% 0; transition: opacity .22s ease, transform .3s cubic-bezier(.2, .7, .2, 1); } .panel img { border-radius: 24px; box-shadow: var(--shadow-md); } .mac:not([data-scene="panel"]):not([data-scene="night"]) .panel { opacity: 0; transform: translateY(-6px) scale(.985); } /* The islands grow out of the notch, one per moment. */ .mac .island-host { position: absolute; left: 50%; top: 0; width: 0; z-index: 4; } .mac .island { position: absolute; left: 0; top: 0; translate: -50% 0; padding-top: 38px; } .mac[data-scene="call"] .island[data-island="call"], .mac[data-scene="leave"] .island[data-island="leave"] { transform: none; opacity: 1; } .mac[data-scene="call"] .island[data-island="call"] > *, .mac[data-scene="leave"] .island[data-island="leave"] > * { opacity: 1; } .mac .island .later { background: none; padding: 6px 8px; margin-left: auto; font-size: 13px; color: rgba(255, 255, 255, .72); } /* Add an event, over everything, the way it opens from any app. */ .palette { position: absolute; left: 50%; top: 58px; width: 660px; translate: -50% 0; opacity: 0; transform: scale(.965); transition: opacity .2s ease, transform .3s cubic-bezier(.2, .7, .2, 1); } .mac[data-scene="type"] .palette { opacity: 1; transform: none; } .palette .card { position: relative; filter: drop-shadow(0 24px 40px rgba(23, 21, 46, .22)); } .palette img { display: block; width: 100%; height: auto; } .cover { position: absolute; left: calc(var(--x) / 1320 * 100%); top: calc(var(--y) / 760 * 100%); width: calc(var(--w) / 1320 * 100%); height: calc(var(--h) / 760 * 100%); background: #FFFFFF; transition: opacity .35s ease; } .cover.off { opacity: 0; } .palette.instant .cover { transition: none; } .caret { position: absolute; left: calc(var(--cx, 73) / 1320 * 100%); top: calc(116 / 760 * 100%); width: calc(3 / 1320 * 100%); height: calc(66 / 760 * 100%); border-radius: 2px; background: var(--midday); } .caret.idle { animation: blink 1.05s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* The narrow Mac, for phones: no widget, the panel in the middle. */ .mac.narrow { width: 400px; height: 560px; } .mac.narrow .mac-bar { gap: 10px; padding: 0 12px; font-size: 12.5px; } .mac.narrow .mac-bar .left, .mac.narrow .widget { display: none; } .mac.narrow .notch { width: 104px; } .mac.narrow .island-host { transform: scale(.84); transform-origin: 50% 0; } .mac.narrow .panel { right: 20px; } /* On the narrow Mac the island covers the menu bar's right side. */ .mac.narrow .mac-bar > :not(.left) { transition: opacity .2s ease; } .mac.narrow[data-scene="call"] .mac-bar > :not(.left), .mac.narrow[data-scene="leave"] .mac-bar > :not(.left) { opacity: 0; } .mac.narrow .palette { width: 384px; top: 70px; } /* ---------- The week, read for you ---------- */ .week h2 { margin-bottom: var(--s-7); } .tour .window { aspect-ratio: 1440 / 900; border-radius: 12px; /* The window, its words and the dots fit on one screen. */ width: min(100%, calc((100svh - 180px) * 1.6)); margin: 0 auto; } /* The part being talked about stays sharp; the rest fades to paper. */ .focus { position: absolute; left: var(--fx, 0%); top: var(--fy, 0%); width: var(--fw, 100%); height: var(--fh, 100%); border-radius: 10px; box-shadow: 0 0 0 200vmax color-mix(in srgb, var(--paper) 66%, transparent); pointer-events: none; transition: left .95s cubic-bezier(.65, 0, .35, 1), top .95s cubic-bezier(.65, 0, .35, 1), width .95s cubic-bezier(.65, 0, .35, 1), height .95s cubic-bezier(.65, 0, .35, 1), box-shadow .6s ease; } .focus.rest { box-shadow: 0 0 0 200vmax transparent; } .tour-caps { display: grid; margin-top: var(--s-5); text-align: center; } .tour-caps p { grid-area: 1 / 1; font: 400 var(--t-lg)/1.35 var(--serif); color: var(--ink); text-wrap: balance; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .6s cubic-bezier(.2, .7, .2, 1); } .tour-caps p.on { opacity: 1; transform: none; transition-delay: .25s; } .tour-dots { display: flex; justify-content: center; gap: var(--s-2); margin-top: var(--s-4); } .tour-dots button { width: 34px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; } .tour-dots i { display: block; height: 3px; border-radius: 2px; background: var(--hair); overflow: hidden; } .tour-dots i::after { content: ""; display: block; height: 100%; width: 0; background: var(--hour); } .tour-dots button.done i::after { width: 100%; } .tour-dots button.on i::after { animation: fill var(--dwell, 4200ms) linear forwards; } .tour.manual .tour-dots button.on i::after { animation: none; width: 100%; } @keyframes fill { to { width: 100%; } } /* ---------- The logo opens into the day ---------- */ .ribbon { width: 100%; transition: width 1.05s cubic-bezier(.65, 0, .35, 1); } .ribbon.folded { width: 64px; } .ribbon.folded .bands i + i { box-shadow: none; } .ribbon-wrap.folding .thumb, .ribbon-wrap.folding .ribbon-scale, .ribbon-wrap.folding .now-line { opacity: 0; } .ribbon .thumb, .ribbon-scale, .now-line { transition: opacity .5s ease; } .ribbon.arriving .thumb { transition: opacity .5s ease, left 1.1s cubic-bezier(.2, .7, .2, 1); } /* ---------- The close ---------- */ .facts { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 0; margin: var(--s-6) auto 0; padding: 0; font-size: var(--t-sm); color: var(--quiet); } .facts li { padding: 0 var(--s-5); text-wrap: balance; } .facts li + li { box-shadow: -1px 0 0 var(--hair); } .facts b { color: var(--ink); font-weight: 600; } /* The mark draws itself, a stripe at a time, the way the day goes. */ .get .mark.big i { transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.2, .7, .2, 1); } .get .seen .mark.big i { transform: none; } .get .mark.big i:nth-child(2) { transition-delay: 60ms; } .get .mark.big i:nth-child(3) { transition-delay: 120ms; } .get .mark.big i:nth-child(4) { transition-delay: 180ms; } .get .mark.big i:nth-child(5) { transition-delay: 240ms; } .get .mark.big i:nth-child(6) { transition-delay: 300ms; } .get .mark.big i:nth-child(7) { transition-delay: 360ms; } .get .mark.big i:nth-child(8) { transition-delay: 420ms; } @media (max-width: 640px) { .menubar .pill { display: none; } .facts { flex-direction: column; align-items: center; } .facts li + li { box-shadow: none; } }