/* ============================================================ Linkly — global styles Aesthetic: clean light mode, friendly, Bitly-orange accent. ============================================================ */ :root { --bg: #ffffff; --bg-soft: #f6f7f9; --bg-card: #ffffff; --border: #e5e7eb; --text: #1b1f27; --text-dim: #4b5563; --text-mute: #8b93a1; --accent: #ee6123; /* Bitly orange */ --accent-d: #d64f17; /* darker hover */ --accent-2: #1d9b6c; --danger: #e23b3b; --warn: #d98a00; --ink: #0b1736; /* deep navy used in dark bands */ --radius: 14px; --radius-sm: 9px; --shadow: 0 10px 30px -14px rgba(16,24,40,.18); --font-display: 'Bricolage Grotesque', Georgia, serif; --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; } /* ===== Dark theme (data-theme="dark" on ) ===== Only the colour variables flip; layout, fonts, radii, accent stay the same so the brand reads consistently across themes. */ html[data-theme="dark"] { --bg: #0e1320; --bg-soft: #161c2e; --bg-card: #1a2236; --border: #2a3550; --text: #e9ecf3; --text-dim: #b3bccf; --text-mute: #7a849a; --shadow: 0 14px 40px -16px rgba(0,0,0,.6); } /* Element-level dark adjustments that variables alone can't cover */ html[data-theme="dark"] .btn-ghost { background: var(--bg-card); color: var(--text); } html[data-theme="dark"] .pub-header { background: rgba(14,19,32,.92); } html[data-theme="dark"] .gw-card input:checked ~ .gw-inner { background: rgba(238,97,35,.10); } html[data-theme="dark"] .gw-inner { background: var(--bg-card); } html[data-theme="dark"] .plan-side { background: var(--bg-card); } html[data-theme="dark"] .plan-side.highlight { background: rgba(238,97,35,.10); } html[data-theme="dark"] code.k { background: var(--bg-soft); color: var(--text); } html[data-theme="dark"] input[readonly] { background: var(--bg-soft) !important; } /* Theme-switch toggle (used in both user + admin sidebars) */ .theme-switch { display:flex; align-items:center; gap:8px; padding:8px 12px; margin:6px 0; border-radius:10px; cursor:pointer; user-select:none; color:var(--text-dim); font-size:14px; font-weight:500; transition:background .15s; } .theme-switch:hover { background: var(--bg-soft); } .theme-switch input { position:absolute; opacity:0; pointer-events:none; } .theme-track { position:relative; width:34px; height:18px; border-radius:99px; background:var(--border); transition:background .2s; flex-shrink:0; } .theme-thumb { position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .2s, background .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); } .theme-switch input:checked + .theme-track { background: var(--accent); } .theme-switch input:checked + .theme-track .theme-thumb { transform: translateX(16px); } .theme-label-light, .theme-label-dark { font-size:13px; } html[data-theme="dark"] .theme-label-light { display:none; } html:not([data-theme="dark"]) .theme-label-dark { display:none; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh; } h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; } a { color: inherit; text-decoration: none; } .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; } .narrow { max-width: 460px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, background .2s ease, border-color .2s; background: var(--bg-soft); color: var(--text); border-color: var(--border); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-d); border-color: var(--accent-d); } .btn-ghost { background: #fff; } .btn-danger { color: var(--danger); border-color: rgba(226,59,59,.3); background: rgba(226,59,59,.06); } .btn-sm { padding: 7px 14px; font-size: 13.5px; } .btn-block { width: 100%; justify-content: center; } /* ---------- forms ---------- */ label { display:block; font-size: 13.5px; color: var(--text-dim); margin-bottom: 7px; font-weight: 500; } .input, input[type=text], input[type=email], input[type=password], input[type=url], textarea, select { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 12px 14px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 15px; transition: border-color .2s, box-shadow .2s; } .input:focus, input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(238,97,35,.14); } textarea { resize: vertical; min-height: 84px; } .field { margin-bottom: 16px; } .hint { font-size: 12.5px; color: var(--text-mute); margin-top: 6px; } /* ---------- cards ---------- */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .card-pad-lg { padding: 30px; } /* ---------- flash ---------- */ .flash { padding: 13px 18px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 14.5px; font-weight: 500; } .flash-success { background: rgba(29,155,108,.1); color: var(--accent-2); border: 1px solid rgba(29,155,108,.25); } .flash-error { background: rgba(226,59,59,.08); color: var(--danger); border: 1px solid rgba(226,59,59,.25); } /* ---------- misc ---------- */ .badge { display:inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight:600; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-dim); } .badge-accent { background: rgba(238,97,35,.1); color: var(--accent); border-color: rgba(238,97,35,.28); } .muted { color: var(--text-dim); } .mute2 { color: var(--text-mute); } .row { display:flex; gap: 16px; } .between { justify-content: space-between; align-items: center; } .center { align-items: center; } .wrap { flex-wrap: wrap; } .grid { display:grid; gap: 18px; } .mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px} .mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px} .text-accent{color:var(--accent)} .text-sm{font-size:13.5px} .text-lg{font-size:19px} hr { border: none; border-top: 1px solid var(--border); margin: 22px 0; } table { width:100%; border-collapse: collapse; } th, td { text-align:left; padding: 12px 10px; border-bottom: 1px solid var(--border); font-size: 14px; } th { color: var(--text-mute); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing:.04em; } code.k { background: var(--bg); padding: 2px 7px; border-radius: 6px; border:1px solid var(--border); font-size: 13px; color: var(--accent); } /* ---------- responsive ---------- */ @media (max-width: 720px){ .row { flex-direction: column; } .row.center, .row.between { flex-direction: row; } .hide-sm { display:none !important; } } /* ---- Google OAuth button + divider ---- */ .oauth-divider { display:flex; align-items:center; text-align:center; margin:18px 0; color:var(--text-mute); font-size:13px; } .oauth-divider::before, .oauth-divider::after { content:""; flex:1; height:1px; background:var(--border); } .oauth-divider span { padding:0 12px; } .btn-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:#fff; color:#1b1f27; border:1px solid var(--border); border-radius:10px; padding:11px 16px; font-weight:600; font-size:14.5px; cursor:pointer; transition:background .15s, border-color .15s, box-shadow .15s; text-decoration:none; } .btn-google:hover { background:#f8f9fb; border-color:#c9cfdb; box-shadow:0 2px 8px -3px rgba(16,24,40,.18); } .btn-google svg { flex-shrink:0; } /* === Public header (item 6) === */ .pub-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); } .pub-header-inner { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; } .pub-logo { font-family:var(--font-display); font-weight:800; font-size:25px; letter-spacing:-.03em; color:var(--ink); } .pub-nav-desktop { display:flex; align-items:center; gap:32px; } .pub-nav-desktop a { color:var(--text-dim); font-weight:600; font-size:14.5px; transition:color .15s; } .pub-nav-desktop a:hover { color:var(--accent); } .pub-nav-desktop .pub-login { color:var(--text-dim); } .pub-nav-desktop .btn-primary, .pub-nav-desktop .btn { color:#fff; } .pub-nav-mobile { display:none; align-items:center; gap:10px; } .hamburger { background:none; border:none; padding:6px; cursor:pointer; color:var(--ink); border-radius:8px; display:inline-flex; align-items:center; justify-content:center; } .hamburger:hover { background:var(--bg-soft); } /* Mobile slide-down menu */ .mobile-menu { position:fixed; inset:0; z-index:100; background:#fff; transform:translateY(-100%); transition:transform .25s ease; display:flex; flex-direction:column; } .mobile-menu.open { transform:none; } .mobile-menu-head { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-bottom:1px solid var(--border); } .mobile-menu-nav { display:flex; flex-direction:column; padding:30px 24px; gap:6px; } .mobile-menu-nav > a { padding:14px 6px; font-weight:600; font-size:17px; color:var(--text); border-bottom:1px solid var(--bg-soft); } .mobile-menu-nav > a.btn { border-bottom:none; text-align:center; margin-top:14px; } .mobile-menu-nav > a.btn-ghost { color:var(--text); } @media (max-width:860px) { .pub-nav-desktop { display:none; } .pub-nav-mobile { display:flex; } } /* === Public footer (item 5) === */ .pub-footer { background:var(--ink); color:#aeb6c8; } .pub-footer-grid { display:grid; grid-template-columns:1.2fr 2fr; gap:40px; align-items:flex-start; } .pub-footer-cols { display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; } .footer-col-title { color:#fff; font-weight:700; font-size:14px; margin-bottom:10px; } .footer-col-links { display:grid; gap:8px; font-size:14px; } .footer-col-links a { color:#aeb6c8; transition:color .15s; } .footer-col-links a:hover { color:#fff; } .social-row { display:flex; gap:10px; margin-top:18px; } .social-row a { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; display:inline-flex; align-items:center; justify-content:center; transition:background .15s; } .social-row a:hover { background:var(--accent); } @media (max-width:760px) { .pub-footer-grid { grid-template-columns:1fr; gap:30px; } .pub-footer-cols { grid-template-columns:repeat(2,1fr); gap:24px; } } /* === Login / Register polish (item 7) === */ .auth-wrap { min-height:calc(100vh - 280px); display:flex; align-items:center; justify-content:center; padding:60px 24px; } .auth-card { width:100%; max-width:440px; padding:44px 40px; box-shadow:0 30px 70px -25px rgba(11,23,54,.28); } .auth-row { display:flex; align-items:center; justify-content:space-between; margin-top:14px; font-size:13.5px; } .auth-remember { display:flex; align-items:center; gap:8px; color:var(--text-dim); cursor:pointer; } .auth-remember input { width:auto; margin:0; } .auth-forgot { color:var(--accent); font-weight:600; } .auth-forgot:hover { text-decoration:underline; } .auth-bottom-link { color:var(--text-mute); font-size:14px; text-align:center; margin-top:24px; } @media (max-width:560px) { .auth-card { padding:32px 26px; } } /* ===================================================================== v11.3 — Responsive layer (mobile + tablet) ===================================================================== Scope: everything inside @media (max-width: 991px) only. Desktop CSS above is intentionally untouched. Pattern: sidebar becomes an off-canvas drawer. A floating hamburger sits top-left, a backdrop appears when the drawer opens, and the drawer slides in via transform. body { overflow: hidden } locks scroll while the drawer is open (set by the JS in app.php/admin.php). ===================================================================== */ /* Desktop defaults for drawer elements (hidden on desktop, revealed inside the @media block below). These must live in app.css and NOT in inline