/* ========================================================================== ARCHON — Design System Premium aluminium engineering consultancy. Tokens → primitives → components. Logical properties throughout so the entire system flips correctly for RTL (Arabic) with zero overrides. ========================================================================== */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Tajawal:wght@400;500;700;800&display=swap'); /* ---------- Tokens ---------- */ :root{ /* Color — neutrals (ink → mist) */ --ink-900:#0A0B0D; --ink-800:#15171A; --ink-700:#202327; --ink-600:#33373D; --ink-500:#4A4F56; --ink-400:#6B7078; --ink-300:#9BA0A8; --ink-200:#C7CBD1; --ink-100:#E4E6E9; --ink-050:#F2F3F4; --white:#FFFFFF; /* Color — brand (aligned to the ARCHON logo: deep teal-blue mark + gold accent stroke) */ --brand-primary:#0A0B0D; /* ink black */ --brand-secondary:#C7CBD1; /* brushed aluminium */ --brand-blue:#2C5872; /* logo mark blue */ --brand-blue-dark:#1F4257; --brand-accent:#D6A45E; /* logo gold stroke — CTAs, highlights */ --brand-accent-dark:#B27F3E; /* Semantic */ --success:#1E8E5A; --warning:#B8790A; --danger:#C6383D; --success-bg:#E9F6EF; --warning-bg:#FBF1DF; --danger-bg:#FBEAEB; /* Surfaces */ --bg-page:#FFFFFF; --bg-alt:#F7F7F8; --bg-dark:#0A0B0D; --bg-dark-alt:#15171A; --border-subtle:#E4E6E9; --border-dark:#2A2D31; /* Text */ --text-primary:#0A0B0D; --text-secondary:#4A4F56; --text-muted:#6B7078; --text-inverse:#FFFFFF; --text-inverse-muted:#9BA0A8; /* Typography */ --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-display:'Fraunces','Inter',serif; --font-body-ar:'Tajawal','Inter',sans-serif; --font-display-ar:'Tajawal','Inter',sans-serif; --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-md: 1.125rem; /* 18 */ --fs-lg: 1.375rem; /* 22 */ --fs-xl: 1.75rem; /* 28 */ --fs-2xl: 2.25rem; /* 36 */ --fs-3xl: 3rem; /* 48 */ --fs-4xl: 3.75rem; /* 60 */ --fs-5xl: 4.75rem; /* 76 */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.55; --lh-relaxed: 1.75; /* 8-point spacing */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 2.5rem; --sp-6: 3rem; --sp-8: 4rem; --sp-10: 5rem; --sp-12: 6rem; --sp-16: 8rem; --sp-20: 10rem; /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px; /* Elevation */ --shadow-sm: 0 1px 2px rgba(10,11,13,0.06), 0 1px 1px rgba(10,11,13,0.04); --shadow-md: 0 8px 24px rgba(10,11,13,0.08), 0 2px 8px rgba(10,11,13,0.04); --shadow-lg: 0 24px 64px rgba(10,11,13,0.14), 0 8px 24px rgba(10,11,13,0.06); --shadow-glow: 0 0 0 1px rgba(176,141,87,0.25), 0 8px 32px rgba(176,141,87,0.18); /* Motion */ --ease-out: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --dur-fast: 150ms; --dur-med: 320ms; --dur-slow: 600ms; /* Layout */ --container-max: 1280px; --container-pad: var(--sp-3); --header-h: 84px; } /* Dark mode surfaces (data-theme="dark" toggle on ) */ html[data-theme="dark"]{ --bg-page:#0A0B0D; --bg-alt:#15171A; --border-subtle:#2A2D31; --text-primary:#F2F3F4; --text-secondary:#C7CBD1; --text-muted:#9BA0A8; } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } *{ margin:0; } html{ scroll-behavior:smooth; } html,body{ height:100%; } body{ font-family:var(--font-body); font-size:var(--fs-base); line-height:var(--lh-normal); color:var(--text-primary); background:var(--bg-page); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,picture,video,canvas,svg{ display:block; max-width:100%; } input,button,textarea,select{ font:inherit; color:inherit; } button{ cursor:pointer; background:none; border:none; } a{ color:inherit; text-decoration:none; } ul,ol{ list-style:none; padding:0; } h1,h2,h3,h4,h5,h6{ font-weight:700; line-height:var(--lh-tight); text-wrap:balance; } /* RTL: Arabic language swap */ html[lang="ar"] body{ font-family:var(--font-body-ar); } html[lang="ar"] .font-display{ font-family:var(--font-display-ar); } html[dir="rtl"] .icon-flip{ transform:scaleX(-1); } /* Focus visibility — WCAG AA */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--brand-accent); outline-offset:3px; border-radius:4px; } .skip-link{ position:absolute; inset-inline-start:var(--sp-2); top:-100px; background:var(--ink-900); color:var(--white); padding:var(--sp-1) var(--sp-2); border-radius:var(--r-sm); z-index:200; transition:top var(--dur-fast); } .skip-link:focus{ top:var(--sp-2); } /* ---------- Layout helpers ---------- */ .container{ max-width:var(--container-max); margin-inline:auto; padding-inline:var(--container-pad); } .section{ padding-block:var(--sp-12); } .section-sm{ padding-block:var(--sp-8); } .section-alt{ background:var(--bg-alt); } .section-dark{ background:var(--bg-dark); color:var(--text-inverse); } .section-dark .text-muted{ color:var(--text-inverse-muted); } .grid{ display:grid; gap:var(--sp-4); } .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } .flex{ display:flex; } .flex-col{ flex-direction:column; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; } .gap-1{ gap:var(--sp-1); } .gap-2{ gap:var(--sp-2); } .gap-3{ gap:var(--sp-3); } .gap-4{ gap:var(--sp-4); } /* ---------- Typography utilities ---------- */ .eyebrow{ display:inline-flex; align-items:center; gap:.5em; font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-accent); } .eyebrow::before{ content:""; width:24px; height:2px; background:var(--brand-accent); display:inline-block; } .font-display{ font-family:var(--font-display); } .h1-display{ font-family:var(--font-display); font-size:clamp(2.75rem,5vw + 1rem,var(--fs-5xl)); font-weight:600; letter-spacing:-.02em; } .h2-display{ font-family:var(--font-display); font-size:clamp(2rem,3vw + 1rem,var(--fs-3xl)); font-weight:600; letter-spacing:-.01em; } .h3-display{ font-family:var(--font-display); font-size:var(--fs-xl); font-weight:600; } .text-lead{ font-size:var(--fs-md); color:var(--text-secondary); line-height:var(--lh-relaxed); } .text-muted{ color:var(--text-muted); } .text-center{ text-align:center; } .max-w-prose{ max-width:64ch; } .mx-auto{ margin-inline:auto; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; padding:.9rem 1.75rem; border-radius:var(--r-full); font-weight:600; font-size:var(--fs-sm); letter-spacing:.01em; transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast); white-space:nowrap; } .btn:active{ transform:scale(.97); } .btn-primary{ background:var(--ink-900); color:var(--white); box-shadow:var(--shadow-sm); } .btn-primary:hover{ background:var(--ink-700); box-shadow:var(--shadow-md); transform:translateY(-2px); } .btn-accent{ background:var(--brand-accent); color:var(--white); box-shadow:var(--shadow-sm); } .btn-accent:hover{ background:var(--brand-accent-dark); box-shadow:var(--shadow-glow); transform:translateY(-2px); } .btn-ghost{ background:transparent; color:var(--text-primary); border:1px solid var(--border-subtle); } .btn-ghost:hover{ border-color:var(--ink-900); background:var(--bg-alt); } .btn-inverse{ background:var(--white); color:var(--ink-900); } .btn-inverse:hover{ background:var(--ink-100); transform:translateY(-2px); } .btn-sm{ padding:.6rem 1.25rem; font-size:var(--fs-xs); } .btn-lg{ padding:1.1rem 2.25rem; font-size:var(--fs-base); } .btn-icon{ width:44px; height:44px; padding:0; border-radius:var(--r-full); } /* ---------- Cards ---------- */ .card{ background:var(--bg-page); border:1px solid var(--border-subtle); border-radius:var(--r-lg); padding:var(--sp-4); transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med); } .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; } .card-media{ border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3; margin-block-end:var(--sp-3); background:var(--ink-100); } .card-media img,.card-media video{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); } .card:hover .card-media img,.card:hover .card-media video{ transform:scale(1.05); } .card-eyebrow{ font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--brand-accent); } /* ---------- Badges ---------- */ .badge{ display:inline-flex; align-items:center; gap:.4em; padding:.35em .9em; border-radius:var(--r-full); font-size:var(--fs-xs); font-weight:600; background:var(--ink-050); color:var(--text-secondary); border:1px solid var(--border-subtle); } .badge-accent{ background:rgba(176,141,87,.12); color:var(--brand-accent-dark); border-color:rgba(176,141,87,.3); } .badge-success{ background:var(--success-bg); color:var(--success); } .badge-warning{ background:var(--warning-bg); color:var(--warning); } /* ---------- Forms ---------- */ .field{ display:flex; flex-direction:column; gap:.5rem; margin-block-end:var(--sp-3); } .field label{ font-size:var(--fs-sm); font-weight:600; } .field .hint{ font-size:var(--fs-xs); color:var(--text-muted); } .input,.textarea,.select{ padding:.85rem 1rem; border:1px solid var(--border-subtle); border-radius:var(--r-md); background:var(--bg-page); font-size:var(--fs-base); transition:border-color var(--dur-fast), box-shadow var(--dur-fast); } .input:focus,.textarea:focus,.select:focus{ border-color:var(--ink-900); box-shadow:0 0 0 3px rgba(10,11,13,.08); outline:none; } .input.is-invalid,.textarea.is-invalid{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(198,56,61,.1); } .error-msg{ font-size:var(--fs-xs); color:var(--danger); display:none; } .error-msg.is-visible{ display:block; } .textarea{ resize:vertical; min-height:140px; } .checkbox-row{ display:flex; align-items:flex-start; gap:.6rem; font-size:var(--fs-sm); color:var(--text-secondary); } /* ---------- Navbar ---------- */ .navbar{ position:fixed; inset-inline:0; top:0; z-index:100; height:var(--header-h); display:flex; align-items:center; background:rgba(255,255,255,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid transparent; transition:border-color var(--dur-med), background var(--dur-med); } .navbar.is-scrolled{ border-color:var(--border-subtle); background:rgba(255,255,255,.92); } .navbar-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; } .brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:var(--fs-md); letter-spacing:.02em; } .brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-accent); } .brand-mark{ height:32px; width:auto; display:block; } .nav-links{ display:flex; align-items:center; gap:var(--sp-4); } .nav-links > li > a{ font-size:var(--fs-sm); font-weight:500; color:var(--text-secondary); position:relative; padding-block:.4rem; transition:color var(--dur-fast); } .nav-links > li > a::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:2px; background:var(--brand-accent); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-fast) var(--ease-out); } html[dir="rtl"] .nav-links > li > a::after{ transform-origin:right; } .nav-links > li > a:hover,.nav-links > li > a.is-active{ color:var(--text-primary); } .nav-links > li > a:hover::after,.nav-links > li > a.is-active::after{ transform:scaleX(1); } .nav-actions{ display:flex; align-items:center; gap:var(--sp-2); } .lang-switch{ position:relative; } .lang-switch button{ display:flex; align-items:center; gap:.35rem; font-size:var(--fs-xs); font-weight:700; padding:.5rem .9rem; border:1px solid var(--border-subtle); border-radius:var(--r-full); } .lang-menu{ position:absolute; inset-inline-end:0; top:calc(100% + 8px); background:var(--bg-page); border:1px solid var(--border-subtle); border-radius:var(--r-md); box-shadow:var(--shadow-md); min-width:140px; padding:.4rem; opacity:0; visibility:hidden; transform:translateY(-6px); transition:all var(--dur-fast) var(--ease-out); } .lang-switch.is-open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); } .lang-menu button{ width:100%; border:none; justify-content:flex-start; padding:.55rem .7rem; border-radius:var(--r-sm); font-weight:500; } .lang-menu button:hover{ background:var(--bg-alt); } .nav-item-dropdown{ position:relative; } .nav-drop-toggle{ display:inline-flex; align-items:center; font: inherit; font-size:var(--fs-sm); font-weight:500; color:var(--text-secondary); padding-block:.4rem; } .nav-drop-toggle:hover{ color:var(--text-primary); } .nav-caret{ font-size:.65em; margin-inline-start:.35em; transition:transform var(--dur-fast); } .nav-item-dropdown.is-expanded .nav-caret{ transform:rotate(180deg); } .nav-dropdown{ position:absolute; top:calc(100% + 10px); inset-inline-start:0; background:var(--bg-page); border:1px solid var(--border-subtle); border-radius:var(--r-md); box-shadow:var(--shadow-md); min-width:200px; padding:.5rem; opacity:0; visibility:hidden; transform:translateY(-6px); transition:all var(--dur-fast) var(--ease-out); z-index:50; } .nav-item-dropdown:hover .nav-dropdown,.nav-item-dropdown:focus-within .nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); } .nav-dropdown a{ display:block; padding:.6rem .8rem; border-radius:var(--r-sm); font-size:var(--fs-sm); color:var(--text-secondary); } .nav-dropdown a:hover{ background:var(--bg-alt); color:var(--text-primary); } .nav-cta-mobile{ display:none; } .nav-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; } .nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink-900); position:relative; transition:background var(--dur-fast); } .nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; inset-inline:0; width:22px; height:2px; background:var(--ink-900); transition:transform var(--dur-fast); } .nav-toggle span::before{ top:-7px; } .nav-toggle span::after{ top:7px; } .nav-toggle.is-open span{ background:transparent; } .nav-toggle.is-open span::before{ transform:translateY(7px) rotate(45deg); } .nav-toggle.is-open span::after{ transform:translateY(-7px) rotate(-45deg); } @media (max-width:960px){ .nav-links{ position:fixed; inset-inline:0; top:var(--header-h); bottom:0; background:var(--bg-page); flex-direction:column; align-items:stretch; padding:var(--sp-4); gap:0; overflow-y:auto; transform:translateX(100%); transition:transform var(--dur-med) var(--ease-in-out); border-top:1px solid var(--border-subtle); } html[dir="rtl"] .nav-links{ transform:translateX(-100%); } .nav-links.is-open{ transform:translateX(0); } .nav-links > li{ border-bottom:1px solid var(--border-subtle); } .nav-links > li > a{ display:block; padding-block:var(--sp-2); font-size:var(--fs-md); } .nav-toggle{ display:inline-flex; } .nav-cta{ display:none; } .nav-item-dropdown .nav-dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding-inline-start:var(--sp-3); display:none; margin-block-end:.5rem; } .nav-item-dropdown.is-expanded .nav-dropdown{ display:block; } .nav-cta-mobile{ display:block; margin-block-start:var(--sp-2); border-bottom:none !important; } .nav-cta-mobile a{ display:inline-flex; width:100%; } } /* ---------- Hero ---------- */ .hero{ position:relative; min-height:100vh; display:flex; align-items:center; padding-block-start:var(--header-h); overflow:hidden; color:var(--text-inverse); } .hero-media{ position:absolute; inset:0; z-index:0; } .hero-media video,.hero-media img{ width:100%; height:100%; object-fit:cover; } .hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,11,13,.55) 0%,rgba(10,11,13,.72) 60%,rgba(10,11,13,.92) 100%); } .hero-content{ position:relative; z-index:1; padding-block:var(--sp-10); } .hero .eyebrow{ color:var(--brand-secondary); } .hero .eyebrow::before{ background:var(--brand-accent); } .hero-stats{ display:flex; gap:var(--sp-6); margin-block-start:var(--sp-8); flex-wrap:wrap; } .hero-stat .num{ font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:600; color:var(--white); } .hero-stat .label{ font-size:var(--fs-xs); color:var(--text-inverse-muted); text-transform:uppercase; letter-spacing:.06em; } .scroll-cue{ position:absolute; inset-inline:0; bottom:var(--sp-4); display:flex; justify-content:center; z-index:1; animation:bob 2.2s ease-in-out infinite; } @keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(8px);} } /* Page header (non-home pages) */ .page-header{ padding-block:calc(var(--header-h) + var(--sp-8)) var(--sp-8); background:var(--bg-dark); color:var(--text-inverse); } .breadcrumb{ display:flex; gap:.5em; align-items:center; font-size:var(--fs-xs); color:var(--text-inverse-muted); margin-block-end:var(--sp-2); } .breadcrumb a:hover{ color:var(--white); } /* ---------- Brand strip ---------- */ .brand-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-6); } .brand-strip .brand-name{ font-family:var(--font-display); font-size:var(--fs-lg); color:var(--ink-300); font-weight:500; transition:color var(--dur-fast); } .brand-strip .brand-name:hover{ color:var(--ink-900); } /* ---------- Process / Timeline ---------- */ .timeline{ position:relative; display:grid; gap:var(--sp-6); } .timeline-step{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-3); position:relative; } .timeline-num{ width:48px; height:48px; border-radius:50%; background:var(--ink-900); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; flex-shrink:0; } .timeline-step:not(:last-child)::before{ content:""; position:absolute; inset-inline-start:23px; top:48px; bottom:calc(-1 * var(--sp-6)); width:2px; background:var(--border-subtle); } /* ---------- Stats ---------- */ .stat{ text-align:center; } .stat .num{ font-family:var(--font-display); font-size:var(--fs-3xl); font-weight:600; } .stat .label{ font-size:var(--fs-sm); color:var(--text-muted); margin-block-start:.25rem; } /* ---------- Testimonials ---------- */ .testimonial-card{ background:var(--bg-alt); border-radius:var(--r-lg); padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); height:100%; } .testimonial-quote{ font-family:var(--font-display); font-size:var(--fs-md); line-height:var(--lh-normal); } .testimonial-person{ display:flex; align-items:center; gap:var(--sp-2); margin-block-start:auto; } .testimonial-avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; } .testimonial-name{ font-weight:700; font-size:var(--fs-sm); } .testimonial-role{ font-size:var(--fs-xs); color:var(--text-muted); } .carousel-track{ display:flex; gap:var(--sp-4); overflow-x:auto; scroll-snap-type:x mandatory; padding-block-end:var(--sp-2); scrollbar-width:none; } .carousel-track::-webkit-scrollbar{ display:none; } .carousel-track > *{ scroll-snap-align:start; flex:0 0 min(420px,85vw); } .carousel-controls{ display:flex; gap:.75rem; justify-content:flex-end; margin-block-end:var(--sp-3); } .carousel-btn{ width:44px; height:44px; border-radius:50%; border:1px solid var(--border-subtle); display:flex; align-items:center; justify-content:center; transition:all var(--dur-fast); } .carousel-btn:hover{ background:var(--ink-900); color:var(--white); border-color:var(--ink-900); } /* ---------- Accordion (FAQ) ---------- */ .accordion-item{ border-bottom:1px solid var(--border-subtle); } .accordion-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding-block:var(--sp-3); text-align:start; font-weight:600; font-size:var(--fs-md); } .accordion-icon{ flex-shrink:0; width:24px; height:24px; position:relative; } .accordion-icon::before,.accordion-icon::after{ content:""; position:absolute; background:var(--ink-900); transition:transform var(--dur-med) var(--ease-out); } .accordion-icon::before{ inset-inline:0; top:50%; height:2px; transform:translateY(-50%); } .accordion-icon::after{ inset-block:0; inset-inline-start:50%; width:2px; transform:translateX(-50%); } .accordion-item.is-open .accordion-icon::after{ transform:translateX(-50%) rotate(90deg); opacity:0; } .accordion-panel{ max-height:0; overflow:hidden; transition:max-height var(--dur-med) var(--ease-in-out); } .accordion-panel-inner{ padding-block-end:var(--sp-3); color:var(--text-secondary); max-width:70ch; } /* ---------- Gallery / Lightbox ---------- */ .gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:var(--sp-2); } .gallery-item{ position:relative; overflow:hidden; border-radius:var(--r-md); cursor:pointer; } .gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); } .gallery-item:hover img{ transform:scale(1.08); } .gallery-item.tall{ grid-row:span 2; } .gallery-item.wide{ grid-column:span 2; } .gallery-caption{ position:absolute; inset-inline:0; bottom:0; padding:var(--sp-2); background:linear-gradient(0deg,rgba(10,11,13,.8),transparent); color:var(--white); font-size:var(--fs-xs); opacity:0; transition:opacity var(--dur-fast); } .gallery-item:hover .gallery-caption{ opacity:1; } .lightbox{ position:fixed; inset:0; z-index:300; background:rgba(10,11,13,.94); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity var(--dur-med); } .lightbox.is-open{ opacity:1; visibility:visible; } .lightbox img{ max-width:90vw; max-height:85vh; object-fit:contain; border-radius:var(--r-md); } .lightbox-close{ position:absolute; top:var(--sp-3); inset-inline-end:var(--sp-3); width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.1); color:var(--white); font-size:var(--fs-lg); } .lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.1); color:var(--white); display:flex; align-items:center; justify-content:center; } .lightbox-prev{ inset-inline-start:var(--sp-3); } .lightbox-next{ inset-inline-end:var(--sp-3); } /* ---------- Modal ---------- */ .modal-overlay{ position:fixed; inset:0; background:rgba(10,11,13,.6); z-index:250; opacity:0; visibility:hidden; transition:opacity var(--dur-med); display:flex; align-items:center; justify-content:center; padding:var(--sp-3); } .modal-overlay.is-open{ opacity:1; visibility:visible; } .modal{ background:var(--bg-page); border-radius:var(--r-lg); padding:var(--sp-5); max-width:480px; width:100%; box-shadow:var(--shadow-lg); transform:translateY(12px); transition:transform var(--dur-med) var(--ease-out); } .modal-overlay.is-open .modal{ transform:translateY(0); } /* ---------- Sidebar (blog) ---------- */ .sidebar-card{ background:var(--bg-alt); border-radius:var(--r-lg); padding:var(--sp-4); } .sidebar-card + .sidebar-card{ margin-block-start:var(--sp-3); } /* ---------- Pricing-style spec table (used in products) ---------- */ .spec-table{ width:100%; border-collapse:collapse; } .spec-table th,.spec-table td{ text-align:start; padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--border-subtle); font-size:var(--fs-sm); } .spec-table th{ color:var(--text-muted); font-weight:600; text-transform:uppercase; font-size:var(--fs-xs); letter-spacing:.05em; } /* ---------- Breadcrumb / Pagination ---------- */ .pagination{ display:flex; justify-content:center; gap:.5rem; margin-block-start:var(--sp-6); } .pagination a,.pagination span{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:var(--fs-sm); font-weight:600; } .pagination a:hover{ background:var(--bg-alt); } .pagination .is-active{ background:var(--ink-900); color:var(--white); } /* ---------- Footer ---------- */ .footer{ background:var(--bg-dark); color:var(--text-inverse-muted); padding-block:var(--sp-10) var(--sp-4); } .footer-top{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:var(--sp-6); padding-block-end:var(--sp-8); border-bottom:1px solid var(--border-dark); } .footer-brand .brand{ color:var(--white); } .footer-col h4{ color:var(--white); font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.06em; margin-block-end:var(--sp-2); } .footer-col li{ margin-block-end:.6rem; } .footer-col a:hover{ color:var(--white); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-2); padding-block-start:var(--sp-4); font-size:var(--fs-xs); } .social-row{ display:flex; gap:.75rem; } .social-row a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--border-dark); display:flex; align-items:center; justify-content:center; transition:all var(--dur-fast); } .social-row a:hover{ background:var(--white); color:var(--ink-900); border-color:var(--white); } .newsletter-form{ display:flex; gap:.5rem; margin-block-start:var(--sp-2); } .newsletter-form input{ flex:1; background:var(--ink-800); border:1px solid var(--border-dark); color:var(--white); } /* ---------- Scroll reveal ---------- */ [data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } [data-reveal].is-visible{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } } /* ---------- 404 ---------- */ .error-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:var(--sp-4); } .error-code{ font-family:var(--font-display); font-size:clamp(6rem,20vw,12rem); font-weight:600; color:var(--ink-100); line-height:1; } /* ---------- Responsive ---------- */ @media (max-width:1100px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .footer-top{ grid-template-columns:1fr 1fr; } .gallery-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:720px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } .footer-top{ grid-template-columns:1fr; } .hero-stats{ gap:var(--sp-4); } .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; } .gallery-item.wide{ grid-column:span 2; } .container{ --container-pad: var(--sp-2); } section.section{ padding-block:var(--sp-8); } } /* Skeleton / loading */ .skeleton{ background:linear-gradient(90deg,var(--ink-050) 25%,var(--ink-100) 37%,var(--ink-050) 63%); background-size:400% 100%; animation:skeleton-loading 1.4s ease infinite; border-radius:var(--r-md); } @keyframes skeleton-loading{ 0%{ background-position:100% 50%;} 100%{ background-position:0 50%;} } /* WhatsApp floating button — fixed physical corner by convention, not mirrored for RTL */ .whatsapp-float{ position:fixed; left:24px; bottom:24px; z-index:150; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); transition:transform var(--dur-fast) var(--ease-out); } .whatsapp-float:hover{ transform:scale(1.08); } .whatsapp-float svg{ width:30px; height:30px; fill:#fff; } @media (max-width:720px){ .whatsapp-float{ width:48px; height:48px; left:16px; bottom:16px; } .whatsapp-float svg{ width:26px; height:26px; } } /* Utility spacing */ .mt-1{margin-block-start:var(--sp-1);} .mt-2{margin-block-start:var(--sp-2);} .mt-3{margin-block-start:var(--sp-3);} .mt-4{margin-block-start:var(--sp-4);} .mt-6{margin-block-start:var(--sp-6);} .mt-8{margin-block-start:var(--sp-8);} .mb-2{margin-block-end:var(--sp-2);} .mb-3{margin-block-end:var(--sp-3);} .mb-4{margin-block-end:var(--sp-4);} .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }