/* Chiminey Cricket — minimal, accessible, responsive CSS */ /* Color system */ :root { --brand: #772432; --slate: #5F6A72; --ink: #0b0f13; --bg: #ffffff; --muted: #f4f5f6; --cta: var(--brand); --btn-bg: #e6e7e9; --btn-text: #000000; --link: var(--brand); --focus: #1d4ed8; /* visible focus blue */ color-scheme: light; } /* Auto dark mode (when OS/browser prefers it) */ @media (prefers-color-scheme: dark) { :root { --bg: #111418; --ink: #f4f4f4; --muted: #1e2329; --btn-bg: #1a1e24; --btn-text: #f4f4f4; --link: #9ab5ff; color-scheme: dark; } } /* Manual override via */ :root[data-theme="dark"] { --bg: #111418; --ink: #f4f4f4; --muted: #1e2329; --btn-bg: #1a1e24; --btn-text: #f4f4f4; --link: #9ab5ff; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; } img { max-width: 100%; height: auto; display: block; } .container { width: min(1100px, 92vw); margin-inline: auto; } h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; } .lead { font-size: 1.125rem; color: var(--ink); } a { color: var(--link); text-decoration: underline; text-underline-offset: .15em; } a.btn { text-decoration: none; } .btn { display: inline-block; padding: .7rem 1rem; border-radius: .75rem; background: var(--btn-bg); color: var(--ink); border: 1px solid #d1d5db; } .btn-cta { background: var(--cta); color: var(--btn-text); border-color: var(--brand); } @media (prefers-color-scheme: light) { .btn-cta { color: #ffffff; /* white text for contrast */ } } .btn-secondary { background: var(--bg); border-color: #d1d5db; color: var(--ink); } .micro { font-size: .9rem; color: #4b5563; } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { position: static; width: auto; height: auto; padding: .5rem; background: #fffbcc; } /* Header / Nav */ .site-header { background: var(--bg); border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 50; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; } .brand { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; } .brand-text { font-weight: 700; font-size: 1.15rem; } .nav-toggle { display: none; background: none; border: 1px solid #e5e7eb; border-radius: .5rem; padding: .35rem .55rem; } .nav-list { display: flex; align-items: center; gap: 1rem; list-style: none; margin: 0; padding: 0; } .nav-list a { text-decoration: none; color: var(--ink); padding: .5rem .6rem; border-radius: .5rem; } .nav-list a:hover, .nav-list a:focus { background: var(--muted); } /* Hero */ .hero { background: linear-gradient(90deg, var(--muted), var(--bg)); border-bottom: 1px solid #e5e7eb; } .hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; padding: 1.5rem 0; } .hero-copy h1 { font-size: 2rem; } .hero-media img { border-radius: 1rem; max-height: 250px; width: auto; height: auto; } /* Sections */ .section { padding: 2rem 0; } .bg-muted { background: var(--muted); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; } /* Cards */ .card-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .card { background: var(--bg); border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1rem; } .card img { border-radius: .75rem; } /* Testimonials */ .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .testimonial { background: var(--bg); border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1rem; } /* Page hero */ .page-hero { padding: 2rem 0 1rem; border-bottom: 1px solid #e5e7eb; } /* Values / Team */ .values-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; } .team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .team-card { background: var(--bg); border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1rem; } /* News */ .post-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .post-card { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; border: 1px solid #e5e7eb; border-radius: .75rem; overflow: hidden; background: var(--bg); } .post-media img { width: 100%; height: 100%; object-fit: cover; } .post-body { padding: .75rem; } .post-title { margin: 0 0 .5rem; } .post .post-header img { border-radius: .75rem; margin: 1rem 0; } /* Contact */ .contact-form { display: grid; gap: .75rem; } .form-field label { display: block; font-weight: 600; margin-bottom: .25rem; } .form-field input, .form-field textarea { width: 100%; padding: .6rem .7rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: var(--bg); color: var(--ink); } .form-field input:focus, .form-field textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; } .contact-image img { border-radius: .75rem; } /* Footer */ .site-footer { margin-top: 2rem; background: var(--bg); color: var(--ink); border-top: 1px solid #2b2f34; } .site-footer a { color: var(--link); text-decoration: none; } .site-footer a:hover { text-decoration: underline; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; padding: 1.25rem 0; } .footer-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; } .footer-cta .socials { display: flex; gap: .5rem; margin-top: .5rem; } .footer-small { padding: .75rem 0; } /* Theme toggle button */ .theme-toggle { margin-left: 1rem; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--ink); } .theme-toggle:focus-visible { outline: 2px solid var(--focus); border-radius: .25rem; } /* Accessibility helpers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Responsive */ @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } .split { grid-template-columns: 1fr; } .card-grid { grid-template-columns: 1fr; } .testimonial-grid { grid-template-columns: 1fr; } .post-card { grid-template-columns: 1fr; } .nav-toggle { display: inline-block; } .nav-list { display: none; flex-direction: column; align-items: flex-start; background: var(--bg); position: absolute; right: 1rem; top: 3.25rem; padding: .5rem; border: 1px solid #e5e7eb; border-radius: .75rem; } .nav-list.open { display: flex; } }