diff --git a/domme-converters/css/styles.css b/domme-converters/css/styles.css deleted file mode 100644 index aec5bab..0000000 --- a/domme-converters/css/styles.css +++ /dev/null @@ -1,575 +0,0 @@ -:root { - --bg: #f6f7f9; - --surface: #ffffff; - --surface-2: #f0f2f5; - --border: #e2e5ea; - --border-strong: #cdd2da; - --ink: #14181f; - --muted: #5b6470; - --muted-2: #828b97; - --accent: #1f4ed8; - --accent-hover: #1a42b8; - --accent-soft: #eaf0fe; - --ring: rgba(31, 78, 216, 0.28); - --radius: 10px; - --radius-sm: 7px; - --maxw: 1140px; - --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; - --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; -} - -* { box-sizing: border-box; } - -html { background: var(--bg); } - -body { - margin: 0; - font-family: var(--font); - background: var(--bg); - color: var(--ink); - line-height: 1.55; - -webkit-font-smoothing: antialiased; -} - -a { color: var(--accent); text-decoration: none; } -a:hover { text-decoration: underline; } - -.container { - max-width: var(--maxw); - margin: 0 auto; - padding: 0 24px; -} - -/* Notice bar */ -.notice { - background: var(--ink); - color: #f3f4f6; - font-size: 13px; - text-align: center; - padding: 8px 24px; -} - -/* Header */ -header { - position: sticky; - top: 0; - z-index: 40; - background: rgba(255, 255, 255, 0.9); - backdrop-filter: blur(8px); - border-bottom: 1px solid var(--border); -} -.nav { - display: flex; - align-items: center; - justify-content: space-between; - gap: 24px; - height: 68px; -} -.brand { - display: flex; - align-items: center; - gap: 12px; -} -.brand .mark { - width: 36px; - height: 36px; - border-radius: 8px; - background: var(--accent); - color: #fff; - display: grid; - place-items: center; - font-weight: 700; - font-size: 17px; - letter-spacing: -0.5px; -} -.brand .name { - font-weight: 700; - font-size: 18px; - letter-spacing: -0.3px; -} -.brand .name span { - display: block; - font-size: 11px; - font-weight: 500; - color: var(--muted-2); - letter-spacing: 0.2px; -} -.nav-links { - display: flex; - gap: 28px; - margin-left: auto; - margin-right: 8px; -} -.nav-links a { - color: var(--muted); - font-size: 14px; - font-weight: 500; -} -.nav-links a:hover { color: var(--ink); text-decoration: none; } - -.cart-btn { - position: relative; - border: 1px solid var(--border-strong); - background: var(--surface); - color: var(--ink); - padding: 9px 16px; - border-radius: var(--radius-sm); - font-weight: 600; - font-size: 14px; - cursor: pointer; - display: inline-flex; - align-items: center; - gap: 8px; - transition: border-color .15s, background .15s; -} -.cart-btn:hover { border-color: var(--accent); background: var(--accent-soft); } -.cart-count { - background: var(--accent); - color: #fff; - font-size: 12px; - font-weight: 700; - min-width: 20px; - height: 20px; - padding: 0 6px; - border-radius: 999px; - display: grid; - place-items: center; -} - -/* Hero */ -.hero { - border-bottom: 1px solid var(--border); - background: var(--surface); -} -.hero-inner { - display: grid; - grid-template-columns: 1.1fr 0.9fr; - gap: 48px; - align-items: center; - padding: 72px 24px; -} -.eyebrow { - display: inline-block; - font-size: 12px; - font-weight: 700; - letter-spacing: 1px; - text-transform: uppercase; - color: var(--accent); - margin-bottom: 16px; -} -.hero h1 { - font-size: clamp(30px, 4.5vw, 46px); - line-height: 1.08; - letter-spacing: -1px; - margin: 0 0 18px; -} -.hero p { - color: var(--muted); - font-size: 17px; - max-width: 520px; - margin: 0 0 28px; -} -.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } -.btn { - display: inline-flex; - align-items: center; - gap: 8px; - border-radius: var(--radius-sm); - font-weight: 600; - font-size: 15px; - padding: 12px 22px; - cursor: pointer; - border: 1px solid transparent; - transition: background .15s, border-color .15s, color .15s; -} -.btn-primary { background: var(--accent); color: #fff; } -.btn-primary:hover { background: var(--accent-hover); text-decoration: none; } -.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--ink); } -.btn-ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } - -.hero-panel { - background: var(--surface-2); - border: 1px solid var(--border); - border-radius: var(--radius); - padding: 28px; -} -.spec-row { - display: flex; - justify-content: space-between; - align-items: baseline; - padding: 14px 0; - border-bottom: 1px solid var(--border); - font-size: 14px; -} -.spec-row:last-child { border-bottom: none; } -.spec-row .k { color: var(--muted); } -.spec-row .v { font-weight: 600; font-family: var(--mono); font-size: 13px; } - -/* Trust strip */ -.trust { - border-bottom: 1px solid var(--border); - background: var(--bg); -} -.trust-inner { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 24px; - padding: 28px 24px; -} -.trust-item .t { font-size: 14px; font-weight: 600; } -.trust-item .d { font-size: 13px; color: var(--muted); margin-top: 2px; } - -/* Catalog */ -.catalog { padding: 56px 0 72px; } -.section-head { - display: flex; - align-items: flex-end; - justify-content: space-between; - margin-bottom: 28px; - gap: 16px; - flex-wrap: wrap; -} -.section-head h2 { font-size: 24px; letter-spacing: -0.5px; margin: 0 0 4px; } -.section-head p { color: var(--muted); font-size: 14px; margin: 0; } - -.filters { - display: flex; - gap: 8px; - flex-wrap: wrap; -} -.filter { - border: 1px solid var(--border-strong); - background: var(--surface); - color: var(--muted); - font-size: 13px; - font-weight: 600; - padding: 7px 14px; - border-radius: 999px; - cursor: pointer; - transition: all .15s; -} -.filter:hover { border-color: var(--accent); color: var(--accent); } -.filter.active { background: var(--ink); border-color: var(--ink); color: #fff; } - -.grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); - gap: 20px; -} -.card { - background: var(--surface); - border: 1px solid var(--border); - border-radius: var(--radius); - overflow: hidden; - display: flex; - flex-direction: column; - transition: border-color .15s, box-shadow .15s, transform .15s; -} -.card:hover { - border-color: var(--border-strong); - box-shadow: 0 8px 24px rgba(20, 24, 31, 0.07); - transform: translateY(-2px); -} -.thumb { - aspect-ratio: 16 / 10; - background: var(--surface-2); - border-bottom: 1px solid var(--border); - display: flex; - align-items: center; - justify-content: center; - gap: 14px; - padding: 0 18px; - position: relative; - overflow: hidden; -} -.thumb img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; -} -.conn { - background: var(--surface); - border: 1px solid var(--border-strong); - border-radius: var(--radius-sm); - padding: 8px 12px; - font-family: var(--mono); - font-size: 12px; - font-weight: 600; - color: var(--ink); - text-align: center; - min-width: 64px; - line-height: 1.2; -} -.arrow { - color: var(--accent); - font-weight: 700; - font-size: 18px; - font-family: var(--mono); -} -.card .body { - padding: 18px; - display: flex; - flex-direction: column; - gap: 8px; - flex: 1; -} -.card .meta { - display: flex; - align-items: center; - justify-content: space-between; - font-size: 12px; - color: var(--muted-2); -} -.sku { font-family: var(--mono); } -.stars { color: var(--accent); font-weight: 600; letter-spacing: 1px; } -.stars .reviews { color: var(--muted-2); font-weight: 400; letter-spacing: 0; margin-left: 4px; } -.card h3 { margin: 0; font-size: 16px; letter-spacing: -0.2px; } -.card .desc { color: var(--muted); font-size: 13.5px; flex: 1; } -.card .foot { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: 8px; - padding-top: 14px; - border-top: 1px solid var(--border); -} -.price { font-weight: 700; font-size: 18px; } -.price small { - color: var(--muted-2); - font-weight: 500; - font-size: 12px; - text-decoration: line-through; - margin-left: 6px; -} -.add-btn { - border: 1px solid var(--accent); - background: var(--accent); - color: #fff; - font-weight: 600; - padding: 8px 14px; - border-radius: var(--radius-sm); - cursor: pointer; - font-size: 13.5px; - transition: background .15s; -} -.add-btn:hover { background: var(--accent-hover); } -.add-btn:active { transform: scale(0.97); } - -/* Cart drawer */ -.overlay { - position: fixed; inset: 0; - background: rgba(20, 24, 31, 0.5); - opacity: 0; pointer-events: none; - transition: opacity .2s; - z-index: 50; -} -.overlay.open { opacity: 1; pointer-events: auto; } -.drawer { - position: fixed; top: 0; right: 0; - height: 100%; width: 420px; max-width: 94vw; - background: var(--surface); - border-left: 1px solid var(--border); - transform: translateX(100%); - transition: transform .25s ease; - z-index: 60; - display: flex; - flex-direction: column; -} -.drawer.open { transform: translateX(0); } -.drawer-head { - padding: 20px 22px; - border-bottom: 1px solid var(--border); - display: flex; align-items: center; justify-content: space-between; -} -.drawer-head h2 { margin: 0; font-size: 17px; } -.icon-btn { - background: none; border: none; color: var(--muted); - font-size: 24px; cursor: pointer; line-height: 1; padding: 0 4px; -} -.icon-btn:hover { color: var(--ink); } -.cart-items { flex: 1; overflow-y: auto; padding: 8px 22px; } -.cart-empty { color: var(--muted); text-align: center; padding: 48px 0; font-size: 14px; } -.cart-row { - display: flex; gap: 14px; align-items: flex-start; - padding: 16px 0; - border-bottom: 1px solid var(--border); -} -.cart-row .tile { - width: 48px; height: 48px; border-radius: var(--radius-sm); - background: var(--surface-2); - border: 1px solid var(--border); - display: grid; place-items: center; - font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--accent); - flex-shrink: 0; - overflow: hidden; -} -.cart-row .tile img { width: 100%; height: 100%; object-fit: cover; } -.cart-row .info { flex: 1; min-width: 0; } -.cart-row .info strong { font-size: 14px; display: block; } -.cart-row .info .unit { font-size: 12px; color: var(--muted); } -.qty { display: inline-flex; align-items: center; gap: 0; margin-top: 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; } -.qty button { - width: 28px; height: 28px; - border: none; background: var(--surface-2); - color: var(--ink); cursor: pointer; font-weight: 700; font-size: 15px; -} -.qty button:hover { background: var(--border); } -.qty span { font-size: 13px; min-width: 32px; text-align: center; } -.line-total { font-weight: 700; font-size: 14px; white-space: nowrap; } -.drawer-foot { - padding: 20px 22px; - border-top: 1px solid var(--border); - background: var(--surface); -} -.total-row { - display: flex; justify-content: space-between; align-items: baseline; - font-size: 14px; color: var(--muted); margin-bottom: 4px; -} -.total-row.grand { color: var(--ink); margin: 10px 0 16px; } -.total-row.grand strong { font-size: 20px; } -.checkout-btn { - width: 100%; - border: none; - background: var(--accent); - color: #fff; - font-weight: 600; - padding: 14px; - border-radius: var(--radius-sm); - font-size: 15px; - cursor: pointer; - transition: background .15s; -} -.checkout-btn:hover { background: var(--accent-hover); } -.checkout-btn:disabled { background: var(--border-strong); color: var(--muted-2); cursor: not-allowed; } - -/* Modal */ -.modal-wrap { - position: fixed; inset: 0; - display: grid; place-items: center; - background: rgba(20, 24, 31, 0.6); - opacity: 0; pointer-events: none; - transition: opacity .2s; - z-index: 70; - padding: 20px; -} -.modal-wrap.open { opacity: 1; pointer-events: auto; } -.modal { - background: var(--surface); - border: 1px solid var(--border); - border-radius: 14px; - width: 480px; max-width: 100%; - max-height: 92vh; overflow-y: auto; - padding: 30px; - box-shadow: 0 24px 60px rgba(20, 24, 31, 0.25); -} -.modal h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.4px; } -.modal .sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; } -.field { margin-bottom: 16px; } -.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink); } -.field input { - width: 100%; - background: var(--surface); - border: 1px solid var(--border-strong); - border-radius: var(--radius-sm); - padding: 11px 13px; - color: var(--ink); - font-size: 14px; - font-family: var(--font); - transition: border-color .15s, box-shadow .15s; -} -.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); } -.row2 { display: flex; gap: 14px; } -.row2 .field { flex: 1; } -.pay-btn { - width: 100%; - border: none; - background: var(--accent); - color: #fff; - font-weight: 600; - padding: 14px; - border-radius: var(--radius-sm); - font-size: 15px; - cursor: pointer; - margin-top: 6px; - transition: background .15s; -} -.pay-btn:hover { background: var(--accent-hover); } -.pay-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 14px; } - -.success { text-align: center; padding: 8px 0; } -.success .check { - width: 64px; height: 64px; margin: 0 auto 18px; - border-radius: 50%; - background: var(--accent-soft); - border: 1px solid var(--accent); - display: grid; place-items: center; - color: var(--accent); font-size: 30px; font-weight: 700; -} -.success h2 { font-size: 22px; } -.success p { color: var(--muted); font-size: 14px; } -.order-id { - background: var(--surface-2); - border: 1px solid var(--border); - border-radius: var(--radius-sm); - padding: 12px; - font-family: var(--mono); - margin: 18px 0; - font-size: 14px; -} - -/* Toast */ -.toast { - position: fixed; bottom: 24px; left: 50%; - transform: translateX(-50%) translateY(16px); - background: var(--ink); - color: #fff; - padding: 12px 20px; - border-radius: var(--radius-sm); - font-size: 14px; font-weight: 500; - opacity: 0; pointer-events: none; - transition: opacity .2s, transform .2s; - z-index: 80; - box-shadow: 0 12px 32px rgba(20, 24, 31, 0.25); -} -.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } - -/* Footer */ -footer { - border-top: 1px solid var(--border); - background: var(--surface); - padding: 48px 0 32px; -} -.foot-grid { - display: grid; - grid-template-columns: 1.4fr 1fr 1fr 1fr; - gap: 32px; - margin-bottom: 36px; -} -.foot-grid h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted-2); margin: 0 0 14px; } -.foot-grid ul { list-style: none; margin: 0; padding: 0; } -.foot-grid li { margin-bottom: 9px; } -.foot-grid a { color: var(--muted); font-size: 14px; } -.foot-grid a:hover { color: var(--ink); text-decoration: none; } -.foot-about p { color: var(--muted); font-size: 14px; margin: 12px 0 0; max-width: 320px; } -.foot-bottom { - border-top: 1px solid var(--border); - padding-top: 24px; - display: flex; - justify-content: space-between; - flex-wrap: wrap; - gap: 12px; - color: var(--muted-2); - font-size: 13px; -} - -@media (max-width: 900px) { - .hero-inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 24px; } - .trust-inner { grid-template-columns: repeat(2, 1fr); } - .foot-grid { grid-template-columns: 1fr 1fr; } - .nav-links { display: none; } -} -@media (max-width: 560px) { - .trust-inner { grid-template-columns: 1fr; } - .foot-grid { grid-template-columns: 1fr; } -}