/* ============================================================ CLOUDTOOL — Theme System 3 switchable themes via [data-theme] attribute on : "neon" (default) — dark, hot pink/cyan gradient, Gen Z energy "sun" — cream + coral, soft retro warmth "mono" — pure black/white, high contrast minimal Plus a font-scale toggle via [data-scale] = "comfy" | "compact" ============================================================ */ :root{ /* ---- NEON (default) ---- */ --bg:#0b0a14; --bg-soft:#14121f; --surface:#1b1829; --surface-2:#241f36; --line:#312a47; --text:#f5f3ff; --text-dim:#a79fc4; --text-faint:#6e6587; --accent:#ff4fd8; --accent-2:#3ee8ff; --accent-soft:rgba(255,79,216,0.16); --accent-2-soft:rgba(62,232,255,0.14); --gradient: linear-gradient(135deg, #ff4fd8 0%, #a25bff 50%, #3ee8ff 100%); --ok:#5fec9d; --warn:#ffd166; --err:#ff6b81; --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --shadow-pop: 0 20px 50px -15px rgba(255,79,216,0.35); --font-display: 'Space Grotesk', 'Inter', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, Consolas, monospace; --fs-base:16px; --space-unit:1; } html[data-theme="sun"]{ --bg:#fdf6ec; --bg-soft:#f8ecd9; --surface:#ffffff; --surface-2:#fff1de; --line:#ecd9bd; --text:#2b1d14; --text-dim:#7a6450; --text-faint:#a8917c; --accent:#ff6b4a; --accent-2:#1fa39e; --accent-soft:rgba(255,107,74,0.14); --accent-2-soft:rgba(31,163,158,0.12); --gradient: linear-gradient(135deg, #ff6b4a 0%, #ffae5c 50%, #1fa39e 100%); --ok:#2f9e6e; --warn:#e0a426; --err:#e0524a; --shadow-pop: 0 20px 50px -15px rgba(255,107,74,0.25); } html[data-theme="mono"]{ --bg:#0a0a0a; --bg-soft:#121212; --surface:#181818; --surface-2:#202020; --line:#333333; --text:#ffffff; --text-dim:#a8a8a8; --text-faint:#6b6b6b; --accent:#ffffff; --accent-2:#ffffff; --accent-soft:rgba(255,255,255,0.1); --accent-2-soft:rgba(255,255,255,0.06); --gradient: linear-gradient(135deg, #ffffff 0%, #999999 100%); --ok:#ffffff; --warn:#ffffff; --err:#ff4444; --shadow-pop: 0 20px 50px -15px rgba(255,255,255,0.15); } html[data-scale="compact"]{ --fs-base:14.5px; --space-unit:0.85; } /* ============================================================ Reset & base ============================================================ */ *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:var(--fs-base); line-height:1.6; -webkit-font-smoothing:antialiased; transition:background .3s ease, color .3s ease; } a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} button{font-family:inherit;cursor:pointer;} input,textarea,select{font-family:inherit;} ul,ol{list-style:none;} ::selection{background:var(--accent-soft);color:var(--text);} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;} ::-webkit-scrollbar-thumb:hover{background:var(--accent);} :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } @media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} html{scroll-behavior:auto;} } /* ============================================================ Layout shell ============================================================ */ .site-header{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:calc(16px * var(--space-unit)) calc(28px * var(--space-unit)); background:color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .brand{ display:flex;align-items:center;gap:10px; font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-0.3px; flex-shrink:0; } .brand .mark{ width:30px;height:30px; border-radius:9px; background:var(--gradient); display:flex;align-items:center;justify-content:center; flex-shrink:0; } .brand .mark svg{width:16px;height:16px;color:var(--bg);} .brand .grad-text{ background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .main-nav{ display:flex; align-items:center; gap:22px; font-size:14px; font-weight:600; color:var(--text-dim); } .main-nav a{transition:color .15s;} .main-nav a:hover, .main-nav a.active{color:var(--text);} .header-controls{ display:flex; align-items:center; gap:10px; } .theme-switch{ display:flex; align-items:center; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:4px; } .theme-dot{ width:24px;height:24px; border-radius:50%; border:2px solid transparent; cursor:pointer; display:flex;align-items:center;justify-content:center; transition:border-color .15s, transform .15s; flex-shrink:0; } .theme-dot:hover{transform:scale(1.1);} .theme-dot.active{border-color:var(--accent);} .theme-dot[data-theme-opt="neon"]{background:linear-gradient(135deg,#ff4fd8,#3ee8ff);} .theme-dot[data-theme-opt="sun"]{background:linear-gradient(135deg,#ff6b4a,#ffae5c);} .theme-dot[data-theme-opt="mono"]{background:linear-gradient(135deg,#fff,#999);} .scale-toggle{ display:flex;align-items:center;gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:5px 5px; font-size:11px; font-weight:700; } .scale-btn{ background:none; border:none; color:var(--text-faint); padding:5px 10px; border-radius:14px; transition:background .15s,color .15s; } .scale-btn.active{background:var(--accent-soft);color:var(--accent);} .menu-toggle-btn{ display:none; width:38px;height:38px; border-radius:10px; background:var(--surface); border:1px solid var(--line); color:var(--text); align-items:center;justify-content:center; } .menu-toggle-btn svg{width:16px;height:16px;} @media (max-width:880px){ .main-nav{ position:fixed; top:69px;left:0;right:0; flex-direction:column; align-items:flex-start; background:var(--bg); border-bottom:1px solid var(--line); padding:18px 24px; gap:16px; display:none; z-index:49; } .main-nav.open{display:flex;} .menu-toggle-btn{display:flex;} } .site-footer{ border-top:1px solid var(--line); padding:calc(50px * var(--space-unit)) calc(28px * var(--space-unit)) calc(30px * var(--space-unit)); margin-top:auto; } .footer-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; } .footer-col h4{ font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-faint); margin-bottom:14px; font-weight:700; } .footer-col a, .footer-col p{ display:block; color:var(--text-dim); font-size:13.5px; margin-bottom:10px; transition:color .15s; } .footer-col a:hover{color:var(--accent);} .footer-brand-blurb{ color:var(--text-dim); font-size:13.5px; max-width:280px; margin-top:10px; line-height:1.7; } .footer-bottom{ max-width:1180px; margin:36px auto 0 auto; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--text-faint); } @media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr;gap:28px;} } /* ============================================================ Page wrapper ============================================================ */ .page-wrap{ max-width:1180px; margin:0 auto; padding:0 calc(28px * var(--space-unit)); } .app-shell{ min-height:100vh; display:flex; flex-direction:column; } main{flex:1;} /* ============================================================ Reusable components ============================================================ */ /* Pills / badges */ .pill{ display:inline-flex;align-items:center;gap:6px; font-size:12px; font-weight:700; padding:6px 13px; border-radius:20px; background:var(--surface); border:1px solid var(--line); color:var(--text-dim); } .pill.glow{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); } /* Buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13px 24px; border-radius:var(--radius-sm); font-size:14.5px; font-weight:700; border:none; transition:transform .15s, box-shadow .15s, opacity .15s, background .15s; } .btn-grad{ background:var(--gradient); color:var(--bg); } html[data-theme="mono"] .btn-grad{color:#000;} .btn-grad:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop);} .btn-outline{ background:transparent; border:1px solid var(--line); color:var(--text); } .btn-outline:hover{border-color:var(--accent);color:var(--accent);} .btn:disabled{opacity:0.5;cursor:not-allowed;transform:none !important;} .btn svg{width:16px;height:16px;} /* Sticker badge — signature element */ .sticker{ display:inline-flex; align-items:center; justify-content:center; font-size:22px; width:52px;height:52px; border-radius:16px; background:var(--surface-2); border:1px solid var(--line); transform:rotate(-4deg); flex-shrink:0; transition:transform .25s ease; } /* Tool card */ .tool-card{ display:flex; flex-direction:column; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px; transition:transform .2s, border-color .2s, box-shadow .2s; height:100%; } .tool-card:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:var(--shadow-pop); } .tool-card:hover .sticker{transform:rotate(2deg) scale(1.05);} .tool-card h3{ font-family:var(--font-display); font-size:17px; font-weight:700; } .tool-card p{ font-size:13.5px; color:var(--text-dim); flex:1; } .tool-card .tc-tag{ font-size:11px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.8px; } .tools-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px; } /* Category pill nav */ .cat-pills{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; } .cat-pill{ padding:9px 18px; border-radius:20px; background:var(--surface); border:1px solid var(--line); font-size:13.5px; font-weight:700; color:var(--text-dim); transition:all .15s; } .cat-pill:hover{border-color:var(--accent);color:var(--text);} .cat-pill.active{ background:var(--gradient); color:var(--bg); border-color:transparent; } html[data-theme="mono"] .cat-pill.active{color:#000;} /* Tool widget shell (used inside individual tool pages) */ .tool-page-hero{ padding:calc(50px * var(--space-unit)) 0 calc(30px * var(--space-unit)); } .tool-page-hero .crumbs{ font-size:13px; color:var(--text-faint); margin-bottom:18px; } .tool-page-hero .crumbs a:hover{color:var(--accent);} .tool-page-hero h1{ font-family:var(--font-display); font-size:clamp(28px, 5vw, 42px); font-weight:700; letter-spacing:-0.5px; margin-bottom:14px; display:flex; align-items:center; gap:16px; } .tool-page-hero .lede{ color:var(--text-dim); font-size:16px; max-width:640px; } .widget-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:calc(28px * var(--space-unit)); margin:calc(20px * var(--space-unit)) 0 calc(40px * var(--space-unit)); box-shadow:0 30px 60px -25px rgba(0,0,0,0.4); } .field-row{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; } .field-row label{ font-size:12.5px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.6px; } .field-row input, .field-row select, .field-row textarea{ background:var(--bg-soft); border:1px solid var(--line); color:var(--text); padding:13px 15px; border-radius:var(--radius-sm); font-size:15px; outline:none; transition:border-color .2s, box-shadow .2s; width:100%; } .field-row input:focus, .field-row select:focus, .field-row textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .field-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:16px; } .result-block{ display:none; margin-top:22px; padding:24px; border-radius:var(--radius-md); background:var(--accent-soft); border:1px solid var(--accent); text-align:center; } .result-block.show{display:block;animation:popIn .3s ease;} @keyframes popIn{from{opacity:0;transform:scale(0.96);}to{opacity:1;transform:scale(1);}} .result-block .result-value{ font-family:var(--font-display); font-size:clamp(28px,5vw,42px); font-weight:700; color:var(--accent); margin-bottom:6px; } .result-block .result-label{ font-size:13px; color:var(--text-dim); } .error-note{ display:none; margin-top:14px; padding:12px 15px; border-radius:var(--radius-sm); background:rgba(255,107,129,0.1); border:1px solid var(--err); color:var(--err); font-size:13.5px; } .error-note.show{display:block;} /* SEO content blocks within tool pages */ .content-block{ padding:calc(20px * var(--space-unit)) 0; border-top:1px solid var(--line); } .content-block h2{ font-family:var(--font-display); font-size:24px; margin-bottom:14px; } .content-block p{ color:var(--text-dim); margin-bottom:14px; max-width:760px; } .faq-item{ border-bottom:1px solid var(--line); padding:16px 0; } .faq-item summary{ font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; } .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary .chev{transition:transform .2s;} .faq-item[open] summary .chev{transform:rotate(180deg);} .faq-item p{margin-top:10px;color:var(--text-dim);font-size:14px;} .related-tools{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px; } /* generic page (about/contact/legal) */ .static-page{ padding:calc(50px * var(--space-unit)) 0 calc(70px * var(--space-unit)); max-width:760px; } .static-page h1{ font-family:var(--font-display); font-size:clamp(30px,5vw,44px); margin-bottom:18px; } .static-page h2{ font-family:var(--font-display); font-size:22px; margin-top:32px; margin-bottom:12px; } .static-page p{color:var(--text-dim);margin-bottom:14px;} .static-page a.inline-link{color:var(--accent);text-decoration:underline;} .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:30px; } @media (max-width:700px){.contact-grid{grid-template-columns:1fr;}} .contact-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px; } .contact-card h3{ font-family:var(--font-display); font-size:16px; margin-bottom:8px; } .contact-card p{color:var(--text-dim);font-size:13.5px;margin-bottom:14px;} /* toast (shared) */ .toast{ position:fixed; bottom:26px;left:50%; transform:translateX(-50%) translateY(20px); background:var(--surface); border:1px solid var(--accent); color:var(--text); padding:11px 20px; border-radius:9px; font-size:13px; display:flex;align-items:center;gap:8px; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:200; box-shadow:0 10px 30px rgba(0,0,0,0.4); } .toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;} .toast svg{width:14px;height:14px;color:var(--ok);flex-shrink:0;}