/* ============================================================================
COSMONAT LOBNA — BASE LAYER
Design tokens, reset, typography, buttons, forms, header, footer.
----------------------------------------------------------------------------
HOUSE RULE, ENFORCED THROUGHOUT THIS PROJECT:
no transition, no animation, no @keyframes, no :hover state changes.
Interaction is communicated with borders, weight, colour on :focus-visible
(kept for keyboard accessibility) and clear labels — never with motion.
========================================================================== */
/* ---------------------------------------------------------------------------
1. Tokens
------------------------------------------------------------------------ */
:root {
/* palette — oasis */
--palm-900: #22301F;
--palm-700: #35503C;
--palm-600: #4A6B52;
--palm-300: #9DB3A0;
--palm-100: #E6EDE6;
--sand-500: #C9B48C;
--sand-300: #E4D7BE;
--sand-200: #EFE6D3;
--sand-100: #F6F0E4;
--terra-700: #8F4A2A;
--terra-600: #B4643C;
--terra-200: #EBD3C6;
--off-white: #FBF9F5;
--white: #FFFFFF;
--ink-900: #241F1A;
--ink-700: #3D362F;
--ink-500: #6E675E;
--ink-300: #9A9288;
--line: #E2DACB;
--line-strong: #CFC3AC;
--ok-bg: #E8F0E6; --ok-fg: #2F5A33;
--warn-bg: #FBF0DC; --warn-fg: #8A6317;
--err-bg: #F8E4DE; --err-fg: #96341C;
--danger-line: #DCA893;
/* text colour used ON a filled button — flips in dark mode */
--on-primary: #FFFFFF;
--on-terra: #FFFFFF;
/* social buttons */
--fb-bg: #F2F5FA; --fb-fg: #1B3D77; --fb-line: #B9C6DC;
--wa-bg: #F0F7F1; --wa-fg: #1B5E33; --wa-line: #B6D8BE;
--ig-bg: #FBF2F4; --ig-fg: #8A3352; --ig-line: #DFC2C8;
/* footer / admin chrome */
--chrome-bg: #22301F;
--chrome-fg: #EFE6D3;
--chrome-muted: #9DB3A0;
--chrome-line: #33452F;
/* typography */
--font-display: 'Cormorant Garamond', 'Noto Naskh Arabic', Georgia, serif;
--font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--font-arabic: 'Cairo', 'Noto Kufi Arabic', 'Segoe UI', sans-serif;
/* spacing scale */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
--s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
--radius: 2px;
--radius-lg: 3px;
--shell: 1240px;
--header-h: 76px;
}
/* ---------------------------------------------------------------------------
1b. Dark theme
----------------------------------------------------------------------------
Applied by setting data-theme="dark" on (see assets/js/theme.js).
Only the colour tokens change — no layout, no motion. The palette is the same
oasis, after sunset: warm charcoal instead of sand, lit palm green, clay.
------------------------------------------------------------------------ */
html[data-theme="dark"] {
--palm-900: #0F120F;
--palm-700: #7FAA88; /* filled buttons need to read light on a dark page */
--palm-600: #93BC9B;
--palm-300: #6F8873;
--palm-100: #22301F;
--sand-500: #A79268;
--sand-300: #4A4437;
--sand-200: #2B2822;
--sand-100: #201E19;
--terra-700: #E0A67F;
--terra-600: #D08558;
--terra-200: #3B2A20;
--off-white: #171612;
--white: #1E1D18;
--ink-900: #F3EEE4;
--ink-700: #DCD5C7;
--ink-500: #A79F90;
--ink-300: #7B7466;
--line: #322E27;
--line-strong: #494336;
--ok-bg: #1D2A1C; --ok-fg: #A8D0A5;
--warn-bg: #2C2617; --warn-fg: #E2C486;
--err-bg: #2E1D17; --err-fg: #EDAC93;
--danger-line: #6B4436;
--on-primary: #11150F;
--on-terra: #1A100A;
--fb-bg: #1A2130; --fb-fg: #A8C2EA; --fb-line: #2E3A4E;
--wa-bg: #17251A; --wa-fg: #96CFA5; --wa-line: #2B4030;
--ig-bg: #2A1A20; --ig-fg: #E2A4B8; --ig-line: #452C35;
--chrome-bg: #101310;
--chrome-fg: #E7E0D2;
--chrome-muted: #8FA394;
--chrome-line: #232B22;
color-scheme: dark;
}
/* Arabic typography swap */
html[lang="ar"] {
--font-display: 'Cairo', 'Noto Kufi Arabic', serif;
--font-body: 'Cairo', 'Noto Kufi Arabic', sans-serif;
}
/* ---------------------------------------------------------------------------
2. Reset
------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
/* Nothing may widen the layout viewport — this is what makes a phone
"zoom out to desktop" when any element overflows. clip is preferred
(it doesn't create a scroll container, so position:sticky keeps working);
hidden is the fallback for older browsers. */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) {
html, body { overflow-x: clip; }
}
body {
margin: 0;
background: var(--off-white);
color: var(--ink-900);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* the hidden attribute must always win over a component's display rule */
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; border: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--palm-700); text-decoration: underline; text-underline-offset: 3px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
/* visible keyboard focus — accessibility, not decoration */
:focus-visible {
outline: 2px solid var(--palm-600);
outline-offset: 2px;
}
.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;
}
/* ---------------------------------------------------------------------------
3. Typography
------------------------------------------------------------------------ */
.display-1, .display-2, .display-3 {
font-family: var(--font-display);
font-weight: 500;
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--ink-900);
}
.display-1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.display-2 { font-size: clamp(2rem, 4vw, 3rem); }
.display-3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
html[lang="ar"] .display-1,
html[lang="ar"] .display-2,
html[lang="ar"] .display-3 { font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.eyebrow {
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: var(--terra-600);
}
html[lang="ar"] .eyebrow { letter-spacing: 0; }
.lead { font-size: 1.075rem; color: var(--ink-700); }
.muted { color: var(--ink-500); }
/* Numbers/phone numbers must stay left-to-right even inside an Arabic
(RTL) page, otherwise the digit groups and the "+" sign get reordered
by the browser's bidi algorithm and read backwards. */
.ltr-num { direction: ltr; unicode-bidi: isolate; }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.78rem; }
/* ---------------------------------------------------------------------------
4. Layout
------------------------------------------------------------------------ */
.shell {
width: 100%;
max-width: var(--shell);
margin: 0 auto;
padding: 0 var(--s-5);
}
.section { padding: var(--s-9) 0; }
.section--tight { padding: var(--s-8) 0; }
.section--sand { background: var(--sand-100); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--white { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 620px; margin-bottom: var(--s-6); }
.section-head .display-2 { margin-top: var(--s-2); }
.section-head p { margin-top: var(--s-3); color: var(--ink-500); }
.rule { height: 1px; background: var(--line); border: 0; }
/* ---------------------------------------------------------------------------
5. Buttons
------------------------------------------------------------------------ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
padding: 13px 24px;
border: 1px solid transparent;
border-radius: var(--radius);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
line-height: 1.2;
text-align: center;
}
.btn--primary { background: var(--palm-700); color: var(--on-primary); border-color: var(--palm-700); }
.btn--terra { background: var(--terra-600); color: var(--on-terra); border-color: var(--terra-600); }
.btn--outline { background: transparent; color: var(--palm-700); border-color: var(--palm-700); }
.btn--quiet { background: var(--white); color: var(--ink-700); border-color: var(--line-strong); }
.btn--ghost { background: transparent; color: var(--ink-700); border-color: transparent; padding: 8px 10px; }
.btn--danger { background: var(--white); color: var(--err-fg); border-color: var(--danger-line); }
.btn--block { display: flex; width: 100%; }
.btn--sm { padding: 8px 14px; font-size: 0.82rem; }
.btn--lg { padding: 16px 30px; font-size: 0.95rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* ---------------------------------------------------------------------------
6. Forms
------------------------------------------------------------------------ */
.field { margin-bottom: var(--s-4); }
.field > label,
.label {
display: block;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-700);
margin-bottom: 6px;
}
html[lang="ar"] .field > label, html[lang="ar"] .label { letter-spacing: 0; }
.input, .select, .textarea {
width: 100%;
padding: 12px 14px;
background: var(--white);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
font-size: 0.95rem;
color: var(--ink-900);
}
.textarea { min-height: 96px; resize: vertical; }
.select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 38px;
}
html[dir="rtl"] .select {
background-position: left 14px center;
padding-right: 14px;
padding-left: 38px;
}
.select:disabled { background-color: var(--sand-100); color: var(--ink-300); }
html[data-theme="dark"] .select {
background-image: url("data:image/svg+xml;utf8,");
}
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: #C0553A; }
.field-error {
display: none;
margin-top: 5px;
font-size: 0.8rem;
color: var(--err-fg);
}
.field-error.is-visible { display: block; }
.field-hint { margin-top: 5px; font-size: 0.8rem; color: var(--ink-500); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--s-4); }
@media (max-width: 720px) {
.grid-2, .grid-3 { grid-template-columns: 1fr; }
}
.checkline { display: flex; align-items: flex-start; gap: var(--s-3); }
.checkline input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--palm-700); }
/* ---------------------------------------------------------------------------
7. Notices / badges
------------------------------------------------------------------------ */
.notice {
padding: 12px 16px;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--sand-100);
font-size: 0.875rem;
color: var(--ink-700);
}
.notice--ok { background: var(--ok-bg); border-color: var(--line-strong); color: var(--ok-fg); }
.notice--warn { background: var(--warn-bg); border-color: var(--line-strong); color: var(--warn-fg); }
.notice--err { background: var(--err-bg); border-color: var(--danger-line); color: var(--err-fg); }
.notice[hidden] { display: none; }
.badge {
display: inline-block;
padding: 3px 9px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--sand-200);
color: var(--ink-700);
border: 1px solid var(--line-strong);
}
.badge--terra { background: var(--terra-200); border-color: var(--line-strong); color: var(--terra-700); }
.badge--palm { background: var(--palm-100); border-color: var(--line-strong); color: var(--palm-700); }
.badge--muted { background: var(--sand-100); color: var(--ink-500); }
html[lang="ar"] .badge { letter-spacing: 0; }
/* ---------------------------------------------------------------------------
8. Header
------------------------------------------------------------------------ */
.site-header {
position: sticky;
top: 0;
z-index: 60;
background: var(--off-white);
border-bottom: 1px solid var(--line);
}
.header-inner {
height: var(--header-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-5);
}
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: inherit; }
.brand-mark {
width: 42px; height: 42px;
border: 1px solid var(--palm-600);
border-radius: 50%;
display: grid; place-items: center;
background: var(--palm-100);
color: var(--palm-600);
flex: none;
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-text { line-height: 1.15; }
.brand-name {
font-family: var(--font-display);
font-size: 1.32rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--ink-900);
display: block;
}
.brand-sub {
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-500);
}
html[lang="ar"] .brand-sub { letter-spacing: 0; font-size: 0.72rem; }
.main-nav { display: flex; align-items: center; gap: var(--s-5); }
.main-nav a {
text-decoration: none;
color: var(--ink-700);
font-size: 0.9rem;
font-weight: 500;
padding: 6px 0;
border-bottom: 2px solid transparent;
}
.main-nav a.is-current { border-bottom-color: var(--terra-600); color: var(--ink-900); }
.header-actions { display: flex; align-items: center; gap: var(--s-3); }
/* language switcher */
.lang-switch { display: flex; flex: none; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.lang-btn {
min-width: 40px;
padding: 7px 11px;
background: var(--white);
border: 0;
border-inline-end: 1px solid var(--line);
font-size: 0.78rem;
font-weight: 600;
color: var(--ink-500);
letter-spacing: 0.04em;
}
.lang-btn:last-child { border-inline-end: 0; }
.lang-btn.is-active { background: var(--palm-700); color: var(--on-primary); }
/* theme toggle */
.theme-toggle {
width: 40px; height: 40px;
display: inline-grid;
place-items: center;
background: var(--white);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
color: var(--ink-700);
flex: none;
}
.theme-toggle svg { width: 18px; height: 18px; }
.header-actions > * { flex: none; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
/* cart button */
.cart-btn {
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 9px 16px;
background: var(--palm-700);
color: var(--on-primary);
border: 1px solid var(--palm-700);
border-radius: var(--radius);
font-size: 0.85rem;
font-weight: 600;
}
.cart-btn svg { width: 17px; height: 17px; }
.cart-count {
min-width: 21px;
padding: 0 5px;
height: 21px;
border-radius: 999px;
background: var(--terra-600);
color: var(--on-terra);
font-size: 0.72rem;
font-weight: 700;
display: inline-grid;
place-items: center;
}
.menu-toggle { display: none; }
@media (max-width: 940px) {
.main-nav { display: none; }
.main-nav.is-open {
display: flex;
position: absolute;
top: var(--header-h);
inset-inline: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
background: var(--off-white);
border-bottom: 1px solid var(--line);
padding: var(--s-3) var(--s-5) var(--s-5);
}
.main-nav.is-open a { padding: 12px 0; border-bottom: 1px solid var(--line); }
.menu-toggle {
display: inline-grid;
place-items: center;
width: 40px; height: 40px;
background: var(--white);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
}
.menu-toggle svg { width: 18px; height: 18px; }
.cart-btn span.cart-label { display: none; }
}
/* ---------------------------------------------------------------------------
9. Footer
------------------------------------------------------------------------ */
.site-footer {
background: var(--chrome-bg);
color: var(--chrome-fg);
padding: var(--s-8) 0 var(--s-5);
margin-top: 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: var(--s-6);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .brand-name { color: var(--chrome-fg); }
.footer-brand p { margin-top: var(--s-3); color: var(--chrome-muted); font-size: 0.9rem; max-width: 34ch; }
.footer-col h3 {
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sand-500);
margin-bottom: var(--s-3);
font-weight: 700;
}
html[lang="ar"] .footer-col h3 { letter-spacing: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a, .footer-col span { color: var(--chrome-fg); text-decoration: none; font-size: 0.9rem; }
.footer-col a { text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
margin-top: var(--s-7);
padding-top: var(--s-4);
border-top: 1px solid var(--chrome-line);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--s-3);
font-size: 0.8rem;
color: var(--chrome-muted);
}
.footer-bottom a { color: var(--chrome-fg); }
/* ---------------------------------------------------------------------------
10. Print
------------------------------------------------------------------------ */
@media print {
.site-header, .site-footer, .cart-panel, .modal, .btn { display: none !important; }
body { background: #fff; }
}
/* ---------------------------------------------------------------------------
11. Responsive — phone and tablet
----------------------------------------------------------------------------
Breakpoints: 1100 (small laptop) · 900 (tablet landscape) · 720 (tablet
portrait) · 560 (large phone) · 420 (small phone).
------------------------------------------------------------------------ */
/* anchors must not slide under the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
@media (max-width: 900px) {
:root { --s-9: 64px; --s-8: 48px; }
.section { padding: var(--s-8) 0; }
}
@media (max-width: 720px) {
.shell { padding: 0 var(--s-4); }
.section-head { margin-bottom: var(--s-5); }
.btn--lg { padding: 14px 22px; }
.btn-row .btn { flex: 1 1 auto; }
}
/* the language switcher only rides in the header while there is room for it */
.nav-extras { display: none; }
@media (max-width: 560px) {
:root { --header-h: 62px; --s-9: 52px; --s-8: 40px; }
body { font-size: 15.5px; }
.header-inner { gap: var(--s-3); }
.brand-mark { width: 34px; height: 34px; }
.brand-mark svg { width: 18px; height: 18px; }
.brand-name { font-size: 1.05rem; white-space: nowrap; }
.brand-sub { display: none; }
.header-actions { gap: 6px; }
body:not(.admin):not(.errorpage) .header-actions > .lang-switch { display: none; } /* moves into the menu */
body.errorpage .header-inner { height: auto; padding: var(--s-3) 0; flex-wrap: wrap; }
.nav-extras { display: block; padding-top: var(--s-4); }
.nav-extras .lang-switch { display: inline-flex; }
.theme-toggle, .menu-toggle { width: 36px; height: 36px; }
.cart-btn { padding: 8px 12px; }
.display-1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
.display-2 { font-size: clamp(1.65rem, 7vw, 2.1rem); }
.footer-grid { gap: var(--s-5); }
.site-footer { padding: var(--s-7) 0 var(--s-5); }
}
/* comfortable tap targets on touch screens */
@media (pointer: coarse) {
.btn--sm { padding: 10px 15px; }
.link-btn { padding: 4px 0; }
.main-nav a { padding: 10px 0; }
}
/* iPhone home-indicator safe area */
@supports (padding: env(safe-area-inset-bottom)) {
.cart-foot { padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); }
.site-footer { padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); }
}