/* ============================================================ LOSTCODE.DEV — SHARED STYLESHEET All pages link to this file ============================================================ */ /* ============================ FONTS ============================ */ /* Fonts loaded via in HTML for performance — see preconnect tags in */ /* ============================ VARIABLES — DARK (default) ============================ */ :root { --orange: #f98219; --purple: #6c4ef3; --orange-glow: rgba(249,130,25,0.22); --purple-glow: rgba(108,78,243,0.28); --bg: #080810; --bg-alt: #06060f; --surface: rgba(255,255,255,0.04); --surface-hover: rgba(255,255,255,0.07); --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.12); --text: #f0f0fa; --text-muted: rgba(240,240,250,0.45); --code-bg: #0e0e1c; --grid-line: rgba(255,255,255,0.025); --nav-bg: rgba(8,8,16,0.78); --blob-opacity: 0.5; --font-display: 'Bebas Neue', sans-serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill:100px; } /* ============================ VARIABLES — LIGHT ============================ */ [data-theme="light"] { --bg: #f2f2f8; --bg-alt: #e8e8f2; --surface: rgba(0,0,0,0.042); --surface-hover: rgba(0,0,0,0.07); --border: rgba(0,0,0,0.09); --border-strong: rgba(0,0,0,0.15); --text: #0d0d1a; --text-muted: rgba(13,13,26,0.5); --code-bg: #e0e0ee; --grid-line: rgba(0,0,0,0.055); --nav-bg: rgba(242,242,248,0.85); --blob-opacity: 0.15; } /* ============================ RESET ============================ */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; font-size:16px; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); overflow-x: hidden; transition: background .35s ease, color .35s ease; -webkit-font-smoothing: antialiased; } a { text-decoration:none; color:inherit; } ul { list-style:none; } img { display:block; max-width:100%; } button { border:none; cursor:pointer; font-family:inherit; background:none; } /* ============================ UTILITIES ============================ */ .container { max-width:1200px; margin:0 auto; padding:0 4rem; } @media(max-width:768px){ .container{ padding:0 1.5rem; } } .gradient-text { background: linear-gradient(110deg, var(--orange), var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .outline-text { -webkit-text-stroke: 2px var(--orange); color: transparent; } /* ============================ BUTTONS ============================ */ .btn { display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-body); font-size:.9rem; font-weight:500; padding:.85rem 1.8rem; border-radius:var(--radius-pill); transition:all .25s cubic-bezier(.22,1,.36,1); cursor:pointer; white-space:nowrap; } .btn--primary { background: linear-gradient(135deg,var(--orange),#e06c00); color:#fff; box-shadow:0 0 28px rgba(249,130,25,.32), inset 0 1px 0 rgba(255,255,255,.14); } .btn--primary:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 8px 36px rgba(249,130,25,.5); } .btn--ghost { background:var(--surface); color:var(--text); border:1px solid var(--border); backdrop-filter:blur(10px); } .btn--ghost:hover { background:var(--surface-hover); border-color:var(--border-strong); transform:translateY(-2px); } .btn--purple { background: linear-gradient(135deg,var(--purple),#5a3de0); color:#fff; box-shadow:0 0 28px rgba(108,78,243,.32); } .btn--purple:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 8px 36px rgba(108,78,243,.5); } /* ============================ SECTION HEADINGS ============================ */ .eyebrow { display:flex; align-items:center; gap:.8rem; margin-bottom:1.2rem; } .eyebrow__line { width:32px; height:2px; border-radius:2px; background:linear-gradient(to right,var(--orange),var(--purple)); flex-shrink:0; } .eyebrow__text { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-muted); } .section-title { font-family:var(--font-display); font-size:clamp(3rem,5vw,5.5rem); line-height:.92; letter-spacing:.02em; color:var(--text); margin-bottom:1.5rem; } .section-desc { font-size:1.05rem; font-weight:300; line-height:1.7; color:var(--text-muted); max-width:520px; } /* ============================ BADGES / TAGS ============================ */ .tag { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.05em; padding:.3rem .75rem; border-radius:var(--radius-pill); background:rgba(108,78,243,.1); border:1px solid rgba(108,78,243,.2); color:#a78bfa; display:inline-flex; align-items:center; gap:.4rem; } .tag--orange { background:rgba(249,130,25,.1); border-color:rgba(249,130,25,.2); color:var(--orange); } .tag--green { background:rgba(74,222,128,.08); border-color:rgba(74,222,128,.2); color:#4ade80; } /* ============================ BACKGROUND GRID OVERLAY ============================ */ .grid-overlay { position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(var(--grid-line) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse at 50% 40%,black 30%,transparent 80%); -webkit-mask-image:radial-gradient(ellipse at 50% 40%,black 30%,transparent 80%); } /* ============================ BLOBS ============================ */ .blob { position:absolute; border-radius:50%; filter:blur(100px); opacity:var(--blob-opacity); pointer-events:none; animation:blobDrift 12s ease-in-out infinite alternate; } .blob--purple { background:radial-gradient(circle,var(--purple),transparent 70%); } .blob--orange { background:radial-gradient(circle,var(--orange),transparent 70%); } @keyframes blobDrift { 0% { transform:translate(0,0) scale(1); } 50% { transform:translate(40px,-30px) scale(1.08); } 100% { transform:translate(-20px,30px) scale(.96); } } /* ============================ FLOATING CODE SNIPPETS ============================ */ .code-float { position:absolute; font-family:var(--font-mono); font-size:.75rem; background:var(--surface); border:1px solid var(--border); backdrop-filter:blur(12px); padding:.5rem .9rem; border-radius:var(--radius-sm); white-space:nowrap; pointer-events:none; opacity:0; animation:floatIn .8s ease forwards, floatUp 6s ease-in-out infinite; } .cf-1 { top:15%; left:5%; animation-delay:.5s,1.3s; } .cf-2 { top:22%; right:4%; animation-delay:.9s,1.7s; } .cf-3 { bottom:30%; left:3%; animation-delay:1.3s,2.1s; } .cf-4 { bottom:22%; right:6%; animation-delay:1.7s,2.5s; } @keyframes floatIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} } @keyframes floatUp { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } .cf-kw { color:var(--purple); } .cf-fn { color:var(--orange); } .cf-str{ color:#7dd3a8; } .cf-cm { color:rgba(255,255,255,.3); font-style:italic; } [data-theme="light"] .cf-cm { color:rgba(0,0,0,.3); } /* ============================ STATUS DOT ============================ */ .status-dot { width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px rgba(74,222,128,.8); animation:pulse 2s ease-in-out infinite; flex-shrink:0; } @keyframes pulse { 0%,100%{ box-shadow:0 0 8px rgba(74,222,128,.8); } 50% { box-shadow:0 0 18px rgba(74,222,128,1); } } /* ============================ PAGE HERO (all inner pages) ============================ */ .page-hero { position:relative; overflow:hidden; padding:10rem 0 7rem; background:var(--bg); } .page-hero__inner { position:relative; z-index:2; } /* ============================ SEPARATOR LINE ============================ */ .sep { width:100%; height:1px; background:linear-gradient(to right,transparent,var(--purple),var(--orange),transparent); opacity:.3; border:none; margin:0; } /* ============================ CARDS — shared base ============================ */ .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2.2rem; position:relative; overflow:hidden; transition:all .35s cubic-bezier(.22,1,.36,1); } .card::before { content:''; position:absolute; inset:0; border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--orange-glow),var(--purple-glow)); opacity:0; transition:opacity .35s; } .card:hover { transform:translateY(-5px); border-color:rgba(108,78,243,.3); } .card:hover::before { opacity:1; } .card__icon { font-size:1.6rem; width:52px; height:52px; display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; position:relative; z-index:1; } .card__num { font-family:var(--font-mono); font-size:.65rem; color:var(--orange); letter-spacing:.1em; margin-bottom:.8rem; position:relative; z-index:1; } .card__title { font-family:var(--font-display); font-size:1.8rem; line-height:1; letter-spacing:.04em; color:var(--text); margin-bottom:.8rem; position:relative; z-index:1; } .card__desc { font-size:.9rem; font-weight:300; line-height:1.65; color:var(--text-muted); position:relative; z-index:1; } .card__tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; position:relative; z-index:1; } /* ============================ TOOLS MARQUEE ============================ */ .marquee-section { padding:2.8rem 0; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .marquee-label { text-align:center; font-family:var(--font-mono); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted); margin-bottom:1.8rem; } .marquee { display:flex; overflow:hidden; } .marquee__track { display:flex; gap:2.5rem; align-items:center; flex-shrink:0; animation:marqueeScroll 32s linear infinite; padding-right:2.5rem; } @keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} } .tool-pill { display:flex; align-items:center; gap:.55rem; font-family:var(--font-mono); font-size:.75rem; color:var(--text-muted); padding:.45rem 1.1rem; border-radius:var(--radius-pill); background:var(--surface); border:1px solid var(--border); white-space:nowrap; transition:color .25s, border-color .25s; } .tool-pill:hover { color:var(--text); border-color:var(--border-strong); } .tool-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; } .td-orange { background:var(--orange); } .td-purple { background:var(--purple); } .td-green { background:#4ade80; } .td-blue { background:#60a5fa; } .td-pink { background:#f472b6; } .td-red { background:#f87171; } /* ============================ NAV ============================ */ .nav { position:fixed; top:0; left:0; right:0; z-index:200; isolation:isolate; padding:1.1rem 3rem; display:flex; align-items:center; justify-content:space-between; backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); border-bottom:1px solid var(--border); background:var(--nav-bg); transition:padding .3s ease, background .35s ease, border-color .35s ease; } .nav.scrolled { padding:.75rem 3rem; } .nav__logo img { height:34px; width:auto; display:block; } .nav__logo-text { font-family:var(--font-display); font-size:1.6rem; letter-spacing:.06em; background:linear-gradient(110deg,var(--orange),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .nav__links { display:flex; align-items:center; gap:1.5rem; position:relative; z-index:201; } .nav__links a { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); transition:color .25s; position:relative; padding-bottom:2px; } .nav__links a:hover { color:var(--text); } .nav__links a.active { color:var(--orange); } .nav__links a.active::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px; border-radius:2px; background:linear-gradient(to right,var(--orange),var(--purple)); } .nav__right { display:flex; align-items:center; gap:1rem; position:relative; z-index:201; } .theme-toggle { width:44px; height:24px; border-radius:var(--radius-pill); background:var(--surface); border:1px solid var(--border); cursor:pointer; position:relative; display:flex; align-items:center; padding:2px 3px; transition:border-color .25s; } .theme-toggle:hover { border-color:rgba(249,130,25,.4); } .toggle-thumb { width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--purple)); display:flex; align-items:center; justify-content:center; font-size:10px; line-height:1; transition:transform .35s cubic-bezier(.22,1,.36,1); } [data-theme="light"] .toggle-thumb { transform:translateX(20px); } .nav__cta { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.04em; padding:.48rem 1rem; border-radius:var(--radius-pill); background:linear-gradient(135deg,var(--orange),#e06c00); color:#fff; transition:all .25s; box-shadow:0 0 18px rgba(249,130,25,.28); white-space:nowrap; } .nav__cta:hover { transform:translateY(-2px); box-shadow:0 6px 28px rgba(249,130,25,.48); } .nav__hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:none; border:none; } .nav__hamburger span { display:block; width:24px; height:2px; background:var(--text); border-radius:2px; transition:all .3s; } /* Mobile menu */ .mobile-menu { display:none; position:fixed; inset:0; z-index:199; background:rgba(8,8,16,.97); backdrop-filter:blur(24px); padding:6rem 2.5rem 3rem; flex-direction:column; } [data-theme="light"] .mobile-menu { background:rgba(242,242,248,.97); } .mobile-menu.open { display:flex; } .mobile-menu > a { display:block; padding:1.3rem 0; border-bottom:1px solid var(--border); font-family:var(--font-display); font-size:2.6rem; letter-spacing:.05em; color:var(--text); transition:color .2s, padding-left .2s; } .mobile-menu > a:hover, .mobile-menu > a.active, .mobile-menu > a.active-page { color:var(--orange); padding-left:.5rem; } .mobile-menu ul { display:flex; flex-direction:column; gap:0; } .mobile-menu ul li { border-bottom:1px solid var(--border); } .mobile-menu ul a { display:block; padding:1.3rem 0; font-family:var(--font-display); font-size:2.6rem; letter-spacing:.05em; color:var(--text); transition:color .2s, padding-left .2s; } .mobile-menu ul a:hover, .mobile-menu ul a.active { color:var(--orange); padding-left:.5rem; } /* ============================ FOOTER ============================ */ .footer { background:var(--bg-alt); border-top:1px solid var(--border); padding:5rem 0 0; transition:background .35s ease; } .footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:4rem; padding-bottom:4rem; } .footer__logo-img { height:38px; width:auto; margin-bottom:1rem; } .footer__logo-text { font-family:var(--font-display); font-size:1.8rem; letter-spacing:.06em; background:linear-gradient(110deg,var(--orange),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:1rem; } .footer__tagline { font-size:.88rem; font-weight:300; line-height:1.65; color:var(--text-muted); margin-bottom:1.5rem; } .footer__socials { display:flex; gap:.6rem; } .social-btn { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--border); color:var(--text-muted); font-size:.8rem; transition:all .25s; } .social-btn:hover { background:rgba(249,130,25,.12); border-color:rgba(249,130,25,.3); color:var(--orange); transform:translateY(-2px); } .footer__col-title { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-muted); margin-bottom:1.2rem; } .footer__links { display:flex; flex-direction:column; gap:.65rem; } .footer__links a { font-size:.88rem; font-weight:300; color:var(--text-muted); transition:color .25s; } .footer__links a:hover { color:var(--text); } .footer__links a.active-page { color:var(--orange); } .footer__bottom { border-top:1px solid var(--border); padding:1.6rem 0; display:flex; justify-content:space-between; align-items:center; } .footer__copy { font-family:var(--font-mono); font-size:.65rem; color:var(--text-muted); letter-spacing:.05em; } .footer__status { display:flex; align-items:center; gap:.6rem; font-family:var(--font-mono); font-size:.65rem; color:var(--text-muted); } /* ============================ SCROLL HINT ============================ */ .scroll-hint { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.6rem; opacity:0; animation:fadeIn .8s ease 2s both; } .scroll-hint span { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-muted); } .scroll-hint__line { width:1px; height:36px; background:linear-gradient(to bottom,var(--orange),transparent); animation:scrollLine 2s ease-in-out infinite; } @keyframes scrollLine { 0% { transform:scaleY(0); transform-origin:top; } 50% { transform:scaleY(1); transform-origin:top; } 51% { transform:scaleY(1); transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } } @keyframes fadeIn { from{opacity:0;transform:translateX(-50%) translateY(10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} } @keyframes slideUp { from{opacity:0;transform:translateY(60px)} to{opacity:1;transform:translateY(0)} } @keyframes revealUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} } /* ============================ INTERSECTION OBSERVER ANIMS ============================ */ /* CSS-only reveal — no JS required. Uses animation-timeline where supported, falls back to a simple fade-in on load. */ @supports (animation-timeline: scroll()) { .reveal { animation: revealFade linear both; animation-timeline: view(); animation-range: entry 0% entry 25%; } .reveal-delay-1 { animation-delay: calc(var(--delay,0s) + .08s); } .reveal-delay-2 { animation-delay: calc(var(--delay,0s) + .16s); } .reveal-delay-3 { animation-delay: calc(var(--delay,0s) + .24s); } .reveal-delay-4 { animation-delay: calc(var(--delay,0s) + .32s); } } /* Fallback: simple load-in animation for browsers without scroll timeline */ @supports not (animation-timeline: scroll()) { .reveal { animation: revealFade .7s cubic-bezier(.22,1,.36,1) both; } .reveal-delay-1 { animation-delay:.12s; } .reveal-delay-2 { animation-delay:.22s; } .reveal-delay-3 { animation-delay:.32s; } .reveal-delay-4 { animation-delay:.42s; } } /* Keep .visible working for JS-driven reveals too */ .reveal.visible { opacity:1; transform:translateY(0); } @keyframes revealFade { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:translateY(0); } } /* ============================ RESPONSIVE ============================ */ @media(max-width:900px) { .nav { padding:1.1rem 2rem; } .nav.scrolled { padding:.75rem 2rem; } .nav__links { display:none; } .nav__hamburger { display:flex; } .footer__grid { grid-template-columns:1fr 1fr; gap:2.5rem; } .footer__bottom { flex-direction:column; gap:1rem; text-align:center; } } @media(max-width:640px) { .nav { padding:1rem 1.5rem; } .nav.scrolled { padding:.7rem 1.5rem; } .container { padding:0 1.5rem; } .footer { padding:3.5rem 0 0; } .footer__grid { grid-template-columns:1fr; gap:2rem; } .code-float { display:none; } } /* ============================ SVG ICON SIZING Icons inherit color via currentColor ============================ */ .svc-feature__icon svg, .step-check__icon svg, .ls-icon svg, .ci-icon svg, .vtag__icon svg { width:1em; height:1em; } .ow-icon svg { width:1.6em; height:1.6em; } .form-success__icon svg { width:1em; height:1em; } .pf-check svg, .pf-x svg { width:.85em; height:.85em; vertical-align:middle; } .nl-success svg { width:.9em; height:.9em; vertical-align:middle; margin-right:.2em; }