/* ============================================================ Dasa Book Cafe — Site Stylesheet MAINTAINER NOTES: - Colors are defined as CSS variables below. Change them once and the whole site updates. - The Google Fonts link is in each HTML . If you change fonts, update both the tag AND the variables here. ============================================================ */ :root { /* --- Palette --- */ --color-bg: #faf6f0; /* warm cream */ --color-bg-alt: #f0e9dd; /* slightly darker bg */ --color-text: #3b2f20; /* espresso brown */ --color-text-soft: #7a6b5d; /* muted brown */ --color-accent: #b8860b; /* dark goldenrod */ --color-accent-hover: #96700a; --color-border: #d9cfc2; /* warm grey border */ --color-white: #ffffff; /* --- Typography --- */ --font-heading: "Playfair Display", Georgia, serif; --font-body: "Lora", "Times New Roman", serif; --font-ui: "Source Sans 3", "Segoe UI", sans-serif; /* --- Sizing --- */ --max-width: 960px; --nav-height: 64px; } /* ---- Reset & Base ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--color-text); background: var(--color-bg); } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-hover); text-decoration: underline; } /* ---- Navigation ---- */ .site-nav { position: sticky; top: 0; z-index: 100; background: var(--color-bg); border-bottom: 1px solid var(--color-border); height: var(--nav-height); display: flex; align-items: center; } .nav-inner { max-width: var(--max-width); width: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--color-text); letter-spacing: 0.02em; } .nav-logo:hover { text-decoration: none; color: var(--color-accent); } .nav-links { display: flex; gap: 28px; list-style: none; } .nav-links a { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--color-text-soft); letter-spacing: 0.03em; text-transform: uppercase; transition: color 0.2s; } .nav-links a:hover, .nav-links a.active { color: var(--color-accent); text-decoration: none; } /* Hamburger (mobile) */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; width: 30px; height: 24px; position: relative; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 100%; height: 2px; background: var(--color-text); position: absolute; left: 0; transition: transform 0.3s; } .nav-toggle span { top: 11px; } .nav-toggle span::before { content: ""; top: -8px; } .nav-toggle span::after { content: ""; top: 8px; } /* ---- Layout ---- */ .page-wrap { max-width: var(--max-width); margin: 0 auto; padding: 48px 24px 80px; } .page-title { font-family: var(--font-heading); font-size: 38px; font-weight: 700; margin-bottom: 12px; line-height: 1.2; } .page-subtitle { font-family: var(--font-ui); font-size: 16px; color: var(--color-text-soft); margin-bottom: 40px; } section { margin-bottom: 48px; } section h2 { font-family: var(--font-heading); font-size: 26px; font-weight: 700; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--color-border); } section h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 600; margin-top: 28px; margin-bottom: 10px; } p { margin-bottom: 14px; } /* ---- Hero (Home page) ---- */ .hero { background: var(--color-bg-alt); border-radius: 8px; padding: 48px 40px; margin-bottom: 48px; text-align: center; } .hero h1 { font-family: var(--font-heading); font-size: 44px; font-weight: 700; margin-bottom: 8px; line-height: 1.15; } .hero .tagline { font-family: var(--font-ui); font-size: 18px; color: var(--color-text-soft); margin-bottom: 24px; } .hero p { font-size: 17px; max-width: 600px; margin: 0 auto 16px; } /* ---- Info Grid (Home) ---- */ .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 48px; } .info-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px; padding: 28px 24px; } .info-card h3 { font-family: var(--font-heading); font-size: 20px; margin-top: 0; margin-bottom: 10px; } /* ---- Photo Gallery ---- */ .photo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 48px; } .photo-row img { border-radius: 6px; width: 100%; height: 200px; object-fit: cover; } /* ---- Search Page ---- */ .controls { display: flex; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; } .control-group { display: flex; flex-direction: column; gap: 5px; } .control-group label { font-family: var(--font-ui); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-soft); } .control-group.search { flex: 1; min-width: 220px; } .control-group.category { min-width: 180px; } .controls input[type="text"], .controls select { font-family: var(--font-ui); font-size: 15px; padding: 10px 14px; border: 1.5px solid var(--color-border); border-radius: 8px; background: var(--color-white); color: var(--color-text); outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .controls input[type="text"]:focus, .controls select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.1); } .controls select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a6b5d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .results-wrapper { background: var(--color-white); border-radius: 8px; box-shadow: 0 1px 3px rgba(59,47,32,0.06), 0 4px 12px rgba(59,47,32,0.04); overflow: clip; border: 1px solid var(--color-border); } #tableContainer { overflow-x: auto; -webkit-overflow-scrolling: touch; } .results-info { font-family: var(--font-ui); padding: 12px 18px; font-size: 13px; color: var(--color-text-soft); border-bottom: 1px solid var(--color-border); font-weight: 500; } .empty-state { padding: 56px 24px; text-align: center; color: var(--color-text-soft); } .empty-state .icon { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.4; } .empty-state p { font-family: var(--font-ui); font-size: 15px; font-weight: 400; } .results-wrapper table { width: 100%; min-width: 520px; border-collapse: collapse; font-family: var(--font-ui); } .results-wrapper thead th { text-align: left; padding: 10px 14px; font-family: var(--font-ui); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-soft); border-bottom: 1.5px solid var(--color-border); background: var(--color-white); position: sticky; top: 0; z-index: 1; } .results-wrapper thead th:last-child { width: 50px; text-align: center; } .results-wrapper tbody tr { transition: background 0.15s; } .results-wrapper tbody tr:hover { background: var(--color-bg-alt); } .results-wrapper tbody td { padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--color-border); vertical-align: middle; } .results-wrapper tbody td:last-child { text-align: center; padding: 8px; } .col-id { width: 70px; color: var(--color-text-soft); font-size: 13px; font-variant-numeric: tabular-nums; } .col-author { width: 22%; } .col-title { font-weight: 500; } .col-category { width: 14%; font-size: 13px; } .col-category span { background: var(--color-bg-alt); padding: 3px 8px; border-radius: 4px; white-space: nowrap; } .col-price { width: 100px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; } mark.hl { background: rgba(184, 134, 11, 0.15); color: inherit; border-radius: 2px; padding: 0.05em 0.1em; } .btn-copy { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-white); cursor: pointer; color: var(--color-text-soft); transition: all 0.15s; padding: 0; } .btn-copy:hover { background: var(--color-bg-alt); border-color: var(--color-accent); color: var(--color-accent); } .btn-copy:active { transform: scale(0.92); } .btn-copy svg { width: 14px; height: 14px; } .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%); background: var(--color-text); color: var(--color-bg); padding: 10px 20px; border-radius: 8px; font-family: var(--font-ui); font-size: 14px; font-weight: 500; box-shadow: 0 4px 20px rgba(59,47,32,0.12); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s; opacity: 0; pointer-events: none; z-index: 100; } .toast.visible { transform: translateX(-50%) translateY(0); opacity: 1; } .error-banner { background: #fef2f0; border: 1px solid #f0c4bc; color: #b44a2d; padding: 14px 18px; border-radius: 8px; margin-bottom: 24px; font-family: var(--font-ui); font-size: 14px; } .download-box { background: var(--color-bg-alt); border-radius: 8px; padding: 20px 24px; margin-top: 32px; } .download-box a { font-family: var(--font-ui); font-weight: 600; } /* ---- Buy & Sell sections ---- */ .policy-note { background: var(--color-bg-alt); border-left: 4px solid var(--color-accent); padding: 16px 20px; margin: 20px 0; border-radius: 0 6px 6px 0; } /* ---- Media / About ---- */ .media-item { border-bottom: 1px solid var(--color-border); padding: 20px 0; } .media-item:last-child { border-bottom: none; } .media-item h3 { margin-top: 0; } .media-item .source { font-family: var(--font-ui); font-size: 14px; color: var(--color-text-soft); } .video-list { list-style: none; padding: 0; } .video-list li { margin-bottom: 12px; } .video-list a { font-family: var(--font-ui); font-size: 15px; } /* ---- Contact ---- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .map-embed { border-radius: 8px; overflow: hidden; border: 1px solid var(--color-border); } .map-embed iframe { width: 100%; height: 320px; border: 0; } /* ---- Footer ---- */ .site-footer { border-top: 1px solid var(--color-border); padding: 32px 24px; text-align: center; font-family: var(--font-ui); font-size: 14px; color: var(--color-text-soft); } .site-footer a { color: var(--color-accent); } /* ---- Responsive ---- */ @media (max-width: 720px) { .nav-toggle { display: block; } .nav-links { display: none; flex-direction: column; position: absolute; top: var(--nav-height); left: 0; right: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: 16px 24px; gap: 16px; } .nav-links.open { display: flex; } .hero { padding: 32px 20px; } .hero h1 { font-size: 30px; } .info-grid, .contact-grid { grid-template-columns: 1fr; } .page-title { font-size: 28px; } /* Search page mobile */ .controls { flex-direction: column; } .results-wrapper tbody td { font-size: 13px; padding: 8px 10px; } }