/* ========================================================================== FiduVentures — Design System Built per impeccable principles: real contrast type, OKLCH color, spacing rhythm, honest motion, mobile-first. ========================================================================== */ /* -- 1. TOKENS -------------------------------------------------------------- */ :root { /* Color — default palette: Navy + Gold (Palette A — Trust + Premium). Swap by adding [data-theme="B"] or [data-theme="C"] to . */ --color-primary: oklch(0.22 0.04 250); --color-primary-soft: oklch(0.32 0.05 250); --color-accent: oklch(0.75 0.10 80); --color-accent-soft: oklch(0.85 0.08 80); --color-surface: oklch(0.97 0.01 90); --color-surface-elevated: oklch(0.99 0.005 90); --color-surface-sunk: oklch(0.94 0.01 90); --color-ink: oklch(0.20 0.005 60); --color-ink-soft: oklch(0.35 0.005 60); --color-muted: oklch(0.55 0.005 60); --color-border: oklch(0.90 0.01 90); --color-border-strong: oklch(0.82 0.01 90); /* Type scale — modular, ratio 1.25 */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-md: 1.125rem; /* 18 */ --fs-lg: 1.375rem; /* 22 */ --fs-xl: 1.75rem; /* 28 */ --fs-2xl: 2.25rem; /* 36 */ --fs-3xl: 3rem; /* 48 */ --fs-4xl: 4rem; /* 64 */ --fs-5xl: 5.5rem; /* 88 */ --fs-6xl: 7rem; /* 112 */ /* Spacing — 8px base unit */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ --sp-9: 6rem; /* 96 */ --sp-10: 8rem; /* 128 */ --sp-11: 12rem; /* 192 */ /* Container widths */ --container-narrow: 720px; --container-default: 1140px; --container-wide: 1320px; /* Radii */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px; /* Borders */ --border-thin: 1px solid var(--color-border); --border-strong: 1px solid var(--color-border-strong); /* Motion — physics-based easing */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 450ms; /* Type families */ --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; --font-display: 'Geist', 'Inter', system-ui, sans-serif; /* Shadows — minimal, never for "depth theater" */ --shadow-soft: 0 1px 2px oklch(0.20 0.005 60 / 0.04), 0 4px 12px oklch(0.20 0.005 60 / 0.04); --shadow-card: 0 1px 0 oklch(0.20 0.005 60 / 0.03), 0 1px 3px oklch(0.20 0.005 60 / 0.04); } /* -- 1b. ALT PALETTES (toggle with [data-theme] on ) ----------------- */ [data-theme="B"] { /* Charcoal + Sage + Cream (Considered + Calm) */ --color-primary: oklch(0.20 0.005 60); --color-primary-soft: oklch(0.30 0.005 60); --color-accent: oklch(0.62 0.06 150); --color-accent-soft: oklch(0.78 0.05 150); } [data-theme="C"] { /* Deep Purple + Coral + Lilac (AI-Forward + Bold) */ --color-primary: oklch(0.18 0.06 290); --color-primary-soft: oklch(0.28 0.08 290); --color-accent: oklch(0.70 0.18 25); --color-accent-soft: oklch(0.82 0.10 25); --color-surface: oklch(0.97 0.02 290); --color-border: oklch(0.91 0.03 290); } /* -- 2. RESET / BASE ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.55; color: var(--color-ink); background: var(--color-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01', 'ss03'; } img, svg, video { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5, h6, p { margin: 0; } /* -- 3. TYPOGRAPHY --------------------------------------------------------- */ .display-1 { font-size: clamp(var(--fs-3xl), 7vw, var(--fs-5xl)); line-height: 1.02; letter-spacing: -0.04em; font-weight: 500; } .display-2 { font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl)); line-height: 1.05; letter-spacing: -0.03em; font-weight: 500; } .h1 { font-size: clamp(var(--fs-xl), 4vw, var(--fs-3xl)); line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; } .h2 { font-size: clamp(var(--fs-lg), 3vw, var(--fs-2xl)); line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; } .h3 { font-size: var(--fs-lg); line-height: 1.25; letter-spacing: -0.015em; font-weight: 500; } .lead { font-size: clamp(var(--fs-md), 1.8vw, var(--fs-xl)); line-height: 1.4; letter-spacing: -0.01em; color: var(--color-ink-soft); font-weight: 400; } .body { font-size: var(--fs-base); line-height: 1.65; color: var(--color-ink-soft); } .small { font-size: var(--fs-sm); color: var(--color-muted); } .eyebrow { font-size: var(--fs-xs); font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .numeric { font-family: var(--font-mono); font-feature-settings: 'tnum'; } /* -- 4. LAYOUT ------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-default); margin: 0 auto; padding: 0 var(--sp-5); } .container--narrow { max-width: var(--container-narrow); } .container--wide { max-width: var(--container-wide); } .section { padding: var(--sp-9) 0; } .section--tight { padding: var(--sp-7) 0; } .section--loose { padding: var(--sp-10) 0; } .section--sunk { background: var(--color-surface-sunk); } .section--ink { background: var(--color-ink); color: var(--color-surface); } .section--ink .lead, .section--ink .body, .section--ink .small { color: oklch(0.75 0.005 60); } .section--ink .eyebrow { color: oklch(0.65 0.005 60); } .section--primary { background: var(--color-primary); color: var(--color-surface); } .section--primary .lead, .section--primary .body { color: oklch(0.92 0.005 250); } .grid { display: grid; gap: var(--sp-5); } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } @media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } .grid-3 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } .grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); } .grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } } .stack > * + * { margin-top: var(--sp-4); } .stack-lg > * + * { margin-top: var(--sp-6); } .stack-xl > * + * { margin-top: var(--sp-7); } .stack-sm > * + * { margin-top: var(--sp-2); } .cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } /* -- 5. NAVIGATION --------------------------------------------------------- */ .site-nav { position: sticky; top: 0; z-index: 50; background: oklch(0.97 0.01 90 / 0.85); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: var(--border-thin); } .site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-4) var(--sp-5); max-width: var(--container-wide); margin: 0 auto; } .site-nav__logo { display: inline-flex; align-items: center; color: var(--color-primary); } .site-nav__logo svg, .site-nav__logo img { height: 42px; width: auto; display: block; } .site-nav__links { display: none; gap: var(--sp-6); } .site-nav__links a { font-size: var(--fs-sm); color: var(--color-ink-soft); font-weight: 500; letter-spacing: -0.005em; transition: color var(--dur-fast) var(--ease-out); } .site-nav__links a:hover { color: var(--color-primary); } .site-nav__links a[aria-current="page"] { color: var(--color-primary); } .site-nav__actions { display: flex; align-items: center; gap: var(--sp-3); } .site-nav__menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: var(--border-thin); border-radius: var(--r-md); color: var(--color-ink); } .site-nav__menu-toggle:hover { background: var(--color-surface-sunk); } @media (min-width: 960px) { .site-nav__links { display: flex; } .site-nav__menu-toggle { display: none; } } .lang-switch { font-size: var(--fs-xs); font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--color-muted); padding: var(--sp-2) var(--sp-3); border: var(--border-thin); border-radius: var(--r-full); text-transform: uppercase; transition: all var(--dur-fast) var(--ease-out); } .lang-switch:hover { color: var(--color-primary); border-color: var(--color-primary); } /* -- 6. BUTTONS ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); font-size: var(--fs-sm); font-weight: 500; letter-spacing: -0.005em; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); text-decoration: none; white-space: nowrap; } .btn--primary { background: var(--color-primary); color: var(--color-surface); } .btn--primary:hover { background: var(--color-primary-soft); transform: translateY(-1px); } .btn--secondary { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-border-strong); } .btn--secondary:hover { background: var(--color-surface-sunk); border-color: var(--color-primary); } .btn--ghost { background: transparent; color: var(--color-ink); } .btn--ghost:hover { color: var(--color-primary); } .btn--accent { background: var(--color-accent); color: var(--color-primary); } .btn--accent:hover { background: var(--color-accent-soft); } .btn--large { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-base); } .btn .arrow { transition: transform var(--dur-fast) var(--ease-out); } .btn:hover .arrow { transform: translateX(3px); } /* -- 7. HERO --------------------------------------------------------------- */ .hero { padding: var(--sp-10) 0 var(--sp-9); position: relative; overflow: hidden; } .hero__eyebrow { margin-bottom: var(--sp-5); } .hero__title { margin-bottom: var(--sp-5); max-width: 18ch; } .hero__lead { max-width: 50ch; margin-bottom: var(--sp-6); } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .hero__meta { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: var(--border-thin); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } @media (min-width: 720px) { .hero__meta { grid-template-columns: repeat(4, 1fr); } } .hero__meta-item .value { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 500; } .hero__meta-item .label { font-size: var(--fs-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--sp-1); } /* -- 8. CARDS -------------------------------------------------------------- */ .card { display: flex; flex-direction: column; background: var(--color-surface-elevated); border: var(--border-thin); border-radius: var(--r-lg); padding: var(--sp-6); transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); text-decoration: none; color: inherit; } .card:hover { border-color: var(--color-border-strong); } .card--accent { background: var(--color-primary); color: var(--color-surface); border-color: transparent; } .card--accent .h3, .card--accent .card__title { color: var(--color-surface); } .card--accent .body, .card--accent .card__body { color: oklch(0.92 0.005 250); } .card--accent .card__cta { color: var(--color-accent); } .card__eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--sp-3); } .card--accent .card__eyebrow { color: var(--color-accent); } .card__title { margin-bottom: var(--sp-3); } .card__body { flex: 1; color: var(--color-ink-soft); } .card__cta { margin-top: var(--sp-5); font-size: var(--fs-sm); font-weight: 500; display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--color-primary); } .card__cta .arrow { transition: transform var(--dur-fast) var(--ease-out); } .card:hover .card__cta .arrow { transform: translateX(3px); } .card--accent .card__cta { color: var(--color-accent); } /* Sector card variant */ .sector-card { position: relative; background: var(--color-surface-elevated); border: var(--border-thin); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); text-decoration: none; color: inherit; min-height: 240px; } .sector-card__num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-muted); letter-spacing: 0.06em; } .sector-card__title { font-size: var(--fs-lg); font-weight: 500; letter-spacing: -0.015em; } .sector-card__desc { font-size: var(--fs-sm); color: var(--color-ink-soft); line-height: 1.55; } .sector-card:hover { border-color: var(--color-primary); } /* Venture card variant */ .venture-card { background: var(--color-surface-elevated); border: var(--border-thin); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); text-decoration: none; color: inherit; transition: all var(--dur-base) var(--ease-out); } .venture-card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); } .venture-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); } .venture-card__namewrap { display: flex; flex-direction: column; gap: 4px; } .venture-card__codename { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-soft); font-weight: 500; } .venture-card__name { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.02em; } .venture-card__tagline { font-size: var(--fs-base); color: var(--color-ink-soft); } .venture-card__meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); } .tag { font-family: var(--font-mono); font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-3); background: var(--color-surface-sunk); color: var(--color-ink-soft); border-radius: var(--r-full); letter-spacing: 0.04em; text-transform: uppercase; } .tag--accent { background: var(--color-accent-soft); color: var(--color-primary); } .tag--primary { background: var(--color-primary); color: var(--color-surface); } /* Team card */ .team-card { background: var(--color-surface-elevated); border: var(--border-thin); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); min-height: 220px; } .team-card__num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-muted); letter-spacing: 0.06em; } .team-card__name { font-size: var(--fs-lg); font-weight: 500; letter-spacing: -0.015em; } .team-card__purpose { font-size: var(--fs-sm); color: var(--color-ink-soft); line-height: 1.55; } .team-card__lead { display: flex; gap: var(--sp-2); align-items: baseline; padding-top: var(--sp-3); border-top: var(--border-thin); font-size: var(--fs-xs); color: var(--color-muted); font-family: var(--font-mono); letter-spacing: 0.04em; } /* Testimonial */ .testimonial { background: var(--color-surface-elevated); border: var(--border-thin); border-radius: var(--r-lg); padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-5); } .testimonial__quote { font-size: clamp(var(--fs-md), 2vw, var(--fs-lg)); line-height: 1.45; letter-spacing: -0.015em; color: var(--color-ink); font-weight: 400; } .testimonial__quote::before { content: '"'; color: var(--color-accent); } .testimonial__quote::after { content: '"'; color: var(--color-accent); } .testimonial__attr { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-4); border-top: var(--border-thin); } .testimonial__avatar { width: 40px; height: 40px; border-radius: var(--r-full); background: var(--color-accent-soft); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; } .testimonial__name { font-size: var(--fs-sm); font-weight: 500; } .testimonial__role { font-size: var(--fs-xs); color: var(--color-muted); } /* Insight card */ .insight-card { background: var(--color-surface-elevated); border: var(--border-thin); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); text-decoration: none; color: inherit; transition: all var(--dur-base) var(--ease-out); } .insight-card:hover { border-color: var(--color-primary); } .insight-card__meta { display: flex; gap: var(--sp-3); align-items: center; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-muted); letter-spacing: 0.04em; text-transform: uppercase; } .insight-card__title { font-size: var(--fs-lg); font-weight: 500; letter-spacing: -0.015em; } .insight-card__excerpt { font-size: var(--fs-sm); color: var(--color-ink-soft); line-height: 1.55; } /* Step (for "How we work") */ .step { position: relative; padding-left: var(--sp-7); counter-increment: step; } .step::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-accent); font-weight: 500; letter-spacing: 0.06em; } .step__title { font-size: var(--fs-lg); font-weight: 500; margin-bottom: var(--sp-2); letter-spacing: -0.015em; } .step__body { font-size: var(--fs-sm); color: var(--color-ink-soft); line-height: 1.55; } .steps { counter-reset: step; display: grid; gap: var(--sp-6); } @media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); } } @media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } .step { padding-left: 0; padding-top: var(--sp-6); } .step::before { position: relative; display: block; margin-bottom: var(--sp-3); } } /* -- 9. FEATURE ROW (asymmetric, alternating) ----------------------------- */ .feature-row { display: grid; gap: var(--sp-7); align-items: start; } @media (min-width: 900px) { .feature-row { grid-template-columns: 1fr 1fr; gap: var(--sp-9); } .feature-row--reverse > :first-child { order: 2; } .feature-row--narrow { grid-template-columns: 1fr 2fr; } .feature-row--wide-text { grid-template-columns: 2fr 1fr; } } .feature-row__label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--sp-3); } .feature-row__title { font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl)); font-weight: 500; letter-spacing: -0.025em; margin-bottom: var(--sp-4); } .feature-row__body { color: var(--color-ink-soft); line-height: 1.65; } .feature-row__list { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-3); } .feature-row__list li { display: flex; gap: var(--sp-3); align-items: baseline; font-size: var(--fs-sm); color: var(--color-ink-soft); padding-bottom: var(--sp-3); border-bottom: var(--border-thin); } .feature-row__list li::before { content: ''; width: 6px; height: 6px; background: var(--color-accent); border-radius: var(--r-full); flex-shrink: 0; transform: translateY(-2px); } /* -- 10. STATS STRIP ------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); padding: var(--sp-7) 0; border-top: var(--border-thin); border-bottom: var(--border-thin); } @media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat__value { font-family: var(--font-mono); font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); font-weight: 500; letter-spacing: -0.03em; color: var(--color-ink); line-height: 1; } .stat__label { font-size: var(--fs-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--sp-2); } /* -- 11. CTA SECTION ------------------------------------------------------- */ .cta { background: var(--color-ink); color: var(--color-surface); border-radius: var(--r-xl); padding: var(--sp-9) var(--sp-6); margin: var(--sp-7) 0; position: relative; overflow: hidden; } .cta__title { font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); font-weight: 500; letter-spacing: -0.025em; max-width: 18ch; margin-bottom: var(--sp-5); } .cta__lead { color: oklch(0.72 0.005 60); max-width: 50ch; margin-bottom: var(--sp-6); } .cta__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; } .cta__actions .btn--primary { background: var(--color-accent); color: var(--color-ink); } .cta__actions .btn--primary:hover { background: var(--color-accent-soft); } .cta__actions .btn--secondary { background: transparent; color: var(--color-surface); border-color: oklch(0.40 0.005 60); } .cta__actions .btn--secondary:hover { border-color: var(--color-surface); background: oklch(0.20 0.005 60); } /* -- 12. FOOTER ------------------------------------------------------------ */ .site-footer { background: var(--color-ink); color: oklch(0.72 0.005 60); padding: var(--sp-9) 0 var(--sp-6); margin-top: var(--sp-10); } .site-footer__top { display: grid; gap: var(--sp-7); padding-bottom: var(--sp-8); border-bottom: 1px solid oklch(0.30 0.005 60); } @media (min-width: 720px) { .site-footer__top { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-6); } } .site-footer__brand .site-nav__logo { color: var(--color-surface); margin-bottom: var(--sp-4); } .site-footer__tagline { color: oklch(0.65 0.005 60); font-size: var(--fs-sm); max-width: 30ch; } .site-footer__col h4 { color: var(--color-surface); font-size: var(--fs-xs); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-4); } .site-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); } .site-footer__col a { color: oklch(0.72 0.005 60); font-size: var(--fs-sm); transition: color var(--dur-fast) var(--ease-out); } .site-footer__col a:hover { color: var(--color-surface); } .site-footer__bottom { padding-top: var(--sp-5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-xs); color: oklch(0.55 0.005 60); } .site-footer__bottom a:hover { color: var(--color-surface); } /* -- 13. FORMS ------------------------------------------------------------- */ .form { display: grid; gap: var(--sp-5); max-width: 560px; } .form__field { display: grid; gap: var(--sp-2); } .form__label { font-size: var(--fs-sm); font-weight: 500; color: var(--color-ink); } .form__hint { font-size: var(--fs-xs); color: var(--color-muted); } .form__input, .form__textarea, .form__select { font: inherit; font-size: var(--fs-base); padding: var(--sp-3) var(--sp-4); background: var(--color-surface-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--r-md); color: var(--color-ink); transition: border-color var(--dur-fast) var(--ease-out); width: 100%; } .form__input:focus, .form__textarea:focus, .form__select:focus { outline: none; border-color: var(--color-primary); } .form__textarea { min-height: 120px; resize: vertical; font-family: inherit; } .form__row { display: grid; gap: var(--sp-4); } @media (min-width: 720px) { .form__row--2 { grid-template-columns: 1fr 1fr; } } /* -- 14. ARTICLE / PROSE --------------------------------------------------- */ .prose { max-width: 65ch; } .prose > * + * { margin-top: var(--sp-5); } .prose h2 { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.02em; margin-top: var(--sp-7); } .prose h3 { font-size: var(--fs-lg); font-weight: 500; margin-top: var(--sp-6); } .prose p { color: var(--color-ink-soft); line-height: 1.7; } .prose ul { padding-left: var(--sp-5); color: var(--color-ink-soft); line-height: 1.7; } .prose li + li { margin-top: var(--sp-2); } .prose blockquote { border-left: 3px solid var(--color-accent); padding-left: var(--sp-5); font-size: var(--fs-lg); font-style: italic; color: var(--color-ink); margin: var(--sp-6) 0; } .prose code { font-family: var(--font-mono); font-size: 0.92em; background: var(--color-surface-sunk); padding: 2px 6px; border-radius: var(--r-sm); } /* -- 15. UTILITIES --------------------------------------------------------- */ .text-center { text-align: center; } .text-balance { text-wrap: balance; } .max-w-prose { max-width: 65ch; } .mt-7 { margin-top: var(--sp-7); } .mt-8 { margin-top: var(--sp-8); } .mb-5 { margin-bottom: var(--sp-5); } .divider { height: 1px; background: var(--color-border); border: none; margin: var(--sp-7) 0; } .divider--accent { background: var(--color-accent); height: 2px; width: var(--sp-7); margin: 0 0 var(--sp-5) 0; } /* -- 16. MOTION / A11Y ----------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--r-sm); } /* Reveal on scroll (toggled by JS) */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Mobile menu */ .mobile-menu { display: none; position: fixed; inset: 0; background: var(--color-surface); z-index: 100; padding: var(--sp-7) var(--sp-5); flex-direction: column; gap: var(--sp-5); } .mobile-menu.is-open { display: flex; } .mobile-menu__close { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 40px; height: 40px; background: transparent; border: var(--border-thin); border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; } .mobile-menu a { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.02em; color: var(--color-ink); padding: var(--sp-3) 0; border-bottom: var(--border-thin); } .mobile-menu a:hover { color: var(--color-primary); } /* -- 17. RESPONSIVE TWEAKS ------------------------------------------------- */ @media (max-width: 720px) { .hero { padding: var(--sp-9) 0 var(--sp-7); } .section { padding: var(--sp-8) 0; } .section--loose { padding: var(--sp-9) 0; } .hide-mobile { display: none; } } @media (min-width: 721px) { .hide-desktop { display: none; } } /* -- 18. STAGING MIRROR BANNER --------------------------------------------- */ /* Injected by main.js only on non-canonical hostnames (e.g. fidu.cocabali.ddns.net). Never renders on fiduventures.com — this is the visual guard rail against confusing the two environments when editing copy. */ .staging-banner { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-5); background: repeating-linear-gradient( -45deg, #b45309, #b45309 12px, #92400e 12px, #92400e 24px ); color: #FEF3C7; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; line-height: 1.4; border-bottom: 2px solid #78350f; box-shadow: 0 2px 8px rgba(0,0,0,0.15); flex-wrap: wrap; } .staging-banner strong { color: #FFFBEB; font-weight: 700; letter-spacing: 0.14em; font-size: 12px; } .staging-banner__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #FCD34D; box-shadow: 0 0 0 3px rgba(252, 211, 77, 0.25); animation: staging-pulse 2s ease-in-out infinite; flex-shrink: 0; } @keyframes staging-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.9); } } .staging-banner__host { color: #FEF3C7; opacity: 0.9; font-weight: 500; } .staging-banner__sep { opacity: 0.5; color: #FEF3C7; } .staging-banner__note { color: #FEF3C7; opacity: 0.85; font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; } .staging-banner__cta { margin-left: auto; color: #FFFBEB; background: rgba(0,0,0,0.25); padding: 5px 12px; border-radius: 4px; text-decoration: none; font-weight: 500; border: 1px solid rgba(255,251,235,0.3); transition: background 0.15s ease; font-family: var(--font-sans); } .staging-banner__cta:hover { background: rgba(0,0,0,0.45); color: #FFFBEB; } @media (max-width: 720px) { .staging-banner { padding: 8px 12px; font-size: 11px; } .staging-banner__note { display: none; } .staging-banner__sep { display: none; } }