:root{ --header-height: 96px; } /* ========================================== REMOVE DEFAULT DETAILS ARROW ========================================== */ .premium-faq-item summary{ list-style:none; cursor:pointer; } .premium-faq-item summary::-webkit-details-marker{ display:none; } .premium-faq-item summary::marker{ content:""; } /* ========================================================== DESIGN TOKENS ========================================================== */ :root { /* ====================================================== BRAND COLORS ====================================================== */ --color-primary: #2563eb; --color-primary-light: #60a5fa; --color-primary-dark: #1d4ed8; --color-success: #22c55e; --color-warning: #f59e0b; --color-danger: #ef4444; --color-background: #020617; --color-surface: #0f172a; --color-surface-light: rgba(255,255,255,.04); --color-border: rgba(255,255,255,.08); --color-border-hover: rgba(96,165,250,.30); --color-text: #ffffff; --color-text-secondary: rgba(255,255,255,.82); --color-text-muted: rgba(255,255,255,.65); /* ====================================================== GRADIENTS ====================================================== */ --gradient-primary: linear-gradient( 135deg, #2563eb, #60a5fa); --gradient-surface: linear-gradient( 135deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); /* ====================================================== SPACING ====================================================== */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* ====================================================== BORDER RADIUS ====================================================== */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 28px; --radius-pill: 999px; /* ====================================================== SHADOWS ====================================================== */ --shadow-sm: 0 8px 20px rgba(0,0,0,.18); --shadow-md: 0 15px 35px rgba(0,0,0,.28); --shadow-lg: 0 25px 60px rgba(0,0,0,.38); --shadow-primary: 0 18px 40px rgba(37,99,235,.18); /* ====================================================== GLASS EFFECT ====================================================== */ --glass-background: rgba(255,255,255,.04); --glass-blur: 18px; /* ====================================================== TRANSITIONS ====================================================== */ --transition-fast: .25s ease; --transition-base: .35s ease; --transition-slow: .5s ease; /* ====================================================== CONTENT WIDTH ====================================================== */ --content-width: 70ch; } /* ========================================================== ARTICLE HERO ========================================================== */ .article-hero{ position: relative; overflow: hidden; padding-top: calc(var(--header-height) + 40px); padding-bottom: 56px; background: radial-gradient( circle at top center, rgba(37,99,235,.18), transparent 55% ), linear-gradient( 180deg, #0f172a 0%, #111827 100% ); border-bottom: 1px solid rgba(255,255,255,.08); } /* ========================================================== CONTAINER ========================================================== */ .article-hero .container{ max-width: 1280px; margin: 0 auto; padding: 0 24px; } /* ========================================================== BREADCRUMB ========================================================== */ .breadcrumb{ margin-bottom: 24px; } .breadcrumb-list{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } .breadcrumb-item{ display: flex; align-items: center; font-size: .95rem; color: #94a3b8; } .breadcrumb-item:not(:last-child)::after{ content: "/"; margin-left: 10px; color: #64748b; } .breadcrumb-item a{ color: inherit; text-decoration: none; transition: color .3s ease; } .breadcrumb-item a:hover{ color: #3b82f6; } .breadcrumb-item.active{ color: #ffffff; } /* ========================================================== HERO CONTENT ========================================================== */ .article-hero-content{ max-width: 900px; } /* ========================================================== CATEGORY BADGE ========================================================== */ .article-category{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; margin-bottom: 24px; border-radius: 999px; background: linear-gradient( 135deg, #2563eb, #1d4ed8 ); color: #ffffff; font-size: .95rem; font-weight: 600; box-shadow: 0 10px 30px rgba(37,99,235,.25); } .article-category img{ width: 18px; height: 18px; } /* ========================================================== ARTICLE TITLE ========================================================== */ .article-hero h1{ margin: 0 0 24px; color: #ffffff; font-size: clamp(2.6rem, 4.5vw, 4rem); line-height: 1.15; font-weight: 800; letter-spacing: -.03em; } /* ========================================================== DESCRIPTION ========================================================== */ .article-description{ max-width: 760px; margin: 0 0 40px; color: #cbd5e1; font-size: 1.15rem; line-height: 1.9; } /* ========================================================== META ========================================================== */ .article-meta{ display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 56px; } .meta-item{ display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; color: #cbd5e1; font-size: .95rem; backdrop-filter: blur(8px); } .meta-item strong{ color: #ffffff; font-weight: 600; } .meta-item img{ width: 18px; height: 18px; } /* ========================================================== HERO IMAGE ========================================================== */ .article-hero-image{ margin: 0 0 48px; } .article-hero-image img{ display: block; width: 100%; border-radius: 24px; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 35px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(37,99,235,.10); } /* ========================================================== QUICK INFO ========================================================== */ .article-quick-info{ display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; } .info-card{ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 24px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: transform .3s ease, border-color .3s ease, background .3s ease; } .info-card:hover{ transform: translateY(-6px); border-color: rgba(59,130,246,.40); background: rgba(37,99,235,.08); } .info-card img{ width: 28px; height: 28px; margin-bottom: 16px; } .info-label{ margin-bottom: 10px; color: #94a3b8; font-size: .90rem; } .info-value{ color: #ffffff; font-size: 1.15rem; font-weight: 700; } /* ========================================================== ARTICLE HERO RESPONSIVE ========================================================== */ /* ========================================================== Large Tablets (≤ 992px) ========================================================== */ @media (max-width: 992px){ .article-hero{ padding-top: 120px; } .article-hero h1{ font-size: clamp(2.4rem,6vw,3.5rem); } .article-description{ max-width: 100%; font-size: 1.05rem; } .article-meta{ gap: 14px; } .article-quick-info{ grid-template-columns: repeat(2,1fr); gap: 20px; } } /* ========================================================== Tablets (≤ 768px) ========================================================== */ @media (max-width: 768px){ .article-hero{ padding: 110px 0 48px; } .breadcrumb{ margin-bottom: 20px; } .article-category{ margin-bottom: 20px; } .article-hero h1{ font-size: clamp(2rem,7vw,3rem); line-height: 1.2; margin-bottom: 20px; } .article-description{ font-size: 1rem; line-height: 1.8; margin-bottom: 32px; } .article-meta{ gap: 12px; margin-bottom: 40px; } .meta-item{ width: calc(50% - 6px); justify-content: center; padding: 12px; } .article-hero-image{ margin-bottom: 36px; } .article-hero-image img{ border-radius: 18px; } .article-quick-info{ grid-template-columns: repeat(2,1fr); gap: 16px; } .info-card{ padding: 24px 18px; } } /* ========================================================== Mobile (≤ 576px) ========================================================== */ @media (max-width: 576px){ .article-hero{ padding: 100px 0 40px; } .breadcrumb-list{ gap: 6px; font-size: .85rem; } .article-category{ font-size: .85rem; padding: 8px 16px; } .article-category img{ width: 16px; height: 16px; } .article-hero h1{ font-size: clamp(1.8rem,8vw,2.5rem); } .article-description{ font-size: .95rem; } .article-meta{ flex-direction: column; } .meta-item{ width: 100%; justify-content: flex-start; } .article-hero-image img{ border-radius: 14px; } .article-quick-info{ grid-template-columns: 1fr; } .info-card{ padding: 22px 16px; } .info-card img{ width: 24px; height: 24px; } .info-label{ font-size: .85rem; } .info-value{ font-size: 1rem; } } /* ========================================================== TABLE OF CONTENTS ========================================================== */ .article-toc{ padding: 72px 0; } /* ========================================================== TOC CARD ========================================================== */ .toc-card{ background: linear-gradient( 180deg, rgba(255,255,255,.04), rgba(255,255,255,.02) ); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: 40px; box-shadow: 0 20px 50px rgba(0,0,0,.25); } /* ========================================================== HEADER ========================================================== */ .toc-header{ display: flex; align-items: center; gap: 14px; margin-bottom: 32px; } .toc-header img{ width: 24px; height: 24px; } .toc-header h2{ margin: 0; color: #ffffff; font-size: 2rem; font-weight: 700; } /* ========================================================== LIST ========================================================== */ .toc-list{ list-style: none; margin: 0; padding: 0; } /* ========================================================== ITEM ========================================================== */ .toc-item + .toc-item{ margin-top: 14px; } /* ========================================================== LINK ========================================================== */ .toc-item a{ display: flex; align-items: center; gap: 16px; padding: 18px 22px; text-decoration: none; color: #cbd5e1; background: rgba(255,255,255,.02); border: 1px solid transparent; border-radius: 16px; transition: background .3s ease, border-color .3s ease, transform .3s ease, color .3s ease; } /* ========================================================== ICON ========================================================== */ .toc-item img{ width: 18px; height: 18px; flex-shrink: 0; } /* ========================================================== TEXT ========================================================== */ .toc-item span{ font-size: 1rem; font-weight: 500; } /* ========================================================== HOVER ========================================================== */ .toc-item a:hover{ transform: translateX(6px); background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.30); color: #ffffff; } /* ========================================================== FOCUS ========================================================== */ .toc-item a:focus-visible{ outline: 2px solid #2563eb; outline-offset: 3px; } /* ========================================================== TABLE OF CONTENTS RESPONSIVE ========================================================== */ /* ========================================================== Large Laptop (≤ 1200px) ========================================================== */ @media (max-width: 1200px){ .article-toc{ padding: 64px 0; } .toc-card{ padding: 36px; } } /* ========================================================== Laptop (≤ 992px) ========================================================== */ @media (max-width: 992px){ .article-toc{ padding: 56px 0; } .toc-card{ padding: 32px; } .toc-header{ margin-bottom: 28px; } .toc-header h2{ font-size: 1.8rem; } .toc-item a{ padding: 16px 20px; } } /* ========================================================== Tablet (≤ 768px) ========================================================== */ @media (max-width: 768px){ .article-toc{ padding: 48px 0; } .toc-card{ padding: 28px; border-radius: 20px; } .toc-header{ gap: 12px; margin-bottom: 24px; } .toc-header img{ width: 22px; height: 22px; } .toc-header h2{ font-size: 1.6rem; } .toc-item + .toc-item{ margin-top: 12px; } .toc-item a{ padding: 16px 18px; gap: 14px; } .toc-item span{ font-size: .98rem; } } /* ========================================================== Large Mobile (≤ 576px) ========================================================== */ @media (max-width: 576px){ .article-toc{ padding: 40px 0; } .toc-card{ padding: 22px; border-radius: 18px; } .toc-header{ margin-bottom: 20px; } .toc-header h2{ font-size: 1.4rem; } .toc-header img{ width: 20px; height: 20px; } .toc-item a{ padding: 15px 16px; gap: 12px; } .toc-item img{ width: 16px; height: 16px; } .toc-item span{ font-size: .95rem; line-height: 1.5; } } /* ========================================================== Small Mobile (≤ 400px) ========================================================== */ @media (max-width: 400px){ .article-toc{ padding: 36px 0; } .toc-card{ padding: 18px; border-radius: 16px; } .toc-header{ gap: 10px; margin-bottom: 18px; } .toc-header h2{ font-size: 1.25rem; } .toc-header img{ width: 18px; height: 18px; } .toc-item a{ padding: 14px; gap: 10px; } .toc-item span{ font-size: .90rem; } } /* ========================================================== ARTICLE INTRODUCTION ========================================================== */ .article-introduction{ padding: 72px 0; } /* ========================================================== INTRODUCTION HEADER ========================================================== */ .article-introduction .section-header{ max-width: 1250px; margin: 0 0 70px; text-align: left; } /* ========================================================== INTRODUCTION CONTENT ========================================================== */ .introduction-content{ max-width: 1250px; } .introduction-content p{ margin: 0 0 24px; color: #cbd5e1; font-size: 1.05rem; line-height: 1.9; } .introduction-content p:last-child{ margin-bottom: 0; } /* ========================================================== KEY TAKEAWAY ========================================================== */ .key-takeaway{ margin-top: 48px; padding: 32px; background: linear-gradient( 180deg, rgba(37,99,235,.08), rgba(255,255,255,.03) ); border: 1px solid rgba(37,99,235,.25); border-left: 5px solid #2563eb; border-radius: 20px; box-shadow: 0 18px 40px rgba(0,0,0,.20); } /* ========================================================== TAKEAWAY HEADER ========================================================== */ .takeaway-header{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .takeaway-header img{ width: 24px; height: 24px; } .takeaway-header h3{ margin: 0; color: #ffffff; font-size: 1.35rem; font-weight: 700; } /* ========================================================== TAKEAWAY CONTENT ========================================================== */ .key-takeaway p{ margin: 0; color: #cbd5e1; font-size: 1rem; line-height: 1.8; } /* ========================================================== ARTICLE INTRODUCTION RESPONSIVE ========================================================== */ /* ========================================================== Large Laptop (≤1200px) ========================================================== */ @media (max-width:1200px){ .article-introduction{ padding:64px 0; } .article-introduction .section-header{ max-width:100%; margin:0 0 60px; } .introduction-content{ max-width:100%; } } /* ========================================================== Laptop (≤992px) ========================================================== */ @media (max-width:992px){ .article-introduction{ padding:56px 0; } .article-introduction .section-header{ margin-bottom:52px; } .introduction-content p{ font-size:1rem; line-height:1.9; } .key-takeaway{ margin-top:40px; padding:28px; } } /* ========================================================== Tablet (≤768px) ========================================================== */ @media (max-width:768px){ .article-introduction{ padding:48px 0; } .article-introduction .section-header{ margin-bottom:40px; } .introduction-content p{ font-size:.98rem; line-height:1.8; margin-bottom:20px; } .key-takeaway{ padding:24px; border-radius:18px; } .takeaway-header{ gap:12px; margin-bottom:16px; } .takeaway-header h3{ font-size:1.2rem; } } /* ========================================================== Large Mobile (≤576px) ========================================================== */ @media (max-width:576px){ .article-introduction{ padding:40px 0; } .article-introduction .section-header{ margin-bottom:32px; } .introduction-content p{ font-size:.95rem; line-height:1.8; } .key-takeaway{ margin-top:32px; padding:20px; } .takeaway-header img{ width:22px; height:22px; } .takeaway-header h3{ font-size:1.1rem; } } /* ========================================================== Small Mobile (≤400px) ========================================================== */ @media (max-width:400px){ .article-introduction{ padding:36px 0; } .article-introduction .section-header{ margin-bottom:28px; } .introduction-content p{ font-size:.92rem; } .key-takeaway{ padding:18px; border-radius:16px; } .takeaway-header{ gap:10px; } .takeaway-header img{ width:20px; height:20px; } .takeaway-header h3{ font-size:1rem; } } /* ========================================================== ARTICLE BENEFITS ========================================================== */ .article-benefits{ padding:72px 0; } /* ========================================================== BENEFITS GRID ========================================================== */ .benefits-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; } /* ========================================================== BENEFIT CARD ========================================================== */ .benefit-card{ background:linear-gradient( 180deg, rgba(255,255,255,.04), rgba(255,255,255,.02) ); border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:36px; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .benefit-card:hover{ transform:translateY(-8px); border-color:rgba(37,99,235,.35); box-shadow: 0 20px 45px rgba(0,0,0,.25); } /* ========================================================== BENEFIT ICON ========================================================== */ .benefit-icon{ display:flex; align-items:center; justify-content:center; width:72px; height:72px; margin-bottom:28px; border-radius:50%; background:rgba(37,99,235,.10); border:1px solid rgba(37,99,235,.25); } .benefit-icon img{ width:32px; height:32px; } /* ========================================================== BENEFIT TITLE ========================================================== */ .benefit-card h3{ margin:0 0 18px; color:#ffffff; font-size:1.45rem; font-weight:700; line-height:1.4; } /* ========================================================== BENEFIT DESCRIPTION ========================================================== */ .benefit-card p{ margin:0; color:#cbd5e1; font-size:1rem; line-height:1.9; } /* ========================================================== ARTICLE BENEFITS RESPONSIVE ========================================================== */ /* ========================================================== Large Laptop (≤1200px) ========================================================== */ @media (max-width:1200px){ .article-benefits{ padding:64px 0; } .benefits-grid{ gap:26px; } .benefit-card{ padding:32px; } } /* ========================================================== Laptop (≤992px) ========================================================== */ @media (max-width:992px){ .article-benefits{ padding:56px 0; } .benefits-grid{ gap:24px; } .benefit-card{ padding:28px; } .benefit-icon{ width:64px; height:64px; margin-bottom:24px; } .benefit-icon img{ width:28px; height:28px; } .benefit-card h3{ font-size:1.3rem; } } /* ========================================================== Tablet (≤768px) ========================================================== */ @media (max-width:768px){ .article-benefits{ padding:48px 0; } .benefits-grid{ grid-template-columns:repeat(2,1fr); gap:20px; } .benefit-card{ padding:24px; border-radius:20px; } .benefit-icon{ width:60px; height:60px; margin-bottom:20px; } .benefit-icon img{ width:26px; height:26px; } .benefit-card h3{ font-size:1.2rem; margin-bottom:14px; } .benefit-card p{ font-size:.95rem; line-height:1.8; } } /* ========================================================== Large Mobile (≤576px) ========================================================== */ @media (max-width:576px){ .article-benefits{ padding:40px 0; } .benefits-grid{ grid-template-columns:1fr; gap:18px; } .benefit-card{ padding:22px; border-radius:18px; } .benefit-icon{ width:56px; height:56px; margin-bottom:18px; } .benefit-icon img{ width:24px; height:24px; } .benefit-card h3{ font-size:1.1rem; } .benefit-card p{ font-size:.94rem; } } /* ========================================================== Small Mobile (≤400px) ========================================================== */ @media (max-width:400px){ .article-benefits{ padding:36px 0; } .benefit-card{ padding:18px; border-radius:16px; } .benefit-icon{ width:52px; height:52px; margin-bottom:16px; } .benefit-icon img{ width:22px; height:22px; } .benefit-card h3{ font-size:1rem; margin-bottom:12px; } .benefit-card p{ font-size:.9rem; line-height:1.7; } } /* ========================================================== MUSCLES WORKED ========================================================== */ .article-muscles{ padding:72px 0; } /* ========================================================== MUSCLE ANATOMY IMAGE ========================================================== */ .muscle-anatomy{ margin:0 0 48px; text-align:center; } .muscle-anatomy img{ display:block; width:100%; max-width:800px; margin:0 auto; height:auto; } /* ========================================================== MUSCLE GROUPS ========================================================== */ .muscle-groups{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; margin-bottom:40px; } /* ========================================================== MUSCLE CARD ========================================================== */ .muscle-card{ background:linear-gradient( 180deg, rgba(255,255,255,.04), rgba(255,255,255,.02) ); border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:36px; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .muscle-card:hover{ transform:translateY(-8px); border-color:rgba(37,99,235,.35); box-shadow:0 20px 45px rgba(0,0,0,.25); } .muscle-card h3{ margin:0 0 24px; color:#ffffff; font-size:1.45rem; font-weight:700; } /* ========================================================== MUSCLE LIST ========================================================== */ .muscle-list{ list-style:none; margin:0; padding:0; } .muscle-list li{ display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); } .muscle-list li:last-child{ border-bottom:none; } .muscle-list img{ width:20px; height:20px; flex-shrink:0; } .muscle-list span{ color:#cbd5e1; font-size:1rem; line-height:1.7; } /* ========================================================== MUSCLE ACTIVATION TIP ========================================================== */ .muscle-tip{ background:linear-gradient( 135deg, rgba(37,99,235,.12), rgba(37,99,235,.05) ); border:1px solid rgba(37,99,235,.25); border-radius:24px; padding:36px; } .muscle-tip h3{ margin:0 0 16px; color:#ffffff; font-size:1.4rem; font-weight:700; } .muscle-tip p{ margin:0; color:#cbd5e1; font-size:1rem; line-height:1.9; } /* ========================================================== MUSCLES WORKED RESPONSIVE ========================================================== */ /* ========================================================== Large Laptop (≤1200px) ========================================================== */ @media (max-width:1200px){ .article-muscles{ padding:64px 0; } .muscle-anatomy{ margin-bottom:42px; } .muscle-anatomy img{ max-width:600px; } .muscle-groups{ gap:26px; } .muscle-card{ padding:32px; } .muscle-tip{ padding:32px; } } /* ========================================================== Laptop (≤992px) ========================================================== */ @media (max-width:992px){ .article-muscles{ padding:56px 0; } .muscle-anatomy{ margin-bottom:36px; } .muscle-anatomy img{ max-width:520px; } .muscle-groups{ gap:24px; margin-bottom:32px; } .muscle-card{ padding:28px; } .muscle-card h3{ font-size:1.3rem; } .muscle-list li{ gap:14px; padding:12px 0; } .muscle-tip{ padding:30px; } .muscle-tip h3{ font-size:1.3rem; } } /* ========================================================== Tablet (≤768px) ========================================================== */ @media (max-width:768px){ .article-muscles{ padding:48px 0; } .muscle-anatomy{ margin-bottom:32px; } .muscle-anatomy img{ max-width:450px; } .muscle-groups{ grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:28px; } .muscle-card{ padding:24px; border-radius:20px; } .muscle-card h3{ font-size:1.2rem; margin-bottom:18px; } .muscle-list li{ gap:12px; padding:10px 0; } .muscle-list img{ width:18px; height:18px; } .muscle-list span{ font-size:.95rem; } .muscle-tip{ padding:24px; border-radius:20px; } .muscle-tip h3{ font-size:1.2rem; } .muscle-tip p{ font-size:.95rem; line-height:1.8; } } /* ========================================================== Large Mobile (≤576px) ========================================================== */ @media (max-width:576px){ .article-muscles{ padding:40px 0; } .muscle-anatomy{ margin-bottom:28px; } .muscle-anatomy img{ max-width:100%; } .muscle-groups{ grid-template-columns:1fr; gap:18px; margin-bottom:24px; } .muscle-card{ padding:22px; border-radius:18px; } .muscle-card h3{ font-size:1.1rem; } .muscle-list span{ font-size:.94rem; } .muscle-tip{ padding:22px; border-radius:18px; } .muscle-tip h3{ font-size:1.1rem; margin-bottom:14px; } .muscle-tip p{ font-size:.94rem; } } /* ========================================================== Small Mobile (≤400px) ========================================================== */ @media (max-width:400px){ .article-muscles{ padding:36px 0; } .muscle-anatomy{ margin-bottom:24px; } .muscle-card{ padding:18px; border-radius:16px; } .muscle-card h3{ font-size:1rem; margin-bottom:16px; } .muscle-list li{ gap:10px; padding:9px 0; } .muscle-list img{ width:16px; height:16px; } .muscle-list span{ font-size:.9rem; } .muscle-tip{ padding:18px; border-radius:16px; } .muscle-tip h3{ font-size:1rem; margin-bottom:12px; } .muscle-tip p{ font-size:.9rem; line-height:1.7; } } /* ========================================================== HOW TO PERFORM ========================================================== */ .article-steps{ padding:72px 0; } /* ========================================================== EXERCISE DEMONSTRATION IMAGE ========================================================== */ .exercise-demo{ margin:0 0 48px; } .exercise-demo img{ display:block; width:100%; border-radius:24px; border:1px solid rgba(255,255,255,.08); box-shadow:0 20px 50px rgba(0,0,0,.25); } /* ========================================================== STEPS LIST ========================================================== */ .steps-list{ display:flex; flex-direction:column; gap:24px; } /* ========================================================== STEP CARD ========================================================== */ .step-card{ display:flex; align-items:flex-start; gap:28px; padding:32px; background:linear-gradient( 180deg, rgba(255,255,255,.04), rgba(255,255,255,.02) ); border:1px solid rgba(255,255,255,.08); border-radius:24px; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .step-card:hover{ transform:translateY(-6px); border-color:rgba(37,99,235,.35); box-shadow:0 20px 45px rgba(0,0,0,.25); } /* ========================================================== STEP NUMBER ========================================================== */ .step-number{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:72px; height:72px; border-radius:50%; background:rgba(37,99,235,.12); border:1px solid rgba(37,99,235,.30); color:#ffffff; font-size:1.75rem; font-weight:700; } /* ========================================================== STEP CONTENT ========================================================== */ .step-content{ flex:1; } .step-content h3{ margin:0 0 14px; color:#ffffff; font-size:1.45rem; font-weight:700; line-height:1.4; } .step-content p{ margin:0; color:#cbd5e1; font-size:1rem; line-height:1.9; } /* ========================================================== HOW TO PERFORM RESPONSIVE ========================================================== */ /* ========================================================== Large Laptop (≤1200px) ========================================================== */ @media (max-width:1200px){ .article-steps{ padding:64px 0; } .exercise-demo{ margin-bottom:42px; } .step-card{ padding:30px; gap:24px; } } /* ========================================================== Laptop (≤992px) ========================================================== */ @media (max-width:992px){ .article-steps{ padding:56px 0; } .exercise-demo{ margin-bottom:36px; } .step-card{ padding:28px; gap:22px; } .step-number{ width:64px; height:64px; font-size:1.5rem; } .step-content h3{ font-size:1.3rem; } } /* ========================================================== Tablet (≤768px) ========================================================== */ @media (max-width:768px){ .article-steps{ padding:48px 0; } .exercise-demo{ margin-bottom:32px; } .exercise-demo img{ border-radius:20px; } .steps-list{ gap:20px; } .step-card{ padding:24px; gap:20px; border-radius:20px; } .step-number{ width:58px; height:58px; font-size:1.35rem; } .step-content h3{ font-size:1.2rem; margin-bottom:12px; } .step-content p{ font-size:.95rem; line-height:1.8; } } /* ========================================================== Large Mobile (≤576px) ========================================================== */ @media (max-width:576px){ .article-steps{ padding:40px 0; } .exercise-demo{ margin-bottom:28px; } .exercise-demo img{ border-radius:18px; } .steps-list{ gap:18px; } .step-card{ flex-direction:column; align-items:flex-start; padding:22px; gap:18px; border-radius:18px; } .step-number{ width:54px; height:54px; font-size:1.25rem; } .step-content h3{ font-size:1.1rem; } .step-content p{ font-size:.94rem; } } /* ========================================================== Small Mobile (≤400px) ========================================================== */ @media (max-width:400px){ .article-steps{ padding:36px 0; } .exercise-demo{ margin-bottom:24px; } .exercise-demo img{ border-radius:16px; } .steps-list{ gap:16px; } .step-card{ padding:18px; gap:16px; border-radius:16px; } .step-number{ width:48px; height:48px; font-size:1.1rem; } .step-content h3{ font-size:1rem; margin-bottom:10px; } .step-content p{ font-size:.9rem; line-height:1.7; } } /* ========================================================== SECTION 07 : COMMON MISTAKES ========================================================== */ .article-mistakes{ padding:80px 0; } /* ========================================================== MISTAKES LIST ========================================================== */ .mistakes-list{ display:flex; flex-direction:column; gap:28px; } /* ========================================================== MISTAKE CARD ========================================================== */ .mistake-card{ display:flex; align-items:flex-start; gap:30px; padding:34px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:24px; transition:all .35s ease; } .mistake-card:hover{ transform:translateY(-6px); border-color:rgba(37,99,235,.45); box-shadow:0 20px 45px rgba(0,0,0,.28); } /* ========================================================== NUMBER ========================================================== */ .mistake-number{ flex-shrink:0; width:72px; height:72px; display:flex; align-items:center; justify-content:center; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.28); border-radius:50%; font-size:1.55rem; font-weight:800; color:#ef4444; } /* ========================================================== CONTENT ========================================================== */ .mistake-content{ flex:1; } .mistake-content h3{ margin-bottom:14px; font-size:1.55rem; color:var(--color-heading); } .mistake-content > p{ margin-bottom:26px; color:var(--color-text); line-height:1.9; } /* ========================================================== COACH FIX ========================================================== */ .mistake-fix{ padding:22px 24px; background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.18); border-left:5px solid var(--color-primary); border-radius:20px; } .mistake-fix h4{ display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:1.05rem; color:var(--color-heading); } .mistake-fix h4 img{ width:20px; height:20px; } .mistake-fix p{ margin:0; color:var(--color-text); line-height:1.8; } /* ========================================================== COMMON MISTAKES RESPONSIVE ========================================================== */ /* ========================================================== Large Laptop (≤1200px) ========================================================== */ @media (max-width:1200px){ .article-mistakes{ padding:64px 0; } .mistake-card{ padding:30px; gap:26px; } } /* ========================================================== Laptop (≤992px) ========================================================== */ @media (max-width:992px){ .article-mistakes{ padding:56px 0; } .mistake-card{ padding:28px; gap:24px; } .mistake-number{ width:66px; height:66px; font-size:1.45rem; } .mistake-content h3{ font-size:1.35rem; } } /* ========================================================== Tablet (≤768px) ========================================================== */ @media (max-width:768px){ .article-mistakes{ padding:48px 0; } .mistakes-list{ gap:22px; } .mistake-card{ padding:24px; gap:20px; border-radius:20px; } .mistake-number{ width:58px; height:58px; font-size:1.3rem; } .mistake-content h3{ font-size:1.2rem; } .mistake-content > p{ margin-bottom:22px; font-size:.95rem; line-height:1.8; } .mistake-fix{ padding:20px; border-radius:18px; } } /* ========================================================== Large Mobile (≤576px) ========================================================== */ @media (max-width:576px){ .article-mistakes{ padding:40px 0; } .mistakes-list{ gap:18px; } .mistake-card{ flex-direction:column; align-items:flex-start; padding:22px; gap:18px; border-radius:18px; } .mistake-number{ width:54px; height:54px; font-size:1.2rem; } .mistake-content h3{ font-size:1.1rem; } .mistake-content > p{ margin-bottom:18px; font-size:.94rem; } .mistake-fix{ padding:18px; border-radius:16px; } .mistake-fix h4{ gap:10px; font-size:1rem; } .mistake-fix h4 img{ width:18px; height:18px; } } /* ========================================================== Small Mobile (≤400px) ========================================================== */ @media (max-width:400px){ .article-mistakes{ padding:36px 0; } .mistakes-list{ gap:16px; } .mistake-card{ padding:18px; gap:16px; border-radius:16px; } .mistake-number{ width:48px; height:48px; font-size:1.05rem; } .mistake-content h3{ font-size:1rem; margin-bottom:10px; } .mistake-content > p{ margin-bottom:16px; font-size:.9rem; line-height:1.7; } .mistake-fix{ padding:16px; border-radius:16px; } .mistake-fix h4{ margin-bottom:10px; font-size:.95rem; } .mistake-fix p{ font-size:.88rem; line-height:1.7; } } /* ========================================================== SECTION 08 : EXERCISE VARIATIONS ========================================================== */ .article-variations{ padding:80px 0; } /* ========================================================== VARIATIONS GRID ========================================================== */ .variations-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; } /* ========================================================== VARIATION CARD ========================================================== */ .variation-card{ display:flex; flex-direction:column; background:var(--color-surface); border:1px solid var(--color-border); border-radius:24px; overflow:hidden; transition:all .35s ease; } .variation-card:hover{ transform:translateY(-8px); border-color:rgba(37,99,235,.45); box-shadow:0 22px 50px rgba(0,0,0,.28); } /* ========================================================== VARIATION IMAGE ========================================================== */ .variation-image{ aspect-ratio:9/16; overflow:hidden; background:#111827; } .variation-image img{ width:100%; height:100%; display:block; object-fit:cover; transition:transform .5s ease; } .variation-card:hover .variation-image img{ transform:scale(1.05); } /* ========================================================== CONTENT ========================================================== */ .variation-content{ display:flex; flex-direction:column; flex:1; padding:26px; } /* ========================================================== DIFFICULTY BADGE ========================================================== */ .difficulty{ display:inline-flex; align-items:center; justify-content:center; width:max-content; padding:8px 18px; margin-bottom:18px; border-radius:999px; font-size:.85rem; font-weight:600; } .difficulty.beginner{ background:rgba(34,197,94,.12); color:#22c55e; border:1px solid rgba(34,197,94,.25); } .difficulty.intermediate{ background:rgba(37,99,235,.12); color:var(--color-primary); border:1px solid rgba(37,99,235,.25); } .difficulty.advanced{ background:rgba(249,115,22,.12); color:#f97316; border:1px solid rgba(249,115,22,.25); } /* ========================================================== TITLE ========================================================== */ .variation-content h3{ margin-bottom:14px; font-size:1.45rem; color:var(--color-heading); } /* ========================================================== DESCRIPTION ========================================================== */ .variation-content p{ margin-bottom:24px; color:var(--color-text); line-height:1.8; } /* ========================================================== CTA LINK ========================================================== */ .variation-link{ display:inline-flex; align-items:center; gap:10px; margin-top:auto; font-weight:600; color:var(--color-primary); text-decoration:none; transition:all .3s ease; } .variation-link img{ width:18px; height:18px; transition:transform .3s ease; } .variation-link:hover{ color:#60a5fa; } .variation-link:hover img{ transform:translateX(6px); } /* ========================================================== EXERCISE VARIATIONS RESPONSIVE ========================================================== */ /* ========================================================== Large Laptop (≤1200px) ========================================================== */ @media (max-width:1200px){ .article-variations{ padding:64px 0; } .variations-grid{ gap:28px; } .variation-content{ padding:24px; } } /* ========================================================== Laptop (≤992px) ========================================================== */ @media (max-width:992px){ .article-variations{ padding:56px 0; } .variations-grid{ grid-template-columns:repeat(2,1fr); gap:24px; } .variation-content{ padding:22px; } .variation-content h3{ font-size:1.3rem; } } /* ========================================================== Tablet (≤768px) ========================================================== */ @media (max-width:768px){ .article-variations{ padding:48px 0; } .variations-grid{ grid-template-columns:repeat(2,1fr); gap:20px; } .variation-card{ border-radius:20px; } .variation-content{ padding:20px; } .difficulty{ padding:7px 16px; font-size:.8rem; margin-bottom:16px; } .variation-content h3{ font-size:1.15rem; margin-bottom:12px; } .variation-content p{ font-size:.95rem; line-height:1.7; margin-bottom:20px; } } /* ========================================================== Large Mobile (≤576px) ========================================================== */ @media (max-width:576px){ .article-variations{ padding:40px 0; } .variations-grid{ grid-template-columns:1fr; gap:20px; max-width:380px; margin:0 auto; } .variation-card{ border-radius:18px; } .variation-content{ padding:20px; } .difficulty{ font-size:.8rem; padding:7px 15px; margin-bottom:14px; } .variation-content h3{ font-size:1.1rem; } .variation-content p{ font-size:.94rem; margin-bottom:18px; } .variation-link{ font-size:.95rem; } } /* ========================================================== Small Mobile (≤400px) ========================================================== */ @media (max-width:400px){ .article-variations{ padding:36px 0; } .variations-grid{ gap:16px; } .variation-card{ border-radius:16px; } .variation-content{ padding:18px; } .difficulty{ padding:6px 14px; font-size:.75rem; margin-bottom:12px; } .variation-content h3{ font-size:1rem; margin-bottom:10px; } .variation-content p{ font-size:.9rem; line-height:1.7; margin-bottom:16px; } .variation-link{ gap:8px; font-size:.9rem; } .variation-link img{ width:16px; height:16px; } } /* ========================================================== SECTION 09 : COACH'S TIPS ========================================================== */ .article-tips{ padding:80px 0; } /* ========================================================== COACH CARD ========================================================== */ .coach-card{ padding:40px; background:linear-gradient( 135deg, rgba(37,99,235,.08), rgba(15,23,42,.95) ); border:1px solid rgba(37,99,235,.20); border-left:6px solid var(--color-primary); border-radius:24px; transition:all .35s ease; } .coach-card:hover{ transform:translateY(-6px); border-color:rgba(37,99,235,.40); box-shadow:0 22px 50px rgba(0,0,0,.28); } /* ========================================================== HEADER ========================================================== */ .coach-header{ display:flex; align-items:center; gap:16px; margin-bottom:30px; } .coach-header img{ width:32px; height:32px; } .coach-header h3{ margin:0; font-size:1.6rem; color:var(--color-heading); } /* ========================================================== TIPS LIST ========================================================== */ .coach-tips-list{ display:flex; flex-direction:column; gap:22px; margin:0; padding:0; list-style:none; } /* ========================================================== LIST ITEM ========================================================== */ .coach-tips-list li{ display:flex; align-items:flex-start; gap:18px; } .coach-tips-list li img{ width:22px; height:22px; margin-top:4px; flex-shrink:0; } .coach-tips-list li span{ color:var(--color-text); line-height:1.9; } /* ========================================================== COACH'S TIPS RESPONSIVE ========================================================== */ /* ========================================================== Large Laptop (≤1200px) ========================================================== */ @media (max-width:1200px){ .article-tips{ padding:64px 0; } .coach-card{ padding:36px; } } /* ========================================================== Laptop (≤992px) ========================================================== */ @media (max-width:992px){ .article-tips{ padding:56px 0; } .coach-card{ padding:32px; } .coach-header{ gap:14px; margin-bottom:26px; } .coach-header h3{ font-size:1.45rem; } } /* ========================================================== Tablet (≤768px) ========================================================== */ @media (max-width:768px){ .article-tips{ padding:48px 0; } .coach-card{ padding:28px; border-radius:20px; } .coach-header{ gap:12px; margin-bottom:24px; } .coach-header img{ width:28px; height:28px; } .coach-header h3{ font-size:1.3rem; } .coach-tips-list{ gap:18px; } .coach-tips-list li{ gap:16px; } .coach-tips-list li img{ width:20px; height:20px; } .coach-tips-list li span{ font-size:.95rem; line-height:1.8; } } /* ========================================================== Large Mobile (≤576px) ========================================================== */ @media (max-width:576px){ .article-tips{ padding:40px 0; } .coach-card{ padding:22px; border-radius:18px; } .coach-header{ gap:10px; margin-bottom:20px; } .coach-header img{ width:24px; height:24px; } .coach-header h3{ font-size:1.15rem; } .coach-tips-list{ gap:16px; } .coach-tips-list li{ gap:14px; } .coach-tips-list li img{ width:18px; height:18px; margin-top:3px; } .coach-tips-list li span{ font-size:.94rem; line-height:1.75; } } /* ========================================================== Small Mobile (≤400px) ========================================================== */ @media (max-width:400px){ .article-tips{ padding:36px 0; } .coach-card{ padding:18px; border-radius:16px; } .coach-header{ gap:8px; margin-bottom:18px; } .coach-header img{ width:22px; height:22px; } .coach-header h3{ font-size:1rem; } .coach-tips-list{ gap:14px; } .coach-tips-list li{ gap:12px; } .coach-tips-list li img{ width:16px; height:16px; } .coach-tips-list li span{ font-size:.9rem; line-height:1.7; } } /* ========================================================== SECTION 10 : FREQUENTLY ASKED QUESTIONS ========================================================== */ .article-faq{ padding:80px 0; } /* ========================================================== FAQ LIST ========================================================== */ .faq-list{ display:flex; flex-direction:column; gap:20px; max-width:1100px; margin:0 auto; } /* ========================================================== FAQ ITEM ========================================================== */ .faq-item{ background:var(--color-card); border:1px solid rgba(37,99,235,.15); border-radius:20px; overflow:hidden; transition:all .35s ease; } .faq-item:hover{ transform:translateY(-4px); border-color:rgba(37,99,235,.35); box-shadow:0 18px 40px rgba(0,0,0,.25); } /* ========================================================== QUESTION ========================================================== */ .faq-item summary{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 28px; cursor:pointer; list-style:none; font-size:1.1rem; font-weight:600; color:var(--color-heading); transition:color .3s ease; } .faq-item summary:hover{ color:var(--color-primary); } .faq-item summary::-webkit-details-marker{ display:none; } /* ========================================================== PLUS / MINUS ICON ========================================================== */ .faq-item summary::after{ content:"+"; display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0; border-radius:50%; background:rgba(37,99,235,.12); color:var(--color-primary); font-size:1.5rem; font-weight:700; transition:all .35s ease; } .faq-item[open] summary::after{ content:"−"; transform:rotate(180deg); } /* ========================================================== ANSWER ========================================================== */ .faq-answer{ padding:0 28px 24px; border-top:1px solid rgba(255,255,255,.08); } .faq-answer p{ margin-top:20px; color:var(--color-text); line-height:1.9; } /* ========================================================== OPEN STATE ========================================================== */ .faq-item[open]{ border-color:rgba(37,99,235,.35); box-shadow:0 20px 45px rgba(37,99,235,.08); } /* ========================================================== FAQ RESPONSIVE ========================================================== */ /* ========================================================== Large Laptop (≤1200px) ========================================================== */ @media (max-width:1200px){ .article-faq{ padding:64px 0; } } /* ========================================================== Laptop (≤992px) ========================================================== */ @media (max-width:992px){ .article-faq{ padding:56px 0; } .faq-item summary{ padding:22px 24px; font-size:1.05rem; } .faq-answer{ padding:0 24px 22px; } } /* ========================================================== Tablet (≤768px) ========================================================== */ @media (max-width:768px){ .article-faq{ padding:48px 0; } .faq-list{ gap:18px; } .faq-item{ border-radius:18px; } .faq-item summary{ padding:20px; gap:16px; font-size:1rem; } .faq-item summary::after{ width:30px; height:30px; font-size:1.35rem; } .faq-answer{ padding:0 20px 20px; } .faq-answer p{ margin-top:16px; line-height:1.8; } } /* ========================================================== Large Mobile (≤576px) ========================================================== */ @media (max-width:576px){ .article-faq{ padding:40px 0; } .faq-list{ gap:16px; } .faq-item{ border-radius:16px; } .faq-item summary{ padding:18px; gap:14px; font-size:.95rem; } .faq-item summary::after{ width:28px; height:28px; font-size:1.2rem; } .faq-answer{ padding:0 18px 18px; } .faq-answer p{ margin-top:14px; font-size:.94rem; line-height:1.75; } } /* ========================================================== Small Mobile (≤400px) ========================================================== */ @media (max-width:400px){ .article-faq{ padding:36px 0; } .faq-list{ gap:14px; } .faq-item{ border-radius:14px; } .faq-item summary{ padding:16px; gap:12px; font-size:.9rem; } .faq-item summary::after{ width:24px; height:24px; font-size:1rem; } .faq-answer{ padding:0 16px 16px; } .faq-answer p{ margin-top:12px; font-size:.9rem; line-height:1.7; } } /* ========================================================== SECTION 11 : FINAL CALL TO ACTION ========================================================== */ .exercise-cta{ padding:100px 0; } /* ========================================================== CTA CARD ========================================================== */ .cta-card{ background:linear-gradient( 135deg, rgba(37,99,235,.12), rgba(15,23,42,.95) ); border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:70px 60px; text-align:center; position:relative; overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,.35); } /* ========================================================== TOP GLOW ========================================================== */ .cta-card::before{ content:""; position:absolute; top:-120px; left:50%; transform:translateX(-50%); width:280px; height:280px; background:rgba(37,99,235,.18); filter:blur(80px); pointer-events:none; } /* ========================================================== CONTENT ========================================================== */ .cta-content{ position:relative; z-index:2; max-width:760px; margin:0 auto; } /* ========================================================== BADGE ========================================================== */ .cta-badge{ display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; border-radius:999px; background:rgba(37,99,235,.15); border:1px solid rgba(37,99,235,.35); color:var(--primary-color); font-size:.9rem; font-weight:600; margin-bottom:24px; } /* ========================================================== TITLE ========================================================== */ .cta-content h2{ font-size:clamp(2rem,4vw,3rem); color:var(--white-color); line-height:1.2; margin-bottom:22px; } /* ========================================================== DESCRIPTION ========================================================== */ .cta-content p{ max-width:680px; margin:0 auto; font-size:1.05rem; line-height:1.8; color:var(--text-light); } /* ========================================================== BUTTONS ========================================================== */ .cta-actions{ display:flex; justify-content:center; align-items:center; gap:20px; margin-top:42px; flex-wrap:wrap; position:relative; z-index:2; } .cta-actions .btn{ min-width:240px; } /* ========================================================== RESPONSIVE : 1200px ========================================================== */ @media (max-width:1200px){ .cta-card{ padding:60px 50px; } } /* ========================================================== RESPONSIVE : 992px ========================================================== */ @media (max-width:992px){ .exercise-cta{ padding:80px 0; } .cta-card{ padding:55px 40px; } .cta-content h2{ font-size:2.3rem; } } /* ========================================================== RESPONSIVE : 768px ========================================================== */ @media (max-width:768px){ .exercise-cta{ padding:70px 0; } .cta-card{ padding:45px 30px; border-radius:20px; } .cta-content h2{ font-size:2rem; } .cta-content p{ font-size:1rem; line-height:1.7; } .cta-actions{ flex-direction:column; gap:16px; } .cta-actions .btn{ width:100%; max-width:340px; } } /* ========================================================== RESPONSIVE : 576px ========================================================== */ @media (max-width:576px){ .exercise-cta{ padding:60px 0; } .cta-card{ padding:36px 24px; border-radius:16px; } .cta-badge{ font-size:.85rem; padding:8px 16px; margin-bottom:20px; } .cta-content h2{ font-size:1.7rem; margin-bottom:18px; } .cta-content p{ font-size:.95rem; } .cta-actions{ margin-top:32px; } } /* ========================================================== RESPONSIVE : 400px ========================================================== */ @media (max-width:400px){ .cta-card{ padding:30px 20px; } .cta-content h2{ font-size:1.5rem; } .cta-content p{ font-size:.9rem; } .cta-actions .btn{ min-width:100%; } } /* ========================================================== SECTION 01 : ARTICLE HERO of crave sugar ========================================================== */ .article-hero{ padding:80px 0; } /* ========================================================== HERO GRID ========================================================== */ .article-hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; align-items:center; gap:70px; } /* ========================================================== BREADCRUMB ========================================================== */ .breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:35px; font-size:14px; } .breadcrumb a{ color:var(--color-text-light); text-decoration:none; transition:.3s; } .breadcrumb a:hover{ color:var(--color-primary); } .breadcrumb span{ color:var(--color-text-muted); } /* ========================================================== CATEGORY BADGE ========================================================== */ .article-category{ display:inline-flex; align-items:center; padding:10px 18px; background:rgba(37,99,235,.12); border:1px solid rgba(37,99,235,.25); border-radius:999px; color:var(--color-primary); font-size:14px; font-weight:600; margin-bottom:24px; } /* ========================================================== ARTICLE TITLE ========================================================== */ .article-hero-content h1{ font-size:clamp(2.8rem,5vw,4.2rem); line-height:1.15; margin-bottom:24px; color:var(--color-heading); } /* ========================================================== ARTICLE DESCRIPTION ========================================================== */ .article-description{ max-width:650px; font-size:1.1rem; line-height:1.9; color:var(--color-text-light); margin-bottom:30px; } /* ========================================================== ARTICLE META ========================================================== */ .article-meta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:35px; } .article-meta span{ padding:10px 16px; background:var(--color-card); border:1px solid rgba(255,255,255,.08); border-radius:50px; color:var(--color-text-light); font-size:.9rem; } /* ========================================================== AUTHOR CARD ========================================================== */ .article-author{ display:flex; align-items:center; gap:18px; padding:22px; background:var(--color-card); border:1px solid rgba(255,255,255,.08); border-radius:18px; margin-bottom:30px; } .author-avatar{ width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,#2563eb,#1d4ed8); display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; font-weight:700; flex-shrink:0; } .author-details h3{ margin-bottom:6px; color:var(--color-heading); font-size:1.1rem; } .author-details p{ color:var(--color-text-light); font-size:.95rem; } /* ========================================================== TRUST BADGES ========================================================== */ .trust-badges{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:35px; } .trust-badge{ display:flex; align-items:center; gap:10px; padding:10px 16px; background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.2); border-radius:999px; color:var(--color-heading); font-size:.9rem; font-weight:500; } .trust-badge img{ width:18px; height:18px; } /* ========================================================== QUICK SUMMARY ========================================================== */ .article-summary{ background:linear-gradient( 180deg, rgba(37,99,235,.08), rgba(255,255,255,.02) ); border:1px solid rgba(37,99,235,.15); border-radius:22px; padding:28px; } .article-summary h2{ font-size:1.3rem; margin-bottom:20px; color:var(--color-heading); } .article-summary ul{ display:flex; flex-direction:column; gap:16px; padding-left:22px; } .article-summary li{ color:var(--color-text-light); line-height:1.8; } /* ========================================================== HERO IMAGE ========================================================== */ .article-hero-image{ position:relative; } .article-hero-image img{ width:100%; display:block; border-radius:28px; border:1px solid rgba(255,255,255,.08); box-shadow:0 35px 80px rgba(0,0,0,.35); } /* ========================================================== ARTICLE HERO RESPONSIVE ========================================================== */ @media (max-width:992px){ .article-hero{ padding:70px 0; } .article-hero-grid{ grid-template-columns:1fr; gap:50px; } .article-hero-image{ order:-1; max-width:420px; margin:0 auto; } .article-hero-image img{ aspect-ratio:9/16; object-fit:cover; } .article-description{ max-width:100%; } } /* ========================================================== TABLETS ========================================================== */ @media (max-width:768px){ .article-hero{ padding:60px 0; } .breadcrumb{ gap:8px; font-size:13px; margin-bottom:28px; } .article-category{ font-size:13px; padding:8px 16px; } .article-hero-content h1{ font-size:2.5rem; } .article-description{ font-size:1rem; line-height:1.8; } .article-meta{ gap:12px; } .article-meta span{ font-size:.9rem; } .article-author{ padding:20px; } .trust-badges{ gap:12px; } .article-summary{ padding:24px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:576px){ .article-hero{ padding:50px 0; } .breadcrumb{ font-size:12px; gap:6px; } .article-category{ margin-bottom:18px; } .article-hero-content h1{ font-size:2rem; line-height:1.15; } .article-description{ font-size:.96rem; line-height:1.8; margin-bottom:24px; } .article-meta{ flex-direction:column; align-items:flex-start; margin-bottom:24px; } .article-meta span{ width:100%; justify-content:center; text-align:center; } .article-author{ flex-direction:column; align-items:flex-start; gap:16px; } .trust-badges{ flex-direction:column; align-items:stretch; } .trust-badge{ justify-content:center; } .article-summary{ padding:22px; } .article-summary h2{ font-size:1.2rem; } .article-summary li{ line-height:1.7; } } /* ========================================================== SMALL PHONES ========================================================== */ @media (max-width:400px){ .article-hero{ padding:40px 0; } .breadcrumb{ font-size:11px; row-gap:4px; } .article-category{ font-size:12px; padding:7px 14px; } .article-hero-content h1{ font-size:1.75rem; } .article-description{ font-size:.92rem; } .article-meta span{ font-size:.85rem; padding:10px 14px; } .article-author{ padding:18px; } .author-avatar{ width:48px; height:48px; font-size:18px; } .author-details h3{ font-size:1rem; } .author-details p{ font-size:.85rem; } .trust-badge{ font-size:.85rem; padding:10px 14px; } .article-summary{ padding:18px; } .article-summary h2{ font-size:1.1rem; } .article-summary ul{ gap:12px; } } /* ========================================================== SECTION 02 : TABLE OF CONTENTS ========================================================== */ .article-toc{ padding:80px 0; } /* ========================================================== TOC CARD ========================================================== */ .toc-card{ background:var(--color-card); border:1px solid rgba(255,255,255,.08); border-radius:28px; padding:50px; overflow:hidden; position:relative; } .toc-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:linear-gradient( 90deg, var(--color-primary), transparent ); } /* ========================================================== TOC GRID ========================================================== */ .toc-navigation{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:40px; } /* ========================================================== TOC LINK ========================================================== */ .toc-navigation a{ display:flex; align-items:center; gap:18px; padding:20px 22px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:18px; text-decoration:none; transition:.35s; } .toc-navigation a:hover{ transform:translateY(-4px); border-color:rgba(37,99,235,.4); background:rgba(37,99,235,.08); } /* ========================================================== NUMBER ========================================================== */ .toc-number{ width:48px; height:48px; border-radius:14px; background:rgba(37,99,235,.12); border:1px solid rgba(37,99,235,.25); color:var(--color-primary); font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; } /* ========================================================== TITLE ========================================================== */ .toc-title{ flex:1; color:var(--color-heading); font-size:1rem; font-weight:600; line-height:1.6; } /* ========================================================== ARROW ========================================================== */ .toc-navigation a img{ width:20px; height:20px; opacity:.7; transition:.3s; } .toc-navigation a:hover img{ transform:translateX(6px); opacity:1; } /* ========================================================== RESPONSIVE ========================================================== */ @media(max-width:992px){ .toc-card{ padding:40px; } .toc-navigation{ grid-template-columns:1fr; } } @media(max-width:768px){ .article-toc{ padding:60px 0; } .toc-card{ padding:30px; border-radius:22px; } .toc-navigation{ gap:16px; margin-top:30px; } .toc-navigation a{ padding:18px; } .toc-number{ width:42px; height:42px; font-size:14px; } .toc-title{ font-size:.95rem; } } @media(max-width:576px){ .toc-card{ padding:24px; } .toc-navigation a{ gap:14px; padding:16px; } .toc-number{ width:38px; height:38px; border-radius:12px; font-size:13px; } .toc-title{ font-size:.92rem; line-height:1.5; } .toc-navigation a img{ width:18px; height:18px; } } @media(max-width:400px){ .article-toc{ padding:50px 0; } .toc-card{ padding:20px; border-radius:18px; } .toc-navigation{ gap:14px; } .toc-navigation a{ padding:14px; gap:12px; } .toc-number{ width:34px; height:34px; font-size:12px; } .toc-title{ font-size:.88rem; } } /* ========================================================== SECTION 04 : ARTICLE CONTENT ========================================================== */ .article-section{ padding:80px 0; } /* ========================================================== SECTION INTRO ========================================================== */ .section-intro{ max-width:700px; margin:20px auto 0; color:var(--color-text-light); font-size:1.05rem; line-height:1.8; } /* ========================================================== CONTENT BLOCK ========================================================== */ .content-block{ margin-top:50px; } .content-block p{ margin-bottom:28px; font-size:1.1rem; line-height:2; color:var(--color-text-light); } .content-block p:last-child{ margin-bottom:0; } /* ========================================================== FIGURE ========================================================== */ .content-figure{ margin:70px 0 0; } .figure-image{ overflow:hidden; border-radius:28px; border:1px solid rgba(255,255,255,.08); background:var(--color-card); } .figure-image img{ width:100%; display:block; aspect-ratio:9/16; object-fit:cover; transition:.5s; } .figure-image:hover img{ transform:scale(1.03); } /* ========================================================== FIGURE CAPTION ========================================================== */ .content-figure figcaption{ margin-top:20px; text-align:center; } .figure-label{ display:inline-flex; padding:6px 14px; border-radius:999px; background:rgba(37,99,235,.12); color:var(--color-primary); font-size:.85rem; font-weight:600; margin-bottom:14px; } .content-figure figcaption p{ max-width:700px; margin:auto; color:var(--color-text-light); line-height:1.8; } /* ========================================================== QUICK FACTS ========================================================== */ .quick-facts{ margin-top:70px; } .facts-header{ text-align:center; margin-bottom:45px; } .facts-header h3{ margin-top:18px; font-size:2rem; color:var(--color-heading); } /* ========================================================== FACT GRID ========================================================== */ .facts-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } /* ========================================================== FACT CARD ========================================================== */ .fact-card{ background:var(--color-card); border:1px solid rgba(255,255,255,.08); border-radius:22px; padding:28px; transition:.35s; } .fact-card:hover{ transform:translateY(-6px); border-color:rgba(37,99,235,.35); box-shadow:0 18px 45px rgba(0,0,0,.25); } .fact-card img{ width:28px; height:28px; margin-bottom:20px; } .fact-card p{ margin:0; color:var(--color-text-light); line-height:1.8; } /* ========================================================== RESPONSIVE ========================================================== */ @media(max-width:992px){ .article-section{ padding:70px 0; } .facts-grid{ gap:20px; } } @media(max-width:768px){ .article-section{ padding:60px 0; } .section-intro{ font-size:1rem; } .content-block{ margin-top:40px; } .content-block p{ font-size:1rem; } .content-figure{ margin-top:50px; } .facts-header{ margin-bottom:35px; } .facts-header h3{ font-size:1.7rem; } .facts-grid{ grid-template-columns:1fr; } } @media(max-width:576px){ .figure-image{ border-radius:22px; } .content-figure figcaption p{ font-size:.95rem; } .fact-card{ padding:22px; } } @media(max-width:400px){ .article-section{ padding:50px 0; } .section-intro{ font-size:.95rem; } .content-block p{ font-size:.95rem; line-height:1.9; } .facts-header h3{ font-size:1.45rem; } .fact-card{ padding:20px; border-radius:18px; } .fact-card img{ width:24px; height:24px; margin-bottom:16px; } } /* ========================================================== SECTION 05 : HOW YOUR BRAIN RESPONDS TO SUGAR ========================================================== */ .brain-timeline{ max-width:850px; margin:60px auto; display:flex; flex-direction:column; gap:28px; } /* ========================================================== TIMELINE STEP ========================================================== */ .timeline-step{ display:flex; align-items:flex-start; gap:24px; position:relative; } .timeline-step:not(:last-child)::after{ content:""; position:absolute; left:22px; top:60px; width:2px; height:70px; background:rgba(37,99,235,.25); } /* ========================================================== TIMELINE ICON ========================================================== */ .timeline-icon{ width:46px; height:46px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(37,99,235,.12); border:1px solid rgba(37,99,235,.25); } .timeline-icon img{ width:22px; height:22px; } /* ========================================================== TIMELINE CONTENT ========================================================== */ .timeline-content{ flex:1; background:var(--color-card); border:1px solid rgba(255,255,255,.08); border-radius:22px; padding:28px; transition:.35s; } .timeline-content:hover{ transform:translateY(-4px); border-color:rgba(37,99,235,.35); box-shadow:0 18px 45px rgba(0,0,0,.25); } .timeline-content h3{ margin-bottom:14px; font-size:1.2rem; color:var(--color-heading); } .timeline-content p{ margin:0; color:var(--color-text-light); line-height:1.8; } /* ========================================================== SCIENCE CARD ========================================================== */ .science-card{ margin:80px 0; display:flex; align-items:flex-start; gap:24px; padding:35px; background:linear-gradient( 135deg, rgba(37,99,235,.10), rgba(255,255,255,.02) ); border:1px solid rgba(37,99,235,.25); border-radius:28px; } .science-icon{ width:64px; height:64px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(37,99,235,.12); } .science-icon img{ width:30px; height:30px; } .science-content span{ display:inline-block; margin-bottom:12px; color:var(--color-primary); font-size:.9rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; } .science-content p{ margin:0; font-size:1.05rem; color:var(--color-text-light); line-height:1.9; } /* ========================================================== RESPONSIVE ========================================================== */ @media(max-width:992px){ .brain-timeline{ margin:50px auto; } .science-card{ padding:30px; } } @media(max-width:768px){ .brain-timeline{ gap:24px; } .timeline-step{ gap:18px; } .timeline-step:not(:last-child)::after{ left:20px; height:65px; } .timeline-content{ padding:22px; } .science-card{ flex-direction:column; text-align:center; align-items:center; margin:60px 0; } } @media(max-width:576px){ .timeline-icon{ width:40px; height:40px; } .timeline-icon img{ width:20px; height:20px; } .timeline-step:not(:last-child)::after{ left:19px; top:52px; } .timeline-content{ border-radius:18px; } .science-card{ border-radius:22px; padding:24px; } .science-icon{ width:56px; height:56px; } } @media(max-width:400px){ .timeline-content{ padding:18px; } .timeline-content h3{ font-size:1.05rem; } .timeline-content p{ font-size:.95rem; } .science-content p{ font-size:.95rem; } } /* ========================================================== 400PX ========================================================== */ @media(max-width:400px){ /* Timeline */ .brain-timeline{ margin:40px auto; gap:20px; } .timeline-step{ gap:14px; } .timeline-step:not(:last-child)::after{ left:17px; top:46px; height:58px; } /* Timeline Icon */ .timeline-icon{ width:36px; height:36px; } .timeline-icon img{ width:18px; height:18px; } /* Timeline Card */ .timeline-content{ padding:16px; border-radius:16px; } .timeline-content h3{ margin-bottom:10px; font-size:1rem; } .timeline-content p{ font-size:.92rem; line-height:1.7; } /* Science Card */ .science-card{ margin:50px 0; padding:20px; border-radius:18px; gap:18px; } .science-icon{ width:50px; height:50px; } .science-icon img{ width:24px; height:24px; } .science-content span{ font-size:.8rem; letter-spacing:.8px; margin-bottom:10px; } .science-content p{ font-size:.92rem; line-height:1.7; } } /* ========================================================== SECTION 06 : REASONS GRID ========================================================== */ .reasons-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:60px; } /* ========================================================== REASON CARD ========================================================== */ .reason-card{ background:var(--color-card); border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:32px; transition:.35s ease; } .reason-card:hover{ transform:translateY(-8px); border-color:rgba(37,99,235,.35); box-shadow:0 20px 45px rgba(0,0,0,.28); } /* ========================================================== ICON ========================================================== */ .reason-card img{ width:48px; height:48px; margin-bottom:24px; } /* ========================================================== TITLE ========================================================== */ .reason-card h3{ margin-bottom:18px; font-size:1.35rem; color:var(--color-heading); } /* ========================================================== DESCRIPTION ========================================================== */ .reason-card p{ margin:0; color:var(--color-text-light); line-height:1.9; } /* ========================================================== 992PX ========================================================== */ @media(max-width:992px){ .reasons-grid{ grid-template-columns:repeat(2,1fr); gap:24px; } .reason-card{ padding:28px; } } /* ========================================================== 768PX ========================================================== */ @media(max-width:768px){ .reasons-grid{ gap:20px; margin-top:50px; } .reason-card{ padding:24px; border-radius:20px; } .reason-card img{ width:42px; height:42px; margin-bottom:20px; } .reason-card h3{ font-size:1.2rem; margin-bottom:14px; } } /* ========================================================== 576PX ========================================================== */ @media(max-width:576px){ .reasons-grid{ grid-template-columns:1fr; } } /* ========================================================== 400PX ========================================================== */ @media(max-width:400px){ .reasons-grid{ margin-top:40px; gap:16px; } .reason-card{ padding:20px; border-radius:18px; } .reason-card img{ width:36px; height:36px; margin-bottom:16px; } .reason-card h3{ font-size:1.05rem; margin-bottom:10px; } .reason-card p{ font-size:.92rem; line-height:1.7; } } /* ========================================================== SECTION 07 : ACTION LIST ========================================================== */ .action-list{ display:flex; flex-direction:column; gap:24px; margin-top:60px; } /* ========================================================== ACTION CARD ========================================================== */ .action-card{ display:flex; align-items:flex-start; gap:24px; padding:28px; background:var(--color-card); border:1px solid rgba(255,255,255,.08); border-radius:24px; transition:.35s ease; } .action-card:hover{ transform:translateY(-5px); border-color:rgba(37,99,235,.35); box-shadow:0 20px 45px rgba(0,0,0,.25); } /* ========================================================== ICON ========================================================== */ .action-card img{ width:40px; height:40px; flex-shrink:0; } /* ========================================================== CONTENT ========================================================== */ .action-card h3{ margin-bottom:12px; font-size:1.3rem; color:var(--color-heading); } .action-card p{ margin:0; color:var(--color-text-light); line-height:1.9; } /* ========================================================== EXPERT TIP ========================================================== */ .expert-tip{ display:flex; align-items:flex-start; gap:24px; margin-top:70px; padding:35px; border-radius:28px; background:linear-gradient( 135deg, rgba(37,99,235,.10), rgba(255,255,255,.02) ); border:1px solid rgba(37,99,235,.25); } .tip-icon{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:50%; background:rgba(37,99,235,.12); } .tip-icon img{ width:30px; height:30px; } .tip-content span{ display:inline-block; margin-bottom:12px; color:var(--color-primary); font-size:.9rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; } .tip-content p{ margin:0; font-size:1.05rem; line-height:1.9; color:var(--color-text-light); } /* ========================================================== 992PX ========================================================== */ @media(max-width:992px){ .action-list{ margin-top:50px; } .action-card{ padding:24px; } .expert-tip{ padding:30px; } } /* ========================================================== 768PX ========================================================== */ @media(max-width:768px){ .action-card{ gap:18px; padding:22px; border-radius:20px; } .action-card img{ width:34px; height:34px; } .action-card h3{ font-size:1.15rem; } .expert-tip{ flex-direction:column; align-items:center; text-align:center; gap:20px; margin-top:60px; } } /* ========================================================== 576PX ========================================================== */ @media(max-width:576px){ .action-list{ gap:18px; } .action-card{ padding:20px; } .tip-icon{ width:56px; height:56px; } .tip-icon img{ width:26px; height:26px; } } /* ========================================================== 400PX ========================================================== */ @media(max-width:400px){ .action-list{ margin-top:40px; gap:16px; } .action-card{ gap:14px; padding:18px; border-radius:18px; } .action-card img{ width:30px; height:30px; } .action-card h3{ margin-bottom:8px; font-size:1rem; } .action-card p{ font-size:.92rem; line-height:1.7; } .expert-tip{ margin-top:50px; padding:20px; border-radius:20px; } .tip-icon{ width:50px; height:50px; } .tip-icon img{ width:22px; height:22px; } .tip-content span{ font-size:.8rem; } .tip-content p{ font-size:.92rem; line-height:1.7; } } /* ========================================================== SECTION 08 : FOOD LIST ========================================================== */ .food-list{ display:flex; flex-direction:column; gap:32px; margin-top:60px; } /* ========================================================== FOOD CARD ========================================================== */ .food-card{ display:grid; grid-template-columns:260px 1fr; align-items:center; gap:30px; padding:24px; background:var(--color-card); border:1px solid rgba(255,255,255,.08); border-radius:24px; overflow:hidden; transition:.35s ease; } .food-card:hover{ transform:translateY(-6px); border-color:rgba(37,99,235,.35); box-shadow:0 20px 45px rgba(0,0,0,.28); } /* ========================================================== IMAGE ========================================================== */ .food-card img{ width:100%; height:220px; object-fit:cover; border-radius:18px; } /* ========================================================== CONTENT ========================================================== */ .food-content h3{ margin-bottom:16px; font-size:1.6rem; color:var(--color-heading); } .food-content p{ margin:0; color:var(--color-text-light); line-height:1.9; } /* ========================================================== 992PX ========================================================== */ @media(max-width:992px){ .food-card{ grid-template-columns:220px 1fr; gap:24px; } .food-card img{ height:190px; } } /* ========================================================== 768PX ========================================================== */ @media(max-width:768px){ .food-list{ gap:24px; margin-top:50px; } .food-card{ grid-template-columns:1fr; padding:20px; gap:20px; border-radius:20px; } .food-card img{ height:260px; } .food-content h3{ font-size:1.35rem; } } /* ========================================================== 576PX ========================================================== */ @media(max-width:576px){ .food-card img{ height:220px; } } /* ========================================================== 400PX ========================================================== */ @media(max-width:400px){ .food-list{ margin-top:40px; gap:18px; } .food-card{ padding:16px; border-radius:18px; } .food-card img{ height:180px; border-radius:14px; } .food-content h3{ margin-bottom:10px; font-size:1.15rem; } .food-content p{ font-size:.92rem; line-height:1.7; } } /* ========================================================== SECTION 09 : KEY TAKEAWAYS ========================================================== */ .takeaway-list{ display:flex; flex-direction:column; gap:20px; margin-top:60px; } /* ========================================================== TAKEAWAY CARD ========================================================== */ .takeaway-card{ display:flex; align-items:flex-start; gap:20px; padding:24px 28px; background:var(--color-card); border:1px solid rgba(255,255,255,.08); border-radius:22px; transition:.35s ease; } .takeaway-card:hover{ transform:translateY(-4px); border-color:rgba(37,99,235,.35); box-shadow:0 18px 40px rgba(0,0,0,.25); } .takeaway-card img{ width:32px; height:32px; flex-shrink:0; } .takeaway-card p{ margin:0; color:var(--color-text-light); line-height:1.9; } /* ========================================================== FINAL THOUGHT ========================================================== */ .article-summary{ display:flex; align-items:flex-start; gap:24px; margin-top:70px; padding:36px; background:linear-gradient( 135deg, rgba(37,99,235,.10), rgba(255,255,255,.02) ); border:1px solid rgba(37,99,235,.25); border-radius:28px; } .summary-icon{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:50%; background:rgba(37,99,235,.12); } .summary-icon img{ width:30px; height:30px; } .summary-content h3{ margin-bottom:14px; font-size:1.5rem; color:var(--color-heading); } .summary-content p{ margin:0; color:var(--color-text-light); line-height:1.9; } /* ========================================================== 992PX ========================================================== */ @media(max-width:992px){ .takeaway-list{ margin-top:50px; } .article-summary{ padding:30px; } } /* ========================================================== 768PX ========================================================== */ @media(max-width:768px){ .takeaway-card{ padding:22px; gap:16px; border-radius:20px; } .takeaway-card img{ width:28px; height:28px; } .article-summary{ flex-direction:column; align-items:center; text-align:center; gap:20px; margin-top:60px; } .summary-content h3{ font-size:1.35rem; } } /* ========================================================== 576PX ========================================================== */ @media(max-width:576px){ .takeaway-card{ padding:20px; } .summary-icon{ width:56px; height:56px; } .summary-icon img{ width:26px; height:26px; } } /* ========================================================== 400PX ========================================================== */ @media(max-width:400px){ .takeaway-list{ margin-top:40px; gap:16px; } .takeaway-card{ gap:14px; padding:18px; border-radius:18px; } .takeaway-card img{ width:24px; height:24px; } .takeaway-card p{ font-size:.92rem; line-height:1.7; } .article-summary{ margin-top:50px; padding:20px; border-radius:20px; gap:16px; } .summary-icon{ width:48px; height:48px; } .summary-icon img{ width:22px; height:22px; } .summary-content h3{ margin-bottom:10px; font-size:1.15rem; } .summary-content p{ font-size:.92rem; line-height:1.7; } } /* ========================================================== SECTION 11 : CONTINUE LEARNING ========================================================== */ .continue-learning{ padding:90px 0; } /* ========================================================== LEARNING GRID ========================================================== */ .learning-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; margin-top:60px; } /* ========================================================== LEARNING CARD ========================================================== */ .learning-card{ background:var(--color-card); border:1px solid rgba(255,255,255,.08); border-radius:24px; overflow:hidden; transition:.35s ease; } .learning-card:hover{ transform:translateY(-8px); border-color:rgba(37,99,235,.35); box-shadow:0 25px 60px rgba(0,0,0,.35); } /* ========================================================== LINK ========================================================== */ .learning-card-link{ display:block; color:inherit; text-decoration:none; } /* ========================================================== IMAGE ========================================================== */ .learning-image{ position:relative; overflow:hidden; aspect-ratio:16/9; } .learning-image img{ width:100%; height:100%; object-fit:cover; display:block; transition:.5s ease; } .learning-card:hover .learning-image img{ transform:scale(1.08); } /* ========================================================== CATEGORY BADGE ========================================================== */ .learning-category{ position:absolute; top:20px; left:20px; display:inline-flex; align-items:center; justify-content:center; padding:8px 16px; border-radius:999px; background:rgba(37,99,235,.95); color:#fff; font-size:.82rem; font-weight:600; letter-spacing:.5px; backdrop-filter:blur(8px); } /* ========================================================== CONTENT ========================================================== */ .learning-content{ padding:28px; } .learning-content h3{ margin-bottom:16px; font-size:1.45rem; color:var(--color-heading); transition:.3s; } .learning-card:hover .learning-content h3{ color:var(--color-primary); } .learning-content p{ margin-bottom:26px; color:var(--color-text-light); line-height:1.8; } /* ========================================================== READ GUIDE ========================================================== */ .learning-read{ display:inline-flex; align-items:center; gap:10px; color:var(--color-primary); font-weight:700; transition:.3s; } .learning-read img{ width:18px; transition:.3s; } .learning-card:hover .learning-read img{ transform:translateX(6px); } /* ========================================================== 992PX ========================================================== */ @media(max-width:992px){ .learning-grid{ gap:24px; } .learning-content{ padding:24px; } } /* ========================================================== 768PX ========================================================== */ @media(max-width:768px){ .learning-grid{ grid-template-columns:1fr; } .learning-content h3{ font-size:1.3rem; } } /* ========================================================== 576PX ========================================================== */ @media(max-width:576px){ .continue-learning{ padding:70px 0; } .learning-grid{ margin-top:45px; gap:20px; } .learning-content{ padding:22px; } .learning-category{ top:16px; left:16px; padding:7px 14px; font-size:.75rem; } } /* ========================================================== 400PX ========================================================== */ @media(max-width:400px){ .continue-learning{ padding:60px 0; } .learning-grid{ gap:18px; margin-top:40px; } .learning-card{ border-radius:20px; } .learning-content{ padding:18px; } .learning-content h3{ font-size:1.12rem; margin-bottom:12px; } .learning-content p{ margin-bottom:20px; font-size:.92rem; line-height:1.7; } .learning-read{ font-size:.95rem; } .learning-read img{ width:16px; } .learning-category{ font-size:.72rem; padding:6px 12px; } } /* ========================================================== SECTION 12 : NEWSLETTER CTA ========================================================== */ .newsletter-cta{ padding:100px 0; } /* ========================================================== NEWSLETTER CARD ========================================================== */ .newsletter-card{ max-width:900px; margin:0 auto; padding:70px 60px; text-align:center; border-radius:32px; background: linear-gradient( 135deg, rgba(37,99,235,.18), rgba(15,23,42,.95) ); border:1px solid rgba(37,99,235,.25); box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow:hidden; position:relative; } .newsletter-card::before{ content:""; position:absolute; inset:0; background: radial-gradient( circle at top right, rgba(37,99,235,.20), transparent 45% ); pointer-events:none; } /* ========================================================== CONTENT ========================================================== */ .newsletter-content{ position:relative; z-index:2; } .newsletter-content h2{ margin:24px 0; font-size:2.5rem; color:var(--color-heading); } .newsletter-content p{ max-width:700px; margin:0 auto; color:var(--color-text-light); line-height:1.9; } /* ========================================================== BADGE ========================================================== */ .newsletter-badge{ display:inline-flex; align-items:center; gap:14px; padding:10px 22px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:var(--color-primary); font-weight:600; } /* ========================================================== FORM ========================================================== */ .newsletter-form{ display:flex; gap:18px; max-width:720px; margin:50px auto 30px; position:relative; z-index:2; } /* ========================================================== INPUT ========================================================== */ .newsletter-form input{ flex:1; padding:20px 24px; border:none; outline:none; border-radius:18px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); color:#fff; font-size:1rem; transition:.3s; } .newsletter-form input::placeholder{ color:rgba(255,255,255,.55); } .newsletter-form input:focus{ border-color:var(--color-primary); box-shadow:0 0 0 4px rgba(37,99,235,.15); } /* ========================================================== BUTTON ========================================================== */ .newsletter-form button{ display:flex; align-items:center; justify-content:center; gap:12px; padding:20px 34px; border:none; border-radius:18px; background:var(--color-primary); color:#fff; font-size:1rem; font-weight:700; cursor:pointer; transition:.35s; } .newsletter-form button img{ width:18px; transition:.3s; } .newsletter-form button:hover{ transform:translateY(-3px); box-shadow:0 18px 35px rgba(37,99,235,.35); } .newsletter-form button:hover img{ transform:translateX(6px); } /* ========================================================== TRUST ========================================================== */ .newsletter-trust{ display:inline-flex; align-items:center; justify-content:center; gap:12px; color:var(--color-text-light); position:relative; z-index:2; } .newsletter-trust img{ width:22px; } .newsletter-trust p{ margin:0; font-size:.95rem; } /* ========================================================== 992PX ========================================================== */ @media(max-width:992px){ .newsletter-card{ padding:60px 45px; } .newsletter-content h2{ font-size:2.2rem; } } /* ========================================================== 768PX ========================================================== */ @media(max-width:768px){ .newsletter-card{ padding:50px 35px; } .newsletter-form{ flex-direction:column; } .newsletter-form button{ width:100%; } .newsletter-content h2{ font-size:2rem; } } /* ========================================================== 576PX ========================================================== */ @media(max-width:576px){ .newsletter-cta{ padding:80px 0; } .newsletter-card{ padding:40px 25px; border-radius:24px; } .newsletter-content h2{ font-size:1.75rem; } .newsletter-content p{ font-size:.96rem; } .newsletter-form{ margin:40px auto 25px; } } /* ========================================================== 400PX ========================================================== */ @media(max-width:400px){ .newsletter-cta{ padding:60px 0; } .newsletter-card{ padding:30px 20px; border-radius:20px; } .newsletter-badge{ gap:10px; padding:8px 16px; font-size:.82rem; } .newsletter-content h2{ margin:20px 0; font-size:1.45rem; } .newsletter-content p{ font-size:.9rem; line-height:1.7; } .newsletter-form{ gap:14px; } .newsletter-form input{ padding:16px 18px; font-size:.95rem; } .newsletter-form button{ padding:16px; font-size:.95rem; } .newsletter-trust{ flex-direction:column; gap:8px; } .newsletter-trust p{ font-size:.85rem; } } /* ========================================================== ARTICLE HERO of complete-protein-guide-for -beginner ========================================================== */ .article-hero { position: relative; overflow: hidden; padding: 6rem 0; background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 40%), radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.08), transparent 45%), linear-gradient( 180deg, #0b1120 0%, #111827 100%); } /* ========================================================== CONTAINER ========================================================== */ .article-hero .container { position: relative; z-index: 2; } /* ========================================================== HERO GRID ========================================================== */ .article-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 4rem; align-items: center; } /* ========================================================== HERO CONTENT ========================================================== */ .article-hero-content { display: flex; flex-direction: column; gap: 2rem; } /* ========================================================== GLOBAL SPACING ========================================================== */ .article-hero-content>* { margin: 0; } /* ========================================================== BACKGROUND DECORATION ========================================================== */ .article-hero::before { content: ""; position: absolute; width: 450px; height: 450px; top: -180px; right: -120px; border-radius: 50%; background: rgba(37, 99, 235, .12); filter: blur(120px); pointer-events: none; } .article-hero::after { content: ""; position: absolute; width: 320px; height: 320px; left: -120px; bottom: -120px; border-radius: 50%; background: rgba(59, 130, 246, .08); filter: blur(100px); pointer-events: none; } /* ========================================================== BREADCRUMB ========================================================== */ .breadcrumb { margin-bottom: 2.5rem; } .breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; padding: 0; margin: 0; list-style: none; } /* ========================================================== BREADCRUMB LINKS ========================================================== */ .breadcrumb a { position: relative; color: rgba(255, 255, 255, .72); font-size: .95rem; font-weight: 500; text-decoration: none; transition: color .3s ease, transform .3s ease; } .breadcrumb a:hover { color: #ffffff; transform: translateY(-1px); } /* ========================================================== SEPARATOR ========================================================== */ .breadcrumb-separator { color: rgba(255,255,255,.28); user-select: none; } /* ========================================================== CURRENT PAGE ========================================================== */ .breadcrumb-current { color: #60a5fa; font-weight: 600; } /* ========================================================== PREMIUM UNDERLINE ========================================================== */ .breadcrumb a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, #3b82f6, #60a5fa); transition: width .3s ease; } .breadcrumb a:hover::after { width: 100%; } /* ========================================================== KEYBOARD ACCESSIBILITY ========================================================== */ .breadcrumb a:focus-visible { outline: 2px solid #3b82f6; outline-offset: 4px; border-radius: 6px; } /* ========================================================== ARTICLE CATEGORY ========================================================== */ .article-category { display: inline-flex; align-items: center; align-self: flex-start; padding: .65rem 1.2rem; border: 1px solid rgba(59, 130, 246, .25); border-radius: 999px; background: rgba(37, 99, 235, .10); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #60a5fa; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* ========================================================== ARTICLE TITLE ========================================================== */ .article-hero h1 { max-width: 14ch; margin: 0; color: #ffffff; font-size: clamp(2.75rem, 5vw, 4.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; } /* ========================================================== ARTICLE DESCRIPTION ========================================================== */ .article-description { max-width: 65ch; margin: 0; color: rgba(255,255,255,.78); font-size: 1.15rem; font-weight: 400; line-height: 1.85; } /* ========================================================== TYPOGRAPHY SPACING ========================================================== */ .article-hero-content h1 { margin-top: .35rem; } .article-description { margin-top: -.5rem; } /* ========================================================== GUIDE HIGHLIGHTS ========================================================== */ .guide-highlights { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: .5rem; } /* ========================================================== GUIDE HIGHLIGHT CHIP ========================================================== */ .guide-highlight { display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.15rem; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: rgba(255,255,255,.88); font-size: .92rem; font-weight: 600; line-height: 1; white-space: nowrap; transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; } /* ========================================================== HOVER EFFECT ========================================================== */ .guide-highlight:hover { transform: translateY(-2px); background: rgba(37,99,235,.12); border-color: rgba(96,165,250,.35); color: #ffffff; box-shadow: 0 10px 24px rgba(37,99,235,.18); } /* ========================================================== KEYBOARD ACCESSIBILITY ========================================================== */ .guide-highlight:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; } /* ========================================================== OPTIONAL ICON SUPPORT ========================================================== */ .guide-highlight img, .guide-highlight svg { width: 16px; height: 16px; margin-right: .5rem; flex-shrink: 0; } /* ========================================================== ARTICLE META ========================================================== */ .article-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .5rem; } /* ========================================================== META ITEM ========================================================== */ .meta-item { display: inline-flex; align-items: center; gap: .75rem; padding: .85rem 1.2rem; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: rgba(255,255,255,.82); font-size: .95rem; font-weight: 500; line-height: 1.4; transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease; } /* ========================================================== META ICON ========================================================== */ .meta-item img { width: 18px; height: 18px; flex-shrink: 0; opacity: .9; } /* ========================================================== EMPHASIZED VALUE ========================================================== */ .meta-item strong { color: #ffffff; font-weight: 700; } /* ========================================================== HOVER EFFECT ========================================================== */ .meta-item:hover { transform: translateY(-3px); border-color: rgba(96,165,250,.30); background: rgba(37,99,235,.08); box-shadow: 0 12px 30px rgba(37,99,235,.15); } /* ========================================================== ACCESSIBILITY ========================================================== */ .meta-item:focus-within { outline: 2px solid #60a5fa; outline-offset: 3px; } /* ========================================================== TRUST BADGES ========================================================== */ .trust-badges { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: .5rem; } /* ========================================================== TRUST BADGE ========================================================== */ .trust-badge { display: inline-flex; align-items: center; gap: .65rem; padding: .7rem 1.15rem; border-radius: 999px; border: 1px solid rgba(34, 197, 94, .18); background: rgba(34, 197, 94, .06); color: rgba(255,255,255,.92); font-size: .92rem; font-weight: 600; line-height: 1; transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease; } /* ========================================================== TRUST ICON ========================================================== */ .trust-badge img { width: 16px; height: 16px; flex-shrink: 0; opacity: .95; } /* ========================================================== HOVER ========================================================== */ .trust-badge:hover { transform: translateY(-2px); background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.35); box-shadow: 0 10px 24px rgba(34,197,94,.15); } /* ========================================================== ACCESSIBILITY ========================================================== */ .trust-badge:focus-visible { outline: 2px solid #22c55e; outline-offset: 3px; } /* ========================================================== AUTHOR CARD ========================================================== */ .article-author { display: flex; align-items: center; gap: 1.5rem; padding: 1.75rem; border: 1px solid rgba(255,255,255,.08); border-radius: 24px; background: linear-gradient( 135deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } /* ========================================================== HOVER EFFECT ========================================================== */ .article-author:hover { transform: translateY(-4px); border-color: rgba(59,130,246,.30); box-shadow: 0 18px 45px rgba(37,99,235,.12); } /* ========================================================== AUTHOR AVATAR ========================================================== */ .author-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; background: linear-gradient( 135deg, #2563eb, #60a5fa); color: #ffffff; font-size: 1.45rem; font-weight: 700; letter-spacing: .05em; box-shadow: 0 10px 30px rgba(37,99,235,.30); } /* ========================================================== AUTHOR DETAILS ========================================================== */ .author-details { display: flex; flex-direction: column; gap: .4rem; min-width: 0; } /* ========================================================== AUTHOR NAME ========================================================== */ .author-details h3 { margin: 0; color: #ffffff; font-size: 1.3rem; font-weight: 700; } /* ========================================================== AUTHOR ROLE ========================================================== */ .author-role { margin: 0; color: #60a5fa; font-size: .95rem; font-weight: 600; } /* ========================================================== AUTHOR DESCRIPTION ========================================================== */ .author-description { margin: .35rem 0 0; color: rgba(255,255,255,.72); font-size: .95rem; line-height: 1.75; max-width: 60ch; } /* ========================================================== WHAT YOU'LL LEARN ========================================================== */ .article-summary { position: relative; padding: 2rem; border: 1px solid rgba(255,255,255,.08); border-radius: 24px; background: linear-gradient( 135deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } /* ========================================================== TOP ACCENT ========================================================== */ .article-summary::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient( 90deg, #2563eb, #60a5fa); } /* ========================================================== HOVER ========================================================== */ .article-summary:hover { transform: translateY(-4px); border-color: rgba(59,130,246,.30); box-shadow: 0 20px 45px rgba(37,99,235,.12); } /* ========================================================== SUMMARY TITLE ========================================================== */ .article-summary h2 { margin: 0; color: #ffffff; font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; } /* ========================================================== INTRODUCTION ========================================================== */ .summary-intro { margin: 1rem 0 1.8rem; color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.8; } /* ========================================================== LIST ========================================================== */ .article-summary ul { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; } /* ========================================================== LIST ITEM ========================================================== */ .article-summary li { position: relative; padding-left: 2.4rem; color: rgba(255,255,255,.88); font-size: 1rem; line-height: 1.75; } /* ========================================================== CUSTOM CHECK ICON ========================================================== */ .article-summary li::before { content: "✓"; position: absolute; top: .15rem; left: 0; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: linear-gradient( 135deg, #2563eb, #60a5fa); color: #ffffff; font-size: .8rem; font-weight: 700; box-shadow: 0 8px 18px rgba(37,99,235,.25); } /* ========================================================== LIST ITEM HOVER ========================================================== */ .article-summary li { transition: transform .25s ease, color .25s ease; } .article-summary li:hover { transform: translateX(4px); color: #ffffff; } /* ========================================================== HERO IMAGE ========================================================== */ .hero-image { position: relative; display: flex; align-items: center; justify-content: center; } /* ========================================================== IMAGE FIGURE ========================================================== */ .hero-image figure { position: relative; margin: 0; width: 100%; overflow: hidden; border-radius: 28px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 25px 60px rgba(0,0,0,.35), 0 12px 30px rgba(37,99,235,.12); transition: transform .45s ease, border-color .45s ease, box-shadow .45s ease; } /* ========================================================== HERO IMAGE ========================================================== */ .hero-image img { display: block; width: 100%; height: auto; object-fit: cover; transition: transform .7s ease, filter .45s ease; } /* ========================================================== IMAGE HOVER ========================================================== */ .hero-image figure:hover { transform: translateY(-8px); border-color: rgba(96,165,250,.30); box-shadow: 0 35px 80px rgba(0,0,0,.45), 0 18px 40px rgba(37,99,235,.18); } .hero-image figure:hover img { transform: scale(1.04); } /* ========================================================== IMAGE OVERLAY ========================================================== */ .hero-image figure::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(37,99,235,.06), rgba(0,0,0,.04) ); pointer-events: none; z-index: 1; } /* ========================================================== BLUE GLOW ========================================================== */ .hero-image::after { content: ""; position: absolute; width: 80%; height: 80%; border-radius: 50%; background: radial-gradient( circle, rgba(37,99,235,.20), transparent 70% ); filter: blur(60px); z-index: -1; opacity: .8; } /* ========================================================== IMAGE CAPTION ========================================================== */ .hero-image figcaption { margin-top: .85rem; text-align: center; color: rgba(255,255,255,.58); font-size: .85rem; line-height: 1.6; } /* ========================================================== HERO ANIMATIONS ========================================================== */ /* Smooth scrolling */ html { scroll-behavior: smooth; } /* ========================================================== HERO CONTENT FADE IN ========================================================== */ .article-hero-content { animation: heroFadeUp .8s ease-out both; } /* ========================================================== HERO IMAGE FADE IN ========================================================== */ .hero-image { animation: heroImageReveal 1s ease-out .2s both; } /* ========================================================== FADE UP ========================================================== */ @keyframes heroFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================== IMAGE REVEAL ========================================================== */ @keyframes heroImageReveal { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: translateX(0) scale(1); } } /* ========================================================== GLOBAL TRANSITIONS ========================================================== */ .article-hero * { transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease; } /* ========================================================== PREMIUM LINK ANIMATION ========================================================== */ .article-hero a { transition: color .3s ease, opacity .3s ease; } .article-hero a:hover { opacity: .9; } /* ========================================================== IMAGE GPU ACCELERATION ========================================================== */ .hero-image img { will-change: transform; transform: translateZ(0); } /* ========================================================== CARD GPU ACCELERATION ========================================================== */ .article-author, .article-summary, .meta-item, .guide-highlight, .trust-badge, .hero-image figure { will-change: transform; } /* ========================================================== REDUCED MOTION SUPPORT ========================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ========================================================== RESPONSIVE DESIGN ========================================================== */ /* ========================================================== LARGE TABLETS & SMALL LAPTOPS ========================================================== */ @media (max-width: 1200px) { .article-hero-grid { gap: 3rem; } } /* ========================================================== TABLET ========================================================== */ @media (max-width: 992px) { .article-hero { padding: 5rem 0; } .article-hero-grid { grid-template-columns: 1fr; gap: 3rem; } .article-hero-content { order: 1; } .hero-image { order: 2; max-width: 700px; margin: 0 auto; } .article-title { font-size: clamp(2.4rem, 5vw, 3.4rem); } .article-description { max-width: 100%; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 768px) { .article-hero { padding: 4rem 0; } .article-title { font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1.15; } .article-description { font-size: 1rem; } .guide-highlights, .article-meta, .trust-badges { gap: .75rem; } .guide-highlight, .meta-item, .trust-badge { width: 100%; justify-content: flex-start; } .article-author { flex-direction: column; align-items: flex-start; text-align: left; padding: 1.5rem; } .author-avatar { width: 64px; height: 64px; font-size: 1.25rem; } .article-summary { padding: 1.5rem; } .article-summary h2 { font-size: 1.3rem; } .summary-intro { font-size: .95rem; } .article-summary li { padding-left: 2rem; font-size: .95rem; } .hero-image figure { border-radius: 22px; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media (max-width: 576px) { .article-hero { padding: 3rem 0; } .article-title { font-size: 2rem; } .article-meta, .guide-highlights, .trust-badges { flex-direction: column; } .meta-item, .guide-highlight, .trust-badge { width: 100%; } .article-author { gap: 1rem; } .author-details h3 { font-size: 1.15rem; } .author-role { font-size: .9rem; } .author-description { font-size: .9rem; } .article-summary { padding: 1.25rem; } .article-summary li::before { width: 1.3rem; height: 1.3rem; font-size: .7rem; } .hero-image figure { border-radius: 18px; } } /* ========================================================== EXTRA SMALL DEVICES ========================================================== */ @media (max-width: 400px) { .article-title { font-size: 1.75rem; } .category-badge { font-size: .75rem; padding: .55rem .9rem; } .meta-item, .guide-highlight, .trust-badge { padding: .75rem 1rem; font-size: .85rem; } } /* ========================================================== SECTION 02 : INSIDE THIS GUIDE ========================================================== */ .guide-overview { position: relative; padding: var(--space-16) 0; overflow: hidden; } /* ========================================================== BACKGROUND EFFECTS ========================================================== */ .guide-overview::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at top right, rgba(37,99,235,.08), transparent 55%); pointer-events: none; } .guide-overview::after { content: ""; position: absolute; bottom: -220px; left: -220px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient( circle, rgba(96,165,250,.08), transparent 70%); filter: blur(80px); pointer-events: none; } /* ========================================================== CONTAINER ========================================================== */ .guide-overview .container { position: relative; z-index: 1; } /* ========================================================== GRID ========================================================== */ .guide-overview-grid { display: grid; grid-template-columns: 1.5fr .9fr; gap: var(--space-12); align-items: start; margin-top: var(--space-12); } /* ========================================================== SECTION HEADER ========================================================== */ .guide-overview .section-header { max-width: 860px; margin: 0 auto var(--space-12); text-align: center; } /* ========================================================== SECTION BADGE ========================================================== */ .guide-overview .section-badge { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); padding: .75rem 1.25rem; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-full); background: rgba(255,255,255,.04); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--color-primary-300); font-size: .9rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } /* ========================================================== BADGE ICON ========================================================== */ .guide-overview .section-badge .icon-circle { display: flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: linear-gradient( 135deg, var(--color-primary-500), var(--color-primary-700)); box-shadow: 0 10px 30px rgba(37,99,235,.35); flex-shrink: 0; } .guide-overview .section-badge img { width: 1rem; height: 1rem; object-fit: contain; } /* ========================================================== SECTION TITLE ========================================================== */ .guide-overview .section-title { margin-bottom: var(--space-5); font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--color-text-primary); text-wrap: balance; } /* ========================================================== SECTION DESCRIPTION ========================================================== */ .guide-overview .section-description { max-width: 760px; margin: 0 auto; color: var(--color-text-secondary); font-size: 1.1rem; line-height: 1.85; text-wrap: pretty; } /* ========================================================== LEARNING OUTCOMES ========================================================== */ .guide-overview-content { display: flex; flex-direction: column; } /* ========================================================== CONTENT HEADING ========================================================== */ .guide-overview-content h3 { margin-bottom: var(--space-5); color: var(--color-text-primary); font-size: clamp(1.6rem, 2vw, 2rem); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; } /* ========================================================== INTRODUCTION ========================================================== */ .overview-introduction { margin-bottom: var(--space-8); color: var(--color-text-secondary); font-size: 1.05rem; line-height: 1.9; text-wrap: pretty; } /* ========================================================== LEARNING LIST ========================================================== */ .learning-list { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; } /* ========================================================== LEARNING ITEM ========================================================== */ .learning-list li { position: relative; display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-6); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-xl); background: rgba(255,255,255,.03); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--color-text-secondary); line-height: 1.8; transition: transform var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal); } /* ========================================================== CHECK ICON ========================================================== */ .learning-list li::before { content: "✓"; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.2rem; height: 2.2rem; margin-top: .15rem; border-radius: 50%; background: linear-gradient( 135deg, #22c55e, #16a34a); color: #ffffff; font-size: 1rem; font-weight: 700; box-shadow: 0 10px 24px rgba(34,197,94,.25); } /* ========================================================== HOVER EFFECT ========================================================== */ .learning-list li:hover { transform: translateY(-4px); border-color: rgba(59,130,246,.28); background: rgba(255,255,255,.05); box-shadow: 0 20px 45px rgba(0,0,0,.28); } /* ========================================================== SIDEBAR ========================================================== */ .guide-overview-sidebar { display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: 6rem; } /* ========================================================== SIDEBAR CARD ========================================================== */ .guide-info-card, .guide-highlight-card { position: relative; overflow: hidden; padding: var(--space-7); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-2xl); background: rgba(255,255,255,.04); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: transform var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal); } /* ========================================================== TOP ACCENT BAR ========================================================== */ .guide-info-card::before, .guide-highlight-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient( 90deg, var(--color-primary-500), var(--color-primary-300)); } /* ========================================================== CARD HEADING ========================================================== */ .guide-info-card h3, .guide-highlight-card h3 { margin-bottom: var(--space-6); color: var(--color-text-primary); font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; } /* ========================================================== CARD PARAGRAPH ========================================================== */ .guide-highlight-card p { margin: 0; color: var(--color-text-secondary); line-height: 1.85; font-size: .98rem; } /* ========================================================== CARD HOVER ========================================================== */ .guide-info-card:hover, .guide-highlight-card:hover { transform: translateY(-6px); border-color: rgba(59,130,246,.25); background: rgba(255,255,255,.06); box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(59,130,246,.08); } /* ========================================================== GUIDE INFORMATION LIST ========================================================== */ .guide-info-list { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; padding: 0; list-style: none; } /* ========================================================== INFORMATION ITEM ========================================================== */ .guide-info-list li { display: flex; align-items: center; gap: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid rgba(255,255,255,.08); } .guide-info-list li:last-child { padding-bottom: 0; border-bottom: none; } /* ========================================================== INFORMATION ICON ========================================================== */ .guide-info-list img { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: .65rem; border-radius: 50%; background: linear-gradient( 135deg, rgba(37,99,235,.18), rgba(96,165,250,.12)); border: 1px solid rgba(59,130,246,.18); flex-shrink: 0; transition: transform var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal); } /* ========================================================== INFORMATION CONTENT ========================================================== */ .guide-info-list li > div { display: flex; flex-direction: column; gap: .3rem; min-width: 0; } /* ========================================================== INFORMATION LABEL ========================================================== */ .info-label { color: var(--color-text-muted); font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } /* ========================================================== INFORMATION VALUE ========================================================== */ .guide-info-list strong { color: var(--color-text-primary); font-size: 1rem; font-weight: 700; line-height: 1.4; } /* ========================================================== INFORMATION ITEM HOVER ========================================================== */ .guide-info-list li:hover img { transform: scale(1.08); background: linear-gradient( 135deg, rgba(37,99,235,.28), rgba(96,165,250,.18)); border-color: rgba(59,130,246,.35); } /* ========================================================== AUDIENCE LIST ========================================================== */ .audience-list { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; } /* ========================================================== AUDIENCE PILL ========================================================== */ .audience-list li { position: relative; display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.15rem; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-full); background: rgba(255,255,255,.03); color: var(--color-text-secondary); font-size: .95rem; font-weight: 600; line-height: 1.4; white-space: nowrap; transition: transform var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal); } /* ========================================================== AUDIENCE INDICATOR ========================================================== */ .audience-list li::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; flex-shrink: 0; background: linear-gradient( 135deg, #22c55e, #16a34a); box-shadow: 0 0 10px rgba(34,197,94,.45); } /* ========================================================== HOVER STATE ========================================================== */ .audience-list li:hover { transform: translateY(-3px); border-color: rgba(59,130,246,.28); background: rgba(37,99,235,.08); color: var(--color-text-primary); box-shadow: 0 12px 30px rgba(0,0,0,.22), 0 0 0 1px rgba(59,130,246,.08); } /* ========================================================== KEYBOARD ACCESSIBILITY ========================================================== */ .audience-list li:focus-visible { outline: 2px solid var(--color-primary-400); outline-offset: 3px; } /* ========================================================== KEY TAKEAWAY CARD ========================================================== */ .guide-highlight-card { position: relative; overflow: hidden; } /* ========================================================== BACKGROUND ACCENT ========================================================== */ .guide-highlight-card::after { content: ""; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient( circle, rgba(37,99,235,.18), transparent 72%); pointer-events: none; } /* ========================================================== HEADING ========================================================== */ .guide-highlight-card h3 { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--space-5); } /* ========================================================== ICON ========================================================== */ .guide-highlight-card h3::before { content: "★"; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: linear-gradient( 135deg, #fbbf24, #f59e0b); color: #ffffff; font-size: 1rem; font-weight: 700; flex-shrink: 0; box-shadow: 0 12px 30px rgba(245,158,11,.30); } /* ========================================================== CONTENT ========================================================== */ .guide-highlight-card p { position: relative; z-index: 1; margin: 0; color: var(--color-text-secondary); font-size: 1rem; line-height: 1.9; text-wrap: pretty; } /* ========================================================== EMPHASIS ========================================================== */ .guide-highlight-card strong { color: var(--color-text-primary); font-weight: 700; } /* ========================================================== HOVER EFFECT ========================================================== */ .guide-highlight-card:hover { border-color: rgba(245,158,11,.28); box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(245,158,11,.10); } /* ========================================================== ICON ANIMATION ========================================================== */ .guide-highlight-card:hover h3::before { transform: rotate(8deg) scale(1.08); transition: transform var(--transition-normal); } /* ========================================================== SECTION REVEAL ANIMATION ========================================================== */ .guide-overview { animation: sectionFadeUp .8s ease both; } /* ========================================================== STAGGERED CONTENT ANIMATION ========================================================== */ .guide-overview-content > * { animation: fadeUp .7s ease both; } .guide-overview-content > *:nth-child(1) { animation-delay: .05s; } .guide-overview-content > *:nth-child(2) { animation-delay: .15s; } .guide-overview-content > *:nth-child(3) { animation-delay: .25s; } /* ========================================================== STAGGERED SIDEBAR ANIMATION ========================================================== */ .guide-overview-sidebar > * { animation: fadeUp .7s ease both; } .guide-overview-sidebar > *:nth-child(1) { animation-delay: .2s; } .guide-overview-sidebar > *:nth-child(2) { animation-delay: .3s; } .guide-overview-sidebar > *:nth-child(3) { animation-delay: .4s; } /* ========================================================== CARD MICRO INTERACTIONS ========================================================== */ .learning-list li, .guide-info-card, .guide-highlight-card { will-change: transform; transform: translateZ(0); } /* ========================================================== ICON TRANSITIONS ========================================================== */ .guide-info-list img, .learning-list li::before, .guide-highlight-card h3::before { transition: transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal); } /* ========================================================== LEARNING CARD HOVER ========================================================== */ .learning-list li:hover::before { transform: scale(1.12); box-shadow: 0 14px 34px rgba(34,197,94,.35); } /* ========================================================== INFORMATION ICON HOVER ========================================================== */ .guide-info-list li:hover img { transform: rotate(-6deg) scale(1.08); } /* ========================================================== AUDIENCE TAG HOVER ========================================================== */ .audience-list li::before { transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .audience-list li:hover::before { transform: scale(1.35); box-shadow: 0 0 16px rgba(34,197,94,.6); } /* ========================================================== CARD SHADOW ENHANCEMENT ========================================================== */ .learning-list li:hover, .guide-info-card:hover, .guide-highlight-card:hover { z-index: 2; } /* ========================================================== ACCESSIBILITY ========================================================== */ @media (prefers-reduced-motion: reduce) { .guide-overview, .guide-overview * { animation: none !important; transition: none !important; transform: none !important; } } /* ========================================================== RESPONSIVE DESIGN ========================================================== */ /* ========================================================== LARGE TABLETS ========================================================== */ @media (max-width: 1200px) { .guide-overview-grid { grid-template-columns: 1.3fr .9fr; gap: var(--space-10); } } /* ========================================================== TABLETS ========================================================== */ @media (max-width: 992px) { .guide-overview { padding: var(--space-14) 0; } .guide-overview-grid { grid-template-columns: 1fr; gap: var(--space-10); } .guide-overview-sidebar { position: static; top: auto; } .guide-info-card, .guide-highlight-card { padding: var(--space-6); } } /* ========================================================== MOBILE DEVICES ========================================================== */ @media (max-width: 768px) { .guide-overview { padding: var(--space-12) 0; } .guide-overview .section-header { margin-bottom: var(--space-10); } .guide-overview .section-title { font-size: clamp(2rem, 8vw, 2.6rem); } .guide-overview .section-description { font-size: 1rem; line-height: 1.8; } .guide-overview-content h3, .guide-info-card h3, .guide-highlight-card h3 { font-size: 1.3rem; } .learning-list li { padding: var(--space-5); gap: var(--space-4); } .learning-list li::before { width: 2rem; height: 2rem; font-size: .9rem; } .guide-info-list img { width: 2.5rem; height: 2.5rem; padding: .6rem; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media (max-width: 576px) { .guide-overview { padding: var(--space-10) 0; } .guide-overview .section-badge { padding: .65rem 1rem; font-size: .8rem; } .guide-overview .section-badge .icon-circle { width: 2rem; height: 2rem; } .guide-overview .section-badge img { width: .9rem; height: .9rem; } .guide-overview .section-title { font-size: 1.9rem; } .guide-overview .section-description { font-size: .98rem; } .learning-list { gap: var(--space-4); } .learning-list li { padding: var(--space-4); } .guide-info-card, .guide-highlight-card { padding: var(--space-5); border-radius: var(--radius-xl); } .guide-info-list li { gap: var(--space-4); } .guide-info-list strong { font-size: .95rem; } .audience-list { gap: .65rem; } .audience-list li { font-size: .85rem; padding: .7rem 1rem; } } /* ========================================================== EXTRA SMALL DEVICES ========================================================== */ @media (max-width: 380px) { .guide-overview .section-title { font-size: 1.7rem; } .guide-overview-content h3 { font-size: 1.2rem; } .learning-list li { gap: var(--space-3); } .learning-list li::before { width: 1.8rem; height: 1.8rem; font-size: .85rem; } .guide-info-list img { width: 2.2rem; height: 2.2rem; padding: .5rem; } .audience-list li { width: 100%; justify-content: center; } } /* ========================================================== SECTION 03 : EXPLORE THIS GUIDE ========================================================== */ .table-of-contents { position: relative; padding: var(--space-16) 0; overflow: hidden; } /* ========================================================== BACKGROUND EFFECTS ========================================================== */ .table-of-contents::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at top left, rgba(37,99,235,.08), transparent 55%); pointer-events: none; } .table-of-contents::after { content: ""; position: absolute; top: 50%; right: -240px; width: 520px; height: 520px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient( circle, rgba(96,165,250,.08), transparent 72%); filter: blur(90px); pointer-events: none; } /* ========================================================== CONTAINER ========================================================== */ .table-of-contents .container { position: relative; z-index: 1; } /* ========================================================== GRID ========================================================== */ .toc-grid { display: grid; grid-template-columns: 1.55fr .85fr; gap: var(--space-12); align-items: start; margin-top: var(--space-12); } /* ========================================================== SECTION HEADER ========================================================== */ .table-of-contents .section-header { max-width: 860px; margin: 0 auto var(--space-12); text-align: center; } /* ========================================================== SECTION BADGE ========================================================== */ .table-of-contents .section-badge { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); padding: .75rem 1.25rem; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-full); background: rgba(255,255,255,.04); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--color-primary-300); font-size: .9rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } /* ========================================================== BADGE ICON ========================================================== */ .table-of-contents .section-badge .icon-circle { display: flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: linear-gradient( 135deg, var(--color-primary-500), var(--color-primary-700)); box-shadow: 0 10px 30px rgba(37,99,235,.35); flex-shrink: 0; } .table-of-contents .section-badge img { width: 1rem; height: 1rem; object-fit: contain; } /* ========================================================== SECTION TITLE ========================================================== */ .table-of-contents .section-title { margin-bottom: var(--space-5); color: var(--color-text-primary); font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; } /* ========================================================== SECTION DESCRIPTION ========================================================== */ .table-of-contents .section-description { max-width: 760px; margin: 0 auto; color: var(--color-text-secondary); font-size: 1.1rem; line-height: 1.85; text-wrap: pretty; } /* ========================================================== TABLE OF CONTENTS NAVIGATION ========================================================== */ .toc-navigation { display: flex; flex-direction: column; } /* ========================================================== TOC LIST ========================================================== */ .toc-list { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; padding: 0; list-style: none; } /* ========================================================== TOC LINK ========================================================== */ .toc-list li a { position: relative; display: flex; align-items: center; gap: var(--space-6); padding: var(--space-6); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-2xl); background: rgba(255,255,255,.03); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); text-decoration: none; overflow: hidden; transition: transform var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal); } /* ========================================================== LEFT ACCENT BAR ========================================================== */ .toc-list li a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: linear-gradient( 180deg, var(--color-primary-500), var(--color-primary-300)); opacity: 0; transition: opacity var(--transition-normal); } /* ========================================================== TOC CONTENT ========================================================== */ .toc-content { display: flex; flex-direction: column; gap: .45rem; min-width: 0; } /* ========================================================== TITLE ========================================================== */ .toc-content strong { color: var(--color-text-primary); font-size: 1.08rem; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; } /* ========================================================== DESCRIPTION ========================================================== */ .toc-content small { display: block; color: var(--color-text-secondary); font-size: .92rem; line-height: 1.7; } /* ========================================================== TOC NUMBER BADGE ========================================================== */ .toc-number { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: linear-gradient( 135deg, var(--color-primary-500), var(--color-primary-700)); color: #ffffff; font-size: 1rem; font-weight: 800; letter-spacing: .05em; box-shadow: 0 12px 30px rgba(37,99,235,.28); transition: transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal); } /* ========================================================== DIRECTION ARROW ========================================================== */ .toc-list li a::after { content: "→"; margin-left: auto; color: var(--color-primary-400); font-size: 1.35rem; font-weight: 700; opacity: 0; transform: translateX(-8px); transition: opacity var(--transition-normal), transform var(--transition-normal); } /* ========================================================== CARD HOVER ========================================================== */ .toc-list li a:hover { transform: translateY(-5px); border-color: rgba(59,130,246,.28); background: rgba(255,255,255,.05); box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(59,130,246,.08); } /* ========================================================== LEFT ACCENT BAR ========================================================== */ .toc-list li a:hover::before { opacity: 1; } /* ========================================================== ARROW ANIMATION ========================================================== */ .toc-list li a:hover::after { opacity: 1; transform: translateX(0); } /* ========================================================== NUMBER ANIMATION ========================================================== */ .toc-list li a:hover .toc-number { transform: scale(1.08) rotate(-6deg); box-shadow: 0 18px 40px rgba(37,99,235,.40); } /* ========================================================== TITLE ANIMATION ========================================================== */ .toc-list li a:hover .toc-content strong { color: var(--color-primary-300); } /* ========================================================== ACCESSIBILITY ========================================================== */ .toc-list li a:focus-visible { outline: 2px solid var(--color-primary-400); outline-offset: 4px; border-color: var(--color-primary-400); } /* ========================================================== ACTIVE LINK SUPPORT ========================================================== */ .toc-list li a.active { border-color: rgba(59,130,246,.35); background: rgba(37,99,235,.08); } .toc-list li a.active::before { opacity: 1; } .toc-list li a.active::after { opacity: 1; transform: translateX(0); } .toc-list li a.active .toc-number { background: linear-gradient( 135deg, var(--color-primary-400), var(--color-primary-600)); } /* ========================================================== TOC SIDEBAR ========================================================== */ .toc-sidebar { display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: 6rem; } /* ========================================================== SIDEBAR CARD ========================================================== */ .toc-card, .toc-highlight-card { position: relative; overflow: hidden; padding: var(--space-7); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-2xl); background: rgba(255,255,255,.04); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: transform var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal); } /* ========================================================== TOP ACCENT BAR ========================================================== */ .toc-card::before, .toc-highlight-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient( 90deg, var(--color-primary-500), var(--color-primary-300)); } /* ========================================================== CARD HEADING ========================================================== */ .toc-card h3, .toc-highlight-card h3 { margin-bottom: var(--space-6); color: var(--color-text-primary); font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; } /* ========================================================== CARD PARAGRAPH ========================================================== */ .toc-highlight-card p { margin: 0; color: var(--color-text-secondary); font-size: .98rem; line-height: 1.85; text-wrap: pretty; } /* ========================================================== CARD HOVER ========================================================== */ .toc-card:hover, .toc-highlight-card:hover { transform: translateY(-6px); border-color: rgba(59,130,246,.25); background: rgba(255,255,255,.06); box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(59,130,246,.08); } /* ========================================================== GUIDE SNAPSHOT LIST ========================================================== */ .toc-summary-list { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; padding: 0; list-style: none; } /* ========================================================== SNAPSHOT ITEM ========================================================== */ .toc-summary-list li { display: flex; align-items: center; gap: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid rgba(255,255,255,.08); color: var(--color-text-secondary); font-size: .96rem; font-weight: 500; } .toc-summary-list li:last-child { padding-bottom: 0; border-bottom: none; } /* ========================================================== METRIC BADGE ========================================================== */ .toc-summary-list span { display: inline-flex; align-items: center; justify-content: center; min-width: 4rem; height: 2.75rem; padding: 0 .75rem; border-radius: var(--radius-full); background: linear-gradient( 135deg, var(--color-primary-500), var(--color-primary-700)); color: #ffffff; font-size: 1rem; font-weight: 800; letter-spacing: .03em; box-shadow: 0 12px 30px rgba(37,99,235,.28); transition: transform var(--transition-normal), box-shadow var(--transition-normal); } /* ========================================================== SNAPSHOT HOVER ========================================================== */ .toc-summary-list li:hover span { transform: scale(1.08); box-shadow: 0 18px 42px rgba(37,99,235,.38); } /* ========================================================== ACHIEVEMENT LIST ========================================================== */ .toc-achievement-list { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; list-style: none; } /* ========================================================== ACHIEVEMENT ITEM ========================================================== */ .toc-achievement-list li { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-xl); background: rgba(255,255,255,.03); color: var(--color-text-secondary); line-height: 1.75; transition: transform var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal); } /* ========================================================== ACHIEVEMENT ICON ========================================================== */ .toc-achievement-list li::before { content: "✓"; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; margin-top: .1rem; border-radius: 50%; background: linear-gradient( 135deg, #22c55e, #16a34a); color: #ffffff; font-size: .9rem; font-weight: 700; box-shadow: 0 10px 24px rgba(34,197,94,.28); } /* ========================================================== ACHIEVEMENT HOVER ========================================================== */ .toc-achievement-list li:hover { transform: translateY(-3px); border-color: rgba(59,130,246,.25); background: rgba(255,255,255,.05); box-shadow: 0 18px 40px rgba(0,0,0,.24); } .toc-achievement-list li:hover::before { transform: scale(1.08); transition: transform var(--transition-normal); } /* ========================================================== PRO TIP CARD ========================================================== */ .toc-highlight-card { position: relative; overflow: hidden; } /* ========================================================== BACKGROUND ACCENT ========================================================== */ .toc-highlight-card::after { content: ""; position: absolute; top: -70px; right: -70px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient( circle, rgba(245,158,11,.18), transparent 72%); pointer-events: none; } /* ========================================================== HEADING ========================================================== */ .toc-highlight-card h3 { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--space-5); } /* ========================================================== LIGHT BULB ICON ========================================================== */ .toc-highlight-card h3::before { content: "💡"; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: 50%; background: linear-gradient( 135deg, #fbbf24, #f59e0b); box-shadow: 0 12px 30px rgba(245,158,11,.30); font-size: 1.1rem; } /* ========================================================== CONTENT ========================================================== */ .toc-highlight-card p { position: relative; z-index: 1; margin: 0; color: var(--color-text-secondary); font-size: 1rem; line-height: 1.9; text-wrap: pretty; } /* ========================================================== EMPHASIS ========================================================== */ .toc-highlight-card strong { color: var(--color-text-primary); font-weight: 700; } /* ========================================================== HOVER EFFECT ========================================================== */ .toc-highlight-card:hover { border-color: rgba(245,158,11,.28); box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(245,158,11,.10); } /* ========================================================== ICON ANIMATION ========================================================== */ .toc-highlight-card:hover h3::before { transform: rotate(-10deg) scale(1.08); transition: transform var(--transition-normal); } /* ========================================================== TEXT SELECTION ========================================================== */ .toc-highlight-card::selection, .toc-highlight-card p::selection { background: rgba(245,158,11,.25); color: #ffffff; } /* ========================================================== SECTION REVEAL ANIMATION ========================================================== */ .table-of-contents { animation: sectionFadeUp .8s ease both; } /* ========================================================== STAGGERED NAVIGATION ANIMATION ========================================================== */ .toc-list li { animation: fadeUp .65s ease both; } .toc-list li:nth-child(1) { animation-delay: .05s; } .toc-list li:nth-child(2) { animation-delay: .10s; } .toc-list li:nth-child(3) { animation-delay: .15s; } .toc-list li:nth-child(4) { animation-delay: .20s; } .toc-list li:nth-child(5) { animation-delay: .25s; } .toc-list li:nth-child(6) { animation-delay: .30s; } .toc-list li:nth-child(7) { animation-delay: .35s; } .toc-list li:nth-child(8) { animation-delay: .40s; } .toc-list li:nth-child(9) { animation-delay: .45s; } .toc-list li:nth-child(10) { animation-delay: .50s; } /* ========================================================== SIDEBAR STAGGER ========================================================== */ .toc-sidebar > * { animation: fadeUp .7s ease both; } .toc-sidebar > *:nth-child(1) { animation-delay: .25s; } .toc-sidebar > *:nth-child(2) { animation-delay: .40s; } .toc-sidebar > *:nth-child(3) { animation-delay: .55s; } /* ========================================================== GPU ACCELERATION ========================================================== */ .toc-list li a, .toc-card, .toc-highlight-card { will-change: transform; transform: translateZ(0); } /* ========================================================== ICON TRANSITIONS ========================================================== */ .toc-number, .toc-summary-list span, .toc-achievement-list li::before, .toc-highlight-card h3::before { transition: transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal); } /* ========================================================== SNAPSHOT BADGE HOVER ========================================================== */ .toc-summary-list li:hover span { transform: scale(1.08); } /* ========================================================== ACHIEVEMENT ICON HOVER ========================================================== */ .toc-achievement-list li:hover::before { transform: scale(1.12); } /* ========================================================== NAVIGATION LINK ACTIVE PRESS ========================================================== */ .toc-list li a:active { transform: translateY(-2px) scale(.99); } /* ========================================================== CARD ELEVATION ========================================================== */ .toc-list li a:hover, .toc-card:hover, .toc-highlight-card:hover { z-index: 2; } /* ========================================================== SMOOTH SCROLL ========================================================== */ html { scroll-behavior: smooth; } /* ========================================================== SCROLL OFFSET ========================================================== */ section[id] { scroll-margin-top: 6rem; } /* ========================================================== ACCESSIBILITY ========================================================== */ @media (prefers-reduced-motion: reduce) { .table-of-contents, .table-of-contents * { animation: none !important; transition: none !important; transform: none !important; } } /* ========================================================== RESPONSIVE DESIGN ========================================================== */ /* ========================================================== LARGE TABLETS ========================================================== */ @media (max-width: 1200px) { .toc-grid { grid-template-columns: 1.35fr .85fr; gap: var(--space-10); } } /* ========================================================== TABLETS ========================================================== */ @media (max-width: 992px) { .table-of-contents { padding: var(--space-14) 0; } .toc-grid { grid-template-columns: 1fr; gap: var(--space-10); } .toc-sidebar { position: static; top: auto; } .toc-card, .toc-highlight-card { padding: var(--space-6); } } /* ========================================================== MOBILE DEVICES ========================================================== */ @media (max-width: 768px) { .table-of-contents { padding: var(--space-12) 0; } .table-of-contents .section-header { margin-bottom: var(--space-10); } .table-of-contents .section-title { font-size: clamp(2rem, 8vw, 2.6rem); } .table-of-contents .section-description { font-size: 1rem; line-height: 1.8; } .toc-list li a { gap: var(--space-4); padding: var(--space-5); } .toc-number { width: 3rem; height: 3rem; font-size: .95rem; } .toc-content strong { font-size: 1rem; } .toc-content small { font-size: .88rem; line-height: 1.6; } .toc-card h3, .toc-highlight-card h3 { font-size: 1.3rem; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media (max-width: 576px) { .table-of-contents { padding: var(--space-10) 0; } .table-of-contents .section-badge { padding: .65rem 1rem; font-size: .8rem; } .table-of-contents .section-badge .icon-circle { width: 2rem; height: 2rem; } .table-of-contents .section-badge img { width: .9rem; height: .9rem; } .table-of-contents .section-title { font-size: 1.9rem; } .table-of-contents .section-description { font-size: .98rem; } .toc-list { gap: var(--space-4); } .toc-list li a { padding: var(--space-4); gap: var(--space-3); } .toc-number { width: 2.75rem; height: 2.75rem; font-size: .9rem; } .toc-list li a::after { display: none; } .toc-card, .toc-highlight-card { padding: var(--space-5); border-radius: var(--radius-xl); } } /* ========================================================== EXTRA SMALL DEVICES ========================================================== */ @media (max-width: 380px) { .table-of-contents .section-title { font-size: 1.7rem; } .toc-list li a { align-items: flex-start; } .toc-number { width: 2.5rem; height: 2.5rem; font-size: .85rem; } .toc-content strong { font-size: .95rem; } .toc-content small { font-size: .82rem; } .toc-summary-list span { min-width: 3.5rem; height: 2.5rem; font-size: .9rem; } .toc-achievement-list li { padding: var(--space-3); font-size: .92rem; } .toc-highlight-card h3 { font-size: 1.15rem; } } /* ========================================================== SECTION 04 : INTRODUCTION ========================================================== */ .article-introduction { position: relative; overflow: hidden; padding: var(--space-20) 0; background: radial-gradient( circle at top left, rgba(37,99,235,.08), transparent 40%), radial-gradient( circle at bottom right, rgba(59,130,246,.05), transparent 45%), var(--color-surface); } /* ========================================================== BACKGROUND DECORATION ========================================================== */ .article-introduction::before, .article-introduction::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(90px); opacity: .45; } .article-introduction::before { top: -140px; left: -140px; width: 320px; height: 320px; background: rgba(37,99,235,.18); } .article-introduction::after { bottom: -160px; right: -120px; width: 300px; height: 300px; background: rgba(59,130,246,.12); } /* ========================================================== CONTAINER ========================================================== */ .article-introduction .container { position: relative; z-index: 1; } /* ========================================================== INTRODUCTION GRID ========================================================== */ .introduction-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, .8fr); gap: var(--space-12); align-items: start; } /* ========================================================== MAIN CONTENT ========================================================== */ .introduction-content { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; } /* ========================================================== SIDEBAR ========================================================== */ .introduction-sidebar { display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: 6rem; } /* ========================================================== SECTION HEADER ========================================================== */ .article-introduction .section-header { max-width: 850px; margin: 0 auto var(--space-16); text-align: center; } /* ========================================================== SECTION BADGE ========================================================== */ .article-introduction .section-badge { margin-top: 5rem; display: inline-flex; align-items: center; gap: .75rem; margin-bottom: var(--space-5); padding: .75rem 1.3rem; border: 1px solid rgba(59,130,246,.18); border-radius: var(--radius-full); background: rgba(255,255,255,.05); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--color-primary-300); font-size: .9rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } /* ========================================================== BADGE ICON ========================================================== */ .article-introduction .section-badge .icon-circle { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: linear-gradient( 135deg, var(--color-primary-500), var(--color-primary-700)); box-shadow: 0 10px 24px rgba(37,99,235,.28); } .article-introduction .section-badge img { width: 1rem; height: 1rem; object-fit: contain; } /* ========================================================== SECTION TITLE ========================================================== */ .article-introduction .section-title { margin-bottom: var(--space-6); color: var(--color-text-primary); font-size: clamp(2.3rem, 4vw, 3.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; } /* ========================================================== SECTION DESCRIPTION ========================================================== */ .article-introduction .section-description { max-width: 760px; margin: 0 auto; color: var(--color-text-secondary); font-size: 1.08rem; line-height: 1.9; text-wrap: pretty; } /* ========================================================== INTRODUCTION CONTENT ========================================================== */ .introduction-content { color: var(--color-text-secondary); } /* ========================================================== LEAD PARAGRAPH ========================================================== */ .lead-paragraph { margin: 0; color: var(--color-text-primary); font-size: clamp(1.3rem, 2vw, 1.55rem); font-weight: 500; line-height: 1.9; letter-spacing: -.01em; text-wrap: pretty; } /* ========================================================== BODY PARAGRAPHS ========================================================== */ .introduction-content p:not(.lead-paragraph) { margin: 0; color: var(--color-text-secondary); font-size: 1.08rem; line-height: 1.95; text-wrap: pretty; } /* ========================================================== EMPHASIS ========================================================== */ .introduction-content strong { color: var(--color-text-primary); font-weight: 700; } .introduction-content em { color: var(--color-primary-300); font-style: italic; } /* ========================================================== INLINE LINKS ========================================================== */ .introduction-content a { color: var(--color-primary-400); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--transition-normal), border-color var(--transition-normal); } .introduction-content a:hover { color: var(--color-primary-300); border-color: currentColor; } /* ========================================================== TEXT SELECTION ========================================================== */ .introduction-content::selection, .introduction-content p::selection { background: rgba(37,99,235,.25); color: #ffffff; } /* ========================================================== PARAGRAPH RHYTHM ========================================================== */ .introduction-content > * { animation: fadeUp .7s ease both; } .introduction-content > *:nth-child(1) { animation-delay: .05s; } .introduction-content > *:nth-child(2) { animation-delay: .15s; } .introduction-content > *:nth-child(3) { animation-delay: .25s; } .introduction-content > *:nth-child(4) { animation-delay: .35s; } /* ========================================================== QUICK FACTS ========================================================== */ .quick-facts { position: relative; overflow: hidden; margin-top: var(--space-8); padding: var(--space-8); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-2xl); background: rgba(255,255,255,.04); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal); } /* ========================================================== TOP ACCENT ========================================================== */ .quick-facts::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient( 90deg, var(--color-primary-500), var(--color-primary-300)); } /* ========================================================== BACKGROUND GLOW ========================================================== */ .quick-facts::after { content: ""; position: absolute; top: -80px; right: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient( circle, rgba(59,130,246,.12), transparent 72%); pointer-events: none; } /* ========================================================== HEADING ========================================================== */ .quick-facts h3 { display: flex; align-items: center; gap: .8rem; margin-bottom: var(--space-7); color: var(--color-text-primary); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; } /* ========================================================== HEADING ICON ========================================================== */ .quick-facts h3::before { content: "📌"; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: linear-gradient( 135deg, var(--color-primary-500), var(--color-primary-700)); color: #ffffff; font-size: 1.05rem; box-shadow: 0 12px 30px rgba(37,99,235,.30); } /* ========================================================== FACT LIST ========================================================== */ .quick-facts ul { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; padding: 0; list-style: none; } /* ========================================================== FACT ITEM ========================================================== */ .quick-facts li { display: flex; align-items: flex-start; gap: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid rgba(255,255,255,.08); } .quick-facts li:last-child { padding-bottom: 0; border-bottom: none; } /* ========================================================== LABEL ========================================================== */ .quick-facts strong { flex: 0 0 180px; color: var(--color-text-primary); font-size: .98rem; font-weight: 700; line-height: 1.6; } /* ========================================================== DESCRIPTION ========================================================== */ .quick-facts span { flex: 1; color: var(--color-text-secondary); font-size: .98rem; line-height: 1.8; text-wrap: pretty; } /* ========================================================== SIDEBAR CARDS ========================================================== */ .fact-card, .importance-card, .next-section-card { position: relative; overflow: hidden; padding: var(--space-7); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-2xl); background: rgba(255,255,255,.04); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: transform var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal); } /* ========================================================== TOP ACCENT BAR ========================================================== */ .fact-card::before, .importance-card::before, .next-section-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; } /* ========================================================== CARD COLORS ========================================================== */ .fact-card::before { background: linear-gradient( 90deg, #f59e0b, #fbbf24); } .importance-card::before { background: linear-gradient( 90deg, #22c55e, #16a34a); } .next-section-card::before { background: linear-gradient( 90deg, var(--color-primary-500), var(--color-primary-300)); } /* ========================================================== CARD TITLE ========================================================== */ .fact-card h3, .importance-card h3, .next-section-card h3 { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--space-5); color: var(--color-text-primary); font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; } /* ========================================================== CARD ICONS ========================================================== */ .fact-card h3::before, .importance-card h3::before, .next-section-card h3::before { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.8rem; height: 2.8rem; border-radius: 50%; color: #ffffff; font-size: 1rem; box-shadow: 0 12px 30px rgba(0,0,0,.18); } /* ========================================================== DID YOU KNOW ========================================================== */ .fact-card h3::before { content: "💡"; background: linear-gradient( 135deg, #fbbf24, #f59e0b); } /* ========================================================== WHY IT MATTERS ========================================================== */ .importance-card h3::before { content: "✓"; background: linear-gradient( 135deg, #22c55e, #16a34a); } /* ========================================================== COMING UP NEXT ========================================================== */ .next-section-card h3::before { content: "→"; background: linear-gradient( 135deg, var(--color-primary-500), var(--color-primary-700)); } /* ========================================================== CARD TEXT ========================================================== */ .fact-card p, .next-section-card p { margin: 0; color: var(--color-text-secondary); font-size: .98rem; line-height: 1.85; text-wrap: pretty; } /* ========================================================== IMPORTANCE LIST ========================================================== */ .importance-card ul { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; list-style: none; } /* ========================================================== BENEFIT ITEM ========================================================== */ .importance-card li { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-xl); background: rgba(255,255,255,.03); color: var(--color-text-secondary); font-size: .96rem; line-height: 1.75; transition: transform var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal); } /* ========================================================== BENEFIT ICON ========================================================== */ .importance-card li::before { content: ""; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; margin-top: .1rem; border-radius: 50%; background: linear-gradient( 135deg, #22c55e, #16a34a); color: #ffffff; content: "✓"; font-size: .9rem; font-weight: 700; box-shadow: 0 10px 24px rgba(34,197,94,.25); } /* ========================================================== BENEFIT HOVER ========================================================== */ .importance-card li:hover { transform: translateY(-3px); border-color: rgba(34,197,94,.28); background: rgba(255,255,255,.05); box-shadow: 0 18px 40px rgba(0,0,0,.24); } .importance-card li:hover::before { transform: scale(1.08); transition: transform var(--transition-normal); } /* ========================================================== CARD SPACING ========================================================== */ .fact-card p, .next-section-card p { line-height: 1.9; } /* ========================================================== STRONG TEXT ========================================================== */ .fact-card strong, .next-section-card strong, .importance-card strong { color: var(--color-text-primary); font-weight: 700; } /* ========================================================== TEXT SELECTION ========================================================== */ .fact-card::selection, .importance-card::selection, .next-section-card::selection, .fact-card p::selection, .importance-card li::selection, .next-section-card p::selection { background: rgba(59,130,246,.25); color: #ffffff; } /* ========================================================== QUICK FACTS HOVER ========================================================== */ .quick-facts:hover { transform: translateY(-6px); border-color: rgba(59,130,246,.25); background: rgba(255,255,255,.06); box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(59,130,246,.08); } .quick-facts:hover h3::before { transform: rotate(-8deg) scale(1.08); transition: transform var(--transition-normal); } /* ========================================================== FACT ITEM HOVER ========================================================== */ .quick-facts li { transition: border-color var(--transition-normal), transform var(--transition-normal), background var(--transition-normal); } .quick-facts li:hover { transform: translateX(6px); border-bottom-color: rgba(59,130,246,.25); } /* ========================================================== SIDEBAR CARD HOVER ========================================================== */ .fact-card:hover, .importance-card:hover, .next-section-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.06); box-shadow: 0 24px 60px rgba(0,0,0,.28); } /* ========================================================== INDIVIDUAL ACCENT COLORS ========================================================== */ .fact-card:hover { border-color: rgba(245,158,11,.30); } .importance-card:hover { border-color: rgba(34,197,94,.28); } .next-section-card:hover { border-color: rgba(59,130,246,.28); } /* ========================================================== SIDEBAR ICON ANIMATION ========================================================== */ .fact-card:hover h3::before, .importance-card:hover h3::before, .next-section-card:hover h3::before { transform: scale(1.08) rotate(-8deg); transition: transform var(--transition-normal); } /* ========================================================== GPU ACCELERATION ========================================================== */ .quick-facts, .fact-card, .importance-card, .next-section-card { will-change: transform; transform: translateZ(0); } /* ========================================================== KEYBOARD ACCESSIBILITY ========================================================== */ .quick-facts:focus-within, .fact-card:focus-within, .importance-card:focus-within, .next-section-card:focus-within { outline: 2px solid rgba(59,130,246,.45); outline-offset: 4px; } /* ========================================================== SMOOTH TRANSITIONS ========================================================== */ .quick-facts h3::before, .fact-card h3::before, .importance-card h3::before, .next-section-card h3::before { transition: transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal); } /* ========================================================== BACKGROUND GLOW ON HOVER ========================================================== */ .quick-facts:hover::after { opacity: .9; transform: scale(1.08); transition: opacity var(--transition-normal), transform var(--transition-normal); } /* ========================================================== SECTION REVEAL ========================================================== */ .article-introduction { animation: sectionFadeUp .8s ease both; } /* ========================================================== CONTENT STAGGER ========================================================== */ .introduction-content > * { animation: fadeUp .7s ease both; } .introduction-content > *:nth-child(1) { animation-delay: .05s; } .introduction-content > *:nth-child(2) { animation-delay: .15s; } .introduction-content > *:nth-child(3) { animation-delay: .25s; } .introduction-content > *:nth-child(4) { animation-delay: .35s; } /* ========================================================== SIDEBAR STAGGER ========================================================== */ .introduction-sidebar > * { animation: fadeUp .7s ease both; } .introduction-sidebar > *:nth-child(1) { animation-delay: .25s; } .introduction-sidebar > *:nth-child(2) { animation-delay: .40s; } .introduction-sidebar > *:nth-child(3) { animation-delay: .55s; } /* ========================================================== QUICK FACTS STAGGER ========================================================== */ .quick-facts li { animation: fadeUp .6s ease both; } .quick-facts li:nth-child(1) { animation-delay: .10s; } .quick-facts li:nth-child(2) { animation-delay: .18s; } .quick-facts li:nth-child(3) { animation-delay: .26s; } .quick-facts li:nth-child(4) { animation-delay: .34s; } /* ========================================================== BENEFIT LIST STAGGER ========================================================== */ .importance-card li { animation: fadeUp .6s ease both; } .importance-card li:nth-child(1) { animation-delay: .10s; } .importance-card li:nth-child(2) { animation-delay: .18s; } .importance-card li:nth-child(3) { animation-delay: .26s; } .importance-card li:nth-child(4) { animation-delay: .34s; } .importance-card li:nth-child(5) { animation-delay: .42s; } /* ========================================================== ICON MICRO INTERACTIONS ========================================================== */ .quick-facts h3::before, .fact-card h3::before, .importance-card h3::before, .next-section-card h3::before { transition: transform var(--transition-normal), box-shadow var(--transition-normal), filter var(--transition-normal); } /* ========================================================== ICON HOVER ========================================================== */ .quick-facts:hover h3::before, .fact-card:hover h3::before, .importance-card:hover h3::before, .next-section-card:hover h3::before { filter: brightness(1.08); } /* ========================================================== CARD ELEVATION ========================================================== */ .quick-facts:hover, .fact-card:hover, .importance-card:hover, .next-section-card:hover { z-index: 2; } /* ========================================================== GPU ACCELERATION ========================================================== */ .introduction-content, .introduction-sidebar, .quick-facts, .fact-card, .importance-card, .next-section-card { will-change: transform; transform: translateZ(0); } /* ========================================================== SMOOTH SCROLL TARGET ========================================================== */ .article-introduction { scroll-margin-top: 6rem; } /* ========================================================== ACCESSIBILITY ========================================================== */ @media (prefers-reduced-motion: reduce) { .article-introduction, .article-introduction * { animation: none !important; transition: none !important; transform: none !important; } } /* ========================================================== RESPONSIVE DESIGN ========================================================== */ /* ========================================================== LARGE TABLETS ========================================================== */ @media (max-width: 1200px) { .introduction-grid { grid-template-columns: 1.45fr .85fr; gap: var(--space-10); } } /* ========================================================== TABLETS ========================================================== */ @media (max-width: 992px) { .article-introduction { padding: var(--space-14) 0; } .introduction-grid { grid-template-columns: 1fr; gap: var(--space-10); } .introduction-sidebar { position: static; top: auto; } .quick-facts, .fact-card, .importance-card, .next-section-card { padding: var(--space-6); } } /* ========================================================== MOBILE DEVICES ========================================================== */ @media (max-width: 768px) { .article-introduction { padding: var(--space-12) 0; } .article-introduction .section-header { margin-bottom: var(--space-10); } .article-introduction .section-title { font-size: clamp(2rem, 8vw, 2.6rem); } .article-introduction .section-description { font-size: 1rem; } .lead-paragraph { font-size: 1.2rem; line-height: 1.8; } .introduction-content p:not(.lead-paragraph) { font-size: 1rem; line-height: 1.85; } .quick-facts li { flex-direction: column; gap: var(--space-2); } .quick-facts strong { flex: none; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media (max-width: 576px) { .article-introduction { padding: var(--space-10) 0; } .article-introduction .section-badge { padding: .65rem 1rem; font-size: .8rem; } .article-introduction .section-badge .icon-circle { width: 2rem; height: 2rem; } .article-introduction .section-badge img { width: .9rem; height: .9rem; } .article-introduction .section-title { font-size: 1.9rem; } .article-introduction .section-description { font-size: .96rem; } .lead-paragraph { font-size: 1.12rem; } .quick-facts, .fact-card, .importance-card, .next-section-card { padding: var(--space-5); border-radius: var(--radius-xl); } .quick-facts h3, .fact-card h3, .importance-card h3, .next-section-card h3 { font-size: 1.15rem; } } /* ========================================================== EXTRA SMALL DEVICES ========================================================== */ @media (max-width: 380px) { .article-introduction .section-title { font-size: 1.7rem; } .lead-paragraph { font-size: 1.05rem; } .introduction-content p:not(.lead-paragraph) { font-size: .95rem; } .quick-facts h3::before, .fact-card h3::before, .importance-card h3::before, .next-section-card h3::before { width: 2.4rem; height: 2.4rem; font-size: .9rem; } .quick-facts strong { font-size: .92rem; } .quick-facts span, .fact-card p, .importance-card li, .next-section-card p { font-size: .9rem; } } /* ========================================================== SECTION 05 : CONTENT CHAPTER ========================================================== */ .content-chapter { position: relative; overflow: hidden; padding: var(--space-20) 0; background: radial-gradient( circle at top right, rgba(37,99,235,.08), transparent 40%), radial-gradient( circle at bottom left, rgba(59,130,246,.05), transparent 45%), var(--color-background); } /* ========================================================== BACKGROUND DECORATION ========================================================== */ .content-chapter::before, .content-chapter::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(100px); opacity: .45; } .content-chapter::before { top: -180px; right: -140px; width: 340px; height: 340px; background: rgba(37,99,235,.18); } .content-chapter::after { bottom: -180px; left: -140px; width: 320px; height: 320px; background: rgba(59,130,246,.12); } /* ========================================================== CONTAINER ========================================================== */ .content-chapter .container { position: relative; z-index: 1; } /* ========================================================== CHAPTER GRID ========================================================== */ .chapter-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); } /* ========================================================== CHAPTER CONTENT ========================================================== */ .chapter-content { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; } /* ========================================================== DEFAULT CONTENT SPACING ========================================================== */ .chapter-content > * { margin: 0; } /* ========================================================== READING WIDTH ========================================================== */ .chapter-content { max-width: 900px; margin: 0 auto; } /* ========================================================== CHAPTER HEADER ========================================================== */ .chapter-header { max-width: 850px; margin: 0 auto var(--space-16); text-align: center; } /* ========================================================== CHAPTER NUMBER ========================================================== */ .chapter-number { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: var(--space-5); padding: .8rem 1.4rem; border: 1px solid rgba(59,130,246,.18); border-radius: var(--radius-full); background: rgba(255,255,255,.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--color-primary-300); font-size: .92rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* ========================================================== CHAPTER TITLE ========================================================== */ .chapter-title { margin-bottom: var(--space-6); color: var(--color-text-primary); font-size: clamp(2.5rem, 4vw, 3.8rem); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; } /* ========================================================== CHAPTER DESCRIPTION ========================================================== */ .chapter-description { max-width: 760px; margin: 0 auto; color: var(--color-text-secondary); font-size: 1.12rem; line-height: 1.9; text-wrap: pretty; } /* ========================================================== CHAPTER NUMBER HOVER ========================================================== */ .chapter-number { transition: transform var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal); } .chapter-number:hover { transform: translateY(-3px); border-color: rgba(59,130,246,.28); background: rgba(255,255,255,.07); box-shadow: 0 16px 36px rgba(37,99,235,.20); } /* ========================================================== CHAPTER DIVIDER ========================================================== */ .chapter-header::after { content: ""; display: block; width: 90px; height: 4px; margin: var(--space-8) auto 0; border-radius: var(--radius-full); background: linear-gradient( 90deg, var(--color-primary-500), var(--color-primary-300)); box-shadow: 0 8px 24px rgba(37,99,235,.25); } /* ========================================================== CHAPTER HEADER ========================================================== */ .chapter-header { max-width: 850px; margin: 0 auto var(--space-16); text-align: center; padding-top: 10rem; } /* ========================================================== CHAPTER NUMBER ========================================================== */ .chapter-number { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: var(--space-5); padding: .8rem 1.4rem; border: 1px solid rgba(59,130,246,.18); border-radius: var(--radius-full); background: rgba(255,255,255,.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--color-primary-300); font-size: .92rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* ========================================================== CHAPTER TITLE ========================================================== */ .chapter-title { margin-bottom: var(--space-6); color: var(--color-text-primary); font-size: clamp(2.5rem, 4vw, 3.8rem); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; } /* ========================================================== CHAPTER DESCRIPTION ========================================================== */ .chapter-description { max-width: 760px; margin: 0 auto; color: var(--color-text-secondary); font-size: 1.12rem; line-height: 1.9; text-wrap: pretty; } /* ========================================================== CHAPTER NUMBER HOVER ========================================================== */ .chapter-number { transition: transform var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal); } .chapter-number:hover { transform: translateY(-3px); border-color: rgba(59,130,246,.28); background: rgba(255,255,255,.07); box-shadow: 0 16px 36px rgba(37,99,235,.20); } /* ========================================================== CHAPTER DIVIDER ========================================================== */ .chapter-header::after { content: ""; display: block; width: 90px; height: 4px; margin: var(--space-8) auto 0; border-radius: var(--radius-full); background: linear-gradient( 90deg, var(--color-primary-500), var(--color-primary-300)); box-shadow: 0 8px 24px rgba(37,99,235,.25); } /* ========================================================== EDUCATIONAL FIGURE ========================================================== */ .chapter-figure { position: relative; overflow: hidden; margin: var(--space-10) 0; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-3xl); background: rgba(255,255,255,.04); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 24px 60px rgba(0,0,0,.22); transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal); } /* ========================================================== TOP ACCENT BAR ========================================================== */ .chapter-figure::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient( 90deg, var(--color-primary-500), var(--color-primary-300)); z-index: 2; } /* ========================================================== IMAGE ========================================================== */ .chapter-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s ease, filter .6s ease; } /* ========================================================== FIGURE CAPTION ========================================================== */ .chapter-figure figcaption { padding: var(--space-6) var(--space-7); border-top: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: var(--color-text-secondary); font-size: .96rem; line-height: 1.8; text-align: center; text-wrap: pretty; } /* ========================================================== FIGURE HOVER ========================================================== */ .chapter-figure:hover { transform: translateY(-6px); border-color: rgba(59,130,246,.25); background: rgba(255,255,255,.06); box-shadow: 0 30px 70px rgba(0,0,0,.28), 0 0 0 1px rgba(59,130,246,.08); } .chapter-figure:hover img { transform: scale(1.03); filter: brightness(1.05); } /* ========================================================== VISUAL EXPLANATION ========================================================== */ .visual-explanation { position: relative; padding: var(--space-8); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-2xl); background: rgba(255,255,255,.03); transition: transform var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal); } /* ========================================================== VISUAL EXPLANATION ACCENT ========================================================== */ .visual-explanation::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; border-radius: var(--radius-full); background: linear-gradient( 180deg, var(--color-primary-500), var(--color-primary-300)); } /* ========================================================== VISUAL EXPLANATION HOVER ========================================================== */ .visual-explanation:hover { transform: translateY(-4px); border-color: rgba(59,130,246,.25); background: rgba(255,255,255,.05); box-shadow: 0 22px 50px rgba(0,0,0,.22); } /* ========================================================== IMAGE SELECTION ========================================================== */ .chapter-figure img { user-select: none; -webkit-user-drag: none; } /* ========================================================== KNOWLEDGE HIGHLIGHT ========================================================== */ .knowledge-highlight { display: flex; align-items: flex-start; gap: var(--space-6); margin: var(--space-12) 0; padding: var(--space-8); position: relative; overflow: hidden; border: 1px solid rgba(59,130,246,.18); border-radius: var(--radius-3xl); background: linear-gradient( 135deg, rgba(37,99,235,.08), rgba(59,130,246,.04)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal); } /* ========================================================== TOP ACCENT ========================================================== */ .knowledge-highlight::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient( 90deg, var(--color-primary-500), var(--color-primary-300)); } /* ========================================================== ICON CONTAINER ========================================================== */ .highlight-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: linear-gradient( 135deg, rgba(37,99,235,.18), rgba(59,130,246,.08)); border: 1px solid rgba(59,130,246,.22); } /* ========================================================== ICON ========================================================== */ .highlight-icon img { width: 34px; height: 34px; object-fit: contain; } /* ========================================================== CONTENT ========================================================== */ .highlight-content { flex: 1; min-width: 0; } /* ========================================================== TITLE ========================================================== */ .highlight-content h3 { margin: 0 0 var(--space-3); color: var(--color-text-primary); font-size: 1.45rem; font-weight: 700; line-height: 1.3; } /* ========================================================== PARAGRAPH ========================================================== */ .highlight-content p { margin: 0; color: var(--color-text-secondary); font-size: 1.05rem; line-height: 1.9; } /* ========================================================== HOVER ========================================================== */ .knowledge-highlight:hover { transform: translateY(-6px); border-color: rgba(59,130,246,.30); box-shadow: 0 28px 60px rgba(0,0,0,.22), 0 0 0 1px rgba(59,130,246,.08); } /* ========================================================== ICON ANIMATION ========================================================== */ .knowledge-highlight:hover .highlight-icon { transform: rotate(-6deg) scale(1.05); } .highlight-icon { transition: transform var(--transition-normal), background var(--transition-normal); } /* ========================================================== CHAPTER INSIGHT ========================================================== */ .chapter-insight { margin-top: var(--space-10); padding: var(--space-8); position: relative; border-left: 4px solid var(--color-primary-500); border-radius: var(--radius-2xl); background: rgba(255,255,255,.03); border-top: 1px solid rgba(255,255,255,.06); border-right: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); transition: transform var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal); } /* ========================================================== INSIGHT TITLE ========================================================== */ .chapter-insight h3 { margin: 0 0 var(--space-4); color: var(--color-text-primary); font-size: 1.5rem; font-weight: 700; } /* ========================================================== INSIGHT PARAGRAPH ========================================================== */ .chapter-insight p { margin: 0; color: var(--color-text-secondary); font-size: 1.05rem; line-height: 1.9; } /* ========================================================== INSIGHT HOVER ========================================================== */ .chapter-insight:hover { transform: translateY(-4px); background: rgba(255,255,255,.05); border-left-color: var(--color-primary-300); box-shadow: 0 22px 50px rgba(0,0,0,.18); } /* ========================================================== CHAPTER SUMMARY ========================================================== */ .chapter-summary { margin-top: var(--space-16); display: flex; flex-direction: column; gap: var(--space-10); } /* ========================================================== SUMMARY HEADER ========================================================== */ .summary-header { text-align: center; } .summary-badge { display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); padding: .7rem 1.4rem; border-radius: var(--radius-full); border: 1px solid rgba(59,130,246,.18); background: rgba(255,255,255,.05); color: var(--color-primary-300); font-size: .9rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .summary-header h3 { margin: 0; color: var(--color-text-primary); font-size: clamp(2rem,3vw,2.6rem); font-weight: 800; line-height: 1.2; } /* ========================================================== SUMMARY GRID ========================================================== */ .summary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); } /* ========================================================== SUMMARY CARD ========================================================== */ .summary-card { position: relative; overflow: hidden; padding: var(--space-8); border-radius: var(--radius-2xl); border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal); } /* Accent */ .summary-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient( 90deg, var(--color-primary-500), var(--color-primary-300)); } /* ========================================================== SUMMARY NUMBER ========================================================== */ .summary-number { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: var(--space-5); border-radius: 50%; background: rgba(37,99,235,.15); color: var(--color-primary-300); font-size: 1rem; font-weight: 700; } /* ========================================================== SUMMARY TITLE ========================================================== */ .summary-card h4 { margin: 0 0 var(--space-3); color: var(--color-text-primary); font-size: 1.25rem; font-weight: 700; line-height: 1.35; } /* ========================================================== SUMMARY TEXT ========================================================== */ .summary-card p { margin: 0; color: var(--color-text-secondary); font-size: 1rem; line-height: 1.8; } /* ========================================================== SUMMARY HOVER ========================================================== */ .summary-card:hover { transform: translateY(-8px); border-color: rgba(59,130,246,.25); background: rgba(255,255,255,.06); box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 0 0 1px rgba(59,130,246,.08); } /* ========================================================== NEXT CHAPTER ========================================================== */ .chapter-navigation { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); padding: var(--space-10); border-radius: var(--radius-3xl); border: 1px solid rgba(59,130,246,.18); background: linear-gradient( 135deg, rgba(37,99,235,.08), rgba(59,130,246,.04)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* ========================================================== NAVIGATION CONTENT ========================================================== */ .navigation-content { flex: 1; } .navigation-content span { display: inline-block; margin-bottom: var(--space-3); color: var(--color-primary-300); font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .navigation-content h4 { margin: 0 0 var(--space-3); color: var(--color-text-primary); font-size: 1.8rem; font-weight: 700; } .navigation-content p { margin: 0; max-width: 650px; color: var(--color-text-secondary); line-height: 1.8; } /* ========================================================== CONTINUE BUTTON ========================================================== */ .chapter-button { display: inline-flex; align-items: center; gap: .8rem; padding: 1rem 1.8rem; border-radius: var(--radius-full); background: linear-gradient( 135deg, var(--color-primary-600), var(--color-primary-500)); color: #ffffff; font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform var(--transition-normal), box-shadow var(--transition-normal), filter var(--transition-normal); } .chapter-button img { width: 18px; height: 18px; transition: transform var(--transition-normal); } .chapter-button:hover { transform: translateY(-3px); filter: brightness(1.05); box-shadow: 0 18px 40px rgba(37,99,235,.35); } .chapter-button:hover img { transform: translateX(5px); } /* ========================================================== SECTION 05 : PREMIUM INTERACTIONS ========================================================== */ /* ========================================================== SMOOTH GPU ACCELERATION ========================================================== */ .chapter-figure, .visual-explanation, .knowledge-highlight, .chapter-insight, .summary-card, .chapter-navigation, .chapter-button { will-change: transform; transform: translateZ(0); backface-visibility: hidden; } /* ========================================================== UNIVERSAL HOVER LIFT ========================================================== */ .chapter-figure:hover, .visual-explanation:hover, .knowledge-highlight:hover, .chapter-insight:hover, .summary-card:hover, .chapter-navigation:hover { transform: translateY(-6px); } /* ========================================================== CHAPTER NAVIGATION HOVER ========================================================== */ .chapter-navigation { transition: transform var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal); } .chapter-navigation:hover { border-color: rgba(59,130,246,.30); background: linear-gradient( 135deg, rgba(37,99,235,.10), rgba(59,130,246,.06)); box-shadow: 0 30px 70px rgba(0,0,0,.22), 0 0 0 1px rgba(59,130,246,.08); } /* ========================================================== SUMMARY CARD NUMBER ========================================================== */ .summary-number { transition: transform var(--transition-normal), background var(--transition-normal), color var(--transition-normal); } .summary-card:hover .summary-number { transform: scale(1.08); background: rgba(37,99,235,.22); } /* ========================================================== HEADING TRANSITIONS ========================================================== */ .summary-card h4, .highlight-content h3, .chapter-insight h3, .navigation-content h4 { transition: color var(--transition-normal); } .summary-card:hover h4, .knowledge-highlight:hover h3, .chapter-insight:hover h3, .chapter-navigation:hover h4 { color: var(--color-primary-300); } /* ========================================================== BUTTON ACTIVE ========================================================== */ .chapter-button:active { transform: scale(.98); } /* ========================================================== BUTTON FOCUS ========================================================== */ .chapter-button:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(59,130,246,.25), 0 18px 40px rgba(37,99,235,.30); } /* ========================================================== LINK FOCUS ========================================================== */ .chapter-content a:focus-visible, .visual-explanation a:focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 3px rgba(59,130,246,.20); } /* ========================================================== IMAGE FOCUS ========================================================== */ .chapter-figure:focus-within { border-color: rgba(59,130,246,.35); box-shadow: 0 0 0 4px rgba(59,130,246,.12); } /* ========================================================== ICON MICRO INTERACTION ========================================================== */ .highlight-icon img { transition: transform .35s ease; } .knowledge-highlight:hover .highlight-icon img { transform: rotate(-10deg) scale(1.12); } /* ========================================================== BUTTON ICON ========================================================== */ .chapter-button img { transition: transform var(--transition-normal); } .chapter-button:hover img { transform: translateX(6px); } /* ========================================================== IMAGE SHINE EFFECT ========================================================== */ .chapter-figure { isolation: isolate; } .chapter-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 30%, rgba(255,255,255,.10) 50%, transparent 70%); transform: translateX(-120%); transition: transform .9s ease; pointer-events: none; } .chapter-figure:hover::after { transform: translateX(120%); } /* ========================================================== CARD BORDER GLOW ========================================================== */ .summary-card, .chapter-insight, .visual-explanation { position: relative; } .summary-card::after, .chapter-insight::after, .visual-explanation::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid transparent; transition: border-color var(--transition-normal); pointer-events: none; } .summary-card:hover::after, .chapter-insight:hover::after, .visual-explanation:hover::after { border-color: rgba(59,130,246,.18); } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion: reduce) { .chapter-figure, .visual-explanation, .knowledge-highlight, .chapter-insight, .summary-card, .chapter-navigation, .chapter-button, .highlight-icon, .highlight-icon img, .chapter-button img { transition: none !important; animation: none !important; transform: none !important; } } /* ========================================================== SECTION 05 : ANIMATIONS ========================================================== */ .chapter-header::before { content: ""; display: block; width: 180px; height: 1px; margin: 0 auto 4rem; background: linear-gradient( 90deg, transparent, rgba(59,130,246,.45), transparent ); } /* ========================================================== CHAPTER HEADER ========================================================== */ .chapter-header { animation: fadeUp .8s ease both; padding-top: 4rem; margin-top: 2rem; } /* ========================================================== LEAD PARAGRAPH ========================================================== */ .chapter-lead { animation: fadeUp .8s ease .15s both; } /* ========================================================== BODY PARAGRAPHS ========================================================== */ .chapter-content p:not(.chapter-lead) { animation: fadeUp .8s ease both; } .chapter-content p:nth-of-type(2) { animation-delay: .25s; } .chapter-content p:nth-of-type(3) { animation-delay: .35s; } .chapter-content p:nth-of-type(4) { animation-delay: .45s; } /* ========================================================== EDUCATIONAL FIGURE ========================================================== */ .chapter-figure { animation: fadeUp .9s ease .55s both, scaleIn .8s ease .55s both; } /* ========================================================== FIGURE CAPTION ========================================================== */ .chapter-figure figcaption { animation: fadeUp .8s ease .75s both; } /* ========================================================== VISUAL EXPLANATION ========================================================== */ .visual-explanation { animation: fadeUp .9s ease .85s both; } /* ========================================================== KNOWLEDGE HIGHLIGHT ========================================================== */ .knowledge-highlight { animation: fadeUp .9s ease 1s both; } /* ========================================================== CHAPTER INSIGHT ========================================================== */ .chapter-insight { animation: fadeUp .9s ease 1.15s both; } /* ========================================================== SUMMARY HEADER ========================================================== */ .summary-header { animation: fadeUp .8s ease 1.3s both; } /* ========================================================== SUMMARY CARDS ========================================================== */ .summary-card { animation: fadeUp .8s ease both; } .summary-card:nth-child(1) { animation-delay: 1.45s; } .summary-card:nth-child(2) { animation-delay: 1.6s; } .summary-card:nth-child(3) { animation-delay: 1.75s; } /* ========================================================== NEXT CHAPTER ========================================================== */ .chapter-navigation { animation: fadeUp .9s ease 1.9s both; } /* ========================================================== ICON FLOAT ========================================================== */ .highlight-icon { animation: floatIcon 5s ease-in-out infinite; } /* ========================================================== BUTTON PULSE ========================================================== */ .chapter-button { animation: buttonPulse 4s ease-in-out infinite; } /* ========================================================== KEYFRAMES ========================================================== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } @keyframes floatIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes buttonPulse { 0%, 100% { box-shadow: 0 16px 40px rgba(37,99,235,.22); } 50% { box-shadow: 0 20px 50px rgba(37,99,235,.35); } } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion: reduce) { .chapter-header, .chapter-lead, .chapter-content p, .chapter-figure, .visual-explanation, .knowledge-highlight, .chapter-insight, .summary-header, .summary-card, .chapter-navigation, .highlight-icon, .chapter-button { animation: none !important; } } /* ========================================================== SECTION 05 : RESPONSIVE DESIGN ========================================================== */ /* ========================================================== LARGE TABLETS ========================================================== */ @media (max-width: 1200px) { .chapter-content { max-width: 820px; } } /* ========================================================== TABLETS ========================================================== */ @media (max-width: 992px) { .content-chapter { padding: var(--space-16) 0; } .chapter-header { margin-bottom: var(--space-12); } .chapter-title { font-size: clamp(2.2rem, 5vw, 3rem); } .chapter-description { font-size: 1.05rem; } .summary-grid { grid-template-columns: repeat(2, 1fr); } .chapter-navigation { flex-direction: column; align-items: flex-start; gap: var(--space-6); } .chapter-button { width: 100%; justify-content: center; } } /* ========================================================== MOBILE DEVICES ========================================================== */ @media (max-width: 768px) { .content-chapter { padding: var(--space-14) 0; } .chapter-header { margin-bottom: var(--space-10); } .chapter-number { font-size: .82rem; padding: .7rem 1.2rem; } .chapter-title { font-size: clamp(2rem, 8vw, 2.6rem); } .chapter-description { font-size: 1rem; line-height: 1.8; } .chapter-content { gap: var(--space-7); } .chapter-lead { font-size: 1.25rem; line-height: 1.8; } .chapter-content p, .visual-explanation p, .highlight-content p, .chapter-insight p, .summary-card p { font-size: 1rem; } .chapter-figure { margin: var(--space-8) 0; } .chapter-figure figcaption { padding: var(--space-5); font-size: .92rem; } .visual-explanation, .knowledge-highlight, .chapter-insight, .summary-card, .chapter-navigation { padding: var(--space-6); } .knowledge-highlight { flex-direction: column; align-items: flex-start; } .highlight-icon { width: 60px; height: 60px; } .highlight-icon img { width: 28px; height: 28px; } .summary-header h3 { font-size: 2rem; } .summary-grid { grid-template-columns: 1fr; } .navigation-content h4 { font-size: 1.5rem; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media (max-width: 576px) { .chapter-title { font-size: 1.8rem; } .chapter-lead { font-size: 1.15rem; } .visual-explanation h3, .highlight-content h3, .chapter-insight h3 { font-size: 1.3rem; } .summary-header h3 { font-size: 1.7rem; } .summary-number { width: 46px; height: 46px; font-size: .9rem; } .summary-card h4 { font-size: 1.15rem; } .navigation-content h4 { font-size: 1.35rem; } .chapter-button { padding: .95rem 1.5rem; font-size: .95rem; } } /* ========================================================== EXTRA SMALL DEVICES ========================================================== */ @media (max-width: 400px) { .content-chapter { padding: var(--space-12) 0; } .chapter-number { width: 100%; justify-content: center; } .chapter-title { font-size: 1.6rem; } .chapter-lead { font-size: 1.08rem; } .chapter-content p, .visual-explanation p, .highlight-content p, .chapter-insight p, .summary-card p { line-height: 1.8; } .chapter-navigation { text-align: center; } .navigation-content { width: 100%; } .chapter-button { width: 100%; } } /* ========================================================== PREMIUM TABLE COMPONENT V2.0 ========================================================== */ .premium-table{ margin-top:3rem; background:var(--surface-color); border:1px solid var(--border-color); border-radius:var(--radius-xl); overflow:hidden; } /* ========================================== HEADER ========================================== */ .premium-table .facts-header{ padding:2rem 2rem 1rem; } .premium-table .facts-header h3{ margin-top:1rem; color:var(--heading-color); font-size:1.5rem; } /* ========================================== INTRO ========================================== */ .table-intro{ padding:0 2rem 2rem; color:var(--text-color); line-height:1.8; } /* ========================================== TABLE ========================================== */ .table-responsive{ width:100%; } .table-responsive table{ width:100%; border-collapse:collapse; table-layout:fixed; } .table-responsive thead{ background:rgba(37,99,235,.12); } .table-responsive th{ width:50%; padding:1.2rem 1.5rem; text-align:left; color:var(--heading-color); font-size:.95rem; font-weight:700; border-bottom:1px solid var(--border-color); } .table-responsive td{ padding:1.2rem 1.5rem; color:var(--text-color); line-height:1.7; border-bottom:1px solid var(--border-color); vertical-align:top; word-break:break-word; } .table-responsive tbody tr:last-child td{ border-bottom:none; } .table-responsive tbody tr:nth-child(even){ background:rgba(255,255,255,.02); } .table-responsive tbody tr:hover{ background:rgba(37,99,235,.06); } .table-responsive td:first-child{ font-weight:600; color:var(--heading-color); } /* ========================================== NOTE ========================================== */ .table-note{ padding:1.5rem 2rem 2rem; border-top:1px solid var(--border-color); background:rgba(255,255,255,.02); color:var(--text-muted); line-height:1.8; } .table-note strong{ color:var(--heading-color); } /* ========================================================== PREMIUM TABLE RESPONSIVE ========================================================== */ @media(max-width:768px){ .premium-table{ margin-top:2rem; } .premium-table .facts-header{ padding:1.5rem; } .premium-table .facts-header h3{ font-size:1.3rem; } .table-intro{ padding:0 1.5rem 1.5rem; font-size:.95rem; } .table-responsive th{ padding:1rem; font-size:.9rem; } .table-responsive td{ padding:1rem; font-size:.9rem; } .table-note{ padding:1.25rem 1.5rem 1.5rem; font-size:.9rem; } } @media(max-width:576px){ .premium-table .facts-header{ padding:1.25rem; } .premium-table .facts-header h3{ font-size:1.2rem; } .table-intro{ padding:0 1.25rem 1.25rem; font-size:.9rem; line-height:1.7; } .table-responsive th{ padding:.85rem; font-size:.85rem; } .table-responsive td{ padding:.85rem; font-size:.85rem; line-height:1.6; } .table-note{ padding:1rem 1.25rem 1.25rem; font-size:.85rem; line-height:1.7; } } @media(max-width:400px){ .premium-table .facts-header{ padding:1rem; } .premium-table .facts-header h3{ font-size:1.1rem; } .table-intro{ padding:0 1rem 1rem; font-size:.85rem; } .table-responsive th{ padding:.75rem; font-size:.8rem; } .table-responsive td{ padding:.75rem; font-size:.8rem; } .table-note{ padding:1rem; font-size:.8rem; } } /* ========================================================== SUCCESS CHECKLIST ========================================================== */ .success-checklist{ margin-top:3rem; padding:2rem; background:var(--surface-color); border:1px solid var(--border-color); border-radius:var(--radius-xl); } /* ========================================== HEADER ========================================== */ .success-checklist .facts-header{ margin-bottom:1.5rem; } .success-checklist .facts-header h3{ margin-top:1rem; font-size:1.5rem; color:var(--heading-color); } /* ========================================== INTRO ========================================== */ .checklist-intro{ margin-bottom:2rem; color:var(--text-color); line-height:1.8; } /* ========================================== CHECKLIST ========================================== */ .checklist{ display:grid; gap:1rem; padding:0; margin:0; list-style:none; } .checklist li{ display:flex; align-items:flex-start; gap:.75rem; padding:1rem 1.25rem; background:rgba(255,255,255,.03); border:1px solid var(--border-color); border-radius:var(--radius-md); color:var(--text-color); line-height:1.7; transition:all .3s ease; } .checklist li::before{ content:"✓"; flex-shrink:0; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(37,99,235,.15); color:var(--primary-color); font-size:.95rem; font-weight:700; } .checklist li:hover{ transform:translateY(-2px); border-color:rgba(37,99,235,.35); background:rgba(37,99,235,.06); } /* ========================================================== SUCCESS CHECKLIST RESPONSIVE ========================================================== */ @media(max-width:768px){ .success-checklist{ margin-top:2rem; padding:1.5rem; } .success-checklist .facts-header h3{ font-size:1.3rem; } .checklist-intro{ margin-bottom:1.5rem; font-size:.95rem; } .checklist li{ padding:.9rem 1rem; font-size:.95rem; } .checklist li::before{ width:26px; height:26px; font-size:.9rem; } } @media(max-width:576px){ .success-checklist{ padding:1.25rem; } .success-checklist .facts-header h3{ font-size:1.2rem; } .checklist-intro{ font-size:.9rem; line-height:1.7; } .checklist{ gap:.85rem; } .checklist li{ padding:.85rem; font-size:.9rem; gap:.65rem; } .checklist li::before{ width:24px; height:24px; font-size:.85rem; } } @media(max-width:400px){ .success-checklist{ padding:1rem; } .success-checklist .facts-header h3{ font-size:1.1rem; } .checklist-intro{ margin-bottom:1.25rem; font-size:.85rem; } .checklist li{ padding:.8rem; font-size:.85rem; line-height:1.6; } .checklist li::before{ width:22px; height:22px; font-size:.8rem; } } /* ========================================================== RELATED GUIDES PREMIUM COMPONENT V2.0 ========================================================== */ .related-guides{ position:relative; margin-top:4rem; } .related-guides::before{ content:""; position:absolute; inset:0; background: radial-gradient( circle at top center, rgba(37,99,235,.08), transparent 65% ); pointer-events:none; } .related-guides .container{ position:relative; z-index:1; } /* ========================================== WRAPPER ========================================== */ .related-guides-wrapper{ position:relative; overflow:hidden; padding:3rem; background: linear-gradient( 180deg, rgba(255,255,255,.035), rgba(255,255,255,.015) ); border:1px solid rgba(255,255,255,.08); border-radius:32px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow: 0 20px 50px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.05); } /* Decorative Glow */ .related-guides-wrapper::before{ content:""; position:absolute; top:-180px; right:-180px; width:420px; height:420px; border-radius:50%; background: radial-gradient( rgba(37,99,235,.18), transparent 70% ); pointer-events:none; } .related-guides-wrapper::after{ content:""; position:absolute; bottom:-180px; left:-180px; width:380px; height:380px; border-radius:50%; background: radial-gradient( rgba(59,130,246,.10), transparent 70% ); pointer-events:none; } /* ========================================== HEADER ========================================== */ .related-guides .section-header{ position:relative; max-width:820px; margin:0 auto 3.5rem; text-align:center; } .related-guides .section-badge{ margin-bottom:1rem; } .related-guides .section-header h2{ margin-bottom:1.25rem; font-size:clamp(2rem,4vw,2.8rem); line-height:1.2; color:var(--heading-color); letter-spacing:-.02em; } .related-guides .section-intro{ max-width:720px; margin:0 auto; color:var(--text-color); font-size:1.05rem; line-height:1.9; } /* ========================================== GRID ========================================== */ .related-guides-grid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:2rem; align-items:stretch; } /* ========================================================== RELATED GUIDE CARD ========================================================== */ .related-guide-card{ position:relative; display:flex; flex-direction:column; align-items:center; overflow:hidden; padding:2rem; background: linear-gradient( 180deg, rgba(255,255,255,.04), rgba(255,255,255,.015) ); border:1px solid rgba(255,255,255,.08); border-radius:28px; text-decoration:none; transition: transform .45s cubic-bezier(.22,.61,.36,1), border-color .35s ease, box-shadow .45s ease, background .45s ease; box-shadow: 0 10px 30px rgba(0,0,0,.18); } /* ========================================== Animated Gradient Border ========================================== */ .related-guide-card::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background: linear-gradient( 135deg, rgba(37,99,235,.75), rgba(96,165,250,.25), rgba(255,255,255,.08), rgba(37,99,235,.75) ); height:4px; background:linear-gradient( 90deg, var(--primary-color), #60a5fa ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .45s ease; pointer-events:none; } /* ========================================== Hover Overlay ========================================== */ .related-guide-card::after{ content:""; position:absolute; inset:0; background: radial-gradient( circle at top, rgba(37,99,235,.12), transparent 70% ); opacity:0; transition:opacity .45s ease; pointer-events:none; } /* ========================================== Hover ========================================== */ .related-guide-card:hover{ transform: translateY(-12px); background: linear-gradient( 180deg, rgba(37,99,235,.10), rgba(255,255,255,.02) ); border-color: rgba(37,99,235,.45); box-shadow: 0 25px 60px rgba(0,0,0,.35), 0 0 40px rgba(37,99,235,.18); } .related-guide-card:hover::before{ opacity:1; } .related-guide-card:hover::after{ opacity:1; } /* ========================================== Active State ========================================== */ .related-guide-card:active{ transform: translateY(-6px) scale(.985); } /* ========================================== Keyboard Accessibility ========================================== */ .related-guide-card:focus-visible{ outline:3px solid rgba(59,130,246,.8); outline-offset:5px; } /* ========================================== Content Layer ========================================== */ .card-icon, .card-content{ position:relative; z-index:2; } /* ========================================== Smooth Text Animation ========================================== */ .card-content{ transition: transform .35s ease; } .related-guide-card:hover .card-content{ transform: translateY(-2px); } /* ========================================================== CARD ICON ========================================================== */ .card-icon{ position:relative; display:flex; align-items:center; justify-content:center; width:90px; height:90px; margin-bottom:1.75rem; border-radius:50%; background: linear-gradient( 180deg, rgba(37,99,235,.18), rgba(37,99,235,.06) ); border:1px solid rgba(37,99,235,.25); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 15px 35px rgba(37,99,235,.12); transition: transform .45s ease, box-shadow .45s ease, background .45s ease; } .card-icon::before{ content:""; position:absolute; inset:-10px; border-radius:50%; background: radial-gradient( rgba(37,99,235,.18), transparent 70% ); opacity:0; transition:opacity .45s ease; } .card-icon img{ width:42px; height:42px; transition: transform .45s ease; } /* Hover */ .related-guide-card:hover .card-icon{ transform: translateY(-4px) scale(1.08); background: linear-gradient( 180deg, rgba(37,99,235,.28), rgba(37,99,235,.12) ); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 20px 45px rgba(37,99,235,.25); } .related-guide-card:hover .card-icon::before{ opacity:1; } .related-guide-card:hover .card-icon img{ transform: scale(1.12) rotate(6deg); } /* ========================================================== CARD CONTENT ========================================================== */ .card-content{ text-align:center; } .card-content h3{ margin-bottom:1rem; color:var(--heading-color); font-size:1.4rem; line-height:1.3; transition:color .35s ease; } .related-guide-card:hover h3{ color:var(--primary-color); } .card-content p{ margin-bottom:1.75rem; color:var(--text-color); line-height:1.85; font-size:.96rem; } /* ========================================================== CARD TAG ========================================================== */ .card-tag{ display:inline-flex; align-items:center; margin-bottom:1rem; padding:.45rem .9rem; border-radius:999px; background: rgba(37,99,235,.12); border: 1px solid rgba(37,99,235,.18); color: var(--primary-color); font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } /* ========================================================== CTA ========================================================== */ .related-guide-link{ display:inline-flex; align-items:center; gap:.6rem; font-weight:700; color:var(--primary-color); transition: color .35s ease; } .related-guide-link img{ width:18px; height:18px; transition: transform .35s ease; } .related-guide-link::after{ content:""; display:block; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--primary-color); transition:width .35s ease; } .related-guide-card:hover .related-guide-link{ color:var(--primary-hover-color); } .related-guide-card:hover .related-guide-link img{ transform:translateX(6px); } .related-guide-card:hover .related-guide-link::after{ width:100%; } /* Needed for underline */ .related-guide-link{ position:relative; } /* ========================================================== FOOTER ========================================================== */ .related-guides-footer{ margin-top:3rem; padding-top:2rem; border-top: 1px solid rgba(255,255,255,.08); text-align:center; } .related-guides-footer p{ margin:0; color:var(--text-color); line-height:1.8; } .related-guides-footer strong{ color:var(--heading-color); } /* ========================================================== RELATED GUIDES RESPONSIVE ========================================================== */ /* ========================================== LARGE TABLETS ========================================== */ @media (max-width:1200px){ .related-guides-grid{ gap:1.5rem; } .related-guide-card{ padding:1.75rem; } } /* ========================================== TABLETS ========================================== */ @media (max-width:992px){ .related-guides-wrapper{ padding:2.5rem; } .related-guides .section-header{ margin-bottom:3rem; } .related-guides-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem; } } /* ========================================== MOBILE ========================================== */ @media (max-width:768px){ .related-guides{ margin-top:3rem; } .related-guides-wrapper{ padding:2rem; border-radius:24px; } .related-guides .section-header{ margin-bottom:2.5rem; } .related-guides .section-header h2{ font-size:2rem; } .related-guides .section-intro{ font-size:.95rem; line-height:1.8; } .related-guides-grid{ grid-template-columns:1fr; } .related-guide-card{ padding:2rem 1.5rem; } .card-icon{ width:80px; height:80px; margin-bottom:1.5rem; } .card-icon img{ width:38px; height:38px; } .card-content h3{ font-size:1.25rem; } } /* ========================================== SMALL MOBILE ========================================== */ @media (max-width:576px){ .related-guides-wrapper{ padding:1.5rem; border-radius:20px; } .related-guides .section-header{ margin-bottom:2rem; } .related-guides .section-header h2{ font-size:1.7rem; } .related-guides .section-intro{ font-size:.92rem; } .related-guide-card{ padding:1.5rem; border-radius:22px; } .card-icon{ width:72px; height:72px; } .card-icon img{ width:34px; height:34px; } .card-tag{ font-size:.72rem; padding:.4rem .8rem; } .card-content h3{ font-size:1.15rem; } .card-content p{ font-size:.9rem; line-height:1.7; } .related-guide-link{ font-size:.9rem; } .related-guides-footer{ margin-top:2rem; padding-top:1.5rem; } } /* ========================================== EXTRA SMALL DEVICES ========================================== */ @media (max-width:400px){ .related-guides-wrapper{ padding:1.25rem; } .related-guide-card{ padding:1.25rem; } .card-icon{ width:64px; height:64px; margin-bottom:1.25rem; } .card-icon img{ width:30px; height:30px; } .card-content h3{ font-size:1.05rem; } .card-content p{ font-size:.85rem; } } /* ========================================================== ACCESSIBILITY ========================================================== */ @media (prefers-reduced-motion:reduce){ .related-guide-card, .related-guide-card::before, .related-guide-card::after, .card-icon, .card-icon img, .card-content, .related-guide-link, .related-guide-link img{ transition:none !important; animation:none !important; } .related-guide-card:hover{ transform:none; } .related-guide-card:hover .card-icon{ transform:none; } .related-guide-card:hover .card-content{ transform:none; } .related-guide-card:hover .related-guide-link img{ transform:none; } } /* ========================================================== PREMIUM FAQ DESIGN SYSTEM V2.0 ========================================================== */ .premium-faq{ position:relative; margin-top:5rem; } .premium-faq::before{ content:""; position:absolute; inset:0; background: radial-gradient( circle at top center, rgba(37,99,235,.08), transparent 65% ); pointer-events:none; } .premium-faq .container{ position:relative; z-index:1; } /* ========================================================== WRAPPER ========================================================== */ .premium-faq-wrapper{ position:relative; overflow:hidden; padding:3rem; border-radius:32px; border:1px solid rgba(255,255,255,.08); background: linear-gradient( 180deg, rgba(255,255,255,.03), rgba(255,255,255,.015) ); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow: 0 20px 50px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.05); } /* ========================================================== DECORATIVE GLOW ========================================================== */ .premium-faq-wrapper::before{ content:""; position:absolute; top:-220px; right:-220px; width:420px; height:420px; border-radius:50%; background: radial-gradient( rgba(37,99,235,.16), transparent 70% ); pointer-events:none; } .premium-faq-wrapper::after{ content:""; position:absolute; bottom:-220px; left:-220px; width:360px; height:360px; border-radius:50%; background: radial-gradient( rgba(59,130,246,.08), transparent 70% ); pointer-events:none; } /* ========================================================== HEADER ========================================================== */ .premium-faq .section-header{ position:relative; max-width:840px; margin:0 auto 3.5rem; text-align:center; } .premium-faq .section-badge{ margin-bottom:1rem; } .premium-faq .section-header h2{ margin-bottom:1.25rem; color:var(--heading-color); font-size:clamp(2rem,4vw,2.8rem); line-height:1.2; letter-spacing:-.02em; } .premium-faq .section-intro{ max-width:720px; margin:0 auto; color:var(--text-color); line-height:1.9; font-size:1.05rem; } /* ========================================================== FAQ LIST ========================================================== */ .premium-faq-list{ display:flex; flex-direction:column; gap:1.5rem; } /* ========================================================== FAQ ITEM BASE ========================================================== */ .premium-faq-item{ position:relative; overflow:hidden; border-radius:24px; border:1px solid rgba(255,255,255,.08); background: linear-gradient( 180deg, rgba(255,255,255,.025), rgba(255,255,255,.01) ); transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease; } /* Remove Browser Marker */ .premium-faq-item summary{ list-style:none; cursor:pointer; } .premium-faq-item summary::-webkit-details-marker{ display:none; } .premium-faq-item summary::marker{ content:""; } /* ========================================================== SUMMARY LAYOUT ========================================================== */ .premium-faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.75rem 2rem; user-select:none; } /* ========================================================== FAQ CARD ========================================================== */ .premium-faq-item{ isolation:isolate; } .premium-faq-item::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background: linear-gradient( 135deg, rgba(37,99,235,.75), rgba(96,165,250,.25), rgba(255,255,255,.08), rgba(37,99,235,.75) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .45s ease; pointer-events:none; } /* ========================================================== HOVER GLOW ========================================================== */ .premium-faq-item::after{ content:""; position:absolute; inset:0; background: radial-gradient( circle at top, rgba(37,99,235,.12), transparent 70% ); opacity:0; transition:opacity .45s ease; pointer-events:none; } /* ========================================================== HOVER ========================================================== */ .premium-faq-item:hover{ transform:translateY(-6px); border-color:rgba(37,99,235,.40); background: linear-gradient( 180deg, rgba(37,99,235,.08), rgba(255,255,255,.02) ); box-shadow: 0 20px 45px rgba(0,0,0,.30), 0 0 35px rgba(37,99,235,.12); } .premium-faq-item:hover::before{ opacity:1; } .premium-faq-item:hover::after{ opacity:1; } /* ========================================================== OPEN STATE ========================================================== */ .premium-faq-item[open]{ border-color: rgba(37,99,235,.45); background: linear-gradient( 180deg, rgba(37,99,235,.10), rgba(255,255,255,.025) ); box-shadow: 0 25px 60px rgba(0,0,0,.35), 0 0 40px rgba(37,99,235,.18); } .premium-faq-item[open]::before{ opacity:1; } .premium-faq-item[open]::after{ opacity:1; } /* ========================================================== ACTIVE ========================================================== */ .premium-faq-item:active{ transform: translateY(-3px) scale(.995); } /* ========================================================== KEYBOARD ACCESSIBILITY ========================================================== */ .premium-faq-item summary:focus-visible{ outline:3px solid rgba(59,130,246,.75); outline-offset:5px; border-radius:18px; } /* ========================================================== CONTENT LAYER ========================================================== */ .faq-left, .faq-toggle, .faq-content{ position:relative; z-index:2; } /* ========================================================== SUMMARY ANIMATION ========================================================== */ .premium-faq-item summary{ transition: background .35s ease; } .premium-faq-item:hover summary{ background: rgba(255,255,255,.015); } .premium-faq-item[open] summary{ background: rgba(37,99,235,.05); } /* ========================================================== CONTENT SPACING ========================================================== */ .faq-content{ padding: 0 2rem 2rem; } /* ========================================================== DIVIDER ========================================================== */ .faq-content::before{ content:""; display:block; width:100%; height:1px; margin-bottom:1.5rem; background: linear-gradient( 90deg, rgba(37,99,235,.45), rgba(255,255,255,.08) ); } /* ========================================================== FAQ LEFT ========================================================== */ .faq-left{ display:flex; align-items:center; gap:1.5rem; flex:1; } /* ========================================================== NUMBER ========================================================== */ .faq-number{ display:flex; align-items:center; justify-content:center; width:72px; height:72px; flex-shrink:0; border-radius:50%; background: linear-gradient( 180deg, rgba(37,99,235,.18), rgba(37,99,235,.06) ); border:1px solid rgba(37,99,235,.25); color:var(--primary-color); font-size:1.45rem; font-weight:700; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 15px 35px rgba(37,99,235,.12); transition: transform .4s ease, background .4s ease, box-shadow .4s ease; } .premium-faq-item:hover .faq-number, .premium-faq-item[open] .faq-number{ transform:scale(1.08); background: linear-gradient( 180deg, rgba(37,99,235,.28), rgba(37,99,235,.12) ); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 20px 45px rgba(37,99,235,.22); } /* ========================================================== HEADING ========================================================== */ .faq-heading{ flex:1; } .faq-category{ display:inline-flex; align-items:center; margin-bottom:.6rem; padding:.4rem .85rem; border-radius:999px; background:rgba(37,99,235,.12); border:1px solid rgba(37,99,235,.18); color:var(--primary-color); font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; } .faq-heading h3{ margin:0; color:var(--heading-color); font-size:1.3rem; line-height:1.45; transition:color .35s ease; } .premium-faq-item:hover .faq-heading h3, .premium-faq-item[open] .faq-heading h3{ color:var(--primary-color); } /* ========================================================== TOGGLE BUTTON ========================================================== */ .faq-toggle{ display:flex; align-items:center; justify-content:center; width:58px; height:58px; flex-shrink:0; border-radius:50%; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); transition: transform .4s ease, background .4s ease, border-color .4s ease, box-shadow .4s ease; } .faq-toggle img{ width:22px; height:22px; transition: transform .35s ease; } .premium-faq-item:hover .faq-toggle{ background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.30); } .premium-faq-item:hover .faq-toggle img{ transform:rotate(90deg); } .premium-faq-item[open] .faq-toggle{ background: rgba(37,99,235,.18); border-color: rgba(37,99,235,.40); box-shadow: 0 10px 25px rgba(37,99,235,.18); } .premium-faq-item[open] .faq-toggle img{ transform:rotate(45deg); } /* ========================================================== ANSWER ========================================================== */ .faq-content{ color:var(--text-color); line-height:1.9; font-size:1rem; } .faq-content p{ margin:0; } /* ========================================================== OPEN ANIMATION ========================================================== */ .premium-faq-item .faq-content{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s ease; } .premium-faq-item .faq-content p{ overflow:hidden; } .premium-faq-item[open] .faq-content{ grid-template-rows:1fr; } /* ========================================================== SUBTLE CONTENT FADE ========================================================== */ .premium-faq-item .faq-content p{ opacity:0; transform:translateY(-8px); transition: opacity .35s ease, transform .35s ease; } .premium-faq-item[open] .faq-content p{ opacity:1; transform:translateY(0); } /* ========================================================== PREMIUM FAQ V2.0 PART 04 RESPONSIVE + ACCESSIBILITY + FINAL POLISH ========================================================== */ /* ========================================================== SVG TOGGLE ICON ========================================================== */ .faq-toggle-icon{ width:22px; height:22px; display:block; color:var(--heading-color); transition: color .35s ease; } .faq-toggle-vertical, .faq-toggle-horizontal{ transform-origin:center; transition: opacity .35s ease, transform .35s ease, stroke .35s ease; } /* Minus Animation */ .premium-faq-item[open] .faq-toggle-vertical{ opacity:0; transform:scaleY(0); } .premium-faq-item:hover .faq-toggle-icon{ color:var(--primary-color); } .premium-faq-item[open] .faq-toggle-icon{ color:var(--primary-color); } /* ========================================================== SUMMARY WRAPPER ========================================================== */ .faq-summary{ display:flex; align-items:center; justify-content:space-between; gap:2rem; width:100%; } /* ========================================================== MOBILE ========================================================== */ @media (max-width:992px){ .premium-faq-wrapper{ padding:2.5rem; } .faq-number{ width:64px; height:64px; font-size:1.25rem; } .faq-heading h3{ font-size:1.15rem; } } /* ========================================================== TABLET ========================================================== */ @media (max-width:768px){ .premium-faq-wrapper{ padding:2rem; border-radius:24px; } .premium-faq .section-header{ margin-bottom:3rem; } .premium-faq .section-header h2{ font-size:2rem; } .premium-faq-item summary{ padding:1.5rem; } .faq-summary{ gap:1.25rem; } .faq-left{ gap:1rem; } .faq-number{ width:58px; height:58px; font-size:1.1rem; } .faq-heading h3{ font-size:1.05rem; } .faq-category{ font-size:.72rem; } .faq-toggle{ width:50px; height:50px; } .faq-content{ padding: 0 1.5rem 1.5rem; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:576px){ .premium-faq{ margin-top:4rem; } .premium-faq-wrapper{ padding:1.5rem; border-radius:20px; } .premium-faq-item{ border-radius:20px; } .premium-faq-item summary{ padding:1.25rem; } .faq-summary{ align-items:flex-start; gap:1rem; } .faq-left{ align-items:flex-start; gap:.85rem; } .faq-number{ width:50px; height:50px; font-size:1rem; } .faq-heading h3{ font-size:1rem; line-height:1.5; } .faq-category{ margin-bottom:.45rem; } .faq-toggle{ width:44px; height:44px; min-width:44px; min-height:44px; } .faq-toggle-icon{ width:20px; height:20px; } .faq-content{ padding: 0 1.25rem 1.25rem; font-size:.95rem; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media (max-width:400px){ .faq-summary{ gap:.85rem; } .faq-left{ gap:.75rem; } .faq-number{ width:46px; height:46px; font-size:.95rem; } .faq-heading h3{ font-size:.95rem; } .faq-category{ font-size:.68rem; padding:.35rem .7rem; } } /* ========================================================== ACCESSIBILITY ========================================================== */ .premium-faq-item summary:focus-visible{ outline:3px solid rgba(37,99,235,.55); outline-offset:4px; border-radius:18px; } .premium-faq-item summary{ -webkit-tap-highlight-color:transparent; } .faq-toggle{ user-select:none; } .faq-toggle svg{ pointer-events:none; } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion:reduce){ .premium-faq *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; } } /* ========================================================== FINAL POLISH ========================================================== */ .premium-faq-item{ will-change:transform; } .premium-faq-item:hover{ z-index:2; } .faq-number, .faq-toggle{ flex-shrink:0; } .faq-heading{ min-width:0; } .faq-heading h3{ word-break:break-word; } .faq-content p:last-child{ margin-bottom:0; } /* ========================================================== FINAL CTA ========================================================== */ .final-cta { padding: 7rem 0; background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 40%), radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.08), transparent 45%), var(--color-surface); position: relative; overflow: hidden; margin-top:4rem; } .final-cta::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 48px 48px; opacity: 0.35; pointer-events: none; } .final-cta-content { position: relative; z-index: 1; } /* ========================================================== SECTION HEADER ========================================================== */ .final-cta .section-header { max-width: 860px; margin: 0 auto 4rem; text-align: center; } .final-cta .section-badge { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1.4rem; margin-bottom: 1.5rem; border-radius: 999px; background: rgba(37, 99, 235, 0.12); border: 1px solid rgba(59, 130, 246, 0.25); color: var(--color-primary); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; } .final-cta .icon-circle { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(37, 99, 235, 0.15); } .final-cta .icon-circle img { width: 1rem; height: 1rem; } .final-cta .section-title { margin-bottom: 1.25rem; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.15; font-weight: 800; color: var(--color-heading); } .final-cta .section-description { max-width: 760px; margin: 0 auto; font-size: 1.1rem; line-height: 1.9; color: var(--color-text); } /* ========================================================== INTRODUCTION ========================================================== */ .cta-introduction { max-width: 900px; margin: 0 auto 5rem; padding: 2.5rem; border-radius: var(--radius-xl); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px); box-shadow: var(--shadow-lg); } .cta-introduction p { margin-bottom: 1.5rem; font-size: 1.06rem; line-height: 1.9; color: var(--color-text); } .cta-introduction p:last-child { margin-bottom: 0; } .cta-introduction strong { color: var(--color-heading); font-weight: 700; } /* ========================================================== CONTINUE LEARNING ========================================================== */ .cta-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin-bottom: 5rem; } .cta-feature-card { position: relative; padding: 2.25rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-xl); backdrop-filter: blur(14px); box-shadow: var(--shadow-lg); transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; overflow: hidden; } .cta-feature-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(37, 99, 235, 0.10), transparent 55% ); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .cta-feature-card:hover { transform: translateY(-8px); border-color: rgba(59, 130, 246, 0.35); background: rgba(255, 255, 255, 0.06); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.30), 0 0 25px rgba(37, 99, 235, 0.12); } .cta-feature-card:hover::before { opacity: 1; } /* ========================================================== FEATURE ICON ========================================================== */ .cta-feature-card .feature-icon { display: flex; align-items: center; justify-content: center; width: 4.25rem; height: 4.25rem; margin-bottom: 1.5rem; border-radius: 50%; background: linear-gradient( 135deg, rgba(37, 99, 235, 0.18), rgba(59, 130, 246, 0.08) ); border: 1px solid rgba(59, 130, 246, 0.25); transition: transform 0.35s ease, background 0.35s ease; } .cta-feature-card:hover .feature-icon { transform: scale(1.08) rotate(-6deg); background: linear-gradient( 135deg, rgba(37, 99, 235, 0.28), rgba(59, 130, 246, 0.15) ); } .cta-feature-card .feature-icon img { width: 2rem; height: 2rem; } /* ========================================================== FEATURE CONTENT ========================================================== */ .cta-feature-card h3 { margin-bottom: 1rem; font-size: 1.35rem; font-weight: 700; color: var(--color-heading); line-height: 1.3; } .cta-feature-card p { margin: 0; color: var(--color-text); font-size: 1rem; line-height: 1.8; } /* ========================================================== PRIMARY CALL TO ACTION ========================================================== */ .primary-cta { display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding: 3rem; margin-bottom: 5rem; background: linear-gradient( 135deg, rgba(37, 99, 235, 0.12), rgba(59, 130, 246, 0.06) ); border: 1px solid rgba(59, 130, 246, 0.20); border-radius: var(--radius-xl); backdrop-filter: blur(16px); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.30), 0 0 30px rgba(37, 99, 235, 0.08); position: relative; overflow: hidden; } .primary-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at top right, rgba(59, 130, 246, 0.15), transparent 45% ); pointer-events: none; } /* ========================================================== CTA CONTENT ========================================================== */ .primary-cta-content { flex: 1; position: relative; z-index: 1; } .cta-badge { display: inline-block; margin-bottom: 1rem; padding: 0.55rem 1.2rem; border-radius: 999px; background: rgba(37, 99, 235, 0.15); border: 1px solid rgba(59, 130, 246, 0.25); color: var(--color-primary); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .primary-cta-content h3 { margin-bottom: 1.25rem; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.2; font-weight: 800; color: var(--color-heading); } .primary-cta-content p { margin: 0; max-width: 650px; font-size: 1.05rem; line-height: 1.9; color: var(--color-text); } /* ========================================================== CTA ACTIONS ========================================================== */ .primary-cta-actions { display: flex; flex-direction: column; gap: 1rem; min-width: 280px; position: relative; z-index: 1; } .primary-cta-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 1rem 1.75rem; font-weight: 700; text-decoration: none; border-radius: var(--radius-lg); transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .primary-cta-actions .btn img { width: 1rem; height: 1rem; transition: transform 0.3s ease; } /* Primary Button */ .primary-cta-actions .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(37, 99, 235, 0.30); } .primary-cta-actions .btn-primary:hover img { transform: translateX(4px); } /* Secondary Button */ .primary-cta-actions .btn-secondary { background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); color: var(--color-heading); } .primary-cta-actions .btn-secondary:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.05); border-color: rgba(59, 130, 246, 0.35); } /* ========================================================== CLOSING MESSAGE ========================================================== */ .cta-closing { max-width: 900px; margin: 0 auto; text-align: center; } .closing-quote { margin: 0 0 2rem; padding: 2rem 2.5rem; position: relative; border-radius: var(--radius-xl); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); box-shadow: var(--shadow-lg); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; line-height: 1.7; font-style: italic; color: var(--color-heading); } .closing-quote::before { content: "“"; position: absolute; top: 0.5rem; left: 1rem; font-size: 4rem; font-weight: 700; color: rgba(37, 99, 235, 0.25); line-height: 1; } .closing-quote::after { content: "”"; position: absolute; right: 1rem; bottom: -0.8rem; font-size: 4rem; font-weight: 700; color: rgba(37, 99, 235, 0.25); line-height: 1; } .closing-text { max-width: 760px; margin: 0 auto; font-size: 1.08rem; line-height: 1.9; color: var(--color-text); } .closing-text strong { color: var(--color-heading); font-weight: 700; } /* ========================================================== RESPONSIVE DESIGN ========================================================== */ @media (max-width: 992px) { .primary-cta { flex-direction: column; align-items: flex-start; padding: 2.5rem; } .primary-cta-actions { width: 100%; min-width: auto; } .primary-cta-actions .btn { width: 100%; } } @media (max-width: 768px) { .final-cta { padding: 5rem 0; } .final-cta .section-header { margin-bottom: 3rem; } .cta-introduction { padding: 2rem; margin-bottom: 4rem; } .cta-features { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 4rem; } .cta-feature-card { padding: 2rem; } .primary-cta { padding: 2rem; margin-bottom: 4rem; } .primary-cta-content h3 { font-size: 1.8rem; } .closing-quote { padding: 1.75rem; font-size: 1.2rem; } } @media (max-width: 480px) { .final-cta .section-title { font-size: 2rem; } .section-description, .cta-introduction p, .primary-cta-content p, .closing-text { font-size: 1rem; } .cta-feature-card { padding: 1.75rem; } .cta-feature-card h3 { font-size: 1.2rem; } .primary-cta { padding: 1.75rem; } .primary-cta-actions .btn { padding: 0.95rem 1.5rem; } .closing-quote { font-size: 1.1rem; padding: 1.5rem; } } /* ========================================================== HERO SECTION of protein -muscle -growth ========================================================== */ .hero { position: relative; overflow: hidden; padding: 60px 0 40px; background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.18), transparent 35%), radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.12), transparent 35%), #0f172a; } .hero-container { width: min(1200px, 92%); margin: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; } .hero-content { display: flex; flex-direction: column; align-items: flex-start; max-width: 580px; } .hero-image { position: relative; display: flex; justify-content: center; align-items: center; max-width: 700px; width: 100%; margin: -40px auto 0; } /* ========================================================== HERO CONTENT ========================================================== */ .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; margin-bottom: 24px; border: 1px solid rgba(59, 130, 246, 0.30); border-radius: 999px; background: rgba(37, 99, 235, 0.12); backdrop-filter: blur(12px); color: #60a5fa; font-size: 0.95rem; font-weight: 600; } .hero-badge i { font-size: 1.1rem; } .hero h1 { max-width: 560px; margin-bottom: 24px; color: #ffffff; font-size: clamp(2.8rem, 5vw, 3.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -1px; } .hero-description { max-width: 640px; margin-bottom: 36px; color: #cbd5e1; font-size: 1.1rem; line-height: 1.9; } /* ========================================================== HERO BUTTONS ========================================================== */ .hero-buttons { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; flex-wrap: wrap; } .hero-buttons .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 30px; border-radius: 14px; font-size: 1rem; font-weight: 600; text-decoration: none; transition: all 0.35s ease; } .hero-buttons .btn i { font-size: 1.1rem; transition: transform 0.35s ease; } /* Primary Button */ .btn-primary { background: linear-gradient(135deg, #2563eb, #3b82f6); color: #ffffff; box-shadow: 0 10px 30px rgba(37, 99, 235, 0.35); } .btn-primary:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(37, 99, 235, 0.45); } .btn-primary:hover i { transform: translateX(5px); } /* Secondary Button */ .btn-secondary { border: 1px solid rgba(59, 130, 246, 0.35); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(10px); color: #e2e8f0; } .btn-secondary:hover { transform: translateY(-4px); border-color: #3b82f6; background: rgba(37, 99, 235, 0.15); } .btn-secondary:hover i { transform: rotate(10deg); } /* ========================================================== HERO HIGHLIGHTS ========================================================== */ .hero-highlights { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 620px; } .highlight-item { display: flex; align-items: flex-start; gap: 18px; padding: 14px 18px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(59, 130, 246, 0.15); border-radius: 18px; backdrop-filter: blur(12px); transition: all 0.35s ease; } .highlight-item:hover { transform: translateX(8px); border-color: rgba(59, 130, 246, 0.45); background: rgba(37, 99, 235, 0.10); box-shadow: 0 15px 35px rgba(37, 99, 235, 0.18); } .highlight-item i { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #ffffff; font-size: 1.4rem; flex-shrink: 0; } .highlight-item h3 { margin-bottom: 6px; color: #ffffff; font-size: 1.05rem; font-weight: 700; } .highlight-item p { color: #94a3b8; font-size: 0.95rem; line-height: 1.6; } /* ========================================================== HERO IMAGE ========================================================== */ .hero-image { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 700px; margin: -40px 0 0 auto; } .hero-image::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, 0.30), transparent 70%); filter: blur(25px); z-index: 0; } .hero-image img { width: 100%; display: block; border-radius: 30px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 25px 70px rgba(0,0,0,0.45), 0 0 40px rgba(37,99,235,0.15); } /* ========================================================== FLOATING CARDS ========================================================== */ .hero-card { position: absolute; display: flex; align-items: center; gap: 14px; padding: 16px 18px; min-width: 220px; border-radius: 18px; background: rgba(15, 23, 42, 0.80); backdrop-filter: blur(16px); border: 1px solid rgba(59, 130, 246, 0.20); box-shadow: 0 20px 40px rgba(0,0,0,.35); z-index: 3; } .hero-card i { width: 52px; height: 52px; display: flex; justify-content: center; align-items: center; border-radius: 14px; background: linear-gradient(135deg,#2563eb,#3b82f6); color: #ffffff; font-size: 1.3rem; flex-shrink: 0; } .hero-card h4 { margin-bottom: 4px; color: #ffffff; font-size: 1rem; font-weight: 700; } .hero-card p { color: #94a3b8; font-size: .9rem; } /* Floating Card Positions */ .card-one { top: 15%; left: -35px; } .card-two { bottom: 12%; right: -45px; } .card-three { bottom: 8%; right: -35px; } /* ========================================================== HERO RESPONSIVE ========================================================== */ /* =============================== Large Tablet ================================ */ @media (max-width: 1024px) { .hero { padding: 120px 0 80px; } .hero-container { grid-template-columns: 1fr; gap: 60px; text-align: center; } .hero-content { align-items: center; } .hero-description { max-width: 700px; } .hero-buttons { justify-content: center; } .hero-highlights { max-width: 700px; } .hero-image { max-width: 550px; margin: auto; } } /* =============================== Tablet ================================ */ @media (max-width: 768px) { .hero { padding: 110px 0 70px; } .hero h1 { font-size: 2.8rem; } .hero-description { font-size: 1rem; } .hero-buttons { gap: 14px; } .hero-buttons .btn { width: 100%; justify-content: center; } .hero-card { min-width: 190px; padding: 14px 16px; } .card-one { left: -10px; } .card-three { left: -15px; } .card-two { right: -10px; } } /* =============================== Mobile ================================ */ @media (max-width:576px){ .hero{ padding:90px 0 60px; } .hero-container{ width:92%; grid-template-columns:1fr; gap:45px; text-align:center; } .hero-content{ max-width:100%; align-items:center; } .hero h1{ font-size:2.4rem; line-height:1.15; margin-bottom:22px; } .hero-description{ font-size:1rem; line-height:1.9; text-align:center; } .hero-badge{ margin-inline:auto; font-size:.88rem; } .hero-buttons{ width:100%; flex-direction:column; gap:16px; } .hero-buttons .btn{ width:100%; } .hero-image{ max-width:100%; margin:0 auto; } .hero-image img{ width:100%; border-radius:24px; } .hero-image{ display:flex; flex-direction:column; align-items:center; } .hero-image img{ width:100%; max-width:100%; } .hero-card{ position:static; width:100%; max-width:340px; margin-top:16px; } } /* =============================== Small Mobile ================================ */ @media (max-width:400px){ .hero{ padding:80px 0 50px; } .hero-container{ width:94%; gap:36px; } .hero h1{ font-size:2rem; } .hero-description{ font-size:.95rem; } .hero-badge{ padding:8px 16px; font-size:.8rem; } .hero-buttons .btn{ padding:15px 20px; font-size:.95rem; } .hero-card{ padding:16px; } .hero-card i{ width:50px; height:50px; font-size:1.2rem; } .hero-card h4{ font-size:1rem; } .hero-card p{ font-size:.85rem; } } /* ========================================================== WHAT YOU'LL LEARN ========================================================== */ .learning-overview { padding: 100px 0; background: #111827; } .learning-overview .container { width: min(1200px, 92%); margin: auto; } /* =============================== Section Heading ================================ */ .section-heading { max-width: 760px; margin: 0 auto 70px; text-align: center; } .section-tag { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; margin-bottom: 20px; border-radius: 999px; background: rgba(37,99,235,.12); border: 1px solid rgba(59,130,246,.25); color: #60a5fa; font-size: .95rem; font-weight: 600; } .section-tag i{ font-size:1rem; } .section-heading h2{ font-size: clamp(2rem,4vw,3.2rem); font-weight:800; color:#ffffff; margin-bottom:20px; } .section-heading p{ font-size:1.08rem; line-height:1.9; color:#cbd5e1; } /* =============================== Learning Grid ================================ */ .learning-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } /* =============================== Learning Card ================================ */ .learning-card{ padding:35px 30px; background:linear-gradient( 180deg, rgba(30,41,59,.95), rgba(15,23,42,.98) ); border:1px solid rgba(59,130,246,.18); border-radius:24px; transition:.35s ease; } .learning-card:hover{ transform:translateY(-8px); border-color:#3b82f6; box-shadow: 0 18px 45px rgba(37,99,235,.18); } /* =============================== Icon ================================ */ .learning-icon{ width:72px; height:72px; border-radius:20px; display:flex; justify-content:center; align-items:center; margin-bottom:24px; background:linear-gradient( 135deg, #2563eb, #3b82f6 ); color:#ffffff; font-size:1.9rem; } /* =============================== Content ================================ */ .learning-card h3{ font-size:1.4rem; color:#ffffff; margin-bottom:14px; } .learning-card p{ color:#cbd5e1; line-height:1.8; font-size:1rem; } /* =============================== Tablet ================================ */ @media (max-width:992px){ .learning-grid{ grid-template-columns:repeat(2,1fr); } } /* =============================== Mobile ================================ */ @media (max-width:576px){ .learning-overview{ padding:80px 0; } .section-heading{ margin-bottom:50px; } .section-heading h2{ font-size:2.2rem; } .section-heading p{ font-size:1rem; } .learning-grid{ grid-template-columns:1fr; gap:20px; } .learning-card{ padding:28px; } } /* =============================== Small Mobile ================================ */ @media (max-width:400px){ .learning-overview{ padding:70px 0; } .section-heading{ margin-bottom:40px; } .section-tag{ padding:8px 14px; font-size:.8rem; gap:8px; } .section-tag i{ font-size:.9rem; } .section-heading h2{ font-size:1.9rem; line-height:1.25; } .section-heading p{ font-size:.95rem; line-height:1.8; } .learning-card{ padding:24px; border-radius:20px; } .learning-icon{ width:60px; height:60px; border-radius:16px; font-size:1.5rem; margin-bottom:18px; } .learning-card h3{ font-size:1.2rem; margin-bottom:10px; } .learning-card p{ font-size:.9rem; line-height:1.7; } } /* ========================================================== TABLE OF CONTENTS ========================================================== */ .table-of-contents { padding: 100px 0; background: #0f172a; } .table-of-contents .container { width: min(1200px, 92%); margin: auto; } /* =============================== TOC Grid ================================ */ .toc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } /* =============================== TOC Card ================================ */ .toc-item { display: flex; align-items: center; gap: 22px; padding: 24px 28px; text-decoration: none; border-radius: 22px; background: linear-gradient( 180deg, rgba(30,41,59,.95), rgba(15,23,42,.98) ); border: 1px solid rgba(59,130,246,.15); transition: .35s ease; } .toc-item:hover { transform: translateY(-6px); border-color: #3b82f6; box-shadow: 0 18px 40px rgba(37,99,235,.18); } /* =============================== Number ================================ */ .toc-item span { flex-shrink: 0; width: 58px; height: 58px; border-radius: 16px; display: flex; justify-content: center; align-items: center; background: linear-gradient( 135deg, #2563eb, #3b82f6 ); color: #fff; font-size: 1.1rem; font-weight: 700; } /* =============================== Text ================================ */ .toc-item p { margin: 0; color: #f8fafc; font-size: 1.08rem; font-weight: 600; line-height: 1.6; } /* =============================== Tablet ================================ */ @media (max-width:992px){ .toc-grid{ grid-template-columns:1fr; } } /* =============================== Mobile ================================ */ @media (max-width:576px){ .table-of-contents{ padding:80px 0; } .toc-item{ padding:20px; gap:18px; } .toc-item span{ width:50px; height:50px; font-size:1rem; } .toc-item p{ font-size:1rem; } } /* =============================== Small Mobile ================================ */ @media (max-width:400px){ .table-of-contents{ padding:70px 0; } .toc-item{ padding:18px; gap:16px; border-radius:18px; } .toc-item span{ width:44px; height:44px; border-radius:14px; font-size:.9rem; } .toc-item p{ font-size:.95rem; line-height:1.5; } } /* ========================================================== ARTICLE INTRODUCTION ========================================================== */ .article-intro { padding: 100px 0; background: #111827; } .article-intro .container { width: min(1200px, 92%); margin: auto; } /* =============================== Layout ================================ */ .article-layout { display: grid; grid-template-columns: 1.4fr .8fr; gap: 60px; align-items: start; } /* =============================== Left Content ================================ */ .article-content h2 { font-size: clamp(2rem,4vw,3rem); color: #ffffff; margin: 22px 0 28px; line-height: 1.2; } .article-content p { font-size: 1.06rem; line-height: 1.95; color: #cbd5e1; margin-bottom: 24px; } .article-content p:last-child{ margin-bottom:0; } /* =============================== Right Sidebar ================================ */ .intro-summary { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 100px; } /* =============================== Summary Card ================================ */ .summary-card { padding: 28px; background: linear-gradient( 180deg, rgba(30,41,59,.95), rgba(15,23,42,.98) ); border: 1px solid rgba(59,130,246,.15); border-radius: 22px; transition: .35s ease; } .summary-card:hover { transform: translateY(-6px); border-color: #3b82f6; box-shadow: 0 18px 40px rgba(37,99,235,.18); } .summary-card i { width: 64px; height: 64px; display: flex; justify-content: center; align-items: center; border-radius: 18px; margin-bottom: 20px; background: linear-gradient( 135deg, #2563eb, #3b82f6 ); color: #ffffff; font-size: 1.6rem; } .summary-card h3 { font-size: 1.25rem; color: #ffffff; margin-bottom: 12px; } .summary-card p { color: #cbd5e1; line-height: 1.8; font-size: .97rem; } /* =============================== Tablet ================================ */ @media (max-width:992px){ .article-layout{ grid-template-columns:1fr; gap:45px; } .intro-summary{ position:static; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } } /* =============================== Mobile ================================ */ @media (max-width:576px){ .article-intro{ padding:80px 0; } .article-content h2{ font-size:2.2rem; } .article-content p{ font-size:1rem; line-height:1.9; } .intro-summary{ grid-template-columns:1fr; } .summary-card{ padding:24px; } } /* =============================== Small Mobile ================================ */ @media (max-width:400px){ .article-intro{ padding:70px 0; } .article-content h2{ font-size:1.9rem; } .article-content p{ font-size:.95rem; } .summary-card{ padding:22px; border-radius:18px; } .summary-card i{ width:56px; height:56px; font-size:1.4rem; border-radius:16px; } .summary-card h3{ font-size:1.1rem; } .summary-card p{ font-size:.9rem; } } /* ========================================================== CHAPTER SECTION ========================================================== */ .article-section { padding: 100px 0; background: #111827; } .article-section .container { width: min(1200px, 92%); margin: auto; } /* ========================================================== CHAPTER HEADER ========================================================== */ .chapter-header { max-width: 820px; margin: 0 auto 60px; text-align: center; } .chapter-badge { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; border-radius: 999px; background: rgba(37,99,235,.12); border: 1px solid rgba(59,130,246,.25); color: #60a5fa; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .chapter-header h2 { margin: 22px 0 20px; font-size: clamp(2.2rem,4vw,3.4rem); line-height: 1.15; color: #ffffff; } .chapter-description { font-size: 1.08rem; line-height: 1.9; color: #cbd5e1; } /* ========================================================== FEATURE IMAGE ========================================================== */ .chapter-figure { margin: 0 auto 70px; max-width: 950px; } .chapter-figure img { width: 100%; display: block; border-radius: 24px; border: 1px solid rgba(59,130,246,.15); box-shadow: 0 25px 60px rgba(0,0,0,.35); } .chapter-figure figcaption { margin-top: 18px; text-align: center; font-size: .95rem; color: #94a3b8; } /* ========================================================== CHAPTER LAYOUT ========================================================== */ .chapter-layout { display: grid; grid-template-columns: minmax(0,2fr) 340px; gap: 50px; align-items: start; } /* ========================================================== ARTICLE CONTENT ========================================================== */ .chapter-content .lead { font-size: 1.18rem; line-height: 2; color: #f8fafc; margin-bottom: 28px; } .chapter-content p { margin-bottom: 24px; font-size: 1.05rem; line-height: 1.95; color: #cbd5e1; } .chapter-content strong { color: #ffffff; font-weight: 600; } /* ========================================================== KEY TAKEAWAY ========================================================== */ .key-point { display: flex; gap: 22px; margin-top: 50px; padding: 28px; border-radius: 22px; background: linear-gradient( 180deg, rgba(30,41,59,.95), rgba(15,23,42,.98) ); border: 1px solid rgba(59,130,246,.18); } .key-icon { width: 56px; height: 56px; flex-shrink: 0; } .key-point h3 { margin-bottom: 12px; color: #ffffff; font-size: 1.3rem; } .key-point p { margin: 0; } /* ========================================================== SIDEBAR ========================================================== */ .chapter-sidebar { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 100px; } /* ========================================================== QUICK FACTS ========================================================== */ .quick-facts { background: #1e293b; border: 1px solid rgba(59,130,246,.15); border-radius: 22px; overflow: hidden; } .quick-facts h3 { padding: 24px 28px; font-size: 1.3rem; color: #ffffff; border-bottom: 1px solid rgba(255,255,255,.08); } .quick-facts ul { list-style: none; margin: 0; padding: 0; } .quick-facts li { display: flex; align-items: center; gap: 14px; padding: 20px 28px; color: #cbd5e1; border-bottom: 1px solid rgba(255,255,255,.06); } .quick-facts li:last-child { border-bottom: none; } .quick-facts li img { width: 18px; height: 18px; flex-shrink: 0; } /* ========================================================== DID YOU KNOW ========================================================== */ .fact-card { padding: 30px; background: #1e293b; border: 1px solid rgba(59,130,246,.15); border-radius: 22px; } .fact-card h3 { margin-bottom: 18px; font-size: 1.35rem; color: #ffffff; } .fact-card p { color: #cbd5e1; line-height: 1.9; margin: 0; } /* ========================================================== TABLET ========================================================== */ @media (max-width:992px){ .chapter-layout{ grid-template-columns:1fr; } .chapter-sidebar{ position: static; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:576px){ .article-section{ padding:80px 0; } .chapter-header{ margin-bottom:45px; } .chapter-figure{ margin-bottom:50px; } .key-point{ flex-direction:column; text-align:center; } .key-icon{ margin:auto; } .quick-facts h3, .quick-facts li, .fact-card{ padding-left:22px; padding-right:22px; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media (max-width:400px){ .article-section{ padding:70px 0; } /* Chapter Header */ .chapter-badge{ padding:7px 16px; font-size:.78rem; } .chapter-header{ margin-bottom:40px; } .chapter-header h2{ font-size:1.9rem; line-height:1.2; margin:18px 0 16px; } .chapter-description{ font-size:.95rem; line-height:1.8; } /* Feature Image */ .chapter-figure{ margin-bottom:40px; } .chapter-figure img{ border-radius:18px; } .chapter-figure figcaption{ font-size:.85rem; line-height:1.6; } /* Content */ .chapter-content .lead{ font-size:1rem; line-height:1.9; } .chapter-content p{ font-size:.95rem; line-height:1.85; } /* Key Takeaway */ .key-point{ padding:22px; gap:18px; border-radius:18px; } .key-icon{ width:48px; height:48px; } .key-point h3{ font-size:1.15rem; } /* Sidebar */ .chapter-sidebar{ gap:22px; } /* Quick Facts */ .quick-facts{ border-radius:18px; } .quick-facts h3{ padding:20px; font-size:1.15rem; } .quick-facts li{ padding:18px 20px; font-size:.92rem; gap:12px; } .quick-facts li img{ width:16px; height:16px; } /* Did You Know */ .fact-card{ padding:22px; border-radius:18px; } .fact-card h3{ font-size:1.2rem; margin-bottom:14px; } .fact-card p{ font-size:.92rem; line-height:1.8; } } /* ========================================================== FINAL CTA ========================================================== */ .article-cta { padding: 6rem 0; } .cta-card { max-width: 1200px; margin: 0 auto; padding: 4.5rem 3rem; text-align: center; background: radial-gradient(circle at top, rgba(37, 99, 235, 0.12), transparent 60%), var(--surface-color); border: 1px solid rgba(59, 130, 246, 0.15); border-radius: 2rem; box-shadow: var(--shadow-lg); } .cta-card h2 { margin: 2rem 0 1.5rem; } .cta-card>p { max-width: 850px; margin: 0 auto; color: var(--text-secondary); font-size: 1.125rem; line-height: 1.9; } /* ========================================================== CTA QUOTE ========================================================== */ .cta-quote { position: relative; max-width: 720px; margin: 3rem auto; padding: 1.75rem 0; color: var(--text-primary); font-size: 1.2rem; font-weight: 600; font-style: italic; line-height: 1.8; text-align: center; } .cta-quote::before, .cta-quote::after { content: ""; position: absolute; left: 50%; width: 180px; height: 1px; transform: translateX(-50%); background: linear-gradient( 90deg, transparent, rgba(59, 130, 246, 0.8), transparent ); } .cta-quote::before { top: 0; } .cta-quote::after { bottom: 0; } /* ========================================================== CTA BUTTONS ========================================================== */ .cta-buttons { display: flex; justify-content: center; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 2.5rem; } .cta-quote cite { display: block; margin-top: 1rem; color: var(--primary-color); font-style: normal; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; }