@charset "UTF-8"; /* ========================================================================== FROGCHORUS — a field-journal template for wetland/naturalist sites Design system: pond palette, journal typography, call-waveform signature ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Work+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"); :root { /* ---- Color tokens: nocturnal pond ---- */ --fc-ink: #12211A; /* near-black swamp green — page background */ --fc-ink-raised: #182B21; /* card / raised surface */ --fc-moss: #3F5C3F; /* mid green — borders, secondary text */ --fc-moss-soft: #A9BFA6; /* muted green — body copy on dark */ --fc-parchment: #EDE6D6; /* warm off-white — headings, light surfaces */ --fc-mud: #6B4F3A; /* brown — grounding, dividers */ --fc-duckweed: #8FB93E; /* acid green accent — primary interactive */ --fc-gold-eye: #D9A441; /* amber — sparing highlight, focus, waveform peak */ /* ---- Species accent variants (overridden per html.fc-species-*) ---- */ --fc-accent: var(--fc-duckweed); /* ---- Type ---- */ --fc-font-display: 'Fraunces', Georgia, serif; --fc-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif; --fc-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* ---- Scale & rhythm ---- */ --fc-radius: 3px; --fc-gap: 1.5rem; --fc-max-width: 76rem; --fc-rail-width: 17rem; color-scheme: dark; } /* Species accent overrides — set via template param on */ html.fc-species-litoria { --fc-accent: #6FBFA0; } /* stream-tone teal-green */ html.fc-species-dendrobates { --fc-accent: #E0703C; } /* poison-dart orange */ /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--fc-ink); color: var(--fc-moss-soft); font-family: var(--fc-font-body); font-size: 1rem; line-height: 1.6; } nav { background-color: #6FBFA0; } img { max-width: 100%; display: block; } a { color: var(--fc-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } h1, h2, h3, h4 { font-family: var(--fc-font-display); color: var(--fc-parchment); font-weight: 600; line-height: 1.15; margin: 0 0 0.6em; } h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem); } h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); } h3 { font-size: 1.25rem; } p { margin: 0 0 1.1em; } /* Focus visibility everywhere — accessibility floor */ :focus-visible { outline: 2px solid var(--fc-gold-eye); outline-offset: 2px; } .fc-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; } .fc-skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--fc-gold-eye); color: var(--fc-ink); padding: 0.75rem 1.25rem; font-weight: 600; border-radius: 0 0 var(--fc-radius) 0; } .fc-skip-link:focus { left: 0; } /* ========================================================================== HEADER ========================================================================== */ .fc-header { border-bottom: 1px solid var(--fc-moss); background: var(--fc-ink); position: relative; z-index: 50; } .fc-nav-sticky .fc-header { position: sticky; top: 0; } .fc-header__inner { max-width: var(--fc-max-width); margin: 0 auto; padding: 0.9rem 1.5rem; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1rem; } .fc-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--fc-parchment); } .fc-brand__mark { width: 2.25rem; height: 2.25rem; color: var(--fc-accent); flex-shrink: 0; } .fc-brand__mark svg { width: 100%; height: 100%; } .fc-brand__text { display: flex; flex-direction: column; line-height: 1.2; } .fc-brand__name { font-family: var(--fc-font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.01em; } .fc-brand__tagline { font-family: var(--fc-font-mono); font-size: 0.7rem; color: var(--fc-moss-soft); text-transform: uppercase; letter-spacing: 0.08em; } .fc-primary-nav { grid-column: 3; } .fc-primary-nav ul { list-style: none; display: flex; gap: 1.75rem; margin: 0; padding: 0; } .fc-primary-nav a { color: var(--fc-moss-soft); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: 0.4rem 0; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .fc-primary-nav a:hover, .fc-primary-nav li.current a, .fc-primary-nav li.active a { color: var(--fc-parchment); border-bottom-color: var(--fc-accent); } .fc-header__search { grid-column: 4; } .fc-header__search input[type=text], .fc-header__search input[type=search] { background: var(--fc-ink-raised); border: 1px solid var(--fc-moss); color: var(--fc-parchment); border-radius: var(--fc-radius); padding: 0.45rem 0.75rem; font-family: var(--fc-font-mono); font-size: 0.85rem; width: 11rem; } .fc-nav-toggle { display: none; grid-column: 2; justify-self: end; background: none; border: 1px solid var(--fc-moss); border-radius: var(--fc-radius); width: 2.5rem; height: 2.5rem; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; } .fc-nav-toggle__bar { width: 1.1rem; height: 2px; background: var(--fc-parchment); } /* ========================================================================== HERO — the field-notebook cover ========================================================================== */ .fc-hero { position: relative; overflow: hidden; padding: 4.5rem 1.5rem 3.5rem; background: radial-gradient(ellipse at 20% 0%, rgba(143, 185, 62, 0.1), transparent 55%), var(--fc-ink); border-bottom: 1px solid var(--fc-moss); } .fc-hero__ripples { position: absolute; inset: 0; pointer-events: none; background-image: repeating-radial-gradient(circle at 85% 30%, transparent 0, transparent 28px, rgba(143, 185, 62, 0.05) 29px, transparent 30px); opacity: 0.6; } .fc-hero__inner { position: relative; max-width: var(--fc-max-width); margin: 0 auto; } .fc-eyebrow { font-family: var(--fc-font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; color: var(--fc-accent); margin: 0 0 0.75rem; } .fc-hero__title { max-width: 34rem; } .fc-hero__sub { max-width: 32rem; font-size: 1.1rem; color: var(--fc-moss-soft); } /* Signature element: the species call waveform */ .fc-waveform { margin-top: 2.5rem; width: 100%; max-width: 40rem; color: var(--fc-accent); } .fc-waveform svg { width: 100%; height: auto; display: block; } .fc-waveform .fc-wave-peak { fill: var(--fc-gold-eye); } .fc-breadcrumbs { max-width: var(--fc-max-width); margin: 0 auto; padding: 0.75rem 1.5rem 0; font-family: var(--fc-font-mono); font-size: 0.8rem; color: var(--fc-moss); } .fc-breadcrumbs a { color: var(--fc-moss-soft); } .fc-banner-top { max-width: var(--fc-max-width); margin: 0 auto; padding: 0.75rem 1.5rem 0; } /* ========================================================================== MAIN GRID — CSS Grid layout, rails collapse based on active modules ========================================================================== */ .fc-layout { max-width: var(--fc-max-width); margin: 0 auto; padding: 2.5rem 1.5rem 3rem; display: grid; gap: var(--fc-gap); } .fc-layout--full { grid-template-columns: 1fr; } .fc-layout--left { grid-template-columns: var(--fc-rail-width) 1fr; } .fc-layout--right { grid-template-columns: 1fr var(--fc-rail-width); } .fc-layout--both { grid-template-columns: var(--fc-rail-width) 1fr var(--fc-rail-width); } .fc-rail { min-width: 0; } .fc-rail--left { grid-column: 1; } .fc-layout--right .fc-main { grid-column: 1; } .fc-layout--right .fc-rail--right { grid-column: 2; } .fc-layout--both .fc-main { grid-column: 2; } .fc-layout--both .fc-rail--right { grid-column: 3; } .fc-main { min-width: 0; } .fc-card { background: var(--fc-ink-raised); border: 1px solid var(--fc-moss); border-radius: var(--fc-radius); padding: 1.25rem 1.4rem; margin-bottom: var(--fc-gap); } .fc-card h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; } .fc-content-top, .fc-content-bottom { margin-bottom: var(--fc-gap); } .fc-component { min-width: 0; } .fc-component--standalone { max-width: var(--fc-max-width); margin: 2rem auto; padding: 0 1.5rem; } /* Base article/content typography */ .fc-component article, .fc-component .item-page { max-width: 42rem; } .fc-component blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 2px solid var(--fc-accent); font-family: var(--fc-font-display); font-style: italic; color: var(--fc-parchment); } .fc-component code, .fc-component pre { font-family: var(--fc-font-mono); background: var(--fc-ink-raised); border-radius: var(--fc-radius); } .fc-component table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .fc-component th, .fc-component td { border: 1px solid var(--fc-moss); padding: 0.5rem 0.7rem; text-align: left; } .fc-component th { font-family: var(--fc-font-mono); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; color: var(--fc-moss-soft); } /* ========================================================================== SPECIMEN ROW — species-catalog style module band (full width) ========================================================================== */ .fc-specimen-row { border-top: 1px solid var(--fc-moss); border-bottom: 1px solid var(--fc-moss); background: var(--fc-ink-raised); padding: 2.5rem 1.5rem; } .fc-specimen-row > * { max-width: var(--fc-max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--fc-gap); } .fc-specimen { border: 1px solid var(--fc-moss); border-radius: var(--fc-radius); padding: 1.1rem; background: var(--fc-ink); } .fc-specimen h3 { font-family: var(--fc-font-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fc-accent); } /* ========================================================================== BUTTONS & FORMS ========================================================================== */ .fc-btn { display: inline-block; font-family: var(--fc-font-body); font-weight: 600; font-size: 0.92rem; padding: 0.65rem 1.4rem; border-radius: var(--fc-radius); border: 1px solid var(--fc-accent); text-decoration: none; cursor: pointer; transition: transform 0.12s ease, background 0.12s ease; } .fc-btn--primary { background: var(--fc-accent); color: var(--fc-ink); } .fc-btn--primary:hover { transform: translateY(-1px); } .fc-input { display: block; width: 100%; background: var(--fc-ink); border: 1px solid var(--fc-moss); color: var(--fc-parchment); border-radius: var(--fc-radius); padding: 0.55rem 0.75rem; margin: 0.35rem 0 1rem; font-family: var(--fc-font-body); } /* ========================================================================== FOOTER ========================================================================== */ .fc-footer { background: var(--fc-ink-raised); border-top: 1px solid var(--fc-moss); margin-top: 2rem; } .fc-footer__band { color: var(--fc-moss); opacity: 0.5; line-height: 0; } .fc-footer__band svg { width: 100%; height: 32px; display: block; } .fc-footer__grid { max-width: var(--fc-max-width); margin: 0 auto; padding: 2.5rem 1.5rem 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--fc-gap); } .fc-footer__col h3 { font-family: var(--fc-font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fc-accent); } .fc-footer__copyright { max-width: var(--fc-max-width); margin: 0 auto; padding: 1rem 1.5rem 2rem; font-family: var(--fc-font-mono); font-size: 0.78rem; color: var(--fc-moss); border-top: 1px solid var(--fc-moss); } .fc-debug { max-width: var(--fc-max-width); margin: 0 auto; padding: 0 1.5rem 2rem; } /* ========================================================================== ERROR & OFFLINE PAGES ========================================================================== */ .fc-error, .fc-offline { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem; max-width: 34rem; margin: 0 auto; } .fc-error__waveform { width: 12rem; color: var(--fc-moss); margin-bottom: 1rem; } .fc-error__code { font-family: var(--fc-font-mono); color: var(--fc-accent); font-size: 0.9rem; letter-spacing: 0.1em; } .fc-offline__mark { width: 4rem; color: var(--fc-accent); margin-bottom: 1.5rem; } .fc-offline__login { text-align: left; width: 100%; max-width: 20rem; margin-top: 1.5rem; } .fc-offline__login label { font-family: var(--fc-font-mono); font-size: 0.8rem; color: var(--fc-moss-soft); } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 860px) { .fc-layout--left, .fc-layout--right, .fc-layout--both { grid-template-columns: 1fr; } .fc-rail--left, .fc-rail--right, .fc-layout--right .fc-main, .fc-layout--both .fc-main, .fc-layout--right .fc-rail--right, .fc-layout--both .fc-rail--right { grid-column: 1; } } @media (max-width: 720px) { .fc-header__inner { grid-template-columns: auto 1fr auto; } .fc-nav-toggle { display: flex; } .fc-header__search { grid-column: 1/-1; order: 3; } .fc-primary-nav { grid-column: 1/-1; order: 4; display: none; width: 100%; } .fc-primary-nav.is-open { display: block; } .fc-primary-nav ul { flex-direction: column; gap: 0; padding: 0.5rem 0; } .fc-primary-nav a { display: block; padding: 0.6rem 0; border-bottom: 1px solid var(--fc-moss); } .fc-hero { padding: 3rem 1.25rem 2.5rem; } }/*# sourceMappingURL=template.css.map */