/* ============================================================= Lili Dauphinee blog portal — shared stylesheet. This repo has no self-hosted blog or marketing site (drafts are copied into Squarespace by hand), so the only consumer of this file is admin/index.html. Kept intentionally lean: base type, buttons, and form fields — nothing for pages that don't exist here. Design: warm cream / brown-red, Julius Sans One + Almarai. Plain CSS, no framework, no build step. ============================================================= */ /* ------------------------------------------------------------- 1. Fonts (Google Fonts, linked from admin/index.html ) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 2. Design tokens ------------------------------------------------------------- */ :root { /* Color */ --bg: rgb(243, 237, 229); /* warm cream */ --surface: #faf7f1; /* slightly lighter than --bg, for cards */ --text: rgb(107, 71, 71); /* warm dark brown-red */ --text-light: rgb(243, 237, 229); /* cream, for text on a --text background */ --text-muted: #8a7268; --accent-dark: #7d5252; /* --text darkened, for hover states */ --border: #e3d9c8; /* Typography */ --font-head: 'Julius Sans One', Georgia, sans-serif; --font-body: 'Almarai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Spacing */ --card-pad: 24px; --gap-tight: 16px; --gap-standard: 24px; --gap-loose: 32px; /* Misc */ --radius-btn: 6px; --radius-card: 8px; --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ------------------------------------------------------------- 3. Reset / base ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--text); text-decoration: underline; transition: color 0.15s var(--ease); } a:hover { color: var(--accent-dark); } ul, ol { margin: 0 0 var(--gap-standard); padding-left: 1.25em; } p { margin: 0 0 var(--gap-standard); } /* ------------------------------------------------------------- 4. Typography scale ------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.45px; color: var(--text); margin: 0 0 var(--gap-standard); } h1 { font-size: 32px; line-height: 1.2; } h2 { font-size: 24px; line-height: 1.3; } h3 { font-size: 19px; line-height: 1.3; } h4 { font-size: 17px; line-height: 1.3; } .meta, .caption { font-size: 13px; line-height: 1.5; color: var(--text-muted); } .lead { font-size: 18px; line-height: 1.6; } /* Visible focus on all interactive elements */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; } /* ------------------------------------------------------------- 5. Buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; padding: 12px 24px; border-radius: var(--radius-btn); border: 1.5px solid transparent; cursor: pointer; text-align: center; text-decoration: none; transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease); } .btn:hover { text-decoration: none; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn--primary { background: var(--text); color: var(--text-light); border-color: var(--text); } .btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--text-light); } .btn--secondary { background: transparent; color: var(--text); border-color: var(--text); } .btn--secondary:hover { background: var(--text); color: var(--text-light); } /* ------------------------------------------------------------- 6. Forms ------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 14px; font-weight: 500; color: var(--text); } .input, .select, .textarea { width: 100%; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 12px 14px; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(107, 71, 71, 0.15); } .textarea { min-height: 140px; resize: vertical; } /* ------------------------------------------------------------- 7. Utilities ------------------------------------------------------------- */ .center { text-align: center; } .mx-auto { margin-inline: auto; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }