/* ════════════════════════════════════════════════════ Sora2DL — style.css Single font: Inter (all weights) Dark / Light theme via [data-theme="dark"] on ════════════════════════════════════════════════════ */ /* ─── GOOGLE FONT ─── */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&family=JetBrains+Mono:wght@400;500&display=swap'); /* ─── LIGHT THEME (default) ─── */ :root { /* Background layers */ --bg-base: #f7f7f5; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-subtle: #f0f0ec; --bg-muted: #e8e8e3; /* Text */ --tx-primary: #0d0d12; --tx-secondary: #3a3a48; --tx-muted: #6b6b80; --tx-faint: #9e9eb2; /* Border */ --bd-default: #e2e2dc; --bd-strong: #c8c8c0; /* Accent (purple) */ --ac: #5b4aff; --ac-hover: #7060ff; --ac-subtle: #edeaff; --ac-border: rgba(91,74,255,.2); /* Status */ --green: #00c48c; --green-bg: #e0fff5; --green-tx: #005c42; --green-bd: #6ee7b7; --amber-bg: #fef9e7; --amber-tx: #713f12; --amber-bd: #fbbf24; --red-bg: #fff1f1; --red-tx: #991b1b; --red-bd: #fca5a5; --info-bg: #eff6ff; --info-tx: #1d4ed8; --info-bd: #93c5fd; /* Header backdrop */ --header-bg: rgba(247,247,245,.92); /* Hero (always dark, not theme-dependent) */ --hero-from: #130d3a; --hero-mid: #1e1454; --hero-to: #0f2545; --hero-glow: rgba(91,74,255,.3); /* Shadows */ --sh-sm: 0 1px 3px rgba(0,0,0,.05), 0 1px 8px rgba(0,0,0,.06); --sh-md: 0 4px 12px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05); --sh-lg: 0 8px 32px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.06); /* Typography */ --font: 'Inter', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', 'Courier New', monospace; /* Radii */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; /* Transitions */ --ease: cubic-bezier(.4, 0, .2, 1); } /* ─── DARK THEME ─── */ [data-theme="dark"] { --bg-base: #0e0e14; --bg-surface: #161620; --bg-elevated: #1e1e2c; --bg-subtle: #1a1a26; --bg-muted: #242436; --tx-primary: #f0f0f8; --tx-secondary: #c0c0d4; --tx-muted: #8888a8; --tx-faint: #5c5c78; --bd-default: #2a2a3e; --bd-strong: #3a3a54; --ac: #7c6dff; --ac-hover: #9080ff; --ac-subtle: #1e1a40; --ac-border: rgba(124,109,255,.25); --green: #00d49a; --green-bg: #052a1e; --green-tx: #6ee7b7; --green-bd: #064e35; --amber-bg: #271a00; --amber-tx: #fde68a; --amber-bd: #92400e; --red-bg: #2a0a0a; --red-tx: #fca5a5; --red-bd: #7f1d1d; --info-bg: #0a1a35; --info-tx: #93c5fd; --info-bd: #1e3a6a; --header-bg: rgba(14,14,20,.92); --sh-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 8px rgba(0,0,0,.25); --sh-md: 0 4px 12px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.2); --sh-lg: 0 8px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3); } /* ─── RESET ─── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--tx-primary); background: var(--bg-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background .25s var(--ease), color .25s var(--ease); } /* ─── THEME TRANSITION ─── */ body, .site-header, .downloader-card, .mobile-drawer, .tool-card, .why-item, .blog-card, .codes-panel, .code-card, .stat-card, .capabilities-list li, .faq-item, .result-card, .progress-wrapper, .qr-box, .link-row, .countdown-box, .telegram-box { transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); } /* ─── LAYOUT ─── */ .container { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; } .container-narrow { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; } /* ════════════════════════════════════════════════════ HEADER ════════════════════════════════════════════════════ */ .site-header { position: sticky; top: 0; z-index: 200; background: var(--header-bg); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--bd-default); padding: .85rem 0; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* Logo */ .logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; } .logo-badge { width: 38px; height: 38px; border-radius: 10px; background: var(--ac); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; flex-shrink: 0; } .logo-name { font-weight: 800; font-size: 1.2rem; letter-spacing: -.03em; color: var(--tx-primary); } .logo-tag { display: block; font-size: .63rem; color: var(--tx-faint); font-weight: 400; margin-top: -2px; } /* Desktop nav */ .header-nav { display: flex; align-items: center; gap: .15rem; } .header-nav a { text-decoration: none; color: var(--tx-muted); font-size: .86rem; font-weight: 500; padding: .42rem .82rem; border-radius: var(--r-sm); transition: all .18s var(--ease); } .header-nav a:hover { color: var(--tx-primary); background: var(--bg-subtle); } .header-nav .nav-cta { background: var(--ac); color: #fff !important; padding: .42rem 1rem; border-radius: var(--r-sm); } .header-nav .nav-cta:hover { background: var(--ac-hover) !important; } /* Theme toggle button */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--bg-subtle); border: 1px solid var(--bd-default); cursor: pointer; color: var(--tx-muted); transition: all .18s var(--ease); flex-shrink: 0; } .theme-toggle:hover { background: var(--bg-muted); color: var(--tx-primary); } .theme-toggle svg { width: 17px; height: 17px; display: block; } /* Show/hide sun & moon */ .icon-sun { display: none; } .icon-moon { display: block; } [data-theme="dark"] .icon-sun { display: block; } [data-theme="dark"] .icon-moon { display: none; } /* Hamburger */ .menu-btn { display: none; background: none; border: 1.5px solid var(--bd-default); border-radius: var(--r-sm); padding: .45rem; cursor: pointer; color: var(--tx-secondary); } .menu-btn svg { width: 20px; height: 20px; display: block; } /* ─── MOBILE DRAWER ─── */ .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); z-index: 999; } .mobile-overlay.open { display: block; } .mobile-drawer { position: fixed; right: -100%; top: 0; bottom: 0; width: 280px; background: var(--bg-elevated); z-index: 1000; transition: right .28s cubic-bezier(.4,0,.2,1); padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; border-left: 1px solid var(--bd-default); } .mobile-drawer.open { right: 0; } .drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .drawer-close { background: var(--bg-subtle); border: none; border-radius: var(--r-sm); padding: .5rem; cursor: pointer; color: var(--tx-muted); } .drawer-close svg { width: 18px; height: 18px; display: block; } .mobile-nav a { display: block; text-decoration: none; color: var(--tx-secondary); font-weight: 500; padding: .85rem 1rem; border-radius: var(--r-md); transition: all .15s var(--ease); } .mobile-nav a:hover { background: var(--ac-subtle); color: var(--ac); } /* ════════════════════════════════════════════════════ HERO BAND (always dark — not theme-dependent) ════════════════════════════════════════════════════ */ .hero-band { background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-mid) 40%, var(--hero-to) 100%); padding: 5rem 0 4rem; text-align: center; color: #fff; position: relative; overflow: hidden; } .hero-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--hero-glow), transparent); pointer-events: none; } .hero-eyebrow { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: .3rem .9rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.9); margin-bottom: 1.25rem; } .hero-eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--green); border-radius: 50%; flex-shrink: 0; } .hero-band h1 { font-weight: 900; font-size: clamp(2.1rem, 5vw, 3.75rem); line-height: 1.1; letter-spacing: -.04em; margin-bottom: 1rem; } .hero-band h1 span { color: #a899ff; } .hero-band > .container > p { font-size: 1.05rem; color: rgba(255,255,255,.72); max-width: 540px; margin: 0 auto 2rem; } .hero-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.5rem; } .hero-badge { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .28rem .82rem; font-size: .77rem; color: rgba(255,255,255,.82); font-weight: 500; } /* ════════════════════════════════════════════════════ DOWNLOADER CARD ════════════════════════════════════════════════════ */ .downloader-wrap { margin: -3rem auto 0; max-width: 780px; padding: 0 1.5rem; position: relative; z-index: 10; } .downloader-card { background: var(--bg-elevated); border-radius: var(--r-xl); box-shadow: var(--sh-lg); border: 1px solid var(--bd-default); padding: 2rem; } .dl-card-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; } .dl-card-header-icon { width: 40px; height: 40px; background: var(--ac-subtle); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dl-card-header-icon svg { width: 20px; height: 20px; color: var(--ac); } .dl-card-header h2 { font-weight: 700; font-size: 1.2rem; color: var(--tx-primary); } .dl-card-header p { font-size: .78rem; color: var(--tx-faint); margin-top: 2px; } /* Bars */ .notice-bar { background: var(--amber-bg); border: 1px solid var(--amber-bd); border-radius: 10px; padding: .75rem 1rem; font-size: .82rem; color: var(--amber-tx); margin-bottom: 1.1rem; } .hint-bar { display: flex; align-items: flex-start; gap: .6rem; background: var(--ac-subtle); border: 1px solid var(--ac-border); border-radius: 10px; padding: .7rem 1rem; font-size: .82rem; color: var(--tx-secondary); margin-bottom: 1.1rem; } .hint-bar strong { font-weight: 600; color: var(--tx-primary); } /* Input */ .dl-input-row { display: flex; gap: .7rem; margin-bottom: 1rem; } .dl-input { flex: 1; padding: 1rem 1.2rem; font-size: 1.5rem; font-family: var(--font); border: 1.5px solid var(--bd-default); border-radius: var(--r-md); background: var(--bg-base); outline: none; color: var(--tx-primary); transition: border-color .18s var(--ease), background .18s, box-shadow .18s; } .dl-input:focus { border-color: var(--ac); background: var(--bg-elevated); box-shadow: 0 0 0 3px var(--ac-border); } .dl-input::placeholder { color: var(--tx-faint); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .48rem; font-family: var(--font); font-weight: 600; font-size: .9rem; border: none; border-radius: var(--r-md); cursor: pointer; transition: all .2s var(--ease); text-decoration: none; padding: .875rem 1.5rem; white-space: nowrap; } .btn svg { width: 17px; height: 17px; flex-shrink: 0; } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .btn-primary { background: var(--ac); color: #fff; } .btn-primary:hover { background: var(--ac-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(91,74,255,.35); } .btn-primary:active { transform: none; } .btn-green { background: var(--green); color: #fff; } .btn-green:hover { filter: brightness(1.08); transform: translateY(-1px); } /* Turnstile */ .turnstile-wrap { min-height: 0; overflow: hidden; transition: min-height .3s var(--ease); display: flex; justify-content: center; } .turnstile-wrap.visible { min-height: 70px; margin-bottom: 1rem; } /* Alerts */ .alert { padding: .8rem 1rem; border-radius: 10px; font-weight: 500; font-size: .86rem; display: none; margin-top: .6rem; } .alert.show { display: block; } .alert-ok { background: var(--green-bg); color: var(--green-tx); border: 1px solid var(--green-bd); } .alert-err { background: var(--red-bg); color: var(--red-tx); border: 1px solid var(--red-bd); } /* Telegram box */ .telegram-box { background: var(--info-bg); border: 1px solid var(--info-bd); border-radius: var(--r-md); padding: 1rem 1.1rem; font-size: .83rem; color: var(--info-tx); margin-top: 1rem; } .telegram-box a { color: var(--ac); font-weight: 600; } .telegram-box img { max-width: 140px; margin-top: .65rem; border-radius: 8px; border: 1px solid var(--bd-default); } /* ════════════════════════════════════════════════════ RESULT CARD ════════════════════════════════════════════════════ */ .result-card { background: var(--bg-elevated); border-radius: var(--r-xl); border: 1px solid var(--ac-border); box-shadow: 0 0 0 1px var(--ac-border), var(--sh-lg); margin: 2rem 0; overflow: hidden; animation: fadeUp .5s cubic-bezier(.22,1,.36,1) both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .result-topbar { display: flex; align-items: center; gap: .65rem; padding: .85rem 1.5rem; background: var(--ac-subtle); border-bottom: 1px solid var(--ac-border); } .live-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 3px rgba(0,196,140,.2); animation: pulseDot 2.4s ease-in-out infinite; } @keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 3px rgba(0,196,140,.2); } 50% { box-shadow: 0 0 0 7px rgba(0,196,140,.06); } } .result-topbar-label { font-size: .67rem; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 1.5px; } .result-topbar-id { margin-left: auto; font-size: .62rem; color: var(--tx-faint); font-family: var(--mono); background: var(--ac-border); padding: .18rem .55rem; border-radius: 999px; } .result-body { display: grid; grid-template-columns: 290px 1fr; } .result-preview { position: relative; min-height: 220px; background: var(--bg-subtle); border-right: 1px solid var(--bd-default); } .result-preview video { width: 100%; min-height: 220px; max-height: 400px; object-fit: cover; display: block; } .preview-label { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border: 1px solid var(--ac-border); color: var(--ac); font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; padding: .22rem .6rem; border-radius: 999px; } .result-info { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; background: var(--bg-elevated); } .result-title { font-weight: 700; font-size: 1.03rem; color: var(--tx-primary); } .dl-primary { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem 1.25rem; background: var(--ac); color: #fff; font-family: var(--font); font-weight: 700; font-size: .9rem; border-radius: var(--r-md); text-decoration: none; border: none; cursor: pointer; transition: all .2s var(--ease); box-shadow: 0 5px 18px rgba(91,74,255,.3); } .dl-primary:hover { background: var(--ac-hover); transform: translateY(-1px); box-shadow: 0 8px 26px rgba(91,74,255,.4); } .dl-primary svg { width: 17px; height: 17px; flex-shrink: 0; } .formats-label { font-size: .6rem; font-weight: 700; color: var(--tx-faint); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: .45rem; } .format-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .4rem; } .fmt-btn { display: flex; align-items: center; gap: .5rem; padding: .58rem .8rem; background: var(--bg-subtle); border: 1.5px solid var(--bd-default); border-radius: 10px; color: var(--tx-secondary); font-family: var(--font); font-size: .74rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all .15s var(--ease); } .fmt-btn:hover { background: var(--ac-subtle); border-color: var(--ac-border); color: var(--ac); transform: translateY(-1px); } .fmt-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; } .fmt-lbl { font-weight: 700; font-size: .72rem; display: block; color: var(--tx-primary); } .fmt-sub { font-size: .6rem; color: var(--tx-faint); display: block; margin-top: 1px; } .result-prompt { background: var(--ac-subtle); border: 1.5px solid var(--ac-border); border-radius: var(--r-md); padding: 1rem; } .prompt-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; } .prompt-icon { width: 22px; height: 22px; background: var(--ac); border-radius: 6px; display: flex; align-items: center; justify-content: center; } .prompt-icon svg { width: 12px; height: 12px; color: #fff; } .prompt-label { font-size: .62rem; font-weight: 700; color: var(--ac); text-transform: uppercase; letter-spacing: 1.3px; } .prompt-text { font-size: .83rem; color: var(--tx-muted); line-height: 1.7; font-style: italic; padding-left: .3rem; border-left: 2px solid var(--ac-border); } .result-bottom { border-top: 1px solid var(--bd-default); background: var(--bg-subtle); padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .dl-section-label { font-size: .6rem; font-weight: 700; color: var(--tx-faint); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: .4rem; } .link-row { display: flex; align-items: center; gap: .5rem; background: var(--bg-elevated); border: 1.5px solid var(--bd-default); border-radius: 9px; padding: .58rem .85rem; transition: border-color .18s; } .link-row:hover { border-color: var(--ac-border); } .link-text { flex: 1; font-family: var(--mono); font-size: .62rem; color: var(--tx-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .copy-sm { flex-shrink: 0; padding: .28rem .72rem; background: var(--bg-subtle); border: 1px solid var(--bd-default); border-radius: 7px; color: var(--tx-muted); font-family: var(--font); font-size: .67rem; font-weight: 600; cursor: pointer; transition: all .15s var(--ease); } .copy-sm:hover { background: var(--ac-subtle); border-color: var(--ac-border); color: var(--ac); } .copy-sm.copied { background: var(--green-bg); border-color: var(--green-bd); color: var(--green-tx); } /* QR */ .qr-block { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .qr-box { background: var(--bg-elevated); border-radius: 10px; padding: .45rem; box-shadow: var(--sh-sm); border: 1px solid var(--bd-default); flex-shrink: 0; } .qr-box img { width: 72px; height: 72px; display: block; border-radius: 6px; } .qr-details { display: flex; flex-direction: column; gap: .45rem; flex: 1; min-width: 180px; } .qr-dl-link { display: inline-flex; align-items: center; gap: .4rem; padding: .52rem .88rem; background: var(--ac-subtle); border: 1px solid var(--ac-border); border-radius: 9px; color: var(--ac); font-size: .73rem; font-weight: 700; text-decoration: none; transition: all .15s var(--ease); word-break: break-all; } .qr-dl-link:hover { border-color: var(--ac); } .qr-dl-link svg { width: 12px; height: 12px; flex-shrink: 0; } .qr-hint { font-size: .63rem; color: var(--tx-faint); line-height: 1.6; } /* ════════════════════════════════════════════════════ PROGRESS BAR ════════════════════════════════════════════════════ */ .progress-wrapper { background: var(--bg-elevated); border-radius: var(--r-xl); border: 1px solid var(--bd-default); padding: 2.5rem 2rem; text-align: center; animation: fadeUp .5s cubic-bezier(.22,1,.36,1) both; } .progress-icon { width: 64px; height: 64px; background: var(--ac); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; font-size: 1.7rem; animation: breathe 2s ease-in-out infinite; } @keyframes breathe { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.8;transform:scale(.96)} } .progress-title { font-weight: 800; font-size: 1.2rem; margin-bottom: .3rem; color: var(--tx-primary); } .progress-sub { font-size: .84rem; color: var(--tx-faint); margin-bottom: 1.75rem; } .progress-sub span { color: var(--ac); font-weight: 600; } .progress-track { background: var(--bg-muted); border-radius: 999px; height: 12px; overflow: hidden; margin-bottom: .6rem; } .progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--ac), var(--ac-hover), #a899ff, var(--ac)); background-size: 300% 100%; border-radius: 999px; transition: width .5s cubic-bezier(.4,0,.2,1); animation: shimmer 2.5s linear infinite; } @keyframes shimmer { to { background-position: -200% 0; } } .progress-labels { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .progress-label-side { font-size: .7rem; color: var(--tx-faint); } .progress-pct { font-weight: 900; font-size: 1.35rem; color: var(--ac); min-width: 55px; text-align: center; } .progress-steps { display: flex; flex-direction: column; gap: .5rem; text-align: left; max-width: 320px; margin: 0 auto; } .progress-step { display: flex; align-items: center; gap: .65rem; padding: .62rem .9rem; border-radius: 10px; background: var(--bg-subtle); border: 1.5px solid var(--bd-default); font-size: .8rem; color: var(--tx-faint); font-weight: 500; transition: all .35s var(--ease); } .progress-step.done { background: var(--green-bg); border-color: var(--green-bd); color: var(--green-tx); font-weight: 600; } .progress-step.active { background: var(--ac-subtle); border-color: var(--ac-border); color: var(--ac); font-weight: 600; } .step-ic { font-size: .9rem; flex-shrink: 0; min-width: 18px; text-align: center; } /* ════════════════════════════════════════════════════ PAGE SECTIONS ════════════════════════════════════════════════════ */ .section { padding: 4rem 0; } .section + .section { border-top: 1px solid var(--bd-default); } .section-eyebrow { display: inline-block; font-size: .68rem; font-weight: 700; color: var(--ac); text-transform: uppercase; letter-spacing: .14em; margin-bottom: .6rem; } .section-title { font-weight: 800; font-size: clamp(1.6rem, 3.5vw, 2.3rem); letter-spacing: -.04em; margin-bottom: .75rem; color: var(--tx-primary); line-height: 1.15; } .section-lead { font-size: 1.02rem; color: var(--tx-muted); max-width: 570px; line-height: 1.7; } /* ─── SORA INTRO ─── */ .sora-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; margin-top: 2.5rem; } .sora-intro-text h3 { font-weight: 700; font-size: 1.25rem; margin-bottom: .75rem; color: var(--tx-primary); } .sora-intro-text p { color: var(--tx-muted); margin-bottom: 1rem; line-height: 1.75; } .sora-intro-text p:last-child { margin-bottom: 0; } .feature-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; } .feature-pill { background: var(--ac-subtle); color: var(--ac); font-size: .73rem; font-weight: 600; padding: .28rem .78rem; border-radius: 999px; border: 1px solid var(--ac-border); } .stat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .stat-card { background: var(--bg-subtle); border: 1px solid var(--bd-default); border-radius: var(--r-md); padding: 1.25rem; transition: all .2s var(--ease); } .stat-card:hover { border-color: var(--ac-border); background: var(--ac-subtle); } .stat-card-num { font-weight: 900; font-size: 2rem; color: var(--ac); line-height: 1; margin-bottom: .2rem; } .stat-card-label { font-size: .77rem; color: var(--tx-faint); font-weight: 500; } .capabilities-list { list-style: none; display: flex; flex-direction: column; gap: .55rem; margin-top: 1.25rem; } .capabilities-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: .88rem; color: var(--tx-muted); padding: .72rem .95rem; background: var(--bg-subtle); border-radius: 10px; border: 1px solid var(--bd-default); transition: all .18s var(--ease); } .capabilities-list li:hover { border-color: var(--ac-border); background: var(--ac-subtle); } .cap-icon { font-size: 1.05rem; flex-shrink: 0; margin-top: .05rem; } .cap-text strong { display: block; font-weight: 600; color: var(--tx-primary); margin-bottom: .1rem; font-size: .88rem; } /* ─── HOW TO STEPS ─── */ .steps-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(215px,1fr)); gap: 1.5rem; margin-top: 2rem; } .step-item { display: flex; flex-direction: column; gap: .75rem; } .step-num { width: 50px; height: 50px; background: var(--tx-primary); color: var(--bg-base); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.45rem; } .step-item h3 { font-weight: 700; font-size: 1.03rem; color: var(--tx-primary); } .step-item p { font-size: .86rem; color: var(--tx-muted); line-height: 1.65; } /* ─── TOOLS GRID ─── */ .tools-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(255px,1fr)); gap: 1rem; margin-top: 2rem; } .tool-card { background: var(--bg-elevated); border: 1px solid var(--bd-default); border-radius: var(--r-xl); padding: 1.5rem; text-decoration: none; color: inherit; transition: all .2s var(--ease); display: flex; flex-direction: column; gap: .7rem; } .tool-card:hover { border-color: var(--ac-border); box-shadow: var(--sh-md); transform: translateY(-2px); } .tool-card-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .tool-card h3 { font-weight: 700; font-size: .97rem; color: var(--tx-primary); } .tool-card p { font-size: .82rem; color: var(--tx-faint); line-height: 1.6; flex: 1; } .tool-card-arrow { margin-top: auto; font-size: .8rem; color: var(--ac); font-weight: 600; } /* ─── WHY GRID ─── */ .why-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(235px,1fr)); gap: 1rem; margin-top: 2rem; } .why-item { display: flex; align-items: flex-start; gap: .85rem; padding: 1.2rem; background: var(--bg-elevated); border: 1px solid var(--bd-default); border-radius: var(--r-md); transition: all .2s var(--ease); } .why-item:hover { border-color: var(--ac-border); background: var(--ac-subtle); } .why-item svg { width: 21px; height: 21px; color: var(--green); flex-shrink: 0; margin-top: .12rem; } .why-item strong { display: block; font-weight: 700; margin-bottom: .2rem; font-size: .93rem; color: var(--tx-primary); } .why-item p { font-size: .83rem; color: var(--tx-faint); line-height: 1.55; } /* ─── INVITE CODES ─── */ .codes-panel { background: var(--bg-elevated); border: 1px solid var(--bd-default); border-radius: var(--r-xl); padding: 2rem; margin-top: 2rem; } .codes-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; } .codes-badge { display: inline-flex; align-items: center; gap: .4rem; background: var(--green-bg); color: var(--green-tx); font-size: .73rem; font-weight: 700; padding: .28rem .78rem; border-radius: 999px; border: 1px solid var(--green-bd); } .codes-badge::before { content: ''; width: 6px; height: 6px; background: var(--green); border-radius: 50%; } .countdown-box { display: flex; align-items: center; gap: .7rem; background: var(--bg-subtle); border: 1px solid var(--bd-default); border-radius: var(--r-md); padding: .55rem .95rem; } .countdown-ring-wrap { position: relative; width: 40px; height: 40px; } .countdown-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .73rem; font-weight: 700; color: var(--tx-secondary); } .countdown-text { font-size: .8rem; font-weight: 600; color: var(--tx-muted); } .code-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--bg-subtle); border: 1px solid var(--bd-default); border-radius: var(--r-md); padding: .95rem 1.2rem; margin-bottom: .6rem; transition: all .2s var(--ease); } .code-card:hover { border-color: var(--ac-border); background: var(--ac-subtle); } .code-card:last-child { margin-bottom: 0; } .code-val { font-family: var(--mono); font-size: .93rem; font-weight: 700; color: var(--tx-primary); } .code-copy-btn { display: flex; align-items: center; gap: .35rem; padding: .48rem .95rem; background: var(--ac); color: #fff; border: none; border-radius: 8px; font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .2s var(--ease); font-family: var(--font); flex-shrink: 0; } .code-copy-btn:hover { background: var(--ac-hover); transform: translateY(-1px); } .code-copy-btn.copied { background: var(--green); } .code-copy-btn svg { width: 13px; height: 13px; } .skeleton { height: 60px; background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--bg-muted) 50%, var(--bg-subtle) 75%); background-size: 200% 100%; animation: skel 1.4s infinite; border-radius: var(--r-md); margin-bottom: .6rem; } @keyframes skel { to { background-position: -200% 0; } } /* ─── FAQ ─── */ .faq-list { margin-top: 2rem; max-width: 760px; } .faq-item { border-bottom: 1px solid var(--bd-default); } .faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 1.05rem 0; cursor: pointer; font-weight: 600; font-size: .93rem; color: var(--tx-primary); transition: color .18s var(--ease); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 1.3rem; color: var(--ac); line-height: 1; transition: transform .25s var(--ease); flex-shrink: 0; margin-left: 1rem; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item summary:hover { color: var(--ac); } .faq-item p { padding-bottom: 1.05rem; color: var(--tx-muted); line-height: 1.75; font-size: .91rem; } /* ─── BLOG GRID ─── */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(275px,1fr)); gap: 1.5rem; margin-top: 2rem; } .blog-card { background: var(--bg-elevated); border: 1px solid var(--bd-default); border-radius: var(--r-xl); overflow: hidden; text-decoration: none; color: inherit; transition: all .25s var(--ease); display: flex; flex-direction: column; } .blog-card:hover { border-color: var(--ac-border); box-shadow: var(--sh-md); transform: translateY(-3px); } .blog-card-img img { width: 100%; height: 172px; object-fit: cover; display: block; } .blog-card-body { padding: 1.2rem; flex: 1; display: flex; flex-direction: column; gap: .48rem; } .blog-badge { display: inline-block; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .23rem .62rem; border-radius: 999px; margin-bottom: .12rem; } .blog-badge-tutorial { background: var(--ac-subtle); color: var(--ac); } .blog-badge-guide { background: var(--green-bg); color: var(--green-tx); } .blog-card h3 { font-weight: 700; font-size: .95rem; color: var(--tx-primary); line-height: 1.35; } .blog-card p { font-size: .81rem; color: var(--tx-faint); line-height: 1.6; flex: 1; } .blog-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--bd-default); font-size: .73rem; } .blog-meta-time { color: var(--tx-faint); } .blog-meta-link { color: var(--ac); font-weight: 600; } /* ─── CTA BAND ─── */ .cta-band { background: linear-gradient(135deg, var(--tx-primary) 0%, var(--tx-secondary) 100%); border-radius: var(--r-xl); padding: 3rem 2rem; text-align: center; color: #fff; margin: 2rem 0; } .cta-band h2 { font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: .75rem; letter-spacing: -.04em; } .cta-band p { color: rgba(255,255,255,.6); margin-bottom: 1.75rem; font-size: 1rem; } /* ─── FOOTER ─── */ .site-footer { background: var(--tx-primary); color: var(--tx-faint); padding: 2rem 0; border-radius: 20px 20px 0 0; margin-top: 4rem; } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-links { display: flex; gap: 1.5rem; } .footer-links a { color: var(--tx-faint); text-decoration: none; font-size: .84rem; transition: color .18s; } .footer-links a:hover { color: #fff; } /* ════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════ */ @media (max-width: 768px) { .header-nav { display: none; } .menu-btn { display: flex; } .downloader-wrap { margin-top: -2rem; } .dl-input-row { flex-direction: column; } .hero-band { padding: 3.5rem 0 3rem; } .section { padding: 2.5rem 0; } .sora-intro-grid { grid-template-columns: 1fr; gap: 1.5rem; } .result-body { grid-template-columns: 1fr; } .format-grid { grid-template-columns: 1fr 1fr; } .stat-cards { grid-template-columns: 1fr 1fr; } .footer-inner { flex-direction: column; } .footer-links { flex-direction: column; gap: .5rem; } .result-bottom { padding: 1rem 1.2rem; } .progress-wrapper { padding: 2rem 1.2rem; } } @media (max-width: 480px) { .hero-band h1 { font-size: 1.85rem; } .cta-band { padding: 2rem 1.25rem; } .downloader-card { padding: 1.25rem; } .format-grid { grid-template-columns: 1fr; } .qr-block { flex-direction: column; } } /* ─── Capabilities compare (inline grid) ─── */ .capabilities-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 560px) { .capabilities-compare { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════ WHAT IS SORA — Rich info section (rewritten) ════════════════════════════════════════════════════ */ /* ── Section base ── */ .section { padding: 4rem 0; } .section + .section { border-top: 1px solid var(--bd-default); } .section-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--ac); background: var(--ac-subtle); border: 1px solid var(--ac-border); border-radius: 999px; padding: 4px 12px; margin-bottom: .85rem; } .section-eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ac); flex-shrink: 0; } .section-title { font-weight: 800; font-size: clamp(1.65rem, 3.5vw, 2.35rem); letter-spacing: -.04em; line-height: 1.12; color: var(--tx-primary); margin-bottom: .65rem; } .section-lead { font-size: .97rem; color: var(--tx-muted); line-height: 1.78; max-width: 560px; margin-bottom: 2rem; } /* ── Stat strip ── */ .stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; margin-bottom: 2.25rem; } @media (max-width: 600px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } } .stat-card { background: var(--bg-surface); border: 1px solid var(--bd-default); border-radius: var(--r-lg); padding: 1.1rem 1.25rem; transition: border-color .2s var(--ease), transform .2s var(--ease); } .stat-card:hover { border-color: var(--ac-border); transform: translateY(-2px); } .stat-card-num { font-size: 1.85rem; font-weight: 900; color: var(--ac); letter-spacing: -.04em; line-height: 1; } .stat-card-label { font-size: .72rem; color: var(--tx-faint); font-weight: 500; margin-top: .3rem; } /* ── Tab navigation ── */ .sora-tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 2rem; padding: .25rem; background: var(--bg-subtle); border-radius: var(--r-lg); width: fit-content; } .sora-tab { padding: .42rem 1.05rem; border-radius: var(--r-md); font-size: .82rem; font-weight: 600; border: none; background: transparent; color: var(--tx-muted); cursor: pointer; transition: all .18s var(--ease); white-space: nowrap; font-family: var(--font); } .sora-tab:hover { color: var(--tx-primary); } .sora-tab.active { background: var(--bg-elevated); color: var(--ac); box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 0 0 1px var(--bd-default); } /* ── Tab panels ── */ .sora-panel { display: none; animation: soraFadeIn .3s var(--ease); } .sora-panel.active { display: block; } @keyframes soraFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ── Two-column grid ── */ .sora-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; } @media (max-width: 768px) { .sora-info-grid { grid-template-columns: 1fr; gap: 1.5rem; } } /* ── Info text block ── */ .sora-info-text h3 { font-weight: 700; font-size: 1.18rem; color: var(--tx-primary); letter-spacing: -.025em; margin-bottom: .7rem; } .sora-info-text p { font-size: .88rem; color: var(--tx-muted); line-height: 1.82; margin-bottom: .8rem; } .sora-info-text p:last-of-type { margin-bottom: 0; } .sora-info-text strong { color: var(--tx-secondary); font-weight: 600; } /* ── Feature pills ── */ .feature-pills { display: flex; flex-wrap: wrap; gap: .38rem; margin-top: 1rem; } .feature-pill { background: var(--ac-subtle); color: var(--ac); font-size: .71rem; font-weight: 600; padding: .28rem .78rem; border-radius: 999px; border: 1px solid var(--ac-border); } /* ── Capabilities list ── */ .capabilities-list { list-style: none; display: flex; flex-direction: column; gap: .45rem; margin-top: .5rem; } .capabilities-list li { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem .95rem; background: var(--bg-subtle); border: 1px solid var(--bd-default); border-radius: var(--r-md); font-size: .84rem; color: var(--tx-muted); line-height: 1.55; transition: background .18s var(--ease), border-color .18s var(--ease); } .capabilities-list li:hover { background: var(--ac-subtle); border-color: var(--ac-border); } .cap-icon { font-size: 1rem; flex-shrink: 0; margin-top: .05rem; } .cap-text strong { display: block; font-weight: 600; color: var(--tx-primary); font-size: .85rem; margin-bottom: 2px; } /* ── How-it-works steps ── */ .sora-how-steps { display: flex; flex-direction: column; gap: .55rem; margin-top: .5rem; } .sora-how-step { display: flex; align-items: flex-start; gap: .85rem; padding: .9rem 1rem; background: var(--bg-subtle); border: 1px solid var(--bd-default); border-radius: var(--r-md); transition: background .18s var(--ease), border-color .18s var(--ease); } .sora-how-step:hover { background: var(--ac-subtle); border-color: var(--ac-border); } .sora-how-step-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--ac); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; margin-top: 1px; } .sora-how-step-body strong { display: block; font-size: .87rem; font-weight: 700; color: var(--tx-primary); margin-bottom: 3px; } .sora-how-step-body p { font-size: .8rem; color: var(--tx-muted); line-height: 1.65; } /* ── Capabilities detail grid ── */ .cap-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: .7rem; margin-top: 1.25rem; } .cap-detail-card { padding: 1.1rem 1.15rem; background: var(--bg-subtle); border: 1px solid var(--bd-default); border-radius: var(--r-lg); transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); } .cap-detail-card:hover { border-color: var(--ac-border); background: var(--ac-subtle); transform: translateY(-2px); } .cap-detail-card-icon { font-size: 1.35rem; margin-bottom: .55rem; display: block; } .cap-detail-card h4 { font-weight: 700; font-size: .87rem; color: var(--tx-primary); margin-bottom: .3rem; } .cap-detail-card p { font-size: .77rem; color: var(--tx-muted); line-height: 1.6; } /* ── Strengths vs Limitations ── */ .capabilities-compare-wrap { margin-top: 1.75rem; background: var(--bg-elevated); border: 1px solid var(--bd-default); border-radius: var(--r-xl); overflow: hidden; } .capabilities-compare-head { padding: .85rem 1.25rem; border-bottom: 1px solid var(--bd-default); font-weight: 700; font-size: .88rem; color: var(--tx-primary); } .capabilities-compare { display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 520px) { .capabilities-compare { grid-template-columns: 1fr; } } .capabilities-compare > div { padding: 1.25rem; } .capabilities-compare > div + div { border-left: 1px solid var(--bd-default); } @media (max-width: 520px) { .capabilities-compare > div + div { border-left: none; border-top: 1px solid var(--bd-default); } } .compare-col-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .75rem; } .compare-col-label.good { color: var(--green); } .compare-col-label.warn { color: var(--amber-tx); } .compare-items { list-style: none; display: flex; flex-direction: column; gap: .4rem; } .compare-items li { font-size: .82rem; color: var(--tx-muted); display: flex; align-items: center; gap: .5rem; } .compare-items li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; } .good .compare-items li::before { background: var(--green); } .warn .compare-items li::before { background: var(--amber-tx); } /* ── Safety list ── */ .safety-list { display: flex; flex-direction: column; gap: .5rem; } .safety-item { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; background: var(--bg-subtle); border: 1px solid var(--bd-default); border-radius: var(--r-md); font-size: .84rem; color: var(--tx-muted); transition: background .2s var(--ease), border-color .2s var(--ease); } .safety-item:hover { background: var(--green-bg); border-color: var(--green-bd); } .safety-item:hover .safety-item strong { color: var(--green-tx); } .safety-item-icon { font-size: 1.05rem; flex-shrink: 0; margin-top: 2px; } .safety-item strong { display: block; font-size: .86rem; font-weight: 700; color: var(--tx-primary); margin-bottom: 3px; transition: color .2s var(--ease); } .safety-item p { font-size: .79rem; line-height: 1.6; } /* ── Access & Countries ── */ .access-badge { display: inline-flex; align-items: center; gap: .5rem; background: var(--amber-bg); color: var(--amber-tx); border: 1px solid var(--amber-bd); border-radius: var(--r-md); padding: .6rem 1rem; font-size: .82rem; font-weight: 600; margin-bottom: 1.1rem; } .vietnam-note { margin-top: 1rem; padding: .85rem 1.1rem; background: var(--green-bg); border: 1px solid var(--green-bd); border-radius: var(--r-md); font-size: .82rem; color: var(--green-tx); font-weight: 500; line-height: 1.65; } .countries-label { font-size: .68rem; font-weight: 700; color: var(--tx-faint); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .75rem; } .countries-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: .45rem; margin-bottom: 1rem; } .country-chip { display: flex; align-items: center; gap: .42rem; padding: .45rem .75rem; background: var(--bg-subtle); border: 1px solid var(--bd-default); border-radius: var(--r-sm); font-size: .78rem; font-weight: 500; color: var(--tx-secondary); transition: all .15s var(--ease); cursor: default; } .country-chip:hover { border-color: var(--ac-border); background: var(--ac-subtle); color: var(--ac); } .country-flag { font-size: .9rem; } .countries-note { padding: .8rem 1.1rem; background: var(--info-bg); border: 1px solid var(--info-bd); border-radius: var(--r-md); font-size: .79rem; color: var(--info-tx); line-height: 1.65; } /* ── Responsive ── */ @media (max-width: 768px) { .section { padding: 2.5rem 0; } .stat-cards { margin-bottom: 1.75rem; } .sora-tabs { width: 100%; } .sora-tab { flex: 1; text-align: center; } } @media (max-width: 480px) { .sora-tab { font-size: .76rem; padding: .4rem .65rem; } } /* ════════════════════════════════════════════════════ HOW-TO GUIDE SECTION — Responsive ════════════════════════════════════════════════════ */ .guide-notice { background: var(--amber-bg); border: 1px solid var(--amber-bd); border-radius: var(--r-md); padding: 1rem 1.1rem; font-size: .83rem; color: var(--amber-tx); margin-bottom: 2rem; line-height: 1.7; } .guide-notice a { color: var(--ac); font-weight: 600; } .guide-step { margin-bottom: 2rem; } .guide-step-header { display: flex; align-items: center; gap: .85rem; margin-bottom: .75rem; } .guide-step-num { width: 40px; height: 40px; border-radius: 11px; background: var(--tx-primary); color: var(--bg-base); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; flex-shrink: 0; } .guide-step-header h3 { font-weight: 700; font-size: 1.15rem; color: var(--tx-primary); margin: 0; } .guide-step > p { font-size: .88rem; color: var(--tx-muted); line-height: 1.75; margin-bottom: .85rem; } .guide-divider { border: none; border-top: 1px solid var(--bd-default); margin: 1.25rem 0; } /* 2-col substep: text + image side-by-side */ .guide-substep { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; margin: 1rem 0; } .guide-substep.reverse { direction: rtl; } .guide-substep.reverse > * { direction: ltr; } .guide-substep-text h4 { font-weight: 700; font-size: .97rem; margin-bottom: .55rem; color: var(--tx-primary); } .guide-substep-text p { font-size: .85rem; color: var(--tx-muted); line-height: 1.75; } .guide-img-wrap { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--bd-default); background: var(--bg-subtle); } .guide-img-wrap img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; } .guide-img-center { margin: 1rem auto; max-width: 540px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--bd-default); } .guide-img-center img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; } /* Format cards */ .guide-formats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin: 1rem 0; } .guide-format-card { background: var(--bg-subtle); border: 1px solid var(--bd-default); border-radius: var(--r-md); padding: 1rem 1.1rem; transition: border-color .2s var(--ease), background .2s var(--ease); } .guide-format-card:hover { border-color: var(--ac-border); background: var(--ac-subtle); } .guide-format-card h4 { font-weight: 700; font-size: .9rem; margin-bottom: .4rem; color: var(--tx-primary); } .guide-format-card p { font-size: .8rem; color: var(--tx-faint); line-height: 1.6; margin: 0; } .guide-notice-box { background: var(--amber-bg); border: 1px solid var(--amber-bd); border-radius: var(--r-lg); padding: 1.25rem 1.4rem; margin-top: 2rem; } .guide-notice-box h3 { font-weight: 700; font-size: 1rem; color: var(--amber-tx); margin-bottom: .6rem; } .guide-notice-box p { font-size: .83rem; color: var(--amber-tx); line-height: 1.7; margin-bottom: .5rem; } .guide-notice-box p:last-child { margin-bottom: 0; } /* ── Responsive ── */ @media (max-width: 640px) { .guide-substep { grid-template-columns: 1fr; gap: 1rem; } .guide-substep.reverse { direction: ltr; } .guide-formats { grid-template-columns: 1fr; } } /* ─── CSS VARIABLES BỔ SUNG ─── */ :root { /* Nút secondary (dùng trong .download-another-btn) */ --btn-secondary-bg: rgba(0, 0, 0, .06); --btn-secondary-color: var(--tx-secondary); --btn-secondary-border: var(--bd-default); --btn-secondary-hover-bg: var(--bg-muted); } [data-theme="dark"] { --btn-secondary-bg: rgba(255, 255, 255, .07); --btn-secondary-color: var(--tx-secondary); --btn-secondary-border: var(--bd-strong); --btn-secondary-hover-bg: rgba(255, 255, 255, .13); } /* ════════════════════════════════════════════════════ PREVIEW FALLBACK (hiển thị khi video không load được) ════════════════════════════════════════════════════ */ /* Ẩn fallback mặc định; chỉ hiện khi preview có lỗi */ .result-preview .preview-fallback { display: none; } /* Khi JS gắn class preview-error lên .result-preview */ .result-preview.preview-error video { display: none; } .result-preview.preview-error .preview-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-height: 220px; padding: 2rem 1.25rem; color: var(--tx-faint); text-align: center; } .result-preview.preview-error .preview-fallback svg { color: var(--tx-faint); opacity: .55; } .result-preview.preview-error .preview-fallback p { font-weight: 600; font-size: .9rem; color: var(--tx-muted); margin: 0; } .result-preview.preview-error .preview-fallback span { font-size: .77rem; color: var(--tx-faint); } /* ════════════════════════════════════════════════════ LINK BLOCK (wrapper mỗi section: Direct Link / CDN / QR) ════════════════════════════════════════════════════ */ .link-block { display: flex; flex-direction: column; gap: .4rem; } /* .dl-section-label đã có style, chỉ đảm bảo margin-bottom reset về 0 vì nó nằm trong .link-block thay vì đứng độc lập */ .link-block .dl-section-label { margin-bottom: 0; } /* ════════════════════════════════════════════════════ DOWNLOAD ANOTHER VIDEO BUTTON ════════════════════════════════════════════════════ */ .download-another-wrapper { display: flex; justify-content: center; padding: 1.25rem 1.5rem .9rem; border-top: 1px solid var(--bd-default); background: var(--bg-subtle); } .download-another-btn { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; border: 1.5px solid var(--btn-secondary-border); outline: none; padding: .72rem 1.6rem; border-radius: 9999px; font-size: .9rem; font-weight: 600; font-family: var(--font); letter-spacing: .01em; background: var(--btn-secondary-bg); color: var(--btn-secondary-color); transition: background .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .download-another-btn:hover { background: var(--btn-secondary-hover-bg); border-color: var(--bd-strong); box-shadow: var(--sh-sm); transform: translateY(-1px); } .download-another-btn:active { transform: scale(.97); box-shadow: none; } .download-another-btn svg { width: 16px; height: 16px; flex-shrink: 0; } /* ════════════════════════════════════════════════════ RESPONSIVE — bổ sung cho các class mới ════════════════════════════════════════════════════ */ @media (max-width: 480px) { .download-another-wrapper { padding: 1rem 1rem .75rem; } .download-another-btn { width: 100%; justify-content: center; font-size: .88rem; padding: .7rem 1.1rem; } } /* ── Size grid section ───────────────────────────────────────── */ .img-sizes-section { padding: 1.25rem 1.5rem; border-top: 1px solid var(--border, #1e293b); } .img-size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } /* Card từng size */ .img-size-card { cursor: pointer; border-radius: 10px; overflow: hidden; border: 1px solid var(--border, #1e293b); background: var(--bg-card, #0f172a); transition: border-color .2s, transform .2s, box-shadow .2s; user-select: none; } .img-size-card:hover { border-color: #3b82f6; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59,130,246,.25); } .img-size-card:active { transform: translateY(0); } /* Thumbnail wrapper */ .img-size-thumb-wrap { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #0f172a; } .img-size-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .img-size-card:hover .img-size-thumb-wrap img { transform: scale(1.06); } /* Overlay khi hover */ .img-size-overlay { position: absolute; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; } .img-size-card:hover .img-size-overlay { opacity: 1; } .img-size-open-icon { font-size: 1.5rem; } /* Lỗi thumbnail */ .img-thumb-err { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--tx-faint, #475569); } /* Label size + hint */ .img-size-label { padding: .35rem .5rem .1rem; font-size: .78rem; font-weight: 700; color: var(--tx-main, #e2e8f0); text-align: center; } .img-size-hint { padding: 0 .5rem .4rem; font-size: .65rem; color: var(--tx-faint, #64748b); text-align: center; } /* ── Tip box ─────────────────────────────────────────────────── */ .img-save-tip { display: flex; align-items: flex-start; gap: .5rem; padding: .65rem .85rem; border-radius: 8px; background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.2); font-size: .78rem; color: #93c5fd; line-height: 1.5; } .img-save-tip strong { color: #bfdbfe; } /* ── Download Another Button ─────────────────────────────────── */ .download-another-wrapper { padding: 1.25rem 1.5rem; border-top: 1px solid var(--border, #1e293b); display: flex; justify-content: center; } .download-another-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.75rem; border: none; border-radius: 99px; font-size: .9rem; font-weight: 600; cursor: pointer; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; /* Gradient nền */ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%); color: #fff; box-shadow: 0 4px 15px rgba(99, 102, 241, .4); } /* Shine effect */ .download-another-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60% ); transform: translateX(-100%); transition: transform .5s; } .download-another-btn:hover::before { transform: translateX(100%); } .download-another-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(99, 102, 241, .55); } .download-another-btn:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(99, 102, 241, .35); } /* Icon rotate on hover */ .download-another-btn svg, .download-another-btn .btn-icon { transition: transform .4s; } .download-another-btn:hover svg, .download-another-btn:hover .btn-icon { transform: rotate(180deg); } /* ============================================================ download2.css — styles cho download2.js (backup engine) Thêm vào file CSS chung của dự án. ============================================================ */ /* ── Retry Panel ─────────────────────────────────────────── */ .retry-panel { background: linear-gradient(135deg, #f0f4ff, #e8eeff); border: 2px solid #c7d2fe; border-radius: 20px; padding: 2rem; text-align: center; animation: fadeInUp 0.4s ease-out; } .retry-spinner { width: 64px; height: 64px; margin: 0 auto 1.25rem; border: 5px solid #c7d2fe; border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.9s linear infinite; } .retry-title { font-size: 1.2rem; font-weight: 700; color: var(--color-gray-900); margin-bottom: 0.4rem; } .retry-subtitle { font-size: 0.95rem; color: var(--color-gray-600); margin-bottom: 1.25rem; } /* ── Retry Progress Bar ──────────────────────────────────── */ .retry-bar-wrap { background: #dde4ff; border-radius: 20px; height: 10px; width: 100%; max-width: 380px; margin: 0 auto 0.75rem; overflow: hidden; } .retry-bar-fill { height: 10px; border-radius: 20px; background: linear-gradient(90deg, var(--color-primary), #818cf8); transition: width 0.6s ease; } /* ── Retry Meta (attempt counter, countdown) ─────────────── */ .retry-meta { font-size: 0.82rem; color: var(--color-gray-500); display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .retry-meta span { background: white; border: 1px solid #c7d2fe; padding: 0.25rem 0.75rem; border-radius: 20px; font-weight: 600; } /* ── Rate-limit warning box ──────────────────────────────── */ .retry-rate-limit { margin-top: 1rem; background: #fffbeb; border: 1px solid #fbbf24; border-radius: 10px; padding: 0.6rem 1rem; font-size: 0.875rem; color: #92400e; font-weight: 600; line-height: 1.6; } /* ── Video Preview Container ─────────────────────────────── */ .video-preview-container { background: linear-gradient(135deg, #f0f9ff, #e0e7ff); border: 2px solid var(--color-primary-light); border-radius: 24px; padding: 2.5rem; margin: 2rem 0; box-shadow: var(--shadow-xl); animation: fadeInUp 0.6s ease-out; } .video-preview-wrapper { position: relative; max-width: 800px; margin: 2rem auto; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-2xl); transition: transform 0.3s ease; } .video-preview-wrapper:hover { transform: scale(1.02); } .video-preview-wrapper video { width: 100%; height: auto; display: block; } .preview-badge { position: absolute; top: 20px; left: 20px; background: var(--color-success); color: white; padding: 0.75rem 1.5rem; border-radius: 25px; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; box-shadow: var(--shadow-lg); z-index: 10; } /* ── Download Button ─────────────────────────────────────── */ .download-main-btn { display: inline-flex; align-items: center; gap: 1rem; background: linear-gradient(135deg, var(--color-success), var(--color-success-hover)); color: white; font-size: 1.5rem; font-weight: 700; padding: 1.5rem 3rem; border-radius: 20px; text-decoration: none; box-shadow: var(--shadow-xl); transition: all 0.3s ease; border: none; cursor: pointer; } .download-main-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-2xl); } .download-main-btn svg { width: 28px; height: 28px; flex-shrink: 0; } /* ── Direct Link Section ─────────────────────────────────── */ .direct-link-section { background: var(--color-gray-50); border: 2px solid var(--color-gray-200); border-radius: 16px; padding: 2rem; margin-top: 2rem; } .direct-link-section h4 { color: var(--color-gray-900); font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .link-display { background: white; border: 2px solid var(--color-gray-300); border-radius: 12px; padding: 1.25rem; color: var(--color-gray-700); font-family: 'Monaco', 'Courier New', monospace; font-size: 0.9rem; word-break: break-all; line-height: 1.6; } /* ── Keyframes (thêm nếu chưa có trong CSS chung) ───────── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 768px) { .video-preview-container { padding: 1.5rem; } .video-preview-wrapper { max-width: 100%; margin: 1rem auto; } .download-main-btn { font-size: 1.25rem; padding: 1.25rem 2rem; width: 100%; justify-content: center; } .retry-panel { padding: 1.5rem 1rem; } .retry-meta { gap: 0.5rem; } .direct-link-section { padding: 1.25rem; } } @media (max-width: 480px) { .download-main-btn { font-size: 1.05rem; padding: 1rem 1.25rem; } .retry-bar-wrap { max-width: 100%; } .preview-badge { font-size: 0.75rem; padding: 0.5rem 1rem; top: 10px; left: 10px; } }