/* ══════════════════════════════════════════════════════════════ rhub.css — Shared stylesheet for CannBus Resource Hub pages Pages: resource-hub.html, med-cannabis.html, business-cannabis.html, cannabis-starter-guide.html Updated: March 2026 · www.cannbus.org ══════════════════════════════════════════════════════════════ */ /* ══ GOOGLE FONTS (also referenced in of each page) ══ */ /* Cormorant Garamond + Nunito — primary theme fonts */ /* ══════════════════════════════════════════════════════════════ ROOT VARIABLES ══════════════════════════════════════════════════════════════ */ :root { /* Teal palette */ --t9:#042f2e; --t8:#064e3b; --t7:#0a6e6e; --t6:#0d9488; --t5:#14b8a6; --t4:#2dd4bf; --t3:#5eead4; --t2:#99f6e4; --t1:#ccfbf1; --t0:#f0fdfa; /* Neutral palette */ --white:#ffffff; --g50:#f9fafb; --g100:#f3f4f6; --g200:#e5e7eb; --g300:#d1d5db; --g400:#9ca3af; --g600:#4b5563; --g700:#374151; --g800:#1f2937; --g900:#111827; /* Accent colours */ --gold:#f59e0b; --rose:#f43f5e; --violet:#7c3aed; --blue:#2563eb; --emerald:#059669; --orange:#ea580c; /* Category accent colours (Resource Hub) */ --cat-gov: #2563eb; --cat-gov-l: #eff6ff; --cat-gov-b: #dbeafe; --cat-trade: #0d9488; --cat-trade-l: #f0fdfa; --cat-trade-b: #ccfbf1; --cat-sci: #7c3aed; --cat-sci-l: #f5f3ff; --cat-sci-b: #ede9fe; --cat-biz: #d97706; --cat-biz-l: #fffbeb; --cat-biz-b: #fef3c7; --cat-news: #0891b2; --cat-news-l: #ecfeff; --cat-news-b: #cffafe; --cat-pat: #16a34a; --cat-pat-l: #f0fdf4; --cat-pat-b: #dcfce7; --cat-legal: #dc2626; --cat-legal-l: #fff1f2; --cat-legal-b: #fee2e2; --cat-bank: #9333ea; --cat-bank-l: #faf5ff; --cat-bank-b: #f3e8ff; --cat-test: #ea580c; --cat-test-l: #fff7ed; --cat-test-b: #ffedd5; --cat-evt: #db2777; --cat-evt-l: #fdf2f8; --cat-evt-b: #fce7f3; --cat-intl: #059669; --cat-intl-l: #ecfdf5; --cat-intl-b: #d1fae5; --cat-edu: #8b5cf6; --cat-edu-l: #f5f3ff; --cat-edu-b: #ede9fe; /* Typography */ --font-h: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --font-b: 'Nunito', system-ui, sans-serif; /* Border radius */ --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:30px; /* aliases used in business/med pages */ --radius-sm:var(--r-sm); --radius-md:var(--r-md); --radius-lg:var(--r-lg); /* Shadows */ --sh-sm:0 1px 4px rgba(0,0,0,.07); --sh-md:0 4px 18px rgba(13,148,136,.13); --sh-lg:0 10px 40px rgba(13,148,136,.20); /* aliases */ --shadow-sm:var(--sh-sm); --shadow-md:var(--sh-md); --shadow-lg:var(--sh-lg); /* Grey aliases used by business/med pages */ --gray-50:var(--g50); --gray-100:var(--g100); --gray-200:var(--g200); --gray-300:var(--g300); --gray-400:var(--g400); --gray-600:var(--g600); --gray-700:var(--g700); --gray-800:var(--g800); --gray-900:var(--g900); } /* ══════════════════════════════════════════════════════════════ RESET & BASE ══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing:border-box; margin:0; padding:0 } html { scroll-behavior:smooth; font-size:16px } body { font-family:var(--font-b); background:var(--white); color:var(--g800); line-height:1.75; -webkit-font-smoothing:antialiased; } a { color:var(--t6); text-decoration:none; transition:color .2s } a:hover { color:var(--t7); text-decoration:underline } img { max-width:100%; display:block } ul { list-style:none } /* ══════════════════════════════════════════════════════════════ READING PROGRESS BAR ══════════════════════════════════════════════════════════════ */ #prog, #progress-bar { position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg, var(--t5), var(--t3), var(--t4)); z-index:9999; transition:width .1s; } /* ══════════════════════════════════════════════════════════════ BREADCRUMB ══════════════════════════════════════════════════════════════ */ .breadcrumb { background:var(--t9); padding:8px 22px; } .breadcrumb-inner { max-width:1140px; margin:0 auto; display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-size:.72rem; font-weight:600; color:rgba(255,255,255,.55); } .breadcrumb-inner a { color:var(--t3); text-decoration:none; transition:color .2s; } .breadcrumb-inner a:hover { color:#fff; text-decoration:underline } .breadcrumb-sep { color:rgba(255,255,255,.3); font-size:.65rem; padding:0 2px; } .breadcrumb-current { color:rgba(255,255,255,.85); font-weight:700; } /* ══════════════════════════════════════════════════════════════ SITE HEADER ══════════════════════════════════════════════════════════════ */ .site-header { position:sticky; top:0; z-index:500; background:linear-gradient(135deg, var(--t9) 0%, var(--t7) 60%, var(--t6) 100%); box-shadow:0 2px 24px rgba(0,0,0,.28); } /* Inner wrapper — supports both .hdr-inner and .header-inner class names */ .hdr-inner, .header-inner { max-width:1140px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:13px 22px; gap:14px; } /* Logo */ .logo-g, .logo-wrap, .logo-group { display:flex; align-items:center; gap:10px; flex-shrink:0; } .logo-leaf, .logo-icon { font-size:1.7rem; line-height:1; } .logo-text { font-family:var(--font-h); font-size:1.25rem; font-weight:700; color:#fff; line-height:1.1; } .logo-sub { font-size:.58rem; color:rgba(255,255,255,.6); letter-spacing:1.5px; text-transform:uppercase; margin-top:1px; } /* Header pill badge */ .hdr-pill, .header-pill { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.9); font-size:.7rem; font-weight:700; padding:4px 12px; border-radius:20px; white-space:nowrap; flex-shrink:0; } /* Navigation links — supports .hdr-nav, .header-nav, .site-nav */ .hdr-nav, .header-nav, .site-nav { display:flex; gap:4px; flex-wrap:wrap; } .hdr-nav a, .header-nav a, .site-nav a { color:rgba(255,255,255,.78); font-size:.75rem; font-weight:600; padding:5px 10px; border-radius:var(--r-sm); transition:background .2s, color .2s; white-space:nowrap; } .hdr-nav a:hover, .hdr-nav a.active, .header-nav a:hover, .header-nav a.active, .site-nav a:hover, .site-nav a.active { background:rgba(255,255,255,.18); color:#fff; text-decoration:none; } /* Mobile hamburger */ .nav-toggle { display:none; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:1.1rem; padding:6px 10px; border-radius:var(--r-sm); cursor:pointer; } @media(max-width:760px) { .hdr-nav, .header-nav { display:none; position:absolute; top:100%; left:0; right:0; background:var(--t9); flex-direction:column; padding:10px 16px 16px; gap:2px; box-shadow:0 8px 24px rgba(0,0,0,.3); } .hdr-nav.open, .header-nav.open { display:flex } .nav-toggle { display:block } .hdr-pill, .header-pill { display:none } .site-nav { flex-wrap:wrap; gap:2px } } /* ══════════════════════════════════════════════════════════════ HERO — shared base (page-specific variants below) ══════════════════════════════════════════════════════════════ */ .hero, .hero-med, .hero-biz { color:#fff; padding:78px 22px 66px; text-align:center; position:relative; overflow:hidden; } .hero { background:linear-gradient(160deg, var(--t9) 0%, var(--t8) 35%, var(--t7) 72%, var(--t6) 100%); } .hero-med { background:linear-gradient(155deg, #042f2e 0%, #0a4f4d 35%, var(--t7) 70%, var(--t5) 100%); } .hero-biz { background:linear-gradient(155deg, #042f2e 0%, #1e1b4b 40%, var(--t7) 75%, var(--t5) 100%); } /* Ambient overlay */ .hero::before, .hero-med::before, .hero-biz::before { content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse at 18% 75%, rgba(20,184,166,.22) 0%, transparent 55%), radial-gradient(ellipse at 82% 20%, rgba(45,212,191,.16) 0%, transparent 50%), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='.03'%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); } /* Decorative emoji for biz page */ .hero-biz::after { content:'💼'; position:absolute; right:24px; bottom:16px; font-size:4rem; opacity:.08; pointer-events:none; } .hero-bg, .hero-bg-pattern { position:absolute; inset:0; pointer-events:none } .hero-inner, .hero-content { position:relative; z-index:1; max-width:760px; margin:0 auto; } .hero-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.2); border-radius:30px; padding:5px 16px; font-size:.72rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--t2); margin-bottom:20px; } .hero h1, .hero-med h1, .hero-biz h1 { font-family:var(--font-h); font-size:clamp(2rem, 5.5vw, 3.8rem); font-weight:800; line-height:1.06; margin-bottom:12px; text-shadow:0 3px 24px rgba(0,0,0,.28); } .hero h1 em, .hero h1 span, .hero-med h1 span, .hero-biz h1 span { font-style:normal; color:var(--t3); } .hero-biz h1 span { color:#a5b4fc } .hero-sub, .hero-tagline { font-size:1.05rem; opacity:.85; font-weight:300; margin-bottom:28px; line-height:1.72; } /* Stat pills row */ .hero-stats, .hero-stat-row { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } .h-stat, .hero-stat { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:var(--r-md); padding:10px 18px; text-align:center; min-width:100px; } .h-stat-n, .hero-stat-num { font-family:var(--font-h); font-size:1.4rem; font-weight:800; color:var(--t3); } .h-stat-l, .hero-stat-lbl { font-size:.62rem; opacity:.72; text-transform:uppercase; letter-spacing:1px; margin-top:2px; } /* Hero pill badges */ .hero-pills, .hero-pill-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .hero-pill { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:var(--t1); border-radius:20px; padding:4px 13px; font-size:.76rem; font-weight:600; } /* ══════════════════════════════════════════════════════════════ SEARCH BAR (Resource Hub) ══════════════════════════════════════════════════════════════ */ .search-strip { background:var(--t0); border-bottom:2px solid var(--t2); padding:22px; } .search-inner { max-width:680px; margin:0 auto } .search-wrap { display:flex; gap:10px; align-items:center } .search-input { flex:1; padding:12px 18px; border:1.5px solid var(--g200); border-radius:var(--r-lg); font-size:.95rem; font-family:var(--font-b); color:var(--g800); background:#fff; outline:none; transition:border-color .2s, box-shadow .2s; } .search-input:focus { border-color:var(--t5); box-shadow:0 0 0 3px rgba(20,184,166,.15); } .search-hint { font-size:.8rem; color:var(--g400); text-align:center; margin-top:8px } /* ══════════════════════════════════════════════════════════════ FILTER TABS (Resource Hub) ══════════════════════════════════════════════════════════════ */ .filter-wrap { max-width:1140px; margin:0 auto; padding:26px 22px 4px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .filter-label { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--g400); margin-right:4px; flex-shrink:0; } .filter-btn { padding:6px 14px; border-radius:20px; border:1.5px solid var(--g200); background:#fff; font-size:.78rem; font-weight:700; cursor:pointer; font-family:var(--font-b); color:var(--g600); transition:all .2s; white-space:nowrap; } .filter-btn:hover { border-color:var(--t5); color:var(--t7); background:var(--t0) } .filter-btn.active { background:var(--t6); color:#fff; border-color:var(--t6) } /* ══════════════════════════════════════════════════════════════ MAIN LAYOUT ══════════════════════════════════════════════════════════════ */ .page-wrap { max-width:1140px; margin:0 auto; padding:0 22px } /* Resource Hub layout */ .content-with-toc { display:grid; grid-template-columns:220px 1fr; gap:36px; max-width:1140px; margin:0 auto; padding:0 22px; } .res-main { min-width:0 } @media(max-width:860px) { .content-with-toc { grid-template-columns:1fr } .toc-sidebar { display:none } } /* Article layout (med, business pages) */ .art-layout { display:grid; grid-template-columns:1fr 290px; gap:36px; padding:44px 24px; max-width:1100px; margin:0 auto; } @media(max-width:820px) { .art-layout { grid-template-columns:1fr } } /* ══════════════════════════════════════════════════════════════ TOC SIDEBAR (Resource Hub) ══════════════════════════════════════════════════════════════ */ .toc-sidebar { position:sticky; top:80px; height:fit-content; padding:24px 0; flex-shrink:0; } .toc-box { background:var(--g50); border:1.5px solid var(--g200); border-radius:var(--r-lg); padding:20px; } .toc-title { font-family:var(--font-h); font-size:1.15rem; font-weight:700; color:var(--t8); margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid var(--t1); display:flex; align-items:center; gap:8px; } /* Resource Hub TOC title (small caps version) */ .toc-box > .toc-title { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:1.2px; color:var(--t7); font-family:var(--font-b); } .toc-item { display:flex; align-items:center; gap:8px; padding:5px 0; border-radius:var(--r-sm); cursor:pointer; transition:all .18s } .toc-item:hover { color:var(--t6) } .toc-item a { color:var(--g600); font-size:.82rem; font-weight:600; transition:color .2s; text-decoration:none; display:flex; align-items:center; gap:7px; } .toc-item a:hover { color:var(--t5) } .toc-item a.current { color:var(--t6) } .toc-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0 } .toc-count { margin-left:auto; font-size:.66rem; font-weight:800; padding:1px 6px; border-radius:8px; background:var(--g100); color:var(--g400); } /* Starter guide TOC card */ .toc-card { background:var(--t0); border:1.5px solid var(--t2); border-radius:var(--r-lg); padding:28px 32px; margin-bottom:10px; } .toc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:6px 20px; } .toc-row { display:flex; align-items:baseline; gap:8px; padding:4px 0; font-size:.875rem } .toc-n { font-size:.68rem; font-weight:800; color:var(--t5); width:22px; flex-shrink:0 } .toc-row a { color:var(--t7); font-weight:600; transition:color .2s } .toc-row a:hover { color:var(--t5); text-decoration:none } /* ══════════════════════════════════════════════════════════════ RESOURCE SECTIONS (Resource Hub) ══════════════════════════════════════════════════════════════ */ .resource-section { padding:44px 0 8px } .resource-section + .resource-section { border-top:1px solid var(--g100) } .rs-header { display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap } .rs-icon-wrap { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; box-shadow:var(--sh-sm); } .rs-title { font-family:var(--font-h); font-size:1.7rem; font-weight:700; line-height:1.1 } .rs-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:2px } .rs-count { font-size:.72rem; font-weight:800; padding:2px 8px; border-radius:10px } .rs-desc { font-size:.85rem; color:var(--g400); font-style:italic; margin-left:4px } /* ══════════════════════════════════════════════════════════════ RESOURCE CARDS (Resource Hub) ══════════════════════════════════════════════════════════════ */ .res-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(310px,1fr)); gap:14px; } .res-card { background:#fff; border-radius:var(--r-lg); border:1.5px solid var(--g200); padding:0; box-shadow:var(--sh-sm); overflow:hidden; transition:transform .22s, box-shadow .22s; display:flex; flex-direction:column; } .res-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md) } .res-card-accent { height:4px; flex-shrink:0 } .res-card-body { padding:18px 20px; flex:1; display:flex; flex-direction:column } .res-card-top { display:flex; align-items:flex-start; gap:12px; margin-bottom:10px } .res-emoji { font-size:1.6rem; line-height:1; flex-shrink:0; margin-top:2px } .res-name { font-weight:800; font-size:.97rem; color:var(--g800); line-height:1.25; margin-bottom:3px } .res-type { font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; opacity:.65 } .res-desc { font-size:.82rem; color:var(--g600); line-height:1.65; flex:1; margin-bottom:14px } .res-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px } .res-tag { display:inline-block; font-size:.67rem; font-weight:700; padding:2px 8px; border-radius:10px } .res-links { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:12px; border-top:1px solid var(--g100); } .res-link { display:inline-flex; align-items:center; gap:5px; font-size:.78rem; font-weight:700; padding:5px 13px; border-radius:20px; border:1.5px solid currentColor; transition:all .2s; } .res-link:hover { text-decoration:none } /* ══════════════════════════════════════════════════════════════ STATS BAR (Resource Hub) ══════════════════════════════════════════════════════════════ */ .hub-stats { background:var(--t9); color:#fff; display:flex; justify-content:center; flex-wrap:wrap; } .hs-item { padding:16px 24px; text-align:center; border-right:1px solid rgba(255,255,255,.1); } .hs-item:last-child { border-right:none } .hs-num { font-family:var(--font-h); font-size:1.4rem; font-weight:800; color:var(--t3) } .hs-lbl { font-size:.65rem; opacity:.65; text-transform:uppercase; letter-spacing:.6px; margin-top:2px } /* ══════════════════════════════════════════════════════════════ ARTICLE BODY (med-cannabis, business-cannabis) ══════════════════════════════════════════════════════════════ */ .art-body h2 { font-family:var(--font-h); font-size:1.55rem; font-weight:800; color:var(--t7); margin:40px 0 12px; padding-bottom:10px; border-bottom:2px solid var(--t0); } .art-body h3 { font-size:1.05rem; font-weight:700; color:var(--g800); margin:24px 0 8px } .art-body p { margin-bottom:16px; color:var(--g600); font-size:.96rem } /* Styled bullets */ .art-list { list-style:none; margin:10px 0 20px } .art-list li { padding:7px 0 7px 28px; position:relative; color:var(--g600); font-size:.94rem; border-bottom:1px solid var(--g100); } .art-list li:last-child { border-bottom:none } .art-list li::before { content:'▸'; position:absolute; left:6px; color:var(--t5); font-size:.8rem; top:10px; } .art-list li strong { color:var(--g800) } .sub-list { list-style:none; margin:6px 0 0 14px } .sub-list li { font-size:.84rem; color:var(--g400); padding:2px 0 2px 18px; position:relative; border-bottom:none!important; } .sub-list li::before { content:'–'; position:absolute; left:3px; color:var(--t4) } /* ══════════════════════════════════════════════════════════════ CALLOUT BOXES ══════════════════════════════════════════════════════════════ */ .callout { border-left:4px solid var(--t5); background:var(--t0); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:14px 18px; margin:20px 0; font-size:.92rem; color:var(--t9); line-height:1.75; } .callout strong { font-weight:800 } .callout-warn { border-left-color:var(--gold); background:#fffbeb; color:#78350f } .callout-danger { border-left-color:var(--rose); background:#fff1f2; color:#9f1239 } .callout-blue { border-left-color:var(--blue); background:#eff6ff; color:#1e3a5f } .callout-violet { border-left-color:var(--violet); background:#f5f3ff; color:#3b0764 } .callout-rose { border-left-color:var(--rose); background:#fff1f2; color:#9f1239 } /* ══════════════════════════════════════════════════════════════ TAG PILLS ══════════════════════════════════════════════════════════════ */ .tag { display:inline-block; padding:2px 9px; border-radius:20px; font-size:.72rem; font-weight:700 } .tag-g { background:#d1fae5; color:#065f46 } .tag-y { background:#fef3c7; color:#92400e } .tag-r { background:#fee2e2; color:#991b1b } .tag-b { background:#dbeafe; color:#1e40af } .tag-v { background:#ede9fe; color:#5b21b6 } .tag-o { background:#fff7ed; color:#c2410c } /* ══════════════════════════════════════════════════════════════ TABLES ══════════════════════════════════════════════════════════════ */ .t-wrap { overflow-x:auto; border-radius:var(--r-lg); box-shadow:var(--sh-md); margin:22px 0; } table { width:100%; border-collapse:collapse; background:#fff; font-size:.875rem; min-width:520px } thead { background:linear-gradient(135deg, var(--t8), var(--t6)) } thead th { padding:13px 16px; text-align:left; font-weight:700; font-size:.8rem; color:#fff; letter-spacing:.5px; white-space:nowrap; } tbody tr { border-bottom:1px solid var(--g100); transition:background .15s } tbody tr:hover { background:var(--t0) } tbody td { padding:11px 16px; color:var(--g600); vertical-align:top; line-height:1.6 } tbody td:first-child { font-weight:700; color:var(--g800) } tbody tr:last-child { border-bottom:none } /* ══════════════════════════════════════════════════════════════ STAT CARDS (med-cannabis) ══════════════════════════════════════════════════════════════ */ .stat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:16px; margin:24px 0; } .stat-card { background:#fff; border-radius:var(--r-md); border:1.5px solid var(--g200); padding:20px; box-shadow:var(--sh-sm); text-align:center; transition:transform .2s, box-shadow .2s; } .stat-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md) } .stat-icon { font-size:1.8rem; margin-bottom:8px } .stat-lbl { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--t5); margin-bottom:4px } .stat-val { font-family:var(--font-h); font-size:1.5rem; font-weight:800; color:var(--g800) } .stat-sub { font-size:.76rem; color:var(--g400); margin-top:4px } /* Conditions grid */ .cond-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:12px; margin:20px 0; } .cond-card { background:#fff; border:1.5px solid var(--g200); border-radius:var(--r-md); padding:14px 12px; text-align:center; box-shadow:var(--sh-sm); transition:transform .18s, box-shadow .18s; } .cond-card:hover { transform:translateY(-2px); box-shadow:var(--sh-md) } .cond-emoji { font-size:1.6rem; margin-bottom:6px } .cond-name { font-size:.82rem; font-weight:700; color:var(--t7) } .cond-note { font-size:.72rem; color:var(--g400); margin-top:3px } /* ══════════════════════════════════════════════════════════════ COMPARE SPLIT CARDS (business-cannabis) ══════════════════════════════════════════════════════════════ */ .compare-split { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:24px 0; } @media(max-width:600px) { .compare-split { grid-template-columns:1fr } } .cs-card { border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-sm) } .cs-med { background:linear-gradient(135deg, #f0fdfa, #e0fdf9); border:1.5px solid #99f6e4 } .cs-au { background:linear-gradient(135deg, #fff7ed, #ffedd5); border:1.5px solid #fed7aa } .cs-title { font-family:var(--font-h); font-size:1.1rem; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px; } .cs-med .cs-title { color:#0a6e6e } .cs-au .cs-title { color:#c2410c } .cs-list { list-style:none } .cs-list li { padding:6px 0 6px 22px; position:relative; font-size:.84rem; border-bottom:1px solid rgba(0,0,0,.06); color:var(--g700); } .cs-list li:last-child { border-bottom:none } .cs-list li::before { content:'•'; position:absolute; left:6px; font-size:.9rem } .cs-med .cs-list li::before { color:var(--t5) } .cs-au .cs-list li::before { color:#ea580c } /* Step cards */ .steps-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px; margin:22px 0; } .step-card { background:#fff; border-radius:var(--r-md); border:1.5px solid var(--g200); padding:20px; box-shadow:var(--sh-sm); transition:transform .2s, box-shadow .2s; } .step-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md) } .step-num { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, var(--t7), var(--t5)); color:#fff; font-weight:800; font-size:.9rem; display:flex; align-items:center; justify-content:center; margin-bottom:12px; flex-shrink:0; } .step-title { font-weight:700; font-size:.95rem; color:var(--t7); margin-bottom:6px } .step-body { font-size:.82rem; color:var(--g600); line-height:1.65 } /* Risk matrix */ .risk-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px; margin:22px 0; } .risk-card { border-radius:var(--r-md); padding:18px; box-shadow:var(--sh-sm); border:1.5px solid var(--g200); background:#fff; transition:transform .2s; } .risk-card:hover { transform:translateY(-3px) } .risk-icon { font-size:1.5rem; margin-bottom:8px } .risk-title { font-weight:700; font-size:.9rem; color:var(--t7); margin-bottom:6px } .risk-body { font-size:.79rem; color:var(--g600); line-height:1.6 } .risk-badge { display:inline-block; font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:10px; margin-top:8px; } /* Feature highlight block */ .feature-highlight { background:linear-gradient(135deg, var(--t7), var(--violet)); border-radius:var(--r-lg); padding:32px 36px; margin:28px 0; color:#fff; position:relative; overflow:hidden; } .feature-highlight::after { content:'💼'; position:absolute; right:24px; bottom:16px; font-size:4rem; opacity:.12 } .feature-highlight h3 { font-family:var(--font-h); font-size:1.3rem; color:#c4b5fd; margin-bottom:10px; } .feature-highlight p { font-size:.93rem; opacity:.9; line-height:1.8 } /* Dual licence breakdown */ .dual-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px; margin:22px 0; } .dual-card { background:#fff; border-radius:var(--r-md); border-left:4px solid var(--t5); padding:18px 20px; box-shadow:var(--sh-sm); } .dual-card h4 { font-weight:700; font-size:.92rem; color:var(--t7); margin-bottom:8px } .dual-card p { font-size:.82rem; color:var(--g600); line-height:1.65 } /* Sidebar */ .sidebar { display:flex; flex-direction:column; gap:18px } .sb-card { background:#fff; border-radius:var(--r-md); border:1px solid var(--g200); padding:20px; box-shadow:var(--sh-sm); } .sb-card h4 { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--t7); margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--t0); } .sb-card ul { list-style:none } .sb-card ul li { padding:6px 0; border-bottom:1px solid var(--g100); font-size:.84rem } .sb-card ul li:last-child { border-bottom:none } .sb-card ul li a { color:var(--t7); font-weight:500 } .sb-card ul li a:hover { color:var(--t5) } .sb-alert { background:linear-gradient(135deg, var(--t7), var(--violet)); color:#fff; border-radius:var(--r-md); padding:20px; } .sb-alert h4 { border-bottom-color:rgba(255,255,255,.2); color:rgba(255,255,255,.9) } .sb-alert ul li { border-bottom-color:rgba(255,255,255,.1); color:rgba(255,255,255,.85); font-size:.82rem } .sb-alert ul li a { color:var(--t2) } /* Citations */ .citations { background:var(--g50); border:1px solid var(--g200); border-radius:var(--r-md); padding:24px 28px; margin-top:44px; } .citations h3 { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--t7); margin-bottom:14px; } .citations ol { padding-left:20px } .citations li { font-size:.82rem; color:var(--g600); margin-bottom:8px; line-height:1.55 } .citations a { color:var(--t5); word-break:break-all } /* ══════════════════════════════════════════════════════════════ STARTER GUIDE — page-specific components ══════════════════════════════════════════════════════════════ */ /* Layout sections */ .section { padding:56px 0 } .section + .section { border-top:1px solid var(--g100) } .eyebrow { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--t5); margin-bottom:6px; } .section-title { font-family:var(--font-h); font-size:clamp(1.6rem, 3.5vw, 2.2rem); font-weight:700; color:var(--t8); margin-bottom:20px; display:flex; align-items:center; gap:12px; line-height:1.15; } .section-title .s-icon { width:42px; height:42px; border-radius:12px; flex-shrink:0; background:linear-gradient(135deg, var(--t7), var(--t5)); display:flex; align-items:center; justify-content:center; font-size:1.2rem; box-shadow:var(--sh-md); } .section-lead { color:var(--g600); font-size:.97rem; margin-bottom:28px; max-width:680px; line-height:1.75 } /* Intro banner */ .intro-banner { background:linear-gradient(135deg, var(--t9), var(--t8)); color:#fff; border-radius:var(--r-xl); padding:36px 40px; margin-bottom:16px; position:relative; overflow:hidden; } .intro-banner::after { content:'🌿'; position:absolute; right:28px; top:16px; font-size:5.5rem; opacity:.1; pointer-events:none } .intro-banner h3 { font-family:var(--font-h); font-size:1.5rem; color:var(--t2); margin-bottom:12px; font-weight:700 } .intro-banner p { opacity:.88; font-size:.95rem; font-weight:300; line-height:1.85; margin-bottom:12px } .intro-list { margin:0 0 0 4px } .intro-list li { padding:5px 0 5px 24px; position:relative; opacity:.88; font-size:.92rem } .intro-list li::before { content:'✓'; position:absolute; left:0; color:var(--t3); font-weight:800; font-size:.8rem } /* Product cards */ .product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:16px; margin:24px 0; } .product-card { background:#fff; border-radius:var(--r-lg); border:1.5px solid var(--g200); padding:20px 16px 18px; text-align:center; box-shadow:var(--sh-sm); transition:transform .22s, box-shadow .22s; display:flex; flex-direction:column; align-items:center; } .product-card:hover { transform:translateY(-5px); box-shadow:var(--sh-md) } .product-emoji { font-size:2.8rem; margin-bottom:10px; line-height:1 } .product-name { font-family:var(--font-h); font-size:1.05rem; font-weight:700; color:var(--t8); margin-bottom:6px } .product-desc { font-size:.78rem; color:var(--g600); line-height:1.6; margin-bottom:12px; flex:1 } .onset-badge { display:inline-block; font-size:.68rem; font-weight:800; padding:3px 10px; border-radius:12px; letter-spacing:.5px; text-transform:uppercase; } /* Glossary cards */ .gloss-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:13px; margin:22px 0; } .gloss-card { border-radius:var(--r-md); padding:16px 18px; box-shadow:var(--sh-sm); border-left:4px solid transparent; background:var(--g50); transition:transform .18s, box-shadow .18s; } .gloss-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md) } .g-term { font-weight:800; font-size:.95rem; margin-bottom:5px } .g-def { font-size:.8rem; color:var(--g600); line-height:1.6 } /* Cannabinoid / terpene table row colours */ .cb-r1 td:first-child { color:#7c3aed } .cb-r2 td:first-child { color:#0d9488 } .cb-r3 td:first-child { color:#dc2626 } .cb-r4 td:first-child { color:#2563eb } .cb-r5 td:first-child { color:#b45309 } .cb-r6 td:first-child { color:#059669 } .cb-r7 td:first-child { color:#db2777 } .cb-r8 td:first-child { color:#0891b2 } .cb-r9 td:first-child { color:#9333ea } .cb-r10 td:first-child { color:#16a34a } .cb-r11 td:first-child { color:#ea580c } .terp-row-0 { background:#f0fdf4 } .terp-row-1 { background:#eff6ff } .terp-row-2 { background:#fff7ed } .terp-row-3 { background:#f5f3ff } .terp-row-4 { background:#fefce8 } .terp-row-5 { background:#ecfeff } .terp-row-6 { background:#fdf4ff } .terp-row-7 { background:#fff1f2 } .terp-row-8 { background:#f0fdfa } .terp-row-9 { background:#fafaf5 } .terp-row-10 { background:#fff0f0 } /* Entourage block */ .entourage-block { background:linear-gradient(140deg, var(--t9), #0c4a3a); border-radius:var(--r-xl); padding:44px 40px; margin:36px 0; color:#fff; position:relative; overflow:hidden; } .entourage-block::before { content:'✨'; position:absolute; right:30px; bottom:18px; font-size:4.5rem; opacity:.12; pointer-events:none; } .entourage-block p { font-size:.97rem; opacity:.88; line-height:1.85; font-style:italic; margin-bottom:22px; max-width:640px } .entourage-label { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--t3); margin-bottom:10px } .entourage-formula { background:var(--t4); color:var(--t9); border-radius:var(--r-md); padding:16px 24px; font-family:var(--font-h); font-size:clamp(1rem, 2.8vw, 1.4rem); font-weight:800; text-align:center; letter-spacing:.5px; box-shadow:0 4px 20px rgba(45,212,191,.35); } /* Dosing */ .dose-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:18px; margin:22px 0; } .dose-card { border-radius:var(--r-lg); border:1.5px solid var(--g200); background:#fff; padding:24px; box-shadow:var(--sh-sm) } .dose-header { display:flex; align-items:center; gap:10px; margin-bottom:16px } .dose-emoji { font-size:1.7rem } .dose-title { font-family:var(--font-h); font-size:1.05rem; font-weight:700; color:var(--t8) } .dose-subtitle { font-size:.75rem; color:var(--g400); margin-top:1px } .dose-tbl { width:100%; font-size:.8rem; border-collapse:collapse } .dose-tbl th { text-align:left; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--t7); padding:5px 6px; border-bottom:1.5px solid var(--t1); } .dose-tbl td { padding:7px 6px; color:var(--g600); border-bottom:1px solid var(--g100); vertical-align:top } .dose-tbl tr:last-child td { border-bottom:none } .dose-tbl td:first-child { font-weight:700; white-space:nowrap } .dose-note { font-size:.75rem; color:var(--t6); font-style:italic; margin-top:10px; padding-top:10px; border-top:1px solid var(--t1) } .d-micro { color:#22c55e } .d-low { color:#84cc16 } .d-mod { color:#f59e0b } .d-high { color:#f97316 } .d-vhigh { color:#ef4444 } /* Side effects */ .se-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:22px 0 } .se-card { border-radius:var(--r-lg); padding:22px 24px; box-shadow:var(--sh-sm) } .se-common { background:#fff7ed; border:1.5px solid #fed7aa } .se-avoid { background:#fff1f2; border:1.5px solid #fecdd3 } .se-title { font-weight:800; font-size:.95rem; display:flex; align-items:center; gap:6px; margin-bottom:14px } .se-common .se-title { color:#c2410c } .se-avoid .se-title { color:#be123c } .se-list li { padding:5px 0 5px 22px; position:relative; font-size:.84rem; color:var(--g700); border-bottom:1px solid rgba(0,0,0,.05); } .se-list li:last-child { border-bottom:none } .se-list li::before { position:absolute; left:0; top:5px; font-size:.7rem } .se-common .se-list li::before { content:'⚠' } .se-avoid .se-list li::before { content:'🚫' } @media(max-width:580px) { .se-grid { grid-template-columns:1fr } } /* Factors grid */ .factors-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:14px; margin:22px 0; } .factor-card { background:#fff; border-radius:var(--r-md); padding:22px 20px; border:1.5px solid var(--g200); box-shadow:var(--sh-sm); transition:transform .2s, box-shadow .2s; } .factor-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md) } .f-icon { font-size:1.9rem; margin-bottom:10px } .f-title { font-weight:800; font-size:.93rem; color:var(--t8); margin-bottom:6px } .f-body { font-size:.8rem; color:var(--g600); line-height:1.65 } .f-bullets { margin:8px 0 0 4px } .f-bullets li { font-size:.77rem; color:var(--g400); padding:2px 0 2px 16px; position:relative } .f-bullets li::before { content:'–'; position:absolute; left:2px; color:var(--t4) } /* Record keeper form */ .record-wrap { background:linear-gradient(155deg, var(--t0), #fff 70%); border:2px solid var(--t2); border-radius:var(--r-xl); padding:40px 38px; box-shadow:var(--sh-lg); } .record-heading { font-family:var(--font-h); font-size:1.7rem; font-weight:700; color:var(--t8); margin-bottom:5px } .record-sub { font-size:.87rem; color:var(--t6); font-style:italic; margin-bottom:28px } .f-divider { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:var(--t6); margin:22px 0 12px; padding-bottom:7px; border-bottom:1.5px solid var(--t1); display:flex; align-items:center; gap:8px; } .fg { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px; margin-bottom:4px } .fg.two { grid-template-columns:1fr 1fr } .fg.three { grid-template-columns:1fr 1fr 1fr } .fg.full .form-group { grid-column:1/-1 } .form-group { display:flex; flex-direction:column; gap:5px } .form-group label { font-size:.73rem; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:var(--t7); } .form-group input, .form-group select, .form-group textarea { border:1.5px solid var(--g200); border-radius:var(--r-sm); padding:9px 12px; font-size:.9rem; font-family:var(--font-b); color:var(--g800); background:#fff; transition:border-color .2s, box-shadow .2s; outline:none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--t5); box-shadow:0 0 0 3px rgba(20,184,166,.15) } .form-group textarea { resize:vertical; min-height:76px } .mood-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px } .mood-btn { background:var(--g100); border:1.5px solid var(--g200); border-radius:20px; padding:5px 13px; font-size:.82rem; font-weight:600; font-family:var(--font-b); cursor:pointer; color:var(--g700); transition:all .2s; white-space:nowrap; } .mood-btn:hover, .mood-btn.on { background:var(--t6); color:#fff; border-color:var(--t6) } .effects-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:8px; margin-top:8px } .eff-label { display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--g700); padding:7px 11px; border:1.5px solid var(--g200); border-radius:var(--r-sm); cursor:pointer; transition:all .2s; background:#fff; } .eff-label input { width:16px; height:16px; accent-color:var(--t6); cursor:pointer; flex-shrink:0 } .eff-label:hover { border-color:var(--t3); background:var(--t0) } .stars-row { display:flex; gap:6px; margin-top:6px } .star-btn { font-size:1.4rem; cursor:pointer; color:var(--g200); transition:color .15s; background:none; border:none; padding:0 } .stars-row:hover .star-btn { color:var(--gold) } .stars-row .star-btn:hover ~ .star-btn { color:var(--g200) } .star-btn.lit { color:var(--gold) } .ynm-row { display:flex; gap:10px; margin-top:6px; flex-wrap:wrap } .ynm-btn { padding:7px 18px; border-radius:20px; border:1.5px solid var(--g200); background:#fff; font-size:.85rem; font-weight:700; cursor:pointer; font-family:var(--font-b); transition:all .2s; color:var(--g700); } .ynm-btn.yes:hover, .ynm-btn.yes.on { background:#dcfce7; border-color:#4ade80; color:#15803d } .ynm-btn.no:hover, .ynm-btn.no.on { background:#fee2e2; border-color:#f87171; color:#b91c1c } .ynm-btn.maybe:hover, .ynm-btn.maybe.on { background:#fef9c3; border-color:#fde047; color:#854d0e } .btn-row { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap } .btn-primary { background:linear-gradient(135deg, var(--t7), var(--t5)); color:#fff; border:none; border-radius:var(--r-md); padding:13px 28px; font-size:.95rem; font-weight:700; font-family:var(--font-b); cursor:pointer; box-shadow:0 4px 16px rgba(13,148,136,.32); transition:all .22s; display:flex; align-items:center; gap:8px; } .btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 22px rgba(13,148,136,.42) } .btn-secondary { background:transparent; color:var(--t7); border:1.5px solid var(--t4); border-radius:var(--r-md); padding:13px 24px; font-size:.95rem; font-weight:700; font-family:var(--font-b); cursor:pointer; transition:all .2s; } .btn-secondary:hover { background:var(--t0) } .record-footer { margin-top:22px; padding-top:16px; border-top:1px solid var(--t1); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:.75rem; color:var(--g400); } /* Bar chart */ .bar-chart { margin:22px 0 } .bar-row { display:flex; align-items:center; gap:14px; margin-bottom:10px; font-size:.84rem } .bar-label { width:150px; flex-shrink:0; color:var(--g600); font-weight:500; text-align:right; font-size:.82rem } .bar-track { flex:1; height:26px; background:var(--g100); border-radius:30px; overflow:hidden } .bar-fill { height:100%; border-radius:30px; display:flex; align-items:center; padding-left:10px } .bar-val { font-size:.72rem; font-weight:800; color:#fff; white-space:nowrap } /* ══════════════════════════════════════════════════════════════ SITE FOOTER — unified across all pages ══════════════════════════════════════════════════════════════ */ .site-footer { background:var(--t9); color:rgba(255,255,255,.7); padding:44px 22px; text-align:center; margin-top:64px; } .footer-brand { font-family:var(--font-h); font-size:1.4rem; font-weight:800; color:#fff; margin-bottom:8px; } .footer-nav, .footer-links { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 18px; margin:10px 0; font-size:.8rem; } .footer-nav a, .footer-links a { color:var(--t3) } .footer-nav a:hover, .footer-links a:hover { color:#fff; text-decoration:underline } .footer-disc { font-size:.75rem; max-width:640px; margin:14px auto 0; opacity:.5; line-height:1.7; } .footer-stamp, .update-stamp { font-size:.7rem; opacity:.38; margin-top:14px; } .site-footer p { margin-bottom:6px; opacity:.65; font-size:.88rem } /* ══════════════════════════════════════════════════════════════ SCROLL REVEAL ══════════════════════════════════════════════════════════════ */ .reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease } .reveal.in { opacity:1; transform:none } /* ══════════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════════ */ @media(max-width:640px) { .hero, .hero-med, .hero-biz { padding:52px 16px 44px } .res-grid { grid-template-columns:1fr } .hs-item { padding:12px 16px; border-right:none; border-bottom:1px solid rgba(255,255,255,.1); width:50% } .filter-wrap { padding:16px 16px 4px } .section { padding:38px 0 } .product-grid { grid-template-columns:repeat(2,1fr) } .toc-grid { grid-template-columns:1fr } .intro-banner { padding:24px 22px } .entourage-block { padding:30px 24px } .record-wrap { padding:26px 18px } .fg.two, .fg.three { grid-template-columns:1fr } .bar-label { width:90px; font-size:.75rem } .section-title { font-size:1.45rem } .art-layout { padding:28px 16px } } @media(max-width:400px) { .product-grid { grid-template-columns:1fr } .gloss-grid { grid-template-columns:1fr } .cond-grid { grid-template-columns:repeat(2,1fr) } } /* ══════════════════════════════════════════════════════════════ PRINT ══════════════════════════════════════════════════════════════ */ @media print { .site-header, #prog, #progress-bar, .nav-toggle, .hero-pills, .btn-row, .site-footer, .filter-wrap, .search-strip, .toc-sidebar { display:none } .content-with-toc, .art-layout { grid-template-columns:1fr } body { font-size:11px } .res-card, .step-card { break-inside:avoid } a::after { content:" (" attr(href) ")"; font-size:.7em; color:#555 } }