/* ========================================================= Najian Tejarat Nivan — site styles Layers on top of Bootstrap 5.3 (LTR / RTL builds). Structure: 1 tokens · 2 fonts · 3 base · 4 header · 5 hero 6 sections · 7 under construction · 8 products 9 about · 10 contact · 11 footer · 12 utilities Rule of thumb: use logical properties (inline-start/end) so RTL/LTR both work; use physical left/right ONLY for artwork overlays that must not mirror (hero text, construction card). ========================================================= */ /* 1 ─ Tokens ------------------------------------------------ */ :root { --navy: #142336; /* sampled from header.jpg / footer.jpg */ --navy-2: #1d3352; --cream: #fffcf5; /* sampled from header.jpg / footer.jpg */ --gold: #b8925a; --gold-deep: #86642f; /* gold for TEXT on cream (AA contrast) */ --gold-soft: #e3c98f; /* gold for text on navy */ --ink: #1b2533; --muted: #566274; --line: rgba(20, 35, 54, .14); --font-body: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Playfair Display Variable", "Playfair Display", Georgia, "Times New Roman", serif; --bs-body-font-family: var(--font-body); --bs-body-color: var(--ink); --bs-body-bg: var(--cream); --bs-link-color: var(--navy); --bs-link-hover-color: var(--gold-deep); --radius: .5rem; --header-h: 76px; } :root[lang="fa"] { --font-body: "Vazirmatn", "Vazir", Tahoma, system-ui, sans-serif; --font-display: "Vazirmatn", "Vazir", Tahoma, system-ui, sans-serif; } /* 2 ─ Fonts (self-hosted) ----------------------------------- */ @font-face { font-family: "Vazirmatn"; src: url("../assets/fonts/Vazirmatn-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Inter Variable"; src: url("../assets/fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Inter Variable"; src: url("../assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter Variable"; src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Playfair Display Variable"; src: url("../assets/fonts/playfair-display-cyrillic-wght-normal.woff2") format("woff2-variations"); font-weight: 400 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Playfair Display Variable"; src: url("../assets/fonts/playfair-display-latin-ext-wght-normal.woff2") format("woff2-variations"); font-weight: 400 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Playfair Display Variable"; src: url("../assets/fonts/playfair-display-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 3 ─ Base -------------------------------------------------- */ html { scroll-padding-top: calc(var(--header-h) + 1rem); } html.i18n-pending body { visibility: hidden; } /* avoids a flash of untranslated text */ body { font-family: var(--font-body); background: var(--cream); line-height: 1.75; -webkit-font-smoothing: antialiased; } :root[lang="fa"] body { line-height: 1.95; } h1, h2, h3, h4, .display-font { font-family: var(--font-display); color: var(--navy); font-weight: 700; line-height: 1.25; letter-spacing: -.005em; } :root[lang="fa"] h1, :root[lang="fa"] h2, :root[lang="fa"] h3, :root[lang="fa"] h4 { line-height: 1.5; letter-spacing: 0; } p { max-width: 68ch; } a { text-underline-offset: .2em; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--gold-soft); color: var(--navy); } .skip-link { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 2000; background: var(--navy); color: var(--cream); padding: .6rem 1rem; border-radius: var(--radius); transition: top .15s; } .skip-link:focus { top: 1rem; color: var(--cream); } /* Buttons */ .btn-brand, .btn-outline-brand, .btn-light-brand { --bs-btn-padding-x: 1.6rem; --bs-btn-padding-y: .8rem; min-height: 48px; font-weight: 600; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; gap: .55rem; transition: background-color .2s, color .2s, border-color .2s; } .btn-brand { background: var(--navy); color: var(--gold-soft); border: 1px solid var(--navy); } .btn-brand:hover, .btn-brand:focus-visible { background: var(--navy-2); color: #fff; border-color: var(--navy-2); } .btn-outline-brand { background: transparent; color: var(--navy); border: 1px solid var(--gold); } .btn-outline-brand:hover { background: var(--gold); color: var(--navy); } .btn-light-brand { background: var(--gold-soft); color: var(--navy); border: 1px solid var(--gold-soft); } .btn-light-brand:hover { background: #fff; color: var(--navy); border-color: #fff; } /* Brand ornament: line — diamond — line (echoes the logo & footer artwork) */ .ornament { display: flex; align-items: center; gap: .6rem; color: var(--gold); margin-block: 1rem 1.5rem; } .ornament::before, .ornament::after { content: ""; height: 1px; width: 3.5rem; background: currentColor; } .ornament span { width: .55rem; height: .55rem; border: 1.5px solid currentColor; transform: rotate(45deg); } .ornament.on-navy { color: var(--gold-soft); } /* Diamond icon frame — the site's one recurring motif */ .diamond { position: relative; flex: 0 0 auto; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; color: var(--gold-deep); } .diamond::before { content: ""; position: absolute; inset: .35rem; border: 1.5px solid var(--gold); transform: rotate(45deg); background: var(--cream); } .diamond i { position: relative; font-size: 1.3rem; line-height: 1; } /* 4 ─ Header ------------------------------------------------ */ .site-header { background: var(--cream); border-bottom: 1px solid var(--gold); z-index: 1030; } .site-header .navbar { min-height: var(--header-h); padding-block: .4rem; } .navbar-brand { display: flex; align-items: center; gap: .8rem; margin: 0; padding: 0; } .brand-logo { height: 56px; width: auto; mix-blend-mode: multiply; /* JPG white → transparent on cream */ } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--navy); line-height: 1.2; } :root[lang="fa"] .brand-name { font-size: 1.15rem; } .navbar-toggler { border: 1px solid var(--gold); padding: .55rem .7rem; min-width: 48px; min-height: 48px; } .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(184,146,90,.45); } .navbar-nav { --bs-nav-link-color: var(--navy); --bs-nav-link-hover-color: var(--gold-deep); gap: .25rem; } .navbar-nav .nav-link { font-weight: 500; padding: .8rem .9rem; min-height: 48px; display: flex; align-items: center; position: relative; } .navbar-nav .nav-link.active { color: var(--navy); font-weight: 700; } @media (min-width: 992px) { .navbar-nav .nav-link.active::after { content: ""; position: absolute; inset-inline: .9rem; bottom: .35rem; height: 2px; background: var(--gold); } } @media (max-width: 991.98px) { .navbar-collapse { padding-block: .75rem 1rem; border-top: 1px solid var(--line); margin-top: .5rem; } .navbar-nav .nav-link.active { border-inline-start: 3px solid var(--gold); padding-inline-start: .75rem; } } .lang-toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; border: 1px solid var(--gold); color: var(--navy); border-radius: 999px; padding-inline: 1rem; font-weight: 500; background: transparent; } .lang-toggle:hover, .lang-toggle.show { background: var(--navy); color: var(--gold-soft); border-color: var(--navy); } @media (min-width: 992px) { .lang-switcher { margin-inline-start: 1rem; } } @media (max-width: 991.98px) { .lang-switcher { margin-top: .5rem; } } .dropdown-menu { border: 1px solid var(--gold); border-radius: var(--radius); --bs-dropdown-link-active-bg: var(--navy); --bs-dropdown-link-hover-bg: rgba(184,146,90,.15); } .dropdown-item { min-height: 44px; display: flex; align-items: center; justify-content: space-between; } .dropdown-item .lang-check { visibility: hidden; color: var(--gold-deep); } .dropdown-item.active .lang-check { visibility: visible; color: var(--gold-soft); } /* 5 ─ Hero (header.jpg) ------------------------------------- The artwork is laid out as: logo panel on the LEFT, empty cream area on the RIGHT. Text therefore sits on the right in every language (physical `right`) while its own alignment follows the reading direction. */ .hero { position: relative; background: var(--cream); border-bottom: 3px solid var(--gold); } .hero-bg { background: url("../assets/images/header.jpg") no-repeat left top / 100% auto; aspect-ratio: 2376 / 1096; } .hero--compact .hero-bg { aspect-ratio: 2376 / 860; } /* crops just below the logo panel's curve */ .hero-content { position: absolute; top: 0; bottom: 0; right: 4.5%; width: 44%; display: flex; flex-direction: column; justify-content: center; padding-block: 1.5rem; } .hero h1 { font-size: clamp(1.75rem, 2.9vw, 3.05rem); margin-bottom: 1.1rem; } .hero--compact h1 { font-size: clamp(1.9rem, 3.4vw, 3.4rem); margin-bottom: .6rem; } .hero-lead { font-size: clamp(1rem, 1.25vw, 1.15rem); color: var(--muted); margin-bottom: 1.6rem; } .hero--compact .hero-lead { margin-bottom: 0; } .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; } @media (max-width: 991.98px) { /* Stacked: artwork band on top, text below on cream */ .hero-bg, .hero--compact .hero-bg { aspect-ratio: auto; height: clamp(200px, 42vw, 340px); background-size: cover; } .hero-content { position: static; width: auto; padding: 2rem 1.25rem 2.5rem; max-width: 720px; margin-inline: auto; } .hero--compact .hero-content { padding-block: 1.75rem 2rem; } } @media (max-width: 575.98px) { /* Phones: zoom into the logo panel so the emblem stays legible */ .hero-bg, .hero--compact .hero-bg { height: 76vw; background-size: 250% auto; } } /* 6 ─ Sections --------------------------------------------- */ .section { padding-block: clamp(3rem, 7vw, 5.5rem); } .section--white { background: #fff; } .section--navy { background: var(--navy); color: #e8edf4; } .section-title { font-size: clamp(1.6rem, 2.6vw, 2.25rem); margin: 0; } /* Principles — ruled columns, not boxed cards */ .principles { display: grid; gap: 0; grid-template-columns: 1fr; } .principle { display: flex; gap: 1.1rem; align-items: flex-start; padding-block: 1.5rem; border-top: 1px solid var(--line); } .principle:first-child { border-top: 0; } .principle h3 { font-size: 1.2rem; margin-bottom: .35rem; } .principle p { margin: 0; color: var(--muted); } @media (min-width: 768px) { .principles { grid-template-columns: repeat(3, 1fr); } .principle { flex-direction: column; padding: .25rem 2rem; border-top: 0; border-inline-start: 1px solid var(--gold); } .principle:first-child { padding-inline-start: 2rem; } } /* 7 ─ Under construction ------------------------------------ */ .uc-frame { position: relative; border: 1px solid var(--gold); border-radius: 1rem; overflow: hidden; background: var(--navy); box-shadow: 0 24px 60px rgba(0,0,0,.35); } .uc-media, .uc-media img { display: block; width: 100%; height: auto; } .uc-card { padding: 1.75rem 1.5rem 2rem; color: #e8edf4; background: var(--navy); } .uc-badge { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .9rem; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold-soft); font-size: .9rem; font-weight: 600; margin-bottom: 1rem; } .uc-badge::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--gold-soft); animation: pulse 2.2s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(227,201,143,.7); } 70%, 100% { box-shadow: 0 0 0 .6rem rgba(227,201,143,0); } } .uc-card h2 { color: #fff; font-size: clamp(1.9rem, 3.2vw, 2.8rem); margin-bottom: .8rem; } .uc-card p { color: #d5dde8; margin-bottom: 1rem; } .uc-card .uc-note { color: var(--gold-soft); font-size: .95rem; margin-bottom: 1.4rem; } .uc-phone { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; text-decoration: none; } .uc-phone:hover { color: var(--gold-soft); } @media (min-width: 992px) { .uc-frame { min-height: 0; } .uc-card { position: absolute; right: 3%; top: 50%; transform: translateY(-50%); width: min(470px, 45%); border: 1px solid rgba(227,201,143,.55); border-radius: .85rem; padding: 2rem 2.1rem 2.2rem; background: rgba(20,35,54,.84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } } /* 8 ─ Products ---------------------------------------------- */ .product { height: 100%; background: #fff; border: 1px solid var(--line); border-radius: .75rem; padding: 1.6rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: .35rem; position: relative; overflow: hidden; } .product::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--swatch); } .granule { width: 3.4rem; height: 3.4rem; border-radius: 50%; margin-bottom: .8rem; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0 12%, transparent 30%), var(--swatch); box-shadow: inset -6px -8px 14px rgba(0,0,0,.18), 0 0 0 1px rgba(20,35,54,.12), 2.2rem .9rem 0 -1.1rem var(--swatch), -2rem 1.2rem 0 -1.3rem var(--swatch); } .product h3 { font-size: 1.25rem; margin: 0; } .product p { margin: 0; color: var(--muted); } .product--pe { --swatch: #dfe6ee; } .product--pp { --swatch: #f2b705; } .product--pvc { --swatch: #d42b25; } .product--pet { --swatch: #8fc6e8; } .product--ps { --swatch: #1a9b5a; } .product--mb { --swatch: #1f5fd0; } .notice { background: var(--navy); color: #e8edf4; border-radius: .75rem; padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; justify-content: space-between; border: 1px solid var(--gold); } .notice h2 { color: #fff; font-size: 1.4rem; margin-bottom: .25rem; } .notice p { margin: 0; color: #d5dde8; } /* 9 ─ About -------------------------------------------------- */ .about-mark { background: #fff; border: 1px solid var(--gold); border-radius: 1rem; padding: clamp(1.5rem, 4vw, 3rem); display: grid; place-items: center; position: relative; } .about-mark::after { content: ""; position: absolute; inset: .6rem; border: 1px solid var(--line); border-radius: .65rem; pointer-events: none; } .about-mark img { width: min(260px, 70%); height: auto; mix-blend-mode: multiply; } .value { display: flex; gap: 1rem; align-items: flex-start; } .value h3 { font-size: 1.15rem; margin-bottom: .2rem; } .value p { margin: 0; color: var(--muted); } /* 10 ─ Contact ----------------------------------------------- */ .contact-panel { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: .75rem; padding: clamp(1.5rem, 3vw, 2.25rem); height: 100%; } .contact-row { display: flex; gap: 1.1rem; align-items: center; padding-block: 1.1rem; border-bottom: 1px solid var(--line); } .contact-row:last-of-type { border-bottom: 0; } .contact-label { display: block; font-size: .9rem; color: var(--muted); } .contact-value { font-size: 1.25rem; font-weight: 600; color: var(--navy); text-decoration: none; font-style: normal; line-height: 1.6; } a.contact-value:hover { color: var(--gold-deep); } .contact-value.num { direction: ltr; unicode-bidi: isolate; display: inline-block; letter-spacing: .02em; } .map-placeholder { height: 100%; min-height: 340px; border-radius: .75rem; border: 1px solid var(--gold); position: relative; overflow: hidden; display: grid; place-items: center; text-align: center; padding: 2rem; background: linear-gradient(rgba(20,35,54,.06) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, rgba(20,35,54,.06) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(135deg, #eef2f7, #fbf6ea); } .map-placeholder .pin { font-size: 2.6rem; color: var(--gold-deep); } .map-placeholder h2 { font-size: 1.35rem; margin: .4rem 0 .3rem; } .map-placeholder p { margin: 0 auto 1.2rem; color: var(--muted); } /* When you add the real map, put an