/* ------------------------------------------------------------------------- * رهنمان — به زودی * Design tokens * ---------------------------------------------------------------------- */ :root { --rn-primary: #2e2e2e; --rn-primary-shade: #e66025; --rn-surface: #ffffff; --rn-ink: #000000; --rn-gutter: clamp(1.25rem, 0.75rem + 2vw, 2rem); --rn-bar-block: clamp(1.5rem, 1rem + 1.5vw, 2rem); --rn-text-lead: clamp(1rem, 0.94rem + 0.3vw, 1.125rem); --rn-text-logo: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); --rn-text-panel-title: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); --rn-duration: 200ms; --rn-ease: cubic-bezier(0.16, 1, 0.3, 1); --rn-panel-width: 90%; --rn-z-overlay: 9990; --rn-z-panel: 9998; } @property --rn-angle { syntax: ""; initial-value: 0deg; inherits: false; } /* ------------------------------------------------------------------------- * Base * ---------------------------------------------------------------------- */ html { background-color: var(--rn-primary); } html:has(.rn-main) { color: var(--rn-surface); background-color: var(--rn-primary); background-image: conic-gradient( from var(--rn-angle), var(--rn-primary-shade), var(--rn-primary), var(--rn-primary-shade) ); animation: rn-animate-bg 60s steps(60) infinite; } body { margin: 0; /* The rotating conic gradient lives on ; body must not paint over it. */ background-color: transparent; font-family: Vazirmatn, system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; font-size: var(--rn-text-lead); line-height: 1.9; -webkit-font-smoothing: antialiased; } .wp-site-blocks { margin: 0; padding: 0; } ::-webkit-scrollbar { width: 0; height: 0; } /* Kept in the render tree (not display:none) so the SVG filter stays resolvable. */ .rn-hidden { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- * Layout shell * ---------------------------------------------------------------------- */ .rn-main { display: flex; flex-direction: column; min-height: 100svh; padding-inline: var(--rn-gutter); } .rn-logo { display: inline-block; font-size: var(--rn-text-logo); font-weight: 700; line-height: 1.2; color: inherit; text-decoration: none; letter-spacing: -0.01em; } .rn-logo__img { display: block; width: auto; height: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); } /* The logo artwork is white; invert it on the light panel. */ .rn-logo__img--dark { filter: invert(1); } /* Underline-on-hover text button, mirrored for RTL. */ .rn-link-btn { position: relative; padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } .rn-link-btn::after { content: ""; position: absolute; inset-block-end: -2px; inset-inline-start: auto; inset-inline-end: 0; width: 0; height: 1px; background-color: currentColor; transition: width var(--rn-duration) ease; pointer-events: none; } .rn-link-btn:hover::after, .rn-link-btn:focus-visible::after { inset-inline-start: 0; inset-inline-end: auto; width: 100%; } /* ------------------------------------------------------------------------- * Header * ---------------------------------------------------------------------- */ .rn-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: var(--rn-bar-block); opacity: 0; animation: rn-fade-in 400ms 400ms ease forwards; } .rn-only-desktop { display: none; } /* ------------------------------------------------------------------------- * Hero * ---------------------------------------------------------------------- */ .rn-hero { display: grid; place-content: center; justify-items: center; flex: 1; gap: clamp(1rem, 0.5rem + 1.5vw, 2rem); text-align: center; } .rn-hero__lead { margin: 0; font-size: var(--rn-text-lead); } .rn-hero__badge { filter: url("#rn-ripples"); line-height: 0; } /* Circular "به زودی" ring: whole words are rotated so Persian shaping stays intact. */ .rn-ring { position: relative; width: clamp(17rem, 62vw, 28rem); aspect-ratio: 1; color: var(--rn-surface); line-height: 1; } .rn-ring__item { position: absolute; inset-block-start: 0; /* Physical left + translateX are intentional: this is geometry, not text flow. inset-inline-start resolves to `right` under RTL while translateX stays physical, which offsets every item by its own width. */ left: 50%; /* Exactly 50% so `transform-origin: bottom center` sits on the ring centre; anything less pivots above it and the ring goes lopsided. The glyphs are pulled inside the square with padding instead. */ height: 50%; padding-block-start: clamp(0.5rem, 0.25rem + 1vw, 1.25rem); box-sizing: border-box; font-size: clamp(1.25rem, 0.9rem + 1.7vw, 2.25rem); font-weight: 500; white-space: nowrap; transform-origin: bottom center; transform: translateX(-50%) rotate(var(--rn-i, 0deg)); } .rn-ring__item--sep { opacity: 0.85; } .rn-spin { animation: rn-spin-slow 60s linear infinite; } /* ------------------------------------------------------------------------- * Notify panel (slides in from the inline start = right in RTL) * ---------------------------------------------------------------------- */ .rn-panel { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--rn-z-panel); width: var(--rn-panel-width); color: var(--rn-ink); background-color: var(--rn-surface); transform: translateX(100%); transition: transform var(--rn-duration) var(--rn-ease); visibility: hidden; } .rn-panel.is-open { transform: translateX(0); visibility: visible; } /* Keep the panel clear of the WordPress admin bar for logged-in users. */ body.admin-bar .rn-panel { inset-block-start: 32px; } @media screen and (max-width: 782px) { body.admin-bar .rn-panel { inset-block-start: 46px; } } .rn-panel__close { position: absolute; inset-block-start: clamp(1rem, 0.5rem + 2vw, 2.75rem); inset-inline-end: clamp(0.75rem, 0.25rem + 2vw, 2.25rem); z-index: 2; display: grid; place-items: center; padding: 0.75rem; color: inherit; background-color: var(--rn-surface); border: 0; opacity: 0.2; cursor: pointer; transition: opacity var(--rn-duration) ease; } .rn-panel__close:hover, .rn-panel__close:focus-visible { opacity: 1; } .rn-panel__inner { display: flex; flex-direction: column; height: 100%; padding: clamp(1.5rem, 1rem + 3vw, 3rem); overflow-y: auto; } .rn-panel__logo { display: inline-block; margin-block-end: clamp(2rem, 1rem + 4vw, 4rem); } .rn-panel__top { margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.25rem); } .rn-panel__kicker { margin: 0 0 0.5rem; font-size: 0.875rem; opacity: 0.75; } .rn-panel__title { margin: 0 0 clamp(1.25rem, 1rem + 1vw, 1.625rem); font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem); line-height: 1.5; } /* ------------------------------------------------------------------------- * Form * ---------------------------------------------------------------------- */ .rn-form__label { display: block; margin-block-end: 0.5rem; font-size: 0.875rem; } .rn-required { color: #ef4444; } .rn-form__row { display: flex; flex-direction: column; gap: 0.25rem; } .rn-input { display: block; width: 100%; height: 3rem; padding-inline: 1rem; font: inherit; font-size: 1rem; color: var(--rn-ink); background-color: var(--rn-surface); border: 2px solid #f3f4f6; border-radius: 0.375rem; transition: border-color var(--rn-duration) ease; box-sizing: border-box; } .rn-input:hover { border-color: #e5e7eb; } .rn-input:focus { outline: none; border-color: var(--rn-primary-shade); } .rn-honeypot { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); } .rn-submit { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 3rem; padding-inline: 1.5rem; font: inherit; font-weight: 500; color: var(--rn-ink); background-color: #f3f4f6; border: 0; border-radius: 0.375rem; cursor: pointer; transition: background-color var(--rn-duration) ease, color var(--rn-duration) ease; } .rn-submit:hover, .rn-input:focus ~ .rn-submit, .rn-submit:focus-visible { color: var(--rn-surface); background-color: var(--rn-primary-shade); } .rn-submit[disabled] { cursor: progress; } .rn-submit__state { display: flex; align-items: center; gap: 0.5rem; animation: rn-state-in 300ms var(--rn-ease); } .rn-submit__state[hidden] { display: none; } .rn-spinner { display: block; width: 1rem; height: 1rem; border: 2px solid currentColor; border-block-start-color: transparent; border-radius: 50%; animation: rn-spin-fast 700ms linear infinite; } .rn-form__message { margin: 0.5rem 0 0; min-height: 1.25rem; font-size: 0.8125rem; line-height: 1.6; } .rn-form__message.is-error { color: #ef4444; } .rn-form__message.is-success { color: #15803d; } /* ------------------------------------------------------------------------- * About block inside the panel * ---------------------------------------------------------------------- */ .rn-panel__bottom { margin-block-start: auto; } .rn-rule { width: 2.5rem; margin: 0 0 2rem; border: 0; border-block-start: 1px solid rgba(0, 0, 0, 0.2); } .rn-about__label { display: inline-block; margin: 0 0 1.5rem; padding-inline: 0.25rem; font-size: 0.9375rem; color: rgba(0, 0, 0, 0.5); transition: background-color var(--rn-duration) ease, color var(--rn-duration) ease; } .rn-about__label.is-highlighted { color: var(--rn-surface); background-color: var(--rn-primary-shade); } .rn-about__text { margin: 0; font-size: 0.875rem; line-height: 1.9; text-align: justify; text-align-last: start; } .rn-services { margin: 1rem 0 0; padding: 0; list-style: none; font-size: 0.8125rem; line-height: 1.8; text-align: justify; text-align-last: start; } .rn-services li { position: relative; padding-inline-start: 1.125rem; } .rn-services li + li { margin-block-start: 0.5rem; } .rn-services li::before { content: ""; position: absolute; inset-block-start: 0.85em; inset-inline-start: 0; width: 0.375rem; height: 0.375rem; border-radius: 50%; background-color: var(--rn-primary-shade); } .rn-phone { display: inline-flex; align-items: center; gap: 0.5rem; margin-block-start: 1.75rem; font-size: 1.0625rem; font-weight: 500; color: var(--rn-ink); text-decoration: none; transition: color var(--rn-duration) ease; } .rn-phone:hover, .rn-phone:focus-visible { color: var(--rn-primary-shade); } .rn-phone svg { width: 1.125rem; height: 1.125rem; flex: none; } .rn-social { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin: 2rem 0 0; padding: 0; list-style: none; } .rn-social a { display: inline-block; color: inherit; transition: transform var(--rn-duration) ease; } .rn-social a:hover, .rn-social a:focus-visible { transform: scale(1.1); } .rn-social svg { display: block; height: 1.25rem; width: auto; } /* ------------------------------------------------------------------------- * Overlay * ---------------------------------------------------------------------- */ .rn-overlay { position: fixed; inset: 0; z-index: var(--rn-z-overlay); background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; pointer-events: none; cursor: pointer; transition: opacity var(--rn-duration) ease, visibility var(--rn-duration) ease; } .rn-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; } /* ------------------------------------------------------------------------- * Footer * ---------------------------------------------------------------------- */ .rn-footer { padding-block: var(--rn-bar-block); text-align: center; opacity: 0; animation: rn-fade-in 400ms 400ms ease forwards; } .rn-footer__copy { font-size: 0.875rem; text-wrap: balance; } .rn-footer__action { display: none; } /* ------------------------------------------------------------------------- * Entrance animations * ---------------------------------------------------------------------- */ .rn-anim-up { animation: rn-slide-up 300ms ease both; } .rn-anim-down { animation: rn-slide-down 300ms ease both; } .rn-anim-scale { animation: rn-scale-in 300ms 200ms ease both; } @keyframes rn-animate-bg { to { --rn-angle: 360deg; } } @keyframes rn-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes rn-spin-fast { to { transform: rotate(360deg); } } @keyframes rn-fade-in { to { opacity: 1; } } @keyframes rn-slide-up { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes rn-slide-down { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } } @keyframes rn-scale-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes rn-state-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } /* ------------------------------------------------------------------------- * Breakpoints * ---------------------------------------------------------------------- */ @media (min-width: 640px) { .rn-only-mobile { display: none; } .rn-only-desktop { display: block; } .rn-form__row { flex-direction: row; align-items: center; gap: 0.25rem; } .rn-submit { flex: 1; } .rn-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: start; } .rn-footer__action { display: block; } } @media (min-width: 768px) { :root { --rn-panel-width: 60%; } } @media (min-width: 1024px) { :root { --rn-panel-width: 50%; } } @media (min-width: 1280px) { :root { --rn-panel-width: 35%; } } /* ------------------------------------------------------------------------- * Reduced motion * ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html:has(.rn-main), .rn-spin, .rn-header, .rn-footer, .rn-anim-up, .rn-anim-down, .rn-anim-scale, .rn-submit__state { animation: none; opacity: 1; } .rn-panel, .rn-overlay { transition-duration: 1ms; } }