@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root { --ink:#17251f; --muted:#68756e; --faint:#8d9892; --line:#e1e8e1; --surface:#fff; --paper:#f5f7f3; --soft:#eef3ed; --green:#286b52; --green-deep:#174f3d; --green-light:#dcefe3; --terracotta:#ad694f; --amber:#ba7a28; --violet:#8068a4; --blue:#47779b; --teal:#36837b; --shadow:0 18px 48px rgba(33,67,49,.08); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; font-size:14px; } button,input,select { font:inherit; } button { color:inherit; cursor:pointer; border:0; background:none; } .icon { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; flex:none; } .icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.app-shell { min-height:100vh; display:flex; } .sidebar { position:fixed; inset:0 auto 0 0; width:258px; padding:29px 18px 20px; background:#edf3ed; border-right:1px solid #dae5dc; display:flex; flex-direction:column; z-index:10; } .main-area { margin-left:258px; width:calc(100% - 258px); min-width:0; } .brand { display:flex; align-items:center; gap:11px; padding:0 13px; cursor:pointer; } .brand-mark { width:34px; height:34px; display:grid; place-items:center; color:#f5fbf6; background:var(--green); border-radius:10px 10px 10px 3px; } .brand-mark .icon { width:21px;height:21px; } .brand-name { font-size:20px; font-weight:700; letter-spacing:-.7px; line-height:1; } .brand-name span { color:var(--green); font-weight:500; } .brand-subtitle { color:#79887e; font-size:9px; letter-spacing:.05em; text-transform:uppercase; margin-top:4px; } .sidebar-label { margin:52px 13px 11px; color:#96a299; font-family:'DM Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.12em; } .nav-list { display:grid; gap:4px; } .nav-item { display:flex; align-items:center; gap:13px; width:100%; text-align:left; color:#6f7f75; border-radius:9px; padding:12px 13px; transition:.2s; } .nav-item .icon { width:17px; } .nav-item:hover { color:var(--green-deep); background:rgba(255,255,255,.55); } .nav-item.active { background:#d9eadc; color:var(--green-deep); font-weight:600; } .nav-item em { margin-left:auto; font-style:normal; font-size:10px; color:var(--green); background:#f8fcf8; border:1px solid #cde0d1; border-radius:999px; padding:2px 6px; } .sidebar-spacer { flex:1; } .method-card { display:flex; gap:10px; padding:14px 12px; background:rgba(255,255,255,.7); border:1px solid #dbe8dc; border-radius:10px; } .method-icon { color:var(--green); } .method-card strong { display:block; font-size:12px; } .method-card p { margin:7px 0 11px; color:#76837a; font-size:11px; line-height:1.45; } .method-card button { display:flex; align-items:center; gap:4px; color:var(--green); font-size:11px; font-weight:600; } .method-card button .icon { width:12px; } .sidebar-footer { display:flex; align-items:center; gap:7px; margin:18px 9px 0; color:#98a39c; font-family:'DM Mono',monospace; font-size:9px; } .status-dot { width:6px; height:6px; background:#6ca878; border-radius:50%; } .version { margin-left:auto; }
.topbar { height:76px; padding:0 48px; display:flex; align-items:center; border-bottom:1px solid var(--line); background:rgba(245,247,243,.9); } .breadcrumbs { display:flex; gap:10px; align-items:center; color:#a0aaa4; font-size:12px; } .breadcrumbs strong { color:var(--ink); font-weight:600; } .topbar-actions { margin-left:auto; display:flex; align-items:center; gap:16px; } .data-status { display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid #dbe6dc; border-radius:7px; color:#748178; font-family:'DM Mono',monospace; font-size:10px; } .data-status .icon { width:14px; color:var(--green); } .icon-button { color:#7f8c83; padding:4px; } .mobile-menu { display:none; } main { min-height:calc(100vh - 130px); } .content-page, .home-page { max-width:1270px; margin:0 auto; padding:52px 48px 86px; } .eyebrow { color:var(--green); font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.12em; line-height:1.4; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { margin:13px 0 13px; font-size:48px; line-height:1.04; letter-spacing:-1.8px; font-weight:600; } h2 { margin:6px 0 0; font-size:25px; line-height:1.15; letter-spacing:-.6px; } h3 { margin:0; font-size:16px; } .page-intro { display:flex; justify-content:space-between; gap:30px; margin-bottom:40px; } .page-intro h1 { font-size:42px; } .page-intro p { max-width:620px; color:var(--muted); line-height:1.7; font-size:15px; margin-bottom:0; } .intro-actions { align-self:flex-end; } .button { display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:7px; padding:11px 16px; font-size:12px; font-weight:600; transition:.2s; } .button .icon { width:15px; } .button.primary { color:#fff; background:var(--green); box-shadow:0 5px 12px rgba(40,107,82,.12); } .button.primary:hover { background:var(--green-deep); transform:translateY(-1px); } .button.secondary { color:var(--green-deep); border:1px solid #cbdace; background:#fff; } .button.secondary:hover { background:#eef7ef; border-color:#a7c4ae; } .text-button { color:var(--green); padding-left:9px; } .link-button { color:var(--green); font-size:12px; font-weight:600; display:inline-flex; gap:7px; align-items:center; } .link-button .icon { width:14px; } .back-link { display:inline-flex; gap:8px; align-items:center; color:#76837a; font-size:12px; margin-bottom:30px; } .back-link:hover,.link-button:hover { color:var(--green-deep); } .back-link .icon { width:15px; }
/* Home */
.hero-section { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; min-height:458px; gap:30px; } .pill-eyebrow { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:999px; background:#e7f0e6; } .eyebrow-dot { width:6px; height:6px; border-radius:50%; background:#6fa878; } .hero-copy h1 { font-size:66px; margin:22px 0 17px; letter-spacing:-3.8px; } .hero-copy h1 em { color:var(--green); font-family:'Libre Baskerville',serif; font-size:.9em; font-weight:400; } .hero-lede { max-width:520px; color:#67766d; font-size:16px; line-height:1.65; } .hero-actions { margin-top:27px; } .hero-note { display:flex; gap:8px; align-items:flex-start; max-width:480px; margin-top:28px; padding-top:16px; border-top:1px solid var(--line); color:#8a958e; font-size:10px; line-height:1.55; } .hero-note .icon { width:14px; color:var(--green); } .hero-art { min-height:400px; position:relative; display:grid; place-items:center; overflow:hidden; } .hero-art:before { content:''; position:absolute; width:300px;height:300px; background:#e5eee3; border-radius:48% 52% 50% 44%; transform:rotate(-20deg); } .art-orbit { position:absolute; border:1px solid #bed3c0; border-radius:50%; transform:rotate(-18deg); } .orbit-one { width:330px;height:180px; } .orbit-two { width:430px;height:260px; transform:rotate(40deg); border-color:#d0ded1; } .art-center { position:relative; width:150px;height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--green); border:1px solid #b8d2bc; border-radius:50%; background:rgba(245,250,244,.7); z-index:1; } .art-center .icon { width:45px;height:45px; margin-bottom:7px; } .art-center span { font-family:'Libre Baskerville',serif; font-size:27px; } .art-center small { color:#7f9282; font-family:'DM Mono',monospace; font-size:8px; letter-spacing:.1em; text-transform:uppercase; } .art-label { position:absolute; z-index:2; padding:9px 12px; color:#63776a; background:rgba(255,255,255,.84); border:1px solid #dae7da; border-radius:7px; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.04em; line-height:1.3; text-transform:uppercase; box-shadow:0 7px 20px rgba(40,80,50,.06); } .art-label strong { color:var(--green); font-weight:500; } .label-top { top:58px; right:90px; } .label-bottom { bottom:73px; left:75px; } .stat-strip { display:grid; grid-template-columns:repeat(3, 1fr) 1.7fr; align-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; } .stat-strip > div { padding:0 25px; border-right:1px solid var(--line); } .stat-strip > div:first-child { padding-left:0; } .stat-strip > div:last-child { border:0; } .stat-strip strong { display:block; font-family:'Libre Baskerville',serif; font-size:27px; font-weight:400; } .stat-strip span:not(.stat-line) { color:#849087; font-size:11px; } .stat-message { display:flex; align-items:center; gap:9px; justify-content:flex-end; color:#849087; font-size:11px; } .stat-line { display:block; width:25px; height:1px; background:#8db49a; } .stat-message .icon { width:13px; color:var(--green); } .home-grid { padding:68px 0 0; } .section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:19px; } .explore-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .explore-tile { min-height:180px; position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:21px 18px; border:1px solid var(--line); border-radius:9px; text-align:left; transition:.2s; } .explore-tile:hover { transform:translateY(-3px); box-shadow:var(--shadow); } .tile-icon { width:31px;height:31px; display:grid;place-items:center; margin-bottom:28px; border-radius:8px; } .tile-icon .icon { width:17px; } .tile-title { margin-bottom:7px; font-size:14px; font-weight:600; } .explore-tile > span:nth-child(3) { padding-right:9px; color:#77847b; font-size:11px; line-height:1.45; } .explore-tile > .icon:last-child { position:absolute; bottom:20px; right:18px; width:14px; } .tile-plants { background:#e8f3e8; border-color:#d2e5d4; } .tile-plants .tile-icon { color:var(--green); background:#d1e7d4; } .tile-categories { background:#f3ece3; border-color:#ecdfd1; } .tile-categories .tile-icon { color:var(--terracotta); background:#ecd7c5; } .tile-compare { background:#e7eef3; border-color:#d5e1ea; } .tile-compare .tile-icon { color:var(--blue); background:#d3e3ed; } .tile-mixture { background:#eeebf3; border-color:#e2dcec; } .tile-mixture .tile-icon { color:var(--violet); background:#e0d7ec; } .evidence-preview { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; padding:95px 0 80px; } .evidence-preview-copy h2 { margin-top:10px; font-size:29px; } .evidence-preview-copy p { margin:17px 0 19px; color:var(--muted); line-height:1.7; max-width:330px; } .evidence-stack { display:grid; gap:8px; align-content:center; } .evidence-row { display:flex; align-items:center; gap:15px; min-height:45px; padding:7px 12px; border-bottom:1px solid #e8ece7; color:#738078; font-size:11px; } .evidence-row .evidence-badge { min-width:146px; } .evidence-row .row-arrow { margin-left:auto; opacity:.6; } .evidence-row .row-arrow .icon { width:13px; } .featured-section { padding:0 0 30px; } .featured-card { display:grid; grid-template-columns:135px 1.2fr .8fr; align-items:center; gap:25px; padding:20px; border:1px solid #dce7de; border-radius:10px; background:#fff; } .plant-visual { position:relative; display:grid; place-items:center; overflow:hidden; border-radius:9px; background:var(--soft); color:var(--green); } .plant-visual.medium { width:100%; height:130px; } .plant-visual.large { width:135px;height:135px; } .plant-visual.profile { width:220px;height:220px; border-radius:50%; } .plant-visual.tiny { width:34px;height:34px; border-radius:50%; } .plant-visual.micro { width:31px;height:31px; border-radius:7px; } .plant-visual.green { background:#e1f0e1;color:#4f8d58; } .plant-visual.sage { background:#e6efe5;color:#698b6a; } .plant-visual.mint { background:#dff0e9;color:#478978; } .plant-visual.lime { background:#edf1da;color:#79903d; } .plant-visual.ochre { background:#f2ebd9;color:#ad8a43; } .plant-visual.teal { background:#dceeea;color:#408b82; } .plant-visual.coral { background:#f4e3dc;color:#b66d59; } .plant-visual.gold { background:#f5ecd8;color:#b88e39; } .plant-visual.lavender { background:#eee9f2;color:#8873a0; } .plant-visual.blue { background:#e1edf2;color:#557e96; } .visual-leaf { position:absolute; width:57%; height:57%; opacity:.12; } .plant-visual.profile .visual-leaf { width:68%;height:68%; opacity:.16; } .visual-leaf .icon { width:100%;height:100%; } .visual-initials { position:relative; font-family:'Libre Baskerville',serif; font-size:25px; letter-spacing:-1px; } .plant-visual.profile .visual-initials { font-size:52px; } .plant-visual.tiny .visual-initials,.plant-visual.micro .visual-initials { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:-.5px; } .featured-info .plant-kicker,.plant-kicker { color:#89958b; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.06em; text-transform:uppercase; } .featured-info h3 { margin-top:7px; font-family:'Libre Baskerville',serif; font-size:23px; font-weight:400; } .guarani-name { color:var(--green); font-size:12px; margin-top:3px; } .featured-info p { margin:13px 0; color:var(--muted); font-size:12px; line-height:1.5; max-width:490px; } .badge-row { display:flex; flex-wrap:wrap; gap:6px; } .featured-meta { display:grid; gap:6px; padding-left:25px; border-left:1px solid var(--line); } .featured-meta span { color:#99a49c; font-size:10px; } .featured-meta strong { font-family:'Libre Baskerville',serif; font-size:13px; font-weight:400; margin-bottom:8px; }
/* Shared / catalog */
.evidence-badge { display:inline-flex; align-items:center; gap:6px; width:max-content; padding:4px 8px; border-radius:4px; background:#f4f5f3; color:#617068; font-family:'DM Mono',monospace; font-size:9px; line-height:1.2; white-space:nowrap; } .evidence-badge.compact { padding:4px 7px; font-size:8px; } .evidence-dot { width:6px;height:6px;border-radius:50%; background:currentColor; } .evidence-badge.terracotta { color:#a45e47; background:#faeee8; } .evidence-badge.violet { color:#78619c; background:#f1edf7; } .evidence-badge.blue { color:#477695; background:#eaf2f7; } .evidence-badge.amber { color:#aa762c; background:#fbf1df; } .evidence-badge.green { color:#41834d; background:#e8f4e8; } .evidence-badge.teal { color:#347e77; background:#e6f2ef; } .catalog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px; border:1px solid var(--line); border-radius:9px; background:#fff; } .search-box { display:flex; align-items:center; width:min(100%, 510px); padding:0 10px; gap:10px; color:#91a097; } .search-box .icon { width:16px; } .search-box input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font-size:12px; } .search-box kbd { color:#a3ada6; border:1px solid #e2e7e2; padding:3px 5px; border-radius:4px; font-family:'DM Mono',monospace; font-size:8px; white-space:nowrap; } .toolbar-selects { display:flex; gap:10px; } .toolbar-selects label { display:flex; align-items:center; gap:8px; color:#98a39b; font-family:'DM Mono',monospace; font-size:9px; text-transform:uppercase; } select { padding:9px 26px 9px 10px; appearance:none; background:#f8faf8; background-image:linear-gradient(45deg,transparent 50%,#839188 50%),linear-gradient(135deg,#839188 50%,transparent 50%); background-position:calc(100% - 13px) 14px,calc(100% - 9px) 14px; background-size:4px 4px,4px 4px; background-repeat:no-repeat; border:1px solid #e1e8e1; border-radius:6px; color:var(--ink); font-size:11px; outline:none; } .catalog-summary { display:flex; align-items:center; gap:9px; padding:19px 0 13px; color:#98a39b; font-size:11px; } .catalog-summary strong { color:var(--ink); font-size:13px; } .summary-spacer { flex:1; } .legend-label { margin-right:3px; color:#99a49c; font-family:'DM Mono',monospace; font-size:9px; text-transform:uppercase; } .plant-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .plant-card { overflow:hidden; border:1px solid var(--line); border-radius:10px; background:#fff; transition:.2s; } .plant-card:hover { box-shadow:var(--shadow); transform:translateY(-2px); } .card-image-button { display:block; width:100%; padding:0; position:relative; } .plant-card .plant-visual { border-radius:0; } .card-open { display:grid; place-items:center; position:absolute; right:12px;bottom:12px; width:28px;height:28px; color:var(--green); background:rgba(255,255,255,.88); border-radius:50%; } .card-open .icon { width:13px; } .plant-card-body { padding:16px 16px 14px; } .plant-card-body h3 { margin:7px 0 2px; font-family:'Libre Baskerville',serif; font-size:18px; font-weight:400; } .plant-card-body h3 button { text-align:left; } .plant-card-body h3 button:hover { color:var(--green); } .scientific-name { margin-top:8px; color:#96a098; font-family:'Libre Baskerville',serif; font-size:10px; font-style:italic; } .card-footer { display:flex; justify-content:space-between; gap:8px; margin-top:18px; padding-top:10px; border-top:1px solid #edf0ec; color:#849087; font-size:10px; } .card-footer span:last-child { color:var(--green); } .empty-state { grid-column:1/-1; padding:70px 20px; border:1px dashed #ccd9ce; border-radius:10px; text-align:center; } .empty-state > div { color:#a4b8aa; } .empty-state .icon { width:31px;height:31px; } .empty-state h3 { margin:14px 0 7px; } .empty-state p { color:var(--muted); font-size:12px; }
/* Profile */
.profile-hero { display:grid; grid-template-columns:220px 1fr auto; align-items:center; gap:30px; padding:24px 0 34px; border-bottom:1px solid var(--line); } .profile-hero-copy h1 { margin:10px 0 5px; font-family:'Libre Baskerville',serif; font-size:48px; font-weight:400; } .profile-alias { color:var(--green); font-size:14px; } .scientific-large { margin:11px 0 17px; color:#8b958e; font-family:'Libre Baskerville',serif; font-size:14px; font-style:italic; } .profile-summary { max-width:570px; color:var(--muted); line-height:1.6; } .profile-actions { display:flex; flex-direction:column; gap:8px; } .profile-disclaimer { display:flex; gap:10px; align-items:flex-start; margin:22px 0 32px; padding:13px 15px; color:#77847b; background:#edf4ed; border:1px solid #dce9dd; border-radius:7px; font-size:11px; line-height:1.5; } .profile-disclaimer .icon { width:15px; color:var(--green); } .profile-layout { display:grid; grid-template-columns:minmax(0, 1fr) 330px; gap:45px; } .profile-main { min-width:0; } .info-section { padding:10px 0 42px; } .section-label { display:flex; align-items:flex-start; gap:15px; margin-bottom:22px; } .section-label > span { color:#a3b1a8; font-family:'DM Mono',monospace; font-size:11px; } .section-label h2 { font-size:23px; } .fact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; } .fact-grid > div { display:flex; flex-direction:column; gap:8px; padding:15px; background:#fff; } .fact-grid span { color:#9aa49e; font-family:'DM Mono',monospace; font-size:9px; text-transform:uppercase; } .fact-grid strong { font-size:12px; font-weight:600; } .fact-grid .serif { font-family:'Libre Baskerville',serif; font-weight:400; font-style:italic; line-height:1.35; } .traditional-card { display:grid; grid-template-columns:45px 1fr; gap:13px; padding:22px; background:#f4ede6; border:1px solid #eadfd2; border-radius:9px; } .quote-mark { color:var(--terracotta); font-family:'Libre Baskerville',serif; font-size:51px; line-height:.8; } .traditional-card p { margin:0 0 16px; color:#6e6258; font-family:'Libre Baskerville',serif; font-size:15px; line-height:1.65; } .traditional-tags { display:flex; gap:6px; flex-wrap:wrap; } .traditional-tags span,.result-tags span { padding:5px 8px; color:#8d6a55; background:#faefe5; border-radius:4px; font-family:'DM Mono',monospace; font-size:9px; } .section-footnote { margin:10px 0 0; color:#969f99; font-size:10px; line-height:1.5; } .compound-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .compound-card { position:relative; display:flex; flex-direction:column; gap:10px; min-height:94px; padding:16px; background:#f1f3ee; border-radius:7px; } .compound-card strong { font-size:13px; } .compound-card > span:last-child { margin-top:auto; color:#919b94; font-size:10px; } .compound-number { position:absolute; top:12px; right:13px; color:#b0b9b2; font-family:'DM Mono',monospace; font-size:9px; } .shared-callout { display:flex; gap:8px; align-items:flex-start; margin-top:12px; padding:12px; color:#78857c; background:#f7f9f6; border:1px solid var(--line); border-radius:6px; font-size:10px; line-height:1.45; } .shared-callout .icon { width:14px; color:var(--green); } .evidence-panel { padding:20px; background:#fff; border:1px solid var(--line); border-radius:9px; } .panel-title { display:flex; justify-content:space-between; gap:10px; } .panel-title h2 { margin-top:8px; font-size:18px; } .info-tooltip { color:#a0aaa3; } .panel-intro { margin:14px 0 17px; color:#8a958d; font-size:10px; line-height:1.5; } .evidence-list { display:grid; gap:8px; } .evidence-item { padding:10px 0; border-top:1px solid #eef1ed; } .evidence-item-main { display:flex; align-items:center; justify-content:space-between; gap:6px; } .evidence-status { color:#8a978d; font-family:'DM Mono',monospace; font-size:8px; text-transform:uppercase; } .evidence-item p { margin:8px 0 0; color:#77847b; font-size:10px; line-height:1.5; } .evidence-item.muted { opacity:.42; } .related-card { margin-top:15px; padding:19px; border:1px solid var(--line); border-radius:9px; background:#fbfcfa; } .related-card h3 { margin:8px 0 14px; font-size:15px; } .related-plants { display:grid; gap:3px; } .related-plants button { display:flex; align-items:center; gap:9px; padding:6px 0; text-align:left; } .related-plants button > span:nth-child(2) { display:flex; flex-direction:column; gap:3px; flex:1; } .related-plants strong { font-size:11px; } .related-plants small { color:#8e9991; font-size:9px; } .related-plants > .icon { color:#a0aaa3; width:13px; } .references-list { border-top:1px solid var(--line); } .reference-row { display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--line); } .reference-row > span { color:#a0aca2; font-family:'DM Mono',monospace; font-size:9px; } .reference-row p { flex:1; margin:0; color:#65746b; font-family:'Libre Baskerville',serif; font-size:11px; line-height:1.45; } .reference-row > .icon { width:13px; color:#91a097; }
/* categories */
.category-tabs { display:flex; gap:3px; margin-bottom:22px; padding:4px; width:max-content; background:#e9eee9; border-radius:7px; } .category-tabs button { padding:8px 13px; color:#829087; font-size:11px; border-radius:5px; } .category-tabs button.active { color:var(--green-deep); background:#fff; box-shadow:0 2px 5px rgba(30,70,45,.06); font-weight:600; } .category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .category-card { display:flex; flex-direction:column; align-items:flex-start; min-height:194px; padding:18px; text-align:left; border:1px solid var(--line); border-radius:9px; background:#fff; transition:.2s; } .category-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); } .category-card.terracotta { background:#fbf1eb; border-color:#f0ded4; } .category-card.amber { background:#fcf4e5; border-color:#f0e3c9; } .category-card.violet { background:#f2eff6; border-color:#e3dced; } .category-card.blue { background:#ebf3f7; border-color:#d9e7ed; } .category-card.green { background:#ebf5eb; border-color:#d6e9d6; } .category-card.teal { background:#e8f3f0; border-color:#d5e8e2; } .category-card.orange { background:#f9eee5; border-color:#f1dcd0; } .category-card .category-card-top { display:flex; align-items:center; justify-content:space-between; width:100%; } .category-symbol { display:grid; place-items:center; width:31px;height:31px; border-radius:8px; background:rgba(255,255,255,.6); } .category-symbol .icon { width:16px; } .category-type { color:#88958c; font-family:'DM Mono',monospace; font-size:8px; text-transform:uppercase; } .category-card h3 { margin-top:24px; font-family:'Libre Baskerville',serif; font-size:16px; font-weight:400; } .category-card p { margin:8px 0; color:#78847d; font-size:10px; line-height:1.45; } .category-card-bottom { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:auto; padding-top:13px; color:#7f8f83; border-top:1px solid rgba(120,140,120,.16); font-size:10px; } .category-card-bottom strong { color:var(--ink); } .category-card-bottom .icon { width:14px; } .category-note { display:flex; gap:12px; margin-top:25px; padding:17px; color:#77857b; background:#fff; border:1px solid var(--line); border-radius:8px; } .category-note > .icon { color:var(--green); width:16px; } .category-note strong { font-size:12px; } .category-note p { margin:5px 0 0; max-width:800px; font-size:11px; line-height:1.55; }
/* compare */
.compare-picker { padding:17px; margin-bottom:20px; border:1px solid var(--line); border-radius:9px; background:#fff; } .picker-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; } .picker-heading > div { display:flex; align-items:baseline; gap:12px; } .picker-heading strong { font-size:12px; } .picker-chips { display:flex; flex-wrap:wrap; gap:8px; } .selection-chip,.add-chip { display:flex; align-items:center; gap:8px; padding:5px 8px 5px 5px; border:1px solid #dbe5dc; border-radius:7px; background:#f5f9f5; font-size:11px; } .selection-chip > .icon { width:13px; margin-left:4px; transform:rotate(45deg); color:#98a49a; } .add-chip { padding:10px 13px; border-style:dashed; color:var(--green); background:#fbfdfb; } .add-chip .icon { width:14px; } .compare-select-wrap { display:none; margin-top:12px; } .compare-select-wrap.open { display:block; } .compare-select-wrap label { display:flex; flex-direction:column; gap:5px; color:#8c988f; font-family:'DM Mono',monospace; font-size:9px; text-transform:uppercase; } .compare-select-wrap select { width:100%; } .comparison-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:9px; background:#fff; } .comparison-table { width:100%; min-width:710px; border-collapse:collapse; table-layout:fixed; } .comparison-table th,.comparison-table td { padding:17px 15px; border-bottom:1px solid #e9eee9; vertical-align:top; text-align:left; } .comparison-table thead th { background:#f7faf6; } .comparison-table thead th:first-child { width:145px; color:#8b978e; font-family:'DM Mono',monospace; font-size:9px; font-weight:400; text-transform:uppercase; } .table-plant-heading { display:flex; align-items:center; gap:9px; } .table-plant-heading > div { display:flex; flex-direction:column; gap:4px; } .table-plant-heading strong { font-size:12px; } .table-plant-heading span { color:#5d8a6a; font-size:10px; font-weight:400; } .comparison-table tbody th { color:#8c9990; font-family:'DM Mono',monospace; font-size:9px; font-weight:400; text-transform:uppercase; } .comparison-table td { color:#637169; font-size:11px; line-height:1.5; } .table-badges { display:flex; flex-wrap:wrap; gap:4px; } .yes-badge,.no-badge { display:inline-block; padding:4px 7px; border-radius:4px; font-family:'DM Mono',monospace; font-size:8px; } .yes-badge { color:#367647; background:#e8f4e8; } .no-badge { color:#9ba49e; background:#f1f3f0; } .comparison-table td small { display:block; margin-top:6px; color:#99a49b; font-size:9px; line-height:1.3; } .comparison-footnote { display:flex; gap:8px; align-items:flex-start; margin-top:12px; color:#849087; font-size:10px; line-height:1.5; } .comparison-footnote .icon { width:14px; color:var(--green); }
/* mixture */
.mixture-layout { display:grid; grid-template-columns:.95fr 1.05fr; gap:18px; align-items:start; } .card-surface { padding:21px; border:1px solid var(--line); border-radius:10px; background:#fff; } .builder-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; padding-bottom:16px; border-bottom:1px solid var(--line); } .builder-head h2 { font-size:20px; margin-top:8px; } .sample-tag,.result-count { padding:5px 8px; color:#ae7831; background:#fbf1df; border-radius:4px; font-family:'DM Mono',monospace; font-size:8px; text-transform:uppercase; } .result-count { color:var(--green); background:#e8f3e9; } .mixture-rows { display:grid; } .mixture-row { display:flex; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid #edf0ed; } .mixture-row-name { display:flex; flex-direction:column; gap:3px; flex:1; } .mixture-row-name strong { font-size:12px; } .mixture-row-name span { color:#78907d; font-size:10px; } .mixture-row label { display:flex; flex-direction:column; align-items:flex-start; gap:3px; } .mixture-row label span { color:#9aa49d; font-family:'DM Mono',monospace; font-size:8px; text-transform:uppercase; } .mixture-row input { width:62px; padding:6px 7px; border:1px solid #dae5dc; border-radius:5px; outline:0; color:var(--ink); } .mixture-row label small { color:#a3aca6; font-size:8px; } .remove-button { align-self:flex-start; margin-top:11px; color:#a3aea5; font-size:19px; line-height:1; } .add-plant-row { position:relative; display:flex; align-items:center; margin-top:15px; } .add-plant-row select { width:100%; padding-right:35px; } .add-plant-row > .icon { position:absolute; right:11px; width:14px; color:var(--green); pointer-events:none; } .builder-note { display:flex; gap:8px; align-items:flex-start; margin-top:20px; padding:11px; color:#8b968e; background:#fbf8ef; border:1px solid #f0e6cd; border-radius:6px; font-size:10px; line-height:1.45; } .builder-note .icon { width:14px; color:#b47b2e; } .result-summary { display:flex; align-items:center; gap:15px; padding:17px 0; border-bottom:1px solid var(--line); } .summary-ring { display:flex; flex-direction:column; align-items:center; justify-content:center; width:72px;height:72px; flex:none; border:1px solid #bdd5c1; border-radius:50%; color:var(--green); } .summary-ring strong { font-family:'Libre Baskerville',serif; font-size:22px; font-weight:400; } .summary-ring span { color:#8a998d; font-family:'DM Mono',monospace; font-size:7px; text-align:center; text-transform:uppercase; } .result-summary p { margin:0; color:#78847c; font-size:11px; line-height:1.5; } .result-summary p strong { color:var(--ink); } .result-section { padding:16px 0; border-bottom:1px solid var(--line); } .result-label { display:block; margin-bottom:10px; color:#98a39b; font-family:'DM Mono',monospace; font-size:9px; text-transform:uppercase; } .result-tags { display:flex; flex-wrap:wrap; gap:5px; } .result-tags span { color:#5d7d67; background:#eaf3e9; } .compound-bars { display:grid; gap:8px; } .compound-bar { display:grid; grid-template-columns:145px 1fr 25px; align-items:center; gap:8px; color:#708077; font-size:10px; } .bar-track { height:5px; background:#edf1ed; border-radius:999px; overflow:hidden; } .bar-track i { display:block; height:100%; background:#92b89a; border-radius:inherit; } .compound-bar small { color:#9ca69f; font-family:'DM Mono',monospace; font-size:8px; text-align:right; } .overlap-section p,.caffeine-callout p { margin:0; color:#718077; font-size:11px; line-height:1.45; } .muted-copy { color:#a0aaa3 !important; } .caffeine-callout { padding:11px 12px; margin-top:13px; border:1px solid #e9e8e0; border-radius:6px; background:#fbfaf5; } .caffeine-callout.present { background:#fdf3e3; border-color:#f1e3c6; } .caffeine-callout.present .result-label { color:#ac7b35; } .evidence-summary { display:flex; gap:8px; padding-top:15px; color:#7f8c83; font-size:10px; line-height:1.5; } .evidence-summary .icon { width:14px; color:var(--green); }
/* about */
.about-hero { display:grid; grid-template-columns:100px 1fr; align-items:center; gap:25px; padding:26px; margin:4px 0 48px; background:#e7f1e7; border:1px solid #d6e5d8; border-radius:10px; } .about-hero-mark { width:82px;height:82px; display:grid; place-items:center; color:var(--green); border:1px solid #afd0b4; border-radius:50%; } .about-hero-mark .icon { width:40px;height:40px; } .about-hero h2 { max-width:680px; margin:8px 0 10px; font-family:'Libre Baskerville',serif; font-size:25px; font-weight:400; line-height:1.45; } .about-hero p { max-width:730px; margin:0; color:#6d7e72; line-height:1.65; } .methodology-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 62px; } .methodology-section { display:grid; grid-template-columns:37px 1fr; gap:15px; padding:0 0 40px; } .method-number { color:#a3b3a5; font-family:'DM Mono',monospace; font-size:10px; padding-top:4px; } .methodology-section h2 { margin:8px 0 12px; font-size:21px; } .methodology-section p { color:#76837a; line-height:1.7; font-size:12px; } .about-evidence-list { display:grid; gap:7px; margin-top:17px; } .about-evidence-list > div { display:flex; align-items:center; gap:8px; } .about-evidence-list > div > span:last-child { color:#87938b; font-size:10px; } .future-flow { display:flex; align-items:center; gap:7px; margin-top:18px; padding:11px; border:1px solid var(--line); border-radius:6px; color:var(--green); font-family:'DM Mono',monospace; font-size:9px; } .future-flow .icon { width:11px; color:#a1b2a4; } .boundary-list { display:grid; gap:7px; color:#6c7c71; font-size:11px; } .boundary-list span::first-letter { color:var(--green); } .about-footer-note { display:flex; gap:13px; align-items:flex-start; margin-top:8px; padding:18px; border:1px solid #e5decf; border-radius:8px; background:#fbf8f0; } .note-mark { display:grid; place-items:center; width:26px;height:26px; color:#9b7344; background:#f2e3c7; border-radius:50%; font-family:'Libre Baskerville',serif; } .about-footer-note strong { font-size:12px; } .about-footer-note p { margin:5px 0 0; color:#887e70; font-size:11px; line-height:1.5; }
.site-footer { display:flex; justify-content:space-between; align-items:center; min-height:54px; padding:0 48px; border-top:1px solid var(--line); color:#96a098; font-size:10px; } .site-footer > div { display:flex; align-items:center; gap:12px; } .footer-brand { color:var(--green); font-family:'Libre Baskerville',serif; font-size:13px; } .site-footer button { display:flex; align-items:center; gap:7px; color:var(--green); font-size:10px; } .site-footer .icon { width:12px; }
@media (max-width:1050px) { .sidebar { width:220px; } .main-area { margin-left:220px; width:calc(100% - 220px); } .topbar { padding:0 30px; } .content-page,.home-page { padding-left:30px; padding-right:30px; } .hero-copy h1 { font-size:54px; } .explore-tiles { grid-template-columns:repeat(2,1fr); } .category-grid { grid-template-columns:repeat(3,1fr); } .profile-layout { grid-template-columns:minmax(0,1fr) 280px; gap:25px; } .profile-hero { grid-template-columns:180px 1fr; } .profile-hero-visual .plant-visual.profile { width:180px;height:180px; } .profile-actions { grid-column:2; flex-direction:row; } }
@media (max-width:800px) { .sidebar { transform:translateX(-100%); width:258px; box-shadow:12px 0 30px rgba(20,50,30,.12); transition:transform .25s; } .sidebar.open { transform:translateX(0); } .main-area { margin-left:0; width:100%; } .topbar { padding:0 20px; } .mobile-menu { display:block; margin-right:12px; color:var(--green); } .mobile-menu .icon { width:20px; } .content-page,.home-page { padding:35px 20px 60px; } .hero-section { grid-template-columns:1fr; min-height:0; padding:18px 0 30px; } .hero-copy h1 { font-size:55px; } .hero-art { min-height:310px; } .stat-strip { grid-template-columns:repeat(3,1fr); gap:13px; } .stat-strip > div { padding:0 10px; } .stat-strip > div:first-child { padding-left:0; } .stat-message { grid-column:1/-1; justify-content:flex-start; padding:13px 0 0 !important; border-right:0 !important; border-top:1px solid var(--line); } .evidence-preview { grid-template-columns:1fr; gap:27px; padding:65px 0 55px; } .featured-card { grid-template-columns:105px 1fr; } .featured-card .plant-visual.large { width:105px;height:105px; } .featured-meta { grid-column:1/-1; padding:13px 0 0; border-left:0; border-top:1px solid var(--line); grid-template-columns:1fr 1fr; } .featured-meta strong { margin-bottom:0; } .page-intro { flex-direction:column; margin-bottom:28px; } .page-intro h1 { font-size:36px; } .intro-actions { align-self:flex-start; } .catalog-toolbar { flex-direction:column; align-items:stretch; } .search-box { width:100%; } .toolbar-selects { justify-content:space-between; } .toolbar-selects label { flex:1; } .toolbar-selects select { width:100%; } .plant-grid { grid-template-columns:repeat(2,1fr); } .profile-hero { grid-template-columns:130px 1fr; gap:19px; } .profile-hero-visual .plant-visual.profile { width:130px;height:130px; } .profile-hero-copy h1 { font-size:36px; } .profile-layout { grid-template-columns:1fr; } .profile-aside { order:-1; } .category-grid { grid-template-columns:repeat(2,1fr); } .mixture-layout { grid-template-columns:1fr; } .methodology-grid { grid-template-columns:1fr; gap:0; } }
@media (max-width:540px) { .topbar-actions .data-status { display:none; } h1 { font-size:39px; } .hero-copy h1 { font-size:46px; letter-spacing:-2.5px; } .hero-art { min-height:250px; transform:scale(.85); margin:-15px 0; } .label-top { right:35px; } .label-bottom { left:25px; } .stat-strip { grid-template-columns:1fr 1fr; } .stat-strip > div:nth-child(3) { border-right:0; } .explore-tiles { grid-template-columns:1fr; } .section-heading { align-items:flex-start; gap:15px; flex-direction:column; } .evidence-row { align-items:flex-start; flex-direction:column; gap:7px; } .evidence-row .evidence-badge { min-width:0; } .featured-card { grid-template-columns:1fr; } .featured-card .plant-visual.large { width:100%; height:120px; } .featured-meta { grid-template-columns:1fr 1fr; } .plant-grid { grid-template-columns:1fr; } .catalog-summary { flex-wrap:wrap; } .summary-spacer,.legend-label { display:none; } .profile-hero { grid-template-columns:1fr; } .profile-hero-visual .plant-visual.profile { width:100%; height:150px; border-radius:10px; } .profile-actions { grid-column:auto; flex-direction:row; } .profile-actions .button { flex:1; padding-left:8px; padding-right:8px; } .fact-grid { grid-template-columns:1fr 1fr; } .compound-grid { grid-template-columns:1fr 1fr; } .category-tabs { width:100%; overflow-x:auto; } .category-tabs button { white-space:nowrap; } .category-grid { grid-template-columns:1fr; } .about-hero { grid-template-columns:1fr; } .site-footer { padding:18px 20px; align-items:flex-start; gap:15px; flex-direction:column; } .site-footer > div { align-items:flex-start; flex-direction:column; gap:5px; } }