/* ============================================================ BrainDay — Custom Stylesheet Companion to Tailwind CSS (loaded via CDN) ============================================================ */ /* ── Typography ────────────────────────────────────────────── */ /* Quiet, academic serif */ .font-serifish { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } /* Clean system sans-serif */ .font-sansish { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; } /* ── Page Background ────────────────────────────────────────── */ /* Gentle warm-paper gradient */ .paper { background: radial-gradient( 1200px 600px at 20% 0%, rgba(250, 248, 243, 1) 0%, rgba(248, 247, 244, 1) 35%, rgba(245, 244, 241, 1) 100% ); } /* ── Borders ────────────────────────────────────────────────── */ /* Subtle hairline divider / border */ .hairline { border-color: rgba(17, 24, 39, 0.12); } /* ── Globals ────────────────────────────────────────────────── */ /* Smooth anchor scrolling */ html { scroll-behavior: smooth; } /* Prevent horizontal overflow jiggle */ body { overflow-x: hidden; } /* ── Spacing Overrides (increased whitespace) ───────────────── */ /* Section vertical padding — generous breathing room */ .section-pad { padding-top: 5rem; padding-bottom: 5rem; } @media (min-width: 768px) { .section-pad { padding-top: 7rem; padding-bottom: 7rem; } } /* ── Animation config (edit here to tune or disable globally) ── */ :root { --fade-duration: 0.6s; /* fade-in transition duration */ --fade-distance: 22px; /* upward travel distance */ --fade-threshold: 0.12; /* % of element visible to trigger (used in JS) */ --lift-distance: -3px; /* card hover lift amount */ --lift-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); --lift-duration: 0.2s; --hero-duration: 1.0s; /* hero load fade duration */ --hero-delay: 0.25s; /* delay before hero fades in */ } /* ── Hero load fade ─────────────────────────────────────────── */ /* To disable: add class .hero-fade-disabled to */ @keyframes hero-fade-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .hero-fade { animation: hero-fade-in var(--hero-duration) ease forwards; animation-delay: var(--hero-delay); opacity: 0; /* start hidden until animation fires */ } /* ── Scroll fade-in ─────────────────────────────────────────── */ /* To disable globally: set opacity to 1 and transform to none */ .fade-up { opacity: 0; transform: translateY(var(--fade-distance)); transition: opacity var(--fade-duration) ease, transform var(--fade-duration) ease; } .fade-up.is-visible { opacity: 1; transform: translateY(0); } /* Stagger siblings when parent is a grid or flex container */ .fade-up:nth-child(2) { transition-delay: 0.1s; } .fade-up:nth-child(3) { transition-delay: 0.2s; } .fade-up:nth-child(4) { transition-delay: 0.3s; } /* ── Card hover lift ────────────────────────────────────────── */ /* To disable globally: remove or comment out .card-lift:hover */ .card-lift { transition: transform var(--lift-duration) ease, box-shadow var(--lift-duration) ease; } .card-lift:hover { transform: translateY(var(--lift-distance)); box-shadow: var(--lift-shadow); }