/* ========================================================================== GLOBAL SECTION FRAMEWORK ========================================================================== */ /* ========================================================================== SECTION ========================================================================== */ .section { position: relative; padding-block: var(--space-9); overflow: hidden; } /* ========================================================================== SECTION CONTAINER ========================================================================== */ .section-container { width: min(calc(100% - 4rem), var(--container-width)); margin-inline: auto; } /* ========================================================================== SECTION HEADER ========================================================================== */ .section-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-8); max-width: 52rem; } /* ========================================================================== SECTION TITLE ========================================================================== */ .section-title { max-width: 18ch; } /* ========================================================================== SECTION DESCRIPTION ========================================================================== */ .section-description { max-width: 60ch; color: var(--text-secondary); line-height: 1.8; } /* ========================================================================== SECTION SPACING ========================================================================== */ .section-sm { padding-block: var(--space-6); } .section-lg { padding-block: calc(var(--space-8) * 1.25); } .section-xl { padding-block: calc(var(--space-8) * 1.5); } /* ========================================================================== SECTION DIVIDER ========================================================================== */ .section + .section { border-top: 1px solid transparent; } /* ========================================================================== BACKGROUND HELPERS ========================================================================== */ .bg-white { background: var(--color-white); } .bg-surface { background: var(--color-surface); } .bg-background { background: var(--color-background); } .bg-gradient { background: linear-gradient( 180deg, var(--color-white), var(--color-background) ); } /* ========================================================================== DECORATIVE BACKGROUND BLOBS ========================================================================== */ .bg-blob-top-right::before { content: ""; position: absolute; top: -220px; right: -220px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient( circle, rgba(0,214,201,.08), transparent 72% ); pointer-events: none; } .bg-blob-bottom-left::after { content: ""; position: absolute; bottom: -220px; left: -220px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient( circle, rgba(255,51,153,.06), transparent 72% ); pointer-events: none; } /* ========================================================================== ALIGNMENT HELPERS ========================================================================== */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .items-center { align-items: center; } .justify-center { justify-content: center; } /* ========================================================================== CONTENT WIDTH HELPERS ========================================================================== */ .content-xs { max-width: 34rem; } .content-sm { max-width: 44rem; } .content-md { max-width: 60rem; } .content-lg { max-width: 72rem; } /* ========================================================================== SECTION INTRO ========================================================================== */ .section-intro { margin-bottom: var(--space-6); } /* ========================================================================== SECTION FOOTER ========================================================================== */ .section-footer { display: flex; justify-content: center; margin-top: var(--space-7); } /* ========================================================================== HERO ========================================================================== */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: calc(var(--nav-height) + var(--space-8)); padding-bottom: 0; } /* ========================================================================== HERO GRID ========================================================================== */ .hero-grid { display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; gap: var(--space-8); width: min(100%, 1180px); margin-inline: auto; } /* ========================================================================== HERO COPY ========================================================================== */ .hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; } .hero-copy .section-label { margin-bottom: var(--space-4); } .hero-copy .section-title { margin-bottom: var(--space-4); } .hero-copy .section-description { margin-bottom: var(--space-6); } /* ========================================================================== HERO CTA ========================================================================== */ .hero-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } /* ========================================================================== HERO VISUAL ========================================================================== */ .hero-visual { position: relative; display: flex; justify-content: center; align-items: center; } /* ========================================================================== HERO IMAGE ========================================================================== */ .hero-image { position: relative; z-index: 2; width: min(100%, 520px); } .hero-image img { display: block; width: 100%; height: auto; } /* ========================================================================== HERO DASHBOARD ========================================================================== */ .hero-dashboard { position: absolute; bottom: -2rem; right: -2rem; width: min(300px, 45%); z-index: 3; } /* ========================================================================== HERO BACKGROUND ========================================================================== */ .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 15% 20%, rgba(0,214,201,.08), transparent 35% ), radial-gradient( circle at 85% 25%, rgba(37,99,235,.05), transparent 35% ), radial-gradient( circle at 75% 80%, rgba(0,245,122,.06), transparent 30% ); pointer-events: none; } /* ========================================================================== HERO DECORATIVE ELEMENTS ========================================================================== */ .hero-accent { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(8px); opacity: .5; } .hero-accent.one { width: 140px; height: 140px; top: 10%; right: 8%; background: rgba(255,51,153,.12); } .hero-accent.two { width: 220px; height: 220px; bottom: -60px; left: -80px; background: rgba(0,214,201,.10); } .hero-accent.three { width: 120px; height: 120px; top: 50%; left: 48%; background: rgba(0,245,122,.08); } /* ========================================================================== HERO CONTENT WIDTH ========================================================================== */ .hero-copy > * { max-width: 50rem; } /* ========================================================================== FEATURED CASE STUDIES ========================================================================== */ .featured-work { position: relative; } /* ========================================================================== SECTION INTRO ========================================================================== */ .featured-work .section-title { max-width: 15ch; } .featured-work .section-description { max-width: 42rem; } /* ========================================================================== PORTFOLIO GALLERY ========================================================================== */ .portfolio-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; } /* ========================================================================== CARD LAYOUT ========================================================================== */ .portfolio-gallery .portfolio-card { height: 100%; } /* ========================================================================== PORTFOLIO CONTENT ========================================================================== */ .portfolio-content { display: flex; flex-direction: column; height: 100%; } .portfolio-description { flex-grow: 1; } .portfolio-link { margin-top: auto; } /* ========================================================================== EDITORIAL RHYTHM ========================================================================== */ .portfolio-gallery > * { margin: 0; } .portfolio-gallery .portfolio-card:nth-child(n + 3) { margin-top: 0; } /* ========================================================================== SECTION FOOTER ========================================================================== */ .work-footer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); } .work-footer p { max-width: 42rem; text-align: center; color: var(--text-secondary); } /* ========================================================================== BACKGROUND ========================================================================== */ .featured-work::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( circle at 90% 15%, rgba(0,214,201,.035), transparent 34% ), radial-gradient( circle at 10% 80%, rgba(37,99,235,.03), transparent 34% ); } /* ========================================================================== GRID RHYTHM ========================================================================== */ .portfolio-gallery > * { position: relative; z-index: 2; } /* ========================================================================== CTA AREA ========================================================================== */ .work-footer .btn { min-width: 260px; } /* ========================================================================== INSIDE MY BRAIN ========================================================================== */ .inside-brain { position: relative; background: var(--color-white); } .inside-brain .section-title { max-width: 14ch; } .inside-brain .section-description { max-width: 44rem; } /* ========================================================================== THOUGHT GRID ========================================================================== */ .thought-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; } /* ========================================================================== FEATURED THOUGHT ========================================================================== */ .thought-card.featured { grid-column: span 2; } /* ========================================================================== THOUGHT CARD LAYOUT ========================================================================== */ .thought-grid .thought-card { height: 100%; } .thought-grid .thought-description { flex-grow: 1; } /* ========================================================================== SECTION BACKGROUND ========================================================================== */ .inside-brain::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( circle at 20% 15%, rgba(139,92,246,.035), transparent 32% ), radial-gradient( circle at 85% 80%, rgba(0,214,201,.03), transparent 34% ); } /* ========================================================================== EXPERIENCE ========================================================================== */ .experience { position: relative; background: var(--color-background); } .experience .section-title { max-width: 12ch; } .experience .section-description { max-width: 44rem; } /* ========================================================================== TIMELINE PLACEMENT ========================================================================== */ .experience .timeline { margin-top: var(--space-6); } .experience .timeline-item:not(:last-child) { margin-bottom: var(--space-5); } /* ========================================================================== RESUME CTA ========================================================================== */ .timeline-actions { display: flex; justify-content: center; margin-top: var(--space-8); } /* ========================================================================== EXPERIENCE BACKGROUND ========================================================================== */ .experience::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( circle at 90% 15%, rgba(37,99,235,.035), transparent 34% ), radial-gradient( circle at 10% 85%, rgba(0,245,122,.03), transparent 36% ); } /* ========================================================================== SECTION RHYTHM ========================================================================== */ .inside-brain > *, .experience > * { position: relative; z-index: 2; } /* ========================================================================== CONNECT ========================================================================== */ .connect { position: relative; background: var(--color-white); } /* ========================================================================== CONNECT WRAPPER ========================================================================== */ .connect-wrapper { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 52rem; margin-inline: auto; } .connect .section-header { align-items: center; text-align: center; } .connect .section-title { max-width: 14ch; } .connect .section-description { max-width: 42rem; } /* ========================================================================== CONNECT ACTIONS ========================================================================== */ .connect-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); } /* ========================================================================== CONNECT BACKGROUND ========================================================================== */ .connect::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( circle at 20% 20%, rgba(255,51,153,.04), transparent 34% ), radial-gradient( circle at 80% 75%, rgba(0,214,201,.035), transparent 36% ); } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { position: relative; background: var(--color-background); } /* ========================================================================== FOOTER SPACING ========================================================================== */ .footer-inner { padding-block: var(--space-5); } /* ========================================================================== FOOTER LAYOUT ========================================================================== */ .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); } .footer-brand { display: flex; align-items: center; } .footer-copy { max-width: 36rem; text-align: center; } .footer-nav { display: flex; align-items: center; gap: var(--space-4); } /* ========================================================================== FOOTER BACKGROUND ========================================================================== */ .site-footer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(90%, 1200px); height: 1px; background: var(--color-divider); } /* ========================================================================== FOOTER RHYTHM ========================================================================== */ .site-footer > * { position: relative; z-index: 2; } /* ========================================================================== FINAL PAGE RHYTHM ========================================================================== */ .section:last-of-type { padding-bottom: var(--space-8); }