/* ============================================================ SpeedTrest.com — Global Design System ============================================================ */ /* Google Fonts loaded via preload in HTML — see style.css?v=4 */ /* ── Variables ─────────────────────────────────────────────── */ :root { --bg: #07090f; --surface: #0d1117; --surface2: #141922; --border: #1e2535; --border2: #2a3447; --accent: #e63946; --accent2: #ff6b6b; --accentbg: rgba(230,57,70,.08); --text: #e6edf3; --text2: #8b949e; --text3: #4b5568; --green: #22c55e; --yellow: #eab308; --blue: #58a6ff; --r: 10px; --r-lg: 18px; --r-xl: 28px; --shadow: 0 4px 32px rgba(0,0,0,.4); --max: 1180px; --trans: .22s ease; --nav-bg: rgba(7,9,15,.92); --grid-line: rgba(230,57,70,.03); } /* ── Light mode overrides ───────────────────────────────────── */ html[data-theme="light"] { --bg: #f0f2f7; --surface: #ffffff; --surface2: #e8ecf4; --border: #d4dae8; --border2: #bec8da; --accentbg: rgba(230,57,70,.07); --text: #0d1117; --text2: #4a5568; --text3: #9ca3af; --shadow: 0 4px 32px rgba(0,0,0,.08); --nav-bg: rgba(240,242,247,.95); --grid-line: rgba(230,57,70,.05); } /* ── Reset ──────────────────────────────────────────────────── */ *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; font-size:16px; } body { background:var(--bg); color:var(--text); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; transition:background-color .25s ease, color .25s ease; } img,svg { display:block; max-width:100%; } a { color:inherit; text-decoration:none; } ul { list-style:none; } button,input { font-family:inherit; } /* ── Grid background ────────────────────────────────────────── */ .grid-bg::before { content:''; position:fixed; inset:0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size:60px 60px; pointer-events:none; z-index:0; transition:none; } /* ── Layout helpers ──────────────────────────────────────────── */ .container { width:100%; max-width:var(--max); margin:0 auto; padding:0 1.5rem; } .section { padding:5rem 0; } .section-sm { padding:3rem 0; } /* ── Typography ──────────────────────────────────────────────── */ .eyebrow { display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); background:var(--accentbg); border:1px solid rgba(230,57,70,.2); padding:.3rem .8rem; border-radius:50px; margin-bottom:1rem; } h1,h2,h3,h4 { line-height:1.2; font-weight:700; } .hero-title { font-size:clamp(2.6rem,6vw,4.2rem); font-weight:800; letter-spacing:-.02em; color:var(--text); } .section-title { font-size:clamp(1.7rem,3.5vw,2.4rem); font-weight:700; letter-spacing:-.01em; } .lead { font-size:1.1rem; color:var(--text2); line-height:1.75; } .text-accent { color:var(--accent); } .text-muted { color:var(--text2); } /* ── Buttons ──────────────────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.75rem; border-radius:50px; font-size:.92rem; font-weight:600; cursor:pointer; border:none; transition:all var(--trans); white-space:nowrap; text-decoration:none; } .btn-primary { background:var(--accent); color:#fff; } .btn-primary:hover { background:var(--accent2); transform:translateY(-1px); box-shadow:0 6px 24px rgba(230,57,70,.35); } .btn-outline { background:transparent; color:var(--text); border:1.5px solid var(--border2); } .btn-outline:hover { border-color:var(--accent); color:var(--accent); } .btn-sm { padding:.5rem 1.2rem; font-size:.82rem; } .btn-lg { padding:1rem 2.4rem; font-size:1rem; } /* ── Badge / tag ─────────────────────────────────────────────── */ .badge { display:inline-block; font-size:.68rem; font-weight:600; padding:.2rem .6rem; border-radius:4px; letter-spacing:.04em; } .badge-red { background:rgba(230,57,70,.15); color:var(--accent2); } .badge-green { background:rgba(34,197,94,.12); color:var(--green); } .badge-yellow { background:rgba(234,179,8,.12); color:var(--yellow); } .badge-blue { background:rgba(88,166,255,.12); color:var(--blue); } /* ══════════════════════════════════════════════════════════════ NAVIGATION ══════════════════════════════════════════════════════════════ */ .nav { position:sticky; top:0; z-index:100; background:var(--nav-bg); backdrop-filter:blur(16px) saturate(180%); border-bottom:1px solid var(--border); transition:background-color .25s ease, border-color .25s ease; } .nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 1.5rem; max-width:var(--max); margin:0 auto; } .nav-logo { font-family:'Bebas Neue',sans-serif; font-size:1.5rem; letter-spacing:.12em; color:var(--text); display:flex; align-items:center; gap:.6rem; } .nav-logo-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; } .nav-links { display:flex; align-items:center; gap:2rem; } .nav-links a { font-size:.88rem; font-weight:500; color:var(--text2); transition:color var(--trans); } .nav-links a:hover, .nav-links a.active { color:var(--text); } .nav-cta { margin-left:1.5rem; } /* Nav dropdown */ .nav-dropdown { position:relative; } .nav-dropdown-btn { background:none; border:none; cursor:pointer; font-size:.88rem; font-weight:500; color:var(--text2); padding:0; transition:color var(--trans); display:flex; align-items:center; gap:.3rem; font-family:inherit; } .nav-dropdown-btn:hover { color:var(--text); } .nav-dropdown-menu { position:absolute; top:calc(100% + .75rem); left:50%; transform:translateX(-50%) translateY(-4px); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:.5rem; min-width:210px; box-shadow:0 8px 32px rgba(0,0,0,.35); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:200; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); } .nav-dropdown-menu a { display:block; padding:.45rem .9rem; font-size:.83rem; color:var(--text2); border-radius:var(--r); transition:all var(--trans); font-weight:500; } .nav-dropdown-menu a:hover { background:var(--surface2); color:var(--text); } .nav-dropdown-menu a:last-child { color:var(--accent); font-weight:600; border-top:1px solid var(--border); margin-top:.3rem; padding-top:.6rem; } .nav-burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; } .nav-burger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:all var(--trans); } .mobile-menu { display:none; position:fixed; inset:64px 0 0 0; background:var(--surface); z-index:99; flex-direction:column; padding:2rem 1.5rem; gap:1.5rem; border-top:1px solid var(--border); } .mobile-menu.open { display:flex; } .mobile-menu a { font-size:1.1rem; font-weight:500; color:var(--text2); padding:.5rem 0; border-bottom:1px solid var(--border); } .mobile-menu a:hover { color:var(--text); } /* ══════════════════════════════════════════════════════════════ HERO SECTION ══════════════════════════════════════════════════════════════ */ .hero { padding:4rem 0 3rem; position:relative; overflow:hidden; } .hero::after { content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:700px; height:400px; background:radial-gradient(ellipse at center bottom, rgba(230,57,70,.12) 0%, transparent 70%); pointer-events:none; } .hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; } .hero-content { position:relative; z-index:1; } .hero-buttons { display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; } .hero-trust { display:flex; align-items:center; gap:1.5rem; margin-top:2rem; flex-wrap:wrap; } .hero-trust-item { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--text3); font-weight:500; } .hero-trust-item svg { color:var(--green); flex-shrink:0; } /* ══════════════════════════════════════════════════════════════ SPEED TEST WIDGET (hero) ══════════════════════════════════════════════════════════════ */ .widget-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:2rem 1.75rem 1.75rem; box-shadow:var(--shadow); position:relative; z-index:1; } .widget-speed-label { font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--text2); text-align:center; margin-bottom:.4rem; } .widget-speed-display { display:flex; align-items:flex-end; justify-content:center; gap:.4rem; line-height:1; margin-bottom:.2rem; } .widget-speed-number { font-family:'Bebas Neue',sans-serif; font-size:clamp(4.5rem,12vw,6.5rem); color:var(--text); min-width:3ch; text-align:center; line-height:.9; } .widget-speed-unit { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; color:var(--accent); padding-bottom:.5rem; } .widget-result-msg { min-height:1em; text-align:center; margin-bottom:1rem; transition:all var(--trans); } /* Color-coded result band (shown after a test completes) */ .widget-result-msg[class*="band-"] { display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:.6rem .9rem; border-radius:10px; border:1px solid transparent; animation:resultBandIn .35s ease; } .result-band-label { font-size:1.05rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; } .result-band-speed { font-size:.82rem; font-weight:600; opacity:.95; } .result-band-desc { font-size:.74rem; color:var(--text2); margin-top:.1rem; } .widget-result-msg.band-excellent { background:rgba(88,166,255,.1); border-color:rgba(88,166,255,.3); color:var(--blue); } .widget-result-msg.band-good { background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.3); color:var(--green); } .widget-result-msg.band-fair { background:rgba(234,179,8,.1); border-color:rgba(234,179,8,.3); color:var(--yellow); } .widget-result-msg.band-slow { background:rgba(230,57,70,.1); border-color:rgba(230,57,70,.3); color:var(--accent); } @keyframes resultBandIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} } .widget-progress { height:3px; background:var(--border); border-radius:2px; overflow:hidden; margin-bottom:1rem; } .widget-progress-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:2px; transition:width .4s ease; } .widget-status { display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.75rem; color:var(--text2); margin-bottom:1rem; } .widget-dot { width:6px; height:6px; border-radius:50%; background:var(--text3); flex-shrink:0; transition:background var(--trans); } .widget-dot.active { background:var(--green); box-shadow:0 0 6px var(--green); animation:blink 1s infinite; } @keyframes blink { 0%,100%{opacity:1}50%{opacity:.3} } .widget-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border-radius:12px; overflow:hidden; margin-bottom:1rem; border:1px solid var(--border); } .widget-stat { background:var(--surface2); padding:.8rem .4rem; display:flex; flex-direction:column; align-items:center; gap:.2rem; } .widget-stat-label { font-size:.58rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text3); } .widget-stat-val { font-family:'Bebas Neue',sans-serif; font-size:1.5rem; color:var(--text); letter-spacing:.03em; line-height:1; } .widget-stat-val.lat { color:var(--yellow); } .widget-stat-val.up { color:var(--accent2); } .widget-stat-val.jit { color:#a78bfa; } .widget-stat-sub { font-size:.55rem; color:var(--text3); } .widget-btn-row { display:flex; gap:.75rem; justify-content:center; } .widget-btn { background:transparent; border:1.5px solid var(--accent); color:var(--text); font-family:'Bebas Neue',sans-serif; font-size:1rem; letter-spacing:.18em; padding:.65rem 1.8rem; border-radius:50px; cursor:pointer; transition:all var(--trans); position:relative; overflow:hidden; } .widget-btn::before { content:''; position:absolute; inset:0; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--trans); z-index:-1; } .widget-btn:hover::before { transform:scaleX(1); } .widget-btn:disabled { opacity:.35; cursor:not-allowed; } .widget-btn:disabled::before { transform:scaleX(0); } .widget-share-btn { background:transparent; border:1.5px solid var(--border2); color:var(--text2); font-size:.78rem; padding:.62rem 1rem; border-radius:50px; cursor:pointer; display:none; align-items:center; gap:.35rem; transition:all var(--trans); } .widget-share-btn.show { display:flex; } .widget-share-btn:hover { border-color:var(--text2); color:var(--text); } .widget-server { font-size:.65rem; color:var(--text3); text-align:center; margin-top:.75rem; letter-spacing:.03em; } .widget-server b { color:var(--text2); } /* Toast */ .toast { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(20px); background:var(--surface2); border:1px solid var(--border2); padding:.5rem 1.2rem; border-radius:50px; font-size:.8rem; opacity:0; transition:all var(--trans); pointer-events:none; z-index:999; white-space:nowrap; } .toast.show { opacity:1; transform:translateX(-50%) translateY(0); } /* ══════════════════════════════════════════════════════════════ STATS BAR ══════════════════════════════════════════════════════════════ */ .stats-bar { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .stats-bar-inner { display:flex; justify-content:space-around; align-items:center; padding:1.5rem; gap:1rem; flex-wrap:wrap; max-width:var(--max); margin:0 auto; } .stat-item { text-align:center; } .stat-number { font-family:'Bebas Neue',sans-serif; font-size:2.4rem; color:var(--accent); line-height:1; } .stat-label { font-size:.78rem; color:var(--text2); margin-top:.2rem; } /* ══════════════════════════════════════════════════════════════ FEATURES ══════════════════════════════════════════════════════════════ */ .features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; } .feature-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.75rem; transition:border-color var(--trans), transform var(--trans); } .feature-card:hover { border-color:var(--accent); transform:translateY(-3px); } .feature-icon { width:48px; height:48px; border-radius:var(--r); background:var(--accentbg); border:1px solid rgba(230,57,70,.2); display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; color:var(--accent); } .feature-card h3 { font-size:1.05rem; margin-bottom:.6rem; } .feature-card p { font-size:.88rem; color:var(--text2); line-height:1.7; } /* ══════════════════════════════════════════════════════════════ HOW IT WORKS ══════════════════════════════════════════════════════════════ */ .steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem; position:relative; } .steps-grid::before { content:''; position:absolute; top:24px; left:calc(16.67% + 24px); right:calc(16.67% + 24px); height:1px; background:var(--border2); } .step { text-align:center; } .step-num { width:48px; height:48px; border-radius:50%; background:var(--accentbg); border:1px solid var(--accent); color:var(--accent); font-weight:700; font-size:1rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; } .step h3 { font-size:1rem; margin-bottom:.5rem; } .step p { font-size:.85rem; color:var(--text2); } /* ══════════════════════════════════════════════════════════════ TESTIMONIALS ══════════════════════════════════════════════════════════════ */ .testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; } .testimonial-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.75rem; } .testimonial-stars { color:var(--yellow); font-size:1rem; margin-bottom:.8rem; } .testimonial-text { font-size:.9rem; color:var(--text2); line-height:1.75; margin-bottom:1.2rem; } .testimonial-author { display:flex; align-items:center; gap:.75rem; } .testimonial-avatar { width:38px; height:38px; border-radius:50%; background:var(--surface2); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.85rem; color:var(--accent); } .testimonial-name { font-size:.88rem; font-weight:600; } .testimonial-role { font-size:.75rem; color:var(--text2); } /* ══════════════════════════════════════════════════════════════ BLOG CARDS ══════════════════════════════════════════════════════════════ */ .blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; } .blog-grid-2col { grid-template-columns:repeat(2,1fr); } .blog-grid-full { grid-template-columns:1fr; max-width:820px; margin-left:auto; margin-right:auto; } .post-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:border-color var(--trans), transform var(--trans); } .post-card:hover { border-color:var(--accent); transform:translateY(-3px); } .post-card-thumb { height:160px; background:var(--surface2); display:flex; align-items:center; justify-content:center; font-size:2.5rem; border-bottom:1px solid var(--border); } .post-card-body { padding:1.4rem; flex:1; display:flex; flex-direction:column; } .post-card-meta { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; font-size:.72rem; color:var(--text3); } .post-card-meta .badge { margin:0; } .post-card h3 { font-size:1rem; line-height:1.4; margin-bottom:.6rem; color:var(--text); } .post-card p { font-size:.85rem; color:var(--text2); line-height:1.65; flex:1; } .post-card-footer { margin-top:1.2rem; } .post-card-link { font-size:.82rem; font-weight:600; color:var(--accent); display:flex; align-items:center; gap:.3rem; transition:gap var(--trans); } .post-card:hover .post-card-link { gap:.6rem; } /* Blog listing page */ .blog-hero { padding:3rem 0 2rem; } .blog-hero h1 { font-size:clamp(1.8rem,4vw,2.8rem); } .blog-filters { display:flex; gap:.6rem; flex-wrap:wrap; margin:1.5rem 0; } .blog-filter-btn { padding:.4rem 1rem; border-radius:50px; font-size:.8rem; font-weight:500; cursor:pointer; border:1px solid var(--border2); background:transparent; color:var(--text2); transition:all var(--trans); } .blog-filter-btn:hover, .blog-filter-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; } .featured-post { display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin-bottom:2rem; } .featured-post-thumb { background:var(--surface2); height:240px; display:flex; align-items:center; justify-content:center; font-size:4rem; } .featured-post-body { padding:2rem; display:flex; flex-direction:column; justify-content:center; } .featured-post-body h2 { font-size:1.4rem; line-height:1.35; margin-bottom:.75rem; } .featured-post-body p { font-size:.9rem; color:var(--text2); line-height:1.7; } .featured-post-body .btn { margin-top:1.5rem; width:fit-content; } /* ══════════════════════════════════════════════════════════════ ARTICLE / BLOG POST PAGE ══════════════════════════════════════════════════════════════ */ .article-page { padding:3rem 0 5rem; } .article-layout { display:grid; grid-template-columns:1fr 320px; gap:3rem; align-items:start; } .article-header { margin-bottom:2.5rem; } .article-header .breadcrumb { font-size:.78rem; color:var(--text2); margin-bottom:1rem; display:flex; gap:.4rem; align-items:center; } .article-header .breadcrumb a { color:var(--text2); } .article-header .breadcrumb a:hover { color:var(--accent); } .article-header .breadcrumb span { color:var(--text3); } .article-header h1 { font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.25; margin-bottom:1rem; } .article-meta { display:flex; align-items:center; gap:1.5rem; font-size:.8rem; color:var(--text2); flex-wrap:wrap; padding:.85rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:2rem; } .article-meta-item { display:flex; align-items:center; gap:.35rem; } /* Prose */ .prose { font-size:.97rem; line-height:1.8; } .prose h2 { font-size:1.45rem; font-weight:700; margin:2.2rem 0 .9rem; color:var(--text); } .prose h3 { font-size:1.15rem; font-weight:600; margin:1.8rem 0 .7rem; color:var(--text); } .prose p { color:var(--text2); margin-bottom:1.2rem; } .prose strong { color:var(--text); font-weight:600; } .prose ul, .prose ol { padding-left:1.5rem; margin-bottom:1.2rem; } .prose li { color:var(--text2); margin-bottom:.45rem; line-height:1.7; } .prose ul li { list-style:disc; } .prose ol li { list-style:decimal; } .prose a { color:var(--accent); text-decoration:underline; } .prose a:hover { color:var(--accent2); } .prose table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.88rem; } .prose th { background:var(--surface2); color:var(--text); padding:.75rem 1rem; text-align:left; font-weight:600; border-bottom:2px solid var(--border2); } .prose td { padding:.7rem 1rem; border-bottom:1px solid var(--border); color:var(--text2); } .prose blockquote { border-left:3px solid var(--accent); padding-left:1.2rem; margin:1.5rem 0; color:var(--text2); font-style:italic; } .prose code { background:var(--surface2); border:1px solid var(--border); padding:.15rem .45rem; border-radius:4px; font-size:.85em; font-family:'Courier New',monospace; color:var(--accent2); } .prose .intro-callout { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r); padding:1.2rem 1.4rem; margin-bottom:1.5rem; color:var(--text2); font-size:.95rem; } /* In-article CTA box */ .prose-cta { background:linear-gradient(135deg,var(--surface) 0%,var(--surface2) 100%); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.75rem; margin:2.5rem 0; text-align:center; } .prose-cta h3 { font-size:1.15rem; margin-bottom:.6rem; } .prose-cta p { font-size:.88rem; color:var(--text2); margin-bottom:1.2rem; } .prose-cta .btn { display:inline-flex; margin:0 auto; } /* Sidebar */ .article-sidebar { position:sticky; top:80px; } .sidebar-widget { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.4rem; margin-bottom:1.5rem; } .sidebar-widget h4 { font-size:.88rem; font-weight:600; margin-bottom:1rem; color:var(--text2); text-transform:uppercase; letter-spacing:.08em; } .sidebar-toc a { display:block; font-size:.82rem; color:var(--text2); padding:.3rem 0; border-bottom:1px solid var(--border); transition:color var(--trans); } .sidebar-toc a:last-child { border:none; } .sidebar-toc a:hover { color:var(--accent); } .sidebar-related a { display:flex; align-items:flex-start; gap:.6rem; font-size:.82rem; color:var(--text2); padding:.5rem 0; border-bottom:1px solid var(--border); transition:color var(--trans); } .sidebar-related a:last-child { border:none; } .sidebar-related a:hover { color:var(--text); } .sidebar-related span { color:var(--accent); flex-shrink:0; font-size:1rem; } /* ══════════════════════════════════════════════════════════════ CTA SECTION (homepage / bottom of pages) ══════════════════════════════════════════════════════════════ */ .cta-section { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); text-align:center; padding:5rem 0; position:relative; overflow:hidden; } .cta-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(230,57,70,.08) 0%, transparent 65%); pointer-events:none; } .cta-section .section-title { margin-bottom:1rem; } .cta-section .lead { max-width:580px; margin:0 auto 2rem; } .cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; } /* ══════════════════════════════════════════════════════════════ FAQ ══════════════════════════════════════════════════════════════ */ .faq-grid { max-width:760px; margin:3rem auto 0; } .faq-item { border-bottom:1px solid var(--border); } .faq-question { width:100%; background:none; border:none; color:var(--text); font-size:.97rem; font-weight:600; text-align:left; padding:1.2rem 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; transition:color var(--trans); } .faq-question:hover { color:var(--accent); } .faq-icon { font-size:1.3rem; font-weight:300; color:var(--text2); flex-shrink:0; transition:transform var(--trans); } .faq-item.open .faq-icon { transform:rotate(45deg); color:var(--accent); } .faq-answer { max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease; } .faq-item.open .faq-answer { max-height:400px; } .faq-answer p { padding-bottom:1.2rem; font-size:.9rem; color:var(--text2); line-height:1.75; } /* ══════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════ */ .footer { background:var(--surface); border-top:1px solid var(--border); padding:4rem 0 2rem; } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:3rem; } .footer-brand .footer-logo { font-family:'Bebas Neue',sans-serif; font-size:1.5rem; letter-spacing:.12em; color:var(--text); display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem; } .footer-tagline { font-size:.85rem; color:var(--text2); line-height:1.65; max-width:260px; } .footer-col h5 { font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text2); margin-bottom:1rem; } .footer-col ul li { margin-bottom:.6rem; } .footer-col ul li a { font-size:.85rem; color:var(--text3); transition:color var(--trans); } .footer-col ul li a:hover { color:var(--accent); } .footer-bottom { border-top:1px solid var(--border); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; } .footer-copy { font-size:.78rem; color:var(--text3); } .footer-links { display:flex; gap:1.5rem; } .footer-links a { font-size:.78rem; color:var(--text3); transition:color var(--trans); } .footer-links a:hover { color:var(--accent); } /* ══════════════════════════════════════════════════════════════ HISTORY ══════════════════════════════════════════════════════════════ */ .history-section { margin-top:1rem; display:none; } .history-section.visible { display:block; } .history-title { font-size:.65rem; text-transform:uppercase; letter-spacing:.15em; color:var(--text3); margin-bottom:.5rem; } .history-list { display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:10px; overflow:hidden; } .history-item { background:var(--surface2); display:grid; grid-template-columns:1fr auto auto auto auto; align-items:center; padding:.55rem .9rem; font-size:.75rem; gap:.75rem; animation:fadeUp .3s ease; } @keyframes fadeUp { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} } .h-time { color:var(--text3); font-size:.68rem; } .h-dl { font-family:'Bebas Neue',sans-serif; font-size:1rem; } .h-ul { font-family:'Bebas Neue',sans-serif; font-size:1rem; color:var(--accent2); } .h-ping { font-family:'Bebas Neue',sans-serif; font-size:1rem; color:var(--yellow); } .h-badge { font-size:.6rem; padding:.15rem .4rem; border-radius:4px; font-weight:600; } .h-good { background:rgba(34,197,94,.12); color:var(--green); } .h-ok { background:rgba(234,179,8,.12); color:var(--yellow); } .h-slow { background:rgba(230,57,70,.12); color:var(--accent); } /* ══════════════════════════════════════════════════════════════ ABOUT / PRIVACY PAGE ══════════════════════════════════════════════════════════════ */ .page-hero { padding:4rem 0 3rem; max-width:720px; } .content-page { padding:0 0 5rem; max-width:760px; } .content-page h2 { font-size:1.35rem; margin:2rem 0 .8rem; } .content-page p { font-size:.95rem; color:var(--text2); margin-bottom:1.1rem; line-height:1.8; } .content-page ul { padding-left:1.4rem; margin-bottom:1rem; } .content-page li { color:var(--text2); font-size:.93rem; margin-bottom:.4rem; list-style:disc; } .content-page a { color:var(--accent); } /* ══════════════════════════════════════════════════════════════ UTILITIES ══════════════════════════════════════════════════════════════ */ .text-center { text-align:center; } .mt-1 { margin-top:.5rem; } .mt-2 { margin-top:1rem; } .mt-3 { margin-top:1.5rem; } .mt-4 { margin-top:2rem; } .mt-6 { margin-top:3rem; } .mb-1 { margin-bottom:.5rem; } .mb-2 { margin-bottom:1rem; } .divider { width:48px; height:3px; background:var(--accent); border-radius:2px; margin:.5rem 0 1.5rem; } .divider-center { margin:.5rem auto 1.5rem; } /* ── Theme toggle button ─────────────────────────────────────── */ .theme-toggle { width:36px; height:36px; border-radius:50%; background:var(--surface2); border:1px solid var(--border); color:var(--text2); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--trans); flex-shrink:0; margin-left:.5rem; padding:0; line-height:1; } .theme-toggle:hover { border-color:var(--accent); background:var(--accentbg); color:var(--accent); } /* ══════════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════════ */ @media(max-width:1024px) { .features-grid, .testimonials-grid { grid-template-columns:repeat(2,1fr); } .footer-grid { grid-template-columns:1fr 1fr; } .article-layout { grid-template-columns:1fr; } .article-sidebar { position:static; } } @media(max-width:768px) { .nav-links, .nav-cta { display:none; } .nav-burger { display:flex; } .hero-inner { grid-template-columns:1fr; gap:2rem; } .steps-grid, .testimonials-grid { grid-template-columns:1fr; } .steps-grid::before { display:none; } .blog-grid { grid-template-columns:1fr 1fr; } .featured-post { grid-template-columns:1fr; } .featured-post-thumb { height:160px; } .footer-grid { grid-template-columns:1fr; } .widget-stats { grid-template-columns:repeat(2,1fr); } } @media(max-width:520px) { .blog-grid { grid-template-columns:1fr; } .features-grid { grid-template-columns:1fr; } .hero-buttons { flex-direction:column; } .hero-buttons .btn { width:100%; justify-content:center; } .stats-bar-inner { gap:2rem; } .history-item { grid-template-columns:1fr auto auto; } .h-ping, .h-badge { display:none; } } /* ── Cookie consent banner ──────────────────────────────────── */ #cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:9999; background:var(--surface); border-top:2px solid var(--border); padding:1rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; box-shadow:0 -4px 24px rgba(0,0,0,.35); transform:translateY(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); } #cookie-banner.visible { transform:translateY(0); } #cookie-banner p { color:var(--text2); font-size:.875rem; flex:1 1 280px; line-height:1.55; } #cookie-banner a { color:var(--accent); text-decoration:underline; } .cookie-actions { display:flex; gap:.75rem; flex-shrink:0; } @media(max-width:560px) { #cookie-banner { flex-direction:column; } .cookie-actions { width:100%; } .cookie-actions .btn { flex:1; justify-content:center; } } /* ── Author bio box (E-E-A-T) ───────────────────────────── */ .author-bio{display:flex;gap:1rem;align-items:flex-start;margin:2.5rem 0 1rem;padding:1.25rem;background:var(--surface,#16181d);border:1px solid var(--border,rgba(255,255,255,.1));border-radius:14px;} .author-bio-avatar{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:var(--accent,#e63946);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;letter-spacing:.5px;} .author-bio-name{font-weight:700;color:var(--text,#fff);margin-bottom:.25rem;} .author-bio-text p{font-size:.85rem;color:var(--text2,#a8adb8);line-height:1.6;margin:0;} .author-bio-text a{color:var(--accent,#e63946);}