/* ==========================================================================
DorOne — Design System & Base Styles
Mobile-first. Brand palette per DOORe Brand Identity Guide.
========================================================================== */
/* Google Fonts are loaded via + in each
page's (faster than an @import here — no extra CSS round-trip, and it lets the
preconnect start the handshake early). Keep the two in sync if the family list changes. */
:root {
/* --- Brand colors --- */
--red: #E31E25;
--red-dark: #B4151B;
--gold: #FAB913;
--gold-dark: #D99A00;
--green: #346338;
--white: #FFFFFF;
--cream: #F7EFDD;
--cream-light: #FDFAF2;
--ink: #2A2320;
--ink-soft: #5A5048;
--border: #E9DFC8;
/* --- Type --- */
--font-main: "Vazirmatn", "Segoe UI", sans-serif;
--font-script: "Caveat", cursive;
--font-italic: "Playfair Display", serif;
/* --- Shape / rhythm --- */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 24px;
--radius-pill: 999px;
--shadow-card: 0 2px 8px rgba(42, 35, 32, 0.06), 0 1px 2px rgba(42, 35, 32, 0.06);
--shadow-raised: 0 12px 32px rgba(42, 35, 32, 0.12);
--container: 1240px;
}
/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* the header is position:fixed (72px tall) — offset in-page anchor jumps so the
target heading lands below it instead of hidden underneath */
scroll-padding-top: 88px;
/* safety net against any stray element pushing past the viewport on mobile.
`clip` (not `hidden`) doesn't create a scroll container. */
overflow-x: clip;
}
body {
margin: 0;
font-family: var(--font-main);
color: var(--ink);
background: var(--white);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
/* clears the fixed site-header (72px tall at every breakpoint) so page
content always starts below it, never underneath */
padding-top: 72px;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0; }
/* long unbroken strings (URLs, e-mails, product codes) wrap instead of
spilling out of their box on narrow screens */
p, h1, h2, h3, h4, li, a, dd, dt, figcaption { overflow-wrap: break-word; }
svg { display: block; }
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 20px;
}
@media (min-width: 768px) {
.container { padding: 0 32px; }
}
section { position: relative; }
/* --- Eyebrow / italian accent label --- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-italic);
font-style: italic;
font-weight: 600;
font-size: 15px;
color: var(--green);
letter-spacing: 0.02em;
}
.eyebrow::before {
content: "";
width: 22px;
height: 1.5px;
background: var(--green);
opacity: 0.55;
}
/* --- Buttons --- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
border-radius: var(--radius-pill);
font-weight: 700;
font-size: 15px;
border: 2px solid transparent;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
white-space: nowrap;
}
.btn-primary {
background: var(--red);
color: var(--white);
box-shadow: 0 8px 20px rgba(227, 30, 37, 0.28);
}
.btn-primary:hover { background: var(--red-dark); transform: translateY(-1px); }
.btn-outline {
background: transparent;
border-color: var(--ink);
color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-outline-light {
background: rgba(255,255,255,0.12);
border-color: rgba(42,35,32,0.35);
color: var(--ink);
}
.btn-outline-light:hover { background: var(--ink); color: var(--cream-light); border-color: var(--ink); }
.btn-sm { padding: 10px 20px; font-size: 14px; }
/* ==========================================================================
HEADER
========================================================================== */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(253, 250, 242, 0.92);
backdrop-filter: saturate(160%) blur(10px);
border-bottom: 1px solid var(--border);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
gap: 16px;
}
.brand-logo { display: flex; align-items: center; }
.brand-logo img { height: 34px; width: auto; max-width: 160px; aspect-ratio: 640 / 274; object-fit: contain; }
.main-nav { display: none; }
.main-nav ul { display: flex; align-items: center; gap: 4px; }
.main-nav a {
display: block;
padding: 10px 16px;
font-weight: 600;
font-size: 15px;
color: var(--ink-soft);
border-radius: var(--radius-pill);
transition: background 0.15s ease, color 0.15s ease;
}
.main-nav a:hover, .main-nav a.active { background: var(--cream); color: var(--red); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-actions .btn { display: none; }
.icon-link {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
color: var(--ink-soft);
border: 1px solid var(--border);
transition: background 0.15s ease, color 0.15s ease, border-color .15s ease;
}
.icon-link:hover { background: var(--green); color: var(--white); border-color: var(--green); }
.icon-link svg { width: 19px; height: 19px; }
.nav-toggle {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
background: none; border: none; color: var(--ink);
}
.nav-toggle svg { width: 24px; height: 24px; }
@media (min-width: 1000px) {
.main-nav { display: block; }
.header-actions .btn { display: inline-flex; }
.nav-toggle { display: none; }
}
/* Mobile nav drawer */
.mobile-nav {
position: fixed; inset: 0;
z-index: 200;
background: var(--cream-light);
display: flex; flex-direction: column;
padding: 24px 20px;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.mobile-nav-top img { height: 28px; width: auto; max-width: 160px; aspect-ratio: 640 / 274; object-fit: contain; }
.mobile-nav-close { width: 40px; height: 40px; background: none; border: none; color: var(--ink); }
.mobile-nav ul { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav a {
display: block; padding: 16px 4px; font-size: 22px; font-weight: 700;
border-bottom: 1px solid var(--border); color: var(--ink);
}
.mobile-nav-footer { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.mobile-nav-footer .btn { width: 100%; }
@media (min-width: 1000px) { .mobile-nav { display: none; } }
/* ==========================================================================
LANGUAGE SWITCHER
========================================================================== */
.lang-switch {
display: flex;
align-items: center;
gap: 1px;
}
.lang-switch button {
background: none;
border: 0;
padding: 6px 7px;
font-family: var(--font-main);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1;
color: var(--ink-soft);
border-radius: 6px;
transition: color 0.15s ease, background 0.15s ease;
}
.lang-switch button:hover { color: var(--red); }
.lang-switch button.is-active {
color: var(--red);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Header switcher: only on desktop, next to the nav actions */
.header-actions .lang-switch { display: none; }
@media (min-width: 1000px) {
.header-actions .lang-switch {
display: flex;
margin-right: 2px;
padding-right: 10px;
border-right: 1px solid var(--border);
}
}
/* Drawer switcher: shown inside the mobile menu (hidden with the drawer on desktop) */
.lang-switch-drawer {
gap: 4px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.lang-switch-drawer button {
font-size: 15px;
padding: 8px 12px;
border: 1px solid var(--border);
}
.lang-switch-drawer button.is-active {
border-color: var(--red);
text-decoration: none;
}
/* ==========================================================================
RTL (Arabic)
========================================================================== */
:root[dir="rtl"] {
--font-main: "Cairo", "Vazirmatn", "Segoe UI", sans-serif;
}
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .header-actions .lang-switch {
margin-right: 0;
margin-left: 2px;
padding-right: 0;
padding-left: 10px;
border-right: 0;
border-left: 1px solid var(--border);
}
[dir="rtl"] .lang-switch button { letter-spacing: 0; }
/* Directional icons: mirror chevrons/arrows so they point the RTL way */
[dir="rtl"] .card-link svg,
[dir="rtl"] .product-cta svg,
[dir="rtl"] .pd-related .card-link svg { transform: scaleX(-1); }
/* Product grids: keep the catalogue order reading right-to-left in Arabic
(first product = far right). The grid already flows this way natively;
this pins it explicitly so a stray rule can't flip it. */
[dir="rtl"] .product-grid { direction: rtl; }
/* "Best Seller" ribbon sits on the outer (right) corner in RTL */
[dir="rtl"] .product-card .badge-line { left: auto; right: 10px; }
/* Breadcrumb separator spacing is symmetric — fine as-is; just align block */
[dir="rtl"] .breadcrumb { text-align: right; }
/* Arabic letters must stay joined — kill the Latin tracking/uppercase on labels
that carry translated Arabic text. (Italian decorative eyebrows are left alone —
they stay Latin/Playfair in every language.) */
[dir="rtl"] .product-card .kicker,
[dir="rtl"] .product-card .badge-line,
[dir="rtl"] .footer-col h4,
[dir="rtl"] .size-selector > label,
[dir="rtl"] .size-option .pk,
[dir="rtl"] .nutrition-table th,
[dir="rtl"] .addr-panel h3,
[dir="rtl"] .pd-kicker .brand-tag {
letter-spacing: 0;
text-transform: none;
}
/* Weight labels stay LTR (e.g. "500 g", not "g 500") even on RTL pages */
[dir="rtl"] .size-option .wt,
[dir="rtl"] .product-card .sizes { direction: ltr; }
[dir="rtl"] .product-card .sizes { text-align: right; }
/* Footer "Get in Touch" links are LTR data (URL, e-mail, phone) — keep them
left-to-right so "+39 329 457 9506" doesn't render as "9506 457 329 39+",
but still aligned to the right edge under the Arabic heading */
[dir="rtl"] .footer-col a[href^="mailto:"],
[dir="rtl"] .footer-col a[href^="tel:"],
[dir="rtl"] .footer-col a[href*="wa.me"],
[dir="rtl"] .footer-col a[href^="http"] {
direction: ltr;
unicode-bidi: embed;
display: inline-block;
}
/* Contact card / address values are LTR strings (phone, email, address) but on an
RTL page they should still hug the right edge under their right-aligned heading */
[dir="rtl"] .contact-card p,
[dir="rtl"] .addr-panel .addr-en { text-align: right; }
[dir="rtl"] .addr-panel .addr-en span.pin { margin-right: 0; margin-left: 4px; }
/* ==========================================================================
HERO (video)
========================================================================== */
.hero {
position: relative;
height: 92vh;
min-height: 560px;
max-height: 920px;
overflow: hidden;
background: var(--cream); /* warm fallback, not a stark black, if media somehow fails to load */
display: flex;
align-items: flex-end;
}
.hero-media {
position: absolute; inset: 0;
overflow: hidden;
}
/* blurred fill layer: shows through in any letterbox gap around the sharp video */
.hero-media video, .hero-media img.hero-fallback {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(1.35);
filter: blur(28px) saturate(1.15) brightness(0.85);
height: 100%; width: 100%;
object-fit: cover;
}
.hero-media .hero-sharp {
filter: none;
transform: translate(-50%, -50%);
width: auto;
height: 100%;
max-width: none;
left: 50%;
object-fit: cover;
/*