/*
* ================================================================================
* Website: GroHound.com
* GroHound Landing Page Styles
* Location: public/assets/css/styles.css
*
* Version: 1.0
* Last Updated: 31/01/2026
*
* Theme: Futuristic green/teal growth theme with night sky background
*
* Changes Made:
* ================================================================================
*/
/* ================================================================================
* FONT IMPORTS - Must be at the top!
* ================================================================================ */
/* Self-hosted fonts - copy font files from revuhound to public/assets/fonts/ */
/* Baloo 2 */
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 400;
src: url('../fonts/baloo-2-v23-latin-regular.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 500;
src: url('../fonts/baloo-2-v23-latin-500.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 600;
src: url('../fonts/baloo-2-v23-latin-600.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 700;
src: url('../fonts/baloo-2-v23-latin-700.woff2') format('woff2');
font-display: swap;
}
/* Inter */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
src: url('../fonts/inter-v20-latin-500.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
src: url('../fonts/inter-v20-latin-600.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url('../fonts/inter-v20-latin-700.woff2') format('woff2');
font-display: swap;
}
/* NOTE: You're missing inter-v20-latin-600.woff2
Either download it from Google Fonts or remove this @font-face block
and change font-weight: 600 to font-weight: 700 in the CSS below */
/* If you prefer Google Fonts CDN instead, replace all the @font-face rules above with:
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
And add these preconnect lines to index.php :
*/
/* ================================================================================
* CSS CUSTOM PROPERTIES (COLORS)
* ================================================================================ */
:root {
/* Primary Brand Colors - Green/Teal Growth Theme */
--primary-green-start: #10b981;
--primary-green-mid: #14b8a6;
--primary-green-end: #06b6d4;
/* Secondary Colors */
--secondary-teal-start: #0d9488;
--secondary-teal-end: #0891b2;
/* Accent Colors */
--accent-lime: #84cc16;
--accent-emerald: #059669;
--accent-cyan: #06b6d4;
/* Grayscale - Dark */
--gray-darkest: #0a0a0a;
--gray-darker: #1a1a1a;
--gray-dark: #2a2a2a;
--gray-medium-dark: #404040;
/* Grayscale - Light */
--gray-border: #666;
--gray-text: #a0aec0;
--gray-light: #cbd5e0;
--gray-lighter: #e2e8f0;
--gray-lightest: #f7fafc;
/* UI Colors */
--color-error: #ef4444;
--color-success: #10b981;
--color-warning: #f59e0b;
/* Shadows */
--shadow-green: rgba(16, 185, 129, 0.4);
--shadow-teal: rgba(20, 184, 166, 0.4);
--shadow-dark: rgba(0, 0, 0, 0.5);
/* Fonts */
--font-brand: 'Baloo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
}
/* ================================================================================
* GLOBAL RESET & BASE STYLES
* ================================================================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-body);
font-weight: var(--weight-normal);
color: var(--gray-lightest);
background: #000;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ================================================================================
* LAYOUT
* ================================================================================ */
.content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 80px 24px 40px;
flex: 1;
justify-content: center;
}
.logo {
width: 250px;
height: 190px;
margin-bottom: 32px;
filter: drop-shadow(0 8px 16px rgba(16, 185, 129, 0.3));
}
.hero-heading {
font-family: var(--font-brand);
font-weight: var(--weight-bold);
font-size: 56px;
line-height: 1.2;
margin-bottom: 16px;
background: linear-gradient(135deg, var(--primary-green-start), var(--primary-green-mid), var(--primary-green-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subheading {
font-family: var(--font-body);
font-weight: var(--weight-medium);
font-size: 24px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.4;
margin-bottom: 48px;
max-width: 600px;
}
/* ================================================================================
* SIGNUP FORM
* ================================================================================ */
.signup-form {
width: 100%;
max-width: 460px;
display: flex;
flex-direction: column;
gap: 14px;
}
.form-input {
width: 100%;
padding: 16px 20px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
color: #fff;
font-size: 16px;
font-family: var(--font-body);
transition: all 0.2s;
}
.form-input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.form-input:focus {
outline: none;
border-color: var(--primary-green-mid);
background: rgba(255, 255, 255, 0.12);
box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}
.btn-submit {
width: 100%;
padding: 16px;
background: linear-gradient(135deg, var(--primary-green-start), var(--primary-green-mid));
border: none;
border-radius: 10px;
color: #fff;
font-size: 17px;
font-weight: var(--weight-semibold);
font-family: var(--font-body);
cursor: pointer;
transition: all 0.2s;
letter-spacing: 0.3px;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.btn-submit:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}
.btn-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.form-message {
font-size: 14px;
text-align: center;
min-height: 20px;
margin-top: 4px;
font-family: var(--font-body);
}
.form-message.success { color: var(--color-success); }
.form-message.error { color: var(--color-error); }
/* ================================================================================
* FOOTER / COPYRIGHT
* ================================================================================ */
.footer {
position: relative;
z-index: 1;
width: 100%;
padding: 24px 20px;
text-align: center;
}
.footer p {
font-size: 13px;
font-family: var(--font-body);
color: rgba(255, 255, 255, 0.25);
}
/* ================================================================================
* ERROR PAGES (404, 500)
* ================================================================================ */
.error-page {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 20px;
}
.error-code {
font-family: var(--font-brand);
font-weight: var(--weight-bold);
font-size: 120px;
line-height: 1;
margin-bottom: 24px;
background: linear-gradient(135deg, var(--primary-green-start), var(--primary-green-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.error-title {
font-family: var(--font-brand);
font-weight: var(--weight-bold);
font-size: 32px;
color: var(--gray-lightest);
margin-bottom: 16px;
}
.error-text {
font-family: var(--font-body);
font-size: 18px;
color: var(--gray-text);
margin-bottom: 32px;
max-width: 500px;
}
.btn-home {
display: inline-block;
padding: 14px 32px;
background: linear-gradient(135deg, var(--primary-green-start), var(--primary-green-mid));
color: white;
text-decoration: none;
border-radius: 8px;
font-family: var(--font-body);
font-weight: var(--weight-semibold);
font-size: 16px;
transition: all 0.2s;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.btn-home:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}
/* ================================================================================
* RESPONSIVE
* ================================================================================ */
@media (max-width: 768px) {
.content {
padding: 60px 20px 32px;
}
.logo {
width: 200px;
height: 152px;
}
.hero-heading {
font-size: 42px;
}
.hero-subheading {
font-size: 20px;
margin-bottom: 40px;
}
.error-code {
font-size: 80px;
}
.error-title {
font-size: 24px;
}
.error-text {
font-size: 16px;
}
}
@media (max-width: 480px) {
.logo {
width: 180px;
height: 137px;
}
.hero-heading {
font-size: 36px;
}
.hero-subheading {
font-size: 18px;
}
}