/* ============================================================ FontGenerator.bond — global stylesheet Design language: minimalist neutral surface, one restrained accent color, hairline borders, soft shadows. No gradients, no glassmorphism. Supports light + dark via [data-theme] on . ============================================================ */ :root{ --bg:#FFFFFF; --surface:#FFFFFF; --surface-soft:#F4F8F6; --surface-alt:#F0F6F3; --border:#E4EBE7; --border-strong:#D2DDD7; --ink:#1E2A35; --ink-soft:#4E6072; --muted:#8B9BA8; --accent:#2FAE82; --accent-strong:#24925F; --accent-ink:#FFFFFF; --accent-soft:#E3F5EC; --secondary:#364E67; --alert:#50BEC3; --alert-soft:#E4F7F8; --success:#2FAE82; --success-soft:#E3F5EC; --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-pill:999px; --shadow-sm: 0 1px 2px rgba(30,42,53,0.06); --shadow-md: 0 10px 26px rgba(30,42,53,0.08); --shadow-lg: 0 20px 48px rgba(30,42,53,0.14); --ease: cubic-bezier(.4,0,.2,1); --t-fast: 150ms var(--ease); --t-med: 260ms var(--ease); --font-display:'Poppins', 'Inter', system-ui, sans-serif; --font-body:'Inter', system-ui, sans-serif; --max-width: 1180px; color-scheme: light; } html[data-theme="dark"]{ --bg:#0E1418; --surface:#161F24; --surface-soft:#1B252B; --surface-alt:#182229; --border:#28343B; --border-strong:#374349; --ink:#EEF3F1; --ink-soft:#AEC0BE; --muted:#788D8B; --accent:#3FC895; --accent-strong:#2FAE82; --accent-ink:#0E1418; --accent-soft:#173327; --secondary:#8FA6BB; --alert:#5FD2D6; --alert-soft:#123336; --success:#3FC895; --success-soft:#173327; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 10px 26px rgba(0,0,0,0.45); --shadow-lg: 0 20px 48px rgba(0,0,0,0.55); color-scheme: dark; } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ font-family:var(--font-body); background:var(--bg); color:var(--ink); min-height:100vh; -webkit-font-smoothing:antialiased; transition:background var(--t-med), color var(--t-med); } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; } input{ font-family:inherit; } ul{ list-style:none; } h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.2; font-weight:700; letter-spacing:-0.01em; } .container{ width:100%; max-width:var(--max-width); margin:0 auto; padding:0 24px; } @media (max-width:640px){ .container{ padding:0 18px; } } .section{ padding:72px 0; } .section-tight{ padding:40px 0; } .section-alt{ background:var(--surface-alt); } @media (max-width:900px){ .section{ padding:48px 0; } } @media (max-width:560px){ .section{ padding:36px 0; } .section-tight{ padding:28px 0; } } /* Skip heavy layout/paint work until a section nears the viewport */ .section{ content-visibility:auto; contain-intrinsic-size: auto 640px; } .eyebrow{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; border-radius:var(--radius-pill); font-weight:600; font-size:14.5px; transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .btn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-sm); } .btn-primary:hover{ transform:translateY(-1px); background:var(--accent-strong); box-shadow:var(--shadow-md); } .btn-outline{ background:var(--surface); border:1.5px solid var(--border-strong); color:var(--ink); } .btn-outline:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); } .btn-icon{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-soft); transition:color var(--t-fast), border-color var(--t-fast), background var(--t-fast); flex-shrink:0; } .btn-icon:hover{ color:var(--accent); border-color:var(--accent); } .btn-icon.is-on{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); } .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; animation:none !important; } } /* ============================================================ HEADER ============================================================ */ .site-header{ position:sticky; top:0; z-index:100; background:var(--bg); border-bottom:1px solid transparent; transition:border-color var(--t-med), box-shadow var(--t-med), background var(--t-med); } .site-header.scrolled{ border-bottom-color:var(--border); box-shadow:var(--shadow-sm); } .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; } .logo{ display:flex; align-items:baseline; gap:2px; font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--ink); flex-shrink:0; } .logo .accent-dot{ color:var(--accent); } .main-nav{ display:flex; align-items:center; gap:4px; } .nav-link{ padding:8px 14px; border-radius:var(--radius-sm); font-size:14px; font-weight:500; color:var(--ink-soft); transition:color var(--t-fast), background var(--t-fast); } .nav-link:hover, .nav-link.active{ color:var(--accent-strong); background:var(--accent-soft); } .header-actions{ display:flex; align-items:center; gap:8px; } .mobile-menu-btn{ display:none; width:38px; height:38px; align-items:center; justify-content:center; border-radius:var(--radius-sm); border:1px solid var(--border-strong); } .theme-toggle .icon-sun{ display:none; } .theme-toggle .icon-moon{ display:flex; } html[data-theme="dark"] .theme-toggle .icon-sun{ display:flex; } html[data-theme="dark"] .theme-toggle .icon-moon{ display:none; } .fav-count-badge{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 3px; } .fav-btn-wrap{ position:relative; } .menu-nav-links{ display:flex; flex-direction:column; gap:2px; } .menu-nav-links a{ padding:12px 6px; border-radius:var(--radius-sm); font-size:15px; font-weight:500; color:var(--ink-soft); transition:color var(--t-fast), background var(--t-fast); } .menu-nav-links a:hover{ color:var(--ink); background:var(--surface-soft); } .menu-panel-divider{ height:1px; background:var(--border); margin:14px 2px; } .menu-panel-row{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:12px 6px; border-radius:var(--radius-sm); font-size:14.5px; font-weight:600; color:var(--ink); background:none; border:none; cursor:pointer; transition:background var(--t-fast); } button.menu-panel-row:hover{ background:var(--surface-soft); } .menu-panel-badge{ min-width:22px; height:22px; padding:0 6px; border-radius:50%; background:var(--accent-soft); color:var(--accent-strong); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; } @media (max-width:820px){ .main-nav{ display:none; } .mobile-menu-btn{ display:flex; } } @media (max-width:480px){ .header-actions .btn-primary span{ display:none; } .header-actions .btn-primary{ padding:10px; border-radius:50%; width:38px; height:38px; justify-content:center; } } @media (max-width:400px){ .fav-btn-wrap{ display:none; } } @media (max-width:340px){ .header-inner{ gap:10px; } .logo{ font-size:16px; } } /* ============================================================ HERO ============================================================ */ .hero{ padding:56px 0 40px; text-align:center; } .hero-inner{ max-width:700px; margin:0 auto; } .hero-title{ font-size:clamp(30px, 5vw, 48px); letter-spacing:-0.02em; color:var(--ink); margin-bottom:24px; } .hero-title em{ font-style:normal; color:var(--accent); } .hero-showcase{ display:flex; align-items:center; justify-content:center; margin:0 auto; } .hero-showcase .glyph{ font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--accent-strong); padding:10px 22px; background:var(--accent-soft); border-radius:999px; min-width:180px; text-align:center; transition:opacity 220ms ease, transform 220ms ease; } .hero-showcase .glyph.glyph-swap{ opacity:0; transform:translateY(4px); } @media (max-width:560px){ .hero{ padding:32px 0 28px; } } /* ============================================================ GENERATOR ============================================================ */ .generator-section{ padding-top:32px; } .generator-card{ padding:24px; border-radius:var(--radius-lg); } .generator-toolbar{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-bottom:14px; } .input-row{ display:flex; align-items:center; gap:10px; background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-md); padding:4px 4px 4px 18px; margin-bottom:18px; } .input-icon{ color:var(--muted); display:flex; flex-shrink:0; } .text-input{ flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--ink); font-size:15.5px; padding:14px 0; } .text-input::placeholder{ color:var(--muted); } .clear-btn{ width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--ink-soft); transition:background var(--t-fast), color var(--t-fast); } .clear-btn:hover{ background:var(--surface); color:var(--ink); } .tabs-row{ display:flex; gap:8px; overflow-x:auto; margin-bottom:14px; scrollbar-width:none; } .tabs-row::-webkit-scrollbar{ display:none; } .tab-pill{ padding:8px 16px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border); font-size:13.5px; font-weight:500; color:var(--ink-soft); white-space:nowrap; flex-shrink:0; transition:all var(--t-fast); } .tab-pill:hover{ border-color:var(--accent); color:var(--accent); } .tab-pill.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); } .customize-btn{ display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--radius-sm); background:var(--accent-soft); border:1px solid var(--border); font-size:13.5px; font-weight:600; color:var(--accent-strong); white-space:nowrap; flex-shrink:0; transition:all var(--t-fast); } .customize-btn:hover{ border-color:var(--accent); } .results-meta{ display:flex; justify-content:space-between; align-items:center; padding:14px 2px 10px; font-size:12.5px; color:var(--muted); gap:10px; flex-wrap:wrap; } .results-list{ display:flex; flex-direction:column; gap:8px; } .result-row{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border); transition:border-color var(--t-fast), background var(--t-fast); } .result-row:hover{ border-color:var(--border-strong); background:var(--surface-soft); } .result-name{ flex-shrink:0; width:140px; font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .result-preview{ flex:1; min-width:0; font-size:var(--preview-size, 17px); letter-spacing:var(--preview-spacing, normal); color:var(--ink); overflow-wrap:anywhere; word-break:break-word; line-height:1.5; } .result-actions{ display:flex; align-items:center; gap:4px; flex-shrink:0; } .result-fav, .result-share, .result-copy{ width:32px; height:32px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); background:var(--surface-soft); border:1px solid var(--border); transition:color var(--t-fast), background var(--t-fast), transform var(--t-fast), border-color var(--t-fast); } .result-copy{ width:34px; height:34px; } .result-fav:hover, .result-share:hover{ color:var(--accent); transform:scale(1.06); } .result-copy:hover{ color:var(--accent); transform:scale(1.06); } .result-copy.copied{ color:var(--success); background:var(--success-soft); border-color:var(--success); } .result-fav.is-fav{ color:#E0453C; border-color:#E0453C; background:rgba(224,69,60,0.08); } .result-fav svg{ transition:transform var(--t-fast); } .result-fav.is-fav svg{ transform:scale(1.1); } .no-results{ text-align:center; padding:30px 10px; font-size:14px; color:var(--muted); } .results-meta-link{ background:none; border:none; padding:0; color:var(--accent-strong); font-weight:600; font-size:12.5px; cursor:pointer; } .results-meta-link:hover{ text-decoration:underline; } .result-row.jump-highlight{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .all-styles-list{ display:flex; flex-wrap:wrap; gap:8px; } .all-styles-chip{ padding:8px 14px; border-radius:var(--radius-pill); background:var(--surface-soft); border:1px solid var(--border); font-size:13px; font-weight:500; color:var(--ink-soft); transition:all var(--t-fast); } .all-styles-chip:hover{ border-color:var(--accent); color:var(--accent-strong); background:var(--accent-soft); } .load-more-wrap{ display:flex; justify-content:center; margin-top:18px; } @media (max-width:640px){ .generator-card{ padding:16px; } .input-row{ flex-wrap:wrap; padding:12px; } .text-input{ width:100%; order:1; padding:8px 0; } .input-icon{ order:0; } .copy-all-btn{ order:2; width:100%; justify-content:center; margin-top:6px; } .clear-btn{ order:0; margin-left:auto; } .result-name{ width:auto; order:1; } .result-row{ flex-wrap:wrap; padding:12px; } .result-actions{ order:2; margin-left:auto; } .result-preview{ order:3; flex-basis:100%; width:100%; padding-top:4px; } } /* ============================================================ TOAST ============================================================ */ .toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%, 12px); background:var(--ink); color:var(--bg); font-size:13.5px; font-weight:500; padding:11px 20px; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity var(--t-med), transform var(--t-med); z-index:300; } .toast.show{ opacity:1; transform:translate(-50%, 0); } /* ============================================================ CENTERED MODALS (Customize / Favorites / Share / Menu) ============================================================ */ .panel-overlay{ position:fixed; inset:0; background:rgba(10,10,12,0.42); opacity:0; pointer-events:none; transition:opacity var(--t-med); z-index:400; } .panel-overlay.open{ opacity:1; pointer-events:auto; } .panel{ position:fixed; top:50%; left:50%; width:min(420px, calc(100% - 32px)); max-height:min(600px, calc(100% - 32px)); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); transform:translate(-50%, -50%) scale(0.96); opacity:0; pointer-events:none; transition:opacity var(--t-med), transform var(--t-med); z-index:401; display:flex; flex-direction:column; } .panel.open{ opacity:1; pointer-events:auto; transform:translate(-50%, -50%) scale(1); } #menuPanel.panel{ width:min(320px, calc(100% - 32px)); } .panel-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 20px 16px; border-bottom:1px solid var(--border); flex-shrink:0; } .panel-head h3{ font-size:16.5px; } .panel-close{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); } .panel-close:hover{ background:var(--surface-soft); color:var(--ink); } .panel-body{ padding:18px 20px 24px; overflow-y:auto; flex:1; } .panel-foot{ padding:16px 20px; border-top:1px solid var(--border); display:flex; gap:10px; flex-shrink:0; } .panel-foot .btn{ flex:1; } @media (max-width:560px){ .panel{ width:calc(100% - 24px); max-height:calc(100% - 24px); } } /* Customize controls */ .control-group{ margin-bottom:22px; } .control-label{ display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:10px; } .control-label span.value{ color:var(--muted); font-weight:500; } .range-input{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:2px; background:var(--border-strong); outline:none; } .range-input::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); cursor:pointer; border:3px solid var(--surface); box-shadow:var(--shadow-sm); } .range-input::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; border:3px solid var(--surface); background:var(--accent); cursor:pointer; box-shadow:var(--shadow-sm); } .segmented{ display:flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; } .segmented button{ flex:1; padding:9px 6px; font-size:13px; font-weight:600; color:var(--ink-soft); background:var(--surface); border-right:1px solid var(--border); transition:background var(--t-fast), color var(--t-fast); } .segmented button:last-child{ border-right:none; } .segmented button.active{ background:var(--ink); color:var(--bg); } .control-preview{ margin-top:6px; padding:14px; border-radius:var(--radius-sm); background:var(--surface-soft); border:1px solid var(--border); font-size:var(--preview-size, 17px); letter-spacing:var(--preview-spacing, normal); text-align:center; word-break:break-word; } /* Favorites panel */ .fav-list{ display:flex; flex-direction:column; gap:8px; } .fav-empty{ text-align:center; padding:40px 10px; color:var(--muted); font-size:14px; } .fav-empty svg{ margin:0 auto 12px; color:var(--border-strong); } /* Share panel */ .share-preview{ padding:16px; border-radius:var(--radius-md); background:var(--surface-soft); border:1px solid var(--border); text-align:center; font-size:19px; margin-bottom:18px; word-break:break-word; } .share-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .share-btn{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); font-size:13.5px; font-weight:600; color:var(--ink); transition:border-color var(--t-fast), background var(--t-fast); } .share-btn:hover{ border-color:var(--accent); background:var(--accent-soft); } /* ============================================================ CATEGORY SHOWCASE ============================================================ */ .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; } .section-head h2{ font-size:clamp(22px, 3vw, 30px); display:flex; align-items:center; gap:8px; } .section-head p{ font-size:14.5px; color:var(--ink-soft); margin-top:6px; max-width:480px; } .view-all-link{ display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--accent-strong); white-space:nowrap; transition:gap var(--t-fast); } .view-all-link:hover{ gap:9px; } .section-head-center{ text-align:center; max-width:560px; margin:0 auto 28px; } .section-head-center h2{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:clamp(22px, 3vw, 30px); margin-bottom:8px; } .section-icon{ font-size:20px; } .section-head-center p{ font-size:14.5px; color:var(--ink-soft); } .category-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; } .category-card{ display:flex; flex-direction:column; align-items:center; padding:24px 16px 0; border-radius:var(--radius-md); text-align:center; overflow:hidden; transition:transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); cursor:pointer; } .category-card:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-md); } .card-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); margin-bottom:12px; } .category-preview{ font-size:26px; font-weight:600; color:var(--ink); margin-bottom:10px; line-height:1.2; min-height:34px; } .card-desc{ font-size:12.5px; color:var(--muted); line-height:1.5; min-height:34px; } .card-underline{ display:block; width:100%; height:3px; margin-top:18px; background:var(--accent); } .how-cta{ display:flex; justify-content:center; margin-top:26px; } .seo-copy{ font-size:13.5px; line-height:1.75; color:var(--ink-soft); max-width:760px; margin:22px auto 0; text-align:center; } @media (max-width:1024px){ .category-grid{ grid-template-columns:repeat(3, 1fr); } } @media (max-width:640px){ .category-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; } .category-card{ padding:18px 14px 0; } } /* ============================================================ HOW IT WORKS ============================================================ */ .steps-row{ display:flex; align-items:flex-start; justify-content:center; gap:0; } .step-item{ display:flex; flex-direction:column; align-items:center; text-align:center; width:280px; flex-shrink:0; } .step-circle{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--accent-ink); background:var(--accent); margin-bottom:16px; } .step-card{ width:100%; padding:24px 18px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border); transition:transform var(--t-fast); } .step-card:hover{ transform:translateY(-3px); } .step-icon{ font-size:24px; display:block; margin-bottom:12px; } .step-card h3{ font-size:15.5px; margin-bottom:8px; } .step-card p{ font-size:13px; line-height:1.6; color:var(--ink-soft); } .step-connector{ flex:0 0 40px; height:1px; margin-top:19px; background-image:linear-gradient(90deg, var(--border) 50%, transparent 50%); background-size:10px 1px; align-self:flex-start; } @media (max-width:900px){ .steps-row{ flex-direction:column; align-items:center; gap:16px; } .step-connector{ display:none; } .step-item{ width:100%; max-width:340px; } } @media (max-width:560px){ .step-card{ padding:18px 14px; } } /* ============================================================ MORE TOOLS ============================================================ */ .tools-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } .tool-card{ padding:22px; position:relative; } .tool-icon{ width:38px; height:38px; border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:14px; } .tool-card h3{ font-size:15px; margin-bottom:6px; } .tool-card p{ font-size:13px; color:var(--ink-soft); line-height:1.6; margin-bottom:14px; } .tool-badge{ position:absolute; top:16px; right:16px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:3px 8px; border-radius:20px; } .tool-badge.live{ background:var(--success-soft); color:var(--success); } .tool-badge.soon{ background:var(--surface-soft); color:var(--muted); border:1px solid var(--border); } .tool-input-row{ display:flex; gap:8px; margin-bottom:10px; } .tool-input-row input, .tool-input-row select{ flex:1; min-width:0; background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 10px; font-size:13px; color:var(--ink); } .tool-output{ min-height:44px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--surface-soft); border:1px solid var(--border); font-size:13.5px; word-break:break-word; margin-bottom:10px; color:var(--ink); } @media (max-width:1024px){ .tools-grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:640px){ .tools-grid{ grid-template-columns:1fr; } } /* ============================================================ SEO CONTENT + FAQ ============================================================ */ .seo-block{ padding:40px 36px; border-radius:var(--radius-lg); } .seo-block h2{ font-size:24px; margin-bottom:14px; } .seo-block h3{ font-size:17px; margin-top:28px; margin-bottom:10px; color:var(--ink); } .seo-block p{ font-size:14px; line-height:1.8; color:var(--ink-soft); max-width:800px; } .seo-block strong{ color:var(--ink); font-weight:600; } .seo-block ul{ margin:8px 0 8px 4px; } .seo-block li{ font-size:14px; line-height:1.8; color:var(--ink-soft); padding-left:16px; position:relative; } .seo-block li::before{ content:"—"; position:absolute; left:0; color:var(--accent); } .faq-list{ margin-top:14px; display:flex; flex-direction:column; gap:10px; } .faq-item{ border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); overflow:hidden; } .faq-item summary{ list-style:none; cursor:pointer; padding:16px 44px 16px 18px; font-size:14.5px; font-weight:600; color:var(--ink); position:relative; transition:background var(--t-fast); } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary:hover{ background:var(--surface-soft); } .faq-item summary::after{ content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:19px; font-weight:400; color:var(--accent); transition:transform var(--t-fast); } .faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); } .faq-item[open] summary{ border-bottom:1px solid var(--border); } .faq-answer{ padding:14px 18px 18px; font-size:13.5px; line-height:1.7; color:var(--ink-soft); } @media (max-width:768px){ .seo-block{ padding:24px 18px; } } /* ============================================================ FOOTER ============================================================ */ .site-footer{ margin-top:40px; padding:48px 0 26px; border-top:1px solid var(--border); } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; margin-bottom:32px; } .footer-brand .logo{ margin-bottom:12px; } .footer-tagline{ font-size:13px; line-height:1.7; color:var(--ink-soft); max-width:280px; margin-bottom:16px; } .social-row{ display:flex; gap:8px; } .social-btn{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--ink-soft); border:1px solid var(--border); transition:color var(--t-fast), border-color var(--t-fast); } .social-btn:hover{ color:var(--accent); border-color:var(--accent); } .footer-col h4{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink); margin-bottom:14px; } .footer-col a{ display:block; font-size:13.5px; color:var(--ink-soft); margin-bottom:10px; width:fit-content; transition:color var(--t-fast); } .footer-col a:hover{ color:var(--accent); } .footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:20px; border-top:1px solid var(--border); font-size:12.5px; color:var(--muted); } .scroll-top-btn{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); border:1px solid var(--border); background:var(--surface); transition:transform var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .scroll-top-btn:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-2px); } @media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1 / -1; } } @media (max-width:560px){ .site-footer{ margin-top:24px; padding:30px 0 18px; } .footer-grid{ grid-template-columns:1fr 1fr; gap:22px 14px; margin-bottom:20px; } .footer-bottom{ flex-direction:column; gap:12px; text-align:center; padding-top:14px; } } /* ============================================================ LEGAL / INNER PAGES ============================================================ */ .legal-page{ padding:44px 0 72px; } .legal-page .page-title{ font-size:clamp(24px, 4vw, 34px); margin-bottom:8px; } .legal-page .page-updated{ font-size:12.5px; color:var(--muted); margin-bottom:30px; } .legal-page .legal-card{ padding:32px clamp(18px, 4vw, 44px); max-width:800px; margin:0 auto; } .legal-page h2{ font-size:18px; margin:24px 0 10px; } .legal-page h2:first-child{ margin-top:0; } .legal-page p{ font-size:14px; line-height:1.75; color:var(--ink-soft); margin-bottom:12px; } .legal-page a.inline-link{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }