/* ========================================================================== ROWAN GUARDIAN™ — SHARED DESIGN SYSTEM Light Theme · Institutional Trust · Earth Tone Accents Version: 2.0 — June 2026 ========================================================================== */ /* --- Google Fonts (loaded in HTML ) --- Inter (sans), Outfit (display), Lora (serif/editorial) ========================================================================== */ /* --- Custom Properties --- */ :root { /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Outfit', -apple-system, sans-serif; --font-serif: 'Lora', Georgia, 'Times New Roman', serif; /* Base Palette — Light Theme */ --bg-primary: #FAFAF7; --bg-secondary: #F3F1EB; --bg-white: #FFFFFF; --bg-dark: #1C1F1B; --text-color: #1C1F1B; --text-muted: #5A5D58; --text-light: #8A8D88; --border-color: #E2DFD8; --border-light: #F0EDE6; /* Earth Tone Accents */ --sage: #7aaa5d; --sage-dark: #5e8a45; --sage-light: #e8f0e3; --amber: #d4a24e; --amber-dark: #b8893a; --amber-light: #faf0dc; --terracotta: #c4784a; --terracotta-light: #fae8dc; /* Portal-Specific (overridden per body class) */ --portal-primary: var(--sage); --portal-primary-light: var(--sage-light); --portal-secondary: #5B8DB8; --portal-secondary-light: #e4eef6; /* Layout */ --section-padding: 100px 5%; --section-padding-sm: 60px 5%; --container-max: 1200px; --container-narrow: 800px; --border-radius: 12px; --border-radius-sm: 8px; --border-radius-lg: 16px; /* Typography Scale */ --body-size: 1.0625rem; --h1-size: 3rem; --h2-size: 2.2rem; --h3-size: 1.5rem; --h4-size: 1.15rem; --small-size: 0.875rem; --caption-size: 0.8rem; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 10px 30px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04); /* Transitions */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; } /* --- Portal Accent Overrides --- */ .classroom { --portal-primary: var(--sage); --portal-primary-light: var(--sage-light); --portal-secondary: #5B8DB8; --portal-secondary-light: #e4eef6; } .grower-pro { --portal-primary: var(--sage); --portal-primary-light: var(--sage-light); --portal-secondary: var(--amber); --portal-secondary-light: var(--amber-light); } .governments { --portal-primary: var(--sage); --portal-primary-light: var(--sage-light); --portal-secondary: #6B7D8A; --portal-secondary-light: #e8ecef; } /* ========================================================================== RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); font-size: var(--body-size); line-height: 1.7; color: var(--text-color); background-color: var(--bg-primary); } img { max-width: 100%; height: auto; display: block; } a { color: var(--portal-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--sage-dark); } /* ========================================================================== TYPOGRAPHY ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; color: var(--text-color); } h1 { font-size: var(--h1-size); letter-spacing: -0.02em; } h2 { font-size: var(--h2-size); letter-spacing: -0.01em; } h3 { font-size: var(--h3-size); } h4 { font-size: var(--h4-size); font-weight: 600; } p { margin-bottom: 1rem; } .text-muted { color: var(--text-muted); } .text-light { color: var(--text-light); } .text-center { text-align: center; } /* Editorial / Serif body text — for parent sections, origin stories */ .serif-editorial { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.9; color: var(--text-muted); } /* Highlighted gradient text */ .text-gradient { background: linear-gradient(135deg, var(--portal-primary), var(--portal-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Section tag — small uppercase label above section headings */ .section-tag { display: inline-block; font-family: var(--font-sans); font-size: var(--caption-size); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--portal-secondary); margin-bottom: 12px; } /* ========================================================================== LAYOUT ========================================================================== */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 20px; } .container-narrow { width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding: 0 20px; } section { padding: var(--section-padding); } .section-white { background-color: var(--bg-white); } .section-cream { background-color: var(--bg-secondary); } .section-light { background-color: var(--bg-primary); } /* Flexbox utilities */ .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-20 { gap: 20px; } .gap-30 { gap: 30px; } .gap-40 { gap: 40px; } .gap-50 { gap: 50px; } .gap-60 { gap: 60px; } /* Grid layouts */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } /* ========================================================================== NAVIGATION ========================================================================== */ .navbar { position: sticky; top: 0; z-index: 100; background-color: var(--bg-white); border-bottom: 1px solid var(--border-color); padding: 16px 5%; display: flex; justify-content: space-between; align-items: center; } .nav-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--text-color); text-decoration: none; display: flex; align-items: center; gap: 10px; } .nav-brand img { height: 32px; width: auto; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-link { font-family: var(--font-sans); font-weight: 500; font-size: 0.9rem; color: var(--text-muted); text-decoration: none; transition: color var(--transition-fast); position: relative; } .nav-link:hover { color: var(--text-color); } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--portal-primary); transition: width var(--transition-base); } .nav-link:hover::after { width: 100%; } /* Mobile nav toggle */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text-color); margin: 5px 0; transition: var(--transition-base); } /* ========================================================================== BUTTONS ========================================================================== */ .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background-color: var(--portal-primary); color: #FFFFFF; font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; border: none; border-radius: var(--border-radius-sm); cursor: pointer; text-decoration: none; transition: all var(--transition-base); box-shadow: var(--shadow-sm); } .btn-primary:hover { background-color: var(--sage-dark); color: #FFFFFF; box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background-color: transparent; color: var(--text-color); font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; border: 1.5px solid var(--border-color); border-radius: var(--border-radius-sm); cursor: pointer; text-decoration: none; transition: all var(--transition-base); } .btn-secondary:hover { border-color: var(--portal-primary); color: var(--portal-primary); background-color: var(--portal-primary-light); transform: translateY(-1px); } .btn-nav { padding: 10px 20px; font-size: 0.85rem; } /* ========================================================================== CARDS ========================================================================== */ .card { background-color: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 32px; transition: all var(--transition-base); } .card:hover { box-shadow: var(--shadow-md); border-color: var(--portal-primary-light); } .card-cream { background-color: var(--bg-secondary); border: 1px solid var(--border-light); } .card-icon { width: 48px; height: 48px; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 16px; } .card-icon-green { background-color: var(--sage-light); } .card-icon-blue { background-color: var(--portal-secondary-light); } .card-icon-amber { background-color: var(--amber-light); } .card-icon-red { background-color: var(--terracotta-light); } .card h3 { font-size: 1.15rem; margin-bottom: 12px; } .card p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; } /* ========================================================================== COMPLIANCE / TRUST BADGES ========================================================================== */ .trust-strip { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; padding: 20px 0; } .trust-badge { display: flex; align-items: center; gap: 8px; font-size: var(--small-size); font-weight: 600; color: var(--text-muted); padding: 8px 16px; background: var(--bg-secondary); border-radius: 100px; border: 1px solid var(--border-light); } .trust-badge-icon { font-size: 1rem; } /* Compliance grid — used on classroom portal */ .compliance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .compliance-card { padding: 24px; background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--border-radius); text-align: center; } .compliance-card .compliance-icon { font-size: 2rem; margin-bottom: 12px; } .compliance-card h4 { font-size: 0.95rem; margin-bottom: 8px; } .compliance-card p { font-size: var(--small-size); color: var(--text-muted); line-height: 1.5; } /* ========================================================================== COMPARISON TABLE — ChatGPT vs Rowan ========================================================================== */ .comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .comparison-col { padding: 36px; border-radius: var(--border-radius); border: 1.5px solid var(--border-color); } .comparison-col.negative { background-color: #fafafa; border-color: #e0d8d0; opacity: 0.85; } .comparison-col.positive { background-color: var(--bg-white); border-color: var(--sage); box-shadow: var(--shadow-md); } .comparison-col h3 { font-size: 1.1rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .comparison-chat { font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.7; color: var(--text-muted); margin-bottom: 20px; padding: 16px; background: var(--bg-primary); border-radius: var(--border-radius-sm); border-left: 3px solid var(--border-color); } .positive .comparison-chat { border-left-color: var(--sage); background: var(--sage-light); } .comparison-outcome { font-size: var(--small-size); font-weight: 600; padding: 12px 16px; border-radius: var(--border-radius-sm); } .comparison-outcome.bad { background: #fef2f2; color: #b91c1c; } .comparison-outcome.good { background: var(--sage-light); color: var(--sage-dark); } .check-list { list-style: none; padding: 0; } .check-list li { padding: 6px 0; font-size: 0.9rem; color: var(--text-muted); display: flex; align-items: flex-start; gap: 8px; } .check-list .icon-good { color: var(--sage); } .check-list .icon-bad { color: #b91c1c; } /* ========================================================================== RESEARCH EVIDENCE CARDS ========================================================================== */ .research-card { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 32px; border-top: 3px solid var(--portal-secondary); } .research-card .research-source { font-family: var(--font-sans); font-size: var(--caption-size); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--portal-secondary); margin-bottom: 12px; } .research-card blockquote { font-family: var(--font-serif); font-size: 1rem; line-height: 1.7; color: var(--text-color); font-style: italic; margin-bottom: 16px; padding-left: 16px; border-left: 3px solid var(--border-color); } .research-card .research-response { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; } .research-card .research-response strong { color: var(--text-color); } .research-card .research-citation { font-size: 0.78rem; color: var(--text-light); margin-top: 12px; font-style: italic; } /* ========================================================================== SAFETY PIPELINE — 4-stage visual ========================================================================== */ .pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; } .pipeline::before { content: ''; position: absolute; top: 40px; left: 12.5%; width: 75%; height: 2px; background: var(--border-color); z-index: 0; } .pipeline-stage { text-align: center; position: relative; z-index: 1; padding: 0 12px; } .pipeline-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--portal-primary-light); border: 2px solid var(--portal-primary); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto 16px; } .pipeline-stage h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .pipeline-stage p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; } /* ========================================================================== THINK FIRST PROTOCOL™ — 5-Step Visual ========================================================================== */ .protocol-steps { display: flex; flex-direction: column; gap: 0; } .protocol-step { display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--border-light); align-items: flex-start; } .protocol-step:last-child { border-bottom: none; } .step-number { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--portal-primary); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; } .step-content { flex: 1; } .step-content h4 { margin-bottom: 6px; font-size: 1rem; } .step-content p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 8px; } .skill-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--portal-secondary); background: var(--portal-secondary-light); padding: 4px 12px; border-radius: 100px; } /* ========================================================================== SCIENCE JOURNAL UI — Replaces Chat Bubbles ========================================================================== */ .science-journal { background: var(--bg-white); border: 1.5px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-md); } .journal-header { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); font-size: 0.85rem; font-weight: 600; } .journal-body { padding: 24px; } .journal-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--portal-secondary); margin-bottom: 6px; } .journal-entry { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-light); } .journal-entry:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .journal-evidence-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-right: 4px; } .tag-fact { background: var(--sage-light); color: var(--sage-dark); } .tag-inference { background: var(--amber-light); color: var(--amber-dark); } .tag-confidence { background: var(--portal-secondary-light); color: var(--portal-secondary); } .journal-xp { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--amber); margin-top: 12px; } /* ========================================================================== SCREENSHOT SHOWCASE ========================================================================== */ .screenshot-container { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); padding: 20px; box-shadow: var(--shadow-lg); } .screenshot-container img { border-radius: var(--border-radius); width: 100%; } .screenshot-caption { text-align: center; font-size: var(--small-size); color: var(--text-light); margin-top: 12px; font-style: italic; } /* ========================================================================== PARTNER BAR ========================================================================== */ .partner-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 30px; } .partner-card { flex: 1; min-width: 280px; max-width: 460px; padding: 32px; background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--border-radius); text-align: center; } .partner-card img { height: 48px; margin: 0 auto 16px; } .partner-card h4 { font-size: 1rem; margin-bottom: 4px; } .partner-card .partner-type { font-size: var(--caption-size); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--portal-secondary); margin-bottom: 12px; } .partner-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { background-color: var(--bg-secondary); border-top: 1px solid var(--border-color); padding: 60px 5% 40px; } .footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 40px; } .footer-col h5 { font-family: var(--font-sans); font-size: var(--caption-size); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-color); margin-bottom: 16px; } .footer-col p, .footer-col a { font-size: var(--small-size); color: var(--text-muted); line-height: 1.8; text-decoration: none; } .footer-col a:hover { color: var(--text-color); } .footer-compliance { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; padding: 24px 0; margin-bottom: 24px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .footer-badge { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 4px; } .footer-bottom { text-align: center; font-size: 0.78rem; color: var(--text-light); line-height: 1.8; } /* ========================================================================== FAQ ACCORDION ========================================================================== */ .faq-list { display: flex; flex-direction: column; gap: 2px; } .faq-item { border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); overflow: hidden; background: var(--bg-white); } .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; cursor: pointer; font-weight: 600; font-size: 0.95rem; background: none; border: none; width: 100%; text-align: left; font-family: var(--font-sans); color: var(--text-color); transition: background-color var(--transition-fast); } .faq-question:hover { background-color: var(--bg-primary); } .faq-question::after { content: '+'; font-size: 1.3rem; font-weight: 300; color: var(--text-light); transition: transform var(--transition-base); } .faq-item.active .faq-question::after { content: '−'; } .faq-answer { padding: 0 24px; max-height: 0; overflow: hidden; transition: max-height var(--transition-slow), padding var(--transition-slow); } .faq-item.active .faq-answer { padding: 0 24px 24px; max-height: 500px; } .faq-answer p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; } /* ========================================================================== IOT TIER GRAPHIC — Grower Pro ========================================================================== */ .tier-stack { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; } .tier-row { display: flex; align-items: center; gap: 20px; padding: 24px 28px; border-bottom: 1px solid var(--border-light); background: var(--bg-white); } .tier-row:last-child { border-bottom: none; } .tier-icon { font-size: 1.8rem; flex-shrink: 0; width: 56px; text-align: center; } .tier-info { flex: 1; } .tier-info h4 { font-size: 0.95rem; margin-bottom: 4px; } .tier-info p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0; } .tier-meta { text-align: right; flex-shrink: 0; } .tier-cost { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--portal-primary); } .tier-best { font-size: 0.75rem; color: var(--text-light); } /* ========================================================================== IMPLEMENTATION PATHWAY TABLE — Governments ========================================================================== */ .pathway-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; font-size: 0.9rem; } .pathway-table th { background: var(--bg-secondary); font-weight: 700; text-align: left; padding: 16px 20px; font-size: var(--small-size); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-color); } .pathway-table td { padding: 14px 20px; border-bottom: 1px solid var(--border-light); color: var(--text-muted); } .pathway-table tr:last-child td { border-bottom: none; } .pathway-table td:first-child { font-weight: 600; color: var(--text-color); } /* ========================================================================== SCROLL REVEAL ANIMATION ========================================================================== */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1024px) { :root { --h1-size: 2.4rem; --h2-size: 1.8rem; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .pipeline { grid-template-columns: repeat(2, 1fr); gap: 24px; } .pipeline::before { display: none; } } @media (max-width: 768px) { :root { --h1-size: 2rem; --h2-size: 1.5rem; --section-padding: 60px 5%; } .navbar { flex-wrap: wrap; gap: 12px; } .nav-links { display: none; flex-direction: column; width: 100%; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); } .nav-links.active { display: flex; } .nav-toggle { display: block; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .comparison-grid { grid-template-columns: 1fr; } .pipeline { grid-template-columns: 1fr 1fr; } .partner-bar { flex-direction: column; align-items: center; } .partner-card { max-width: 100%; } .footer-grid { flex-direction: column; } .hero-split { flex-direction: column; } } @media (max-width: 480px) { :root { --h1-size: 1.7rem; --h2-size: 1.35rem; } .trust-strip { flex-direction: column; align-items: center; } .pipeline { grid-template-columns: 1fr; } .btn-primary, .btn-secondary { width: 100%; justify-content: center; } } /* ========================================================================== UTILITY CLASSES ========================================================================== */ .mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; } .mb-40 { margin-bottom: 40px; } .mb-60 { margin-bottom: 60px; } .mt-20 { margin-top: 20px; } .mt-40 { margin-top: 40px; } .mt-60 { margin-top: 60px; } .max-w-900 { max-width: 900px; margin-left: auto; margin-right: auto; } .max-w-700 { max-width: 700px; margin-left: auto; margin-right: auto; }