/* Guideline‑Compliant Base Stylesheet Color Scheme: --bg: #F9F6F1 (Light Skin) --primary: #1E3D1F (Dark Green) --accent: #2D5E2E (Green) Typography: Poppins / Lato first, then system fallbacks Layout: Minimalist, content‑focused, mobile responsive Logo Placement: .site-header with center/left options */ :root { --bg: #F9F6F1; --primary: #1E3D1F; --accent: #2D5E2E; --text: #333333; --muted: rgba(30, 61, 31, 0.12); --border: rgba(30, 61, 31, 0.35); --focus-ring: rgba(45, 94, 46, 0.35); } /* Optional: include webfont imports in your HTML if desired */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--bg); color: var(--text); font-family: "Poppins", "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.6; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Typography */ h1, h2, h3, h4, h5, h6 { color: var(--primary); font-family: inherit; font-weight: 600; line-height: 1.2; margin-block: .5rem 1rem; } h1 { font-size: clamp(2rem, 4vw, 2.5rem); } h2 { font-size: clamp(1.75rem, 3vw, 2rem); } h3 { font-size: clamp(1.5rem, 2.5vw, 1.75rem); } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1rem; } p { margin-block: 0 .9rem; } small { font-size: 80%; } /* Links */ a { background-color: transparent; color: var(--accent); text-decoration: none; } a:hover, a:active { color: var(--primary); } /* Images */ img { border-style: none; height: auto; max-width: 100%; } /* Code & Pre */ pre, code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.95em; } pre { white-space: pre-wrap; } /* Lists */ ul, ol, dl { margin: 0; padding: 0; } /* Horizontal rule */ hr { box-sizing: content-box; height: 0; border: 0; border-top: 1px solid var(--border); } /* Forms */ label { display: inline-block; line-height: 1.2; vertical-align: middle; } button, input, select, textarea { font: inherit; line-height: 1.5; margin: 0; } input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], textarea, select { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: .65rem .9rem; transition: border-color .2s, box-shadow .2s; width: 100%; } input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 .2rem var(--focus-ring); } /* Buttons */ button, [type="button"], [type="submit"], [type="reset"] { -webkit-appearance: button; background-color: transparent; border: 1px solid var(--primary); border-radius: 999px; /* pill for minimalist aesthetic */ color: var(--primary); display: inline-block; font-weight: 500; padding: .55rem 1rem; text-align: center; transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s; user-select: none; white-space: nowrap; } button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus { background-color: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 0 0 .2rem var(--focus-ring); } button:disabled, [type="button"]:disabled, [type="submit"]:disabled, [type="reset"]:disabled { opacity: .6; cursor: not-allowed; } /* Tables */ table { background-color: transparent; border-collapse: collapse; border-spacing: 0; font-size: .95em; margin-block-end: 1rem; width: 100%; } table th, table td { border: 1px solid var(--border); line-height: 1.5; padding: 12px; vertical-align: top; } table th { font-weight: 600; color: var(--primary); } table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th { background-color: rgba(45, 94, 46, 0.06); } table tbody tr:hover > td, table tbody tr:hover > th { background-color: rgba(45, 94, 46, 0.1); } /* Figures */ figcaption { color: var(--text); font-size: 0.95rem; font-style: italic; font-weight: 400; line-height: 1.4; } /* Layout helpers */ .container { width: min(92%, 1200px); margin-inline: auto; } .section { padding-block: clamp(2rem, 6vw, 4rem); } /* Header with logo placement options */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--muted); } .site-header .inner { display: flex; align-items: center; justify-content: center; /* default center */ gap: 1rem; padding: .8rem 1rem; } /* Add .left or .space-between to .inner to change logo placement */ .site-header .inner.left { justify-content: flex-start; } .site-header .inner.space-between { justify-content: space-between; } .site-logo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--primary); text-decoration: none; } .site-logo img { height: 36px; width: auto; } /* Print adjustments */ @media print { *, *::before, *::after { background: transparent !important; box-shadow: none !important; color: #000 !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; } abbr[title]::after { content: " (" attr(title) ")"; } a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; } pre { white-space: pre-wrap !important; } blockquote, pre { break-inside: avoid; border: 1px solid #ccc; } thead { display: table-header-group; } img, tr { break-inside: avoid; } h2, h3, p { orphans: 3; widows: 3; } h2, h3 { break-after: avoid; } } /* Responsive tweaks */ @media (max-width: 767px) { table { font-size: .9em; } table th, table td { padding: 10px; } .site-header .inner { padding: .7rem .8rem; } } .page-header { display: none; }