/* ================================================================================ CRITICAL CSS - INLINED IN This file contains the critical CSS required for the initial viewport rendering, specifically for the Hero Section, to optimize for Largest Contentful Paint (LCP). It manually translates Tailwind CSS classes to plain CSS. Tailwind classes from: - src/components/hero/hero-section.tsx - src/components/RotatingText.tsx ================================================================================ */ /* General Typography & Layout */ .font-sans { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .text-white { color: #fff; } .text-center { text-align: center; } .uppercase { text-transform: uppercase; } .font-bold { font-weight: 700; } .block { display: block; } .relative { position: relative; } .absolute { position: absolute; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .-z-10 { z-index: -10; } .mx-auto { margin-left: auto; margin-right: auto; } /* Hero Section Layout */ .hero-section-container { /* Corresponds to: relative pt-12 sm:pt-16 */ position: relative; padding-top: 3rem; /* 48px */ } .hero-background-gradient { /* Corresponds to: absolute inset-0 bg-[linear-gradient(to_bottom,black_40%,transparent)] -z-10 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; z-index: -10; } .hero-content-wrapper { /* Corresponds to: relative px-0 mx-auto sm:px-6 lg:px-8 max-w-7xl */ position: relative; margin-left: auto; margin-right: auto; max-width: 80rem; /* 1280px */ padding-left: 0; padding-right: 0; } .hero-text-container { /* Corresponds to: max-w-4xl mx-auto text-center */ max-width: 56rem; /* 896px */ margin-left: auto; margin-right: auto; text-align: center; } /* Hero Section Typography */ .hero-subtitle { /* Corresponds to: text-sm font-bold tracking-widest uppercase font-sans */ font-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */ font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .hero-subtitle-gradient { /* Corresponds to: text-transparent bg-clip-text bg-gradient-to-r from-accent to-secondary */ color: transparent; background-clip: text; -webkit-background-clip: text; background-image: linear-gradient(to right, #00ffcc, #00aaff); /* Updated to match Tailwind config */ } .hero-title { /* Corresponds to: mt-8 text-3xl font-bold text-white sm:text-5xl lg:text-6xl xl:text-7xl font-sans */ margin-top: 2rem; /* 32px */ font-size: 1.875rem; /* 30px */ line-height: 2.25rem; /* 36px */ font-weight: 700; color: #fff; } .hero-title-block { /* Corresponds to: block */ display: block; } .hero-title-rotating-text { /* Corresponds to: block mt-2 */ display: block; margin-top: 0.5rem; /* 8px */ } /* RotatingText Component Styles */ .rotating-text-grid { /* Corresponds to: inline-grid justify-items-center */ display: inline-grid; justify-items: center; } .rotating-text-sizer { /* Corresponds to: invisible col-start-1 row-start-1 whitespace-nowrap */ visibility: hidden; grid-column-start: 1; grid-row-start: 1; white-space: nowrap; } .rotating-text-visible { /* Corresponds to: inline-flex items-center col-start-1 row-start-1 text-transparent bg-clip-text bg-gradient-to-r from-accent to-secondary */ display: inline-flex; align-items: center; grid-column-start: 1; grid-row-start: 1; color: transparent; background-clip: text; -webkit-background-clip: text; background-image: linear-gradient(to right, #00ffcc, #00aaff); font-size: 1.875rem; /* 30px */ line-height: 2.25rem; /* 36px */ } .typing-indicator { animation: blink 1s step-end infinite; } @keyframes blink { from, to { color: transparent; } 50% { color: #00aaff; /* Match secondary color for cursor */ } } /* Responsive Styles */ @media (min-width: 480px) { /* Custom 'xs' breakpoint for rotating text */ .rotating-text-visible { font-size: 2.25rem; /* 36px */ line-height: 2.5rem; /* 40px */ } } @media (min-width: 640px) { /* sm */ .hero-section-container { padding-top: 4rem; /* 64px */ } .hero-content-wrapper { padding-left: 1.5rem; /* 24px */ padding-right: 1.5rem; /* 24px */ } .hero-title, .rotating-text-visible { font-size: 3rem; /* 48px */ line-height: 1; } } @media (min-width: 1024px) { /* lg */ .hero-content-wrapper { padding-left: 2rem; /* 32px */ padding-right: 2rem; /* 32px */ } .hero-title, .rotating-text-visible { font-size: 3.75rem; /* 60px */ line-height: 1; } } @media (min-width: 1280px) { /* xl */ .hero-title, .rotating-text-visible { font-size: 4.5rem; /* 72px */ line-height: 1; } } /* SVG Glow Effect Container */ .glow-container { /* Corresponds to: relative pt-16 */ position: relative; padding-top: 4rem; /* 64px */ } .glow-effect { /* Corresponds to: absolute top-0 left-1/2 -translate-x-1/2 w-[95vw] md:w-[75vw] lg:w-[60vw] max-w-4xl h-px blur-md */ position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 95vw; max-width: 56rem; /* 896px */ height: 1px; filter: blur(12px); } .glow-gradient { /* Corresponds to: w-full h-full bg-gradient-to-r from-transparent via-cyan-400 to-transparent */ width: 100%; height: 100%; background-image: linear-gradient(to right, transparent, #22d3ee, transparent); /* #22d3ee is cyan-400 */ } @media (min-width: 768px) { /* md */ .glow-effect { width: 75vw; } } @media (min-width: 1024px) { /* lg */ .glow-effect { width: 60vw; } }