@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700;800;900&display=swap'); /* ===== Tokens ===== */ :root { --brand: #F3C400; --brand-bright: #EDCD00; --brand-deep: #E0B200; --ink: #201C1D; --ink-2: #3A3536; --paper: #ffffff; --cream: #F7F1E1; --muted: #6d6a6b; --line: #e7e2d6; --shadow-sm: 0 2px 10px rgba(32, 28, 29, .08); --shadow-md: 0 14px 40px rgba(32, 28, 29, .14); --radius: 16px; --radius-lg: 26px; --site-width: 1200px; --gutter: clamp(20px, 5vw, 64px); --header-clear: 104px; --font-sans: "Noto Sans Arabic", system-ui, "Segoe UI", sans-serif; --dur: .25s; } /* ===== Reset / base ===== */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: clip; scroll-behavior: smooth; } body { margin: 0; overflow-x: clip; font-family: var(--font-sans); line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; direction: rtl; } img, svg, video { max-width: 100%; display: block; } button { font: inherit; cursor: pointer; background: transparent; border: none; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; padding: 0; } ul[role="list"] { list-style: none; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 3px; } #packages, #contact { scroll-margin-top: 96px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * , *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ===== Scroll-reveal (progressive enhancement: hidden state only applies once .js is confirmed on , so content stays visible if JS fails to load or run) ===== */ .js .reveal { opacity: 0; transition: opacity .7s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0s), transform .7s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0s); } .js .reveal--up { transform: translateY(28px); } .js .reveal--right { transform: translateX(24px); } [dir="ltr"].js .reveal--right { transform: translateX(-24px); } .js .reveal.is-visible { opacity: 1; transform: none; } /* ===== Primitives ===== */ .site-width { width: 100%; max-width: var(--site-width); margin-inline: auto; padding-inline: var(--gutter); } .eyebrow { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); } .eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--brand); border-radius: 3px; } .hero__eyebrow.eyebrow { color: #fff; } .section-heading { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.2; } .lead { color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.15rem); max-width: 60ch; } .btn { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: 12px; border: 2px solid transparent; font-weight: 700; font-size: 1rem; transition: transform var(--dur), background var(--dur), box-shadow var(--dur); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(.97); } .btn--primary { background: var(--brand); color: var(--ink); box-shadow: 0 10px 24px rgba(243,196,0,.35); } .btn--primary:hover { background: var(--brand-bright); box-shadow: 0 14px 30px rgba(243,196,0,.45); } .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; } .btn--dark { background: var(--ink); color: #fff; } .btn--dark:hover { background: #000; box-shadow: 0 10px 24px rgba(0,0,0,.25); } .btn--compact { height: 36px; padding: 0 18px; font-size: .85rem; line-height: 1; } .btn--block { width: 100%; } .btn__icon { width: 20px; height: 20px; transition: transform var(--dur) ease; } .btn:hover .btn__icon { transform: scale(1.1) rotate(-4deg); } /* ===== Header ===== */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 40; padding-block: 18px; background: transparent; box-shadow: none; transition: background var(--dur) ease, box-shadow var(--dur) ease, padding-block var(--dur) ease, backdrop-filter var(--dur) ease; } .site-header--scrolled { background: rgba(32, 28, 29, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-md); padding-block: 12px; } .site-header__inner { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 22px; } .site-header__logo-img { height: 84px; width: auto; transition: height var(--dur) ease; } .site-header--scrolled .site-header__logo-img { height: 69px; } .site-nav { flex: 1; display: flex; flex-direction: row; justify-content: center; min-width: 0; } .site-nav__list { display: flex; flex-direction: row; align-items: center; gap: clamp(14px, 1.6vw, 22px); flex-wrap: nowrap; } .site-nav__link { position: relative; display: inline-block; color: #fff; font-weight: 600; font-size: .92rem; white-space: nowrap; opacity: .92; padding-block: 4px; transition: opacity var(--dur); } .site-nav__link::after { content: ""; position: absolute; inset-inline: 0; block-size: 2px; inset-block-end: -2px; background: var(--brand); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform var(--dur) ease; } .site-nav__link:hover { opacity: 1; } .site-nav__link:hover::after, .site-nav__link.is-active::after { transform: scaleX(1); } .site-header__actions { display: flex; flex-direction: row; align-items: center; gap: 10px; } .lang-link a, .header-login-btn { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); color: #fff; background: transparent; transition: border-color var(--dur) ease, background var(--dur) ease, transform var(--dur) ease; } .lang-link a { font-weight: 800; font-size: .72rem; letter-spacing: .01em; } .lang-link a:hover, .header-login-btn:hover { border-color: #fff; background: rgba(255,255,255,.12); transform: translateY(-2px); } .header-login-btn svg { width: 17px; height: 17px; } .menu-toggle { display: none; background: none; border: 0; padding: 10px; } .menu-toggle__bar { display: block; width: 26px; height: 2.5px; background: #fff; border-radius: 2px; margin-block: 5px; transition: transform var(--dur) ease, opacity var(--dur) ease; } .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* ===== Mobile side drawer ===== */ html.menu-open, html.menu-open body { overflow: hidden; } .mobile-menu-backdrop { position: fixed; inset: 0; z-index: 65; background: rgba(15,13,13,.55); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; } .mobile-menu-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .35s ease; } .mobile-menu { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 70; width: min(320px, 86vw); display: flex; flex-direction: column; background: linear-gradient(180deg, #211d1e, #171415); box-shadow: -18px 0 50px rgba(0,0,0,.4); transform: translateX(-100%); visibility: hidden; transition: transform .4s cubic-bezier(.22,.61,.36,1), visibility 0s linear .4s; } .mobile-menu.is-open { transform: translateX(0); visibility: visible; transition: transform .4s cubic-bezier(.22,.61,.36,1); } .mobile-menu__top { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; } .mobile-menu__logo img { height: 60px; width: auto; } .mobile-menu__close { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: background var(--dur) ease, transform var(--dur) ease; } .mobile-menu__close svg { width: 17px; height: 17px; } .mobile-menu__close:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); } .mobile-menu__inner { flex: 1; overflow-y: auto; padding: 8px 20px 28px; } .mobile-menu__list { display: flex; flex-direction: column; } .mobile-menu__list li:last-child .mobile-menu__link { border-bottom: none; } .mobile-menu__link { display: block; padding-block: 15px; color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.08); transition: color var(--dur), padding-inline-start var(--dur); } .mobile-menu__link:hover { color: var(--brand); padding-inline-start: 6px; } .mobile-menu__link.is-active { color: var(--brand); } .mobile-menu__actions { display: flex; flex-direction: column; gap: 10px; margin-block-start: 20px; } .mobile-menu__lang { margin-block-start: 20px; text-align: center; } .mobile-menu__lang a { color: rgba(255,255,255,.6); font-weight: 600; font-size: .88rem; transition: color var(--dur) ease; } .mobile-menu__lang a:hover { color: #fff; } @media (max-width: 1280px) { .site-nav, .site-header__actions { display: none; } .menu-toggle { display: block; } } /* ===== Hero ===== */ .hero { position: relative; min-height: clamp(560px, 66vh, 820px); display: flex; flex-direction: row; align-items: center; overflow: hidden; color: #fff; } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,18,.55) 0%, rgba(20,17,18,.35) 40%, rgba(20,17,18,.78) 100%), linear-gradient(to left, rgba(20,17,18,.85) 0%, rgba(20,17,18,.25) 55%, rgba(20,17,18,0) 80%); } .hero__bg-img { width: 100%; height: 100%; object-fit: cover; animation: hero-zoom 18s ease-in-out infinite alternate; } @keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.08); } } .hero__inner { position: relative; z-index: 2; width: 100%; padding-block: 120px 56px; } .hero__content { max-width: 600px; margin-inline-start: auto; } .hero__title { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; line-height: 1.12; margin-block: 14px 16px; } .hero__accent { color: var(--brand); } .hero__text { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: rgba(255,255,255,.9); max-width: 52ch; } .hero__cta { display: flex; flex-direction: row; flex-wrap: wrap; gap: 14px; margin-block-start: 30px; } .hero__figure { position: absolute; z-index: 1; inset-block-start: var(--header-clear); inset-block-end: 0; inset-inline-start: calc(max(0px, (100vw - var(--site-width)) / 4) + var(--gutter) / 2 + 48px); margin: 0; display: flex; flex-direction: row; align-items: flex-end; } .hero__figure-img { height: 100%; max-height: 500px; width: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); } .hero__nameplate { position: absolute; inset-block-end: 40px; inset-inline-end: -14px; display: flex; flex-direction: row; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--brand-bright), var(--brand-deep)); color: var(--ink); padding: 12px 20px 12px 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,.45); box-shadow: 0 18px 34px rgba(224,178,0,.4), 0 4px 12px rgba(32,28,29,.2); transition: transform var(--dur) ease, box-shadow var(--dur) ease; } .hero__nameplate:hover { transform: translateY(-3px); box-shadow: 0 22px 40px rgba(224,178,0,.48), 0 6px 14px rgba(32,28,29,.25); } .hero__nameplate-badge { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--brand); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); } .hero__nameplate-badge svg { width: 18px; height: 18px; } .hero__nameplate-text { display: flex; flex-direction: column; gap: 3px; } .hero__nameplate-name { display: block; font-size: 1.12rem; font-weight: 800; line-height: 1.2; letter-spacing: -.005em; white-space: nowrap; } .hero__nameplate-role { font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--ink); opacity: .72; padding-inline-start: 12px; position: relative; } .hero__nameplate-role::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 2px; border-radius: 2px; background: currentColor; opacity: .6; } @media (max-width: 480px) { .hero__nameplate { inset-inline-end: 0; padding: 10px 16px 10px 14px; gap: 10px; } .hero__nameplate-name { font-size: 1rem; } } @media (max-width: 1200px) { .hero { flex-direction: column; align-items: stretch; } .hero__bg::after { background: linear-gradient(180deg, rgba(20,17,18,.55) 0%, rgba(20,17,18,.35) 40%, rgba(20,17,18,.78) 100%), linear-gradient(to bottom, rgba(20,17,18,.85) 0%, rgba(20,17,18,.25) 55%, rgba(20,17,18,0) 80%); } .hero__inner { padding-block: 160px 10px; } .hero__content { margin-inline-start: 0; } .hero__figure { position: relative; inset-block: auto; inset-inline-start: 0; align-self: flex-start; margin-block-start: auto; padding-block-start: 56px; margin-inline-start: clamp(12px, 5vw, 48px); } .hero__figure-img { height: min(44vh, 400px); max-height: none; } } /* ===== Page hero (interior pages) ===== */ .page-hero { position: relative; min-height: clamp(300px, 40vh, 440px); display: flex; align-items: center; overflow: hidden; color: #fff; } .page-hero__bg { position: absolute; inset: 0; z-index: 0; } .page-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,18,.68) 0%, rgba(20,17,18,.5) 45%, rgba(20,17,18,.9) 100%); } .page-hero__bg-img { width: 100%; height: 100%; object-fit: cover; animation: hero-zoom 20s ease-in-out infinite alternate; } .page-hero__inner { position: relative; z-index: 1; width: 100%; padding-block: 132px 44px; text-align: center; } .page-hero__eyebrow { justify-content: center; } .page-hero__title { font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 800; margin-block: 14px 12px; } .page-hero__text { color: rgba(255,255,255,.86); max-width: 62ch; margin-inline: auto; font-size: clamp(1rem, 2vw, 1.12rem); } .page-hero__crumbs { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; margin-block-start: 20px; font-size: .88rem; color: rgba(255,255,255,.65); } .page-hero__crumbs a { color: #fff; font-weight: 600; transition: color var(--dur) ease; } .page-hero__crumbs a:hover { color: var(--brand); } /* ===== Stats ===== */ .stats { background: var(--ink); color: #fff; position: relative; padding-block: clamp(40px, 6vw, 64px); } .stats__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .stats__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 30px 18px; border-radius: var(--radius); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); transition: transform var(--dur) ease, background var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease; } .stats__item:hover { transform: translateY(-5px); background: rgba(255,255,255,.06); border-color: rgba(243,196,0,.4); box-shadow: 0 14px 30px rgba(0,0,0,.35); } .stats__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; background: rgba(243,196,0,.12); color: var(--brand); transition: background var(--dur) ease, transform var(--dur) ease; } .stats__item:hover .stats__icon { background: var(--brand); color: var(--ink); transform: scale(1.08); } .stats__icon svg { width: 22px; height: 22px; } .stats__num { font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; } .stats__label { font-size: .9rem; color: rgba(255,255,255,.75); max-width: 18ch; line-height: 1.4; } @media (max-width: 900px) { .stats__list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .stats__list { grid-template-columns: 1fr; } } /* ===== Packages ===== */ .packages { padding-block: clamp(56px, 8vw, 96px); background: var(--cream); position: relative; overflow: hidden; } .packages::before { content: ""; position: absolute; inset-block-start: -120px; inset-inline-end: 50%; width: 620px; height: 420px; transform: translateX(50%); background: radial-gradient(closest-side, rgba(243,196,0,.16), transparent 72%); pointer-events: none; z-index: 0; } .packages > .site-width { position: relative; z-index: 1; } .packages__head { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; max-width: 720px; margin-inline: auto; } .config { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 10px; margin-block: 34px; overflow-x: auto; overflow-y: hidden; padding: 4px var(--gutter) 16px; margin-inline: calc(var(--gutter) * -1); scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line) transparent; mask-image: linear-gradient(to left, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); -webkit-mask-image: linear-gradient(to left, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); } .config::-webkit-scrollbar { height: 5px; } .config::-webkit-scrollbar-track { background: transparent; } .config::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; } .config::-webkit-scrollbar-thumb:hover { background: var(--brand); } .config__btn { flex-shrink: 0; scroll-snap-align: start; display: inline-flex; flex-direction: row; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--line); color: var(--ink-2); padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: .88rem; white-space: nowrap; cursor: pointer; transition: all var(--dur); } .config__icon { width: 16px; height: 16px; flex-shrink: 0; opacity: .65; transition: opacity var(--dur) ease; } .config__btn:hover { border-color: var(--brand); } .config__btn:has(.config__radio:checked) { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: var(--shadow-sm); } .config__btn:has(.config__radio:checked) .config__icon { opacity: 1; color: var(--brand); } .config__btn:has(.config__radio:focus-visible) { outline: 2px solid var(--brand-bright); outline-offset: 3px; } @media (min-width: 900px) { .config { justify-content: safe center; } } .package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; } @media (max-width: 1200px) { .package-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .package-grid { grid-template-columns: 1fr; } } .package-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .package-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: transparent; } .package-card__figure { display: block; position: relative; overflow: hidden; border-radius: 12px; } .package-card__figure::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(180deg, rgba(32,28,29,0) 55%, rgba(32,28,29,.32) 100%); pointer-events: none; } .package-card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; transition: transform .5s ease; } .package-card:hover .package-card__img { transform: scale(1.07); } .package-card__name { font-size: 1.3rem; font-weight: 800; } .package-card__name a { transition: color var(--dur) ease; } .package-card__name a:hover { color: var(--brand-deep); } .package-card__tag { font-size: .9rem; color: var(--muted); min-height: 2.6em; } .package-card__price { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 6px; padding-block: 8px; border-block: 1px solid var(--line); } .package-card__price-wrap { display: flex; flex-direction: column; gap: 2px; } .package-card__from { font-size: .72rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; } .package-card__amount { font-size: 1.9rem; font-weight: 800; direction: ltr; line-height: 1; } .package-card__unit { font-size: .95rem; font-weight: 700; color: var(--muted); } .package-card__list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-block: 4px; } .package-card__item { position: relative; padding-inline-start: 26px; font-size: .93rem; color: var(--ink-2); } .package-card__item::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); box-shadow: inset 0 0 0 4px rgba(255,255,255,.85); } .package-card__cta { margin-block-start: auto; } .package-card--featured { border-color: var(--brand); box-shadow: 0 16px 40px rgba(243,196,0,.22); } .package-card--featured:hover { box-shadow: 0 22px 48px rgba(243,196,0,.34); } @media (min-width: 761px) { .package-card--featured { transform: scale(1.035); z-index: 2; } .package-card--featured:hover { transform: scale(1.035) translateY(-8px); } } .package-card__flag { position: absolute; inset-block-start: -13px; inset-inline-end: 20px; background: var(--brand); color: var(--ink); font-weight: 800; font-size: .8rem; padding: 5px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; animation: flag-pulse 2.6s ease-in-out infinite; } .package-card__flag svg { width: 13px; height: 13px; } @keyframes flag-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(243,196,0,.5); } 50% { box-shadow: 0 0 0 6px rgba(243,196,0,0); } } .packages__note { text-align: center; color: var(--muted); font-size: .9rem; margin-block-start: 26px; } /* ===== CTA band ===== */ .cta-band { background: var(--brand); color: var(--ink); padding-block: clamp(40px, 6vw, 60px); } .cta-band__grid { display: grid; grid-template-columns: 1.3fr auto 1fr; align-items: center; gap: 36px; } .cta-band__title { font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 800; } .cta-band__text { font-weight: 600; opacity: .8; margin-block-start: 4px; } .cta-band__actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; margin-block-start: 18px; } .cta-band__actions .btn__icon { width: 18px; height: 18px; } .cta-band__divider { align-self: stretch; width: 1px; background: rgba(32,28,29,.18); } .cta-band__newsletter-label { display: flex; flex-direction: row; align-items: center; gap: 10px; font-weight: 700; font-size: .92rem; margin-block-end: 12px; } .cta-band__newsletter-label svg { width: 20px; height: 20px; flex-shrink: 0; } .newsletter-form { display: flex; flex-direction: row; gap: 10px; } .newsletter-form__input { flex: 1; min-width: 0; padding: 12px 16px; border-radius: 12px; border: 1.5px solid rgba(32,28,29,.25); background: rgba(255,255,255,.55); font: inherit; font-size: .95rem; color: var(--ink); transition: border-color var(--dur) ease, background var(--dur) ease; } .newsletter-form__input::placeholder { color: rgba(32,28,29,.55); } .newsletter-form__input:focus { outline: none; border-color: var(--ink); background: #fff; } .newsletter-form__submit { flex-shrink: 0; padding-inline: 22px; position: relative; } .newsletter-form__submit[disabled] { opacity: .7; cursor: default; } .newsletter-form__error { margin-block-start: 10px; font-size: .85rem; font-weight: 700; color: #7a1f1a; } @media (max-width: 900px) { .cta-band__grid { grid-template-columns: 1fr; gap: 26px; text-align: center; } .cta-band__divider { width: 100%; height: 1px; } .cta-band__actions { justify-content: center; } .cta-band__newsletter-label { justify-content: center; } } @media (max-width: 480px) { .newsletter-form { flex-direction: column; } } /* ===== Modal (newsletter success) ===== */ .modal { border: none; border-radius: var(--radius-lg); padding: 40px 34px 34px; width: min(420px, 90vw); text-align: center; color: var(--ink); box-shadow: var(--shadow-md); position: fixed; margin: auto; inset: 0; opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .25s ease, transform .25s ease, overlay .25s ease allow-discrete, display .25s ease allow-discrete; } .modal[open] { opacity: 1; transform: translateY(0) scale(1); } @starting-style { .modal[open] { opacity: 0; transform: translateY(16px) scale(.97); } } .modal::backdrop { background: rgba(20,17,18,.55); opacity: 0; transition: opacity .25s ease, overlay .25s ease allow-discrete, display .25s ease allow-discrete; } .modal[open]::backdrop { opacity: 1; } @starting-style { .modal[open]::backdrop { opacity: 0; } } .modal__dismiss { position: absolute; top: 14px; inset-inline-end: 14px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--cream); transition: background var(--dur) ease, color var(--dur) ease; } .modal__dismiss svg { width: 15px; height: 15px; } .modal__dismiss:hover { background: var(--line); color: var(--ink); } .modal__icon { display: flex; align-items: center; justify-content: center; margin-inline: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(243,196,0,.16); color: var(--brand-deep); margin-block-end: 18px; } .modal__icon svg { width: 32px; height: 32px; } .modal__title { font-size: 1.3rem; font-weight: 800; margin-block-end: 10px; } .modal__text { color: var(--muted); font-size: .95rem; line-height: 1.7; margin-block-end: 24px; } /* ===== Footer ===== */ .site-footer { background: var(--ink); color: rgba(255,255,255,.82); padding-block: 48px 28px; } .site-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; } @media (max-width: 560px) { .site-footer__top { grid-template-columns: 1fr; } } .site-footer__logo-img { height: 84px; width: auto; } .site-footer__tagline { margin-block-start: 16px; max-width: 34ch; color: rgba(255,255,255,.7); } .site-footer__social { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-block-start: 20px; } .site-footer__social-link { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.75); transition: background var(--dur) ease, color var(--dur) ease, transform var(--dur) ease, border-color var(--dur) ease; } .site-footer__social-link svg { width: 17px; height: 17px; } .site-footer__social-link:hover { background: var(--brand); color: var(--ink); border-color: var(--brand); transform: translateY(-3px); } .site-footer__title { font-size: 1rem; color: #fff; margin-block-end: 12px; } .site-footer__list { list-style: none; display: flex; flex-direction: column; gap: 11px; font-size: .95rem; } .site-footer__link { display: inline-flex; flex-direction: row; align-items: center; gap: 9px; transition: color var(--dur) ease, padding-inline-start var(--dur) ease; } .site-footer__link:hover { color: var(--brand); padding-inline-start: 4px; } .site-footer__link svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .6; transition: opacity var(--dur) ease; } .site-footer__link:hover svg { opacity: 1; } .site-footer__list--icons .site-footer__link { align-items: flex-start; color: rgba(255,255,255,.82); } .site-footer__list--icons .site-footer__link svg { margin-block-start: 2px; } .site-footer__link--static { cursor: default; } .site-footer__link--static:hover { color: rgba(255,255,255,.82); padding-inline-start: 0; } .site-footer__link--static:hover svg { opacity: .6; } .contact-line { direction: ltr; text-align: start; unicode-bidi: plaintext; } .site-footer__bottom { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 34px; padding-block-start: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; color: rgba(255,255,255,.55); } .site-footer__bottom > * { min-width: 0; } .site-footer__credit a { color: rgba(255,255,255,.75); font-weight: 700; transition: color var(--dur) ease; } .site-footer__credit a:hover { color: var(--brand); } @media (max-width: 640px) { .site-footer__bottom { flex-direction: column; text-align: center; } } /* ===== Back to top ===== */ .back-to-top { position: fixed; inset-inline-end: 22px; inset-block-end: 22px; z-index: 50; width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: var(--ink); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--dur) ease, transform var(--dur) ease, background var(--dur) ease, visibility 0s linear .25s; } .back-to-top svg { width: 20px; height: 20px; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--dur) ease, transform var(--dur) ease, background var(--dur) ease; } .back-to-top:hover { background: var(--brand-bright); transform: translateY(-3px); } @media (max-width: 560px) { .back-to-top { inset-inline-end: 16px; inset-block-end: 16px; width: 42px; height: 42px; } } /* ===== Auth pages (login / account) ===== */ .auth-page { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--cream); padding: 40px var(--gutter); } .auth-page__logo { display: inline-flex; margin-block-end: 28px; } .auth-page__logo img { height: 78px; width: auto; } .auth-card { width: 100%; max-width: 440px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 40px 36px; border: 1px solid var(--line); } .auth-card__title { font-size: 1.5rem; font-weight: 800; text-align: center; } .auth-card__subtitle { text-align: center; color: var(--muted); font-size: .92rem; margin-block-start: 8px; margin-block-end: 28px; } .auth-alert { border-radius: 10px; padding: 11px 14px; font-size: .88rem; text-align: center; margin-block-end: 18px; } .auth-alert--error { background: #fdecea; color: #b3261e; border: 1px solid #f4c6c1; } .auth-alert--success { background: #eaf7ee; color: #1e7b34; border: 1px solid #c3e6cc; } .form-group { display: flex; flex-direction: column; gap: 6px; margin-block-end: 18px; } .form-label { font-size: .88rem; font-weight: 700; color: var(--ink-2); } .form-input { padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--line); font: inherit; font-size: .96rem; background: #fff; color: var(--ink); transition: border-color var(--dur) ease, box-shadow var(--dur) ease; } .form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(243,196,0,.2); outline: none; } .form-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-block-end: 22px; font-size: .86rem; } .form-checkbox { display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--ink-2); cursor: pointer; } .form-checkbox input { accent-color: var(--brand); width: 16px; height: 16px; } .form-row a { color: var(--ink-2); font-weight: 600; transition: color var(--dur) ease; } .form-row a:hover { color: var(--brand-deep); } .auth-card__footer { text-align: center; margin-block-start: 22px; font-size: .9rem; color: var(--muted); } .auth-card__footer a { color: var(--ink); font-weight: 700; transition: color var(--dur) ease; } .auth-card__footer a:hover { color: var(--brand-deep); } .auth-account { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .auth-account__avatar { width: 68px; height: 68px; border-radius: 50%; background: var(--cream); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; margin-block-end: 6px; border: 2px solid var(--brand); } .auth-account__email { color: var(--muted); font-size: .92rem; direction: ltr; } /* ===== Generic interior-page section scaffolding ===== */ .section { padding-block: clamp(56px, 8vw, 96px); } .section--cream { background: var(--cream); } .section__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 720px; margin-inline: auto; margin-block-end: 48px; } .section__head--start { align-items: flex-start; text-align: start; margin-inline: 0; } /* ===== Project cards ===== */ .project-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 1100px) { .project-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .project-grid { grid-template-columns: 1fr; } } .project-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-sm); transition: transform .4s ease, box-shadow .4s ease; } .project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .project-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .project-card:hover .project-card__img { transform: scale(1.08); } .project-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,18,0) 42%, rgba(20,17,18,.88) 100%); } .project-card__info { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1; padding: 20px; color: #fff; } .project-card__tag { display: inline-block; background: var(--brand); color: var(--ink); font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; margin-block-end: 9px; } .project-card__name { font-size: 1.05rem; font-weight: 800; } .project-card__area { font-size: .84rem; color: rgba(255,255,255,.75); margin-block-start: 2px; display: flex; flex-direction: row; align-items: center; gap: 6px; } .project-card__area svg { width: 14px; height: 14px; flex-shrink: 0; } /* ===== Service cards ===== */ .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 900px) { .service-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .service-grid { grid-template-columns: 1fr; } } .service-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; } .service-card__icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(243,196,0,.14); color: var(--brand-deep); display: flex; align-items: center; justify-content: center; margin-block-end: 18px; } .service-card__icon svg { width: 27px; height: 27px; } .service-card__title { font-size: 1.12rem; font-weight: 800; margin-block-end: 8px; } .service-card__text { color: var(--muted); font-size: .92rem; line-height: 1.75; } /* ===== Process steps ===== */ .process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } @media (max-width: 900px) { .process { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .process { grid-template-columns: 1fr; } } .process__step { position: relative; text-align: center; padding: 26px 14px; } .process__num { width: 52px; height: 52px; margin-inline: auto; border-radius: 50%; background: var(--ink); color: var(--brand); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem; margin-block-end: 14px; } .process__title { font-weight: 800; margin-block-end: 6px; font-size: .98rem; } .process__text { font-size: .84rem; color: var(--muted); line-height: 1.6; } .process__step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 26px; inset-inline-start: calc(50% + 42px); width: calc(100% - 84px); height: 2px; background: var(--line); } @media (max-width: 900px) { .process__step:not(:last-child)::after { display: none; } } /* ===== Financing plan cards ===== */ .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } } .plan-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 28px; text-align: center; display: flex; flex-direction: column; transition: transform var(--dur), box-shadow var(--dur); } .plan-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .plan-card--highlight { border-color: var(--brand); box-shadow: 0 16px 40px rgba(243,196,0,.2); } .plan-card__icon { width: 60px; height: 60px; border-radius: 50%; background: var(--cream); color: var(--brand-deep); display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-block-end: 18px; } .plan-card__icon svg { width: 28px; height: 28px; } .plan-card__title { font-size: 1.2rem; font-weight: 800; margin-block-end: 10px; } .plan-card__text { color: var(--muted); font-size: .92rem; line-height: 1.7; margin-block-end: 20px; } .plan-card__list { list-style: none; display: flex; flex-direction: column; gap: 9px; text-align: start; margin-block-end: 22px; } .plan-card__list li { position: relative; padding-inline-start: 24px; font-size: .88rem; color: var(--ink-2); } .plan-card__list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand); box-shadow: inset 0 0 0 3px rgba(255,255,255,.85); } .plan-card__cta { margin-block-start: auto; } /* ===== Contact page ===== */ .contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 900px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .contact-grid { grid-template-columns: 1fr; } } .contact-info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; text-align: center; transition: transform var(--dur), box-shadow var(--dur); } .contact-info-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .contact-info-card__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--cream); color: var(--brand-deep); display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-block-end: 14px; } .contact-info-card__icon svg { width: 23px; height: 23px; } .contact-info-card__label { font-size: .85rem; color: var(--muted); margin-block-end: 4px; } .contact-info-card__value { font-weight: 800; font-size: 1rem; } .contact-info-card__value.contact-line { direction: ltr; } .contact-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: stretch; } @media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } } .contact-form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-sm); } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 560px) { .contact-form__row { grid-template-columns: 1fr; } } .contact-form textarea.form-input { resize: vertical; min-height: 120px; } .contact-map { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); min-height: 320px; } .contact-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; } /* ===== Careers ===== */ .job-list { display: flex; flex-direction: column; gap: 16px; } .job-card { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur); } .job-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; } .job-card__title { font-size: 1.1rem; font-weight: 800; margin-block-end: 8px; } .job-card__meta { display: flex; flex-direction: row; flex-wrap: wrap; gap: 14px; font-size: .85rem; color: var(--muted); } .job-card__meta span { display: inline-flex; align-items: center; gap: 6px; } .job-card__meta svg { width: 15px; height: 15px; opacity: .7; flex-shrink: 0; } .job-card__cta { flex-shrink: 0; } @media (max-width: 640px) { .job-card { flex-direction: column; align-items: stretch; text-align: center; } .job-card__meta { justify-content: center; } } .perk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 900px) { .perk-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .perk-grid { grid-template-columns: 1fr; } } .perk-card { text-align: center; padding: 24px 18px; } .perk-card__icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(243,196,0,.14); color: var(--brand-deep); display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-block-end: 14px; } .perk-card__icon svg { width: 26px; height: 26px; } .perk-card__title { font-weight: 800; margin-block-end: 6px; } .perk-card__text { font-size: .85rem; color: var(--muted); line-height: 1.6; } /* ===== About page ===== */ .about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } @media (max-width: 900px) { .about-story { grid-template-columns: 1fr; } } .about-story__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 4; background: var(--cream); } .about-story__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } @media (max-width: 560px) { .about-story__media { aspect-ratio: 4 / 5; } } .about-story__stat { position: absolute; inset-block-start: 20px; inset-inline-end: 20px; z-index: 1; background: #fff; border-radius: 14px; padding: 12px 18px; box-shadow: var(--shadow-md); text-align: center; } .about-story__stat strong { display: block; font-size: 1.4rem; font-weight: 800; color: var(--brand-deep); line-height: 1.1; } .about-story__stat span { font-size: .72rem; color: var(--muted); font-weight: 600; } .about-story__nameplate { position: absolute; inset-inline: 20px; inset-block-end: 20px; z-index: 1; display: flex; flex-direction: row; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--brand-bright), var(--brand-deep)); border-radius: 16px; padding: 16px 20px; border: 1px solid rgba(255,255,255,.45); box-shadow: 0 18px 34px rgba(224,178,0,.38), 0 4px 12px rgba(32,28,29,.22); transition: transform var(--dur) ease, box-shadow var(--dur) ease; } .about-story__nameplate:hover { transform: translateY(-3px); box-shadow: 0 22px 40px rgba(224,178,0,.46), 0 6px 14px rgba(32,28,29,.26); } .about-story__nameplate-badge { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--brand); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); } .about-story__nameplate-badge svg { width: 22px; height: 22px; } .about-story__nameplate-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .about-story__nameplate-text strong { display: block; font-size: 1.4rem; font-weight: 800; color: var(--ink); line-height: 1.2; letter-spacing: -.005em; } .about-story__nameplate-text span { font-size: .86rem; font-weight: 700; color: var(--ink); opacity: .72; } @media (max-width: 480px) { .about-story__nameplate { inset-inline: 12px; inset-block-end: 12px; padding: 13px 16px; gap: 11px; } .about-story__nameplate-text strong { font-size: 1.15rem; } .about-story__nameplate-badge { width: 38px; height: 38px; } } .about-story__text > * + * { margin-block-start: 16px; } .about-story__text p { color: var(--muted); line-height: 1.8; } .about-story__text > * + * { margin-block-start: 16px; } .about-story__text p { color: var(--muted); line-height: 1.8; } .value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 900px) { .value-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .value-grid { grid-template-columns: 1fr; } } .value-card { text-align: center; padding: 10px; } .value-card__icon { width: 60px; height: 60px; border-radius: 50%; background: var(--ink); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-block-end: 16px; } .value-card__icon svg { width: 27px; height: 27px; } .value-card__title { font-weight: 800; margin-block-end: 6px; } .value-card__text { font-size: .88rem; color: var(--muted); line-height: 1.6; } /* ===== Chairman's quote ===== */ .quote-card { position: relative; max-width: 880px; margin-inline: auto; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(36px, 6vw, 56px); box-shadow: var(--shadow-sm); } .quote-card__mark { display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-block-end: 18px; width: 56px; height: 56px; border-radius: 50%; background: rgba(243,196,0,.14); color: var(--brand-deep); } .quote-card__mark svg { width: 26px; height: 26px; } .quote-card__eyebrow { justify-content: center; margin-block-end: 18px; } .quote-card__text { font-size: 1.05rem; line-height: 2; color: var(--ink-2); } .quote-card__author { margin-block-start: 26px; padding-block-start: 20px; border-top: 1px solid var(--line); } .quote-card__author strong { display: block; font-size: 1.05rem; font-weight: 800; } .quote-card__author span { font-size: .85rem; color: var(--muted); font-weight: 600; } /* ===== Mission / Vision ===== */ .mv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (max-width: 760px) { .mv-grid { grid-template-columns: 1fr; } } .mv-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; } .mv-card__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(243,196,0,.14); color: var(--brand-deep); margin-block-end: 16px; } .mv-card__icon svg { width: 25px; height: 25px; } .mv-card__title { font-size: 1.2rem; font-weight: 800; margin-block-end: 14px; } .mv-card__text { color: var(--muted); line-height: 1.8; } .mv-card__list { list-style: none; display: flex; flex-direction: column; gap: 12px; } .mv-card__list li { position: relative; padding-inline-start: 26px; color: var(--ink-2); line-height: 1.6; font-size: .95rem; } .mv-card__list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); box-shadow: inset 0 0 0 4px rgba(255,255,255,.85); } /* ===== Tag cloud (achievement areas / services) ===== */ .tag-cloud { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; } .tag-pill { display: inline-flex; align-items: center; background: #fff; border: 1.5px solid var(--line); color: var(--ink-2); font-weight: 600; font-size: .88rem; padding: 8px 16px; border-radius: 999px; transition: border-color var(--dur) ease, color var(--dur) ease, transform var(--dur) ease; } .tag-pill:hover { border-color: var(--brand); color: var(--ink); transform: translateY(-2px); } .tag-pill--brand { background: var(--cream); border-color: var(--cream); font-weight: 700; } .tag-pill--brand:hover { background: #fff; border-color: var(--brand); } /* ===== Goals ===== */ .goal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .goal-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .goal-grid { grid-template-columns: 1fr; } } .goal-item { display: flex; flex-direction: row; align-items: flex-start; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; transition: transform var(--dur) ease, box-shadow var(--dur) ease; } .goal-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .goal-item__num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--brand); font-weight: 800; font-size: .95rem; } .goal-item p { font-size: .92rem; color: var(--ink-2); line-height: 1.7; } /* ===== Why us — check grid ===== */ .check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; max-width: 1000px; margin-inline: auto; } @media (max-width: 760px) { .check-grid { grid-template-columns: 1fr; } } .check-item { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; transition: border-color var(--dur) ease, transform var(--dur) ease; } .check-item:hover { border-color: var(--brand); transform: translateY(-2px); } .check-item svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--brand-deep); margin-block-start: 1px; } .check-item span { font-size: .92rem; color: var(--ink-2); line-height: 1.6; } /* ===== Full services list ===== */ .service-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 22px; } @media (max-width: 900px) { .service-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .service-list { grid-template-columns: 1fr; } } .service-list__item { display: flex; flex-direction: row; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; transition: border-color var(--dur) ease, transform var(--dur) ease, box-shadow var(--dur) ease; } .service-list__item:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .service-list__num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cream); color: var(--brand-deep); font-weight: 800; font-size: .78rem; } .service-list__item span:last-child { font-size: .88rem; color: var(--ink-2); line-height: 1.4; } /* ===== Work gallery ===== */ .work-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 900px) { .work-gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .work-gallery { grid-template-columns: 1fr; } } .work-gallery__item { border-radius: 14px; overflow: hidden; border: 2px solid var(--brand); aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); transition: transform .4s ease, box-shadow .4s ease; } .work-gallery__item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .work-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .work-gallery__item:hover img { transform: scale(1.08); } /* ===== Working hours banner ===== */ .hours-banner { display: flex; flex-direction: row; align-items: center; gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; margin-block-start: 20px; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) ease, transform var(--dur) ease; } .hours-banner:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .hours-banner__icon { flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; background: var(--cream); color: var(--brand-deep); display: flex; align-items: center; justify-content: center; } .hours-banner__icon svg { width: 25px; height: 25px; } .hours-banner__info { flex: 1; min-width: 0; } .hours-banner__title-row { display: flex; flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; margin-block-end: 8px; } .hours-banner__title-row h3 { font-size: 1.05rem; font-weight: 800; } .hours-banner__status { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; } .hours-banner__status.is-open { background: rgba(34,153,84,.12); color: #1e7b34; } .hours-banner__status.is-closed { background: rgba(122,31,26,.1); color: #7a1f1a; } .hours-banner__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .hours-banner__status.is-open .hours-banner__dot { animation: dot-pulse 1.8s ease-in-out infinite; } @keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .hours-banner__times { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: .9rem; } .hours-banner__sep { opacity: .5; } @media (max-width: 560px) { .hours-banner { flex-direction: column; text-align: center; } .hours-banner__title-row, .hours-banner__times { justify-content: center; } } /* ===== Package detail page ===== */ .pkg-detail-head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; background: var(--cream); border-radius: var(--radius); padding: 24px 28px; } .pkg-detail-head__price { display: flex; flex-direction: row; align-items: baseline; gap: 8px; } .pkg-detail-head__price strong { font-size: 2rem; font-weight: 800; direction: ltr; } @media (max-width: 640px) { .pkg-detail-head { flex-direction: column; text-align: center; } } .pkg-detail-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-block-start: 28px; } @media (max-width: 760px) { .pkg-detail-summary { grid-template-columns: 1fr; } } .pkg-detail-cta-note { max-width: 640px; margin-inline: auto; text-align: center; margin-block-start: 40px; } .spec-groups { display: flex; flex-direction: column; gap: 22px; margin-block-start: 28px; } .spec-group { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .spec-group__title { background: var(--brand); color: var(--ink); font-weight: 800; padding: 12px 20px; font-size: 1rem; } .spec-group__rows { display: flex; flex-direction: column; } .spec-group__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px 20px; border-block-end: 1px solid var(--line); } .spec-group__row:last-child { border-block-end: none; } .spec-group__row:nth-child(even) { background: var(--cream); } .spec-group__label { font-weight: 700; color: var(--ink-2); font-size: .88rem; } .spec-group__value { color: var(--muted); font-size: .88rem; line-height: 1.6; } @media (max-width: 640px) { .spec-group__row { grid-template-columns: 1fr; gap: 4px; } .spec-group__label { font-size: .85rem; } }