/*
Theme Name: Qalil URL
Theme URI: https://qalilurl.com
Author: Qalil URL
Description: A modern, responsive landing-page theme for a free URL-shortening service.
Version: 1.0.3
Text Domain: qalilurl
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Instrument+Serif:ital@0;1&display=swap');

:root { --ink:#17213d; --night:#0c1228; --paper:#f5f2e9; --acid:#d9ff61; --orange:#ff7344; --aqua:#59f5d2; --line:rgba(23,33,61,.18); --muted:#65708b; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; overflow-x:hidden; } .shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; }.noise { pointer-events:none; position:fixed; inset:0; z-index:9; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); } .sr-only { position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); overflow:hidden; }
.nav { height:91px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.brand { display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-size:1.2rem; font-weight:700; letter-spacing:-.07em; text-decoration:none; }.brand i { display:block; width:13px; height:13px; border:3px solid var(--ink); border-radius:50%; box-shadow:7px 0 0 -3px var(--orange); }.brand span { color:var(--orange); }.nav-actions { display:flex; align-items:center; gap:9px; }.nav-pill, .dialog-cta { border:1px solid var(--ink); background:transparent; color:var(--ink); border-radius:100px; padding:10px 14px; font:500 .68rem 'DM Mono',monospace; letter-spacing:.03em; cursor:pointer; text-decoration:none; }.nav-blog { background:var(--ink); color:var(--paper); }.nav-blog b { color:var(--acid) !important; }.nav-pill b { margin-left:6px; color:var(--orange); font-size:1rem; }
.hero { min-height:530px; display:grid; grid-template-columns:1.35fr .65fr; gap:72px; padding:86px 0 64px; }.overline { font:500 .69rem 'DM Mono',monospace; letter-spacing:.09em; }.pulse { width:8px; height:8px; background:var(--orange); display:inline-block; border-radius:50%; margin-right:6px; animation:pulse 1.7s infinite; }.hero h1 { margin:17px 0 20px; max-width:700px; font-size:clamp(4.4rem,9vw,8.7rem); font-weight:700; line-height:.77; letter-spacing:-.095em; }.hero h1 em { font-family:'Instrument Serif',serif; font-weight:400; letter-spacing:-.075em; color:var(--orange); }.lede { max-width:475px; color:var(--muted); font-size:1.05rem; line-height:1.55; }.proofs { display:flex; gap:10px; flex-wrap:wrap; margin-top:25px; font:500 .69rem 'DM Mono',monospace; text-transform:uppercase; color:#425175; }
.status-machine { align-self:center; background:var(--night); color:var(--paper); border:5px solid #303d65; border-radius:27px; box-shadow:11px 13px 0 var(--orange); padding:17px 17px 21px; transform:rotate(3deg); }.machine-top { display:flex; justify-content:space-between; color:#b2bad0; padding:1px 4px 14px; font:400 .59rem 'DM Mono',monospace; letter-spacing:.09em; }.online { color:var(--aqua); }.status-stack { max-width:230px; margin:auto; }.status-card { min-height:57px; padding:9px 12px; border-radius:12px; display:flex; align-items:center; gap:10px; color:var(--ink); background:#c4c8d5; box-shadow:0 6px 0 rgba(0,0,0,.24); }.status-card small { font:400 .58rem 'DM Mono',monospace; opacity:.65; }.status-card strong { font-size:.75rem; letter-spacing:-.02em; }.status-card i { font-style:normal; margin-left:auto; font-size:1.2rem; }.status-card.faded { background:#77809a; }.status-card.active { background:var(--orange); animation:float 2.4s ease-in-out infinite; }.status-card.success { background:var(--aqua); }.connector { text-align:center; height:21px; color:var(--aqua); font-size:1.1rem; line-height:21px; }.machine-caption { border-top:1px solid #33436a; color:#bcc4da; margin:17px 4px 0; padding-top:13px; font-size:.77rem; line-height:1.35; }
.ad-space { min-height:90px; }.ad-space--above { margin-top:8px; }.ad-space--below { margin-top:40px; margin-bottom:32px; }
.shortener { position:relative; background:var(--ink); padding:28px; border-radius:22px; box-shadow:10px 11px 0 var(--orange); color:var(--paper); }.shortener-label { display:flex; justify-content:space-between; margin-bottom:17px; font:400 .67rem 'DM Mono',monospace; letter-spacing:.07em; }.shortener-label span { color:var(--acid); }.shortener-label b { font-weight:400; color:#b8c0d3; }.input-row { position:relative; display:flex; align-items:center; gap:11px; }.link-mark { position:absolute; left:20px; color:var(--orange); font-size:1.55rem; z-index:1; } input { width:100%; min-width:0; border:0; outline:0; padding:21px 193px 21px 52px; border-radius:12px; background:#edf0e9; color:var(--ink); font:500 1rem 'DM Mono',monospace; }.input-row:focus-within { outline:3px solid var(--acid); border-radius:14px; } #shorten-button { position:absolute; right:7px; height:calc(100% - 14px); border:0; border-radius:9px; padding:0 17px; background:var(--orange); color:white; cursor:pointer; font:700 .74rem 'DM Mono',monospace; letter-spacing:.05em; } #shorten-button b { margin-left:13px; font-size:1.3rem; }.message { min-height:0; margin:9px 0 0; color:#ff9a79; font-size:.83rem; }.result { margin-top:16px; border-radius:12px; padding:14px 15px; background:var(--acid); color:var(--ink); }.result-top { display:flex; justify-content:space-between; margin-bottom:8px; font:500 .62rem 'DM Mono',monospace; letter-spacing:.06em; }.result-link { display:flex; align-items:center; gap:12px; }.result a { min-width:0; overflow:hidden; color:var(--ink); font:500 1rem 'DM Mono',monospace; text-overflow:ellipsis; white-space:nowrap; }.result button { flex:0 0 auto; border:0; border-radius:7px; padding:10px 12px; background:var(--ink); color:white; cursor:pointer; font:500 .65rem 'DM Mono',monospace; }.result button b { color:var(--acid); margin-left:4px; }.form-note { margin:14px 0 0; color:#b8c0d3; font-size:.76rem; }
.features { display:grid; grid-template-columns:repeat(3,1fr); margin-top:0; border-top:1px solid var(--line); }.features article { min-height:285px; padding:26px 30px 29px 0; border-right:1px solid var(--line); }.features article + article { padding-left:30px; }.features article:last-child { border:0; }.features span { color:var(--orange); font:400 .72rem 'DM Mono',monospace; }.features h2, .bottom-cta h2, dialog h2 { margin:32px 0 14px; font-size:clamp(2.6rem,4vw,4.1rem); font-weight:700; line-height:.82; letter-spacing:-.08em; }.features p { max-width:240px; color:var(--muted); font-size:.91rem; line-height:1.5; }.features .accent { background:var(--acid); margin-top:-1px; padding-top:27px; }.bottom-cta { display:flex; justify-content:space-between; align-items:end; margin-top:100px; padding:69px 0; border-top:1px solid var(--line); }.bottom-cta h2 { margin:14px 0 0; }.round-link { width:150px; height:150px; display:grid; place-content:center; text-align:center; border-radius:50%; background:var(--orange); color:white; text-decoration:none; font:500 .68rem 'DM Mono',monospace; line-height:1.55; transform:rotate(-9deg); transition:transform .25s; }.round-link:hover { transform:rotate(0) scale(1.06); }.round-link b { font-size:1.2rem; } footer { min-height:81px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); color:#71809a; font:400 .61rem 'DM Mono',monospace; letter-spacing:.05em; }
dialog { max-width:510px; border:0; border-radius:22px; padding:40px; color:var(--paper); background:var(--ink); box-shadow:11px 12px 0 var(--orange); }.close-dialog { position:absolute; top:13px; right:16px; border:0; background:none; color:var(--acid); cursor:pointer; font-size:1.8rem; }.dialog-cta { margin-top:20px; border-color:var(--acid); color:var(--acid); }.dialog-cta b { margin-left:8px; }.dialog-cta:hover { background:var(--acid); color:var(--ink); } dialog h2 { margin-top:15px; } dialog p:not(.overline) { color:#c4cbde; font-size:1rem; line-height:1.6; } dialog::backdrop { background:rgba(4,8,21,.72); backdrop-filter:blur(4px); }
.blog-hero { padding:100px 0 72px; border-bottom:1px solid var(--line); }.blog-hero h1 { margin:17px 0 20px; font-size:clamp(4rem,8vw,7.5rem); line-height:.79; letter-spacing:-.09em; }.blog-hero h1 em { color:var(--orange); font-family:'Instrument Serif',serif; font-weight:400; }.blog-hero > p:last-child { max-width:480px; color:var(--muted); font-size:1.05rem; line-height:1.55; }.blog-feed { padding:32px 0 104px; }.blog-feed__heading { display:flex; justify-content:space-between; margin-bottom:25px; font:500 .67rem 'DM Mono',monospace; letter-spacing:.08em; }.blog-feed__heading span:first-child { color:var(--orange); }.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.post-card { min-width:0; border-top:1px solid var(--ink); }.post-card__link { display:block; padding-top:13px; color:var(--ink); text-decoration:none; }.post-card__image { aspect-ratio:1.45; overflow:hidden; background:#d8dbea; }.post-card__image img { width:100%; height:100%; object-fit:cover; }.post-card__image--placeholder { display:grid; place-items:center; background:var(--acid); font-size:3rem; }.post-card__meta, .post-card__read, .article-back { display:block; margin-top:17px; color:var(--orange); font:500 .65rem 'DM Mono',monospace; letter-spacing:.08em; }.post-card h2 { margin:13px 0 8px; font-size:clamp(1.8rem,2.8vw,2.7rem); line-height:.9; letter-spacing:-.07em; }.post-card p { color:var(--muted); font-size:.92rem; line-height:1.5; }.post-card__read { color:var(--ink); }.post-card__read b { color:var(--orange); font-size:1rem; }.blog-empty { padding:65px 0; color:var(--muted); }.article { max-width:850px; padding:78px 0 110px; }.article-back { margin:0 0 62px; text-decoration:none; }.article h1 { margin:13px 0 35px; font-size:clamp(3.2rem,7vw,6rem); line-height:.84; letter-spacing:-.09em; }.article-image { margin:0 0 40px; }.article-image img { display:block; width:100%; height:auto; }.article-content { color:#31415d; font-size:1.1rem; line-height:1.75; }.article-content > * { max-width:690px; }.article-content h2 { color:var(--ink); font-size:2rem; letter-spacing:-.05em; }.article-content a { color:var(--orange); }
.processing .status-card.active { animation:working .7s linear infinite; }.processing .spinner { animation:spin .6s linear infinite; }.processing #shorten-button { background:var(--aqua); color:var(--ink); } @keyframes pulse { 50% { box-shadow:0 0 0 6px #ff734455; } } @keyframes float { 50% { transform:translateY(-5px); } } @keyframes spin { to { transform:rotate(360deg); } } @keyframes working { 50% { filter:brightness(1.3); transform:translateX(3px); } }
@media (max-width:720px) { .shell { width:min(100% - 30px,1180px); }.nav { height:70px; }.nav-actions { gap:5px; }.nav-pill { padding:8px 10px; font-size:.55rem; }.hero { grid-template-columns:1fr; gap:45px; padding:65px 0 58px; }.hero h1 { font-size:clamp(4.2rem,18vw,6.6rem); }.status-machine { width:min(290px,85%); justify-self:center; }.ad-space { min-height:100px; }.ad-space--above { margin-top:0; }.ad-space--below { margin-top:32px; margin-bottom:28px; }.shortener { padding:19px; }.shortener-label b { display:none; }.input-row { display:block; }.link-mark { top:18px; }.input-row input { padding:20px 18px 20px 51px; }.input-row button { position:relative !important; right:auto !important; width:100%; height:55px !important; margin-top:10px; }.features { grid-template-columns:1fr; margin-top:0; }.features article, .features article + article { min-height:0; padding:27px 0; border-right:0; border-bottom:1px solid var(--line); }.features .accent { padding-left:18px; padding-right:18px; }.features h2 { margin:21px 0 10px; }.bottom-cta { margin-top:68px; padding:50px 0; align-items:center; }.round-link { width:110px; height:110px; font-size:.56rem; } footer { font-size:.5rem; }.blog-hero { padding:65px 0 47px; }.blog-hero h1 { font-size:clamp(3.8rem,17vw,5.8rem); }.blog-feed { padding:25px 0 70px; }.post-grid { grid-template-columns:1fr; gap:36px; }.article { padding:52px 0 70px; }.article-back { margin-bottom:42px; } }
@media (max-width:500px) { .ad-space { width:100%; } }