:root {
--primary: #ff3e41;
--secondary: #0e1b91;
--light: #F8F2F0;
--dark: #060315;
--default-color: #313030; /* Default color used for the majority of the text content across the entire website */
--accent-color: #ff3e41; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
--contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}
*{
font-family: "Harmattan", sans-serif;
}
h1,h2,h3,h4,h5,h6{
font-family: "Fustat", sans-serif !important;
}
/* =============================================================================
KAYAN — PREMIUM HEADER (v3)
- RTL-aware, Bootstrap-safe, GPU-smooth
- Dropdowns + Mega, Mobile Drawer + Accordion
- Clear sections, variables, responsive guards
============================================================================= */
/* ========== 0) TOKENS & FALLBACKS ========================================= */
:root{
--k-primary: var(--accent, var(--primary));
--k-primary-2: color-mix(in srgb, var(--k-primary) 78%, #4019ee);
--k-ink: var(--ink, #0e1320);
--k-ink-2: #3a465b;
--k-edge: var(--edge, #e9eef7);
--k-bg: #ffffff;
--k-glass: color-mix(in srgb, #fff 92%, transparent);
--k-radius: 12px;
--k-shadow: 0 10px 24px rgba(6,9,15,.06);
}
/* ========== 1) HEADER SHELL =============================================== */
.k-header{
position: sticky; top: 0; z-index: 1000;
background: var(--k-glass);
border-block-end: 1px solid rgba(0,0,0,.05);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.6);
backdrop-filter: saturate(120%) blur(6px);
transition: box-shadow .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.k-header.is-scrolled{ background:#fff; border-color:transparent; box-shadow:var(--k-shadow) }
.k-header.is-hide{ transform: translateY(calc(-100% - env(safe-area-inset-top,0px))) }
body.admin-bar .k-header{ top:32px }
.k-header__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:66px }
/* ========== 2) BRAND ======================================================= */
.k-brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none }
.k-brand .custom-logo{ max-height:40px; height:auto; width:auto; object-fit:contain }
@media (min-width:992px){ .k-brand .custom-logo{ max-height:46px } }
.k-brand__text{ font:900 18px/1 system-ui,Segoe UI,Roboto,Inter,sans-serif; color:var(--k-ink) }
/* Optional: constrain custom logo link box (if original logo is tall) */
.custom-logo-link{ width:150px; height:86px }
.custom-logo-link img{ width:100%; height:100%; object-fit:cover }
/* ========== 3) DESKTOP NAV (Bootstrap-proof) =============================== */
.k-nav{ display:none }
@media (min-width:992px){ .k-nav{ display:block } }
/* normalize any bootstrap structure */
.k-header .k-nav .k-menu,
.k-header .k-nav .nav,
.k-header .k-nav .navbar-nav{
display:flex !important; align-items:center; gap:24px; margin:0; padding:0; list-style:none;
}
.k-header .k-nav li{ position:relative; margin:0; padding:0 }
/* links */
.k-header .k-nav .k-menu > li > a,
.k-header .k-nav .nav-link{
display:block !important; padding:11px 12px !important;
border-radius:var(--k-radius) !important; border:0 !important; background:transparent !important;
color:var(--k-ink) !important; font-weight:800; font-size:14px; letter-spacing:.2px; text-transform:uppercase;
text-decoration:none; transition: color .15s, background .15s, transform .15s;
}
/* hover / active */
.k-header .k-nav .k-menu > li > a:hover,
.k-header .k-nav .nav-link:hover,
.k-header .k-nav .k-menu > li.current-menu-item > a,
.k-header .k-nav .k-menu > li.current_page_item > a,
.k-header .k-nav .k-menu > li.current-menu-ancestor > a,
.k-header .k-nav .k-menu > li.current_page_ancestor > a,
.k-header .k-nav .nav-link.active{
color:var(--k-primary) !important; background:#f5f8ff !important;
}
/* underline accent */
.k-header .k-nav .k-menu > li > a::after,
.k-header .k-nav .nav-link::after{
content:""; position:absolute; inset-inline:12px; inset-block-end:6px;
height:2px; background: currentColor; border-radius:2px; opacity:0; transform:scaleX(0);
transition: transform .2s ease, opacity .2s ease;
}
.k-header .k-nav .k-menu > li > a:hover::after,
.k-header .k-nav .k-menu > li.current-menu-item > a::after,
.k-header .k-nav .nav-link.active::after{ opacity:.9; transform:scaleX(1) }
/* 3.1) Dropdowns */
.k-header .k-nav li.menu-item-has-children > a{ padding-inline-end:28px !important }
.k-header .k-nav li.menu-item-has-children > a::before{
content:""; position:absolute; inset-inline-end:10px; inset-block:0; margin:auto; width:8px; height:8px;
border:2px solid currentColor; border-top-color:transparent; border-left-color:transparent;
transform:rotate(45deg); opacity:.7;
}
.k-header .k-nav li.menu-item-has-children > .sub-menu{
position:absolute; inset-inline-start:0; inset-block-start: calc(100% + 12px);
min-width:240px; padding:8px; margin:0; list-style:none; background:#fff;
border:1px solid var(--k-edge); border-radius:14px; box-shadow:0 18px 44px rgba(6,9,15,.10);
opacity:0; transform: translateY(8px); pointer-events:none; transition: opacity .18s ease, transform .18s ease;
}
html[dir="rtl"] .k-header .k-nav li.menu-item-has-children > .sub-menu{ inset-inline-end:0; inset-inline-start:auto }
.k-header .k-nav li.menu-item-has-children:hover > .sub-menu,
.k-header .k-nav li.menu-item-has-children:focus-within > .sub-menu{ opacity:1; transform:none; pointer-events:auto }
.k-header .k-nav .sub-menu li{ margin:0 }
.k-header .k-nav .sub-menu a{
display:block; padding:10px 12px !important; border-radius:10px !important;
color:#101828 !important; background:transparent !important; white-space:nowrap;
}
.k-header .k-nav .sub-menu a:hover{ background:#f6f8fc !important; color:var(--k-primary) !important }
/* 3.2) Mega menu (parent gets .mega) */
.k-header .k-nav li.mega > .sub-menu{ width:min(920px, 90vw); padding:14px; border-radius:16px }
.k-header .k-nav li.mega > .sub-menu{ display:grid; grid-template-columns:repeat(3, minmax(180px,1fr)); gap:10px 16px }
@media (max-width:1200px){ .k-header .k-nav li.mega > .sub-menu{ grid-template-columns:repeat(2,1fr) } }
.k-header .k-nav li.mega > .sub-menu > li > a{ font-weight:800; color:var(--k-ink) !important }
.k-header .k-nav li.mega > .sub-menu .sub-menu{ margin-inline-start:0 }
.k-header .k-nav li.mega > .sub-menu .sub-menu a{ font-weight:700; color:var(--k-ink-2) !important }
/* ========== 4) ACTIONS ===================================================== */
.k-actions{ display:flex; align-items:center; gap:10px }
.k-action{
display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 12px;
border-radius:var(--k-radius); background:#f6f8fc; color:#0e1320; font-weight:800; text-decoration:none;
}
.k-action:hover{ filter:brightness(1.05) }
.k-cta{
border-radius:var(--k-radius); font-weight:800;
background:linear-gradient(135deg,var(--k-primary),var(--k-primary-2));
color:#fff !important; box-shadow:0 10px 26px rgba(15,108,189,.25);
}
.k-cta:hover{ filter:brightness(1.05) }
/* ========== 5) BURGER & RESPONSIVE SWITCH ================================= */
.k-burger{
display:inline-flex; flex-direction:column; gap:5px; width:44px; height:44px;
align-items:center; justify-content:center; border:0; border-radius:var(--k-radius);
background:#f6f8fc; cursor:pointer;
}
.k-burger__line{ width:20px; height:2px; background:#0e1320; border-radius:2px; transition: transform .2s, opacity .2s }
.k-burger.is-open .k-burger__line:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.k-burger.is-open .k-burger__line:nth-child(2){ opacity:0 }
.k-burger.is-open .k-burger__line:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
@media (min-width:992px){ .k-burger{ display:none } }
@media (max-width:991.98px){ .k-nav{ display:none !important } }
/* ========== 6) SEARCH (optional) ========================================== */
.k-search[hidden]{ display:none }
.k-search{ position:sticky; top:66px; z-index:995; background:#fff; border-block-end:1px solid var(--k-edge) }
.k-search__inner{ display:flex; gap:12px; align-items:center; padding:12px 0 }
.k-search input[type="search"]{ width:100%; height:44px; border:1px solid var(--k-edge); border-radius:var(--k-radius); padding:0 12px }
.k-search__close{ width:40px; height:40px; border-radius:var(--k-radius); background:#f6f8fc; border:0; font-size:20px }
/* ========== 7) MOBILE DRAWER ============================================== */
.k-drawer[hidden]{ display:none }
.k-drawer{
position:fixed; inset-block:0; inset-inline-end:0; width:min(86vw, 360px);
background:#fff; z-index:1100; box-shadow:0 20px 60px rgba(6,9,15,.22);
transform:translateX(110%); transition:transform .25s ease; contain:content;
overflow-y: scroll;
}
html[dir="rtl"] .k-drawer{ inset-inline-start:0; inset-inline-end:auto; transform:translateX(-110%) }
.k-drawer.is-open{ transform:translateX(0) !important}
.k-drawer__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 16px; border-bottom:1px solid var(--k-edge) }
.k-drawer__title{ font-weight:800 }
.k-drawer__close{ width:36px; height:36px; border:0; border-radius:10px; background:#f6f8fc; font-size:20px; cursor:pointer }
.k-drawer__nav{ padding:12px }
.k-drawer__nav .k-menu--mobile,
.k-drawer__nav .nav,
.k-drawer__nav .navbar-nav{
display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none;
}
.k-drawer__nav li{ margin:0 }
.k-drawer__nav .k-menu--mobile a,
.k-drawer__nav .nav-link{
display:flex !important; align-items:center; justify-content:space-between;
padding:12px 14px !important; border-radius:var(--k-radius) !important;
color:#0e1320 !important; background:#f7f9fc !important; border:1px solid var(--k-edge) !important;
font-weight:800; text-decoration:none;
}
.k-drawer__nav .k-menu--mobile a:hover,
.k-drawer__nav .nav-link:hover{ background:#eef5ff !important; border-color:#e1edff !important }
/* mobile submenus (accordion) — toggled by JS on .is-open */
.k-drawer__nav .sub-menu{ display:none; padding:8px 8px 6px 12px; border-inline-start:2px solid #eef2fa; margin:6px 0 0 0 }
html[dir="rtl"] .k-drawer__nav .sub-menu{ padding:8px 12px 6px 8px }
.k-drawer__nav li.is-open > .sub-menu{ display:block }
.k-drawer__nav li.menu-item-has-children > a::after{
content:""; width:8px; height:8px; margin-inline-start:10px; flex:0 0 auto;
border:2px solid currentColor; border-top-color:transparent; border-left-color:transparent;
transform: rotate(45deg); opacity:.7;
}
.k-drawer__nav li.is-open > a::after{ transform: rotate(-135deg) }
/* drawer actions */
.k-drawer__actions{ display:grid; gap:10px; padding:10px 16px 16px }
/* ========== 8) SCRIM ======================================================= */
.k-scrim[hidden]{ display:none }
.k-scrim{ position:fixed; inset:0; z-index:1095; background:rgba(6,9,15,.45); opacity:0; transition:opacity .2s ease }
.k-scrim.is-open{ opacity:1 }
/* ========== 9) MODES & ACCESSIBILITY ===================================== */
.k-header--transparent .k-header{ background:transparent; border-color:transparent; box-shadow:none }
.k-header--transparent .k-header.is-scrolled{ background:#fff; box-shadow:var(--k-shadow) }
.k-header a:focus-visible,
.k-drawer a:focus-visible,
.k-burger:focus-visible,
.k-drawer__close:focus-visible{
outline:2px solid color-mix(in srgb, var(--k-primary), #fff 30%);
outline-offset:2px; border-radius:10px;
}
@media (prefers-reduced-motion: reduce){
.k-scrim, .k-drawer, .k-burger__line, .k-header,
.k-header .k-nav a::after{ transition:none !important }
}
/* ======================== */
/* =============================================================================
KAYAN — HERO (Vanilla)
Identity colors inherited from:
:root { --primary:#FF3E41; --secondary:#0e1b91; --light:#F8F2F0; --dark:#060315;
--default-color:#313030; --accent-color:#FF3E41; --contrast-color:#fff; }
============================================================================= */
.k-hero{
position:relative; min-height: clamp(540px, 86vh, 920px); color: var(--contrast-color);
isolation:isolate; overflow:hidden; background: #000;
}
.k-hero__slides{ position:relative; height:100% }
.k-hero__slide{
position:absolute; inset:0; opacity:0; transform:scale(1.02);
transition: opacity .6s ease, transform .6s ease;
display:grid; place-items:stretch;
}
.k-hero__slide.is-active{ opacity:1; transform:none; z-index:2 }
.k-hero__media{ position:absolute; inset:0; z-index:0 }
.k-hero__media img{
width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02);
transform:scale(1.02); transition:transform 6s cubic-bezier(.2,.7,.2,1);
}
.k-hero__slide.is-active .k-hero__media img{ transform:scale(1.08) } /* subtle ken burns */
.k-hero__overlay{
position:absolute; inset:0; z-index:1;
background:
radial-gradient(900px 500px at 12% 18%, color-mix(in srgb, var(--secondary), transparent 45%), transparent 60%),
linear-gradient(180deg, rgba(6,3,21,.35), rgba(6,3,21,.65) 60%, rgba(6,3,21,.75));
mix-blend-mode:normal;
}
.k-hero__inner{ position:relative; z-index:2; display:grid; align-items:center; height:100% }
.k-hero__copy{
max-width: 860px; margin-inline: auto; text-align: start;
padding: clamp(16px, 2.5vw, 28px) clamp(12px, 2vw, 24px);
backdrop-filter: blur(0.5px);
}
html[dir="rtl"] .k-hero__copy{ text-align: right }
.k-hero__eyebrow{
margin:0 0 10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
color: color-mix(in srgb, var(--light), #ffffff 25%);
}
.k-hero__title{
margin:0 0 10px; line-height:1.1; font-weight:900;
font-size: clamp(26px, 5.4vw, 58px); color:#fff; text-wrap:balance;
}
.k-hero__accent{ color: var(--primary); text-shadow: 0 4px 22px rgba(255,62,65,.35) }
.k-hero__sub{
margin: 6px 0 18px; color: #e9edf6; font-size: clamp(15px, 2.3vw, 19px);
max-width: 72ch;
}
.k-hero__ctas{ display:flex; gap:10px; flex-wrap:wrap }
.k-btn{
--h: 46px; --px: 18px; --r: 12px;
display:inline-flex; align-items:center; justify-content:center; height:var(--h);
padding-inline:var(--px); border-radius:var(--r); font-weight:900; text-decoration:none; line-height:1;
transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.k-btn:active{ transform: translateY(1px) }
.k-btn--solid{
color: var(--contrast-color);
background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #ff8e90));
box-shadow: 0 10px 26px rgba(255,62,65,.25);
}
.k-btn--solid:hover{ filter: brightness(1.05) }
.k-btn--ghost{
color:#fff; border:1.6px solid rgba(255,255,255,.65);
background: color-mix(in srgb, #ffffff 6%, transparent);
}
/* Controls & dots */
.k-hero__controls{
position:absolute; inset-inline:0; inset-block-end:18px; z-index:3;
display:flex; align-items:center; justify-content:center; gap:12px;
}
.k-hero__ctrl{
width:42px; height:42px; border-radius:12px; border:0; cursor:pointer;
color:#0b1020; background:#fff; font-weight:900;
box-shadow: 0 10px 20px rgba(0,0,0,.18);
}
.k-hero__ctrl:hover{ filter:brightness(1.05) }
.k-hero__dots{ display:flex; gap:8px; align-items:center }
.k-hero__dots button{
width:10px; height:10px; border-radius:999px; border:0; cursor:pointer;
background: rgba(255,255,255,.5); transition:transform .18s, background .18s;
}
.k-hero__dots button[aria-selected="true"]{
width:26px; border-radius:999px; background: var(--primary); transform: translateY(-1px);
}
/* Progress bar for autoplay */
.k-hero__progress{
position:absolute; inset-inline:0; inset-block-end:0; height:3px; z-index:2;
background: linear-gradient(90deg, var(--primary), var(--secondary));
opacity:.18;
}
.k-hero__progress span{
display:block; height:100%; width:0%;
background: currentColor; color: var(--primary);
transition: width .2s linear;
}
/* Responsive paddings */
@media (max-width: 640px){
.k-hero{ min-height: 74vh }
.k-hero__copy{ padding-inline: 14px }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.k-hero__slide,
.k-hero__media img{ transition:none !important; transform:none !important }
}
/* --- CRITICAL HEIGHT FIXES --- */
.k-hero{
position:relative;
/* keep your min-height but also expose it to children */
min-block-size: clamp(540px, 86vh, 920px);
/* turn section into a formatting context for absolute slides */
display:block;
}
.k-hero__slides{
position:relative;
/* IMPORTANT: inherit the min-height so inner abs-pos slides know the size */
min-block-size: inherit;
block-size: auto; /* prevent collapsing */
}
.k-hero__slide{
position:absolute; inset:0;
display:grid; place-items:stretch;
opacity:0; transform:scale(1.02);
transition: opacity .6s ease, transform .6s ease;
contain:layout paint; /* small perf win */
}
.k-hero__slide.is-active{ opacity:1; transform:none; z-index:2 }
.k-hero__media{ position:absolute; inset:0; z-index:0; overflow:hidden }
.k-hero__media img{
display:block; /* remove inline gap + ensure we occupy box fully */
inline-size:100%;
block-size:100%;
object-fit:cover;
filter:saturate(1.05) contrast(1.02);
transform:scale(1.02);
transition:transform 6s cubic-bezier(.2,.7,.2,1);
}
.k-hero__slide.is-active .k-hero__media img{ transform:scale(1.08) }
/* --- INNER LAYOUT GUARDRAILS --- */
.k-hero__inner{
position:relative; z-index:2;
min-block-size: inherit; /* ensures vertical centering area exists */
display:grid; align-items:center;
}
.k-hero__copy{
max-inline-size: 860px;
margin-inline: auto;
text-align:start;
padding: clamp(16px, 2.5vw, 28px) clamp(12px, 2vw, 24px);
}
html[dir="rtl"] .k-hero__copy{ text-align:right }
/* --- CONTROLS: keep centered under the hero even if page has other flow --- */
.k-hero__controls{
position:absolute; inset-inline:0; inset-block-end:18px; z-index:3;
display:flex; align-items:center; justify-content:center; gap:12px;
pointer-events:none; /* allow clicks to pass if overlap */
}
.k-hero__ctrl{ pointer-events:auto } /* restore for buttons */
/* --- SMALL VIEWPORT TWEAKS --- */
@media (max-width: 640px){
.k-hero{ min-block-size: 74vh }
.k-hero__copy{ padding-inline: 14px }
.k-hero__title{ font-size: clamp(24px, 6vw, 38px) } /* slightly smaller for fit */
.k-hero__sub{ font-size: clamp(14px, 3.4vw, 17px) }
}
/* --- (unchanged) overlay & buttons from your sheet can remain as-is --- */
/* ======================== */
/* ===========================
Kayan — USP Bar
يعتمد على ألوان الهوية:
--primary:#FF3E41; --secondary:#0e1b91; --light:#F8F2F0; --dark:#060315;
--default-color:#313030; --accent-color:#FF3E41; --contrast-color:#fff;
=========================== */
.k-usp{
position:relative; z-index:2;
background: linear-gradient(180deg, rgba(14,27,145,.06), transparent 60%), #fff;
border-block-end: 1px solid #eef1f6;
}
.k-usp .container{ padding-block: 18px }
.k-usp__list{
--gap: 14px;
display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
gap: var(--gap); margin:0; padding:0; list-style:none;
}
.k-usp__item{
display:flex; align-items:center; gap:12px;
background:#fff; border:1px solid #e9eef7; border-radius:14px;
padding:12px 14px;
box-shadow: 0 8px 22px rgba(6,9,15,.05);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
will-change: transform;
}
.k-usp__item:hover{
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(6,9,15,.08);
border-color: #dfe7f5;
}
.k-usp__icon{
display:inline-grid; place-items:center; flex:0 0 44px;
width:44px; height:44px; border-radius:12px;
color:#fff; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 65%, #ff8e90));
box-shadow: 0 8px 18px rgba(255,62,65,.25);
}
.k-usp__icon svg{ display:block }
.k-usp__text{ min-width:0 }
.k-usp__text strong{
display:block; color: var(--dark); font-weight:900; font-size:15px; line-height:1.15; margin-bottom:2px;
}
.k-usp__text span{
display:block; color:#5f6b85; font-size:13px; line-height:1.35; text-wrap:balance;
}
/* RTL تحسينات بسيطة */
html[dir="rtl"] .k-usp__item{ text-align:right }
/* Responsive */
@media (max-width: 1200px){
.k-usp__list{ grid-template-columns: repeat(3,1fr) }
}
@media (max-width: 820px){
.k-usp__list{ grid-template-columns: repeat(2,1fr) }
}
@media (max-width: 520px){
.k-usp__list{ grid-template-columns: 1fr }
}
/* IO entrance animation */
.k-usp__item{ opacity:0; transform: translateY(10px); }
.k-usp__item.is-in{ opacity:1; transform:none; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s }
.k-usp__item:nth-child(2).is-in{ transition-delay:.05s }
.k-usp__item:nth-child(3).is-in{ transition-delay:.1s }
.k-usp__item:nth-child(4).is-in{ transition-delay:.15s }
/* ============================================================================
KAYAN — ABOUT (Vanilla, RTL-aware)
============================================================================ */
.k-about{ padding-block: clamp(40px, 6vw, 80px); padding-inline: 10px; background: var(--light) }
.k-about__grid{
display:grid; gap: clamp(22px, 3vw, 34px);
grid-template-columns: 1fr; align-items:center;
}
@media (min-width: 992px){
.k-about__grid{ grid-template-columns: 1fr 1.05fr }
}
/* Media */
.k-about__media{ margin:0 }
.k-about__frame{
position:relative; width: min(520px, 90%); aspect-ratio: 10/18;
border-radius: 20px; overflow:hidden;
box-shadow: 0 30px 80px rgba(6,9,15,.25);
background: #000;
}
.k-about__video{
width:100%; height:100%; object-fit:cover; display:block;
filter: saturate(1.05) contrast(1.02);
}
.k-about__ring{
position:absolute; inset:auto -40px -40px auto; width:180px; height:180px;
border-radius:50%;
background: radial-gradient(circle at 30% 30%, var(--secondary), transparent 60%);
opacity:.25; pointer-events:none;
}
.k-about__caption{
margin-top:10px; color:#6b7280; font-size: 13px;
}
/* Text */
.k-about__copy{ max-width: 720px }
.k-about__eyebrow{
margin:0 0 6px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
color: color-mix(in srgb, var(--secondary) 78%, #fff 0%);
}
.k-about__title{
margin:0 0 10px; font-weight:900; line-height:1.15;
font-size: clamp(22px, 4.8vw, 38px); color: var(--dark);
}
.k-about__lead{
margin: 0 0 16px; color: var(--default-color); font-size: clamp(15px, 2.4vw, 18px)
}
/* Features */
.k-about__features{
list-style:none; margin: 18px 0 18px; padding:0;
display:grid; gap:14px; grid-template-columns: 1fr;
}
@media (min-width: 680px){ .k-about__features{ grid-template-columns: 1fr 1fr } }
.k-about__features li{
display:grid; grid-template-columns: 44px 1fr; gap:12px;
align-items:flex-start; background:#fff; border:1px solid #eef1f6; border-radius:14px;
padding:12px 14px;
}
.k-about__features h3{ margin:0 0 6px; font-weight:800; color: var(--dark); font-size: 18px }
.k-about__features p{ margin:0; color:#475569; font-size: 14.5px; line-height:1.6 }
.k-i{
display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
color:#fff; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 65%, #ff8587));
box-shadow: 0 8px 18px rgba(255,62,65,.25);
}
.k-i svg{ width:22px; height:22px }
/* Actions */
.k-about__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-block: 8px 6px }
.k-btn{
--h: 46px; --px: 18px; --r: 12px;
display:inline-flex; align-items:center; justify-content:center; height:var(--h);
padding-inline:var(--px); border-radius:var(--r); font-weight:900; text-decoration:none; line-height:1;
transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.k-btn:active{ transform: translateY(1px) }
.k-btn--solid{
color:#fff; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #ff8e90));
box-shadow: 0 10px 26px rgba(255,62,65,.25);
}
.k-btn--solid:hover{ filter:brightness(1.05) }
.k-btn--ghost{
color: var(--dark); background:#fff; border:1.6px solid #e9eef7;
}
.k-btn--ghost:hover{ filter:brightness(1.02) }
/* Stats / Trust */
.k-about__stats{
display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px;
margin-top: 12px;
}
.k-stat{
background:#fff; border:1px solid #eef1f6; border-radius:14px; padding:12px; text-align:center
}
.k-stat__num{
font-weight:900; font-size: clamp(20px, 4.2vw, 30px); color: var(--secondary);
display:block;
}
.k-stat__label{ font-size:13px; color:#64748b }
/* In-view animation (optional) */
[data-about].is-in .k-about__frame{ transform:none; opacity:1 }
[data-about] .k-about__frame{ transform:translateY(12px); opacity:0; transition:transform .6s, opacity .6s }
[data-about].is-in .k-about__features li{ transform:none; opacity:1 }
[data-about] .k-about__features li{ transform:translateY(10px); opacity:0; transition:transform .5s, opacity .5s }
[data-about].is-in .k-about__stats{ transform:none; opacity:1 }
[data-about] .k-about__stats{ transform:translateY(8px); opacity:0; transition:transform .5s .05s, opacity .5s .05s }
@media (prefers-reduced-motion: reduce){
[data-about] .k-about__frame,
[data-about] .k-about__features li,
[data-about] .k-about__stats{ transition:none !important; transform:none !important; opacity:1 !important }
}
/* ======================== */
/* ============================================================================
Kayan — Proof Stack Banner (Premium, RTL-aware)
- Brand-driven gradient background
- Subtle SVG mesh overlay
- Animated counters
============================================================================ */
.k-proof{
position:relative; isolation:isolate;
padding-block: clamp(28px, 6vw, 64px);
color: var(--contrast-color, #fff);
overflow:hidden;
padding-inline: 10px;
}
.k-proof .container{ position:relative; z-index:2 }
/* --- Background layers --- */
.k-proof__bg{ position:absolute; inset:0; z-index:0; pointer-events:none }
.k-proof__grad{
position:absolute; inset:0;
/* Brand gradient: primary -> secondary with soft vignette */
background:
radial-gradient(1200px 600px at 80% 0%, rgba(255,255,255,.06), transparent 60%),
linear-gradient(135deg, var(--primary, #FF3E41), color-mix(in srgb, var(--secondary, #0e1b91) 84%, #1c2be0));
}
.k-proof__mesh{
position:absolute; inset:0; opacity:.55; mix-blend-mode:soft-light;
width:100%; height:100%; display:block;
}
/* --- Heading block --- */
.k-proof__head{ text-align:center; margin-bottom: clamp(18px, 4vw, 28px) }
.k-proof__eyebrow{
margin:0 0 6px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
color: color-mix(in srgb, #fff 78%, var(--light, #F8F2F0));
}
.k-proof__title{
margin:0; font-weight:900; line-height:1.1;
font-size: clamp(26px, 4.6vw, 44px); text-wrap:balance;
text-shadow: 0 8px 22px rgba(0,0,0,.22);
}
.k-proof__sub{
margin:8px auto 0; max-width: 68ch; color: color-mix(in srgb, #ffffff 86%, var(--light, #F8F2F0));
}
/* --- Google badge --- */
.k-proof__gbadge{
margin: 12px auto 0; display:inline-flex; align-items:center; gap:8px;
padding: 8px 12px; border-radius: 999px;
background: color-mix(in srgb, #ffffff 12%, transparent);
border: 1px solid rgba(255,255,255,.25);
color:#fff; text-decoration:none; font-weight:800;
transition: filter .15s ease, transform .15s ease;
}
.k-proof__gbadge:hover{ filter:brightness(1.05) }
.k-proof__gmark{ display:inline-flex }
.k-proof__gval{ font-variant-numeric: tabular-nums }
.k-proof__gsep{ opacity:.6 }
.k-proof__gcount{ opacity:.9 }
.k-proof__gcta{
margin-inline-start:6px; padding:4px 8px; border-radius:999px;
background: color-mix(in srgb, #ffffff 16%, transparent); font-weight:900;
}
/* --- KPI grid --- */
.k-proof__grid{
display:grid; gap: clamp(12px, 2.4vw, 18px);
grid-template-columns: repeat(4, minmax(0,1fr));
margin-top: clamp(18px, 4vw, 28px);
}
@media (max-width: 1024px){ .k-proof__grid{ grid-template-columns: repeat(2,1fr) } }
@media (max-width: 560px){ .k-proof__grid{ grid-template-columns: 1fr } }
.k-kpi{
background: color-mix(in srgb, #ffffff 10%, transparent);
border: 1px solid rgba(255,255,255,.22);
border-radius: 16px;
padding: 14px;
display:grid; align-content:center; gap:6px;
min-height: 110px;
box-shadow: 0 16px 44px rgba(6,9,15,.18);
backdrop-filter: blur(4px) saturate(108%);
}
.k-kpi__icon{
width:36px; height:36px; display:grid; place-items:center;
color:#fff; background: color-mix(in srgb, var(--secondary,#0e1b91), #ffffff 8%);
border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.2);
}
.k-kpi__icon svg{ width:20px; height:20px }
.k-kpi__num{
font-weight: 900; line-height:1; letter-spacing:.5px;
font-size: clamp(26px, 4.4vw, 40px);
text-shadow: 0 6px 18px rgba(0,0,0,.25);
display:flex; align-items:baseline; gap:2px;
}
.k-kpi__suffix{ font-size: .55em; opacity:.9 }
.k-kpi__label{ font-weight:800; color: color-mix(in srgb, #ffffff 90%, var(--light,#F8F2F0)); opacity:.95 }
/* --- CTA row --- */
.k-proof__cta{
margin-top: clamp(16px, 3.2vw, 22px);
display:flex; gap:10px; flex-wrap:wrap; justify-content:center
}
/* Shared button styles (matches your system) */
.k-btn{
--h: 46px; --px: 18px; --r: 12px;
display:inline-flex; align-items:center; justify-content:center;
height:var(--h); padding-inline:var(--px);
border-radius:var(--r); font-weight:900; text-decoration:none; line-height:1; border:0; cursor:pointer;
transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.k-btn:active{ transform: translateY(1px) }
.k-btn--solid{
color:#fff;
background: linear-gradient(135deg, var(--primary,#FF3E41), color-mix(in srgb, var(--primary,#FF3E41) 70%, #ff8e90));
box-shadow: 0 10px 26px rgba(255,62,65,.28);
}
.k-btn--ghost{
color:#fff; border:1px solid rgba(255,255,255,.35);
background: color-mix(in srgb, #ffffff 8%, transparent);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.k-proof__gbadge, .k-btn{ transition:none !important }
}
/* ======================== */
/* ============================================================================
KAYAN — SERVICES
Uses identity vars: --primary, --secondary, --light, --dark
============================================================================ */
.k-services{ position:relative; background: var(--light); padding-inline:10px; }
/* --- Header band with diagonal wave --- */
.k-services__head{
position:relative; padding-block: clamp(28px, 6vw, 54px) clamp(26px, 5vw, 42px);
background:
radial-gradient(800px 400px at 85% 20%, color-mix(in srgb, var(--secondary), #ffffff 70%), transparent 60%),
linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--light), #fff 55%) 100%);
overflow:hidden;
}
.k-services__wave{
position:absolute; inset-inline:0; inset-block-end:-1px; display:block; height:34px;
background: linear-gradient(180deg, transparent, rgba(0,0,0,.04));
-webkit-mask: radial-gradient(120% 34px at 50% 0, #000 99%, transparent 100%);
mask: radial-gradient(120% 34px at 50% 0, #000 99%, transparent 100%);
}
.k-services__intro{
display:grid; gap:16px; align-items:center;
grid-template-columns: 1fr; text-align:center;
}
@media (min-width: 992px){
.k-services__intro{ grid-template-columns: 1.1fr .9fr; text-align: start }
}
.k-eyebrow{
margin:0 0 8px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
color: var(--secondary);
}
.k-services__titles h2{
margin:0 0 6px; font-weight:900; line-height:1.15; color: var(--dark);
font-size: clamp(22px, 4.8vw, 36px);
}
.k-sub{ margin:0; color:#475569; font-size: clamp(14px, 2.4vw, 16px) }
.k-services__illus img{
inline-size: min(420px, 100%); block-size:auto; display:block; margin-inline:auto;
filter: drop-shadow(0 24px 60px rgba(6,9,15,.15));
}
/* --- Grid --- */
.k-services__grid{
display:grid; gap: clamp(14px, 2.5vw, 18px);
grid-template-columns: 1fr;
padding-block: clamp(18px, 3.6vw, 28px) clamp(34px, 5vw, 54px);
}
@media (min-width: 640px){ .k-services__grid{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (min-width: 1080px){ .k-services__grid{ grid-template-columns: repeat(3, minmax(0,1fr)) } }
/* --- Card --- */
.k-card{
display:grid; grid-template-rows: auto 1fr; border-radius: 16px;
background:#fff; border:1px solid #eef1f6; overflow:hidden;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
will-change: transform;
}
.k-card:hover{
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--secondary), #eaf0ff 78%);
box-shadow: 0 18px 44px rgba(6,9,15,.10);
}
/* media */
.k-card__media{ position:relative; display:block; aspect-ratio: 16/10; overflow:hidden }
.k-card__img{
inline-size:100%; block-size:100%; object-fit:cover; display:block;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.k-card:hover .k-card__img{ transform: scale(1.05) }
.k-card__shade{
position:absolute; inset:0;
background: linear-gradient(180deg, rgba(0,0,0,.00) 40%, rgba(0,0,0,.18) 100%);
opacity:.0; transition: opacity .25s ease; pointer-events:none;
}
.k-card:hover .k-card__shade{ opacity:.9 }
/* body */
.k-card__body{ padding: 12px 14px 14px }
.k-card__title{
margin:0 0 6px; font-weight:900; font-size: 18px; line-height:1.3; color: var(--dark)
}
.k-card__title a{ color:inherit; text-decoration:none }
.k-card__title a:hover{ color: var(--primary) }
.k-card__excerpt{
margin:0 0 12px; color:#5b6473; font-size:14.5px; line-height:1.7;
display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden;
}
.k-card__cta{ display:flex; justify-content:flex-start }
.k-arrow{
display:inline-flex; align-items:center; gap:8px; color:#0e1320;
font-weight:800; text-decoration:none; border-radius:10px; padding:8px 10px;
background:#f6f8fc; transition: transform .15s ease, filter .15s ease, background .2s ease;
}
.k-arrow:hover{ filter:brightness(1.03); background:#eef5ff; color:#0e1320 }
.k-arrow svg{ transition: transform .2s ease }
.k-arrow:hover svg{ transform: translateX(-2px) } /* RTL: arrow points right; translate negative for pull */
/* empty state */
.k-empty{ text-align:center; color:#6b7280; padding: 22px 0 }
/* ============================================================================
KAYAN — HOW WE WORK (Process Timeline)
Premium vertical timeline with animated reveal, gradient nodes,
glass-morphism cards, and connecting rail.
Tokens: --primary, --secondary, --dark, --light, --contrast-color
============================================================================ */
.k-process{
position:relative; isolation:isolate; overflow:hidden;
padding-block: clamp(44px, 8vw, 88px);
}
/* --- Decorative background --- */
.k-process__bg{ position:absolute; inset:0; z-index:0; pointer-events:none }
.k-process__gradient{
position:absolute; inset:0;
background:
radial-gradient(1000px 500px at 25% 0%, color-mix(in srgb, var(--secondary) 6%, transparent), transparent 55%),
radial-gradient(700px 400px at 80% 100%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 50%),
linear-gradient(180deg, #f9fafc 0%, #fff 40%, #f8fafb 100%);
}
.k-process__pattern{
position:absolute; inset:0; opacity:.35;
background-image:
radial-gradient(circle at 1px 1px, rgba(14,27,145,.07) 1px, transparent 0);
background-size: 32px 32px;
}
.k-process .container{ position:relative; z-index:2 }
/* --- Section header --- */
.k-process__head{ text-align:center; margin-bottom: clamp(28px, 5vw, 48px) }
.k-process__eyebrow{
display:inline-block; margin:0 0 10px; padding:6px 16px;
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, #fff), color-mix(in srgb, var(--secondary) 8%, #fff));
border:1px solid color-mix(in srgb, var(--primary) 14%, #f0f0f0);
border-radius:999px; font-weight:900; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
color: var(--primary);
}
.k-process__title{
margin:0 0 12px; font-weight:900; line-height:1.15; text-wrap:balance;
font-size: clamp(24px, 4.6vw, 42px); color: var(--dark);
}
.k-process__sub{
margin:0 auto; max-width:62ch; color:#4a5568; font-size: clamp(14px, 2.4vw, 17px); line-height:1.7;
}
/* --- Timeline layout --- */
.k-process__timeline{
position:relative;
display:grid; gap: clamp(24px, 4vw, 36px);
max-width:740px; margin-inline:auto;
padding-inline-start: 42px;
}
/* Connecting rail (vertical line) */
.k-process__rail{
position:absolute; inset-inline-start:19px; top:24px; bottom:24px;
width:2px; border-radius:2px;
background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 15%, #eef1f6), color-mix(in srgb, var(--secondary) 20%, #eef1f6));
}
.k-process__rail-fill{
width:100%; height:0%; border-radius:2px;
background: linear-gradient(180deg, var(--primary), var(--secondary));
transition: height 1.2s cubic-bezier(.22,.61,.36,1);
}
[data-process].is-in .k-process__rail-fill{ height:100% }
/* --- Step node (number circle on the rail) --- */
.k-process__node{
position:absolute; inset-inline-start:-42px; top:20px;
width:40px; height:40px; display:grid; place-items:center;
}
.k-process__number{
display:grid; place-items:center; width:36px; height:36px;
border-radius:50%; font-weight:900; font-size:15px; color:#fff; z-index:2;
background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 60%, var(--secondary)));
box-shadow: 0 6px 20px rgba(255,62,65,.3), 0 0 0 4px color-mix(in srgb, var(--primary) 12%, #fff);
transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.k-process__step:hover .k-process__number{
transform: scale(1.12);
box-shadow: 0 8px 28px rgba(255,62,65,.35), 0 0 0 6px color-mix(in srgb, var(--primary) 16%, #fff);
}
.k-process__pulse{
position:absolute; inset:0; border-radius:50%;
background: var(--primary); opacity:0; z-index:1;
animation: k-pulse 2.5s ease-out infinite;
}
@keyframes k-pulse{
0%{ transform:scale(.8); opacity:.35 }
100%{ transform:scale(2.2); opacity:0 }
}
/* --- Card (glass, interactive) --- */
.k-process__step{
position:relative;
transform: translateY(20px); opacity:0;
transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s ease;
}
[data-process].is-in .k-process__step{
transform: translateY(0); opacity:1;
}
/* stagger children */
[data-process].is-in .k-process__step:nth-child(2){ transition-delay:.1s }
[data-process].is-in .k-process__step:nth-child(3){ transition-delay:.2s }
[data-process].is-in .k-process__step:nth-child(4){ transition-delay:.3s }
[data-process].is-in .k-process__step:nth-child(5){ transition-delay:.4s }
.k-process__card{
display:grid; grid-template-columns: auto 1fr; gap: clamp(12px, 2vw, 20px);
align-items:start;
padding: clamp(16px, 3vw, 26px);
background: color-mix(in srgb, #fff 94%, var(--light));
border:1px solid #eef1f6;
border-radius:18px;
box-shadow: 0 8px 30px rgba(6,9,15,.04);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.k-process__card:hover{
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--primary) 22%, #eaf0ff);
box-shadow: 0 16px 44px rgba(6,9,15,.08);
}
/* Final step accent */
.k-process__card--final{
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 4%, #fff), color-mix(in srgb, var(--secondary) 4%, #fff));
border-color: color-mix(in srgb, var(--primary) 18%, #eef1f6);
}
/* Icon */
.k-process__icon{
width: clamp(44px, 6vw, 56px); height: clamp(44px, 6vw, 56px);
display:grid; place-items:center; flex-shrink:0;
border-radius:14px; color:#fff;
background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 65%, var(--secondary)));
box-shadow: 0 10px 24px rgba(255,62,65,.22);
transition: transform .3s ease;
}
.k-process__card:hover .k-process__icon{ transform: scale(1.06) rotate(-3deg) }
.k-process__icon svg{ width: clamp(22px, 3vw, 28px); height: clamp(22px, 3vw, 28px) }
/* Content */
.k-process__content{ min-width:0 }
.k-process__step-title{
margin:0 0 6px; font-weight:900; color: var(--dark);
font-size: clamp(17px, 2.8vw, 21px); line-height:1.3;
}
.k-process__step-desc{
margin:0 0 10px; color:#4a5568; font-size: clamp(13.5px, 2.2vw, 15.5px); line-height:1.7;
}
/* Checklist */
.k-process__checklist{
list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 16px;
}
.k-process__checklist li{
display:inline-flex; align-items:center; gap:6px;
font-size:13.5px; font-weight:700; color: var(--secondary);
}
.k-process__checklist li::before{
content:""; width:18px; height:18px; border-radius:50%; flex-shrink:0;
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, #fff), color-mix(in srgb, var(--secondary) 10%, #fff));
border:1.5px solid color-mix(in srgb, var(--primary) 18%, #eef1f6);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff3e41'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
background-size: 12px; background-position:center; background-repeat:no-repeat;
}
/* --- Footer trust bar + CTAs --- */
.k-process__foot{
margin-top: clamp(28px, 5vw, 44px);
display:grid; gap: clamp(16px, 3vw, 24px);
justify-items:center; text-align:center;
}
.k-process__trust{
display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:center;
}
.k-process__badge{
display:inline-flex; align-items:center; gap:10px;
padding:10px 18px; border-radius:14px;
background: color-mix(in srgb, var(--primary) 5%, #fff);
border:1px solid color-mix(in srgb, var(--primary) 12%, #eef1f6);
font-weight:800; font-size:14px; color: var(--dark);
transition: transform .2s ease, box-shadow .2s ease;
}
.k-process__badge:hover{
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(255,62,65,.08);
}
.k-process__badge svg{ color: var(--primary); flex-shrink:0 }
.k-process__ctas{
display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
/* --- Desktop: center timeline, alternate cards left/right --- */
@media (min-width: 880px){
.k-process__timeline{
max-width:920px; padding-inline-start:0;
grid-template-columns:1fr 1fr; gap: clamp(28px, 4vw, 40px) 0;
}
.k-process__rail{
inset-inline-start:50%; transform:translateX(-50%);
}
/* All steps span full width but alternate sides */
.k-process__step{
grid-column: 1 / -1;
display:grid;
grid-template-columns: 1fr 40px 1fr;
align-items:start;
}
.k-process__node{
position:static;
grid-column:2; grid-row:1;
justify-self:center; align-self:start;
margin-top:20px;
}
.k-process__card{
grid-row:1;
}
/* Odd steps: card on left */
.k-process__step:nth-child(odd) .k-process__card{
grid-column:1; direction:rtl;
}
.k-process__step:nth-child(odd) .k-process__card > *{ direction:rtl }
html[dir="rtl"] .k-process__step:nth-child(odd) .k-process__card{ direction:ltr }
html[dir="rtl"] .k-process__step:nth-child(odd) .k-process__card > *{ direction:ltr }
/* Even steps: card on right */
.k-process__step:nth-child(even) .k-process__card{
grid-column:3;
}
/* Reveal directions */
.k-process__step:nth-child(odd){ transform: translateX(20px); opacity:0 }
.k-process__step:nth-child(even){ transform: translateX(-20px); opacity:0 }
[data-process].is-in .k-process__step:nth-child(odd),
[data-process].is-in .k-process__step:nth-child(even){
transform: translateX(0); opacity:1;
}
}
/* --- RTL-specific for mobile rail --- */
html[dir="rtl"] .k-process__timeline{ padding-inline-end:42px; padding-inline-start:0 }
@media (max-width: 879.98px){
html[dir="rtl"] .k-process__rail{ inset-inline-start:auto; inset-inline-end:19px }
html[dir="rtl"] .k-process__node{ inset-inline-start:auto; inset-inline-end:-42px }
}
/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce){
.k-process__step,
.k-process__rail-fill,
.k-process__number,
.k-process__card,
.k-process__icon{ transition:none !important; transform:none !important; opacity:1 !important }
.k-process__pulse{ animation:none !important }
}
/* ============================================================================
Kayan — Service Areas (Homepage Premium v2)
Taxonomy-based hierarchy · Dynamic data · Smart UX
Tokens: --k-primary, --k-secondary, --k-edge, --k-soft, --k-ink
============================================================================ */
.k-areas{
padding-block: clamp(34px, 6vw, 76px);
background:
radial-gradient(900px 420px at 90% -10%, color-mix(in srgb, var(--k-primary) 10%, transparent), transparent 60%),
radial-gradient(600px 300px at 10% 100%, color-mix(in srgb, var(--k-secondary) 8%, transparent), transparent 50%),
radial-gradient(400px 250px at 50% 60%, color-mix(in srgb, var(--k-primary) 4%, transparent), transparent 40%),
linear-gradient(180deg, #fafbfd, #fff);
border-top: 1px solid color-mix(in srgb, var(--k-primary) 12%, #eef1f6);
position: relative;
}
/* --- Header --- */
.k-areas__head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:14px;
margin-bottom: 10px;
}
.k-areas__titles{ max-width: 78ch }
.k-areas__title{
margin:0;
font-weight:900;
color: var(--k-ink);
font-size: clamp(22px, 3.4vw, 34px);
line-height:1.15;
}
.k-areas__title strong{ color: var(--k-secondary) }
.k-areas__title{ background: linear-gradient(135deg, var(--k-ink) 60%, var(--k-primary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.k-areas__sub{
margin:8px 0 0;
color: #4a5568;
opacity:.92;
}
.k-areas__more{ white-space:nowrap; flex-shrink:0 }
.k-areas__more i{ margin-inline-start:6px; font-size:.85em }
/* --- Search Bar --- */
.k-areas__search{
position:relative;
display:flex;
align-items:center;
gap:10px;
padding:12px 18px;
border:1px solid var(--k-edge);
background:#fff;
border-radius:14px;
box-shadow:0 4px 12px rgba(6,9,15,.04);
margin-bottom:14px;
transition: border-color .2s;
}
.k-areas__search:focus-within{
border-color: color-mix(in srgb, var(--k-primary) 40%, #fff);
box-shadow: 0 4px 18px color-mix(in srgb, var(--k-primary) 8%, transparent);
}
.k-areas__search > i{ color:#94a3b8; font-size:15px }
.k-areas__search-input{
flex:1;
border:none;
outline:none;
background:transparent;
font-size:15px;
font-family:inherit;
color:var(--k-ink);
}
.k-areas__search-input::placeholder{ color:#94a3b8 }
.k-areas__search-count{
font-size:13px;
font-weight:700;
color:#64748b;
white-space:nowrap;
}
/* --- Filter Tabs --- */
.k-areas__tabs{
display:flex;
gap:8px;
flex-wrap:wrap;
padding:8px;
border:1px solid var(--k-edge);
background:#fff;
border-radius:14px;
box-shadow:0 4px 14px rgba(6,9,15,.04);
margin-bottom:22px;
}
.k-areas__tab{
display:inline-flex;
align-items:center;
gap:6px;
border:1px solid var(--k-edge);
background:var(--k-soft);
color:var(--k-ink);
border-radius:999px;
padding:9px 14px;
font-weight:700;
font-size:14px;
cursor:pointer;
transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
font-family:inherit;
}
.k-areas__tab i{ font-size:13px; opacity:.7 }
.k-areas__tab:hover{
transform:translateY(-1px);
border-color:#dfe7f5;
box-shadow:0 4px 12px rgba(6,9,15,.06);
}
.k-areas__tab.is-active{
background: linear-gradient(135deg, color-mix(in srgb, var(--k-primary) 8%, #fff), color-mix(in srgb, var(--k-secondary) 8%, #fff));
border-color: color-mix(in srgb, var(--k-primary) 30%, #fff);
color: var(--k-primary);
}
.k-areas__badge{
font-style:normal;
font-size:11px;
font-weight:900;
min-width:22px;
height:22px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
background: color-mix(in srgb, var(--k-primary) 10%, #fff);
color: var(--k-primary);
}
.k-areas__tab.is-active .k-areas__badge{
background: linear-gradient(135deg, var(--k-primary), var(--k-secondary));
color:#fff;
}
/* --- Region Header --- */
.k-areas__region{ margin-bottom:28px }
.k-areas__region-head{
display:flex;
align-items:center;
gap:10px;
margin-bottom:14px;
}
.k-areas__region-icon{
width:36px; height:36px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:10px;
background: linear-gradient(135deg, color-mix(in srgb, var(--k-primary) 12%, #fff), color-mix(in srgb, var(--region-color, var(--k-secondary)) 10%, #fff));
color: var(--region-color, var(--k-primary));
font-size:16px;
flex-shrink:0;
}
.k-areas__region-title{
margin:0;
font-weight:900;
font-size:18px;
color:var(--k-ink);
}
.k-areas__region-count{
font-size:13px;
font-weight:700;
color:#64748b;
white-space:nowrap;
}
.k-areas__region-line{
flex:1;
height:2px;
border-radius:2px;
background: linear-gradient(90deg, var(--k-primary), var(--region-color, var(--k-secondary)), transparent 80%);
opacity:.22;
}
/* --- Cards Grid --- */
.k-areas__grid{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:16px;
}
/* --- Card --- */
.k-areas__card{
background:#fff;
border:1px solid var(--k-edge);
border-radius:16px;
overflow:hidden;
box-shadow:0 6px 20px rgba(6,9,15,.05);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .25s ease;
will-change:transform;
opacity:1;
}
.k-areas__card:hover{
transform:translateY(-3px);
border-color: color-mix(in srgb, var(--k-primary) 18%, #dfe7f5);
box-shadow:0 18px 40px color-mix(in srgb, var(--k-primary) 6%, rgba(6,9,15,.08));
}
.k-areas__card.is-collapsed{ display:none }
.k-areas__card.is-hidden{
display:none; /* search filter */
}
/* Card — Image */
.k-areas__media{
display:block;
position:relative;
aspect-ratio:16/10;
background:var(--k-soft);
overflow:hidden;
}
.k-areas__media img,
.k-areas__img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition: transform .3s ease;
}
.k-areas__card:hover .k-areas__media img,
.k-areas__card:hover .k-areas__img{
transform:scale(1.04);
}
.k-areas__shade{
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(6,3,21,0) 40%, rgba(6,3,21,.55));
opacity:.85;
pointer-events:none;
}
.k-areas__ph{
display:flex;
width:100%; height:100%;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#eef2f9,#f7f9fc);
color:#c1cfe0;
font-size:28px;
}
/* Card — Overlays */
.k-areas__type{
position:absolute;
top:10px; inset-inline-start:10px;
font-size:11px;
font-weight:900;
padding:5px 10px;
border-radius:8px;
background: linear-gradient(135deg, var(--k-primary), var(--region-color, var(--k-secondary)));
color:#fff;
z-index:1;
letter-spacing:.03em;
}
.k-areas__price-tag{
position:absolute;
bottom:10px; inset-inline-end:10px;
font-size:12px;
font-weight:700;
padding:5px 10px;
border-radius:8px;
background:rgba(255,255,255,.92);
backdrop-filter:blur(4px);
color:var(--k-ink);
z-index:1;
}
.k-areas__price-tag strong{
color:var(--k-primary);
}
/* Card — Body */
.k-areas__body{
padding:14px;
display:grid;
gap:8px;
}
.k-areas__name{
margin:0;
font-weight:900;
font-size:17px;
line-height:1.25;
}
.k-areas__name a{ color:var(--k-ink); text-decoration:none }
.k-areas__name a:hover{ color:var(--k-primary) }
/* Card — Mini Stats */
.k-areas__stats{
display:flex;
gap:12px;
flex-wrap:wrap;
}
.k-areas__stat{
font-size:12px;
font-weight:700;
color:#475569;
display:inline-flex;
align-items:center;
gap:4px;
}
.k-areas__stat i{
font-size:11px;
color:var(--k-primary);
}
/* Card — Dynamic Pills */
.k-areas__meta{
display:flex;
gap:6px;
flex-wrap:wrap;
}
.k-areas__pill{
font-size:11px;
font-weight:700;
padding:5px 9px;
border-radius:999px;
border:1px solid var(--k-edge);
background:#fff;
color:#1f2a44;
}
.k-areas__pill i{ margin-inline-end:3px; font-size:10px }
.k-areas__pill--type{
background: linear-gradient(135deg, color-mix(in srgb, var(--k-primary) 8%, #fff), color-mix(in srgb, var(--k-secondary) 6%, #fff));
border-color: color-mix(in srgb, var(--k-primary) 18%, #fff);
color:var(--k-primary);
}
.k-areas__pill--price{
background: color-mix(in srgb, #10b981 8%, #fff);
border-color: color-mix(in srgb, #10b981 20%, #fff);
color:#047857;
}
.k-areas__pill--faq{
background: color-mix(in srgb, #f59e0b 8%, #fff);
border-color: color-mix(in srgb, #f59e0b 20%, #fff);
color:#92400e;
}
/* Card — CTA Link */
.k-areas__cta-link{
display:inline-flex;
align-items:center;
gap:6px;
font-size:14px;
font-weight:700;
color:var(--k-primary);
text-decoration:none;
margin-top:4px;
transition: gap .2s, color .2s;
}
.k-areas__cta-link:hover{ gap:10px; color:var(--k-secondary) }
.k-areas__cta-link svg{ flex-shrink:0 }
/* --- Show-More Button --- */
.k-areas__expand{
text-align:center;
margin-top:18px;
}
.k-areas__expand-btn{
display:inline-flex;
align-items:center;
gap:8px;
padding:12px 28px;
border:2px solid var(--k-edge);
background:#fff;
border-radius:14px;
font-weight:700;
font-size:15px;
color:var(--k-ink);
cursor:pointer;
transition: background .2s, border-color .2s, transform .15s;
font-family:inherit;
}
.k-areas__expand-btn:hover{
background: linear-gradient(135deg, color-mix(in srgb, var(--k-primary) 4%, #fff), color-mix(in srgb, var(--k-secondary) 4%, #fff));
border-color: color-mix(in srgb, var(--k-primary) 22%, #dfe7f5);
transform:translateY(-1px);
color:var(--k-primary);
}
.k-areas__expand-btn i{
transition:transform .25s;
}
.k-areas__expand-btn.is-expanded i{
transform:rotate(180deg);
}
/* --- Empty State --- */
.k-areas__empty{
text-align:center;
padding:48px 20px;
color:#94a3b8;
}
.k-areas__empty i{
font-size:40px;
margin-bottom:12px;
display:block;
opacity:.5;
}
.k-areas__empty p{ margin:0; font-size:16px }
/* --- Responsive --- */
@media (max-width:980px){
.k-areas__grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:620px){
.k-areas__head{ flex-direction:column; align-items:flex-start }
.k-areas__grid{ grid-template-columns:1fr }
.k-areas__tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap }
.k-areas__tabs::-webkit-scrollbar{ height:6px }
.k-areas__tabs::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:3px }
.k-areas__search{ flex-wrap:wrap }
.k-areas__region-line{ display:none }
}
/* ============================================================================
KAYAN — QUOTE / ESTIMATOR
============================================================================ */
.k-quote{ background:#fff; padding-block: clamp(34px, 6vw, 72px) }
.k-quote__head{ text-align:center; margin-bottom: clamp(18px, 3vw, 28px) }
.k-quote__head h2{ margin:6px 0; font-weight:900; color:var(--dark); font-size: clamp(22px, 4.6vw, 34px) }
.k-sub{ color:#586176 }
.k-eyebrow{ color:var(--secondary); font-weight:900; letter-spacing:.06em; text-transform:uppercase; margin:0 }
.k-steps{ max-width: 980px; margin-inline:auto }
.k-step{ display:none; background: var(--light); border:1px solid #eef1f6; border-radius:16px; padding: clamp(14px, 3vw, 20px) }
.k-step.is-active{ display:block }
.k-step legend{ font-weight:900; color:var(--dark); margin-bottom:10px }
.k-grid{ display:grid; gap:12px; grid-template-columns: 1fr }
@media (min-width: 680px){ .k-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
.k-field{ display:grid; gap:6px }
.k-field span{ font-weight:800; color:#0e1320; font-size:14px }
.k-field input, .k-field select, .k-field textarea{
height:44px; border:1px solid #e6ecf6; border-radius:12px; padding:0 12px; font:inherit; background:#fff
}
.k-field textarea{ height:auto; padding:10px 12px; resize:vertical; min-height:88px }
.k-field input:focus, .k-field select:focus, .k-field textarea:focus{
outline:2px solid color-mix(in srgb, var(--secondary), #fff 40%); outline-offset:2px
}
/* chips */
.k-items{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px }
.k-chip{ position:relative }
.k-chip input{ position:absolute; inset:0; opacity:0; pointer-events:none }
.k-chip span{
display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 12px; border-radius:999px;
border:1px solid #e6ecf6; background:#fff; color:#0e1320; font-weight:800; cursor:pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease
}
.k-chip input:checked + span{ background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #ff8e90)); color:#fff; border-color: transparent }
.k-steps__nav{ display:flex; gap:10px; justify-content:flex-start; margin-top:10px }
.k-btn{
--h: 46px; --px: 18px; --r: 12px;
display:inline-flex; align-items:center; justify-content:center; height:var(--h);
padding-inline:var(--px); border-radius:var(--r); font-weight:900; text-decoration:none; line-height:1;
transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.k-btn:active{ transform: translateY(1px) }
.k-btn--solid{ color:#fff; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #ff8e90)); box-shadow: 0 10px 26px rgba(255,62,65,.25) }
.k-btn--ghost{ color:#0e1320; background:#fff; border:1.6px solid #e6ecf6 }
.k-hint{ color:#6b7280; font-size:13px; margin:8px 0 0 }
@media (prefers-reduced-motion: reduce){
.k-btn, .k-chip span{ transition:none !important }
}
/* ============================================================================
KAYAN — Social Proof (Google + Testimonials)
============================================================================ */
.k-social{ background:#fff; padding-block: clamp(36px, 6vw, 84px) }
/* Google badge */
.k-gbadge{
display:grid; gap:12px; align-items:center;
grid-template-columns: 1fr; text-align:center;
background: var(--light); border:1px solid #eef1f6; border-radius:16px; padding:14px;
margin-bottom: clamp(16px, 3.6vw, 28px);
}
@media (min-width:900px){
.k-gbadge{ grid-template-columns:auto 1fr auto; text-align:start }
}
.k-gbadge__brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none }
.k-gbadge__g{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.12)) }
.k-gbadge__title{ font-weight:900; color:var(--dark) }
.k-gbadge__score{ display:flex; align-items:center; gap:12px; justify-content:center }
@media (min-width:900px){ .k-gbadge__score{ justify-content:flex-start } }
.k-stars{ --s: 18px; position:relative; display:inline-flex; gap:4px }
.k-star{
width:var(--s); height:var(--s); display:inline-block;
background: conic-gradient(from 0deg,#ffc107 0 75%, #ff9800 0) center/100% 100%;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
opacity:.95;
}
.k-gbadge__meta{ display:flex; align-items:baseline; gap:8px }
.k-gbadge__val{ font-size: clamp(18px, 3.6vw, 24px); color: var(--secondary) }
.k-gbadge__outof{ color:#6b7280; font-weight:700; margin-inline-start:2px }
.k-gbadge__count{ color:#6b7280; font-size:14px }
.k-gbadge__cta{ justify-self:center }
@media (min-width:900px){ .k-gbadge__cta{ justify-self:end } }
/* Testimonials slider */
.k-twrap{ position:relative; overflow:hidden; border-radius:16px; border:1px solid #eef1f6; background:#fff }
.k-ttrack{
display:grid; grid-auto-flow:column; grid-auto-columns: 100%;
overflow:hidden; scroll-behavior:smooth; will-change:transform;
}
@media (min-width:800px){ .k-ttrack{ grid-auto-columns: 50% } }
@media (min-width:1200px){ .k-ttrack{ grid-auto-columns: 33.333% } }
.k-tcard{
padding: 16px; display:block; contain: content;
}
.k-tcard__body{
display:grid; gap:12px; height:100%; border:1px solid #eef1f6; border-radius:14px;
padding:14px; background:linear-gradient(180deg,#fff, #fefefe);
box-shadow: 0 10px 26px rgba(6,9,15,.05);
}
.k-tcard__quote{
margin:0; color:#0f172a; line-height:1.8; font-size:15px;
display:-webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow:hidden;
}
.k-tcard__meta{ display:grid; grid-template-columns: 48px 1fr auto; gap:10px; align-items:center }
.k-tcard__avatar{
width:48px; height:48px; border-radius:50%; object-fit:cover; background:#f1f5f9
}
.k-tcard__avatar--ph{ display:block }
.k-tcard__name{ font-weight:900; color:var(--dark) }
.k-tcard__role{ font-style:normal; color:#6b7280; font-size:13px }
.k-tcard__stars{ display:inline-flex; gap:2px }
.k-tcard__stars i{
width:14px; height:14px; display:inline-block; opacity:.25;
background: #ffc107; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.k-tcard__stars i.is-on{ opacity:1 }
/* controls */
.k-tctrl{
position:relative; display:flex; align-items:center; justify-content:center; gap:12px;
padding: 8px 10px 14px;
}
.k-tbtn{
width:42px; height:42px; border-radius:12px; border:0; cursor:pointer;
color:#0b1020; background:#f6f8fc; font-weight:900;
box-shadow: 0 10px 20px rgba(0,0,0,.08);
transition: filter .15s ease, transform .15s ease;
}
.k-tbtn:hover{ filter:brightness(1.05) }
.k-tdots{ display:flex; gap:6px; align-items:center }
.k-tdots button{
width:8px; height:8px; border-radius:999px; border:0; cursor:pointer; background:#d1d9e6;
transition: background .2s ease, transform .2s ease;
}
.k-tdots button[aria-selected="true"]{
background: var(--primary); transform: translateY(-1px); width:22px;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.k-ttrack{ scroll-behavior:auto }
}
/* ===========================
Kayan — Latest Articles (Premium)
=========================== */
.k-articles{ background:#fff; padding-block: clamp(28px,4vw,48px); border-top:1px solid #eef1f6 }
.k-articles__head{
display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px
}
.k-articles__title{ margin:0; font-weight:900; font-size: clamp(22px,3.2vw,34px); color:var(--dark) }
.k-articles__sub{ margin:.35rem 0 0; color:#5f6b85; max-width:60ch }
.k-articles__count{
color:#0e1320; background:#f7f9ff; border:1px solid #e7eefc; padding:6px 10px; border-radius:999px; font-weight:800
}
.k-articles__tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 16px }
.k-articles__tabs button{
appearance:none; border:1px solid #e9eef7; background:#fff; color:#0e1320;
padding:8px 12px; border-radius:12px; font-weight:800; cursor:pointer;
transition:background .15s, color .15s, border-color .15s, transform .1s
}
.k-articles__tabs button:hover{ background:#f6f8fc }
.k-articles__tabs button.is-active{
background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #ff8e90));
color:#fff; border-color:transparent; box-shadow:0 10px 22px rgba(255,62,65,.25)
}
.k-articles__grid{
display:grid; grid-template-columns: repeat(3,minmax(0,1fr));
gap:18px; align-items:start
}
@media (max-width: 1024px){ .k-articles__grid{ grid-template-columns: repeat(2,1fr) } }
@media (max-width: 640px){ .k-articles__grid{ grid-template-columns: 1fr } }
.k-card{
display:flex; flex-direction:column; background:#fff; border:1px solid #e9eef7; border-radius:18px;
overflow:hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.k-card:hover{ transform: translateY(-2px); box-shadow:0 16px 40px rgba(6,9,15,.08); border-color:#dfe7f5 }
.k-card__media{ position:relative; display:block; aspect-ratio: 16/9; background:#0b1020 }
.k-card__img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02) }
.k-card__badge{
position:absolute; inset-inline-start:10px; inset-block-start:10px;
background:#0e1b91; color:#fff; font-weight:800; font-size:12px; padding:4px 8px; border-radius:999px;
box-shadow:0 8px 18px rgba(14,27,145,.25)
}
.k-card__body{ padding:12px 14px 14px }
.k-card__title{ margin:0 0 6px; font-size: clamp(18px,2.2vw,20px); line-height:1.35 }
.k-card__title a{ color:#0e1320; text-decoration:none; font-weight:900 }
.k-card__title a:hover{ color: var(--primary) }
.k-card__excerpt{ margin:0 0 10px; color:#5f6b85; font-size:15px; line-height:1.6; text-wrap:balance }
.k-card__meta{
display:flex; align-items:center; flex-wrap:wrap; gap:6px; color:#6b7280; font-size:13px; margin-bottom:8px
}
.k-meta__avatar{ border-radius:50% }
.k-meta__author a{ color:#0e1320; font-weight:800; text-decoration:none }
.k-meta__author a:hover{ color:var(--primary) }
.k-meta__dot{ opacity:.6 }
.k-card__actions{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.k-card__tags{ display:flex; gap:6px; list-style:none; margin:0; padding:0 }
.k-card__tags a{ color:#0e1b91; background:#eef3ff; border:1px solid #e1eaff; padding:4px 8px; border-radius:999px; font-size:12px; text-decoration:none; font-weight:800 }
.k-card__tags a:hover{ filter:brightness(1.05) }
.k-articles__ctrl{
display:flex; gap:10px; justify-content:center; margin-top:16px
}
/* أزرار عامة (تعتمد ألوان الهوية) */
.k-btn{
--h: 44px; --px: 16px; --r: 12px;
display:inline-flex; align-items:center; justify-content:center; height:var(--h);
padding-inline:var(--px); border-radius:var(--r); font-weight:900; text-decoration:none; line-height:1; cursor:pointer;
transition: transform .15s ease, filter .15s ease, box-shadow .2s ease; border:0
}
.k-btn--solid{
color:#fff; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #ff8e90));
box-shadow:0 10px 26px rgba(255,62,65,.25)
}
.k-btn--solid:hover{ filter:brightness(1.05) }
.k-btn--ghost{ color:#0e1320; background:#f6f8fc; border:1px solid #e9eef7 }
.k-btn:active{ transform: translateY(1px) }
/* Skeleton لبطاقات تُضاف من REST (لحظات التحميل) */
.k-card.is-skel .k-card__img{ background:linear-gradient(90deg,#eceff5,#f5f7fb,#eceff5); animation: skel 1.2s linear infinite }
.k-card.is-skel .k-card__title,
.k-card.is-skel .k-card__excerpt,
.k-card.is-skel .k-card__meta{ background:linear-gradient(90deg,#eceff5,#f5f7fb,#eceff5); color:transparent; border-radius:8px }
.k-card.is-skel .k-card__title{ height:18px; margin:8px 0 }
.k-card.is-skel .k-card__excerpt{ height:48px }
.k-card.is-skel .k-card__meta{ height:14px; margin:8px 0 12px }
@keyframes skel{ 0%{background-position:-200px 0} 100%{background-position:200px 0} }
/* ============================================================================
Kayan — FAQ Section (Premium)
- Clean accordion with brand accents
- Smooth height transitions (JS sets inline height)
============================================================================ */
.k-faq{
position:relative; isolation:isolate; overflow:hidden;
padding-block: clamp(36px, 7vw, 80px);
background:
radial-gradient(900px 420px at 10% -10%, color-mix(in srgb, var(--secondary,#0e1b91) 12%, transparent), transparent 60%),
linear-gradient(180deg, #fff, #fff);
}
.k-faq .container{ position:relative; z-index:2 }
.k-faq__head{ text-align:center; margin-bottom: clamp(18px, 4vw, 28px) }
.k-faq__eyebrow{
display:inline-block; margin-bottom:6px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
color: var(--secondary, #0e1b91);
}
.k-faq__title{
margin:0; font-weight:900; font-size: clamp(24px, 4.6vw, 40px); line-height:1.1; color: var(--dark, #060315);
}
.k-faq__sub{
margin: 8px auto 0; max-width: 70ch; color: var(--default-color, #313030);
opacity:.85;
}
/* Accordion wrapper */
.k-accordion{ max-width: 980px; margin-inline:auto; display:grid; gap:12px }
/* Single item */
.k-acc{
border:1px solid #e9eef7;
border-radius: 14px;
background:#fff;
box-shadow: 0 10px 24px rgba(6,9,15,.05);
overflow:hidden;
}
/* Header button */
.k-acc__h{ margin:0 }
.k-acc__btn{
-webkit-tap-highlight-color: transparent;
width:100%; text-align:inherit; cursor:pointer; border:0; background:transparent;
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding: 14px 16px;
font-weight:900; color: var(--dark,#060315);
}
.k-acc__btn:hover{ background: #fafbff }
.k-acc__q{ font-size: clamp(16px, 2.4vw, 18px) }
/* Icon (+ to ×) */
.k-acc__ico{
width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center;
border-radius:10px; background:#f6f8fc; color: var(--secondary,#0e1b91);
transition: transform .2s ease, background .2s ease;
}
.k-acc__ico svg{ width:18px; height:18px }
.k-acc__btn[aria-expanded="true"] .k-acc__ico{
transform: rotate(45deg);
background: color-mix(in srgb, var(--secondary,#0e1b91) 10%, #f6f8fc);
}
/* Panel (animated via max-height inline style) */
.k-acc__panel{
border-top:1px solid #eef2f8;
will-change: height;
overflow:hidden;
}
.k-acc__inner{
padding: 10px 16px 16px;
color: var(--default-color,#313030);
}
.k-acc__inner p{ margin: 0 0 8px }
.k-acc__inner p:last-child{ margin-bottom:0 }
/* CTA row */
.k-faq__cta{
margin-top: clamp(18px, 4vw, 28px);
display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
/* Shared Kayan buttons */
.k-btn{
--h: 46px; --px: 18px; --r: 12px;
display:inline-flex; align-items:center; justify-content:center;
height:var(--h); padding-inline:var(--px);
border-radius:var(--r); font-weight:900; text-decoration:none; line-height:1; border:0; cursor:pointer;
transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.k-btn:active{ transform: translateY(1px) }
.k-btn--solid{
color:#fff;
background: linear-gradient(135deg, var(--primary,#FF3E41), color-mix(in srgb, var(--primary,#FF3E41) 70%, #ff8e90));
box-shadow: 0 10px 26px rgba(255,62,65,.25);
}
.k-btn--ghost{
color: var(--secondary,#0e1b91);
border:1.5px solid color-mix(in srgb, var(--secondary,#0e1b91) 40%, #7a8bff);
background: #fff;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.k-acc__ico, .k-btn{ transition:none !important }
}
/* Start Pages Styles */
/* ==========================================================================
KAYAN — Premium UI Pack (Global)
- Brand-aware, RTL-aware, vanilla
- Tokens, type scale, containers, cards, buttons, forms, pagination
======================================================================= */
/* Tokens (inherit identity) */
:root{
--k-primary: var(--primary, #FF3E41);
--k-secondary: var(--secondary, #0e1b91);
--k-ink: var(--default-color, #313030);
--k-ink-2:#4a5568;
--k-contrast: var(--contrast-color, #fff);
--k-edge:#e9eef7;
--k-soft:#f6f8fc;
--k-soft-2:#fafbff;
--k-r: 14px;
--k-shadow-1: 0 10px 24px rgba(6,9,15,.06);
--k-shadow-2: 0 18px 44px rgba(6,9,15,.10);
}
/* Base */
html{scroll-behavior:smooth}
body{font: 400 16px/1.7 "Inter",system-ui,Segoe UI,Roboto,Arial,sans-serif; color:var(--k-ink); background:#fff}
img{max-width:100%; height:auto; border:0}
a{color:var(--k-secondary); text-decoration:none}
a:hover{color:color-mix(in srgb,var(--k-secondary),#000 10%)}
:focus-visible{outline:2px solid color-mix(in srgb,var(--k-primary),#fff 30%); outline-offset:2px}
/* Containers */
.kc{max-width:1200px; margin-inline:auto; padding-inline: clamp(12px, 2.6vw, 24px)}
.kc-narrow{max-width:980px; margin-inline:auto; padding-inline: clamp(12px, 2.6vw, 24px)}
/* Section patterns */
.k-sec{padding-block: clamp(36px, 7vw, 84px)}
.k-sec__head{display:grid; gap:8px; text-align:center; margin-bottom: clamp(18px, 4vw, 28px)}
.k-eyebrow{font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--k-secondary)}
.k-title{font-weight:900; line-height:1.12; font-size: clamp(24px, 4.6vw, 42px); color:var(--k-ink)}
.k-sub{color:#5b6475; font-size: clamp(15px, 2.3vw, 18px); max-width:72ch; margin-inline:auto}
/* Banner hero (site-wide) */
.k-banner{
position:relative; overflow:hidden; border-radius: var(--k-r);
background:
radial-gradient(1200px 380px at 10% -12%, color-mix(in srgb, var(--k-secondary) 32%, transparent), transparent 60%),
linear-gradient(180deg,#0b0a16,#070612 38%,#060315);
color:#fff; box-shadow: var(--k-shadow-1);
}
.k-banner__inner{display:grid; gap:12px; padding: clamp(22px, 5vw, 44px)}
.k-banner__title{font-weight:900; line-height:1.08; font-size: clamp(26px, 5vw, 56px); margin:0}
.k-banner__sub{color:#d6d9e6; font-size: clamp(14px, 2.2vw, 18px); max-width: 70ch}
.k-banner__ctas{display:flex; gap:10px; flex-wrap:wrap}
/* Buttons */
.k-btn{
--h: 46px; --px: 18px;
display:inline-flex; align-items:center; justify-content:center;
height:var(--h); padding-inline:var(--px); border-radius:12px; font-weight:900; line-height:1;
transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.k-btn:active{transform:translateY(1px)}
.k-btn--solid{color:#fff; background:linear-gradient(135deg,var(--k-primary), color-mix(in srgb,var(--k-primary) 70%, #ff8e90)); box-shadow:0 10px 26px rgba(255,62,65,.25)}
.k-btn--ghost{color:#fff; border:1.6px solid rgba(255,255,255,.65); background: color-mix(in srgb,#ffffff 6%, transparent)}
.k-btn--soft{color:var(--k-ink); background:var(--k-soft); border:1px solid var(--k-edge)}
.k-btn--link{padding:0; height:auto; color:var(--k-secondary); background:transparent}
/* Cards (used in archives/related/services) */
.k-card{background:#fff; border:1px solid var(--k-edge); border-radius:12px; overflow:hidden; box-shadow:0 8px 20px rgba(6,9,15,.04)}
.k-card__media{aspect-ratio: 16/9; background:var(--k-soft)}
.k-card__body{padding:14px; display:grid; gap:8px}
.k-card__meta{font-size:12px; color:#6b7280}
.k-card__title{font-weight:900; color:var(--k-ink); font-size: clamp(18px, 2.2vw, 22px)}
.k-card__excerpt{color:#4a5568}
/* Grids */
.k-grid{display:grid; gap:16px}
.k-grid--3{grid-template-columns: repeat(3, 1fr)}
.k-grid--2{grid-template-columns: repeat(2, 1fr)}
@media (max-width: 900px){ .k-grid--3{grid-template-columns: repeat(2,1fr)} }
@media (max-width: 560px){ .k-grid--3,.k-grid--2{grid-template-columns: 1fr} }
/* Forms */
.k-form{display:grid; gap:12px}
.k-input, .k-textarea, .k-select{
width:100%; height:44px; border-radius:12px; border:1px solid var(--k-edge); padding-inline:12px; background:#fff;
}
.k-textarea{min-height:100px; padding-block:10px; resize:vertical}
.k-input:focus, .k-textarea:focus, .k-select:focus{outline:0; border-color: color-mix(in srgb,var(--k-secondary),#fff 40%)}
/* Pagination */
.k-pager{display:flex; gap:8px; justify-content:center; align-items:center; margin-top:22px}
.k-page{min-width:40px; height:40px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--k-edge); background:#fff; color:var(--k-ink); font-weight:800}
.k-page.is-active, .k-page:hover{border-color: color-mix(in srgb,var(--k-primary),#fff 40%)}
/* Footer helpers */
.k-foot{background: #060315; color:#cdd0da}
.k-foot a{color:#fff}
/* ============================================================================
Kayan – Premium WhatsApp CTA (Area hero)
========================================================================== */
.k-btn--whatsapp{
position:relative;
display:inline-flex;
align-items:center;
gap:9px;
padding:9px 18px;
border-radius:999px;
font-weight:800;
font-size:14px;
border:none;
cursor:pointer;
text-decoration:none;
color:#0f172a;
background:
radial-gradient(circle at 0 0, rgba(34,197,94,.35), transparent 55%),
linear-gradient(135deg,#22c55e,#16a34a);
box-shadow:
0 18px 42px rgba(22,163,74,.55),
0 0 0 1px rgba(15,23,42,.10);
overflow:hidden;
}
/* inner glow sweep */
.k-btn--whatsapp::before{
content:"";
position:absolute;
inset:-40%;
background:radial-gradient(circle at 0 0, rgba(255,255,255,.38), transparent 60%);
opacity:0;
transform:translate3d(-40%, -40%, 0);
transition:opacity .35s ease, transform .35s ease;
}
/* moving sheen line */
.k-btn--whatsapp::after{
content:"";
position:absolute;
inset:-20%;
background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
opacity:0;
transform:translateX(-120%);
transition:opacity .5s ease, transform .5s ease;
}
/* icon wrapper */
.k-btn__icon{
width:22px;
height:22px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
position:relative;
flex-shrink:0;
box-shadow:
0 0 0 1px rgba(15,23,42,.18),
0 0 0 6px rgba(15,23,42,.12);
background:radial-gradient(circle at 30% 0,#ecfdf3,#bbf7d0);
}
/* SVG inside */
.k-btn__icon-svg{
width:16px;
height:16px;
display:block;
}
/* SVG parts (classes from the markup) */
.k-btn__icon-circle{
fill:#ecfdf3;
}
.k-btn__icon-glyph{
fill:#16a34a;
}
/* small inner highlight ring */
.k-btn__icon::after{
content:"";
position:absolute;
inset:3px;
border-radius:inherit;
border:2px solid rgba(255,255,255,.7);
opacity:.7;
}
/* label */
.k-btn__label{
position:relative;
z-index:1;
}
/* hover / focus states */
.k-btn--whatsapp:hover,
.k-btn--whatsapp:focus-visible{
box-shadow:
0 22px 60px rgba(22,163,74,.65),
0 0 0 1px rgba(15,23,42,.16);
transform:translateY(-1px);
}
.k-btn--whatsapp:hover::before,
.k-btn--whatsapp:focus-visible::before{
opacity:1;
transform:translate3d(0,0,0);
}
.k-btn--whatsapp:hover::after,
.k-btn--whatsapp:focus-visible::after{
opacity:1;
transform:translateX(40%);
}
/* subtle breathing animation for hero CTA only */
@keyframes k-whatsapp-breathe{
0%, 100%{
transform:translateY(0) scale(1);
box-shadow:
0 18px 42px rgba(22,163,74,.55),
0 0 0 1px rgba(15,23,42,.10);
}
50%{
transform:translateY(-1px) scale(1.02);
box-shadow:
0 22px 60px rgba(22,163,74,.65),
0 0 0 1px rgba(15,23,42,.12);
}
}
.k-area-hero .k-btn--whatsapp{
animation:k-whatsapp-breathe 2.4s ease-in-out infinite;
}
/* optional: slight pulse ring on icon */
@keyframes k-whatsapp-pulse{
0%, 60%{
opacity:0;
transform:scale(.8);
}
80%{
opacity:.8;
transform:scale(1);
}
100%{
opacity:0;
transform:scale(1.2);
}
}
.k-area-hero .k-btn__icon{
position:relative;
}
.k-area-hero .k-btn__icon::before{
content:"";
position:absolute;
inset:-2px;
border-radius:inherit;
border:2px solid rgba(236,253,245,.8);
opacity:0;
transform:scale(.8);
animation:k-whatsapp-pulse 2.4s ease-out infinite;
}
/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
.k-area-hero .k-btn--whatsapp{
animation:none;
transform:none;
}
.k-area-hero .k-btn__icon::before{
animation:none;
opacity:0;
}
}
/* ===== pege editor content styles ===== */
.k-area-body__content {
max-width: 800px;
margin: 0 auto;
line-height: 1.9;
font-size: 1.2rem;
direction: rtl;
text-align: right;
}
.k-area-body__content p {
margin: 0 0 1.2rem;
}
.k-area-body__content h2 {
font-size: clamp(1.8rem, 3vw, 2.5rem);
margin: 2.5rem 0 1rem;
font-weight: 700;
position: relative;
padding-inline-start: 1.6rem;
}
.k-area-body__content h2::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0.55em;
width: 10px;
height: 10px;
border-radius: 999px;
background: linear-gradient(135deg, #00c9a7, #0077ff);
box-shadow: 0 0 0 4px rgba(0, 121, 255, 0.12);
}
.k-area-body__content h3 {
font-size: clamp(1.15rem, 2.5vw, 1.4rem);
margin: 1.8rem 0 0.6rem;
font-weight: 600;
}
.k-area-body__content p strong,
.k-area-body__content li strong {
font-weight: 700;
padding: 0 0.05em;
}
.k-area-body__content ul {
list-style: none;
padding: 0;
margin: 0 0 1.2rem;
}
.k-area-body__content ul li {
position: relative;
padding-inline-start: 1.8rem;
margin-bottom: 0.4rem;
}
.k-area-body__content ul li::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0.6em;
width: 0.9rem;
height: 0.4rem;
border-radius: 999px;
background: linear-gradient(135deg, #00c9a7, #0077ff);
}
.k-area-body__content ul.kayan-checklist {
list-style: none;
padding: 0;
margin: 0 0 1.4rem;
}
.k-area-body__content ul.kayan-checklist li {
position: relative;
padding-inline-start: 2.2rem;
margin-bottom: 0.6rem;
}
.k-area-body__content ul.kayan-checklist li::before {
content: "✓";
position: absolute;
inset-inline-start: 0;
top: 0.1em;
width: 1.5rem;
height: 1.5rem;
border-radius: 999px;
border: 2px solid #00c9a7;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
color: #00c9a7;
background: #f4fffd;
}
.k-area-body__content ol.kayan-steps,
.k-area-body__content ul.kayan-steps {
list-style: none;
counter-reset: kayan-step;
margin: 0 0 1.8rem;
padding: 0;
}
.k-area-body__content ol.kayan-steps li,
.k-area-body__content ul.kayan-steps li {
counter-increment: kayan-step;
position: relative;
padding-inline-start: 2.8rem;
margin-bottom: 1rem;
background: #f9fafb;
border-radius: 0.75rem;
padding-block: 0.9rem;
padding-inline-end: 1rem;
}
.k-area-body__content ol.kayan-steps li::before,
.k-area-body__content ul.kayan-steps li::before {
content: counter(kayan-step);
position: absolute;
inset-inline-start: .25rem;
top: 0.85rem;
width: 1.6rem;
height: 1.6rem;
border-radius: 999px;
background: #0077ff;
color: #fff;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
.k-area-body__content .kayan-note {
border-radius: 0.9rem;
padding: 0.9rem 1rem;
background: #f0f9ff;
border: 1px solid rgba(0, 119, 255, 0.2);
margin: 1.5rem 0;
font-size: 1.29rem;
}
.entry-content .kayan-pricing-table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
font-size: 0.95rem;
}
.entry-content .kayan-pricing-table th,
.entry-content .kayan-pricing-table td {
border: 1px solid #e5e7eb;
padding: 0.6rem 0.8rem;
}
.entry-content .kayan-pricing-table thead th {
background: #f3f4f6;
font-weight: 600;
}
.entry-content .kayan-pricing-table tbody tr:nth-child(even) {
background: #f9fafb;
}
/* جدول الأسعار – ريسبونسيف وواضح */
.entry-content .kayan-pricing-table-wrapper {
margin: 1.5rem 0;
overflow-x: auto;
}
.entry-content .kayan-pricing-table {
width: 100%;
border-collapse: collapse;
min-width: 320px;
font-size: 0.95rem;
}
.entry-content .kayan-pricing-table th,
.entry-content .kayan-pricing-table td {
border: 1px solid #e5e7eb;
padding: 0.6rem 0.8rem;
text-align: right;
}
.entry-content .kayan-pricing-table thead th {
background: #f3f4f6;
font-weight: 600;
}
.entry-content .kayan-pricing-table tbody tr:nth-child(even) {
background: #f9fafb;
}
/* سنتر بسيط لبعض الملاحظات */
.entry-content .kayan-note-center {
text-align: center;
}
/* تأكد إن اللينكات جوا النوت باينة */
.entry-content .kayan-note a {
text-decoration: none;
border-bottom: 1px dashed rgba(0,0,0,0.25);
}
.entry-content .kayan-note a:hover {
border-bottom-style: solid;
}
@media (max-width: 768px) {
.k-area-body__content {
font-size: 1.2rem;
padding-inline: 1rem;
}
.k-area-body__content h2 {
margin-top: 2rem;
padding-inline-start: 1.2rem;
}
.k-area-body__content ul li,
.k-area-body__content ul.kayan-checklist li,
.k-area-body__content ol.kayan-steps li,
.k-area-body__content ul.kayan-steps li {
padding-inline-start: 2rem;
}
}
/* ============================================================================
Kayan — Footer (Premium, Vanilla, RTL-aware)
- Branded gradient top, dark surface, soft cards
============================================================================ */
.k-footer{
--k-dark: var(--dark, #060315);
--k-primary: var(--primary, #FF3E41);
--k-secondary: var(--secondary, #0e1b91);
--k-ink: var(--contrast-color, #fff);
--k-muted: color-mix(in srgb, #fff 70%, transparent);
color: var(--k-ink);
background:
radial-gradient(800px 300px at 15% -10%, color-mix(in srgb, var(--k-secondary) 22%, transparent), transparent 62%),
linear-gradient(180deg, #0b0a16, #070612 38%, #060315);
position: relative;
padding-top: clamp(28px, 6vw, 60px);
overflow: clip;
}
.k-footer .container{ max-width: 1200px; margin-inline: auto; padding-inline: 16px }
/* Top grid */
.k-footer__inner{
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 18px;
}
.k-fcol{ grid-column: span 3; }
.k-fcol--about{ grid-column: span 4; }
.k-fcol--cta{ grid-column: span 2; }
@media (max-width: 992px){
.k-fcol--about{ grid-column: span 12; }
.k-fcol{ grid-column: span 6; }
.k-fcol--cta{ grid-column: span 12; }
}
@media (max-width: 640px){
.k-fcol{ grid-column: span 12; }
}
.k-fcol--about .custom-logo-link {
display: block !important;
width: 100%;
max-width: 220px;
}
/* Brand */
.k-fbrand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none }
.k-fbrand img{ max-height:44px; height:auto; width:auto }
.k-fbrand__text{ font-weight:900; font-size:18px; color:#fff }
.k-fabout{ margin:10px 0 14px; color: #d7d9e1 }
/* Contact list */
.k-fcontact{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.k-fcitem{ display:flex; gap:10px; align-items:center; color:#cdd1dd }
.k-fcitem a{ color:#fff; text-decoration:none }
.k-fcitem a:hover{ color: var(--k-primary) }
.k-fcitem svg{ width:18px; height:18px; opacity:.85 }
/* Social */
.k-fsocial{ display:flex; gap:8px; margin-top:10px }
.k-fs{
width:38px; height:38px; display:grid; place-items:center;
border-radius:12px; background: rgba(255,255,255,.06); color:#fff; text-decoration:none;
transition: transform .15s ease, filter .15s ease, background .2s ease;
}
.k-fs:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12) }
.k-fs--wa{ color:#25d366 }
/* Column titles + lists */
.k-fcol__title{ margin:0 0 10px; font-weight:900; color:#fff; font-size:18px }
.k-flist{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.k-flist a{
color:#cdd1dd; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
border-radius:10px; padding:6px 6px;
}
.k-flist a::before{
content:"›"; opacity:.65; color: var(--k-primary)
}
.k-flist a:hover{ color:#fff; background: rgba(255,255,255,.06) }
/* Newsletter */
.k-flead{ color:#cdd1dd; margin:0 0 10px }
.k-fnews{ display:flex; gap:8px; align-items:center }
.k-finp{
flex:1 1 auto; height:42px; border-radius:12px; padding:0 12px; border:1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.06); color:#fff; outline:none;
}
.k-finp::placeholder{ color:#b9bfd3 }
.k-fbtn{
height:42px; padding:0 14px; border:0; border-radius:12px; cursor:pointer; font-weight:900; color:#fff;
background: linear-gradient(135deg, var(--k-primary), color-mix(in srgb, var(--k-primary) 70%, #ff8e90));
box-shadow: 0 10px 22px rgba(255,62,65,.22); transition: filter .15s ease, transform .1s ease;
}
.k-fbtn:hover{ filter:brightness(1.06) }
.k-fbtn:active{ transform: translateY(1px) }
.k-fnote{ display:block; margin-top:6px; color:#9aa0b8; font-size:12px }
/* Trust mini badges */
.k-ftrust{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.k-badge{
display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
background: rgba(255,255,255,.08); color:#fff; font-weight:800; font-size:12px;
}
/* Bottom bar */
.k-fbar{ margin-top:22px; border-top:1px solid rgba(255,255,255,.08) }
.k-fbar__inner{
display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0;
color:#aeb3c7;
}
.k-fbar a{ color:#fff; text-decoration:none }
.k-fbar a:hover{ color: var(--k-primary) }
.k-fcopy{ margin:0; display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.k-split{ opacity:.4 }
.k-fby{ margin:0 }
/* Back to top */
.k-top{
position: fixed; inset-inline-end: 16px; inset-block-end: 16px; z-index: 30;
width:44px; height:44px; border-radius:12px; border:0; cursor:pointer; color:#0b1020;
background:#fff; box-shadow: 0 14px 30px rgba(0,0,0,.22); opacity:0; transform: translateY(10px);
transition: opacity .2s ease, transform .2s ease, filter .15s ease;
}
.k-top:hover{ filter:brightness(1.05) }
.k-top.is-show{ opacity:1; transform: none }
/* ===============================
Kayan — Floating FABs (RTL-aware)
=============================== */
:root{
--fab-primary: var(--primary, #FF3E41);
--fab-secondary: var(--secondary, #0e1b91);
--fab-bg: #0b1020; /* toggle background */
--fab-size: 54px;
--fab-radius: 16px;
--fab-gap: 10px;
--fab-shadow: 0 12px 28px rgba(6,9,15,.22);
--fab-edge: rgba(255,255,255,.12);
}
/* wrapper */
.k-fabs{
position: fixed;
inset-block-end: 18px; /* bottom */
inset-inline-end: 16px; /* right for LTR & RTL */
z-index: 1200;
display: grid;
justify-items: end; /* push children to the right edge */
gap: var(--fab-gap);
pointer-events: none; /* allow clicks only on children */
}
/* Toggle button */
.k-fabs__toggle{
pointer-events: auto;
width: var(--fab-size); height: var(--fab-size);
border-radius: var(--fab-radius);
border: 1px solid var(--fab-edge);
background: linear-gradient(180deg, var(--fab-bg), #070a16);
color: #fff; display: grid; place-items: center;
box-shadow: var(--fab-shadow);
cursor: pointer;
transition: transform .18s ease, filter .18s ease;
position: relative;
isolation: isolate;
animation: fab-pop .35s ease both .2s; /* entry animation */
}
.k-fabs__toggle:hover{ filter: brightness(1.06) }
.k-fabs__toggle:active{ transform: translateY(1px) }
/* subtle breathing ring */
.k-fabs__toggle::after{
content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
box-shadow: 0 0 0 0 rgba(255,255,255,.18);
animation: fab-pulse 2.6s ease-out infinite;
}
/* Single fab item */
.k-fab{
pointer-events: auto;
--bg: var(--fab-primary);
display: inline-grid; grid-auto-flow: column; align-items: center; gap: 10px;
color:#fff; text-decoration:none;
min-height: var(--fab-size);
padding-inline: 14px;
background: linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--bg) 70%, #ffffff));
border-radius: var(--fab-radius);
border: 1px solid var(--fab-edge);
box-shadow: var(--fab-shadow);
transform: translateY(8px); opacity: 0; visibility: hidden;
transition: transform .22s ease, opacity .22s ease, filter .18s ease;
}
.k-fab:hover{ filter: brightness(1.05) }
.k-fab svg{ display:block }
/* labels */
.k-fab__label{
font-weight: 900; letter-spacing:.2px; white-space: nowrap;
}
/* variants */
.k-fab--wa{ --bg: #25D366 } /* WhatsApp green */
.k-fab--call{ --bg: var(--fab-primary) } /* brand red */
/* stack behavior (collapsed by default) */
.k-fabs[data-open="true"] .k-fab{
transform: translateY(0); opacity: 1; visibility: visible;
}
.k-fabs[data-open="true"] .k-fab:nth-of-type(2){ transition-delay: .05s } /* call */
.k-fabs[data-open="true"] .k-fab:nth-of-type(3){ transition-delay: .10s } /* wa */
/* when closed: hide items and only show toggle */
.k-fabs:not([data-open="true"]) .k-fab{
transition-delay: 0s;
}
/* tooltips for screen readers only helper */
.k-fabs__sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
/* keyframes */
@keyframes fab-pop{
from{ transform: scale(.92); opacity:0 }
to{ transform: scale(1); opacity:1 }
}
@keyframes fab-pulse{
0%{ box-shadow: 0 0 0 0 rgba(255,255,255,.18) }
70%{ box-shadow: 0 0 0 14px rgba(255,255,255,0) }
100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0) }
}
/* small screens spacing */
@media (max-width:520px){
.k-fabs{ inset-block-end: 14px; inset-inline-end: 12px }
}
/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
.k-fabs__toggle::after{ animation: none }
.k-fabs__toggle, .k-fab{ transition: none !important; animation: none !important }
}
/* =============================================================================
KAYAN — CTA BUTTON HIERARCHY (v1.3)
Three-tier emphasis system: primary → secondary → tertiary
Aliased from existing .k-btn--solid / .k-btn--ghost for backwards compat.
============================================================================= */
/* ── Primary (highest emphasis — filled, gradient, shadow) ──────────────── */
.k-btn--primary{
color: var(--contrast-color, #fff);
background: linear-gradient(135deg, var(--k-primary, var(--primary, #ff3e41)), color-mix(in srgb, var(--k-primary, var(--primary, #ff3e41)) 70%, #ff8e90));
box-shadow: 0 10px 26px rgba(255, 62, 65, .25);
border: none;
}
.k-btn--primary:hover{
filter: brightness(1.05);
box-shadow: 0 12px 30px rgba(255, 62, 65, .32);
color: var(--contrast-color, #fff);
}
.k-btn--primary:focus-visible{
outline: 2px solid var(--k-primary, var(--primary, #ff3e41));
outline-offset: 2px;
}
/* ── Secondary (medium emphasis — outlined / ghost) ─────────────────────── */
.k-btn--secondary{
color: var(--k-ink, #0e1320);
background: var(--k-bg, #fff);
border: 1.6px solid var(--k-edge, #e6ecf6);
}
.k-btn--secondary:hover{
border-color: color-mix(in srgb, var(--k-primary, var(--primary, #ff3e41)) 50%, var(--k-edge, #e6ecf6));
color: var(--k-primary, var(--primary, #ff3e41));
}
.k-btn--secondary:focus-visible{
outline: 2px solid var(--k-primary, var(--primary, #ff3e41));
outline-offset: 2px;
}
/* ── Tertiary (low emphasis — text-only, no border/background) ──────────── */
.k-btn--tertiary{
color: var(--k-primary, var(--primary, #ff3e41));
background: transparent;
border: none;
padding-inline: 8px;
}
.k-btn--tertiary:hover{
background: color-mix(in srgb, var(--k-primary, var(--primary, #ff3e41)) 8%, transparent);
text-decoration: none;
}
.k-btn--tertiary:focus-visible{
outline: 2px solid var(--k-primary, var(--primary, #ff3e41));
outline-offset: 2px;
}
/* ── Size modifiers (work with any tier) ────────────────────────────────── */
.k-btn--sm{
--h: 36px;
--px: 14px;
font-size: 13px;
}
.k-btn--lg{
--h: 54px;
--px: 24px;
font-size: 17px;
}
/* ── Dark background overrides ──────────────────────────────────────────── */
.k-dark .k-btn--secondary,
[data-theme="dark"] .k-btn--secondary{
color: #fff;
border-color: rgba(255, 255, 255, .25);
background: transparent;
}
.k-dark .k-btn--tertiary,
[data-theme="dark"] .k-btn--tertiary{
color: rgba(255, 255, 255, .9);
}
/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
.k-btn--primary,
.k-btn--secondary,
.k-btn--tertiary{
transition: none !important;
}
}