/*
* Theme Name: StartupPH
* Theme URI: https://startup.ph
* Description: The Philippine Startup Ecosystem — dark mode premium news and directory theme
* Version: 1.0.0
* Author: startup.ph
* Author URI: https://startup.ph
* License: Proprietary
* Text Domain: startupph
*
* DESIGN SYSTEM:
* Primary background dark: #0A0F1E
* Card background dark: #0F172A
* Background light: #F8FAFC
* Accent blue: #3B82F6
* Accent green: #10B981
* Breaking red: #EF4444
* Hot orange: #F97316
* Opinion purple: #8B5CF6
* Sponsored grey: #64748B
* Text primary dark: #FFFFFF
* Text secondary dark: #94A3B8
* Text muted dark: #64748B
* Text primary light: #0F172A
* Headings: Satoshi Bold (Fontshare)
* Body: Inter Regular (Google Fonts)
*/
/* ============================================================
CSS CUSTOM PROPERTIES — DESIGN TOKENS
============================================================ */
:root {
/* Dark mode colors (default) */
--bg-primary: #0A0F1E;
--bg-card: #0F172A;
--bg-surface: #1A2235;
--border-color: #1E293B;
--border-hover: #3B82F6;
/* Text */
--text-primary: #FFFFFF;
--text-secondary: #94A3B8;
--text-muted: #64748B;
/* Accent colors */
--accent-blue: #3B82F6;
--accent-green: #10B981;
--accent-red: #EF4444;
--accent-orange: #F97316;
--accent-purple: #8B5CF6;
--accent-grey: #64748B;
/* Typography */
--font-heading: 'Satoshi', 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
/* Spacing */
--radius-card: 8px;
--radius-btn: 4px;
--transition-fast: 200ms ease;
/* Layout */
--container-max: 1440px;
--container-pad: 1.5rem;
}
/* Light mode overrides — applied whenever lacks the .dark class */
html:not(.dark) {
--bg-primary: #F8FAFC;
--bg-card: #FFFFFF;
--bg-surface: #F1F5F9;
--border-color: #E2E8F0;
--border-hover: #3B82F6;
--text-primary: #0F172A;
--text-secondary: #475569;
--text-muted: #94A3B8;
}
/* ============================================================
RESET AND BASE
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden; /* guards against unintentional horizontal scroll site-wide;
does not affect the intentional overflow-x:auto rows below */
transition: background-color var(--transition-fast), color var(--transition-fast);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ============================================================
TYPOGRAPHY
============================================================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
color: var(--text-primary);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }
p {
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 1rem;
}
a {
color: var(--accent-blue);
text-decoration: none;
transition: color var(--transition-fast), opacity var(--transition-fast);
}
a:hover {
opacity: 0.85;
}
img {
max-width: 100%;
height: auto;
display: block;
}
ul, ol {
list-style: none;
}
button {
cursor: pointer;
border: none;
background: none;
font-family: var(--font-body);
}
input, textarea, select {
font-family: var(--font-body);
font-size: 1rem;
}
/* ============================================================
LAYOUT UTILITIES
============================================================ */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad);
width: 100%;
}
.section-padding {
padding: 4rem 0;
}
.section-padding-sm {
padding: 2rem 0;
}
/* Grid system */
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
/* ============================================================
CARD COMPONENT — revised token (supersedes the old heavier-border /
accent-hover-glow spec). Hairline border, tighter padding, and a
subtle background-lift on hover only — no border-color change, no
box-shadow, no transform. Typography scale and whitespace carry
visual hierarchy instead of card chrome. Applies to every card type:
news cards, startup/investor/job/event cards, tools, and (loosely —
it was never chrome-heavy to begin with) the lead story card.
============================================================ */
.card {
background: var(--bg-card);
border: 0.5px solid var(--border-color);
border-radius: var(--radius-card);
padding: 1.25rem;
transition: background-color var(--transition-fast);
}
.card:hover {
background: var(--bg-surface);
}
/* ============================================================
GLOSSARY CARD — whole-card click target via the "stretched link"
technique, not a giant wrapping . Fixed 2026-07-18 — live QA found
only the title text itself was clickable, not the category badge or
description below it, a much smaller target than the visible card.
Wrapping the ENTIRE card markup in one was considered and rejected:
the card also renders a category — nesting another interactive
element inside an outer produces invalid, browser-mangled HTML
(nested /