/* ============================================================ ALEXIS DAWN — the site, in the house style ============================================================ Copied by hand from the Inner Library's css/ (palette.css, frames.css) and the Kitchen Table Coding card — values, not imports, the way everything shared here is copied. THE HOUSE STYLE, in one paragraph: every surface is a cream plate — background #f7efd9, a 2px solid ink border, a small radius, and a HARD offset shadow like `2px 2px 0 ink`. Nothing blurs, nothing fades. Headings are Pixelify Sans on chip plates; body text is Nunito. Hovering lifts a plate (-1px,-1px and a deeper shadow); pressing pushes it (1px,1px and a shallower one). The shadow ladder runs 2px -> 3px -> 4px 6px by importance. NO CURSIVE. The handwriting face was retired August 6, 2026 ("I dont like the cursive look, it should be uniform"). The journal feeling comes from the layout — plates, chips, things pinned down — never from a handwriting font. Don't add one back. THE LAKE IS THE BACKGROUND. Not the little picture-frame widget from the app's home wall — the scene that widget holds, painted full-bleed behind the whole site: sky, clouds, a sun on the waterline, and the lake with the hour's light lying on top of it. The sky and sand are lifted from css/frames.css so the site and the app are looking out the same window; the water was pulled toward green, because this is the lake and not the game's ocean. IT KEEPS THE VISITOR'S HOURS, NOT MINE. js/shore.js reads the visitor's own clock, works out sunrise and sunset for Montrose from the date, and runs nine sky bands off that — midnight, first light, sunrise, morning, full day, afternoon, the golden hour, dusk, night — each crossfading into the next, so a page left open at sunset changes while it sits there. Nothing about the hour lands on ; this stylesheet never knows what time it is. ONE LOOK PER HOUR, NO DARK MODE. The site brings its own light. Plates stay cream at every hour, the way --bg-page stays cream in every season of the app, so nothing has to be legible twice. ============================================================ */ :root { color-scheme: light; --ink: #2d3a48; /* summer's ink — the line around everything */ --ink-soft: #5c6878; --page: #f7efd9; /* the cream every plate is made of */ --sunk: #efe4c9; /* a cream that has been pressed into */ --accent: #f4b878; /* soft orange */ --highlight: #ffde8a; /* warm yellow */ --ink-on-accent: #2d3a48; /* the eight domain colors from the app, stable — used as spine ticks */ --d-physical: #e9b0a8; --d-mental: #b3c7e6; --d-nutrition: #b8ccae; --d-care: #e8b9c4; --d-home: #d4b896; --d-connect: #edc3a0; --d-creative: #c8b5d6; --d-finances: #e8cf8a; } * { box-sizing: border-box; } /* The fallback color under the canvas, and the reason the page cannot scroll sideways: the shore is sized in whole scene pixels, so it is up to five screen pixels wider than the window. */ html { background: #a0c6e0; overflow-x: hidden; } body { margin: 0; padding: 26px 18px 40px; min-height: 100vh; color: var(--ink); font-family: Nunito, "Trebuchet MS", system-ui, sans-serif; font-size: 16px; line-height: 1.65; } /* ============================================================ THE SHORE — the scene behind everything ============================================================ One canvas, painted by js/shore.js at one scene-pixel to six screen pixels and never smoothed. It is fixed, so the page slides over the water rather than dragging it along, and it sits at the bottom of the stack with everything else above it. If the script never runs, the color underneath is the full-day sky and the page still reads. ============================================================ */ #shore { position: fixed; top: 0; left: 0; z-index: 0; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; } /* ============================================================ THE PAGE — plates on top of the scene ============================================================ */ .column { position: relative; z-index: 1; /* the clouds drift behind this */ max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; } .plate { background: var(--page); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 3px 3px 0 var(--ink); padding: 22px 24px; } .plate.sunk { background: var(--sunk); box-shadow: 2px 2px 0 var(--ink); } a.plate { display: block; text-decoration: none; color: inherit; transition: transform .08s, box-shadow .08s; } a.plate:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); } a.plate:active { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--ink); } /* ---------- type ---------- */ h1, h2, h3 { font-family: "Pixelify Sans", "Segoe UI Symbol", system-ui, sans-serif; margin: 0; font-weight: 600; text-wrap: balance; letter-spacing: .2px; } h1 { font-size: 40px; line-height: 1.1; } h2 { font-size: 25px; line-height: 1.2; } h3 { font-size: 19px; line-height: 1.25; } p { margin: 0 0 12px; } p:last-child, ul:last-child { margin-bottom: 0; } a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 2px; } a:hover { text-decoration-color: var(--accent); } .big { font-size: 18px; } .soft { opacity: .78; } /* ---------- the chip ---------- */ .chip { display: inline-block; font-family: "Pixelify Sans", system-ui, sans-serif; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; background: var(--highlight); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 2px 2px 0 var(--ink); padding: 3px 12px 4px; margin: 0 6px 8px 0; } .chip.accent { background: var(--accent); } .chip.quiet { background: var(--sunk); } /* ---------- masthead ---------- */ .masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 20px; } .masthead .name { font-family: "Pixelify Sans", system-ui, sans-serif; font-size: 21px; text-decoration: none; color: inherit; } .masthead nav { display: flex; gap: 8px; flex-wrap: wrap; } .masthead nav a { font-family: "Pixelify Sans", system-ui, sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; text-decoration: none; color: var(--ink); background: var(--sunk); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 2px 2px 0 var(--ink); padding: 3px 14px 4px; transition: transform .08s, box-shadow .08s; } .masthead nav a:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); } .masthead nav a[aria-current="page"] { background: var(--accent); } /* ---------- the quiet switch ---------- */ /* Sits with the tabs, and is deliberately not one: the tabs take you somewhere, this one takes something away. Highlight rather than sunk so it reads as the odd one out in the row. */ .hush { font-family: "Pixelify Sans", system-ui, sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink); background: var(--highlight); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 2px 2px 0 var(--ink); padding: 3px 14px 4px; margin-left: 8px; /* a small gap, so it does not read as a fifth page */ cursor: pointer; transition: transform .08s, box-shadow .08s; } .hush:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); } .hush:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); } /* Everything in the column goes but the masthead. `hushing` is the half-second of fade on either side of it; `hushed` is the state. Two classes rather than one because a thing that is `display: none` cannot animate, and a thing that only fades still takes up the page and still scrolls. */ .column > :not(.masthead) { transition: opacity .4s ease; } html.hushing .column > :not(.masthead) { opacity: 0; pointer-events: none; } html.hushed .column > :not(.masthead) { display: none; } html.hushed body { overflow: hidden; } /* ---------- the head plate ---------- */ .head { text-align: center; padding: 32px 26px 30px; box-shadow: 4px 6px 0 var(--ink); } .head h1 { margin-bottom: 14px; } .head p { max-width: 46ch; margin-left: auto; margin-right: auto; } /* ---------- the work list ---------- */ .stack { display: flex; flex-direction: column; gap: 18px; } .work-item { position: relative; padding-left: 28px; } /* the spine tick — a domain color down the left edge, like a book on a shelf */ .work-item::before { content: ""; position: absolute; left: 10px; top: 18px; bottom: 18px; width: 9px; border: 2px solid var(--ink); border-radius: 3px; background: var(--spine, var(--highlight)); } .work-item h3 { margin-bottom: 6px; } .work-item .meta { font-family: "Pixelify Sans", system-ui, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; opacity: .75; margin-bottom: 10px; } .work-item ul { margin: 10px 0 0; padding-left: 20px; } .work-item li { margin-bottom: 4px; } /* ---------- shop ---------- */ .product { display: grid; grid-template-columns: 1fr 210px; gap: 24px; } @media (max-width: 620px) { .product { grid-template-columns: 1fr; gap: 16px; } } .buy { align-self: start; background: var(--sunk); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 2px 2px 0 var(--ink); padding: 16px; text-align: center; } .price { font-family: "Pixelify Sans", system-ui, sans-serif; font-size: 26px; margin: 0 0 10px; } .button { display: block; font-family: "Pixelify Sans", system-ui, sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: .8px; text-align: center; text-decoration: none; background: var(--accent); color: var(--ink-on-accent); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 2px 2px 0 var(--ink); padding: 10px 14px; cursor: pointer; transition: transform .08s, box-shadow .08s; } .button:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); } .button:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); } .button[aria-disabled="true"] { background: var(--sunk); opacity: .75; cursor: default; } .button[aria-disabled="true"]:hover { transform: none; box-shadow: 2px 2px 0 var(--ink); } /* The block button above is the shop's — it fills the .buy box. Inside a card's text column a full-width bar reads like a form, so a call to action sitting in the prose gets .inline, and .buttons puts a few of them in a row that wraps on a phone instead of stacking edge to edge. */ .button.inline { display: inline-block; } .buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; } .fineprint { font-size: 14px; opacity: .8; margin-top: 10px; } /* ---------- footer ---------- */ footer.plate { text-align: center; font-size: 15px; } footer .hour { font-family: "Pixelify Sans", system-ui, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; opacity: .7; margin-top: 10px; } /* ============================================================ THE WRITING PAGE — passages with the chart in the margin ============================================================ Added for writing.html, September 9, 2026. The same furniture as everything above — cream, 2px ink, hard shadow — with one new idea: a passage of prose and a note beside it in the margin. THE MARGIN CARRIES TWO VOICES. Orange is METHOD: the reading under the passage, the rule it follows. Water blue is FACT: the placement, the Sabian symbol, the orb — a detail worth knowing and no use to anybody, which is the pleasure of it. Ink red is CORRECTIONS and appears nowhere else on the site. Both colors are the site's own: the orange is --accent, the blue is the lake out of the favicon. ============================================================ */ :root { --note-fact: #4e87ae; /* the water in the favicon */ --red: #b0432f; /* corrections, and nothing else */ } /* the passage — a pressed-in plate inside a plate */ .passage { background: var(--sunk); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 2px 2px 0 var(--ink); padding: 14px 16px; margin: 0 0 12px; font-size: 17px; line-height: 1.6; } .passage:last-child { margin-bottom: 0; } .passage strong { font-weight: 700; } /* prose on the left, its note in the margin */ .beat { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 12px 28px; align-items: start; margin: 0 0 20px; } .beat:last-child { margin-bottom: 0; } .beat > .beat-body { grid-column: 1; min-width: 0; } .beat > * { grid-column: 1; } .beat > .note { grid-column: 2; grid-row: 1; } .note { border-left: 3px solid var(--accent); padding: 2px 0 2px 12px; font-size: 14.5px; line-height: 1.55; opacity: .9; } .note > b:first-child { display: block; font-family: "Pixelify Sans", system-ui, sans-serif; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 2px; } /* "In practice:" — the turn from what happened to what to do about it */ .note em { font-style: normal; font-weight: 700; } .note.fact { border-left-color: var(--note-fact); } .note.fact > b:first-child::before { content: "\25C6 "; color: var(--note-fact); } @media (max-width: 46rem) { .beat { grid-template-columns: minmax(0, 1fr); } .beat > .note { grid-column: 1; grid-row: auto; } } /* the daily register — one line, one turn, a card each */ .reads, .pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 10px; } .read, .pair { background: var(--sunk); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 2px 2px 0 var(--ink); padding: 12px 14px; margin: 0; font-size: 16px; line-height: 1.5; } .pair { display: flex; flex-direction: column; gap: 5px; } .pairline { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 9px; align-items: baseline; } .pairline .k { font-family: "Pixelify Sans", system-ui, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; text-align: center; border: 2px solid var(--ink); border-radius: 999px; padding: 0 8px 1px; background: var(--highlight); } .pairline.n .k { background: var(--page); opacity: .8; } .pairline p { margin: 0; font-size: 15.5px; line-height: 1.4; } .pairline.n p { opacity: .75; } /* a labeled entry — the transit or the sign above the piece */ .entry { margin: 0 0 16px; } .entry:last-child { margin-bottom: 0; } .entry .meta { font-family: "Pixelify Sans", system-ui, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; opacity: .75; margin-bottom: 5px; } /* the corrections */ .wrong { border-left: 3px solid var(--red); padding-left: 14px; } .wrong h3 { color: var(--red); margin-bottom: 6px; }