/* waxbeanfactory.com RTL-first stylesheet. Logical properties throughout; page runs with . */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.85; color: var(--ink); background: var(--bg); } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 4px; } a:hover { color: var(--accent); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.35; margin: 0 0 var(--space-4); } h1 { font-size: var(--text-hero); font-weight: 700; } h2 { font-size: var(--text-3xl); font-weight: 700; } h3 { font-size: var(--text-xl); font-weight: 600; } p { margin: 0 0 var(--space-4); max-width: 64ch; } .container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } .skip-link { position: absolute; inset-inline-start: -999px; top: 0; background: var(--ink); color: var(--bg); padding: 0.6rem 1rem; z-index: 200; } .skip-link:focus { inset-inline-start: 0; } /* header */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-block-end: 1px solid var(--line); } .nav-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 66px; } .brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.15rem; color: var(--ink); text-decoration: none; } .nav-links { display: flex; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.4rem); list-style: none; margin: 0; padding: 0; } .nav-links a { font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft); text-decoration: none; padding: 0.4rem 0.15rem; } .nav-links a:hover { color: var(--accent-deep); } .nav-links a[aria-current="page"] { color: var(--accent-deep); box-shadow: inset 0 -2px 0 var(--accent); } .nav-cta { background: var(--accent); color: var(--on-accent) !important; padding: 0.5rem 1rem !important; border-radius: var(--radius-pill); font-weight: 600 !important; } .nav-cta:hover { background: var(--accent-deep); } .nav-toggle { display: none; } .nav-toggle-label { display: none; cursor: pointer; padding: 0.5rem; } .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after { display: block; width: 22px; height: 2px; background: var(--ink); position: relative; } .nav-toggle-label span::before, .nav-toggle-label span::after { content: ""; position: absolute; inset-inline-start: 0; } .nav-toggle-label span::before { top: -7px; } .nav-toggle-label span::after { top: 7px; } @media (max-width: 860px) { .nav-toggle-label { display: block; } .nav-links { position: absolute; top: 66px; inset-inline: 0; flex-direction: column; align-items: stretch; background: var(--surface); border-block-end: 1px solid var(--line); padding: var(--space-4); display: none; box-shadow: var(--shadow-lift); } .nav-links li { border-block-end: 1px solid var(--line); } .nav-links li:last-child { border-block-end: 0; } .nav-links a { display: block; padding: 0.85rem 0.35rem; font-size: var(--text-base); } .nav-cta { text-align: center; margin-block-start: var(--space-2); } .nav-toggle:checked ~ .nav-links { display: flex; } } /* hero */ .hero { padding-block: clamp(2.4rem, 6vw, 4.6rem) clamp(2rem, 5vw, 3.6rem); } .hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .hero h1 em { font-style: normal; color: var(--accent); } .hero-sub { font-size: var(--text-lg); color: var(--muted); max-width: 38ch; } .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); } .hero-visual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .hero-visual figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); box-shadow: var(--shadow-soft); } .hero-visual img { border-radius: var(--radius-sm); aspect-ratio: 1 / 1; object-fit: contain; background: #fff; } .hero-visual figcaption { font-size: var(--text-xs); color: var(--muted); padding-block-start: var(--space-2); } @media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; } } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; font-size: var(--text-base); border-radius: var(--radius-pill); padding: 0.75rem 1.4rem; text-decoration: none; cursor: pointer; border: 0; transition: background 0.18s ease, transform 0.12s ease; } .btn:active { transform: translateY(1px) scale(0.99); } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-deep); color: var(--on-accent); } .btn-secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); } .btn-secondary:hover { box-shadow: inset 0 0 0 1.5px var(--ink-soft); } /* sections */ section { padding-block: clamp(2.2rem, 5.5vw, 4.2rem); } .section-tight { padding-block: clamp(1.5rem, 4vw, 2.6rem); } .section-warm { background: var(--surface-warm); } .section-ink { background: var(--ink); color: var(--bg); } .section-ink h2, .section-ink h3 { color: inherit; } .section-ink p { color: color-mix(in srgb, var(--bg) 82%, var(--ink)); } .section-head { max-width: 60ch; margin-block-end: clamp(1.3rem, 3vw, 2.2rem); } .section-head p { color: var(--muted); font-size: var(--text-lg); margin-block-end: 0; } .section-ink .section-head p { color: color-mix(in srgb, var(--bg) 75%, var(--ink)); } /* trust band */ .trust-band { border-block: 1px solid var(--line); background: var(--surface); } .trust-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); padding-block: var(--space-6); } .trust-items > div { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--text-sm); color: var(--ink-soft); } .trust-items svg { flex: none; color: var(--accent); margin-block-start: 4px; } .trust-items strong { display: block; color: var(--ink); font-weight: 600; } @media (max-width: 760px) { .trust-items { grid-template-columns: 1fr; } } /* cards & grids */ .card-grid { display: grid; gap: var(--space-4); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px) { .cols-3 { grid-template-columns: 1fr; } .cols-2 { grid-template-columns: 1fr; } } .product-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow-soft); } .product-card img { border-radius: var(--radius-sm); aspect-ratio: 4 / 3; object-fit: contain; background: #fff; margin-block-end: var(--space-3); } .product-card h3 { margin-block-end: var(--space-2); font-size: var(--text-lg); } .product-card p, .product-card figcaption { font-size: var(--text-sm); color: var(--muted); } /* specs table */ .table-wrap { overflow-x: auto; border-radius: var(--radius); } .specs-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .specs-table caption { text-align: start; font-weight: 700; font-size: var(--text-lg); padding: var(--space-4); border-block-end: 1px solid var(--line); } .specs-table th, .specs-table td { text-align: start; padding: 0.7rem var(--space-4); vertical-align: top; } .specs-table thead th { background: var(--surface-warm); font-weight: 600; } .specs-table tbody tr:not(:last-child) { border-block-end: 1px solid var(--line); } /* steps */ .steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); list-style: none; margin: 0; padding: 0; } @media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } } .steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); } .steps li::before { content: counter(step, arabic-indic); font-weight: 700; font-size: var(--text-2xl); color: var(--accent); display: block; margin-block-end: var(--space-2); } .steps h3 { font-size: var(--text-base); margin-block-end: var(--space-2); } .steps p { font-size: var(--text-sm); color: var(--muted); margin: 0; } /* FAQ */ .faq { max-width: 780px; } .faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-block-end: var(--space-3); } .faq summary { cursor: pointer; font-weight: 600; padding: var(--space-4); list-style: none; display: flex; justify-content: space-between; gap: var(--space-3); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--accent); font-weight: 700; } .faq details[open] summary::after { content: "\2212"; } .faq details > div { padding: 0 var(--space-4) var(--space-4); color: var(--ink-soft); font-size: var(--text-sm); } /* forms */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); max-width: 720px; } .form-grid .full { grid-column: 1 / -1; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } label { display: block; font-weight: 600; font-size: var(--text-sm); margin-block-end: 0.35rem; } label .req { color: var(--accent); } input, select, textarea { width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; } input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent); border-color: var(--focus); } .hint { font-size: var(--text-xs); color: var(--muted); margin-block-start: 0.3rem; } .form-status { margin-block-start: var(--space-4); font-weight: 600; display: none; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); } .form-status.ok { display: block; background: #E7F3EA; color: #14532D; } .form-status.err { display: block; background: #FBE7E7; color: #7F1D1D; } /* footer */ .site-footer { background: var(--ink); color: #D8D2C9; padding-block: var(--space-12) var(--space-8); font-size: var(--text-sm); } .footer-legal { border-block-start: 1px solid rgba(232, 226, 216, 0.18); padding-block-start: var(--space-4); color: #B5AEA3; } .footer-legal p { margin-block-end: 0.3rem; } .site-footer a { color: #E8E2D8; } .site-footer h3 { color: #F5F1EA; font-size: var(--text-base); margin-block-end: var(--space-3); } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-block-end: 0.55rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-8); margin-block-end: var(--space-8); } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } } /* WhatsApp float: RTL mirror -> bottom-inline-start renders bottom-right in RTL */ .wa-float { position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 90; display: inline-flex; align-items: center; gap: 0.5rem; background: #067647; color: #FFFFFF; font-weight: 600; font-size: var(--text-sm); padding: 0.7rem 1rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-lift); text-decoration: none; } .wa-float:hover { background: #05603A; color: #fff; } @media (max-width: 640px) { .wa-float { bottom: 74px; padding: 0.85rem; } .wa-float .wa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } /* mobile bottom CTA bar */ .cta-bar { display: none; } @media (max-width: 640px) { .cta-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; position: fixed; inset-inline: 0; bottom: 0; z-index: 95; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border-block-start: 1px solid var(--line); padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom)); } .cta-bar .btn { padding: 0.7rem 0.6rem; font-size: var(--text-sm); } body { padding-block-end: 76px; } } /* compliance cards */ .doc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-6); margin-block-end: var(--space-4); } .card-h { font-size: var(--text-xl); font-weight: 600; margin: 0 0 var(--space-3); } .doc-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem var(--space-4); font-size: var(--text-sm); margin-block: var(--space-3); } .doc-card dt { font-weight: 600; color: var(--ink-soft); } .doc-card dd { margin: 0; color: var(--muted); direction: ltr; text-align: end; } .doc-card dd.ar { direction: rtl; text-align: start; } .status-chip { display: inline-block; font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-pill); padding: 0.2rem 0.7rem; background: var(--accent-tint); color: var(--accent-deep); } .slot-pending { color: var(--muted); } /* answer/quiet callout */ .answer-first { background: var(--surface-warm); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-6); margin-block: var(--space-6); } .answer-first p { margin: 0; font-weight: 500; } /* breadcrumbs */ .crumbs { font-size: var(--text-xs); color: var(--muted); padding-block-start: var(--space-6); } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; } .crumbs li + li::before { content: "/"; margin-inline-end: 0.4rem; color: var(--line-strong); } .crumbs a { color: var(--muted); text-decoration: none; } /* LTR islands inside RTL text (numbers, codes, phone) */ .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* contact layout */ .contact-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } } /* Forest & Amber: action colour stays amber (wax-line DNA); green owns structure */ .btn-primary, .nav-cta { background: #B45309 !important; } .btn-primary:hover, .nav-cta:hover { background: #92400E !important; } /* BeanGo chat widget (RTL mirror: button at inline-end = left side in RTL) */ .bg-btn { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 90; display: inline-flex; align-items: center; gap: 0.5rem; background: var(--ink); color: var(--bg); font-weight: 600; font-size: var(--text-sm); padding: 0.7rem 1rem; border-radius: var(--radius-pill); border: 0; cursor: pointer; box-shadow: var(--shadow-lift); } .bg-btn:hover { background: var(--ink-soft); } @media (max-width: 640px) { .bg-btn { bottom: 74px; } } .bg-panel { position: fixed; inset-inline-end: 14px; bottom: 76px; z-index: 110; width: min(360px, calc(100vw - 28px)); max-height: min(520px, 70vh); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift); display: none; flex-direction: column; overflow: hidden; } .bg-panel.open { display: flex; } @media (max-width: 640px) { .bg-panel { bottom: 132px; } } .bg-head { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 1rem; background: var(--ink); color: var(--bg); font-weight: 600; } .bg-head button { background: none; border: 0; color: inherit; font-size: 1.2rem; cursor: pointer; padding: 0.2rem 0.4rem; } .bg-msgs { flex: 1; overflow-y: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.55rem; } .bg-m { max-width: 85%; padding: 0.55rem 0.8rem; border-radius: 12px; font-size: var(--text-sm); line-height: 1.7; white-space: pre-wrap; overflow-wrap: break-word; } .bg-m.user { align-self: flex-end; background: var(--accent); color: var(--on-accent); } .bg-m.bot { align-self: flex-start; background: var(--surface-warm); color: var(--ink); } .bg-input { display: flex; gap: 0.5rem; border-block-start: 1px solid var(--line); padding: 0.6rem; } .bg-input input { flex: 1; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); padding: 0.55rem 0.9rem; font: inherit; font-size: var(--text-sm); } .bg-input button { background: #B45309; color: #fff; border: 0; border-radius: var(--radius-pill); padding: 0.55rem 1rem; font-weight: 600; cursor: pointer; font-size: var(--text-sm); } .bg-input button:disabled { opacity: 0.5; cursor: default; }