/* ============================================ SelectMovie — Critical CSS (Above the Fold) Inlined in for instant first paint Keep under 14KB compressed ============================================ */ /* === RESET === */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} body{min-height:100dvh;line-height:1.6} img,picture,video,canvas,svg{display:block;max-width:100%;height:auto} input,button,textarea,select{font:inherit} p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word} /* === CSS CUSTOM PROPERTIES === */ :root{ /* Brand Colors */ --primary:#6C5CE7; --primary-hover:#5A4BD1; --primary-light:rgba(108,92,231,0.12); --primary-glow:rgba(108,92,231,0.3); --secondary:#00CEC9; --secondary-hover:#00B5B0; --accent:#FD79A8; --accent-hover:#E8608F; --warning:#FDCB6E; --success:#00B894; --danger:#FF7675; /* Light mode (default) */ --bg-primary:#FAFAFE; --bg-surface:#FFFFFF; --bg-surface-elevated:#FFFFFF; --bg-muted:#F0F0F8; --bg-overlay:rgba(10,10,15,0.5); --text-primary:#1A1A2E; --text-secondary:#4A4A6A; --text-tertiary:#8888A8; --text-inverse:#FFFFFF; --border:#E2E2F0; --border-focus:#6C5CE7; /* Shadows */ --shadow-sm:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04); --shadow-md:0 4px 12px rgba(0,0,0,0.08),0 2px 4px rgba(0,0,0,0.04); --shadow-lg:0 12px 40px rgba(0,0,0,0.12),0 4px 12px rgba(0,0,0,0.06); --shadow-xl:0 24px 60px rgba(0,0,0,0.16),0 8px 20px rgba(0,0,0,0.08); --shadow-glow:0 0 30px var(--primary-glow); /* Fluid Typography */ --text-xs:clamp(0.7rem,0.65rem + 0.25vw,0.8rem); --text-sm:clamp(0.8rem,0.75rem + 0.3vw,0.9rem); --text-base:clamp(0.95rem,0.9rem + 0.3vw,1.1rem); --text-lg:clamp(1.1rem,1rem + 0.5vw,1.35rem); --text-xl:clamp(1.3rem,1.1rem + 0.8vw,1.75rem); --text-2xl:clamp(1.6rem,1.3rem + 1.2vw,2.4rem); --text-3xl:clamp(2rem,1.5rem + 2vw,3.2rem); --text-4xl:clamp(2.5rem,1.8rem + 3vw,4.5rem); /* Spacing */ --space-xs:clamp(0.25rem,0.2rem + 0.2vw,0.5rem); --space-sm:clamp(0.5rem,0.4rem + 0.4vw,0.75rem); --space-md:clamp(0.75rem,0.6rem + 0.6vw,1.25rem); --space-lg:clamp(1rem,0.8rem + 1vw,2rem); --space-xl:clamp(1.5rem,1rem + 2vw,3rem); --space-2xl:clamp(2rem,1.5rem + 2.5vw,4.5rem); --space-3xl:clamp(3rem,2rem + 4vw,7rem); /* Content widths */ --content-width:min(90vw,1200px); --content-narrow:min(90vw,720px); --content-wide:min(95vw,1400px); /* Radii */ --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-full:9999px; /* Transitions */ --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1); --transition-fast:150ms var(--ease-out); --transition-base:250ms var(--ease-out); --transition-slow:400ms var(--ease-out); /* Z-index scale */ --z-dropdown:100; --z-sticky:200; --z-overlay:300; --z-modal:400; --z-nav:500; --z-toast:600; } /* === DARK MODE === */ @media(prefers-color-scheme:dark){ :root{ --bg-primary:#0A0A0F; --bg-surface:#141420; --bg-surface-elevated:#1C1C2E; --bg-muted:#1E1E32; --bg-overlay:rgba(0,0,0,0.7); --text-primary:#E8E6E3; --text-secondary:#A8A8C0; --text-tertiary:#6868888; --border:#2A2A40; --shadow-sm:0 1px 3px rgba(0,0,0,0.2); --shadow-md:0 4px 12px rgba(0,0,0,0.3); --shadow-lg:0 12px 40px rgba(0,0,0,0.4); --shadow-xl:0 24px 60px rgba(0,0,0,0.5); } } /* === BODY === */ body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:var(--text-base); color:var(--text-primary); background:var(--bg-primary); overflow-x:hidden; } /* === SKIP LINK === */ .skip-link{ position:absolute;top:-100%;left:16px;z-index:9999; padding:12px 24px;background:var(--primary);color:#fff; border-radius:0 0 var(--radius-sm) var(--radius-sm); font-weight:600;text-decoration:none; transition:top var(--transition-fast); } .skip-link:focus{top:0} /* === HEADER === */ .site-header{ position:sticky;top:0;z-index:var(--z-nav); background:rgba(250,250,254,0.85); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid var(--border); padding:0 var(--space-md); } @media(prefers-color-scheme:dark){ .site-header{background:rgba(10,10,15,0.85)} } .header-inner{ display:flex;align-items:center;justify-content:space-between; max-width:var(--content-wide);margin:0 auto; height:60px; } .logo{ display:flex;align-items:center;gap:8px; text-decoration:none;color:var(--text-primary); font-weight:800;font-size:var(--text-lg); letter-spacing:-0.02em; } .logo-icon{ width:36px;height:36px; background:linear-gradient(135deg,var(--primary),var(--accent)); border-radius:var(--radius-sm); display:flex;align-items:center;justify-content:center; color:#fff;font-size:18px;font-weight:900; } .logo-text span{color:var(--primary)} /* === MOBILE NAV === */ .nav-toggle{ display:flex;align-items:center;justify-content:center; width:44px;height:44px; background:none;border:none;cursor:pointer; position:relative;z-index:calc(var(--z-nav) + 1); } .hamburger,.hamburger::before,.hamburger::after{ display:block;width:22px;height:2px; background:var(--text-primary);border-radius:2px; transition:all var(--transition-base); } .hamburger::before,.hamburger::after{ content:'';position:absolute; } .hamburger::before{top:-7px} .hamburger::after{top:7px} .nav-toggle[aria-expanded="true"] .hamburger{background:transparent} .nav-toggle[aria-expanded="true"] .hamburger::before{top:0;transform:rotate(45deg)} .nav-toggle[aria-expanded="true"] .hamburger::after{top:0;transform:rotate(-45deg)} .main-nav{ position:fixed;top:0;right:-100%; width:min(85vw,360px);height:100dvh; background:var(--bg-surface); box-shadow:var(--shadow-xl); transition:right 0.35s var(--ease-out); z-index:var(--z-nav); overflow-y:auto;-webkit-overflow-scrolling:touch; padding:80px var(--space-lg) var(--space-lg); } .nav-toggle[aria-expanded="true"]~.main-nav{right:0} .nav-overlay{ display:none;position:fixed;inset:0; background:var(--bg-overlay);z-index:calc(var(--z-nav) - 1); opacity:0;transition:opacity var(--transition-base); } .nav-toggle[aria-expanded="true"]~.nav-overlay{display:block;opacity:1} .main-nav ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-xs)} .main-nav a{ display:flex;align-items:center;gap:12px; padding:14px 16px;border-radius:var(--radius-md); text-decoration:none;color:var(--text-primary); font-weight:500;font-size:var(--text-lg); transition:background var(--transition-fast); min-height:44px; } .main-nav a:hover,.main-nav a[aria-current="page"]{ background:var(--primary-light);color:var(--primary); } .nav-icon{font-size:1.25em;width:28px;text-align:center} .nav-cta{ display:block;margin-top:var(--space-md); padding:14px 24px;text-align:center; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff;border-radius:var(--radius-full); text-decoration:none;font-weight:700; min-height:48px;line-height:1.4; } /* Desktop nav */ @media(min-width:900px){ .nav-toggle,.nav-overlay{display:none!important} .main-nav{ position:static;width:auto;height:auto; background:none;box-shadow:none;padding:0; overflow:visible; } .main-nav ul{flex-direction:row;gap:var(--space-xs)} .main-nav a{ font-size:var(--text-sm);padding:8px 14px; border-radius:var(--radius-full); } .nav-icon{display:none} .nav-cta{ display:inline-block;margin:0; padding:10px 22px;font-size:var(--text-sm); } } /* === HERO SECTION === */ .hero{ padding:var(--space-2xl) var(--space-md); text-align:center; background:linear-gradient(180deg,var(--bg-primary) 0%,var(--bg-muted) 100%); position:relative;overflow:hidden; } .hero::before{ content:'';position:absolute;top:-50%;left:-50%; width:200%;height:200%; background:radial-gradient(ellipse at 30% 50%,var(--primary-light) 0%,transparent 60%), radial-gradient(ellipse at 70% 80%,rgba(253,121,168,0.08) 0%,transparent 50%); pointer-events:none; } .hero-content{position:relative;max-width:var(--content-narrow);margin:0 auto} .hero-badge{ display:inline-flex;align-items:center;gap:6px; padding:6px 16px;border-radius:var(--radius-full); background:var(--primary-light);color:var(--primary); font-size:var(--text-sm);font-weight:600; margin-bottom:var(--space-md); } .hero h1{ font-size:var(--text-4xl);font-weight:900; letter-spacing:-0.03em;line-height:1.1; margin-bottom:var(--space-md); } .hero h1 .gradient-text{ background:linear-gradient(135deg,var(--primary),var(--accent)); -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } .hero p{ font-size:var(--text-lg);color:var(--text-secondary); max-width:540px;margin:0 auto var(--space-lg); line-height:1.7; } .hero-cta{ display:inline-flex;align-items:center;gap:10px; padding:16px 32px; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff;border:none;border-radius:var(--radius-full); font-size:var(--text-lg);font-weight:700; cursor:pointer;text-decoration:none; transition:all var(--transition-base); box-shadow:0 4px 20px var(--primary-glow); min-height:48px; } .hero-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 30px var(--primary-glow); } .hero-stats{ display:flex;gap:var(--space-lg);justify-content:center; margin-top:var(--space-xl);flex-wrap:wrap; } .hero-stat{text-align:center} .hero-stat-number{ font-size:var(--text-2xl);font-weight:800; color:var(--primary); } .hero-stat-label{font-size:var(--text-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.08em} /* === CONTAINER === */ .container{ width:var(--content-width);margin:0 auto; padding:0 var(--space-md); } .container-narrow{width:var(--content-narrow);margin:0 auto;padding:0 var(--space-md)} .container-wide{width:var(--content-wide);margin:0 auto;padding:0 var(--space-md)} /* === SECTIONS === */ .section{padding:var(--space-2xl) 0} .section-header{ text-align:center;margin-bottom:var(--space-xl); } .section-header h2{ font-size:var(--text-2xl);font-weight:800; letter-spacing:-0.02em;margin-bottom:var(--space-sm); } .section-header p{ font-size:var(--text-base);color:var(--text-secondary); max-width:540px;margin:0 auto; } /* === CARDS === */ .card{ background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:all var(--transition-base); } .card-body{padding:var(--space-md)} /* === BUTTONS === */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 24px;border:none;border-radius:var(--radius-full); font-weight:600;font-size:var(--text-sm); cursor:pointer;text-decoration:none; transition:all var(--transition-fast); min-height:44px;min-width:44px; line-height:1.4; } .btn-primary{ background:var(--primary);color:#fff; box-shadow:0 2px 8px var(--primary-glow); } .btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)} .btn-secondary{ background:var(--bg-muted);color:var(--text-primary); border:1px solid var(--border); } .btn-secondary:hover{border-color:var(--primary);color:var(--primary)} .btn-ghost{background:none;color:var(--text-secondary)} .btn-ghost:hover{color:var(--primary);background:var(--primary-light)} .btn-trailer{ background:#FF0000;color:#fff;margin-top:var(--space-sm); box-shadow:0 2px 8px rgba(255,0,0,0.25); } .btn-trailer:hover{background:#CC0000;transform:translateY(-1px)} /* === FOCUS STATES === */ :focus-visible{ outline:3px solid var(--primary); outline-offset:2px; border-radius:var(--radius-sm); } /* === BREADCRUMBS === */ .breadcrumb{ display:flex;flex-wrap:wrap;gap:4px; padding:var(--space-md) 0; font-size:var(--text-sm);color:var(--text-tertiary); list-style:none; } .breadcrumb a{color:var(--text-secondary);text-decoration:none} .breadcrumb a:hover{color:var(--primary)} .breadcrumb li+li::before{content:'›';margin-right:4px;color:var(--text-tertiary)} /* === FOOTER === */ .site-footer{ background:var(--bg-surface); border-top:1px solid var(--border); padding:var(--space-2xl) var(--space-md) var(--space-lg); margin-top:var(--space-2xl); } .footer-inner{ max-width:var(--content-wide);margin:0 auto; display:grid;grid-template-columns:1fr;gap:var(--space-xl); } .footer-brand p{color:var(--text-secondary);font-size:var(--text-sm);margin-top:var(--space-sm);max-width:320px} .footer-links h3{ font-size:var(--text-sm);font-weight:700; text-transform:uppercase;letter-spacing:0.08em; color:var(--text-tertiary);margin-bottom:var(--space-sm); } .footer-links ul{list-style:none} .footer-links a{ display:block;padding:6px 0;color:var(--text-secondary); text-decoration:none;font-size:var(--text-sm); transition:color var(--transition-fast);min-height:44px; display:flex;align-items:center; } .footer-links a:hover{color:var(--primary)} .footer-bottom{ border-top:1px solid var(--border); padding-top:var(--space-lg);margin-top:var(--space-lg); text-align:center;font-size:var(--text-xs);color:var(--text-tertiary); } @media(min-width:600px){ .footer-inner{grid-template-columns:1.5fr 1fr 1fr} } @media(min-width:900px){ .footer-inner{grid-template-columns:2fr 1fr 1fr 1fr 1fr} } /* === REDUCED MOTION === */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:0.01ms!important; transition-duration:0.01ms!important; scroll-behavior:auto!important; } }