/* AGRIGARD design system (BUILD_SPEC §2, D1) — ONE file, ≤15KB target. System fonts only, zero webfonts, no framework, light mode first. Accent tokens per niche on (baseof.html): pest=green, agri=earth, solar=amber, aquarium=blue, fishing=teal. */ :root { --ink: #1c2430; --muted: #5b6673; --line: #dde3ea; --bg: #ffffff; --soft: #f4f6f4; --card: #ffffff; --pest: #0b7a4b; --agri: #7a5c22; --solar: #b45309; --aqua: #1d4ed8; --fishing: #0f766e; --wa: #128c7e; --shopee: #ee4d2d; } body.niche-nyamuk { --accent: var(--pest); } body.niche-baja, body.niche-kebun, body.niche-alat { --accent: var(--agri); } body.niche-solar { --accent: var(--solar); } body.niche-akuarium { --accent: var(--aqua); } body.niche-fishing { --accent: var(--fishing); } body { --accent: var(--pest); } /* neutral/fallback (niche classes above out-specify this) */ * { box-sizing: border-box; } html { font-size: 17px; } body { margin: 0; color: var(--ink); background: var(--bg); font-family: -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; line-height: 1.65; } main { max-width: 44rem; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; } a { color: var(--accent); } h1, h2, h3 { line-height: 1.25; } h2 { margin-top: 2rem; } img { max-width: 100%; height: auto; } .fineprint { color: var(--muted); font-size: .85rem; } /* Header / footer */ .site-header { display: flex; gap: 1.1rem; align-items: baseline; flex-wrap: wrap; max-width: 44rem; margin: 0 auto; padding: .9rem 1.25rem; border-bottom: 1px solid var(--line); } .site-header .brand { font-weight: 700; text-decoration: none; color: var(--ink); font-size: 1.1rem; } .site-header nav { display: flex; gap: 1rem; flex-wrap: wrap; } .site-header nav a { text-decoration: none; } .site-footer { max-width: 44rem; margin: 0 auto; padding: 1.4rem 1.25rem 3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; } /* Breadcrumbs */ .crumbs { margin-bottom: 1rem; } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; font-size: .85rem; color: var(--muted); } .crumbs li:not(:first-child)::before { content: "›"; margin-right: .3rem; } .crumbs a { text-decoration: none; } .crumb-here { font-weight: 600; color: var(--ink); } /* Answer capsule (Gold shape) */ .capsule { background: var(--soft); border-left: 4px solid var(--accent); padding: .8rem 1rem; margin: 1.1rem 0; border-radius: 0 6px 6px 0; } .capsule-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .25rem; } .capsule p { margin: 0; } .fact-cite { font-size: .72rem; } .fact-cite a { text-decoration: none; } /* Era supersession + chips */ .era-note { background: var(--soft); border: 1px dashed var(--line); border-radius: 6px; padding: .5rem .8rem; font-size: .9rem; } .chip { display: inline-block; font-size: .72rem; padding: .05rem .45rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); vertical-align: middle; } .chip-lang { background: var(--soft); } .chip-tool { border-color: var(--accent); color: var(--accent); font-weight: 600; } .chip-era { background: #fdf6e3; border-color: #e6cf9a; color: #7a5c00; } .chip-soon { background: var(--soft); } /* Tables (TOOLS_SPEC §2 format: quantified columns, era+source stamps) */ .tbl { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .95rem; } .tbl th, .tbl td { border: 1px solid var(--line); padding: .5rem .6rem; text-align: left; vertical-align: top; } .tbl th { background: var(--soft); } .tbl-wrap { overflow-x: auto; } /* FAQ toggles */ details { border: 1px solid var(--line); border-radius: 6px; padding: .5rem .9rem; margin: .5rem 0; } summary { cursor: pointer; font-weight: 600; } /* Related module */ .related { margin-top: 2rem; } .related-list { padding-left: 1.1rem; } .related-list li { margin: .4rem 0; } /* CTA + buttons */ .cta { margin: 2rem 0; } .btn { display: inline-block; padding: .65rem 1.1rem; border-radius: 8px; text-decoration: none; font-weight: 600; border: 0; cursor: pointer; font-size: 1rem; } .btn-wa { background: var(--wa); color: #fff; } .btn-tally { background: var(--ink); color: #fff; } .btn-shopee { background: var(--shopee); color: #fff; } .cta-placeholder { border: 1px dashed var(--muted); padding: .6rem .8rem; border-radius: 6px; color: var(--muted); font-size: .9rem; } /* LANDING (home.html) */ .hero { margin: 1.4rem 0 1.8rem; } .hero h1 { margin-bottom: .3rem; } .trust-promise { font-size: 1.15rem; font-weight: 600; color: var(--accent); margin: .2rem 0; } .home-h2, .hub-h2 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; margin: 1rem 0 2rem; } .niche-card { border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; background: var(--card); border-top: 3px solid var(--accent); } .niche-soon { opacity: .65; border-top-style: dashed; } .accent-pest { --accent: var(--pest); } .accent-agri { --accent: var(--agri); } .accent-solar { --accent: var(--solar); } .accent-aqua { --accent: var(--aqua); } .accent-fishing { --accent: var(--fishing); } .niche-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .4rem; } .niche-icon { font-size: 1.3rem; } .niche-name { font-weight: 700; text-decoration: none; color: var(--ink); } a.niche-name:hover { color: var(--accent); } .top3 { margin: 0; padding-left: 1.1rem; font-size: .92rem; color: var(--muted); } .top3 li { margin: .25rem 0; } /* Price-watch strip + trust row */ .pricestrip { margin: 1.6rem 0; } .price-list { list-style: none; padding: 0; margin: .4rem 0; } .price-list li { padding: .45rem 0; border-bottom: 1px solid var(--line); } .trustrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 1.6rem 0; } .trustrow h3 { font-size: .95rem; margin: 0 0 .2rem; } .trustrow p { margin: 0; font-size: .9rem; color: var(--muted); } /* HUB (list.html) */ .famcard { border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; margin: .8rem 0; } .famcard h3 { margin: 0 0 .5rem; font-size: 1rem; color: var(--accent); } .famcard .count { color: var(--muted); font-weight: 400; font-size: .85rem; } .fam-cells { margin: 0; padding-left: 1.1rem; } .fam-cells li { margin: .35rem 0; } .era-strip { margin: 1.4rem 0; } .hub-xlinks { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1rem; } .xlink-list { list-style: none; display: flex; gap: 1rem; flex-wrap: wrap; padding: 0; } /* Tool cells */ .tool { border: 1px solid var(--line); border-radius: 10px; padding: 1rem; margin: 1.4rem 0; background: var(--soft); } .tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; margin-bottom: .8rem; } .tool label { display: block; font-size: .9rem; } .tool select, .tool input { display: block; width: 100%; margin-top: .25rem; padding: .45rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; } .tool-out { margin-top: .8rem; } .tool-out .verdict { font-weight: 600; } /* Search UI (content/search.md renders the inputs; site.js drives them) */ .search-ui input[type="search"] { width: 100%; padding: .6rem .8rem; font: inherit; border: 1px solid var(--line); border-radius: 8px; } @media print { .site-header, .site-footer, .cta, .crumbs { display: none; } } /* Trilingual pill row (lane 46, DESIGN_REFERENCE): ONE row per page under the H1 */ .lang-switch { display: flex; gap: .45rem; flex-wrap: wrap; margin: .35rem 0 .8rem; } .lang-pill { display: inline-block; padding: .22rem .7rem; border-radius: 999px; font-size: .82rem; text-decoration: none; border: 1px solid var(--line); color: var(--ink); background: var(--soft); } .lang-pill:hover { color: var(--accent); border-color: var(--accent); } .lang-pill.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }