/* ===================================================================== PACEY — THE BOARD (shared pinboard language) The materials every page is built from: the cork surface, the paper and post-it treatments, pushpins and washi tape, the handwriting assignment, and the shell (sidebar, tab bar, footer) while the board is up. Page-specific rules belong in the pinboard-.css files, not here. ===================================================================== */ /* --- The board itself: whole app sits on cork while Overview is on --- */ html:has(#pacey-dashboard-screen:not([hidden])) body { background: var(--pinboard-cork); } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-main { background-color: var(--pinboard-cork); background-image: var(--pinboard-cork-noise), var(--pinboard-cork-fine); background-size: 220px 220px, 80px 80px; background-blend-mode: soft-light, multiply; } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-content { background: transparent; } /* With the dashboard up the page canvas is the cork board, not white, so a refresh doesn't blink white between unload and first paint. */ html:has(#pacey-dashboard-screen:not([hidden])), html:has(#pacey-dashboard-screen:not([hidden])) body { background-color: var(--pinboard-cork); } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-sidebar { background-color: var(--pinboard-cork-edge); background-image: var(--pinboard-cork-noise), var(--pinboard-cork-fine); background-size: 220px 220px, 80px 80px; background-blend-mode: soft-light, multiply; border-right: 1px solid rgba(0, 0, 0, 0.18); /* Sidebar sits above the content, so it casts a shadow to the right */ box-shadow: 0.5rem 0 1rem -0.5rem rgba(0, 0, 0, 0.45); /* The sidebar sits outside #pacey-content, so the paper token remap below never reached it: its surface was re-themed to cork while its --pacey-* tokens still held the old navy palette. That left the nav, the theme toggle, Settings and the site link reading as a cool blue-grey on a warm brown board. Re-point them at warm tones, the same way the tab bar is handled — light cork takes dark ink, the night board takes cream. */ --pacey-navy: #4a4235; --pacey-text: #4a4235; --pacey-muted: #5f5546; --pacey-light: rgba(43, 38, 32, 0.09); --pacey-border: rgba(43, 38, 32, 0.16); --pacey-blue: #1d3557; } html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) .pacey-sidebar { --pacey-navy: #cfd8cf; --pacey-text: #e2dac9; --pacey-muted: #a89d88; --pacey-light: rgba(255, 255, 255, 0.1); --pacey-border: rgba(255, 255, 255, 0.16); --pacey-blue: #f2e9d7; } /* Floating tab bar — a more opaque frosted glass with fixed icon colours, so the buttons stay legible whether a light paper card or the dark cork is behind them. (The glass is the contrast anchor; the icons never need to adapt per-pixel.) */ html:has(#pacey-dashboard-screen:not([hidden])) .pacey-tabbar { background: rgba(248, 242, 228, 0.34); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border-color: rgba(255, 255, 255, 0.4); } /* Soften the glass sheen so the bar reads as see-through glass rather than a milky panel */ html:has(#pacey-dashboard-screen:not([hidden])) .pacey-tabbar::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05) 30%, transparent 60%); } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-tab-item { color: #4a4235; } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-tab-item.active { color: #1d3557; } /* The active tab is marked with a hand-drawn red ring (below), so the frosted pill indicator is hidden — it stays in the DOM because the scroll/route code still positions it, but it no longer paints. */ html:has(#pacey-dashboard-screen:not([hidden])) .pacey-tab-indicator { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) .pacey-tabbar { background: rgba(26, 20, 15, 0.46); border-color: rgba(255, 255, 255, 0.16); } html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) .pacey-tab-item { color: #cfd8cf; } html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) .pacey-tab-item.active { color: #f2e9d7; } /* --- Hand-drawn selection ring on the active floating-tab button --- A red pencil ring, sketched in (stroke-dashoffset) when the tab becomes active. Because the ring lives on the .active element, moving the selection replays the draw automatically. */ html:has(#pacey-dashboard-screen:not([hidden])) .pacey-tab-sketch { position: absolute; top: 50%; left: 50%; width: 2.9rem; height: 2.9rem; transform: translate(-50%, -50%); pointer-events: none; overflow: visible; } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-tab-sketch-path { fill: none; stroke: #c0392b; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-tab-item.active .pacey-tab-sketch-path { animation: pacey-tab-sketch-draw 0.45s ease-out forwards; } @keyframes pacey-tab-sketch-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { html:has(#pacey-dashboard-screen:not([hidden])) .pacey-tab-item.active .pacey-tab-sketch-path { animation: none; stroke-dashoffset: 0; } } /* Hand-placed look: each floating-tab button sits at its own slight angle, so the row reads as stuck on by hand rather than machine-aligned. */ html:has(#pacey-dashboard-screen:not([hidden])) .pacey-tabbar .pacey-tab-item { transform: rotate(var(--tab-tilt, 0deg)); } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-tabbar .pacey-tab-item:active { transform: rotate(var(--tab-tilt, 0deg)) scale(0.92); } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-tabbar .pacey-tab-item:nth-child(2) { --tab-tilt: -3deg; } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-tabbar .pacey-tab-item:nth-child(3) { --tab-tilt: 2.5deg; } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-tabbar .pacey-tab-item:nth-child(4) { --tab-tilt: -2deg; } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-tabbar .pacey-tab-item:nth-child(5) { --tab-tilt: 3deg; } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-tabbar .pacey-tab-item:nth-child(6) { --tab-tilt: -1.5deg; } /* Chart fonts — inherited by the canvases inside the overview. Kept as literal stacks (not var() refs) because Chart.js reads them at runtime. */ html:has(#pacey-dashboard-screen:not([hidden])) { --pacey-chart-heading-font: 'Fuzzy Bubbles', 'Caveat', cursive; --pacey-chart-body-font: 'Fuzzy Bubbles', 'Caveat', cursive; } /* --- Paper surface: the overview content reads as sheets on the board --- */ #pacey-content { --pacey-surface: var(--pinboard-paper); --pacey-text: var(--pinboard-ink); --pacey-navy: var(--pinboard-ink); --pacey-border: var(--pinboard-line); --pacey-muted: var(--pinboard-muted); --pacey-light: var(--pinboard-paper-2); --pacey-sky: var(--pinboard-note-blue); /* The paper stays light in both themes, so accents used on it keep their light-mode values even in dark mode. Values are darkened slightly from the app's defaults so they clear 4.5:1 on paper and post-its (the app's originals are tuned for white, not cream). */ --pacey-blue: #2a5169; --pacey-accent-green: #2f6a3f; --pacey-accent-amber: #7a5810; --pacey-accent-red: #a83b3b; /* Run-type tags are the exception: they keep the app's brighter light-mode colours so a tag reads the same on every surface. */ --pacey-run-easy: #43caca; --pacey-run-lsd: #5a70ca; --pacey-run-race-pace: #2f6fb0; --pacey-run-tempo: #8a6313; --pacey-run-speedwork: #f14040; --pacey-run-warmup: #e7d897; --pacey-run-cross-train: #8a8a8a; --pacey-btn-primary-text: #ffffff; color: var(--pinboard-ink); } /* Shared paper treatment — a faint grain so the sheets read as paper rather than flat rectangles */ #pacey-content .pacey-readiness-card, #pacey-content .pacey-chart-card, #pacey-content .pacey-race-recap, #pacey-content .pacey-no-goal-note, #pacey-content .pacey-goal-suggestions, #pacey-content .pacey-overall-insight, #pacey-content .pacey-overall-insight-skeleton, #pacey-content .pacey-activity-item, #pacey-content .pacey-pillar-card, #pacey-content .pacey-race-detail, #pacey-content .pacey-content-header { position: relative; background-color: var(--pinboard-paper); background-image: var(--pinboard-paper-noise); background-size: 140px 140px; background-repeat: repeat; border: none; border-radius: 3px 12px 4px 14px / 14px 4px 12px 3px; box-shadow: var(--pinboard-shadow), 0 1px 0 rgba(255, 255, 255, 0.45) inset; transition: transform 0.18s ease-out, box-shadow 0.18s ease-out; } /* Masthead sheet gets breathing room inside the paper */ #pacey-content .pacey-content-header { padding: 1.4rem 1.6rem; } /* Passive sheets sit flatter than the interactive cards — the runner can never pick them up, so they carry the shallow static shadow and it never grows on hover. Only the depth changes: the paper grain, tape, pushpins, tilt and the inset top-edge highlight all stay. The interactive members of the group above (metric tiles, activity rows, pillar cards) keep the deeper resting shadow and the hover lift. */ #pacey-content .pacey-content-header, #pacey-content .pacey-no-goal-note, #pacey-content .pacey-goal-suggestions, #pacey-content .pacey-race-recap, #pacey-content .pacey-chart-card, #pacey-content .pacey-overall-insight, #pacey-content .pacey-overall-insight-skeleton, #pacey-content .pacey-race-detail, #pacey-content .pacey-readiness-card { box-shadow: var(--pinboard-shadow-static), 0 1px 0 rgba(255, 255, 255, 0.45) inset; } /* --- Pushpins and washi tape (pseudo-elements, no extra markup) --- */ /* Pins sit well in from the edge so they don't look like they would tear the corner off */ #pacey-content .pacey-readiness-card::before, #pacey-content .pacey-race-recap::before, #pacey-content .pacey-pillar-card::before { content: ""; position: absolute; top: 0.85rem; left: 50%; width: 0.85rem; height: 0.85rem; margin-left: -0.425rem; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ff9b8f 0%, var(--pinboard-pin) 58%, #6f1f17 100%); box-shadow: 0 0.18rem 0.25rem rgba(0, 0, 0, 0.4), inset 0 -0.08rem 0.1rem rgba(0, 0, 0, 0.3); z-index: 4; } /* Alternate pin colour so the board looks hand-assembled */ #pacey-content .pacey-readiness-row > .pacey-readiness-card:nth-child(2)::before { background: radial-gradient(circle at 34% 30%, #a7c9e6 0%, var(--pinboard-pin-blue) 58%, #17365a 100%); } #pacey-content .pacey-pillar-card:nth-child(3n)::before { background: radial-gradient(circle at 34% 30%, #a7c9e6 0%, var(--pinboard-pin-blue) 58%, #17365a 100%); } /* The readiness page's radar card is taped rather than pinned, so it reads like a chart clipped to the board. (The six-area cards below it keep their pins.) */ #pacey-page-readiness .pacey-readiness-card::before { content: none; } #pacey-page-readiness .pacey-readiness-card::after { content: ""; position: absolute; top: -0.6rem; left: 50%; width: 4.6rem; height: 1.35rem; transform: translateX(-50%) rotate(-2.5deg); background: var(--pinboard-tape); border-left: 1px dashed rgba(255, 255, 255, 0.65); border-right: 1px dashed rgba(255, 255, 255, 0.65); box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.12); opacity: 0.9; z-index: 4; } /* The race recap sheet is taped for the same reason, plus one of its own: a pushpin is a small round mark, and this sheet already carries a lot of small round marks — the map's start and finish dots, the verdict — so a pin reads as another datum rather than as the thing holding the sheet up. The strip itself is the shared one, positioned below. The no-goal note and the suggestions sheet follow the recap: they are full-width sheets of the same kind, so they are taped rather than pinned too. */ #pacey-content .pacey-race-recap::before, #pacey-content .pacey-no-goal-note::before, #pacey-content .pacey-goal-suggestions::before { content: none; } /* Six-area cards: the coloured dot beside the title is dropped — the score's colour already carries the status */ #pacey-content .pacey-pillar-dot { display: none; } /* --- Washi tape (pseudo-elements, no extra markup). Layouts vary from card to card so the board looks hand-assembled. Where two strips appear they always sit on opposite corners or opposite sides. --- */ #pacey-content .pacey-overall-insight::after, #pacey-content .pacey-overall-insight::before, #pacey-content .pacey-chart-card::after, #pacey-content .pacey-chart-card::before, #pacey-content .pacey-race-detail::after, #pacey-content .pacey-race-recap::after, #pacey-content .pacey-no-goal-note::after, #pacey-content .pacey-goal-suggestions::after, #pacey-content .pacey-content-header::before, #pacey-content .pacey-content-header::after { content: ""; position: absolute; width: 4rem; height: 1.35rem; background: var(--pinboard-tape); border-left: 1px dashed rgba(255, 255, 255, 0.65); border-right: 1px dashed rgba(255, 255, 255, 0.65); box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.12); opacity: 0.9; z-index: 4; } /* Horizontal strips only. Each card gets one or two; when there are two they sit on opposite corners. */ #pacey-content .pacey-overall-insight::after, #pacey-content .pacey-chart-card::after, #pacey-content .pacey-content-header::before { top: -0.65rem; left: 1.4rem; transform: rotate(-4deg); } #pacey-content .pacey-overall-insight::before, #pacey-content .pacey-chart-card::before { bottom: -0.6rem; right: 1.6rem; transform: rotate(6deg); } /* Race detail note — one strip on the top-left. The radar card directly below it carries a centred strip, so giving this one a corner keeps the two from reading as a repeat of the same gesture. */ #pacey-content .pacey-race-detail::after { top: -0.65rem; left: 1.4rem; transform: rotate(-4deg); } /* Race recap sheet — one strip across the top centre, where the pushpin used to be. Same gesture as the radar card, so a sheet on this page is held down the same way whether it is showing the analysis or the recap. The no-goal note and the suggestions sheet are held down the same way. */ #pacey-content .pacey-race-recap::after, #pacey-content .pacey-no-goal-note::after, #pacey-content .pacey-goal-suggestions::after { top: -0.7rem; left: 50%; transform: translateX(-50%) rotate(-2.5deg); } /* Pace card — two horizontals on opposite corners (top-left + bottom-right) */ #pacey-content .pacey-chart-card--equal:nth-child(1)::after { top: -0.65rem; left: 1.4rem; transform: rotate(-4deg); } #pacey-content .pacey-chart-card--equal:nth-child(1)::before { bottom: -0.6rem; right: 1.6rem; transform: rotate(6deg); } /* HR card — two horizontals on opposite corners (top-right + bottom-left) */ #pacey-content .pacey-chart-card--equal:nth-child(2)::after { top: -0.65rem; left: auto; right: 1.4rem; transform: rotate(5deg); } #pacey-content .pacey-chart-card--equal:nth-child(2)::before { bottom: -0.6rem; right: auto; left: 1.4rem; transform: rotate(-6deg); } /* Mileage card — a single horizontal strip */ #pacey-content .pacey-chart-card:not(.pacey-chart-card--equal):not(.pacey-chart-card--calendar)::after { top: -0.65rem; left: 1.4rem; transform: rotate(-4deg); } #pacey-content .pacey-chart-card:not(.pacey-chart-card--equal):not(.pacey-chart-card--calendar)::before { content: none; } /* Calendar card — a single horizontal strip */ #pacey-content .pacey-chart-card--calendar::after { top: -0.65rem; left: 1.4rem; transform: rotate(-5deg); } #pacey-content .pacey-chart-card--calendar::before { content: none; } /* Masthead — two horizontals on opposite corners */ #pacey-content .pacey-content-header::after { top: auto; left: auto; bottom: -0.6rem; right: 1.6rem; transform: rotate(6deg); } /* --- Post-it notes: vitals, pillars and the limiter --- */ #pacey-content .pacey-metric-tile { position: relative; background-color: var(--pinboard-note-blue); background-image: none; border: none; border-radius: 1px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.14), 0 0.5rem 0.75rem rgba(0, 0, 0, 0.22), inset 0 -1.4rem 1.4rem -1.4rem rgba(0, 0, 0, 0.14); --tilt: -0.9deg; transform: rotate(var(--tilt)); transition: transform 0.18s ease-out, box-shadow 0.18s ease-out; } #pacey-content .pacey-metric-tile:nth-child(2n) { --tilt: 0.8deg; background-color: var(--pinboard-note-blue-2); } #pacey-content .pacey-metric-tile:nth-child(3n) { --tilt: -0.4deg; } #pacey-content .pacey-metric-tile:nth-child(5n) { --tilt: 1.1deg; background-color: var(--pinboard-note-blue); } #pacey-content .pacey-metric-tile:hover, #pacey-content .pacey-pillar-card:hover, #pacey-content .pacey-activity-item:hover { transform: rotate(0deg) translateY(-0.4rem); box-shadow: var(--pinboard-shadow-hover), 0 1px 0 rgba(255, 255, 255, 0.45) inset; z-index: 6; } /* The limiter / biggest gap is the one yellow note on the board */ #pacey-content .pacey-overall-insight-takeaway--gap { background-color: var(--pinboard-note-yellow); background-image: none; border-radius: 1px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.14), 0 0.45rem 0.7rem rgba(0, 0, 0, 0.22), inset 0 -1.2rem 1.2rem -1.2rem rgba(0, 0, 0, 0.12); --tilt: 0.7deg; transform: rotate(var(--tilt)); padding: 0.75rem 0.85rem; } #pacey-content .pacey-overall-insight-takeaway--strength { background-color: var(--pinboard-note-blue); background-image: none; border-radius: 1px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 0.45rem 0.7rem rgba(0, 0, 0, 0.2); --tilt: -0.6deg; transform: rotate(var(--tilt)); padding: 0.75rem 0.85rem; } /* Ring the biggest-gap title with a hand-drawn circle — the "work on this first" mark, like a coach circling the key point. The SVG stretches to the text and keeps a constant stroke width. */ #pacey-content .pacey-overall-insight-takeaway--gap .pacey-overall-insight-takeaway-name { position: relative; display: inline-block; /* The takeaway is a column flex container, so a flex item would stretch to the full card width and the ring would circle the whole row. align-self + fit-content keep it hugging just the text. */ align-self: flex-start; width: fit-content; padding: 0 0.25rem; } #pacey-content .pacey-overall-insight-takeaway--gap .pacey-overall-insight-takeaway-name::after { content: ""; position: absolute; inset: -0.4rem -0.6rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M52 6 C 76 4, 95 13, 95 29 C 95 45, 76 55, 51 55 C 25 55, 5 45, 5 29 C 5 13, 26 5, 51 6 C 63 6, 74 9, 82 14' fill='none' stroke='%23c0392b' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; } /* Pillars are post-its too, with pins from the rule above */ #pacey-content .pacey-pillar-card { background-color: var(--pinboard-note-blue); background-image: none; border-radius: 1px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.14), 0 0.5rem 0.75rem rgba(0, 0, 0, 0.22), inset 0 -1.6rem 1.6rem -1.6rem rgba(0, 0, 0, 0.12); --tilt: -0.6deg; transform: rotate(var(--tilt)); } #pacey-content .pacey-pillar-card:nth-child(2n) { --tilt: 0.7deg; background-color: var(--pinboard-note-blue-2); } #pacey-content .pacey-pillar-card:nth-child(3n) { --tilt: -0.2deg; } /* Slight scatter for the pinned sheets */ #pacey-content .pacey-readiness-row > .pacey-readiness-card:nth-child(1) { --tilt: -0.5deg; transform: rotate(var(--tilt)); } #pacey-content .pacey-readiness-row > .pacey-readiness-card:nth-child(2) { --tilt: 0.5deg; transform: rotate(var(--tilt)); } /* The recap replaces that row once the race is done, so it takes the same laid-on-the-board treatment — a sheet pinned slightly off-square. */ #pacey-content .pacey-race-recap { --tilt: -0.4deg; transform: rotate(var(--tilt)); } /* Slight counter-tilt on the sheets that share the recap's slot, so the board stays hand-assembled rather than stacked square. */ #pacey-content .pacey-no-goal-note { --tilt: -0.35deg; transform: rotate(var(--tilt)); } #pacey-content .pacey-goal-suggestions { --tilt: 0.4deg; transform: rotate(var(--tilt)); } #pacey-content .pacey-charts-row > .pacey-chart-card:nth-child(1) { --tilt: -0.4deg; transform: rotate(var(--tilt)); } #pacey-content .pacey-charts-row > .pacey-chart-card:nth-child(2) { --tilt: 0.5deg; transform: rotate(var(--tilt)); } #pacey-content .pacey-activity-item { --tilt: -0.25deg; transform: rotate(var(--tilt)); } #pacey-content .pacey-activity-item:nth-child(2n) { --tilt: 0.3deg; } /* --- Handwriting: Caveat for headings, Fuzzy Bubbles for copy --- */ #pacey-content .pacey-project-title, #pacey-content .pacey-section-title, #pacey-content .pacey-card-title, #pacey-content .pacey-readiness-card-title, #pacey-content .pacey-overall-insight-verdict, #pacey-content .pacey-overall-insight-takeaway-name, #pacey-content .pacey-overall-insight-focus-label, #pacey-content .pacey-pillar-name { font-family: var(--font-caveat); font-weight: 700; letter-spacing: 0; } #pacey-content .pacey-project-title { font-size: clamp(2rem, 4vw, 2.8rem); } /* The Pacey mark sits beside the masthead title */ #pacey-content .pacey-project-heading { display: flex; align-items: center; gap: 0.5rem; } #pacey-content .pacey-project-logo { width: 64px; height: 64px; flex: none; display: block; } /* Section title: a long hand-sketched underline tucked close to the text */ #pacey-content .pacey-section-title { position: relative; font-size: 1.75rem; color: var(--pinboard-ink); padding-bottom: 0.55rem; } /* The underline lives on the text span, so it follows the text length rather than a fixed width */ #pacey-content .pacey-section-title-text { position: relative; display: inline-block; } #pacey-content .pacey-section-title-text::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.28rem; height: 0.7rem; background-image: var(--pinboard-sketch-underline); background-repeat: no-repeat; background-position: left bottom; background-size: 100% 100%; transform-origin: left center; opacity: 0.95; } /* Per-section variation — the line runs a little long or short (±10%) and tilts a touch, so no two titles look stamped from the same die */ #pacey-content .pacey-page > section:nth-of-type(1) .pacey-section-title-text::after { transform: scaleX(1.06) rotate(-1.1deg); } #pacey-content .pacey-page > section:nth-of-type(2) .pacey-section-title-text::after { transform: scaleX(0.93) rotate(0.9deg); } #pacey-content .pacey-page > section:nth-of-type(3) .pacey-section-title-text::after { transform: scaleX(1.02) rotate(-0.6deg); } #pacey-content .pacey-page > section:nth-of-type(4) .pacey-section-title-text::after { transform: scaleX(0.9) rotate(1.4deg); } #pacey-content .pacey-page > section:nth-of-type(5) .pacey-section-title-text::after { transform: scaleX(1.08) rotate(-0.8deg); } #pacey-content .pacey-page > section:nth-of-type(6) .pacey-section-title-text::after { transform: scaleX(0.96) rotate(1deg); } #pacey-content .pacey-card-title, #pacey-content .pacey-readiness-card-title { font-size: 1.4rem; } #pacey-content .pacey-overall-insight-takeaway-name { font-size: 1.5rem; } #pacey-content .pacey-overall-insight-verdict { font-size: 1.3rem; } #pacey-content .pacey-overall-insight-focus-label { font-size: 1.15rem; } #pacey-content .pacey-pillar-name { font-size: 1.3rem; } /* Coach copy, labels and data — Fuzzy Bubbles */ #pacey-content .pacey-project-intro, #pacey-content .pacey-section-sub, #pacey-content .pacey-readiness-card-sub, #pacey-content .pacey-card-sub, #pacey-content .pacey-goal-stat-label, #pacey-content .pacey-goal-stat-value, #pacey-content .pacey-metric-label, #pacey-content .pacey-metric-value, #pacey-content .pacey-metric-unit, #pacey-content .pacey-overall-insight-summary, #pacey-content .pacey-overall-insight-takeaway-note, #pacey-content .pacey-overall-insight-focus-text, #pacey-content .pacey-overall-insight-cta, #pacey-content .pacey-activity-name, #pacey-content .pacey-activity-date, #pacey-content .pacey-activity-stat-value, #pacey-content .pacey-activity-stat-label, #pacey-content .pacey-pillar-summary, #pacey-content .pacey-pillar-note, #pacey-content .pacey-pillar-view-details { font-family: var(--font-fuzzy); } #pacey-content .pacey-project-intro, #pacey-content .pacey-overall-insight-summary, #pacey-content .pacey-overall-insight-takeaway-note, #pacey-content .pacey-overall-insight-focus-text, #pacey-content .pacey-card-sub, #pacey-content .pacey-readiness-card-sub, #pacey-content .pacey-section-sub, #pacey-content .pacey-pillar-summary, #pacey-content .pacey-pillar-note { font-size: 1.02rem; line-height: 1.5; } /* Scores and the countdown read as handwritten coaching marks */ #pacey-content .pacey-pillar-score, #pacey-content .pacey-overall-insight-score { font-family: var(--font-fuzzy); font-weight: 400; } /* The mark reads bigger than the "/10" beside it so the number is the thing you see first */ #pacey-content .pacey-pillar-score { font-size: 1.9rem; line-height: 1; } #pacey-content .pacey-overall-insight-score { font-size: 1.7rem; } /* The "/10" sits quieter than the mark itself */ #pacey-content .pacey-pillar-score-max, #pacey-content .pacey-overall-insight-score-max { font-family: var(--font-fuzzy); font-size: 0.95rem; font-weight: 400; color: var(--pinboard-muted); } /* Countdown */ #pacey-content .pacey-countdown-value, #pacey-content .pacey-countdown-label { font-family: var(--font-fuzzy); font-weight: 400; } /* --- Countdown: a blue tag pinned to the Race Goal sheet --- */ #pacey-content .pacey-countdown-highlight { border-radius: 2px 6px 3px 8px / 8px 3px 6px 2px; box-shadow: 0 0.35rem 0.6rem rgba(0, 0, 0, 0.28); transform: rotate(1.2deg); } #pacey-content .pacey-countdown-highlight::before { content: ""; position: absolute; top: 0.35rem; left: 50%; width: 0.7rem; height: 0.7rem; margin-left: -0.35rem; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ff9b8f 0%, var(--pinboard-pin) 58%, #6f1f17 100%); box-shadow: 0 0.15rem 0.22rem rgba(0, 0, 0, 0.4); } /* --- Buttons and small chrome adopt the paper look --- */ #pacey-content .pacey-overall-insight-cta, #pacey-content .pacey-btn { border-radius: 2px 7px 3px 8px / 8px 3px 7px 2px; box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.22); } /* --- Subtle movement on interactive controls --- */ #pacey-content .pacey-overall-insight-cta, #pacey-content .pacey-show-more-btn, #pacey-content .pacey-pillar-view-details, #pacey-content .pacey-btn { transition: transform 0.18s ease-out, background 0.18s ease-out, box-shadow 0.18s ease-out; } #pacey-content .pacey-overall-insight-cta:hover { transform: translateY(-0.15rem); } #pacey-content .pacey-show-more-btn:hover { transform: translateY(-0.12rem); } /* "View details" slides right when its note is hovered */ #pacey-content .pacey-pillar-card:hover .pacey-pillar-view-details { transform: translateX(0.3rem); } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-demo-cta-btn:hover, html:has(#pacey-dashboard-screen:not([hidden])) .pacey-demo-banner-cta:hover { transform: translateY(-0.12rem); } /* --- Demo banner (sticky, outside the page container, so scoped via html:has): a pinned sticky note that stays at the top of the board --- */ html:has(#pacey-dashboard-screen:not([hidden])) .pacey-demo-banner { background-color: var(--pinboard-note-yellow); background-image: none; border: none; border-radius: 2px 8px 3px 9px / 9px 3px 8px 2px; box-shadow: var(--pinboard-shadow); transform: rotate(-0.3deg); overflow: visible; } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-demo-banner::before { content: ""; position: absolute; top: 0.4rem; left: 50%; width: 0.7rem; height: 0.7rem; margin-left: -0.35rem; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ff9b8f 0%, var(--pinboard-pin) 58%, #6f1f17 100%); box-shadow: 0 0.15rem 0.22rem rgba(0, 0, 0, 0.4); z-index: 5; } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-demo-banner-text, html:has(#pacey-dashboard-screen:not([hidden])) .pacey-demo-banner-cta, html:has(#pacey-dashboard-screen:not([hidden])) .pacey-demo-banner-slim { font-family: var(--font-fuzzy); } /* --- Footer CTA (also outside the page container) --- */ html:has(#pacey-dashboard-screen:not([hidden])) .pacey-demo-cta-text, html:has(#pacey-dashboard-screen:not([hidden])) .pacey-demo-cta-btn { font-family: var(--font-fuzzy); } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-demo-cta-text { font-size: 1.05rem; } /* --- Sidebar (shared shell) adopts the handwriting while Overview is on --- */ html:has(#pacey-dashboard-screen:not([hidden])) .pacey-nav-label, html:has(#pacey-dashboard-screen:not([hidden])) .pacey-sidebar-greeting, html:has(#pacey-dashboard-screen:not([hidden])) .pacey-sidebar-goal, html:has(#pacey-dashboard-screen:not([hidden])) .pacey-sidebar-theme-label, html:has(#pacey-dashboard-screen:not([hidden])) .pacey-sidebar-site-label, html:has(#pacey-dashboard-screen:not([hidden])) .pacey-sidebar-settings-label { font-family: var(--font-fuzzy); } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-nav-label, html:has(#pacey-dashboard-screen:not([hidden])) .pacey-sidebar-theme-label, html:has(#pacey-dashboard-screen:not([hidden])) .pacey-sidebar-site-label, html:has(#pacey-dashboard-screen:not([hidden])) .pacey-sidebar-settings-label { font-size: 0.9rem; } html:has(#pacey-dashboard-screen:not([hidden])) .pacey-sidebar-greeting { font-size: 1rem; } /* --- Charts: give the row noticeably more air --- */ #pacey-content .pacey-charts-row { gap: clamp(1.6rem, 3.5vw, 2.8rem); } /* --- Motion: no tilt on hover when the user prefers reduced motion --- */ @media (prefers-reduced-motion: reduce) { #pacey-content .pacey-metric-tile:hover, #pacey-content .pacey-pillar-card:hover, #pacey-content .pacey-activity-item:hover { transform: rotate(var(--tilt, 0deg)); } #pacey-content .pacey-overall-insight-cta:hover, #pacey-content .pacey-show-more-btn:hover, #pacey-content .pacey-pillar-card:hover .pacey-pillar-view-details, html:has(#pacey-dashboard-screen:not([hidden])) .pacey-demo-cta-btn:hover { transform: none; } } /* --- Mobile: same treatment, scaled down --- */ @media (max-width: 48rem) { #pacey-content .pacey-readiness-card::before, #pacey-content .pacey-pillar-card::before { width: 0.7rem; height: 0.7rem; top: 0.6rem; margin-left: -0.35rem; } #pacey-content .pacey-overall-insight::after, #pacey-content .pacey-chart-card::after, #pacey-content .pacey-content-header::before, #pacey-content .pacey-overall-insight::before, #pacey-content .pacey-chart-card::before, #pacey-content .pacey-content-header::after { width: 3rem; height: 1.05rem; } #pacey-content .pacey-section-title { font-size: 1.55rem; } #pacey-content .pacey-metric-tile { --tilt: -0.6deg; } #pacey-content .pacey-metric-tile:nth-child(2n) { --tilt: 0.6deg; } } /* --- Mobile vitals: a hand-scrollable carousel laid out as TWO rows. Cards fill column by column (grid-auto-flow: column) with two rows, and each column is 42% wide so the next column peeks in, signalling there is more to the right. No auto-advance. --- */ @media (max-width: 48rem) { #pacey-content .pacey-metrics-grid { display: grid; grid-auto-flow: column; /* Reset the base auto-fill tracks: without this the first two columns stay explicit (content-sized) and only the extra ones pick up the 42% auto-column, so the primary cards came out narrower than the rest. */ grid-template-columns: none; grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-columns: 42%; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: auto; padding: 0.75rem 0.3rem 1rem; scrollbar-width: none; } #pacey-content .pacey-metrics-grid::-webkit-scrollbar { display: none; } /* All tiles join the scroll grid (no collapsed drawer on mobile) */ #pacey-content .pacey-metrics-extra, #pacey-content .pacey-metrics-extra-inner { display: contents; } #pacey-content .pacey-vitals-toggle { display: none; } #pacey-content .pacey-metric-tile { scroll-snap-align: start; } } /* --- Night board: text that sits on the cork (not on paper) needs to be light, otherwise the dark ink disappears against the dark board. The score info button is excluded — it carries its own paper chip. --- */ [data-theme="dark"] #pacey-content .pacey-section-title, [data-theme="dark"] #pacey-content .pacey-section-sub, [data-theme="dark"] #pacey-content .pacey-metrics-date, [data-theme="dark"] #pacey-content .pacey-readiness-updated, [data-theme="dark"] #pacey-content .pacey-vitals-toggle, [data-theme="dark"] #pacey-content .pacey-past-races-btn, [data-theme="dark"] #pacey-content .pacey-card-title--with-action { color: #e8dfca; } /* The Past races link is a plain control, not a heading — its hover lifts it to the brightest ink on the night board rather than darkening it. */ [data-theme="dark"] #pacey-content .pacey-past-races-btn:hover { color: #f2e9d7; } /* Footer note sits on cork */ html:has(#pacey-dashboard-screen:not([hidden])) .pacey-demo-cta-text { color: #4a4235; } html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) .pacey-demo-cta-text { color: #c3cfd8; } /* Sticky demo note is a light gold in both themes, so its copy stays dark. The "Connect Garmin" button is deliberately left alone so it keeps its own blue background with white text. */ html:has(#pacey-dashboard-screen:not([hidden])) .pacey-demo-banner-text, html:has(#pacey-dashboard-screen:not([hidden])) .pacey-demo-banner-slim, html:has(#pacey-dashboard-screen:not([hidden])) .pacey-demo-banner-slim-cta, html:has(#pacey-dashboard-screen:not([hidden])) .pacey-demo-banner-icon { color: var(--pinboard-ink); } /* --- Pacey mark on the auth / onboarding cards. The site header that used to carry the brand is gone, so these screens show the logo. --- */ .pacey-card-logo { display: block; width: 52px; height: 52px; margin-bottom: 0.6rem; } /* --- "Back to my site" link tucked under the sidebar Settings. The sidebar is desktop-only; on mobile the Account dialog carries it. --- */ .pacey-sidebar-site-link { display: flex; align-items: center; gap: 0.55rem; /* margin: 0.3rem 0.5rem 0.25rem; */ padding: 0.4rem 0.55rem; border-radius: 0.5rem; color: var(--pacey-muted); text-decoration: none; font-family: var(--font-fuzzy); font-size: 0.75rem; transition: background 0.18s ease-out, transform 0.18s ease-out; } /* max-width: none matters — a global img { max-width: 100% } let the mark be squashed below its own size whenever the link got narrow. */ .pacey-sidebar-site-link img { width: 18px; height: 18px; max-width: none; border-radius: 6px; display: block; flex: none; } .pacey-sidebar-site-link:hover { background: color-mix(in srgb, currentColor 12%, transparent); transform: translateY(-1px); } /* Collapsed sidebar: icon only. The padding and alignment are deliberately left alone so the mark keeps the same left offset as the theme and settings buttons — those don't shift on collapse either, and matching them means the rail's icons stay in one column. Only the label hides. */ .pacey-sidebar.collapsed .pacey-sidebar-site-label { display: none; } /* --- Site section inside the Account dialog (mobile's way back) --- */ .pacey-settings-site { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--pacey-border); } .pacey-settings-site-links { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; } .pacey-settings-site-links a { color: var(--pacey-blue); text-decoration: none; font-size: var(--pacey-text-label); } .pacey-settings-site-links a:hover { text-decoration: underline; } .pacey-settings-site-socials { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .pacey-settings-site-socials img { width: 22px; height: 22px; display: block; } /* --- Compact "made by Terrance" footer on the board --- */ .pacey-app-footer { margin-top: 2rem; padding: 1rem 0.5rem 0.5rem; text-align: center; font-family: var(--font-fuzzy); font-size: 0.95rem; color: var(--pinboard-muted); } .pacey-app-footer a { color: #2a5169; text-decoration: underline; text-underline-offset: 2px; } .pacey-app-footer-heart { color: #b6503a; } html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) .pacey-app-footer { color: #b3a98f; } html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) .pacey-app-footer a { color: #a7c9e6; } /* ========================================================================= Run type tag — colored badge indicating workout type (LSD, Easy, Tempo, Interval). Lives with the board materials because it is part of the shared presentation language: the app, the plan calendar, and the landing's sample workout cards all wear the same tags. ========================================================================= */ .pacey-run-tag { font-family: var(--font-fuzzy); font-weight: 400; font-size: 0.65rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 0.75rem; white-space: nowrap; flex-shrink: 0; } /* Tag color variants — each workout type uses a tokenized colour so dark mode overrides are handled by the token, not per-tag rules. The background keeps the bright token tint; the LABEL is mixed toward the board ink so the small uppercase text clears contrast on that light tint. */ .pacey-run-tag--lsd { background: color-mix(in srgb, var(--pacey-run-lsd) 42%, transparent); color: color-mix(in srgb, var(--pacey-run-lsd) 45%, var(--pinboard-ink)); } .pacey-run-tag--easy { background: color-mix(in srgb, var(--pacey-run-easy) 34%, transparent); color: color-mix(in srgb, var(--pacey-run-easy) 45%, var(--pinboard-ink)); } .pacey-run-tag--speedwork { background: color-mix(in srgb, var(--pacey-run-speedwork) 42%, transparent); color: color-mix(in srgb, var(--pacey-run-speedwork) 45%, var(--pinboard-ink)); } .pacey-run-tag--tempo-long { background: color-mix(in srgb, var(--pacey-run-tempo) 42%, transparent); color: color-mix(in srgb, var(--pacey-run-tempo) 45%, var(--pinboard-ink)); } .pacey-run-tag--race-pace-long { background: color-mix(in srgb, var(--pacey-run-race-pace) 42%, transparent); color: color-mix(in srgb, var(--pacey-run-race-pace) 45%, var(--pinboard-ink)); } .pacey-run-tag--warmup { background: color-mix(in srgb, var(--pacey-run-warmup) 42%, transparent); color: color-mix(in srgb, var(--pacey-run-warmup) 45%, var(--pinboard-ink)); } .pacey-run-tag--cross-train { background: color-mix(in srgb, var(--pacey-run-cross-train) 42%, transparent); color: color-mix(in srgb, var(--pacey-run-cross-train) 45%, var(--pinboard-ink)); } /* Dark mode tag backgrounds — stronger tint for visibility on dark surfaces. Text colour is already handled by the dark-mode token overrides. */ [data-theme="dark"] .pacey-run-tag--lsd { background: color-mix(in srgb, var(--pacey-run-lsd) 52%, transparent); } [data-theme="dark"] .pacey-run-tag--easy { background: color-mix(in srgb, var(--pacey-run-easy) 52%, transparent); } [data-theme="dark"] .pacey-run-tag--speedwork { background: color-mix(in srgb, var(--pacey-run-speedwork) 52%, transparent); } [data-theme="dark"] .pacey-run-tag--tempo-long { background: color-mix(in srgb, var(--pacey-run-tempo) 52%, transparent); } [data-theme="dark"] .pacey-run-tag--race-pace-long { background: color-mix(in srgb, var(--pacey-run-race-pace) 52%, transparent); } [data-theme="dark"] .pacey-run-tag--warmup { background: color-mix(in srgb, var(--pacey-run-warmup) 52%, transparent); } [data-theme="dark"] .pacey-run-tag--cross-train { background: color-mix(in srgb, var(--pacey-run-cross-train) 52%, transparent); } /* ========================================================================= Icon primitives — the sprite host and the two glyph kinds. Symbols carry geometry only; fill/stroke are set on the host and inherit into the shadow tree. Duma glyphs are closed ribbons meant to be filled; sketchyicons are open strokes that must not be filled. .pacey-icon is the filled kind, .pacey-icon--stroke flips to stroked. Stroke widths are in viewBox units, and the two hands draw on different grids, which is why the stroked kind carries its own width variable. Shared with the landing, which references a subset of the same sprite. ========================================================================= */ /* The sprite itself: never painted, only referenced. Sized to zero rather than display:none, which some engines refuse to resolve targets from. */ .pacey-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* Default kind — a filled ribbon glyph (Duma). */ .pacey-icon { fill: currentColor; stroke: none; } /* Stroked kind — an open-path glyph (sketchyicons). */ .pacey-icon--stroke { fill: none; stroke: currentColor; stroke-width: var(--pacey-icon-stroke, 2); stroke-linecap: round; stroke-linejoin: round; } /* ========================================================================= Metric tiles — the vitals post-its. Base layout for the app's Today's Metrics grid; the post-it material itself is the #pacey-content rules further up. Shared with the landing's read-only preview so the tiles look identical in both places. ========================================================================= */ .pacey-metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(8rem, 18vw, 10rem), 1fr)); /* Increased gap for better visual breathing room between tiles */ gap: clamp(1rem, 1.5vw, 1.25rem); } .pacey-metric-tile { background: var(--pacey-surface); border: 0.0625rem solid var(--pacey-border); border-radius: var(--pacey-radius); padding: clamp(0.75rem, 1.5vw, 1.1rem); display: flex; flex-direction: column; gap: 0.2rem; transition: box-shadow var(--pacey-transition), border-color var(--pacey-transition); /* Indicate clickability — opens metric detail popup */ cursor: pointer; } .pacey-metric-tile:hover { box-shadow: var(--pacey-shadow-md); border-color: var(--pacey-blue); } /* Keyboard focus indicator — visible outline when navigating with Tab. Uses :focus-visible so the outline only appears for keyboard users, not after mouse clicks (which would be visually noisy). */ .pacey-metric-tile:focus-visible { outline: 0.125rem solid var(--pacey-blue); outline-offset: 0.125rem; } .pacey-metric-top { display: flex; align-items: center; gap: 0.35rem; } .pacey-metric-icon { width: 1.1rem; height: 1.1rem; color: var(--pacey-muted); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } /* SVG inside icon spans fills the container */ .pacey-metric-icon svg { width: 100%; height: 100%; } .pacey-metric-label { font-weight: 500; font-size: var(--pacey-text-caption); color: var(--pacey-muted); text-transform: uppercase; letter-spacing: 0.04em; } /* Value + unit inline on the same row */ .pacey-metric-value-row { display: flex; align-items: baseline; gap: var(--pacey-space-xs); flex-wrap: wrap; } .pacey-metric-value { font-weight: 700; font-size: var(--pacey-text-display); color: var(--pacey-navy); line-height: 1.1; } .pacey-metric-unit { font-weight: 400; font-size: var(--pacey-text-label); color: var(--pacey-muted); } /* The metric row is the one place both icon hands share a row, and there the relationship is the other way round: Duma's ribbons read lighter than the stroked glyphs beside them. So the filled glyphs gain a stroke to bring them up to the same weight. Stroked glyphs are excluded — they already carry the weight this rule is chasing. */ .pacey-metric-icon .pacey-icon:not(.pacey-icon--stroke), .pacey-metric-popup-icon .pacey-icon:not(.pacey-icon--stroke) { stroke: currentColor; stroke-width: var(--pacey-icon-metric-ink, 3); } /* Phone: two compact columns, with a gutter wide enough for the tiles' shadows so they are not clipped at the content edge. */ @media (max-width: 30rem) { .pacey-metrics-grid { grid-template-columns: repeat(2, 1fr); /* Slightly more gap on phone for visual separation */ gap: 0.6rem; /* The container carries its own gutter so the tiles' shadows land inside it instead of running into the page edge. */ padding-inline: 0.7rem; } .pacey-metric-tile { padding: 0.6rem; } .pacey-metric-value { font-size: var(--pacey-text-heading); } } /* ---- Theme toggle ------------------------------------------------------ The raised round-square chip every theme toggle shares — surface fill, hairline border and a small shadow that deepens after dark. Positioning, size and visibility stay with each surface (the app floats it above the tab bar, the landing keeps it in the header), so this primitive carries no display or placement. The icon is the status, the label the action. */ .pacey-theme-toggle { align-items: center; justify-content: center; padding: 0; border-radius: 40%; border: 0.0625rem solid var(--pacey-border); background: var(--pacey-surface); box-shadow: 0 0.125rem 0.5rem rgba(29, 53, 87, 0.12); cursor: pointer; color: var(--pacey-muted); transition: background-color 0.3s ease, color 0.15s ease, transform 0.1s ease; -webkit-tap-highlight-color: transparent; } .pacey-theme-toggle:hover { color: var(--pacey-navy); } .pacey-theme-toggle:active { transform: scale(0.9); } /* Dark mode: surface and border step back, shadow deepens, ink goes navy — the same treatment the app's floating toggle always had. */ [data-theme="dark"] .pacey-theme-toggle { background: color-mix(in srgb, var(--pacey-surface) 90%, transparent); border-color: color-mix(in srgb, var(--pacey-border) 60%, transparent); box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3); color: var(--pacey-navy); }