/* * global.css — GoFindOne * Shared styles imported by every page. * * Load order (in each HTML ): * 1. colors_and_type.css ← design tokens & fonts (do not modify) * 2. css/global.css ← this file * 3. css/forms.css ← form pages only (post-a-problem, submit) * 4. * * Sections: * - Reset * - Noise texture overlay * - Nav * - Footer * - Buttons (btn-primary, btn-ghost) * - Eyebrow * - Tags (live, urgent, closed, new, credit, charity) * - Wave animations (drift-a, drift-b, breathe) * - Closing CTA block */ /* ============================================================ RESET ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { background: var(--dark-bg); color: var(--dark-fg); font-family: 'Source Serif 4', Georgia, serif; font-weight: 300; -webkit-font-smoothing: antialiased; min-height: 100%; } body { overflow-x: hidden; } /* ============================================================ NOISE TEXTURE OVERLAY Present on every page as a fixed full-screen layer. ============================================================ */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================ NAV Sticky variant used on all pages except index.html, which uses position:fixed with a gradient fade. Index overrides .nav locally for that effect. ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; padding: 18px 48px; display: flex; align-items: center; gap: 32px; background: rgba(10,10,10,0.92); backdrop-filter: blur(10px); border-bottom: 0.5px solid var(--dark-border); } .nav-wm { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.06em; font-size: 22px; color: var(--dark-fg); text-decoration: none; } .nav-wm .dot { color: var(--teal); } /* Optional section label shown on some interior pages */ .nav-section { font-family: 'Source Serif 4', serif; font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dark-fg-muted); padding-left: 24px; border-left: 0.5px solid var(--dark-border-mid); } .nav-links { display: flex; gap: 28px; margin-left: auto; align-items: center; } .nav-link { font-family: 'Source Serif 4', serif; font-weight: 400; font-size: 13px; color: var(--dark-fg-muted); text-decoration: none; letter-spacing: 0.04em; transition: color 220ms ease; } .nav-link:hover, .nav-link.active { color: var(--dark-fg); } .nav-cta { font-family: 'Source Serif 4', serif; font-weight: 500; font-size: 12px; color: var(--teal); border: 1px solid rgba(94,200,200,0.4); padding: 8px 16px; border-radius: 3px; text-decoration: none; letter-spacing: 0.04em; transition: background 220ms ease; } .nav-cta:hover { background: rgba(94,200,200,0.08); } /* ============================================================ FOOTER ============================================================ */ footer { padding: 32px 48px; border-top: 0.5px solid var(--dark-border); display: flex; align-items: center; gap: 32px; font-family: 'Source Serif 4', serif; font-size: 11px; color: var(--dark-fg-dim); letter-spacing: 0.04em; } footer .wm, .footer-wm { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.06em; font-size: 18px; color: var(--dark-fg-muted); } footer .wm .dot, .footer-wm .dot { color: var(--teal); } footer .legal { font-family: 'IBM Plex Mono', monospace; font-size: 10px; opacity: 0.55; } footer a { color: var(--dark-fg-dim); text-decoration: none; transition: color 220ms ease; } footer a:hover { color: var(--dark-fg); } footer .right { margin-left: auto; display: flex; gap: 28px; } /* Minimal footer variant (rules.html) */ .footer-meta { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--dark-fg-dimmer); letter-spacing: 0.08em; } /* ============================================================ BUTTONS ============================================================ */ .btn-primary { height: 48px; padding: 0 28px; background: var(--teal); color: #0a0a0a; font-family: 'Source Serif 4', serif; font-weight: 500; font-size: 13px; letter-spacing: 0.10em; text-transform: uppercase; border: none; border-radius: 3px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: background 220ms ease, transform 150ms ease; } .btn-primary:hover { background: var(--teal-bright); transform: translateY(-2px); } .btn-ghost { height: 48px; padding: 0 24px; background: transparent; color: var(--dark-fg-muted); font-family: 'Source Serif 4', serif; font-weight: 400; font-size: 13px; letter-spacing: 0.04em; border: 1px solid var(--dark-border-mid); border-radius: 3px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: color 220ms ease, border-color 220ms ease; } .btn-ghost:hover { color: var(--dark-fg); border-color: var(--dark-border-strong); } /* ============================================================ EYEBROW The small uppercase label with a teal rule before it. Used on section headers across index, marketplace, how-it-works. ============================================================ */ .eyebrow { font-family: 'Source Serif 4', serif; font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dark-fg-muted); display: flex; align-items: center; gap: 12px; } .eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--teal); } /* ============================================================ TAGS Status badges used on problem cards across index, marketplace, and problem-detail. ============================================================ */ .tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 3px; font-family: 'Source Serif 4', serif; font-weight: 500; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; } .tag .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .tag.live { color: #7ed6d6; border: 1px solid rgba(94,200,200,0.4); background: rgba(94,200,200,0.08); } .tag.urgent { color: #e8b594; border: 1px solid rgba(212,147,106,0.4); background: rgba(212,147,106,0.10); } .tag.closed { color: #9a948a; border: 1px solid rgba(244,241,236,0.18); background: transparent; } .tag.new { color: #f4f1ec; border: 1px solid rgba(244,241,236,0.22); background: transparent; } .tag.credit { color: #b8a9f0; border: 1px solid rgba(184,169,240,0.4); background: rgba(184,169,240,0.08); } .tag.charity { color: #a8d4a8; border: 1px solid rgba(168,212,168,0.4); background: rgba(168,212,168,0.08); } /* ============================================================ WAVE / ATMOSPHERE ANIMATIONS Keyframes shared by hero sections, manifesto block, and marketplace header. Each page controls opacity/position of its own wave elements locally. ============================================================ */ @keyframes drift-a { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes drift-b { from { transform: translateX(-50%); } to { transform: translateX(0); } } @keyframes breathe { 0%, 100% { transform: translateY(0) scale(1.01); } 50% { transform: translateY(-10px) scale(1); } } /* Pulsing dot — live stats bar, live-dot indicator */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); animation: pulse 2s ease-in-out infinite; } /* ============================================================ CLOSING CTA BLOCK Shared by index.html and how-it-works.html. ============================================================ */ .closing { padding: 160px 48px 100px; background: var(--dark-bg); text-align: center; position: relative; overflow: hidden; } .closing-glow { position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; background: radial-gradient(ellipse, rgba(94,200,200,0.07) 0%, transparent 65%); pointer-events: none; } .closing-six { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.06em; font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: 1.05; color: var(--dark-fg); position: relative; z-index: 1; } .closing-six span { display: block; } .closing-six em { font-family: 'Source Serif 4', serif; font-weight: 300; font-style: italic; color: var(--teal); letter-spacing: normal; text-transform: none; font-size: 0.72em; line-height: 0.95; vertical-align: baseline; } .closing-sub { font-family: 'Source Serif 4', serif; font-style: italic; font-weight: 300; font-size: 16px; color: var(--dark-fg-dim); margin-top: 32px; position: relative; z-index: 1; } .closing-btns { display: flex; gap: 14px; justify-content: center; margin-top: 40px; position: relative; z-index: 1; } .closing-meta { font-family: 'Source Serif 4', serif; font-style: italic; font-weight: 300; font-size: 12px; color: var(--dark-fg-dimmer); margin-top: 60px; position: relative; z-index: 1; } /* ============================================================ MOBILE — max-width: 640px Targets iPhone SE 2 (375px logical) and all small phones. Overrides desktop padding, collapses multi-column grids, hides nav links (hamburger deferred to Stage 2). ============================================================ */ @media (max-width: 640px) { /* Nav */ .nav { padding: 16px 20px; } .nav-links { display: none; } /* Buttons */ .btn-primary, .btn-ghost { height: 44px; font-size: 12px; padding: 0 20px; } /* Closing CTA */ .closing { padding: 80px 20px 60px; } .closing-btns { flex-direction: column; align-items: stretch; } .closing-btns a { text-align: center; justify-content: center; } .closing-sub { font-size: 15px; } /* Footer */ footer { padding: 24px 20px; flex-wrap: wrap; gap: 14px; } footer .right { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 16px; } }