/* Shelikes Boutique — shared styles */ :root { --bg: #fbf8f4; --surface: #ffffff; --surface-2: #f4ede4; --ink: #2c2723; --muted: #8c8178; --line: #e9e0d6; --accent: #9b5365; /* muted rose-mauve */ --accent-deep: #7d3f4f; --gold: #b89368; --zalo: #0068ff; --ok: #3f7d54; --warn: #b4642a; --danger: #b3493f; --text-soft: #5c5048; --header-bg: rgba(251, 248, 244, 0.86); --radius: 14px; --shadow: 0 1px 2px rgba(44, 39, 35, 0.04), 0 12px 30px -18px rgba(44, 39, 35, 0.25); --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Georgia", serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ---- Dark theme (applied via ) ---- */ :root[data-theme="dark"] { --bg: #181410; --surface: #211b16; --surface-2: #2b231c; --ink: #f2eae0; --muted: #a89c8e; --text-soft: #cabeb0; --line: #382f27; --accent: #cf8597; --accent-deep: #dca0b0; --gold: #cdab7e; --ok: #6abf86; --warn: #d98a4e; --danger: #e0796d; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -18px rgba(0, 0, 0, 0.6); --header-bg: rgba(24, 20, 16, 0.86); } :root[data-theme="dark"] #toast { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); } :root[data-theme="dark"] #toast.err { background: #7a2b27; color: #fff; border-color: #7a2b27; } :root[data-theme="dark"] .btn--danger { border-color: rgba(224, 121, 109, 0.4); } :root[data-theme="dark"] .btn--danger:hover { background: rgba(224, 121, 109, 0.14); border-color: var(--danger); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.55; font-size: 16px; } img { max-width: 100%; display: block; } a { color: var(--accent-deep); } button { font-family: inherit; } .wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px; } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 11px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; text-decoration: none; line-height: 1; } .btn:hover { border-color: var(--accent); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .btn--ghost { background: transparent; } .btn--zalo { background: var(--zalo); border-color: var(--zalo); color: #fff; } .btn--zalo:hover { background: #0056d6; border-color: #0056d6; } .btn--danger { color: var(--danger); border-color: #e7c9c5; } .btn--danger:hover { background: #fbeeec; border-color: var(--danger); } .btn--sm { padding: 7px 13px; font-size: 13px; } .btn--block { width: 100%; } /* --- Section title --- */ .eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: 11.5px; color: var(--accent); font-weight: 700; } .serif { font-family: var(--serif); } /* Brand mark (SVG monogram) — recolourable via CSS mask */ .brand-mark { display: inline-block; height: 38px; aspect-ratio: 188 / 272; flex-shrink: 0; background-color: var(--ink); -webkit-mask: url("/assets/logo.svg") center / contain no-repeat; mask: url("/assets/logo.svg") center / contain no-repeat; } .brand-name { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink); letter-spacing: .01em; white-space: nowrap; } .brand-name em { font-style: italic; font-weight: 600; color: var(--accent); } .brand-suffix { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--muted); white-space: nowrap; } @media (max-width: 560px) { .brand-mark { height: 32px; } .brand-name { font-size: 18px; } } @media (max-width: 380px) { .brand-name { display: none; } } /* Language switch */ .lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); } .lang-switch button { border: none; background: transparent; cursor: pointer; padding: 6px 11px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); line-height: 1; } .lang-switch button.active { background: var(--accent); color: #fff; } .lang-switch button:not(.active):hover { color: var(--accent-deep); } /* Theme (light/dark) toggle */ .theme-toggle button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; padding: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; cursor: pointer; font-size: 15px; line-height: 1; } .theme-toggle button:hover { border-color: var(--accent); color: var(--accent-deep); } /* Screen-reader-only (keeps dynamic config text for SEO/a11y while logo shows visually) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Toast --- */ #toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 14px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 1000; max-width: 88vw; text-align: center; } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } #toast.err { background: var(--danger); } /* --- Modal --- */ .modal-back { position: fixed; inset: 0; background: rgba(40,33,30,.5); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; padding: 18px; z-index: 900; } .modal-back.show { display: flex; } .modal { background: var(--surface); border-radius: var(--radius); max-width: 460px; width: 100%; padding: 26px; box-shadow: var(--shadow); max-height: 90vh; overflow: auto; } .modal h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 22px; font-weight: 600; } .modal .sub { color: var(--muted); font-size: 14px; margin: 0 0 18px; } /* --- Forms --- */ label.field { display: block; margin-bottom: 14px; font-size: 13.5px; font-weight: 600; color: var(--text-soft); } label.field span.req { color: var(--accent); } .field input, .field textarea, .field select { width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 15px; font-weight: 400; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-family: inherit; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(155,83,101,.12); } .field textarea { resize: vertical; min-height: 78px; } .row { display: flex; gap: 12px; flex-wrap: wrap; } .row > * { flex: 1; min-width: 0; } .muted { color: var(--muted); } @media (max-width: 640px) { .wrap { padding: 0 16px; } }