/* --------------------------------------------------------------------- Insensa-GIS — site stylesheet Single file, no preprocessor. Custom properties drive the theme so a dark-mode toggle is just `data-theme="dark"` on . --------------------------------------------------------------------- */ :root { /* Light theme — earthy, cartography-inspired */ --bg: #fbf8f1; --bg-elev: #ffffff; --bg-muted: #f0ebe0; --fg: #1f1d1a; --fg-muted: #5a554c; --fg-faint: #8a8478; --accent: #2d6a4f; /* deep moss green */ --accent-fg: #ffffff; --accent-soft: #d8e8df; --warn: #c98a2b; --border: #e3dccb; --border-soft: #efe9d8; --code-bg: #1f1d1a; --code-fg: #ece6d4; --radius: 8px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.02); --shadow-md: 0 8px 24px rgba(31,29,26,.08), 0 0 0 1px rgba(0,0,0,.04); --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --container: 72rem; --gutter: 1.25rem; color-scheme: light; } [data-theme="dark"] { --bg: #15171a; --bg-elev: #1c1f23; --bg-muted: #22262c; --fg: #ece6d4; --fg-muted: #b3ad9d; --fg-faint: #847d6e; --accent: #74c69d; --accent-fg: #0e1311; --accent-soft: #1f3a2c; --warn: #e0a456; --border: #2c3037; --border-soft: #21252b; --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04); --shadow-md: 0 8px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #15171a; --bg-elev: #1c1f23; --bg-muted: #22262c; --fg: #ece6d4; --fg-muted: #b3ad9d; --fg-faint: #847d6e; --accent: #74c69d; --accent-fg: #0e1311; --accent-soft: #1f3a2c; --warn: #e0a456; --border: #2c3037; --border-soft: #21252b; --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04); --shadow-md: 0 8px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04); color-scheme: dark; } } /* --------------------------------------------------------------------- */ /* Reset */ /* --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; } a:hover { text-decoration-color: var(--accent); } h1, h2, h3, h4 { font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 .5em; } h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); } h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); } h3 { font-size: 1.2rem; } code, pre { font-family: var(--font-mono); font-size: .92em; } pre { background: var(--code-bg); color: var(--code-fg); padding: 1.25rem 1.5rem; border-radius: var(--radius); overflow-x: auto; line-height: 1.55; } :not(pre) > code { background: var(--bg-muted); padding: 0.1em 0.4em; border-radius: 4px; } .visually-hidden { position: absolute !important; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; white-space: nowrap; } .container { width: min(100%, var(--container)); margin-inline: auto; padding-inline: var(--gutter); } /* --------------------------------------------------------------------- */ /* Header */ /* --------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--border-soft); } .site-header__inner { display: flex; align-items: center; gap: 1.5rem; height: 64px; } .site-header__brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--fg); font-weight: 700; letter-spacing: -0.01em; } .site-header__brand-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; background: var(--accent); color: var(--accent-fg); border-radius: 6px; font-family: var(--font-mono); font-weight: 800; } .site-header__brand-text { font-size: 1.05rem; } .site-nav { margin-left: auto; } .site-nav__list { display: flex; gap: 1.25rem; list-style: none; padding: 0; margin: 0; } .site-nav__list a { color: var(--fg-muted); text-decoration: none; font-weight: 500; padding: .25rem 0; border-bottom: 2px solid transparent; } .site-nav__list a:hover { color: var(--fg); } .site-nav__list a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); } .site-nav__toggle { display: none; } .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--fg); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; transition: background .15s ease; } .theme-toggle:hover { background: var(--bg-muted); } /* --------------------------------------------------------------------- */ /* Hero */ /* --------------------------------------------------------------------- */ .hero { padding: clamp(3rem, 6vw, 6rem) 0 clamp(2rem, 4vw, 4rem); background: radial-gradient(ellipse 80% 60% at 80% 0%, var(--accent-soft) 0%, transparent 50%), var(--bg); } .hero__title { margin-bottom: 1rem; font-weight: 700; } .hero__title-accent { color: var(--accent); } .hero__pitch { font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem); color: var(--fg-muted); max-width: 38rem; margin: 0 0 2rem; } .hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem; } .hero__code { margin-top: 2.5rem; max-width: 56rem; box-shadow: var(--shadow-md); } /* --------------------------------------------------------------------- */ /* Buttons */ /* --------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.4rem; border-radius: var(--radius); font-weight: 550; text-decoration: none; border: 1px solid transparent; transition: transform .1s ease, box-shadow .15s ease, background .15s; } .btn--primary { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-sm); } .btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, black); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn--ghost { background: transparent; color: var(--fg); border-color: var(--border); } .btn--ghost:hover { background: var(--bg-muted); } /* --------------------------------------------------------------------- */ /* Sections */ /* --------------------------------------------------------------------- */ .section-title { margin-bottom: 2rem; } .features { padding: 4rem 0; } .card-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .card { padding: 1.5rem 1.6rem; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .card__title { margin-bottom: .5rem; } .card p { color: var(--fg-muted); margin: 0; } .who { padding: 2rem 0 5rem; } .who__list { padding-left: 1.2rem; max-width: 50rem; } .who__list li { margin-bottom: .75rem; color: var(--fg-muted); } .who__list strong { color: var(--fg); } /* --------------------------------------------------------------------- */ /* Page (about, download, plugins, docs, news) */ /* --------------------------------------------------------------------- */ .page { padding: 3rem 0 5rem; } .page__inner { max-width: 50rem; } .page__title { margin-bottom: 1.5rem; } .page__lead { font-size: clamp(1.05rem, .95rem + .35vw, 1.2rem); color: var(--fg-muted); margin: 0 0 2rem; } .page h2 { margin-top: 2.5rem; } .page h3 { margin-top: 1.75rem; } .page p, .page ul, .page ol { color: var(--fg-muted); margin: 0 0 1em; } .page p strong, .page li strong { color: var(--fg); } .page ul, .page ol { padding-left: 1.4rem; } .page li { margin-bottom: .35rem; } .page__body p { margin: 0 0 1em; color: var(--fg-muted); } .page__body p strong { color: var(--fg); } /* Soft subdued text */ .muted { color: var(--fg-muted); } /* Citation block */ blockquote.cite { border-left: 3px solid var(--accent); background: var(--bg-muted); padding: 1rem 1.25rem; margin: 1rem 0 2rem; border-radius: 0 var(--radius) var(--radius) 0; color: var(--fg); font-size: .98rem; } blockquote.cite em { color: var(--fg-muted); font-style: italic; } /* Download cards */ .download-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 1.5rem 0 1rem; } .download-card { display: flex; flex-direction: column; padding: 1.25rem 1.4rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: var(--fg); transition: transform .12s, box-shadow .15s, border-color .15s; } .download-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md); text-decoration: none; } .download-card__os { font-weight: 650; font-size: 1.1rem; color: var(--fg); } .download-card__hint { color: var(--fg-muted); font-size: .85rem; margin-top: .15rem; } /* Plugin list */ .plugin-list { list-style: none; padding: 0; margin: 1rem 0 2rem; display: grid; gap: .75rem; } .plugin-list > li { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1rem 1.2rem; } .plugin-list strong { color: var(--fg); margin-right: .6rem; } .plugin-list p { margin: .35rem 0 0; color: var(--fg-muted); font-size: .95rem; } .plugin-meta { display: inline-block; font-size: .8rem; font-family: var(--font-mono); background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 70%, var(--fg)); padding: 0.1rem 0.55rem; border-radius: 999px; } /* Publications list */ .publications { list-style: disc; padding-left: 1.4rem; } .publications li { margin-bottom: 1rem; color: var(--fg-muted); } .publications em { color: var(--fg); font-style: italic; } /* News list / item */ .news-list { list-style: none; padding: 0; margin: 0; } .news-item { padding: 1.25rem 0; border-bottom: 1px solid var(--border-soft); } .news-item__title { margin: 0 0 .25rem; font-size: 1.2rem; } .news-item__title a { color: var(--fg); text-decoration: none; } .news-item__title a:hover { color: var(--accent); } .news-item__date { display: block; color: var(--fg-faint); font-size: .85rem; font-family: var(--font-mono); margin-bottom: .5rem; } .news-item__excerpt { color: var(--fg-muted); margin: 0; } .back-link { display: inline-block; margin-bottom: 1.5rem; color: var(--fg-muted); text-decoration: none; font-size: .9rem; } .back-link:hover { color: var(--accent); } /* --------------------------------------------------------------------- */ /* Code highlighting (super lightweight, hand-rolled) */ /* --------------------------------------------------------------------- */ .hero__code .c { color: #b3ad9d; font-style: italic; } .hero__code .kw { color: #f4a96b; } .hero__code .s { color: #a3d9a5; } .hero__code .n { color: #e0a4ff; } /* --------------------------------------------------------------------- */ /* Footer */ /* --------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border-soft); background: var(--bg-muted); padding: 3rem 0 1.5rem; color: var(--fg-muted); } .site-footer__inner { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .site-footer__col strong { display: block; margin-bottom: .5rem; color: var(--fg); font-weight: 600; } .site-footer__col ul { list-style: none; padding: 0; margin: 0; } .site-footer__col ul li { margin: .25rem 0; } .site-footer__bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-soft); color: var(--fg-faint); font-size: .85rem; display: flex; align-items: center; gap: .9rem; } .site-footer__mark { width: auto; height: 56px; flex-shrink: 0; opacity: .9; } @media (prefers-color-scheme: dark) { .site-footer__mark { filter: invert(1) hue-rotate(180deg); opacity: .85; } } [data-theme="dark"] .site-footer__mark { filter: invert(1) hue-rotate(180deg); opacity: .85; } [data-theme="light"] .site-footer__mark { filter: none; opacity: .9; } /* --------------------------------------------------------------------- */ /* Responsive */ /* --------------------------------------------------------------------- */ @media (max-width: 768px) { /* Hide the inline nav list on mobile, show the burger */ .site-nav__toggle { display: inline-flex; margin-left: auto; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; } .site-nav__bar { display: block; width: 18px; height: 2px; background: var(--fg); box-shadow: 0 -6px 0 var(--fg), 0 6px 0 var(--fg); } .site-nav { margin-left: 0; } /* Mobile menu: pinned to viewport (NOT scroll-context), hidden above the screen by default, slides down when open. */ .site-nav__list { position: fixed; top: 64px; left: 0; right: 0; z-index: 40; flex-direction: column; gap: 0; background: var(--bg-elev); border-bottom: 1px solid var(--border); padding: .5rem var(--gutter) 1rem; transform: translateY(-120%); transition: transform .22s ease, box-shadow .22s ease; pointer-events: none; /* don't catch clicks while hidden */ box-shadow: none; } .site-nav[data-open="true"] .site-nav__list { transform: translateY(0); pointer-events: auto; box-shadow: var(--shadow-md); } .site-nav__list li { padding: 0; border-bottom: 1px solid var(--border-soft); } .site-nav__list li:last-child { border-bottom: none; } .site-nav__list a { display: block; padding: .9rem .25rem; border-bottom: none; font-size: 1.05rem; } .site-nav__list a[aria-current="page"] { color: var(--accent); border-bottom: none; } }