/* ============================================================ SKYLER ONE — Design System Shared stylesheet for all pages. Single source of truth for tokens, type, color, and components. by Skyler Labs · 2026 ============================================================ */ /* Fonts: load in each page : */ /* ---------- §1 TOKENS ---------- */ :root { --white: #FFFFFF; --paper: #FBFCFD; --paper-2: #F5F8FA; --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-150: #E8EEF4; --slate-200: #E2E8F0; --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B; --slate-600: #475569; --slate-700: #334155; --slate-800: #1E293B; --slate-900: #0F172A; --midnight: #061427; --midnight-2: #0A1A30; /* Primary — emerald (money / growth / premium) */ --em-50: #ECFDF5; --em-100: #D1FAE5; --em-200: #A7F3D0; --em-300: #6EE7B7; --em-400: #34D399; --em-500: #10B981; --em-600: #059669; --em-700: #047857; --em-800: #065F46; --em-900: #064E3B; /* Accent — warm amber (premium / trophy / heat) */ --am-50: #FFFBEB; --am-100: #FEF3C7; --am-400: #FBBF24; --am-500: #F59E0B; --am-600: #D97706; /* Signal — coral (hot lead / urgent) */ --co-50: #FFF1F2; --co-500: #F43F5E; --co-600: #E11D48; --line: #E5E7EB; --line-2: #D1D5DB; /* Radius */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 22px; /* Elevation */ --shadow-xs: 0 1px 2px rgba(15,23,42,0.04); --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06); --shadow-md: 0 4px 6px -1px rgba(15,23,42,0.06), 0 2px 4px -2px rgba(15,23,42,0.04); --shadow-lg: 0 10px 28px -6px rgba(15,23,42,0.08), 0 8px 12px -6px rgba(15,23,42,0.04); --shadow-xl: 0 24px 60px -12px rgba(6,95,70,0.14), 0 8px 18px rgba(15,23,42,0.06); --shadow-2xl: 0 36px 90px -24px rgba(6,95,70,0.22), 0 10px 24px rgba(15,23,42,0.08); --max: 1280px; --reading: 720px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- §2 BASE ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--slate-900); } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01'; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } img, svg { display: block; max-width: 100%; } ::selection { background: var(--em-100); color: var(--em-800); } :focus-visible { outline: 2px solid var(--em-600); outline-offset: 3px; border-radius: 4px; } .mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; } @media (min-width: 768px) { .container { padding: 0 40px; } } /* ---------- §3 ANIMATION ---------- */ @keyframes pulse-em { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.55);}70%{box-shadow:0 0 0 10px rgba(16,185,129,0);}100%{box-shadow:0 0 0 0 rgba(16,185,129,0);} } @keyframes marquee { 0%{transform:translateX(0);}100%{transform:translateX(-50%);} } @keyframes fade-up { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} } @keyframes fade-only { from{opacity:0;} to{opacity:1;} } @keyframes shimmer { 0%{background-position:-200% center;} 100%{background-position:200% center;} } [data-reveal] { opacity: 0; } [data-reveal="in"] { animation: fade-up 600ms var(--ease-out) both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* ---------- §4 HEADER ---------- */ .announce { background: var(--midnight); color: var(--white); padding: 10px 0; font-size: 13px; text-align: center; } .announce a { color: var(--em-300); font-weight: 600; border-bottom: 1px solid rgba(110,231,183,.35); padding-bottom: 1px; } .announce a:hover { color: var(--white); } .announce .badge { display:inline-block; background: var(--em-500); color: var(--midnight); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:100px; margin-right:10px; vertical-align:middle; } header.site { position: sticky; top: 0; z-index: 50; background: rgba(251,252,253,.85); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid transparent; transition: all 250ms var(--ease-out); } header.site.scrolled { background: rgba(255,255,255,.96); border-bottom-color: var(--line); } .nav { display:flex; align-items:center; justify-content:space-between; height:72px; gap:40px; } .brand-block { display:flex; align-items:center; gap:36px; } .brand { display:flex; align-items:center; gap:10px; } .brand-mark { width:34px; height:34px; border-radius:9px; background: linear-gradient(135deg, var(--em-500), var(--em-700)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:17px; letter-spacing:-.04em; box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 6px 14px -4px rgba(5,150,105,.5); } .brand-name { font-weight:700; font-size:17px; letter-spacing:-.02em; color: var(--slate-900); } .brand-name .one { font-weight:700; letter-spacing:.06em; } .nav-links { display:none; gap:28px; font-size:14px; color: var(--slate-700); font-weight:500; } @media (min-width: 980px) { .nav-links { display:flex; } } .nav-links a { display:inline-flex; align-items:center; gap:4px; transition: color 150ms ease; } .nav-links a:hover, .nav-links a.active { color: var(--em-700); } .nav-links .caret { color: var(--slate-400); } .nav-right { display:flex; align-items:center; gap:8px; } .signin { font-size:14px; color: var(--slate-700); font-weight:500; padding:8px 14px; } .signin:hover { color: var(--slate-900); } .hamburger { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; border:1px solid var(--slate-200); background: var(--white); color: var(--slate-800); } @media (min-width: 980px) { .hamburger { display:none; } } @media (max-width: 979px) { .nav { gap:16px; } .nav-right .signin, .nav-right .btn { display:none; } } .mobile-menu { display:none; position:fixed; inset:0; z-index:60; background: var(--white); padding:20px 24px 40px; overflow-y:auto; } .mobile-menu.open { display:block; animation: fade-up 240ms var(--ease-out); } .mobile-menu .mm-top { display:flex; align-items:center; justify-content:space-between; height:52px; margin-bottom:12px; } .mobile-menu .mm-close { width:40px; height:40px; border-radius:8px; border:1px solid var(--slate-200); background:var(--white); display:inline-flex; align-items:center; justify-content:center; font-size:22px; color: var(--slate-700); } .mobile-menu .mm-link { display:block; padding:16px 4px; font-size:18px; font-weight:600; color: var(--slate-900); border-bottom:1px solid var(--slate-100); } .mobile-menu .mm-actions { display:flex; flex-direction:column; gap:10px; margin-top:24px; } .mobile-menu .btn { width:100%; height:48px; font-size:15px; } body.menu-open { overflow:hidden; } /* ---------- §5 BUTTONS ---------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:42px; padding:0 18px; font-weight:600; font-size:14px; letter-spacing:-.005em; border:1px solid transparent; border-radius: var(--r-md); transition: all 180ms var(--ease-out); cursor:pointer; white-space:nowrap; position:relative; overflow:hidden; } .btn--primary { background: linear-gradient(180deg, var(--em-500), var(--em-600)); color:#fff; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 4px 12px -2px rgba(5,150,105,.4), 0 1px 2px rgba(4,120,87,.3); } .btn--primary:hover { transform:translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 24px -4px rgba(5,150,105,.55); } .btn--secondary { background: var(--white); color: var(--slate-800); border-color: var(--slate-200); box-shadow: var(--shadow-xs); } .btn--secondary:hover { border-color: var(--slate-300); box-shadow: var(--shadow-sm); transform:translateY(-1px); } .btn--ghost { background:transparent; color: var(--slate-700); } .btn--ghost:hover { color: var(--em-700); background: var(--em-50); } .btn--lg { height:50px; padding:0 24px; font-size:15px; } .btn--sm { height:36px; padding:0 14px; font-size:13px; } .btn .arrow { transition: transform 200ms var(--ease-out); } .btn:hover .arrow { transform: translateX(3px); } .btn--white { background:#fff; color: var(--em-700); } .btn--white:hover { background: var(--paper); } .btn--ondark { background:transparent; color:#fff; border-color: rgba(255,255,255,.25); } .btn--ondark:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); } /* ---------- §6 SECTION RHYTHM + HEADINGS ---------- */ section.block { padding: 88px 0; } @media (min-width: 768px) { section.block { padding: 112px 0; } } .bg-soft { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-h-wrap { max-width: var(--reading); margin-bottom: 56px; } .section-h-wrap.center { margin-left:auto; margin-right:auto; text-align:center; } .eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color: var(--em-700); margin-bottom:16px; padding:6px 14px 6px 6px; background: var(--em-50); border:1px solid var(--em-100); border-radius:100px; } .eyebrow .dot { width:14px; height:14px; border-radius:50%; background: var(--em-500); display:inline-flex; align-items:center; justify-content:center; } .eyebrow .dot::after { content:""; width:5px; height:5px; background:#fff; border-radius:50%; } h1, h2, h3, h4 { color: var(--slate-900); } .display-1 { font-weight:800; font-size:clamp(40px,5.8vw,68px); line-height:1.02; letter-spacing:-.038em; margin:0; text-wrap:balance; } h2.section-h { font-weight:800; font-size:clamp(32px,4.2vw,48px); line-height:1.05; letter-spacing:-.032em; margin:0 0 18px; text-wrap:balance; } h3.sub-h { font-weight:700; font-size:clamp(22px,2.4vw,28px); letter-spacing:-.022em; margin:0 0 12px; } .grad { background: linear-gradient(115deg, var(--em-700) 0%, var(--em-500) 50%, var(--am-500) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .section-sub { font-size:18px; color: var(--slate-600); margin:0; line-height:1.6; } .section-sub strong { color: var(--slate-900); font-weight:600; } .lead { font-size:19px; color: var(--slate-600); line-height:1.6; } /* ---------- §7 SUB-PAGE HERO ---------- */ .subhero { position:relative; padding:72px 0 56px; overflow:hidden; background: var(--paper); } .subhero.tight { padding:56px 0 40px; } .subhero::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(6,95,70,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(6,95,70,.05) 1px, transparent 1px); background-size:56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); pointer-events:none; } .subhero .inner { position:relative; z-index:1; max-width: 760px; } .subhero.center .inner { margin:0 auto; text-align:center; } /* ---------- §8 CARDS ---------- */ .card { background: var(--white); border:1px solid var(--slate-200); border-radius: var(--r-lg); padding:26px; transition: all 220ms var(--ease-out); } .card:hover { border-color: var(--em-200); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .grid-3 { display:grid; grid-template-columns:1fr; gap:18px; } @media (min-width:800px){ .grid-3 { grid-template-columns:repeat(3,1fr); } } .grid-2 { display:grid; grid-template-columns:1fr; gap:18px; } @media (min-width:800px){ .grid-2 { grid-template-columns:repeat(2,1fr); } } .feature-grid { display:grid; grid-template-columns:1fr; gap:16px; } @media (min-width:700px){ .feature-grid { grid-template-columns:1fr 1fr; } } @media (min-width:1000px){ .feature-grid { grid-template-columns:repeat(3,1fr); } } .feature { background: var(--white); border:1px solid var(--slate-200); border-radius: var(--r-lg); padding:26px; transition: all 220ms var(--ease-out); position:relative; overflow:hidden; } .feature::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, transparent, var(--em-500), transparent); opacity:0; transition: opacity 220ms ease; } .feature:hover { border-color: var(--em-200); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .feature:hover::before { opacity:1; } .ico { width:38px; height:38px; margin-bottom:16px; border-radius:9px; background: linear-gradient(135deg, var(--em-50), #ECFDF5); color: var(--em-700); display:flex; align-items:center; justify-content:center; border:1px solid var(--em-100); } .feature h4 { margin:0 0 6px; font-size:16px; font-weight:700; letter-spacing:-.015em; } .feature p { margin:0; font-size:13.5px; color: var(--slate-600); line-height:1.55; } .feature .solved { display:inline-block; margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--em-700); background: var(--em-50); border:1px solid var(--em-100); padding:3px 9px; border-radius:100px; } /* ---------- §9 PERMISSIONS TABLE ---------- */ .perms { background: var(--white); border:1px solid var(--slate-200); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-sm); } .perm-row { display:grid; grid-template-columns:1fr; border-bottom:1px solid var(--slate-200); } .perm-row:last-child { border-bottom:none; } @media (min-width:800px){ .perm-row { grid-template-columns:1fr 1.2fr 1.2fr; } } .perm-row.head { background: var(--paper-2); } .perm-row.head .perm-cell { padding:14px 22px; } .perm-cell { padding:22px; border-right:1px solid var(--slate-200); } .perm-cell:last-child { border-right:none; } @media (max-width:799px){ .perm-cell { border-right:none; border-bottom:1px solid var(--slate-200); } .perm-cell:last-child{ border-bottom:none; } } .perm-cell h4 { margin:0 0 8px; font-size:15px; font-weight:600; letter-spacing:-.012em; } .perm-cell p { margin:0; font-size:14px; color: var(--slate-600); line-height:1.6; } .perm-cell strong { color: var(--slate-900); font-weight:600; } .perm-cell .lbl { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--em-700); margin:0; } .pill-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; justify-content:center; } .pill { background: var(--white); border:1px solid var(--slate-200); color: var(--slate-700); padding:7px 14px; border-radius:100px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase; font-weight:500; } .trust-badges { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; justify-content:center; } .tb { display:inline-flex; align-items:center; gap:10px; background: var(--white); border:1px solid var(--slate-200); border-radius:10px; padding:12px 16px; font-size:13px; font-weight:600; color: var(--slate-700); box-shadow: var(--shadow-xs); } .tb svg { color: var(--em-600); flex-shrink:0; } .tb .lbl { font-family:'JetBrains Mono',monospace; font-size:10px; color: var(--slate-500); font-weight:700; letter-spacing:.06em; text-transform:uppercase; display:block; } /* ---------- §10 PRICING ---------- */ .pricing-grid { display:grid; grid-template-columns:1fr; gap:18px; } @media (min-width:900px){ .pricing-grid { grid-template-columns:1fr 1fr 1fr; } } .price-card { background: var(--white); border:1px solid var(--slate-200); border-radius: var(--r-lg); padding:32px; display:flex; flex-direction:column; transition: all 220ms var(--ease-out); } .price-card:hover { border-color: var(--slate-300); box-shadow: var(--shadow-md); transform:translateY(-2px); } .price-card.featured { border-color: var(--em-500); background: linear-gradient(180deg, var(--em-50) 0%, var(--white) 30%); position:relative; box-shadow: 0 0 0 4px var(--em-50), var(--shadow-xl); } .price-card.featured::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--em-500), var(--am-500), var(--em-500)); background-size:200% 100%; animation: shimmer 4s linear infinite; border-radius: var(--r-lg) var(--r-lg) 0 0; } .price-card .badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background: linear-gradient(135deg, var(--em-500), var(--em-700)); color:#fff; font-size:11px; font-weight:800; letter-spacing:.06em; padding:6px 14px; border-radius:100px; text-transform:uppercase; box-shadow: 0 4px 14px -2px rgba(5,150,105,.4); } .price-card .name { font-size:14px; font-weight:700; color: var(--slate-700); margin:0 0 6px; } .price-card .name span { color: var(--slate-500); font-weight:500; } .price-card .price { font-size:48px; font-weight:800; letter-spacing:-.032em; line-height:1; margin:12px 0 4px; color: var(--slate-900); } .price-card .price .per { font-size:16px; color: var(--slate-500); margin-left:4px; font-weight:500; } .price-card.featured .price { color: var(--em-700); } .price-card .price.text { font-size:28px; padding-top:14px; } .price-card .tag { font-size:14px; color: var(--slate-600); margin:10px 0 26px; min-height:42px; line-height:1.5; } .price-card .tag strong { color: var(--slate-900); font-weight:700; } .price-card ul { list-style:none; padding:0; margin:0 0 26px; flex-grow:1; } .price-card li { padding:9px 0; font-size:14px; color: var(--slate-700); display:flex; align-items:flex-start; gap:10px; line-height:1.5; } .price-card li svg { flex-shrink:0; margin-top:3px; color: var(--em-600); } .price-card .btn { width:100%; } .pricing-foot { text-align:center; margin-top:32px; font-size:13px; color: var(--slate-500); } /* ---------- §11 FAQ ---------- */ .faq-grid { display:grid; grid-template-columns:1fr; gap:8px; } @media (min-width:800px){ .faq-grid { grid-template-columns:1fr 1fr; gap:8px 24px; } } details.faq { background: var(--white); border:1px solid var(--slate-200); border-radius:10px; transition: all 200ms var(--ease-out); } details.faq:hover { border-color: var(--slate-300); } details.faq[open] { border-color: var(--em-300); box-shadow: var(--shadow-xs); } details.faq summary { cursor:pointer; list-style:none; padding:18px 22px; font-size:15px; font-weight:600; letter-spacing:-.012em; color: var(--slate-900); display:flex; justify-content:space-between; align-items:center; gap:14px; } details.faq summary::-webkit-details-marker { display:none; } details.faq summary::after { content:"+"; font-weight:400; font-size:20px; color: var(--slate-500); transition: all .2s; flex-shrink:0; line-height:1; } details.faq[open] summary::after { content:"−"; color: var(--em-600); } details.faq .a { padding:0 22px 20px; font-size:14px; color: var(--slate-600); line-height:1.7; } details.faq .a strong { color: var(--slate-900); font-weight:600; } /* ---------- §12 QUOTES ---------- */ .quotes { display:grid; grid-template-columns:1fr; gap:18px; } @media (min-width:800px){ .quotes { grid-template-columns:repeat(3,1fr); } } .quote-card { background: var(--white); border:1px solid var(--slate-200); border-radius: var(--r-lg); padding:28px; display:flex; flex-direction:column; transition: all 220ms var(--ease-out); } .quote-card:hover { border-color: var(--em-200); box-shadow: var(--shadow-md); transform:translateY(-2px); } .q-rating { color: var(--am-500); margin-bottom:14px; font-size:14px; letter-spacing:.05em; } .quote-card .badge-win { display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--em-700); background: var(--em-50); border:1px solid var(--em-100); padding:5px 10px; border-radius:100px; align-self:flex-start; margin-bottom:16px; } .quote-card .badge-win::before { content:"▲"; font-size:8px; color: var(--em-600); } .quote-card .q { font-size:16px; line-height:1.55; color: var(--slate-900); margin:0 0 24px; letter-spacing:-.008em; flex-grow:1; font-weight:500; } .quote-card .author { display:flex; align-items:center; gap:12px; padding-top:20px; border-top:1px solid var(--slate-200); } .quote-card .av { width:38px; height:38px; border-radius:50%; background: linear-gradient(135deg, var(--em-500), var(--em-700)); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; } .quote-card .av.b { background: linear-gradient(135deg, var(--am-400), var(--am-600)); } .quote-card .av.c { background: linear-gradient(135deg, #FB7185, var(--co-600)); } .quote-card .who .name { font-size:14px; font-weight:700; color: var(--slate-900); } .quote-card .who .role { font-size:12.5px; color: var(--slate-500); margin-top:2px; } /* ---------- §13 FINAL CTA ---------- */ .final-cta { border-radius: var(--r-2xl); padding:80px 32px; text-align:center; background: linear-gradient(135deg, var(--em-700) 0%, var(--em-600) 50%, var(--em-800) 100%); color:#fff; box-shadow: var(--shadow-2xl); position:relative; overflow:hidden; } .final-cta::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:56px 56px; mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 75%); } .final-cta::after { content:""; position:absolute; top:-100px; right:-100px; width:400px; height:400px; background: radial-gradient(circle, rgba(245,158,11,.3), transparent 60%); border-radius:50%; } .final-cta > * { position:relative; z-index:1; } .final-cta h2 { font-weight:800; font-size:clamp(32px,4.4vw,52px); line-height:1.05; letter-spacing:-.028em; margin:0 0 20px; color:#fff; text-wrap:balance; } .final-cta p { color: rgba(255,255,255,.82); font-size:17px; max-width:580px; margin:0 auto 32px; line-height:1.6; } .cta-row { display:flex; gap:10px; flex-wrap:wrap; } .final-cta .cta-row { justify-content:center; margin-bottom:18px; } .microcopy { display:flex; gap:6px 18px; flex-wrap:wrap; align-items:center; font-size:13px; color: var(--slate-500); } .microcopy .item { display:inline-flex; align-items:center; gap:6px; } .microcopy svg { color: var(--em-600); flex-shrink:0; } .final-cta .microcopy { color: rgba(255,255,255,.65); justify-content:center; } .final-cta .microcopy svg { color: rgba(255,255,255,.9); } /* ---------- §14 FOOTER ---------- */ footer.site { padding:80px 0 44px; background: var(--paper-2); border-top:1px solid var(--slate-200); } .foot-top { display:grid; grid-template-columns:1fr; gap:40px; margin-bottom:56px; } @media (min-width:900px){ .foot-top { grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:44px; } } .foot-brand .name { font-weight:700; font-size:18px; letter-spacing:-.02em; margin-bottom:6px; color: var(--slate-900); display:inline-flex; align-items:center; gap:10px; } .foot-brand .name .mark { width:30px; height:30px; border-radius:8px; background: linear-gradient(135deg, var(--em-500), var(--em-700)); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; } .foot-brand .sub { font-size:13px; color: var(--slate-500); margin-bottom:18px; } .foot-brand .tag { font-size:14px; color: var(--slate-600); max-width:280px; line-height:1.55; } .foot-col h5 { font-size:13px; font-weight:700; color: var(--slate-900); margin:0 0 16px; } .foot-col ul { list-style:none; padding:0; margin:0; } .foot-col li { margin-bottom:10px; } .foot-col a { font-size:13.5px; color: var(--slate-600); transition: color 150ms ease; } .foot-col a:hover { color: var(--em-700); } .foot-bottom { padding-top:24px; border-top:1px solid var(--slate-200); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color: var(--slate-500); align-items:center; } .foot-social { display:flex; gap:8px; } .foot-social a { width:34px; height:34px; border-radius:8px; background: var(--white); border:1px solid var(--slate-200); display:inline-flex; align-items:center; justify-content:center; color: var(--slate-500); transition: all 200ms var(--ease-out); } .foot-social a:hover { color: var(--em-700); border-color: var(--em-300); transform:translateY(-1px); } /* ---------- §15 PROSE (blog + legal) ---------- */ .prose { max-width: var(--reading); margin:0 auto; color: var(--slate-700); font-size:17px; line-height:1.75; } .prose > * + * { margin-top:1.25em; } .prose h2 { font-size:28px; font-weight:800; letter-spacing:-.025em; color: var(--slate-900); margin-top:2em; line-height:1.2; } .prose h3 { font-size:21px; font-weight:700; letter-spacing:-.015em; color: var(--slate-900); margin-top:1.6em; } .prose p { margin:0; } .prose a { color: var(--em-700); border-bottom:1px solid var(--em-200); } .prose a:hover { border-bottom-color: var(--em-500); } .prose strong { color: var(--slate-900); font-weight:600; } .prose ul, .prose ol { padding-left:1.4em; margin:1.25em 0; } .prose li { margin:0.5em 0; } .prose blockquote { border-left:3px solid var(--em-500); background: var(--em-50); margin:1.6em 0; padding:18px 22px; border-radius:0 10px 10px 0; font-size:18px; font-weight:500; color: var(--slate-800); } .prose blockquote p { margin:0; } .prose hr { border:0; border-top:1px solid var(--slate-200); margin:2.4em 0; } .prose code { font-family:'JetBrains Mono',monospace; font-size:.88em; background: var(--slate-100); padding:2px 6px; border-radius:5px; color: var(--slate-800); } .prose .callout { background: var(--white); border:1px solid var(--slate-200); border-radius:12px; padding:20px 22px; box-shadow: var(--shadow-xs); } .prose figure { margin:0; } .prose figcaption { font-size:13px; color: var(--slate-500); text-align:center; margin-top:8px; } /* ---------- §16 BLOG ---------- */ .post-grid { display:grid; grid-template-columns:1fr; gap:24px; } @media (min-width:720px){ .post-grid { grid-template-columns:1fr 1fr; } } @media (min-width:1040px){ .post-grid { grid-template-columns:repeat(3,1fr); } } .post-card { display:flex; flex-direction:column; background: var(--white); border:1px solid var(--slate-200); border-radius: var(--r-lg); overflow:hidden; transition: all 220ms var(--ease-out); } .post-card:hover { border-color: var(--em-200); box-shadow: var(--shadow-lg); transform:translateY(-3px); } .post-thumb { height:170px; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:16px; } .post-thumb.g1 { background: linear-gradient(135deg, var(--em-600), var(--em-800)); } .post-thumb.g2 { background: linear-gradient(135deg, var(--midnight), var(--em-900)); } .post-thumb.g3 { background: linear-gradient(135deg, var(--am-500), var(--am-600)); } .post-thumb.g4 { background: linear-gradient(135deg, var(--em-500), #0EA5A0); } .post-thumb::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size:32px 32px; } .post-thumb .tag-cat { position:relative; z-index:1; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background: rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); padding:5px 11px; border-radius:100px; } .post-body { padding:22px; display:flex; flex-direction:column; flex-grow:1; } .post-body .meta { font-size:12px; color: var(--slate-500); margin-bottom:10px; font-family:'JetBrains Mono',monospace; letter-spacing:.02em; } .post-body h3 { font-size:18px; font-weight:700; letter-spacing:-.015em; margin:0 0 8px; line-height:1.3; } .post-body p { font-size:14px; color: var(--slate-600); line-height:1.55; margin:0 0 16px; flex-grow:1; } .post-body .read { font-size:13px; font-weight:700; color: var(--em-700); display:inline-flex; align-items:center; gap:6px; } .post-card:hover .read .arrow { transform: translateX(3px); } .post-body .read .arrow { transition: transform 200ms var(--ease-out); } .post-hero { padding:64px 0 36px; } .post-hero .cat { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--em-700); } .post-hero h1 { font-weight:800; font-size:clamp(32px,4.6vw,52px); line-height:1.07; letter-spacing:-.03em; margin:16px 0 20px; max-width:16ch; text-wrap:balance; } .post-hero .byline { display:flex; align-items:center; gap:12px; } .post-hero .byline .av { width:42px; height:42px; border-radius:50%; background: linear-gradient(135deg, var(--em-500), var(--em-700)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; } .post-hero .byline .who .name { font-size:14px; font-weight:700; color: var(--slate-900); } .post-hero .byline .who .meta { font-size:13px; color: var(--slate-500); } .post-banner { height:300px; border-radius: var(--r-xl); margin-bottom:40px; position:relative; overflow:hidden; } .post-banner::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size:44px 44px; } /* ---------- §17 AUTH ---------- */ .auth-wrap { min-height: calc(100vh - 72px); display:grid; grid-template-columns:1fr; } @media (min-width:900px){ .auth-wrap { grid-template-columns:1fr 1fr; } } .auth-form-col { display:flex; align-items:center; justify-content:center; padding:48px 24px; } .auth-card { width:100%; max-width:400px; } .auth-card h1 { font-size:28px; font-weight:800; letter-spacing:-.025em; margin:0 0 8px; } .auth-card .sub { color: var(--slate-600); font-size:15px; margin:0 0 28px; } .field-group { margin-bottom:16px; } .field-group label { display:block; font-size:13px; font-weight:600; color: var(--slate-700); margin-bottom:7px; } .input { width:100%; height:46px; border:1px solid var(--slate-200); border-radius:10px; padding:0 14px; font-size:15px; color: var(--slate-900); background: var(--white); transition: all 150ms ease; } .input:focus { outline:none; border-color: var(--em-500); box-shadow: 0 0 0 3px var(--em-50); } textarea.input { height:auto; padding:12px 14px; resize:vertical; min-height:120px; line-height:1.5; } .input-note { font-size:12.5px; color: var(--slate-500); margin-top:8px; } .divider { display:flex; align-items:center; gap:14px; margin:22px 0; color: var(--slate-400); font-size:12px; } .divider::before, .divider::after { content:""; flex:1; height:1px; background: var(--slate-200); } .oauth-btn { width:100%; height:46px; border:1px solid var(--slate-200); border-radius:10px; background: var(--white); display:flex; align-items:center; justify-content:center; gap:10px; font-weight:600; font-size:14px; color: var(--slate-800); transition: all 150ms ease; margin-bottom:10px; } .oauth-btn:hover { border-color: var(--slate-300); background: var(--slate-50); } .auth-aside { background: linear-gradient(160deg, var(--midnight) 0%, var(--em-900) 130%); color:#fff; padding:56px 48px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; } .auth-aside::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:44px 44px; mask-image: radial-gradient(ellipse 80% 80% at 70% 30%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 80% 80% at 70% 30%, #000 20%, transparent 70%); } .auth-aside > * { position:relative; z-index:1; } /* ---------- §18 CONTACT ---------- */ .contact-grid { display:grid; grid-template-columns:1fr; gap:40px; } @media (min-width:900px){ .contact-grid { grid-template-columns:1fr 1fr; gap:64px; } } .contact-method { display:flex; gap:14px; padding:20px 0; border-bottom:1px solid var(--slate-200); } .contact-method:last-child { border-bottom:none; } .contact-method .ico { margin:0; flex-shrink:0; } .contact-method h4 { margin:0 0 4px; font-size:15px; font-weight:700; } .contact-method p { margin:0; font-size:14px; color: var(--slate-600); line-height:1.5; } .contact-method a { color: var(--em-700); font-weight:600; } /* ---------- §19 MISC / STEPS / STATS ---------- */ .steps { display:grid; grid-template-columns:1fr; gap:16px; } @media (min-width:800px){ .steps { grid-template-columns:repeat(4,1fr); } } .step { background: var(--white); border:1px solid var(--slate-200); border-radius: var(--r-lg); padding:26px; transition: all 220ms var(--ease-out); } .step:hover { border-color: var(--em-200); box-shadow: var(--shadow-lg); transform:translateY(-2px); } .step .num { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.08em; color: var(--em-600); margin-bottom:14px; } .step h4 { font-size:17px; font-weight:700; letter-spacing:-.015em; margin:0 0 8px; } .step p { font-size:13.5px; color: var(--slate-600); line-height:1.55; margin:0 0 14px; } .step .perm { display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--em-700); background: var(--em-50); border:1px solid var(--em-100); padding:5px 10px; border-radius:100px; } .statband { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } @media (min-width:760px){ .statband { grid-template-columns:repeat(4,1fr); } } .statband .s .n { font-size:40px; font-weight:800; letter-spacing:-.035em; color: var(--em-700); line-height:1; } .statband .s .n .am { color: var(--am-600); } .statband .s .l { font-size:13px; color: var(--slate-600); margin-top:8px; font-weight:500; } /* utility */ .center { text-align:center; } .mt-s { margin-top:16px; } .mt-m { margin-top:28px; } .mt-l { margin-top:48px; } .maxr { max-width: var(--reading); }