/* ===================================================== CleanFocus Landing Page Themes: Light (front) / Gradient (back / app theme) ===================================================== */ /* ---------- Reset & Base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } html, body { height: 100%; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* flip-mode: applied only on index.html via */ body.flip-mode { overflow: hidden; } /* ---------- Stage (wrapper only, no 3D context needed) ---------- */ .stage { position: fixed; inset: 0; overflow: hidden; } /* ---------- Faces ---------- */ .face { position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; transform-origin: left center; will-change: transform; } .face--back { background: linear-gradient(160deg, #ffb347 0%, #ff7043 40%, #f4406a 75%, #e91e8c 100%); color: #fff; } /* ---------- Crossfade ---------- */ .face--front { z-index: 2; background: #fff; transition: opacity 0.9s ease; /* visibility は is-hidden 解除時に即座に visible へ戻す（遅延なし） */ } .face--back { z-index: 1; } .face--front.is-hidden { opacity: 0; pointer-events: none; overflow: hidden; visibility: hidden; /* opacity が 0.9s かけてフェード → その後 visibility を hidden に */ transition: opacity 0.9s ease, visibility 0s linear 0.9s; } /* ---------- Container ---------- */ .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 24px; } /* ===================================================== HEADER ===================================================== */ .header { position: sticky; top: 0; z-index: 100; height: 64px; display: flex; align-items: center; } .header--light { background: rgba(255,255,255,0.92); border-bottom: 1px solid #eee; backdrop-filter: blur(12px); } .header--dark { background: rgba(0,0,0,0.12); border-bottom: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(12px); } .header__inner { display: flex; align-items: center; gap: 32px; width: 100%; } /* Logo */ .logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; text-decoration: none; color: #1a1a2e; flex-shrink: 0; } .logo--white { color: #fff; } .logo img { border-radius: 6px; } /* Nav */ .nav { display: flex; gap: 4px; flex: 1; } .nav a { text-decoration: none; font-size: 14px; font-weight: 500; color: #555; padding: 6px 12px; border-radius: 8px; transition: background 0.15s, color 0.15s; } .nav a:hover { background: #f0f0f5; color: #1a1a2e; } .nav--white a { color: rgba(255,255,255,0.85); } .nav--white a:hover { background: rgba(255,255,255,0.15); color: #fff; } /* Header actions */ .header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Lang switch */ .lang-switch { padding: 6px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; font-weight: 500; background: #fff; color: #333; cursor: pointer; outline: none; transition: border-color 0.15s; } .lang-switch:focus { border-color: #ff7043; } .lang-switch--white { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.4); color: #fff; } .lang-switch--white option { background: #e05030; color: #fff; } /* ===================================================== BUTTONS ===================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: all 0.2s ease; white-space: nowrap; } .btn--sm { padding: 7px 14px; font-size: 13px; border-radius: 8px; } .btn--lg { padding: 14px 28px; font-size: 17px; border-radius: 12px; } .btn--accent { background: linear-gradient(135deg, #ff7043, #f4406a); color: #fff; } .btn--accent:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(244,64,106,0.35); } .btn--white { background: #fff; color: #e05030; } .btn--white:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); } .btn--outline-dark { background: transparent; color: #333; border-color: #ccc; } .btn--outline-dark:hover { border-color: #999; background: #f5f5f5; } .btn--ghost { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.4); } .btn--ghost:hover { background: rgba(255,255,255,0.25); } /* ===================================================== HERO ===================================================== */ .hero { padding: 80px 0 72px; } .hero--light { background: #fff; } .hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ff7043; margin-bottom: 14px; padding: 4px 12px; background: rgba(255,112,67,0.1); border-radius: 20px; } .eyebrow--white { color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.2); } .hero__copy h1 { font-size: clamp(28px, 3.5vw, 48px); font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; color: #1a1a2e; margin-bottom: 18px; } .hero--dark .hero__copy h1 { color: #fff; } .hero__sub { font-size: 17px; color: #555; margin-bottom: 28px; line-height: 1.75; } .hero--dark .hero__sub { color: rgba(255,255,255,0.85); } .hero__actions { display: flex; gap: 12px; flex-wrap: wrap; } /* Mock popup card — mirrors the real extension popup UI */ .hero__visual { position: relative; display: flex; align-items: center; justify-content: center; } /* Pattern toast — absolutely positioned below mock popup, doesn't affect layout height */ .pattern-toast { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); width: 240px; background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 6px 24px rgba(244, 64, 106, 0.15); border: 1.5px solid rgba(244, 64, 106, 0.18); text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.35s ease, transform 0.35s ease; } .pattern-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .pattern-toast__steps { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; } .pt-step { display: flex; flex-direction: column; align-items: center; gap: 3px; } .pt-target { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ffb347, #f4406a); border-radius: 8px; padding: 4px 7px; color: #fff; font-weight: 700; white-space: nowrap; } .pt-target--icon { padding: 4px; border-radius: 50%; } .pt-target--icon img { display: block; border-radius: 50%; } .pt-target--title { font-size: 9px; } .pt-target--timer { font-size: 11px; letter-spacing: 1px; } .pt-target--phase { font-size: 13px; } .pt-count { font-size: 10px; font-weight: 700; color: #f4406a; } .pattern-toast__arrow { font-size: 11px; color: #ccc; margin-top: -10px; } .pattern-toast__sub { font-size: 11px; color: #888; margin: 0; line-height: 1.55; } .mock-popup { border-radius: 20px; padding: 22px 18px 18px; width: 100%; max-width: 240px; text-align: center; color: #fff; font-family: inherit; } .mock-popup--gradient { background: linear-gradient(160deg, #ffb347 0%, #ff7043 40%, #f4406a 75%, #e91e8c 100%); box-shadow: 0 20px 60px rgba(244,64,106,0.38); } .mock-popup--glass { background: rgba(255,255,255,0.15); border: 1.5px solid rgba(255,255,255,0.35); backdrop-filter: blur(14px); box-shadow: 0 10px 40px rgba(0,0,0,0.12); } .mock-popup__icon { width: 52px; height: 52px; margin: 0 auto 8px; } .mock-popup__icon img { width: 100%; height: 100%; border-radius: 50%; display: block; } .mock-popup__title { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 10px; letter-spacing: 0.2px; } .mock-popup__phase { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 14px; background: rgba(255,255,255,0.28); border-radius: 20px; border: 1px solid rgba(255,255,255,0.45); margin-bottom: 12px; } .mock-popup__phase--glass { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.35); } .mock-popup__timer { font-size: 46px; font-weight: 700; letter-spacing: 2px; background: rgba(255,255,255,0.3); border-radius: 14px; border: 1.5px solid rgba(255,255,255,0.5); padding: 12px 10px; margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,0.15); line-height: 1; } .mock-popup__timer--glass { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); } .mock-popup__btn-primary { width: 100%; padding: 10px 8px; background: rgba(255,255,255,0.92); color: #e04070; font-size: 13px; font-weight: 700; border: none; border-radius: 10px; margin-bottom: 8px; cursor: default; letter-spacing: 0.1px; } .mock-popup__btn-primary--glass { background: rgba(255,255,255,0.85); color: #c0306a; } .mock-popup__btns-secondary { display: flex; gap: 8px; } .mock-popup__btn-secondary { flex: 1; padding: 8px 4px; background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 600; border: 1px solid rgba(255,255,255,0.35); border-radius: 9px; cursor: default; } /* ===================================================== SECTIONS (common) ===================================================== */ .section { padding: 80px 0; } .section--soft { background: #f7f8fc; } .section--glass { background: rgba(0,0,0,0.06); } .section--glass-dark { background: rgba(0,0,0,0.1); } .section-title { font-size: clamp(22px, 2.8vw, 34px); font-weight: 800; color: #1a1a2e; margin-bottom: 16px; letter-spacing: -0.02em; text-align: center; } .section-title--white { color: #fff; } .section-lead { font-size: 17px; color: #666; text-align: center; margin-bottom: 48px; line-height: 1.65; } .section-lead--white { color: rgba(255,255,255,0.82); } /* Two column layout */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 40px; } .body-text { color: #444; margin-bottom: 16px; font-size: 16px; line-height: 1.75; } .body-text--white { color: rgba(255,255,255,0.88); } /* Cards */ .card { border-radius: 16px; padding: 28px; } .card--light { background: #fff; border: 1px solid #eee; box-shadow: 0 2px 16px rgba(0,0,0,0.06); color: #333; } .card--glass { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35); backdrop-filter: blur(8px); color: #fff; } .card--centered { max-width: 600px; margin: 0 auto; } .card h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; } .card--light h3 { color: #1a1a2e; } .card--glass h3 { color: #fff; } /* Bullet list */ .bullet-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .bullet-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; color: #444; line-height: 1.55; } .bullet-list li::before { content: '✓'; color: #ff7043; font-weight: 700; flex-shrink: 0; margin-top: 1px; } .bullet-list--white li { color: rgba(255,255,255,0.9); } .bullet-list--white li::before { color: rgba(255,255,255,0.7); } /* ===================================================== FEATURES GRID ===================================================== */ .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 16px; } .feat-card { border-radius: 16px; padding: 26px 22px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .feat-card:hover { transform: translateY(-4px); } .feat-card--light { background: #fff; border: 1px solid #eee; box-shadow: 0 2px 12px rgba(0,0,0,0.06); color: #333; } .feat-card--light:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.1); } .feat-card--glass { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(8px); color: #fff; } .feat-card--glass:hover { background: rgba(255,255,255,0.22); } .feat-icon { font-size: 26px; margin-bottom: 12px; } .feat-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; line-height: 1.4; } .feat-card p { font-size: 14px; line-height: 1.65; opacity: 0.82; } /* ===================================================== HOW IT WORKS ===================================================== */ .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; position: relative; } .how-grid::before { content: ''; position: absolute; top: 36px; left: calc(16.67% + 12px); right: calc(16.67% + 12px); height: 2px; background: linear-gradient(90deg, #ff7043, #f4406a); opacity: 0.25; } .face--back .how-grid::before { background: rgba(255,255,255,0.5); opacity: 1; } .how-step { text-align: center; position: relative; z-index: 1; } .how-step--white { color: #fff; } .step-num { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, #ff7043, #f4406a); color: #fff; font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; box-shadow: 0 4px 16px rgba(244,64,106,0.35); position: relative; z-index: 1; } .step-num--white { background: rgba(255,255,255,0.35); box-shadow: 0 4px 16px rgba(0,0,0,0.08); border: 2px solid rgba(255,255,255,0.6); backdrop-filter: blur(4px); } .how-step h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: #1a1a2e; } .how-step--white h3 { color: #fff; } .how-step p { font-size: 14px; color: #666; line-height: 1.65; } .how-step--white p { color: rgba(255,255,255,0.78); } /* ===================================================== FAQ ===================================================== */ .faq-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 40px; max-width: 700px; margin-left: auto; margin-right: auto; } .faq-item { border-radius: 12px; overflow: hidden; border: 1px solid #e8e8f0; background: #fff; } .faq-item--white { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); } .faq-q { width: 100%; text-align: left; padding: 18px 20px; font-size: 15px; font-weight: 600; color: #1a1a2e; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: background 0.15s; } .faq-q::after { content: '+'; font-size: 22px; font-weight: 300; flex-shrink: 0; color: #bbb; transition: transform 0.25s, color 0.15s; } .faq-q[aria-expanded="true"]::after { transform: rotate(45deg); color: #ff7043; } .faq-q:hover { background: #f7f8fc; } .faq-q--white { color: #fff; } .faq-q--white::after { color: rgba(255,255,255,0.5); } .faq-q--white:hover { background: rgba(255,255,255,0.1); } .faq-q--white[aria-expanded="true"]::after { color: #fff; } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .faq-a.open { max-height: 300px; } .faq-a p { padding: 0 20px 18px; font-size: 14px; color: #555; line-height: 1.72; } .faq-a--white p { color: rgba(255,255,255,0.82); } /* ===================================================== PRICING ===================================================== */ .pricing-card { max-width: 400px; margin: 0 auto; border-radius: 20px; padding: 40px; text-align: center; display: flex; flex-direction: column; gap: 18px; align-items: center; } .pricing-card--light { background: #fff; border: 1px solid #eee; box-shadow: 0 4px 24px rgba(0,0,0,0.08); color: #444; } .pricing-card--glass { background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.35); backdrop-filter: blur(12px); color: rgba(255,255,255,0.9); } .price-badge { font-size: 30px; font-weight: 800; color: #ff7043; } .price-badge--white { color: #fff; font-size: 30px; font-weight: 800; } /* ===================================================== CTA SECTION ===================================================== */ .cta-section { padding: 80px 0; } .cta-section--light { background: linear-gradient(135deg, #ff7043 0%, #f4406a 100%); } .cta-section--dark { background: rgba(0,0,0,0.12); } .cta-card { text-align: center; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; } .cta-card h2 { font-size: clamp(22px, 2.8vw, 34px); font-weight: 800; letter-spacing: -0.02em; color: #fff; } .cta-card p { font-size: 17px; color: rgba(255,255,255,0.88); } /* ===================================================== FOOTER ===================================================== */ .footer { padding: 40px 0; } .footer--light { background: #f7f8fc; border-top: 1px solid #eee; } .footer--dark { background: rgba(0,0,0,0.14); border-top: 1px solid rgba(255,255,255,0.14); } .footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer__brand { display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .footer--light .footer__brand strong { color: #1a1a2e; } .footer--light .footer__brand span { color: #888; } .footer--dark .footer__brand strong { color: #fff; } .footer--dark .footer__brand span { color: rgba(255,255,255,0.6); } .footer__links { display: flex; gap: 20px; flex-wrap: wrap; } .footer__links a { font-size: 14px; text-decoration: none; color: #888; transition: color 0.15s; } .footer__links a:hover { color: #ff7043; } .footer__links--white a { color: rgba(255,255,255,0.65); } .footer__links--white a:hover { color: #fff; } .footer__copy { font-size: 13px; color: #aaa; } .footer--dark .footer__copy { color: rgba(255,255,255,0.45); } /* ===================================================== UNLOCK FLASH ===================================================== */ @keyframes unlockPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 55% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } } .unlock-flash { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.4); font-size: 96px; line-height: 1; pointer-events: none; opacity: 0; z-index: 9999; filter: drop-shadow(0 8px 32px rgba(0,0,0,0.25)); } .unlock-flash.is-active { animation: unlockPop 1.4s ease forwards; } /* ===================================================== CORNER PEEL TRIGGER ===================================================== */ .corner { position: fixed; bottom: 0; right: 0; width: 108px; height: 108px; cursor: pointer; z-index: 9999; transition: width 0.25s ease, height 0.25s ease; } .corner:hover, .corner:focus { width: 148px; height: 148px; outline: none; } /* The triangular folded flap */ .corner__flap { position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(225deg, #ff7043 0%, #f4406a 100%); clip-path: polygon(100% 0, 100% 100%, 0 100%); box-shadow: -3px -3px 12px rgba(0,0,0,0.18); transition: background 0.4s; } /* When on back face: show white flap hinting at front */ .corner.is-flipped .corner__flap { background: linear-gradient(225deg, #fff 0%, #f0f0f8 100%); box-shadow: -3px -3px 12px rgba(0,0,0,0.12); } /* Hint text */ .corner__hint { position: absolute; bottom: 26px; right: 7px; font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.8); letter-spacing: 0.06em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); pointer-events: none; opacity: 0; transition: opacity 0.2s; } .corner.is-flipped .corner__hint { color: rgba(180,80,40,0.8); } .corner:hover .corner__hint { opacity: 1; } /* Periodic wiggle */ @keyframes cornerWiggle { 0% { transform: scale(1) rotate(0deg); } 10% { transform: scale(1.35) rotate(-12deg); } 25% { transform: scale(1.4) rotate(10deg); } 40% { transform: scale(1.3) rotate(-8deg); } 55% { transform: scale(1.2) rotate(6deg); } 70% { transform: scale(1.1) rotate(-3deg); } 85% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1) rotate(0deg); } } .corner.wiggle { animation: cornerWiggle 0.9s ease-in-out; } /* Lock pattern step hint — brief glow flash on each completed step */ @keyframes patternHint { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.9); } 50% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } .pattern-hint { animation: patternHint 0.4s ease-out; border-radius: 8px; } /* Mock popup shake (triggered from back page "試してみる" button) */ @keyframes mockShake { 0%, 100% { transform: translateX(0) rotate(0deg); } 12% { transform: translateX(-8px) rotate(-3deg); } 25% { transform: translateX(8px) rotate(3deg); } 37% { transform: translateX(-6px) rotate(-2deg); } 50% { transform: translateX(6px) rotate(2deg); } 62% { transform: translateX(-4px) rotate(-1deg); } 75% { transform: translateX(4px) rotate(1deg); } 87% { transform: translateX(-2px) rotate(0deg); } } .mock-popup.shake { animation: mockShake 0.75s ease-in-out; } /* "試してみる" button inside feat-card */ .try-btn { display: inline-block; margin-top: 14px; padding: 7px 16px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.2); border: 1.5px solid rgba(255,255,255,0.45); border-radius: 20px; cursor: pointer; transition: background 0.2s, transform 0.15s; } .try-btn:hover { background: rgba(255,255,255,0.32); transform: translateY(-1px); } /* ===================================================== SUB-PAGE LAYOUT (privacy.html / release-notes.html) ===================================================== */ .subpage-body { background: #fff; color: #1a1a2e; } /* Sticky header reused as-is from .header--light */ .page-hero { padding: 64px 0 56px; background: #f7f8fc; border-bottom: 1px solid #eee; } .page-hero h1 { font-size: clamp(28px, 3.5vw, 44px); font-weight: 800; color: #1a1a2e; letter-spacing: -0.025em; margin-bottom: 12px; } .page-hero .lead { font-size: 17px; color: #666; line-height: 1.65; } .prose { max-width: 740px; margin: 0 auto; } .prose h2 { font-size: 20px; font-weight: 700; color: #1a1a2e; margin: 48px 0 12px; padding-bottom: 10px; border-bottom: 2px solid #f0f0f5; } .prose h2:first-child { margin-top: 0; } .prose p { font-size: 15px; color: #444; line-height: 1.8; margin-bottom: 14px; } .prose ul { list-style: none; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; } .prose ul li { font-size: 15px; color: #444; line-height: 1.65; padding-left: 20px; position: relative; } .prose ul li::before { content: '–'; position: absolute; left: 0; color: #ff7043; font-weight: 700; } .prose .note { font-size: 13px; color: #888; margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; } /* Release notes timeline */ .release-list { max-width: 740px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; } .release-item { border-radius: 16px; border: 1px solid #eee; background: #fff; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.05); } .release-item--latest { border-color: #ff7043; box-shadow: 0 4px 20px rgba(255,112,67,0.15); } .release-header { display: flex; align-items: center; gap: 14px; padding: 20px 24px; background: #f7f8fc; border-bottom: 1px solid #eee; flex-wrap: wrap; } .release-item--latest .release-header { background: linear-gradient(135deg, #fff5f0, #fff); border-bottom-color: rgba(255,112,67,0.2); } .release-version { font-size: 18px; font-weight: 800; color: #1a1a2e; } .release-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: linear-gradient(135deg, #ff7043, #f4406a); color: #fff; letter-spacing: 0.04em; } .release-title { font-size: 15px; font-weight: 600; color: #555; flex: 1; } .release-date { font-size: 13px; color: #aaa; margin-left: auto; } .release-body { padding: 20px 24px; } .release-notes { list-style: none; display: flex; flex-direction: column; gap: 8px; } .release-notes li { font-size: 14px; color: #444; line-height: 1.65; padding-left: 20px; position: relative; } .release-notes li::before { content: '✓'; position: absolute; left: 0; color: #ff7043; font-weight: 700; font-size: 12px; top: 2px; } /* Lang switch for sub-pages */ .subpage-lang { padding: 6px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; font-weight: 500; background: #fff; color: #333; cursor: pointer; outline: none; } .subpage-lang:focus { border-color: #ff7043; } /* ===================================================== RESPONSIVE ===================================================== */ @media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; gap: 40px; } .hero__visual { order: -1; } .mock-popup { max-width: 220px; } .feat-grid { grid-template-columns: repeat(2, 1fr); } .how-grid { grid-template-columns: 1fr; gap: 28px; } .how-grid::before { display: none; } .two-col { grid-template-columns: 1fr; } .nav { display: none; } } @media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } .footer__inner { flex-direction: column; text-align: center; } .footer__links { justify-content: center; } .hero { padding: 48px 0 40px; } .section { padding: 56px 0; } .corner { width: 84px; height: 84px; } .corner:hover { width: 114px; height: 114px; } }