/* * Follow design system - Daily Rhythm. * * One layout language across both brands: warm off-white ground, dark ink, * generous whitespace, softly rounded cards, a graceful serif reserved for * headline greetings and a humanist sans everywhere else. * * Flavour keeps Daily Rhythm's muted terracotta. Fitness takes the Performance * Studio cobalt and a cooler ground (D3), so the two sides are unmistakable * without becoming two different products. * * Brand colours arrive as custom properties set on from the active * brand, so nothing here hard-codes which brand is showing. */ :root { --ink: #232824; --ink-soft: #5c6560; --ink-faint: #8b938e; --line: rgba(35, 40, 36, 0.12); --line-soft: rgba(35, 40, 36, 0.06); --radius: 22px; --radius-sm: 14px; --radius-pill: 999px; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --shadow: 0 1px 2px rgba(35, 40, 36, 0.04), 0 12px 28px rgba(35, 40, 36, 0.06); } body { background: var(--surface, #faf8f4); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; padding-bottom: 4rem; } /* ---------------------------------------------------------------- type --- */ .follow-greeting { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 5vw, 2.6rem); letter-spacing: -0.015em; line-height: 1.15; margin-bottom: 0.25rem; } .follow-eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; font-weight: 600; color: var(--ink-faint); } .follow-lede { color: var(--ink-soft); } h1, h2, h3, h4 { letter-spacing: -0.01em; } h2 { font-size: 1.3rem; font-weight: 650; } h3 { font-size: 1.05rem; font-weight: 650; } .follow-numeral { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- chrome --- */ .follow-header { padding: 1.25rem 0 0.5rem; } .follow-wordmark { font-family: var(--serif); font-size: 1.35rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; } .follow-wordmark span { color: var(--accent); } .follow-monogram { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); display: inline-flex; align-items: center; justify-content: center; font-weight: 650; text-decoration: none; } /* The two-option mode switch, present on every page of both brands. */ .follow-switch { display: inline-flex; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.2rem; gap: 0.2rem; } .follow-switch button { border: 0; background: transparent; border-radius: var(--radius-pill); padding: 0.35rem 1rem; font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; } .follow-switch button[aria-current="true"] { background: var(--accent-soft); color: var(--accent-strong); } .follow-nav { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.75rem 0 0.25rem; scrollbar-width: none; } .follow-nav::-webkit-scrollbar { display: none; } .follow-nav a { white-space: nowrap; padding: 0.4rem 0.9rem; border-radius: var(--radius-pill); font-size: 0.9rem; font-weight: 550; color: var(--ink-soft); text-decoration: none; } .follow-nav a:hover { background: var(--line-soft); color: var(--ink); } .follow-nav a[aria-current="page"] { background: var(--accent); color: var(--accent-contrast); } /* ---------------------------------------------------------------- cards --- */ .follow-card { background: var(--surface-raised); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.35rem; } .follow-card--tight { padding: 1rem 1.15rem; } .follow-card--flat { box-shadow: none; border-color: var(--line); } .follow-card__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 650; color: var(--accent-strong); } /* --------------------------------------------------------------- pieces --- */ .follow-stat { display: flex; flex-direction: column; gap: 0.1rem; } .follow-stat__value { font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.1; } .follow-stat__label { font-size: 0.78rem; color: var(--ink-faint); } .follow-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft); } .follow-row:last-child { border-bottom: 0; } .follow-tag { display: inline-block; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 650; background: var(--accent-soft); color: var(--accent-strong); } .follow-tag--quiet { background: var(--line-soft); color: var(--ink-soft); } .follow-tag--warn { background: #fdf0d9; color: #8a5a10; } .follow-footer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; } .follow-empty { padding: 2rem 1rem; text-align: center; color: var(--ink-faint); border: 1px dashed var(--line); border-radius: var(--radius); } /* -------------------------------------------------------------- actions --- */ .btn-follow, .btn-follow-quiet, .btn-follow-bare { /* Buttons and button-shaped links must look identical, so the link underline Bootstrap applies is removed here rather than per template. */ text-decoration: none; display: inline-block; cursor: pointer; } .btn-follow { background: var(--accent); color: var(--accent-contrast); border: 0; border-radius: var(--radius-pill); padding: 0.6rem 1.4rem; font-weight: 600; } .btn-follow:hover, .btn-follow:focus { background: var(--accent-strong); color: var(--accent-contrast); } .btn-follow-quiet { background: transparent; color: var(--accent-strong); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.5rem 1.15rem; font-weight: 600; } .btn-follow-quiet:hover { background: var(--accent-soft); } .btn-follow-bare { background: transparent; border: 0; color: var(--ink-faint); padding: 0.2rem 0.45rem; font-size: 0.85rem; } .btn-follow-bare:hover { color: var(--ink); } /* --------------------------------------------------------------- forms --- */ .form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--line); padding: 0.55rem 0.8rem; } .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem var(--accent-soft); } .form-label { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); } a { color: var(--accent-strong); } /* --------------------------------------------------------------- utils --- */ .follow-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; } .follow-day--today { border-color: var(--accent); } .follow-checked { text-decoration: line-through; color: var(--ink-faint); } .htmx-request .follow-busy { opacity: 0.55; transition: opacity 120ms ease; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }