/* Tokens first. The shell's slot is the one that must survive every redesign: inside an older Second Draft shell a 48px round button floats in the bottom-right corner, 16px in from each edge, above everything. This app draws its own note trigger instead, so second-draft-note.css sets --shell-slot to 0 and puts it back only inside such a shell. Keep clear of the corner with var(--shell-slot), never a fixed 80px, and the space is there exactly when the button is. */ :root { --shell-switcher-size: 48px; --shell-switcher-inset: 16px; --shell-switcher-gap: 16px; --shell-slot: 80px; /* inset + size + gap: the corner the shell owns */ /* Calm: spacious, unhurried and clear. */ --ink: #2b2926; --quiet: #67625d; --paper: #ffffff; /* also theme-color in index.html and the manifest */ --card: #ffffff; --line: #e7e3de; /* hairlines */ --ring: #cfc8c1; /* an open place */ --quiet-edge: #bdb5ad; /* the edge of a quieter button */ --accent: #8a5a44; /* clay */ --wash: #f7f2ef; /* clay, washed */ --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; --round: 50%; --corner: 2px; --small: 13px; --gutter: 20px; /* the page's side padding, and the bar's */ --column: 600px; /* the content's column, and the bar's middle */ --rest: 56px; /* the pause between sections */ } * { box-sizing: border-box; } html, body { margin: 0; background: var(--paper); color: var(--ink); font: 300 15px/1.6 var(--font); letter-spacing: .005em; -webkit-font-smoothing: antialiased; } body { min-height: 100dvh; } /* The shell gives the page the whole window, behind the clock at the top and the gesture bar at the bottom: the background is ours to cover, the content ours to keep clear of both. The shell sets --shell-safe-* on before the first layout, so nothing moves afterwards; env() answers in a plain browser, where the variables are absent. See docs/shell-contract.md. The top bar carries the top inset, the page below it the rest. */ .page { max-width: calc(var(--column) + 2 * var(--gutter)); margin: 0 auto; padding-top: 8px; padding-right: calc(var(--gutter) + max(var(--shell-safe-right, 0px), env(safe-area-inset-right, 0px))); padding-bottom: calc(max(var(--shell-safe-bottom, 0px), env(safe-area-inset-bottom, 0px)) + var(--shell-slot)); padding-left: calc(var(--gutter) + max(var(--shell-safe-left, 0px), env(safe-area-inset-left, 0px))); } /* The app's bar: the width of the window, in the flow of the page. On a phone it is the heading with the note trigger at its end, as the page's column is. On a wide screen the heading keeps to the content's column and the trigger goes to the far end, the top-right corner of the screen — never left floating in the middle of it. */ .top-bar { /* The app's navigation stays in reach however far the page scrolls, and the note trigger with it. */ position: sticky; top: 0; z-index: 2; background: var(--paper); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; margin: 0; padding-bottom: 6px; padding-top: calc(10px + max(var(--shell-safe-top, 0px), env(safe-area-inset-top, 0px))); padding-right: calc(var(--gutter) + max(var(--shell-safe-right, 0px), env(safe-area-inset-right, 0px))); padding-left: calc(var(--gutter) + max(var(--shell-safe-left, 0px), env(safe-area-inset-left, 0px))); } /* The name and the navigation share a line when they fit, and the navigation drops below the name when they do not. */ .bar-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; } .top-bar .page-heading { margin: 0; } @media (min-width: 760px) { /* Three columns: the middle one is the page's column, less its padding. */ .top-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--column)) minmax(0, 1fr); gap: 0; } .top-bar .bar-main { grid-column: 2; justify-content: space-between; } .top-bar .top-actions { grid-column: 3; justify-self: end; } } .page-heading { font: 400 19px/1.3 var(--serif); letter-spacing: .01em; margin: 0 0 8px; } .tabs { display: flex; gap: 20px; font-size: var(--small); color: var(--quiet); } .tabs a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; } .tabs a[hidden] { display: none; } .tabs a[aria-current="page"] { color: var(--ink); } .tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; border-bottom: 1px solid var(--ink); } .tabs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .badge { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-left: 6px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--paper); font-size: 10px; font-weight: 500; line-height: 1; } .badge[hidden] { display: none; } /* The note trigger: the app's own control, in the app's own colours, that opens Second Draft's note panel. It sits with the app's navigation — here at the end of the top bar, which stays; in an app with a bottom tab bar, in that bar — never over its content. 44px at least, and the mark keeps both of its shapes. second-draft-note.js fills in the mark and hides it from anyone who may not leave a note. */ .note-trigger { appearance: none; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--corner); background: var(--card); color: var(--accent); } /* The bar's end: the install control, when there is one, then the note trigger. */ .top-actions { display: flex; flex: none; align-items: center; gap: 8px; } .install-app { appearance: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--corner); background: var(--card); color: var(--accent); font: inherit; font-size: var(--small); letter-spacing: .03em; } .install-app:focus-visible, .note-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .quiet { color: var(--quiet); margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } p, h2, h3, ul, ol { margin: 0; } /* Messages that are not the page: keep out of the shell's 80×80 corner. */ #toast { position: fixed; left: 16px; right: var(--shell-slot); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--shell-switcher-inset)); pointer-events: none; } #toast:empty { display: none; } #toast > * { background: var(--ink); color: var(--paper); border-radius: var(--corner); padding: 12px 16px; font-size: 14px; max-width: 560px; } /* ─── The week ─────────────────────────────────────────────────────────── */ .pane[hidden] { display: none; } .week-title { margin-top: 40px; font: 300 46px/1.02 var(--serif); letter-spacing: -.01em; } .range { margin-top: 12px; font-size: var(--small); color: var(--quiet); letter-spacing: .02em; } /* The week as one hairline, a tick for each day. */ .week { margin-top: var(--rest); } .week ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); position: relative; } .week ol::before { content: ""; position: absolute; left: 0; right: 0; top: 28px; border-top: 1px solid var(--line); } .week a { display: flex; flex-direction: column; align-items: flex-start; min-height: 44px; padding-bottom: 4px; color: inherit; text-decoration: none; } .week .d { font-size: 11px; color: var(--quiet); letter-spacing: .08em; height: 20px; } .week .tick { width: 1px; height: 9px; background: var(--line); margin: 4px 0 0 3px; } .week .n { margin-top: 10px; font: 400 20px/1 var(--serif); color: var(--quiet); } .week li.on .tick { height: 17px; margin-top: 0; background: var(--accent); } .week li.on .d, .week li.on .n { color: var(--accent); } .week li.none { opacity: .45; } /* A place opened: said once, plainly, with the way to take it. */ .offers:empty { display: none; } .note { margin-top: var(--rest); padding: 18px 0 18px 20px; border-left: 1px solid var(--accent); font-size: 14px; line-height: 1.65; } .note + .note { margin-top: 20px; } .note strong { font-weight: 400; color: var(--accent); } .note span { display: block; margin-top: 4px; color: var(--quiet); font-size: var(--small); } .note .act { margin-top: 14px; } .day { margin-top: 64px; font-size: 12px; font-weight: 400; color: var(--quiet); letter-spacing: .12em; text-transform: uppercase; scroll-margin-top: 90px; } .classes { list-style: none; padding: 0; margin-top: 16px; border-top: 1px solid var(--line); } .classes > li { padding: 28px 0 32px; border-bottom: 1px solid var(--line); } .row { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; } .row > .act { grid-column: 2; } .time { font: 400 20px/1.3 var(--serif); } .name { font: 400 24px/1.2 var(--serif); letter-spacing: .002em; } .meta { margin-top: 4px; font-size: var(--small); color: var(--quiet); } /* Places, one open ring each. */ .places { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; } .places i { width: 7px; height: 7px; border-radius: var(--round); border: 1px solid var(--ring); display: block; } .places i.t { background: var(--ink); border-color: var(--ink); opacity: .55; } .places i.you { background: var(--accent); border-color: var(--accent); opacity: 1; } .count { margin-top: 8px; font-size: var(--small); color: var(--quiet); } .count em { font-style: normal; color: var(--accent); } .names { margin-top: 10px; font-size: 12px; color: var(--quiet); line-height: 1.7; } .names b { font-weight: 400; color: var(--ink); } .act { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; } .btn { appearance: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--accent); border-radius: var(--corner); background: transparent; color: var(--accent); font-size: var(--small); font-weight: 400; letter-spacing: .03em; cursor: pointer; } .btn.quiet { border-color: var(--quiet-edge); color: var(--ink); } .btn.fill { background: var(--accent); color: var(--paper); } .btn:disabled { opacity: .5; cursor: default; } .link { appearance: none; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font-size: var(--small); color: var(--quiet); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 6px; } .yours { font-size: var(--small); color: var(--accent); } .btn:focus-visible, .link:focus-visible, .week a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .empty { margin-top: var(--rest); color: var(--quiet); font-size: 14px; max-width: 32em; } .wave { display: block; margin-top: 88px; color: var(--accent); opacity: .55; } .footnote { margin-top: 20px; font-size: var(--small); color: var(--quiet); line-height: 1.7; max-width: 300px; } /* ─── My places ────────────────────────────────────────────────────────── */ .side-title { margin-top: 40px; font: 300 36px/1.05 var(--serif); letter-spacing: -.01em; } .who { margin-top: 12px; font-size: var(--small); color: var(--quiet); } .who b { font-weight: 400; color: var(--ink); } .my-list, .message-list { list-style: none; padding: 0; margin-top: 16px; border-top: 1px solid var(--line); } .my-list:empty, .message-list:empty { display: none; } .my-list > li { padding: 20px 0 22px; border-bottom: 1px solid var(--line); } .my-list .when { font-size: 12px; color: var(--quiet); letter-spacing: .08em; text-transform: uppercase; } .my-list .name { font-size: 22px; margin-top: 4px; } .my-list .act { margin-top: 12px; } .message-list > li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.6; } .message-list time { display: block; margin-top: 4px; font-size: 12px; color: var(--quiet); } .message-list .new::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: var(--round); background: var(--accent); vertical-align: 1px; } .reminders, .messages { margin-top: var(--rest); } .reminders .day, .messages .day { margin-top: 0; } .reminders p { margin-top: 12px; font-size: var(--small); color: var(--quiet); line-height: 1.7; } .reminders .btn { margin-top: 16px; } html[data-second-draft-reminders="on"] .when-off, html:not([data-second-draft-reminders="on"]) .when-on { display: none; } html[data-second-draft-reminders="on"] .reminders-off, html[data-second-draft-reminders="off"] .reminders-off, html[data-second-draft-reminders="install"] .reminders-off { display: none; } html:not([data-second-draft-reminders="on"]):not([data-second-draft-reminders="off"]):not([data-second-draft-reminders="install"]) .reminders-about { display: none; } /* ─── The timetable, the studio's ──────────────────────────────────────── */ .timetable-list .classes > li { padding: 20px 0 22px; } .timetable-list .act { margin-top: 12px; } .places-edit { display: flex; align-items: center; gap: 10px; font-size: var(--small); color: var(--quiet); } .places-edit input { width: 72px; } .add-class { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .add-class .day, .add-class .wide-field, .add-class .act { grid-column: 1 / -1; } .add-class .day { margin-bottom: 0; } .field { display: grid; gap: 6px; font-size: 12px; color: var(--quiet); letter-spacing: .04em; } .field input, .field select { min-height: 44px; width: 100%; padding: 0 12px; border: 1px solid var(--quiet-edge); border-radius: var(--corner); background: var(--paper); font-size: 15px; letter-spacing: normal; color: var(--ink); } .field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Who is signing up: the app's own dialog, never the browser's prompt. */ .who-dialog { width: min(400px, calc(100vw - 32px)); padding: 28px 24px 20px; border: 1px solid var(--line); border-radius: var(--corner); background: var(--paper); color: var(--ink); } .who-dialog::backdrop { background: rgb(43 41 38 / .35); } .who-dialog h2 { font: 400 28px/1.15 var(--serif); } .who-dialog p { margin: 10px 0 20px; font-size: 14px; color: var(--quiet); } /* ─── Phone first; a wide window gets both sides at once ───────────────── */ /* On a phone, one screen at a time: the classes, or my places. */ @media (max-width: 959px) { .page[data-view="classes"] #mine, .page[data-view="timetable"] #mine { display: none; } .page[data-view="mine"] .pane-main { display: none; } .side-title { font-size: 46px; line-height: 1.02; } } /* Wide: the week in a broad column, my places beside it and staying in view. */ @media (min-width: 960px) { :root { --column: min(1080px, calc(100vw - 168px)); --rest: 64px; } .layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 80px; align-items: start; } .pane-side { position: sticky; top: 72px; max-height: calc(100dvh - 72px); overflow-y: auto; padding-bottom: 40px; } .side-title { margin-top: 56px; } .week-title { margin-top: 56px; font-size: 56px; } /* Each class on one line: the time, the class and its places, and what to do. */ .classes .row { grid-template-columns: 96px minmax(0, 1fr) auto; column-gap: 24px; align-items: start; } .classes .row > .act { margin-top: 0; grid-column: 3; grid-row: 1; justify-content: flex-end; } .footnote { max-width: 420px; } }