/* ============================================================================ GeoProjectPortals — Brand foundation (design tokens + core components) "Visit Your Subsurface." Vintage field-guide meets geotechnical clarity. Load order: after Bootstrap, before page-specific styles. Fonts (Oswald + Inter) are linked from the page . See DESIGN_LANGUAGE.md for the full reference. ========================================================================== */ :root { /* --- Canvas & ink --- */ --gpp-cream: #F2E8D5; /* primary marketing canvas (poster paper) */ --gpp-cream-deep: #EBDFC8; /* sunk panels on cream */ --gpp-paper: #FFFFFF; /* tool-surface cards */ --gpp-espresso: #2F2417; /* darkest ink — display headings on cream */ --gpp-ink: #2F4F39; /* deep-green ink — tool headings */ --gpp-muted: #6C757D; /* secondary text */ --gpp-line: #E4ECE6; /* hairlines / dividers */ /* --- Greens (the through-line, surface vegetation) --- */ --gpp-forest: #1F3827; /* deepest — navbars, headers */ --gpp-forest-2: #2A4A3B; /* forest hover */ --gpp-sage: #557E61; /* PRIMARY action */ --gpp-sage-dark: #46684F; /* primary hover */ --gpp-sage-soft: #7E9B6F; /* muted vintage sage (illustration) */ /* --- Earth accents (the strata) --- */ --gpp-amber: #E0A33E; /* sky / soil — warm highlight, marketing CTA */ --gpp-amber-deep: #C98A2C; --gpp-rust: #C0603A; /* rock strata — alerts, energy */ --gpp-rust-deep: #A54E2C; --gpp-slate: #6E8499; /* bedrock / water — cool neutral */ --gpp-slate-deep: #56697B; /* --- Type --- */ --gpp-font-display: 'Oswald', 'Archivo Narrow', 'Helvetica Neue', sans-serif; --gpp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; /* --- Radius --- */ --gpp-radius-sm: 6px; --gpp-radius: 10px; --gpp-radius-lg: 14px; /* --- Elevation --- */ --gpp-shadow-card: 0 14px 44px rgba(31, 36, 23, 0.30); --gpp-shadow-panel: 0 6px 18px rgba(31, 56, 39, 0.12); --gpp-shadow-soft: 0 2px 8px rgba(31, 36, 23, 0.15); /* --- Spacing scale --- */ --gpp-space-1: 6px; --gpp-space-2: 12px; --gpp-space-3: 20px; --gpp-space-4: 32px; --gpp-space-5: 52px; } /* ============================================================================ SIGNATURE MOTIF — the strata bar (a cross-section read left→right: surface · soil · rock · bedrock · deep). Use as a divider or accent rule. ========================================================================== */ .gpp-strata { height: 6px; width: 100%; border-radius: 3px; background: linear-gradient(to right, var(--gpp-sage-soft) 0 20%, var(--gpp-amber) 20% 40%, var(--gpp-rust) 40% 60%, var(--gpp-slate) 60% 80%, var(--gpp-espresso) 80% 100%); } .gpp-strata--thin { height: 4px; } .gpp-strata--thick { height: 10px; border-radius: 5px; } /* ============================================================================ TYPOGRAPHY ========================================================================== */ .gpp-display { font-family: var(--gpp-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; color: var(--gpp-espresso); } .gpp-display--ink { color: var(--gpp-ink); } .gpp-eyebrow { font-family: var(--gpp-font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--gpp-rust); } .gpp-lede { font-family: var(--gpp-font-body); font-size: 1.15rem; line-height: 1.55; color: #4a4036; } /* ============================================================================ BUTTONS ========================================================================== */ .gpp-btn { display: inline-block; font-family: var(--gpp-font-body); font-weight: 600; font-size: 1rem; line-height: 1.2; padding: 12px 30px; border-radius: var(--gpp-radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease; } .gpp-btn:active { transform: translateY(1px); } .gpp-btn--sm { padding: 6px 14px; font-size: 0.85rem; } .gpp-btn[disabled] { opacity: 0.6; cursor: default; } .gpp-btn--primary { background: var(--gpp-sage); border-color: var(--gpp-sage); color: #fff; } .gpp-btn--primary:hover, .gpp-btn--primary:focus { background: var(--gpp-sage-dark); border-color: var(--gpp-sage-dark); color: #fff; } .gpp-btn--amber { background: var(--gpp-amber); border-color: var(--gpp-amber-deep); color: var(--gpp-espresso); } .gpp-btn--amber:hover, .gpp-btn--amber:focus { background: var(--gpp-amber-deep); border-color: var(--gpp-amber-deep); color: var(--gpp-espresso); } .gpp-btn--ghost { background: transparent; border-color: var(--gpp-line); color: var(--gpp-muted); } .gpp-btn--ghost:hover, .gpp-btn--ghost:focus { border-color: var(--gpp-sage); color: var(--gpp-ink); background: rgba(85,126,97,0.06); } /* Quiet destructive (e.g. log out) — neutral until hovered */ .gpp-btn--danger-ghost { background: transparent; border-color: var(--gpp-line); color: var(--gpp-muted); } .gpp-btn--danger-ghost:hover, .gpp-btn--danger-ghost:focus { background: #f8d7da; border-color: #c0603a; color: #842029; } /* ============================================================================ CARDS & SURFACES ========================================================================== */ .gpp-card { background: rgba(255, 255, 255, 0.96); border-radius: var(--gpp-radius-lg); box-shadow: var(--gpp-shadow-card); padding: var(--gpp-space-5) var(--gpp-space-5) var(--gpp-space-4); } .gpp-card--cream { background: var(--gpp-cream); } /* Section header bar (tool surfaces: panels, modals) */ .gpp-header-bar { background: var(--gpp-forest); color: #f1f5f2; font-family: var(--gpp-font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; padding: 8px 12px; } /* ============================================================================ FEATURE LIST (strata-marked bullets) ========================================================================== */ .gpp-features { list-style: none; padding: 0; margin: 0; } .gpp-features li { position: relative; padding-left: 28px; margin-bottom: 14px; font-family: var(--gpp-font-body); font-size: 1.05rem; color: #3a342c; } .gpp-features li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 12px; height: 12px; border-radius: 3px; background: var(--gpp-sage); box-shadow: 0 0 0 3px rgba(85, 126, 97, 0.18); } /* ============================================================================ FORM CONTROLS ========================================================================== */ .gpp-input { font-family: var(--gpp-font-body); width: 100%; height: 46px; border-radius: var(--gpp-radius-sm); border: 1px solid #ced4da; padding: 10px 14px; } .gpp-input:focus { outline: none; border-color: var(--gpp-sage); box-shadow: 0 0 0 0.2rem rgba(85, 126, 97, 0.25); } /* ============================================================================ PARTNER / TRUST LOGOS — quiet by default, full color on hover ========================================================================== */ .gpp-trust-logo { max-width: 100%; filter: grayscale(1) opacity(0.6); transition: filter 0.2s ease; } .gpp-trust-logo:hover { filter: grayscale(0) opacity(1); }