/* PENO® Design System — Light Luxury */ :root { --bg: #18181a; --bg2: #1f1f22; --bg3: #27272b; --gold: #c9a45c; --gold2: #b8954a; --white: #ffffff; --text: #f2f2f4; --gray1: #d4d4d8; --gray2: #9a9aa0; --gray3: #66666c; --border: rgba(201,164,92,0.24); --shadow: 0 16px 50px rgba(0,0,0,0.55); --font-en: 'Roboto Condensed', 'Arial Narrow', sans-serif; --font-fa: 'Vazirmatn', 'Tahoma', sans-serif; --transition: 0.4s cubic-bezier(0.25,0.46,0.45,0.94); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --header-h: 80px; } /* Fonts loaded via in each page's (non-blocking) — no @import here */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background: var(--bg); color: var(--text); font-family: var(--font-en); font-weight: 300; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } body.lang-fa { font-family: var(--font-fa); direction: rtl; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } button { cursor: pointer; font-family: inherit; } /* ─── SCROLLBAR ─── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--bg2); } ::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; } /* ─── HEADER ─── */ #peno-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 1000; display: flex; align-items: center; padding: 0 40px; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); border-bottom: 1px solid transparent; } /* Over hero video: transparent with white text */ #peno-header .header-nav a { color: rgba(255,255,255,0.88); } #peno-header .hamburger span { background: rgba(255,255,255,0.9); } #peno-header.scrolled { background: rgba(250,250,247,0.97); border-bottom-color: var(--border); backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(0,0,0,0.06); } /* When scrolled: dark text */ #peno-header.scrolled .header-nav a { color: #111; } #peno-header.scrolled .hamburger span { background: var(--text); } .header-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; } .header-logo { display: flex; align-items: center; } .header-logo img { height: 120px; width: auto; } .header-nav { display: flex; align-items: center; gap: 40px; } .header-nav a { font-family: 'Roboto Condensed', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 2.5px; text-transform: uppercase; position: relative; transition: color var(--transition); } .header-nav a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--gold); transition: width var(--transition); } .header-nav a:hover::after, .header-nav a.active::after { width: 100%; } #peno-header.scrolled .header-nav a:hover, #peno-header.scrolled .header-nav a.active { color: var(--text); } /* ─── LANG DROPDOWN ─── */ .lang-dropdown { position: relative; } .lang-current-btn { display: flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,0.4); padding: 5px 14px; border-radius: 20px; background: none; cursor: pointer; transition: border-color var(--transition), background var(--transition); } #peno-header.scrolled .lang-current-btn { border-color: var(--border); } .lang-current-btn:hover, .lang-dropdown.open .lang-current-btn { background: rgba(184,149,74,0.1); border-color: var(--gold); } .lang-current-label { font-family: 'Roboto Condensed', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.88); transition: color var(--transition); } #peno-header.scrolled .lang-current-label { color: var(--gold); } .lang-chevron { font-size: 10px; color: rgba(255,255,255,0.7); transition: transform var(--transition), color var(--transition); } #peno-header.scrolled .lang-chevron { color: var(--gold); } .lang-dropdown.open .lang-chevron { transform: rotate(180deg); } .lang-options { position: absolute; top: calc(100% + 8px); right: 0; background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 72px; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity var(--transition), transform var(--transition); z-index: 100; box-shadow: var(--shadow); } .lang-dropdown.open .lang-options { opacity: 1; pointer-events: all; transform: translateY(0); } .lang-opt { background: none; border: none; color: var(--gray2); font-family: 'Roboto Condensed', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; padding: 7px 12px; border-radius: 5px; cursor: pointer; text-align: center; transition: background var(--transition), color var(--transition); } .lang-opt:hover { background: var(--bg2); color: var(--text); } .lang-opt.active { color: var(--gold); } /* ─── HAMBURGER ─── */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 5px; } .hamburger span { display: block; width: 24px; height: 1px; transition: var(--transition); } /* ─── MOBILE MENU ─── */ #mobile-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--transition); } #mobile-menu.open { opacity: 1; pointer-events: all; } .mobile-menu-close { position: absolute; top: 28px; right: 28px; width: 30px; height: 30px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 0; } .mobile-menu-close::before, .mobile-menu-close::after { content: ''; display: block; width: 100%; height: 1px; background: var(--text); position: absolute; } .mobile-menu-close::before { transform: rotate(45deg); } .mobile-menu-close::after { transform: rotate(-45deg); } .mobile-menu-links { display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; } .mobile-menu-links a { font-family: var(--font-en); font-size: 32px; font-weight: 300; letter-spacing: 3px; color: var(--text); transition: color var(--transition); } .mobile-menu-links a:hover { color: var(--gold); } .mobile-lang-toggle { margin-top: 48px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .mobile-lang-toggle button { background: none; border: 1px solid var(--border); color: var(--gray2); font-family: 'Roboto Condensed', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 8px 18px; border-radius: 20px; transition: var(--transition); } .mobile-lang-toggle button.active, .mobile-lang-toggle button:hover { background: rgba(184,149,74,0.1); border-color: var(--gold); color: var(--gold); } /* ─── HERO ─── */ .hero { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: flex-end; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); transition: transform 8s ease; } .hero.in-view .hero-bg { transform: scale(1); } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.65) 100% ); } .hero-content { position: relative; z-index: 2; padding: 0 60px 80px; max-width: 800px; color: #fff; } .hero-eyebrow { font-family: 'Roboto Condensed', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; } .hero-title { font-size: clamp(48px, 6vw, 96px); font-weight: 300; line-height: 1.05; letter-spacing: -1px; margin-bottom: 24px; color: #fff; } .hero-sub { font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.82); max-width: 480px; margin-bottom: 40px; line-height: 1.8; } /* ─── BUTTONS ─── */ .btn { display: inline-flex; align-items: center; gap: 12px; font-family: 'Roboto Condensed', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 2.5px; text-transform: uppercase; padding: 14px 32px; border: 1px solid var(--text); color: var(--text); transition: var(--transition); } .btn:hover { background: var(--text); color: var(--white); } /* Hero button variant: white border on dark video */ .hero-content .btn { border-color: rgba(255,255,255,0.7); color: #fff; } .hero-content .btn:hover { background: rgba(255,255,255,0.15); border-color: #fff; } .btn-gold { border-color: var(--gold); color: var(--gold); } .btn-gold:hover { background: var(--gold); color: var(--white); } .btn-arrow { font-size: 18px; transition: transform var(--transition); } .btn:hover .btn-arrow { transform: translateX(4px); } /* ─── HERO SCROLL ─── */ .hero-scroll { position: absolute; bottom: 40px; right: 60px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; } .hero-scroll span { font-family: 'Roboto Condensed', sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.6); writing-mode: vertical-rl; } .scroll-line { width: 1px; height: 60px; background: linear-gradient(var(--gold), transparent); animation: scrollLine 1.5s ease infinite; } @keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.1% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ─── SECTION LAYOUTS ─── */ .section { padding: 100px 60px; } .section-sm { padding: 60px; } .section-header { margin-bottom: 60px; } .section-eyebrow { font-family: 'Roboto Condensed', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } .section-title { font-size: clamp(32px, 4vw, 56px); font-weight: 300; letter-spacing: -0.5px; line-height: 1.1; color: var(--text); } .section-line { width: 48px; height: 1px; background: var(--gold); margin-top: 24px; } .section-subtitle { margin-top: 20px; font-size: 16px; color: var(--gray2); max-width: 560px; line-height: 1.8; } /* ─── STONE GRID ─── */ .stones-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .stone-card { position: relative; overflow: hidden; aspect-ratio: 3/4; cursor: pointer; background: var(--bg3); } .stone-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94); } .stone-card:hover .stone-card-img { transform: scale(1.08); } .stone-card-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 40%, rgba(0,0,0,0.85) 100% ); transition: opacity var(--transition); } .stone-card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 30px 28px; color: #fff; transform: translateY(8px); transition: transform var(--transition); } .stone-card:hover .stone-card-content { transform: translateY(0); } .stone-card-name { font-size: 22px; font-weight: 300; letter-spacing: 1px; margin-bottom: 4px; color: #fff; } .stone-card-type { font-family: 'Roboto Condensed', sans-serif; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); } .stone-card-cta { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-family: 'Roboto Condensed', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.7); opacity: 0; transition: opacity var(--transition); } .stone-card:hover .stone-card-cta { opacity: 1; } .stone-cta-arrow { transition: transform var(--transition); } .stone-card:hover .stone-cta-arrow { transform: translateX(4px); } /* ─── STONE DETAIL ─── */ .stone-hero { height: 75vh; position: relative; overflow: hidden; } .stone-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .stone-hero-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 100% ); } .stone-hero-content { position: absolute; bottom: 0; left: 0; padding: 0 60px 60px; z-index: 2; color: #fff; } .stone-name-en { font-size: clamp(40px, 5vw, 80px); font-weight: 300; letter-spacing: -1px; line-height: 1; color: #fff; } .stone-name-fa { font-family: var(--font-fa); font-size: 20px; color: var(--gold); margin-top: 8px; font-weight: 400; } /* ─── BACK LINK ─── */ .back-link { display: inline-flex; align-items: center; gap: 8px; font-family: 'Roboto Condensed', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray2); padding: 20px 60px; transition: color var(--transition); } .back-link:hover { color: var(--gold); } /* ─── TABS ─── */ .tabs-container { padding: 0 60px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0; background: var(--bg); } .tab-btn { background: none; border: none; padding: 24px 32px; font-family: 'Roboto Condensed', sans-serif; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gray3); position: relative; transition: color var(--transition); } .tab-btn::after { content: ''; position: absolute; bottom: -1px; left: 32px; right: 32px; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform var(--transition); } .tab-btn.active { color: var(--text); } .tab-btn.active::after { transform: scaleX(1); } .tab-btn:hover { color: var(--gray1); } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ─── IMAGE GALLERY ─── */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px; } .gallery-item { position: relative; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; background: var(--bg3); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .gallery-item:hover img { transform: scale(1.06); } .gallery-item-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; transition: background var(--transition); } .gallery-item:hover .gallery-item-overlay { background: rgba(0,0,0,0.28); } .gallery-zoom-icon { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.8); transition: opacity var(--transition), transform var(--transition); } .gallery-item:hover .gallery-zoom-icon { opacity: 1; transform: scale(1); } /* ─── LIGHTBOX ─── */ #lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.94); z-index: 9000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } #lightbox.open { opacity: 1; pointer-events: all; } .lightbox-inner { position: relative; max-width: 90vw; max-height: 90vh; } .lightbox-inner img { max-width: 90vw; max-height: 85vh; object-fit: contain; } .lightbox-close { position: fixed; top: 24px; right: 28px; width: 36px; height: 36px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; z-index: 9001; } .lightbox-close::before, .lightbox-close::after { content: ''; display: block; width: 100%; height: 1px; background: #fff; position: absolute; } .lightbox-close::before { transform: rotate(45deg); } .lightbox-close::after { transform: rotate(-45deg); } .lightbox-prev, .lightbox-next { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: none; border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); z-index: 9001; } .lightbox-prev { left: 28px; } .lightbox-next { right: 28px; } .lightbox-prev:hover, .lightbox-next:hover { border-color: var(--gold); color: var(--gold); } .lightbox-counter { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); font-family: 'Roboto Condensed', sans-serif; font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,0.5); } /* ─── SPECS TABLE ─── */ .stone-specs { background: var(--bg2); border: 1px solid var(--border); } .stone-specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); } .spec-item { padding: 24px 32px; border-bottom: 1px solid var(--border); } .spec-item:nth-last-child(-n+2) { border-bottom: none; } .spec-item:nth-child(odd) { border-right: 1px solid var(--border); } .spec-label { font-family: 'Roboto Condensed', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; } .spec-value { font-size: 16px; font-weight: 300; color: var(--text); } /* ─── MARQUEE ─── */ .marquee-strip { overflow: hidden; padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg2); } .marquee-track { display: flex; gap: 60px; animation: marqueeScroll 20s linear infinite; white-space: nowrap; width: max-content; } .marquee-item { font-family: 'Roboto Condensed', sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gray3); display: flex; align-items: center; gap: 20px; } .marquee-item::after { content: '—'; color: var(--gold); } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ─── ABOUT SECTION ─── */ .about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .about-image { position: relative; overflow: hidden; } .about-image img { width: 100%; height: 600px; object-fit: cover; } .about-image-badge { position: absolute; bottom: 40px; right: -20px; background: var(--white); border: 1px solid var(--border); padding: 24px 32px; text-align: center; box-shadow: var(--shadow); } .badge-number { font-size: 48px; font-weight: 300; color: var(--gold); line-height: 1; } .badge-text { font-family: 'Roboto Condensed', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray2); margin-top: 6px; } .about-text .section-title { margin-bottom: 24px; } .about-body { font-size: 16px; color: var(--gray2); line-height: 2; margin-bottom: 16px; } .about-values { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; } .value-item { border-left: 1px solid var(--gold); padding-left: 16px; } .value-title { font-family: 'Roboto Condensed', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; } .value-body { font-size: 14px; color: var(--gray2); line-height: 1.7; } /* ─── CONTACT ─── */ .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .contact-info-item { display: flex; gap: 20px; align-items: flex-start; padding: 28px 0; border-bottom: 1px solid var(--border); } .contact-info-item:first-child { border-top: 1px solid var(--border); } .contact-icon { width: 40px; height: 40px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; color: var(--gray2); } .contact-label { font-family: 'Roboto Condensed', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; } .contact-value { font-size: 16px; font-weight: 300; color: var(--gray1); } .contact-form { display: flex; flex-direction: column; gap: 0; } .form-field { border-bottom: 1px solid var(--border); transition: border-color var(--transition); } .form-field:first-child { border-top: 1px solid var(--border); } .form-field:focus-within { border-bottom-color: var(--gold); } .form-field input, .form-field textarea, .form-field select { width: 100%; background: none; border: none; outline: none; color: var(--text); font-family: var(--font-en); font-size: 15px; font-weight: 300; padding: 20px 0; resize: none; } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--gray3); font-family: 'Roboto Condensed', sans-serif; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; } .form-field textarea { min-height: 120px; } .form-submit { margin-top: 32px; display: flex; justify-content: flex-start; } .form-submit-btn { background: none; border: 1px solid var(--gold); color: var(--gold); font-family: 'Roboto Condensed', sans-serif; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; padding: 16px 48px; transition: var(--transition); display: flex; align-items: center; gap: 12px; } .form-submit-btn:hover { background: var(--gold); color: var(--white); } .form-msg { display: none; padding: 16px; font-family: 'Roboto Condensed', sans-serif; font-size: 11px; letter-spacing: 1px; margin-top: 16px; } .form-msg.success { color: #4a9e72; border: 1px solid rgba(74,158,114,0.3); } .form-msg.error { color: #c0554a; border: 1px solid rgba(192,85,74,0.3); } /* ─── FOOTER ─── */ #peno-footer { background: var(--bg2); border-top: 1px solid var(--border); padding: 80px 60px 40px; } .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px; } .footer-brand img { height: 36px; margin-bottom: 20px; } .footer-tagline { font-size: 14px; color: var(--gray2); line-height: 1.8; max-width: 240px; } .footer-col-title { font-family: 'Roboto Condensed', sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; } .footer-links li a { font-size: 13px; color: var(--gray2); transition: color var(--transition); letter-spacing: 0.5px; } .footer-links li a:hover { color: var(--text); } .footer-social { display: flex; gap: 14px; margin-top: 20px; } .social-btn { width: 36px; height: 36px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: var(--transition); color: var(--gray2); } .social-btn:hover { border-color: var(--gold); color: var(--gold); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 32px; display: flex; justify-content: space-between; align-items: center; } .footer-copy { font-family: 'Roboto Condensed', sans-serif; font-size: 10px; letter-spacing: 1px; color: var(--gray3); } .footer-legal { display: flex; gap: 24px; } .footer-legal a { font-family: 'Roboto Condensed', sans-serif; font-size: 10px; letter-spacing: 1px; color: var(--gray3); transition: color var(--transition); } .footer-legal a:hover { color: var(--gray2); } /* ─── PAGE HEADER ─── */ .page-hero { height: 50vh; min-height: 400px; position: relative; display: flex; align-items: flex-end; overflow: hidden; background: var(--bg3); } .page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.35; } .page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, var(--bg) 100%); } .page-hero-content { position: relative; z-index: 2; padding: 0 60px 60px; } /* ─── UTILITY ─── */ .container { max-width: 1440px; margin: 0 auto; } .divider { height: 1px; background: var(--border); margin: 0 60px; } .text-gold { color: var(--gold); } .text-gray { color: var(--gray2); } .mt-auto { margin-top: auto; } /* ─── RTL overrides ─── */ body.lang-fa .header-nav { direction: rtl; } body.lang-fa .hero-content { direction: rtl; text-align: right; } body.lang-fa .stone-hero-content { direction: rtl; text-align: right; } body.lang-fa .section-header { direction: rtl; text-align: right; } body.lang-fa .about-split { direction: rtl; } body.lang-fa .contact-layout { direction: rtl; } body.lang-fa .stone-card-content { text-align: right; } body.lang-fa .footer-top { direction: rtl; } body.lang-fa .footer-bottom { direction: rtl; } body.lang-fa .tabs-container { direction: rtl; } body.lang-fa .mobile-menu-links a { font-family: var(--font-fa); } body.lang-fa .header-nav a { font-family: var(--font-fa); letter-spacing: 0; } /* ─── RESPONSIVE ─── */ @media (max-width: 1200px) { .stones-grid { grid-template-columns: repeat(2, 1fr); } .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 1024px) { :root { --header-h: 64px; } .header-nav { display: none; } .hamburger { display: flex; } .section { padding: 70px 28px; } .hero-content { padding: 0 28px 60px; } .hero-scroll { right: 28px; } .tabs-container { padding: 0 28px; } .stone-hero-content { padding: 0 28px 40px; } .page-hero-content { padding: 0 28px 40px; } .about-split { grid-template-columns: 1fr; gap: 48px; } .about-image img { height: 400px; } .contact-layout { grid-template-columns: 1fr; gap: 48px; } .divider { margin: 0 28px; } #peno-footer { padding: 60px 28px 32px; } .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 768px) { .stones-grid { grid-template-columns: 1fr; } .hero-title { letter-spacing: 0; } .gallery-grid { grid-template-columns: 1fr 1fr; } .stone-specs-grid { grid-template-columns: 1fr; } .spec-item:nth-child(odd) { border-right: none; } .about-values { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; gap: 32px; } .footer-bottom { flex-direction: column; gap: 16px; text-align: center; } .footer-legal { flex-wrap: wrap; justify-content: center; gap: 16px; } .tabs-container { gap: 0; overflow-x: auto; } .tab-btn { padding: 20px 20px; font-size: 10px; } } @media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } .hero-content { padding: 0 20px 50px; } .section { padding: 50px 20px; } } /* ─── PAGE TRANSITIONS ─── */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } .fade-in-delay-1 { transition-delay: 0.1s; } .fade-in-delay-2 { transition-delay: 0.2s; } .fade-in-delay-3 { transition-delay: 0.3s; } /* ─── WHATSAPP FLOAT ─── */ .whatsapp-float { position: fixed; bottom: 32px; right: 32px; width: 52px; height: 52px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 800; box-shadow: 0 4px 20px rgba(37,211,102,0.3); transition: transform var(--transition), box-shadow var(--transition); } .whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,0.45); } .whatsapp-float svg { width: 26px; height: 26px; fill: #fff; } /* ─── INSTAGRAM FLOAT ─── */ .instagram-float { position: fixed; bottom: 96px; right: 32px; width: 52px; height: 52px; background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 800; box-shadow: 0 4px 20px rgba(188,24,136,0.3); transition: transform var(--transition), box-shadow var(--transition); } .instagram-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(188,24,136,0.45); } .instagram-float svg { width: 24px; height: 24px; } /* ─── LOADING ─── */ body.loading::before { content: ''; position: fixed; inset: 0; background: var(--bg); z-index: 9999; transition: opacity 0.5s ease; } /* ─── PRODUCTS PAGE ─── */ /* Intro bar */ .prod-intro-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding: 52px 60px 44px; border-bottom: 1px solid var(--border); } .prod-intro-eyebrow { font-family: 'Roboto Condensed', sans-serif; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .prod-intro-title { font-family: var(--font-en); font-size: clamp(32px, 4vw, 56px); font-weight: 300; color: var(--text); letter-spacing: 2px; line-height: 1; } .prod-intro-right { max-width: 380px; flex-shrink: 0; } .prod-intro-sub { font-size: 13px; color: var(--gray2); line-height: 1.8; font-style: italic; } /* ─── CATEGORY TILES GRID ─── */ .cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--bg3); } .cat-tile { position: relative; height: 48vh; min-height: 280px; overflow: hidden; cursor: pointer; background: #222226; outline: none; -webkit-tap-highlight-color: transparent; } .cat-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s ease; filter: saturate(0.85) brightness(0.92); } .cat-tile:hover .cat-tile-img { transform: scale(1.07); filter: saturate(1.1) brightness(0.88); } .cat-tile-overlay { position: absolute; inset: 0; background: linear-gradient( 160deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.22) 40%, rgba(0,0,0,0.68) 100% ); transition: background 0.5s ease; z-index: 1; } .cat-tile:hover .cat-tile-overlay, .cat-tile.active .cat-tile-overlay { background: linear-gradient( 160deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.78) 100% ); } /* Coming-soon tile: dark stone */ .cat-tile-soon { cursor: pointer; } .cat-tile-soon .cat-tile-overlay { background: rgba(0,0,0,0.18); } .cat-tile-soon:hover .cat-tile-overlay, .cat-tile-soon.active .cat-tile-overlay { background: rgba(0,0,0,0.28); } /* Content block (bottom-left) */ .cat-tile-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 44px; z-index: 2; } .cat-tile-num { display: block; font-family: 'Roboto Condensed', sans-serif; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); opacity: 0.85; margin-bottom: 12px; transition: opacity var(--transition); } .cat-tile:hover .cat-tile-num, .cat-tile.active .cat-tile-num { opacity: 1; } .cat-tile-name { font-family: var(--font-en); font-size: clamp(30px, 3vw, 50px); font-weight: 300; color: #ffffff; letter-spacing: 5px; line-height: 1; margin-bottom: 14px; } .cat-tile-meta { font-family: 'Roboto Condensed', sans-serif; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.5); transition: color var(--transition); } .cat-tile:hover .cat-tile-meta, .cat-tile.active .cat-tile-meta { color: var(--gold); } .cat-tile-meta-soon { color: rgba(255,255,255,0.28) !important; } .cat-tile:hover .cat-tile-meta-soon, .cat-tile.active .cat-tile-meta-soon { color: rgba(255,255,255,0.42) !important; } /* Arrow icon (top-right) */ .cat-tile-arrow { position: absolute; top: 36px; right: 40px; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.8); font-size: 18px; z-index: 2; opacity: 0; transform: translate(6px, -6px); transition: opacity var(--transition), transform var(--transition), border-color var(--transition), color var(--transition); } .cat-tile:hover .cat-tile-arrow, .cat-tile.active .cat-tile-arrow { opacity: 1; transform: translate(0, 0); border-color: var(--gold); color: var(--gold); } /* "Upcoming" badge (top-left on soon tiles) */ .cat-tile-badge { position: absolute; top: 36px; left: 44px; font-family: 'Roboto Condensed', sans-serif; font-size: 8px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.38); border: 1px solid rgba(255,255,255,0.14); padding: 5px 12px; z-index: 2; } /* Active: gold accent bottom bar */ .cat-tile.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--gold); z-index: 3; } /* ─── STONE RESULTS SECTION ─── */ .prod-results { background: var(--bg); border-top: 1px solid var(--border); } .prod-panel { display: none; } .prod-panel.active { display: block; } /* Panel header */ .prod-panel-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 64px 60px 44px; border-bottom: 1px solid var(--border); } .prod-panel-eyebrow { display: block; font-family: 'Roboto Condensed', sans-serif; font-size: 9px; letter-spacing: 3.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .prod-panel-title { font-family: var(--font-en); font-size: clamp(26px, 3.5vw, 46px); font-weight: 300; color: var(--text); letter-spacing: 1.5px; line-height: 1.1; } .prod-panel-count-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; padding-top: 4px; } .prod-panel-count { font-family: var(--font-en); font-size: 56px; font-weight: 300; color: var(--gold); line-height: 1; letter-spacing: -1px; } .prod-panel-count-label { font-family: 'Roboto Condensed', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray3); } /* Stone grid inside panel */ .prod-grid { padding: 52px 60px 80px; } /* Coming-soon panel */ .prod-soon { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 120px 60px; } .prod-soon-num { font-family: 'Roboto Condensed', sans-serif; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 28px; } .prod-soon-title { font-family: var(--font-en); font-size: clamp(44px, 6vw, 80px); font-weight: 300; color: var(--text); letter-spacing: 6px; margin-bottom: 24px; line-height: 1; } .prod-soon-sub { font-size: 14px; color: var(--gray2); max-width: 420px; line-height: 1.9; font-style: italic; } /* Onyx stone detail — gallery only */ .onyx-gallery { padding: 60px; } .onyx-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 3px; } /* ─── RESPONSIVE ─── */ @media (max-width: 1024px) { .prod-intro-bar { padding: 40px 28px 36px; flex-wrap: wrap; } .prod-intro-right { max-width: 100%; } .cat-tile { height: 44vh; min-height: 240px; } .cat-tile-content { padding: 28px 28px; } .cat-tile-name { font-size: clamp(24px, 3.5vw, 40px); } .cat-tile-arrow { display: none; } .prod-panel-hd { padding: 44px 28px 32px; } .prod-grid { padding: 36px 28px 60px; } .prod-soon { padding: 80px 28px; } .onyx-gallery { padding: 40px 28px; } } @media (max-width: 600px) { .cat-grid { grid-template-columns: 1fr; } .cat-tile { height: 56vw; min-height: 200px; } .cat-tile-content { padding: 24px 20px; } .cat-tile-badge { top: 20px; left: 20px; } .prod-intro-bar { padding: 32px 20px; flex-direction: column; gap: 16px; } .prod-panel-hd { padding: 36px 20px 24px; flex-wrap: wrap; gap: 8px; } .prod-panel-count { font-size: 40px; } .prod-grid { padding: 24px 20px 48px; } .prod-soon { padding: 60px 20px; } .onyx-gallery { padding: 28px 20px; } .onyx-gallery-grid { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════════ v4 — MOTION & EDITORIAL UPGRADE (GSAP + Lenis) ════════════════════════════════════════════════════════════════ */ /* Editorial condensed headings — uppercase + tracking */ .hero-title, .section-title, .stone-name-en, .prod-intro-title, .prod-panel-title, .prod-soon-title, .page-header-title { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 300; } /* Persian text must never get Latin tracking (breaks joined script) */ [data-lang-fa], .stone-name-fa { letter-spacing: normal !important; } body.lang-fa .hero-title, body.lang-fa .section-title, body.lang-fa .prod-intro-title, body.lang-fa .prod-panel-title { letter-spacing: normal; } /* ─── LENIS SMOOTH SCROLL ─── */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* GSAP drives reveals — kill CSS transition to avoid double animation */ body.gsap-on .fade-in { transition: none; } body.gsap-on .marquee-track { animation: none; } /* ─── PRELOADER ─── */ #peno-loader { position: fixed; inset: 0; z-index: 99999; background: #161618; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; } #peno-loader .loader-logo { font-family: var(--font-en); font-size: clamp(36px, 5vw, 64px); font-weight: 300; letter-spacing: 0.5em; text-indent: 0.5em; color: #fff; text-transform: uppercase; line-height: 1; } #peno-loader .loader-logo sup { font-size: 0.32em; color: var(--gold); letter-spacing: 0; } #peno-loader .loader-line { width: min(260px, 56vw); height: 1px; background: rgba(255,255,255,0.14); position: relative; overflow: hidden; } #peno-loader .loader-line::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; animation: loaderFill 1s cubic-bezier(0.22,1,0.36,1) 0.15s forwards; } #peno-loader .loader-sub { font-family: var(--font-en); font-size: 10px; letter-spacing: 0.55em; text-indent: 0.55em; text-transform: uppercase; color: rgba(255,255,255,0.38); } @keyframes loaderFill { to { transform: scaleX(1); } } /* ─── HEADER: hide on scroll down ─── */ #peno-header { transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), background var(--transition), border-color var(--transition), box-shadow var(--transition); } #peno-header.nav-hidden { transform: translateY(-100%); } /* ─── CUSTOM CURSOR (desktop only) ─── */ .cursor-dot, .cursor-ring { display: none; } @media (pointer: fine) { body.gsap-on { cursor: auto; } .cursor-dot, .cursor-ring { display: block; position: fixed; top: 0; left: 0; z-index: 99990; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); } .cursor-dot { width: 5px; height: 5px; background: var(--gold); } .cursor-ring { width: 32px; height: 32px; border: 1px solid rgba(184,149,74,0.5); transition: width 0.35s cubic-bezier(0.22,1,0.36,1), height 0.35s cubic-bezier(0.22,1,0.36,1), border-color 0.3s, background 0.3s, opacity 0.3s; } body.cursor-hover .cursor-ring { width: 58px; height: 58px; background: rgba(184,149,74,0.07); border-color: var(--gold); } body.cursor-down .cursor-ring { width: 24px; height: 24px; } body.cursor-hidden .cursor-dot, body.cursor-hidden .cursor-ring { opacity: 0; } } /* ─── PAGE TRANSITION VEIL ─── */ #page-veil { position: fixed; inset: 0; z-index: 9000; background: #161618; transform: scaleY(0); transform-origin: top; pointer-events: none; display: flex; align-items: center; justify-content: center; } #page-veil .veil-mark { font-family: var(--font-en); font-size: 13px; letter-spacing: 0.6em; text-indent: 0.6em; text-transform: uppercase; color: var(--gold); opacity: 0; } /* ─── LINE MASK (title reveals) ─── */ .line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; } .line-mask > .line-inner { display: block; will-change: transform; } /* ─── HOVER POLISH ─── */ .stone-card-img, .cat-tile-img { will-change: transform; } .gallery-item img { transition: transform 1.1s cubic-bezier(0.22,1,0.36,1), opacity 0.5s; } .gallery-item:hover img { transform: scale(1.05); } .btn { position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0; transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.3s; z-index: -1; } /* ─── MOBILE HERO VIDEO — full frame, no crop ─── */ @media (max-width: 768px) { .hero { height: auto; min-height: 0; display: block; background: #161618; padding-top: var(--header-h); } .hero-video { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; /* matches hero.mp4 1920×1080 exactly — zero crop */ object-fit: cover; display: block; } .hero-overlay { display: none; } .hero-content { position: relative; padding: 36px 24px 56px; max-width: none; } .hero-scroll { display: none; } /* keep header readable over dark hero block */ #peno-header:not(.scrolled) { background: rgba(28,28,31,0.6); backdrop-filter: blur(8px); } } /* ════════════════════════════════════════════════════════════════ v6 — DARK LUXURY THEME OVERRIDES Foundation palette flipped in :root. These rules fix the few components that assumed a light background. ════════════════════════════════════════════════════════════════ */ /* Depth: subtle warm gold glow at the top, fixed behind everything */ body { background-color: var(--bg); background-image: radial-gradient(130% 90% at 50% -10%, rgba(201,164,92,0.045), transparent 55%); background-attachment: fixed; } ::selection { background: var(--gold); color: #18181a; } ::-moz-selection { background: var(--gold); color: #18181a; } /* Header — solid dark glass when scrolled (inner pages + homepage on scroll) */ #peno-header.scrolled { background: rgba(24,24,26,0.82); border-bottom-color: var(--border); box-shadow: 0 10px 40px rgba(0,0,0,0.45); } #peno-header.scrolled .header-nav a { color: var(--text); } #peno-header.scrolled .hamburger span { background: var(--text); } /* Language dropdown popup — dark glass instead of white */ .lang-options { background: rgba(28,28,31,0.97); border-color: var(--border); box-shadow: var(--shadow); backdrop-filter: blur(12px); } .lang-opt { color: var(--gray2); } .lang-opt:hover { background: var(--bg3); color: var(--text); } /* Outline button hover — dark text on the light fill */ .btn:hover { background: var(--text); color: var(--bg); } /* "1988" badge — dark glass plaque with gold accent */ .about-image-badge { background: rgba(24,24,26,0.66); border-color: var(--border); backdrop-filter: blur(10px); } /* Cards / panels get a hairline lift on the dark canvas */ .stone-specs, .gallery-item, .stone-card { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); } /* Marquee a touch brighter so it reads on black */ .marquee-item { color: var(--gray2); } /* Form fields: visible hairlines + comfortable input color on black */ .form-field input, .form-field textarea, .form-field select { color: var(--text); } .form-field select option { background: #1f1f22; color: var(--text); } /* ════════════════════════════════════════════════════════════════ v7 — PENO® hero wordmark (Roboto Light) + HOME interactive "Natural Stone" hover-reveal category grid ════════════════════════════════════════════════════════════════ */ /* Hero wordmark in Roboto Light */ .hero-title { font-family: 'Roboto', 'Helvetica Neue', sans-serif; font-weight: 300; letter-spacing: 0.03em; } /* ─── HOME: NATURAL STONE INTERACTIVE GRID ─── */ .ns-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 56px -60px 0; /* full-bleed within the 60px-padded section */ border-top: 1px solid rgba(255,255,255,0.08); } .ns-cell { position: relative; min-height: 46vh; display: flex; align-items: flex-end; padding: 46px 52px; overflow: hidden; background: #161618; border-right: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); isolation: isolate; } .ns-cell:nth-child(2n) { border-right: none; } /* Stone image — hidden, revealed on hover */ .ns-cell-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.12); transition: opacity 0.8s var(--ease-out), transform 1.5s var(--ease-out); z-index: 1; } .ns-cell-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,0.30) 0%, rgba(10,10,12,0.80) 100%); } .ns-cell:hover .ns-cell-img { opacity: 1; transform: scale(1); } /* Ghost first-letter watermark (sits behind the revealed image) */ .ns-ghost { position: absolute; top: 50%; right: 3%; transform: translateY(-50%); font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: clamp(150px, 30vh, 360px); line-height: 0.8; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.07); pointer-events: none; z-index: 0; transition: -webkit-text-stroke 0.6s var(--ease-out); } .ns-cell-inner { position: relative; z-index: 2; } .ns-num { display: block; font-family: 'Roboto Condensed', sans-serif; font-size: 11px; letter-spacing: 4px; color: var(--gold); opacity: 0.85; margin-bottom: 16px; } .ns-name { display: block; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: clamp(28px, 3.2vw, 50px); letter-spacing: 6px; text-transform: uppercase; color: #fff; line-height: 1; } .ns-meta { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-family: 'Roboto Condensed', sans-serif; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.42); transition: color var(--transition); } .ns-cell:hover .ns-meta { color: var(--gold); } .ns-arrow { transition: transform var(--transition); } .ns-cell:hover .ns-arrow { transform: translateX(6px); } /* Granite — coming soon: dimmed, no image reveal */ .ns-cell.ns-soon .ns-name { color: rgba(255,255,255,0.5); } @media (max-width: 1024px) { .ns-grid { margin-left: -28px; margin-right: -28px; } } @media (max-width: 768px) { .ns-grid { grid-template-columns: 1fr; } .ns-cell { min-height: 40vh; border-right: none; padding: 40px 32px; } .ns-cell-img { opacity: 0.4; transform: none; } /* show stone on touch (no hover) */ .ns-cell:hover .ns-cell-img { opacity: 1; } } @media (max-width: 480px) { .ns-grid { margin-left: -20px; margin-right: -20px; } } /* ════════════════════════════════════════════════════════════════ v8 — monochrome floats · geometric ghost letters · Products grid ════════════════════════════════════════════════════════════════ */ /* Floating social buttons → monochrome (black & white) */ .whatsapp-float, .instagram-float { background: rgba(28,28,31,0.72); border: 1px solid rgba(255,255,255,0.45); box-shadow: 0 6px 22px rgba(0,0,0,0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .whatsapp-float svg, .instagram-float svg, .whatsapp-float svg path, .instagram-float svg path { fill: #fff; } .whatsapp-float:hover, .instagram-float:hover { background: #fff; border-color: #fff; box-shadow: 0 8px 30px rgba(0,0,0,0.55); } .whatsapp-float:hover svg path, .instagram-float:hover svg path { fill: #18181a; } /* Ghost watermark letters → thin geometric (Jost), minimal & modern */ .ns-ghost { font-family: 'Jost', 'Century Gothic', sans-serif; font-weight: 300; -webkit-text-stroke: 1px rgba(255,255,255,0.14); letter-spacing: 0; } .ns-cell:hover .ns-ghost { -webkit-text-stroke: 1px rgba(201,164,92,0.34); } /* Products grid sits flush (cancel homepage full-bleed margins) */ .ns-grid--flush { margin-left: 0 !important; margin-right: 0 !important; } /* Active category cell (Products) — gold accent only; image still reveals on hover like the rest */ .ns-cell.active .ns-meta { color: var(--gold); } .ns-cell.active .ns-ghost { -webkit-text-stroke: 1px rgba(201,164,92,0.3); } .ns-cell.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); z-index: 3; } /* ─── PRODUCT STONE TILES (square · Roboto Regular · v9) ─── */ .stex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 30px; padding: 56px 60px 90px; } .stex { display: block; cursor: pointer; } .stex-img { aspect-ratio: 1 / 1; background-size: cover; background-position: center; background-color: #1f1f22; position: relative; transition: filter 0.6s var(--ease-out); } .stex-img::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); transition: box-shadow 0.45s var(--ease-out); } .stex:hover .stex-img { filter: brightness(1.07); } .stex:hover .stex-img::after { box-shadow: inset 0 0 0 1px rgba(201,164,92,0.55); } .stex-name { display: block; text-align: center; font-family: 'Roboto', 'Helvetica Neue', sans-serif; font-weight: 400; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.9); padding: 22px 8px 0; transition: color var(--transition); } .stex:hover .stex-name { color: var(--gold); } @media (max-width: 900px) { .stex-grid { grid-template-columns: repeat(2,1fr); padding: 40px 28px 70px; } } @media (max-width: 520px) { .stex-grid { grid-template-columns: 1fr; gap: 26px; } } /* ─── v11: SVG monogram ghosts + intro title font ─── */ svg.ns-ghost { height: clamp(150px, 30vh, 300px); width: auto; color: rgba(255,255,255,0.10); stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: color 0.6s var(--ease-out); } .ns-cell:hover svg.ns-ghost, .ns-cell.active svg.ns-ghost { color: rgba(201,164,92,0.36); } /* "Natural Stone" + category intro headings → Roboto Regular */ .prod-intro-title { font-family: 'Roboto', 'Helvetica Neue', sans-serif; font-weight: 400; letter-spacing: 0.01em; } /* ─── v12: refined SVG monogram ghosts + larger logos ─── */ svg.ns-ghost { height: clamp(200px, 48vh, 480px); width: auto; color: rgba(255,255,255,0.12); stroke: currentColor; fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; transition: color 0.6s var(--ease-out); } svg.ns-ghost * { vector-effect: non-scaling-stroke; } .ns-cell:hover svg.ns-ghost, .ns-cell.active svg.ns-ghost { color: rgba(201,164,92,0.42); } /* Larger brand logos */ .header-logo img { height: 150px; } .footer-brand img { height: 70px; margin-bottom: 24px; } @media (max-width: 1024px) { .header-logo img { height: 96px; } } /* ════════════════════════════════════════════════════════════════ v14 — BLOG / JOURNAL (luxury editorial) ════════════════════════════════════════════════════════════════ */ /* ── Listing intro ── */ .blog-intro { max-width: 1240px; margin: 0 auto; padding: calc(var(--header-h) + 86px) 60px 46px; } .blog-intro-title { font-family: 'Roboto','Helvetica Neue',sans-serif; font-weight: 300; font-size: clamp(42px, 6vw, 86px); line-height: 1.04; letter-spacing: 0.005em; color: var(--text); margin-top: 16px; } .blog-intro-sub { margin-top: 22px; font-family: 'Roboto',sans-serif; font-weight: 300; font-size: 17px; line-height: 1.85; color: var(--gray2); max-width: 560px; } .blog-divider-line { max-width:1240px; margin:0 auto; height:1px; background:var(--border); } /* ── Featured card ── */ .blog-featured-wrap { max-width: 1240px; margin: 0 auto; padding: 46px 60px 70px; } .blog-featured { display: grid; grid-template-columns: 1.12fr 1fr; align-items: stretch; background: var(--bg2); border: 1px solid var(--border); overflow: hidden; transition: border-color .5s var(--ease-out), transform .6s var(--ease-out), box-shadow .6s var(--ease-out); } .blog-featured:hover { border-color: rgba(201,164,92,0.55); transform: translateY(-4px); box-shadow: var(--shadow); } .blog-featured-img { overflow: hidden; min-height: 400px; } .blog-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease-out); } .blog-featured:hover .blog-featured-img img { transform: scale(1.06); } .blog-featured-content { padding: 58px 56px; display: flex; flex-direction: column; justify-content: center; } .blog-tag { font-family: 'Roboto Condensed',sans-serif; font-size: 10px; letter-spacing: 3.5px; text-transform: uppercase; color: var(--gold); } .blog-featured-title { font-family: 'Roboto',sans-serif; font-weight: 300; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.2; color: var(--text); margin: 18px 0 18px; transition: color .4s; } .blog-featured:hover .blog-featured-title { color: #fff; } .blog-featured-excerpt { font-family: 'Roboto',sans-serif; font-weight: 300; font-size: 15.5px; line-height: 1.9; color: var(--gray2); } .blog-read { margin-top: 34px; font-family: 'Roboto Condensed',sans-serif; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text); display: inline-flex; align-items: center; gap: 11px; transition: color var(--transition); } .blog-featured:hover .blog-read { color: var(--gold); } .blog-read-arrow { transition: transform var(--transition); } .blog-featured:hover .blog-read-arrow { transform: translateX(7px); } /* ── Future posts grid (scalable) ── */ .blog-more { max-width: 1240px; margin: 0 auto; padding: 0 60px 110px; } .blog-more-label { font-family:'Roboto Condensed',sans-serif; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--gray3); padding-bottom:24px; border-bottom:1px solid var(--border); } .blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px 32px; margin-top: 44px; } .blog-card { display:block; } .blog-card-img { aspect-ratio: 4/3; background: var(--bg3); overflow:hidden; } .blog-card-img img { width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease-out); } .blog-card:hover .blog-card-img img { transform: scale(1.05); } .blog-card-title { margin-top:18px; font-family:'Roboto',sans-serif; font-weight:300; font-size:19px; line-height:1.35; color:var(--text); } .blog-card-soon { aspect-ratio:4/3; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:'Roboto Condensed',sans-serif; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--gray3); } /* ── ARTICLE ── */ .article-head { max-width: 840px; margin: 0 auto; padding: calc(var(--header-h) + 56px) 32px 8px; text-align: center; } .article-back { font-family:'Roboto Condensed',sans-serif; font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gray2); display:inline-flex; align-items:center; gap:9px; margin-bottom:36px; transition:color .3s; } .article-back:hover { color: var(--gold); } .article-eyebrow { font-family:'Roboto Condensed',sans-serif; font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); } .article-title { font-family:'Roboto',sans-serif; font-weight:300; font-size:clamp(34px,5vw,64px); line-height:1.12; letter-spacing:0.004em; color:var(--text); margin-top:18px; } .article-subtitle { margin:24px auto 0; max-width:640px; font-family:'Roboto',sans-serif; font-weight:300; font-size:18.5px; line-height:1.7; color:var(--gray1); } .article-meta { margin-top:28px; font-family:'Roboto Condensed',sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gray3); } .article-hero { max-width: 1240px; margin: 30px auto 0; padding: 0 32px; overflow:hidden; } .article-hero-inner { overflow:hidden; } .article-hero img { width: 100%; height: clamp(320px, 58vh, 660px); object-fit: cover; display:block; transition: transform 8s ease; } .article-hero.in img { transform: scale(1.04); } .article-body { max-width: 720px; margin: 0 auto; padding: 64px 32px 30px; } .article-body h2 { font-family:'Roboto',sans-serif; font-weight:400; font-size:clamp(27px,3.2vw,38px); line-height:1.24; letter-spacing:0.003em; color:var(--text); margin:8px 0 4px; } .article-body h3 { font-family:'Roboto Condensed',sans-serif; font-weight:400; font-size:clamp(16px,2vw,20px); letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); margin:40px 0 2px; } .article-body p { font-family:'Roboto',sans-serif; font-weight:300; font-size:17.5px; line-height:1.95; color:var(--gray1); margin-top:18px; } .article-body p.lead { font-size:20px; color:var(--text); font-weight:300; line-height:1.8; } .article-divider { height:1px; background:var(--border); margin:62px 0; } /* image + text split */ .article-split { max-width: 1140px; margin: 56px auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 0.82fr; gap: 60px; align-items: center; } .article-split-text h3 { margin-top: 0; } .article-split-text p { font-family:'Roboto',sans-serif; font-weight:300; font-size:17px; line-height:1.9; color:var(--gray1); margin-top:16px; } .article-figure { margin: 0; overflow: hidden; } .article-figure-frame { overflow:hidden; } .article-figure img { width: 100%; height: auto; display: block; transition: transform 1.4s var(--ease-out); } .article-figure:hover img { transform: scale(1.045); } .article-figure figcaption { margin-top: 15px; font-family:'Roboto Condensed',sans-serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gray3); text-align:center; } /* related placeholder */ .article-related { max-width: 1140px; margin: 40px auto 0; padding: 60px 32px 0; border-top: 1px solid var(--border); text-align:center; } .article-related .blog-more-label { border:none; padding:0; } .article-cta { max-width:1140px; margin:0 auto; padding: 70px 32px 100px; text-align:center; } /* responsive */ @media (max-width: 900px) { .blog-intro { padding: calc(var(--header-h) + 50px) 28px 36px; } .blog-featured-wrap { padding: 34px 28px 60px; } .blog-featured { grid-template-columns: 1fr; } .blog-featured-img { min-height: 0; aspect-ratio: 16/10; } .blog-featured-content { padding: 40px 30px; } .blog-more { padding: 0 28px 80px; } .blog-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .article-split { grid-template-columns: 1fr; gap: 30px; margin: 40px auto; } .article-body { padding: 48px 26px 24px; } } @media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } .article-title { font-size: clamp(30px,8vw,40px); } } /* ════ v15 — BLOG post 2 (portrait hero-split, reversed card, pull-quote) ════ */ /* Listing: stacked alternating featured cards */ .blog-featured + .blog-featured { margin-top: 42px; } .blog-featured--rev .blog-featured-img { order: 2; } .blog-featured--rev .blog-featured-content { order: 1; } .blog-featured--rev { grid-template-columns: 1fr 1.12fr; } /* Article hero-split (portrait beside title/intro) */ .article-hero-split { max-width: 1180px; margin: 0 auto; padding: calc(var(--header-h) + 60px) 40px 0; display: grid; grid-template-columns: 0.86fr 1fr; gap: 64px; align-items: center; } .article-hero-portrait { margin: 0; overflow: hidden; } .article-hero-portrait .article-figure-frame { overflow: hidden; border: 1px solid rgba(255,255,255,0.06); } .article-hero-portrait img { width: 100%; height: auto; display: block; filter: grayscale(1) contrast(1.03); transition: transform 1.5s var(--ease-out); } .article-hero-portrait:hover img { transform: scale(1.035); } .article-hero-portrait figcaption { margin-top: 14px; font-family:'Roboto Condensed',sans-serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gray3); } .article-hero-intro { text-align: left; } .article-hero-intro .article-title { margin-top: 16px; } .article-hero-intro .article-subtitle { margin: 22px 0 0; max-width: none; } .article-hero-intro .article-back { margin-bottom: 28px; } /* Pull-quote */ .article-quote { max-width: 900px; margin: 56px auto; padding: 0 40px; text-align: center; } .article-quote blockquote { font-family:'Roboto',sans-serif; font-weight:300; font-style:italic; font-size: clamp(22px, 3vw, 32px); line-height: 1.45; color: var(--text); margin: 0; position: relative; } .article-quote blockquote::before { content:''; display:block; width:40px; height:1px; background:var(--gold); margin:0 auto 28px; } @media (max-width: 900px) { .blog-featured--rev { grid-template-columns: 1fr; } .blog-featured-img, .blog-featured--rev .blog-featured-img { order: -1; } .article-hero-split { grid-template-columns: 1fr; gap: 30px; padding: calc(var(--header-h) + 40px) 26px 0; } .article-hero-intro .article-title { font-size: clamp(30px,7vw,42px); } .article-quote { padding: 0 26px; margin: 40px auto; } } /* ════ v16 — BLOG bilingual: Persian font + RTL ════ */ body.lang-fa .article-body, body.lang-fa .article-body p, body.lang-fa .article-body h2, body.lang-fa .article-body h3, body.lang-fa .article-hero-intro, body.lang-fa .article-title, body.lang-fa .article-subtitle, body.lang-fa .article-eyebrow, body.lang-fa .article-meta, body.lang-fa .article-back, body.lang-fa .blog-intro-title, body.lang-fa .blog-intro-sub, body.lang-fa .blog-featured-content, body.lang-fa .blog-featured-title, body.lang-fa .blog-featured-excerpt, body.lang-fa .blog-tag, body.lang-fa .article-quote blockquote, body.lang-fa .article-figure figcaption, body.lang-fa .blog-more-label { font-family: var(--font-fa); } /* RTL alignment for long-form blog text */ body.lang-fa .article-body, body.lang-fa .article-hero-intro, body.lang-fa .blog-intro, body.lang-fa .blog-featured-content { text-align: right; } body.lang-fa .article-head, body.lang-fa .article-quote { text-align: center; } body.lang-fa .article-body h3 { letter-spacing: 0; } /* Persian reads better with a touch more line-height */ body.lang-fa .article-body p, body.lang-fa .blog-featured-excerpt { line-height: 2.05; } /* ════════════════════════════════════════════════════════════════ v17 — BLOG typographic polish: calmer, airier, consistent ════════════════════════════════════════════════════════════════ */ /* Comfortable reading column + generous rhythm */ .article-body { max-width: 700px; padding: 70px 32px 36px; } .article-body > *:first-child { margin-top: 0; } .article-body p { font-size: 18px; line-height: 2; color: #ccccd2; margin-top: 26px; letter-spacing: 0.002em; } /* Lead paragraph + elegant drop cap (Latin only) */ .article-body p.lead { font-size: 21px; line-height: 1.85; font-weight: 300; color: var(--text); } body:not(.lang-fa) .article-body p.lead::first-letter { font-weight: 300; font-size: 4.3em; line-height: 0.78; float: left; margin: 9px 16px 0 0; color: var(--gold); } /* Headings — more space above, refined scale */ .article-body h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 400; line-height: 1.22; letter-spacing: 0.004em; color: #ffffff; margin: 70px 0 8px; } .article-body h3 { font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin: 46px 0 0; } .article-body h3 + p { margin-top: 13px; } /* Refined centered divider — a thin stone line with a small gold mark */ .article-divider { height: 1px; margin: 74px 0; border: none; position: relative; background: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent); } .article-divider::after { content: '◆'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--gold); font-size: 7px; background: var(--bg); padding: 0 14px; } /* Consistent head / subtitle / meta */ .article-subtitle { font-size: 18px; line-height: 1.72; color: var(--gray2); } .article-meta { margin-top: 30px; } .article-head { padding-bottom: 4px; } /* Hero image — consistent, slightly calmer height */ .article-hero { margin-top: 38px; } .article-hero img { height: clamp(300px, 52vh, 600px); } /* Pull-quote — refined size */ .article-quote { margin: 66px auto; } .article-quote blockquote { font-size: clamp(21px, 2.6vw, 29px); line-height: 1.5; } /* Split text rhythm to match body */ .article-split-text p { font-size: 17px; line-height: 1.95; margin-top: 16px; color: #ccccd2; } .article-figure figcaption, .article-hero-portrait figcaption { margin-top: 16px; } .article-cta { padding-top: 16px; } /* Persian: a touch more leading, no drop cap */ body.lang-fa .article-body p { font-size: 17.5px; line-height: 2.15; } body.lang-fa .article-body p.lead { font-size: 20px; line-height: 1.95; } @media (max-width: 900px) { .article-body { padding: 48px 26px 26px; } .article-body p { font-size: 17px; } .article-body h2 { margin-top: 52px; } .article-divider { margin: 56px 0; } body:not(.lang-fa) .article-body p.lead::first-letter { font-size: 3.6em; } } /* ════ v18 — BLOG lists + full-width media ════ */ .article-body ul { list-style: none; margin: 22px 0 0; padding: 0; } .article-body ul li { position: relative; padding-left: 28px; margin-top: 13px; font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 17.5px; line-height: 1.8; color: #ccccd2; } .article-body ul li::before { content: ''; position: absolute; left: 3px; top: 12px; width: 6px; height: 6px; border: 1px solid var(--gold); transform: rotate(45deg); } .article-body ul li strong { color: var(--text); font-weight: 500; } body.lang-fa .article-body ul li { padding-left: 0; padding-right: 28px; font-family: var(--font-fa); line-height: 2.05; } body.lang-fa .article-body ul li::before { left: auto; right: 3px; } /* Full-width in-article media */ .article-media { max-width: 1180px; margin: 60px auto; padding: 0 32px; } .article-media .article-figure-frame { overflow: hidden; } .article-media img { width: 100%; height: clamp(280px, 50vh, 560px); object-fit: cover; display: block; transition: transform 1.5s var(--ease-out); } .article-media:hover img { transform: scale(1.03); } .article-media figcaption { margin-top: 15px; text-align: center; font-family:'Roboto Condensed',sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray3); } body.lang-fa .article-media figcaption { font-family: var(--font-fa); } @media (max-width: 900px) { .article-media { margin: 44px auto; padding: 0 26px; } } /* ════════════════════════════════════════════════════════════════ v19 — LUXURY REFINEMENT PASS (precision polish, same palette) ════════════════════════════════════════════════════════════════ */ /* — Quality floor: crisp keyboard focus everywhere — */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; border-radius: 1px; } /* — Header: logo eases to a refined size on scroll; deeper glass — */ .header-logo img { transition: height 0.55s var(--ease-out); } #peno-header.scrolled .header-logo img { height: 112px; } @media (max-width: 1024px) { #peno-header.scrolled .header-logo img { height: 78px; } } #peno-header.scrolled { background: rgba(20,20,22,0.70); -webkit-backdrop-filter: saturate(150%) blur(18px); backdrop-filter: saturate(150%) blur(18px); box-shadow: 0 1px 0 rgba(201,164,92,0.10), 0 14px 40px rgba(0,0,0,0.40); } .header-nav a::after { height: 1px; bottom: -4px; } /* — Signature: a short gold rule before left-aligned section eyebrows — */ .section-header .section-eyebrow, .about-text .section-eyebrow, .prod-intro-left .prod-intro-eyebrow, .blog-intro .section-eyebrow, .article-hero-intro .article-eyebrow { display: inline-flex; align-items: center; } .section-header .section-eyebrow::before, .about-text .section-eyebrow::before, .prod-intro-left .prod-intro-eyebrow::before, .blog-intro .section-eyebrow::before, .article-hero-intro .article-eyebrow::before { content: ''; width: 26px; height: 1px; margin-right: 14px; background: var(--gold); opacity: 0.85; flex-shrink: 0; } body.lang-fa .section-header .section-eyebrow::before, body.lang-fa .about-text .section-eyebrow::before, body.lang-fa .prod-intro-left .prod-intro-eyebrow::before, body.lang-fa .blog-intro .section-eyebrow::before, body.lang-fa .article-hero-intro .article-eyebrow::before { margin-right: 0; margin-left: 14px; } /* — Buttons: more air, slower premium motion — */ .btn { padding: 15px 38px; letter-spacing: 2.8px; transition: color .5s var(--ease-out), background .5s var(--ease-out), border-color .5s var(--ease-out); } .btn .btn-arrow { transition: transform .5s var(--ease-out); } .btn:hover .btn-arrow { transform: translateX(7px); } /* — Cards: a quiet gold frame appears on hover — */ .stone-card { position: relative; } .stone-card::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(201,164,92,0); transition: box-shadow .5s var(--ease-out); } .stone-card:hover::after { box-shadow: inset 0 0 0 1px rgba(201,164,92,0.45); } .stone-card-img { transition: transform 1.25s var(--ease-out); } /* — Section titles: a hair tighter for editorial presence — */ .section-title, .prod-intro-title, .blog-intro-title { letter-spacing: -0.012em; } /* — Dividers & hairlines: a touch warmer — */ .divider, .section-line { opacity: 0.9; } /* — Lang button: refined pill — */ .lang-current-btn { padding: 6px 15px; } /* ════════════════════════════════════════════════════════════════ v20 — Phone numbers always render Latin LTR (never RTL-flipped), and left-aligned even when the site is in Persian / RTL. ════════════════════════════════════════════════════════════════ */ a[href^="tel:"], a.contact-value[href^="https://wa.me/"] { direction: ltr; unicode-bidi: isolate; } body.lang-fa a[href^="tel:"] { display: block; text-align: left; } body.lang-fa a.contact-value[href^="https://wa.me/"] { text-align: left; } /* ════════════════════════════════════════════════════════════════ v21 — LUXE PASS: refined display type, chic micro-interactions, motion-safety for the new clip-reveal grids & hero wordmark. ════════════════════════════════════════════════════════════════ */ /* Safety: no-JS / reduced-motion must never leave revealed items hidden */ @media (prefers-reduced-motion: reduce) { .ns-cell, .stex, .hero-title { opacity: 1 !important; clip-path: none !important; transform: none !important; } } /* — More confident, luxurious display sizing — */ .section-title { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.06; } .prod-intro-title { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.0; } /* — Stone-texture tiles: chic lift + refined frame & label on hover — */ .stex { transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); } .stex:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(0,0,0,0.34); } .stex:hover .stex-img { filter: brightness(1.06) contrast(1.03); } .stex-name { transition: color var(--transition), letter-spacing 0.5s var(--ease-out); } .stex:hover .stex-name { letter-spacing: 3.7px; } /* — Category cells: arrow glides on hover — */ .ns-cell .ns-arrow { transition: transform 0.5s var(--ease-out); display: inline-block; } .ns-cell:hover .ns-arrow { transform: translateX(8px); } body.lang-fa .ns-cell:hover .ns-arrow { transform: translateX(-8px); } /* ════════════════════════════════════════════════════════════════ v22 — Blog image layouts: 2-up duo + centered portrait (responsive) ════════════════════════════════════════════════════════════════ */ .article-duo, .article-portrait { max-width: 1180px; margin: 60px auto; padding: 0 32px; } .article-portrait { max-width: 620px; } .article-duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .article-duo .article-figure-frame, .article-portrait .article-figure-frame { overflow: hidden; } .article-duo .article-figure-frame { aspect-ratio: 4 / 5; } .article-portrait .article-figure-frame { aspect-ratio: 3 / 4; } .article-duo img, .article-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.5s var(--ease-out); } .article-duo:hover img, .article-portrait:hover img { transform: scale(1.03); } .article-duo figcaption, .article-portrait figcaption { margin-top: 15px; text-align: center; font-family:'Roboto Condensed',sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray3); } body.lang-fa .article-duo figcaption, body.lang-fa .article-portrait figcaption { font-family: var(--font-fa); } @media (max-width: 760px) { .article-duo-grid { grid-template-columns: 1fr; gap: 14px; } .article-duo, .article-portrait { margin: 44px auto; padding: 0 26px; } }