/* ================= Global Styles (shared across all pages) ================= */ /* == having inside == */ /* Root */ :root { --bg: #f7f9ff; --card: #fff; --muted: #6b7280; --accent-1: #ffd6e0; /* pastel pink */ --accent-2: #e8f3ff; /* pastel blue */ --accent-3: #fff6e6; /* pastel yellow */ --glass: rgba(255, 255, 255, 0.7); --radius: 14px; --shadow: 0 8px 24px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.04); --transition: 220ms cubic-bezier(.2, .9, .3, 1); --control-h: 36px; } * { box-sizing: border-box } html, body { height: auto; /* Let content dictate height */ min-height: 100%; } body { margin: 0; font-family: 'National Park', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; font-size: 14px; background: linear-gradient(135deg, var(--accent-2), var(--accent-1)); color: #0f172a; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 40px; display: block; align-items: center; justify-content: center; } /* Layout container */ .container { max-width: 960px; width: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.95)); border-radius: 20px; box-shadow: var(--shadow); padding: 40px; backdrop-filter: blur(6px) saturate(120%); display: grid; gap: 18px; grid-template-columns: 1fr 340px; grid-template-areas: "header header" "main qr" "bodyad qr" "bodyad rightad" "footer footer"; align-items: start; grid-auto-flow: row; margin: 0 auto; } .body-ad { grid-column: 1; } /* Hook each block to an area */ header { grid-area: header; } .main-card { grid-area: main; } .qr-card { grid-area: qr; } .body-ad { grid-area: bodyad; } .right-ad { grid-area: rightad; } footer { grid-area: footer; } header { grid-column: 1/-1; display: flex; align-items: center; gap: 20px } .brand { display: flex; flex-direction: column; } .site-title { font-family: 'National Park', sans-serif; font-weight: 200; letter-spacing: 0.6px; font-size: 36px; margin: 0; line-height: 1; display: flex; align-items: center; gap: 10px; } .site-title .bang { font-family: 'National Park', sans-serif; font-weight: 800; letter-spacing: 0.6px; font-size: 40px; margin: 0; line-height: 1; display: flex; align-items: center; gap: 10px; } .site-title .scissors { font-family: 'National Park', sans-serif; font-weight: 800; letter-spacing: 0.6px; font-size: 48px; color: #5e4bff; margin: 0; line-height: 1; display: flex; align-items: center; gap: 8px; } .subtitle { font-size: 16px; color: var(--muted); margin-top: 6px; } /* Input card */ .card { background: var(--card); border-radius: var(--radius); padding: 20px; box-shadow: 0 5px 10px rgba(16, 24, 40, 0.06); } .input-area { display: flex; gap: 10px; align-items: center; } .input-area input[type=url] { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid rgba(15, 23, 42, 0.06); font-size: 14px; outline: none; transition: box-shadow var(--transition), transform var(--transition); } .input-area input:focus { box-shadow: 0 6px 18px rgba(99, 102, 241, 0.12); transform: translateY(-1px) } /* Shorten Button */ .btn { background: linear-gradient(180deg, #7c6cff 0%, #5e4bff 100%); font-family: 'National Park', sans-serif; color: #fff; border: none; padding: 10px 12px; border-radius: 10px; font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 0 6px 18px rgba(92, 62, 255, 0.18); transition: transform var(--transition), box-shadow var(--transition); } .btn:active { transform: translateY(1px) scale(.990) } .btn:disabled { opacity: .6; cursor: default } .btn-scissors { font-size: 16px } /* Output column */ .side { display: flex; flex-direction: column; gap: 12px; /* grid-column: 1; */ } .output-link { display: inline-flex; align-items: center; min-height: var(--control-h); overflow-wrap: anywhere; justify-content: center; padding: 10px 12px; border-radius: 8px; border: 1px dashed rgba(15, 23, 42, 0.06); word-break: break-all; font-size: 14px; line-height: 1; } .copy-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); min-height: var(--control-h); line-height: 1; background: transparent; border: 1px solid rgba(15, 23, 42, 0.06); padding: 10px 12px; font-size: 14px; border-radius: 8px; cursor: pointer; transition: transform var(--transition), background var(--transition); } .copy-btn:active { transform: translateY(1px) } .small-muted { font-size: 14px; color: var(--muted) } /* ad placeholders */ .ad-block { display: flex; align-items: center; justify-content: center; border-radius: 10px; padding: 10px; background: linear-gradient(180deg, rgba(250, 250, 250, 0.9), rgba(255, 255, 255, 0.8)); border: 1px solid rgba(15, 23, 42, 0.04) } footer { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 14px } /* Link styling with soft underline animation */ a { position: relative; color: var(--muted); margin: 0 5px; text-decoration: none; transition: color 0.25s ease-in-out; } a::after { content: ""; position: absolute; left: 0; bottom: -2px; /* slight gap below text */ width: 100%; height: 2px; background-color: #5e4bff; transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease-in-out; } a:hover { color: #5e4bff; } a:hover::after { transform: scaleX(1); } .copied-toast { position: fixed; top: 50%; left: 50%; background: #111827; color: #fff; padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, -50%); transition: all 300ms ease-in-out; } .copied-toast.show { opacity: 1; transform: translate(-50%, -50%) } /* visually-hide for a11y */ .sr-only { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden } /* QR card */ #qr-download-link { opacity: 0; transition: opacity 0.5s ease; display: inline-block; font-size: 14px; cursor: pointer; } #qr-download-link.show { opacity: 1; } .qr-download-link-btn { text-align: left; align-items: left; } #qr-toggle-link { opacity: 0; transition: opacity 0.5s ease; display: inline-block; font-size: 14px; cursor: pointer; } #qr-toggle-link.show { opacity: 1; } .qr-toggle-link-btn { text-align: right; align-items: right; } #qr-code { max-width: 300px; width: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center; } #qr-code canvas, #qr-code img { width: 100%; height: auto; } @media (min-width:881px) { header .ad-block { width: 340px; } .header-ad .ad-block { width: 340px; } .header-ad .ad-block ins { display: block; margin: 0 auto; } .side { display: grid; grid-template-rows: auto auto; grid-template-columns: 1fr; grid-auto-flow: row; } /* QR */ .side .card:nth-child(1) { order: 1; } /* Body ad */ .side .body-ad { order: 2; } /* Right ad */ .side .card:nth-child(3) { order: 3; } } /* Tablet breakpoint - switch to single column */ @media (max-width:880px) { html, body { height: auto; } body { display: block; padding: 20px; } .container { display: flex; flex-direction: column; padding: 30px; gap: 18px; grid-template-columns: 1fr; grid-template-areas: "header" "main" "qr" "bodyad" "rightad" "footer"; } .container>* { width: 100% !important; max-width: 100% !important; } header { flex-direction: column; align-items: flex-start; order: 1; } header .ad-block { width: 100% !important; height: auto !important; flex-direction: column; align-items: center; margin-top: 10px; order: 2; } header .ad-block ins { width: 100% !important; height: 60px !important; } /* Full-width header ad on small screens */ .header-ad .ad-block { width: 100%; } header>div[style*="margin-left:auto"] { margin-left: 0 !important; width: 100% !important; } header>div[style*="margin-left:auto"] .ad-block { width: 100% !important; } header>div[style*="margin-left:auto"] .ad-block ins { display: block; width: 100% !important; height: 60px !important; } .card { /* Input & result area */ order: 3; } .side { order: 4; } .side .ad-block { order: 5; } .side .card:last-of-type { /* Right ad section */ order: 6; } /* Body ad */ .side .card:nth-child(1) { order: 1; } /* Body ad */ .side .body-ad { order: 2; } /* Right ad */ .side .card:nth-child(3) { order: 3; } footer { flex-direction: column; text-align: center; gap: 5px; order: 7; } } /* Phone breakpoint - improve touch and fit */ @media (max-width:600px) { header { flex-direction: column; align-items: center; text-align: center; } header .ad-block { display: flex; flex-direction: column; align-items: center; margin-top: 10px; } .site-title { font-size: 28px; } .site-title .bang { font-size: 30px; } .site-title .scissors { font-size: 36px; } .brand { margin-top: 20px; } body { padding: 10px; } .container { padding: 12px; } .input-area { flex-direction: column; align-items: stretch; gap: 10px; } .input-area input[type=url] { width: 100%; font-size: 14px; padding: 10px; } .btn { width: 100%; font-size: 16px; padding: 10px; } .output-link { font-size: 14px; flex-direction: column; align-items: flex-start; word-break: break-word; overflow-wrap: anywhere; } .side .ad-block { width: 100% !important; height: auto !important; } footer { flex-direction: column; text-align: center; } .ad-block ins { max-width: 100%; } }