/*============================================================== * BRAND LANDING PAGE * Stage 1 — Part 2A * ------------------------------------------------------------ * Contents * * 1. Reset / Normalize * 2. CSS Variables * 3. Global Document * 4. Typography * 5. Media Elements * 6. Links & Lists * 7. Forms * 8. Container * 9. Layout Utilities * 10. Text Utilities * 11. Spacing Utilities * ==============================================================*/ /*============================================================== * 1. RESET / NORMALIZE * ==============================================================*/ *, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ min-height:100vh; } img, picture, svg, video, canvas{ display:block; max-width:100%; } button, input, textarea, select{ font:inherit; } button{ background:none; border:none; cursor:pointer; } a{ text-decoration:none; color:inherit; } ul, ol{ list-style:none; } /*============================================================== * 2. CSS VARIABLES * ==============================================================*/ :root{ /*========================================================== * COLORS * ==========================================================*/ --color-primary:#4B5DFF; --color-primary-dark:#3949E6; --color-secondary:#6C4DFF; --color-accent:#5BC9FF; --color-white:#FFFFFF; --color-bg-dark:#050816; --color-bg-section:#081020; --color-bg-card:#10192E; --color-bg-light:#FFFFFF; --color-bg-soft:#FAFBFD; --color-heading:#111827; --color-body:#70778B; --color-muted:#A5ADBF; --color-border-light:rgba(0,0,0,.06); --color-border-dark:rgba(255,255,255,.08); --color-overlay:rgba(8,16,32,.72); /*========================================================== * GRADIENTS * ==========================================================*/ --gradient-primary: linear-gradient( 135deg, #4B5DFF 0%, #6C4DFF 100% ); --gradient-hero: radial-gradient( circle, rgba(91,201,255,.18), rgba(108,77,255,.06), transparent ); /*========================================================== * TYPOGRAPHY * ==========================================================*/ --font-primary: "Vazirmatn", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra-bold:800; --fs-xs:.75rem; /*12*/ --fs-sm:.875rem; /*14*/ --fs-base:1rem; /*16*/ --fs-lg:1.125rem; /*18*/ --fs-xl:1.25rem; /*20*/ --fs-2xl:1.5rem; /*24*/ --fs-3xl:2rem; /*32*/ --fs-4xl:2.625rem; /*42*/ --fs-hero:3.5rem; /*56*/ --lh-tight:1.2; --lh-heading:1.3; --lh-body:1.9; /*========================================================== * SPACING * ==========================================================*/ --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:48px; --space-6:64px; --space-7:96px; --space-8:120px; /*========================================================== * BORDER RADIUS * ==========================================================*/ --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --radius-xl:22px; --radius-2xl:24px; --radius-round:999px; /*========================================================== * SHADOWS * ==========================================================*/ --shadow-sm: 0 8px 24px rgba(15,23,42,.08); --shadow-md: 0 15px 40px rgba(20,30,80,.18); --shadow-lg: 0 20px 60px rgba(20,30,80,.25); --shadow-glow: 0 0 80px rgba(91,201,255,.25); /*========================================================== * TRANSITIONS * ==========================================================*/ --transition-fast:.20s ease; --transition-base:.30s ease; --transition-slow:.45s ease; /*========================================================== * Z INDEX * ==========================================================*/ --z-header:900; --z-overlay:950; --z-modal:999; } /*============================================================== * 3. GLOBAL DOCUMENT * ==============================================================*/ html{ direction:rtl; scroll-behavior:smooth; scroll-padding-top:120px; } body{ font-family:var(--font-primary); font-size:var(--fs-base); font-weight:var(--fw-regular); line-height:var(--lh-body); color:var(--color-body); background:var(--color-bg-light); overflow-x:hidden; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } ::selection{ background:var(--color-primary); color:var(--color-white); } /*============================================================== * 4. TYPOGRAPHY * ==============================================================*/ h1, h2, h3, h4, h5, h6{ color:var(--color-heading); font-weight:var(--fw-bold); line-height:var(--lh-heading); } h1{ font-size:clamp(2.75rem,5vw,var(--fs-hero)); } h2{ font-size:clamp(2rem,4vw,var(--fs-4xl)); } h3{ font-size:var(--fs-xl); } h4{ font-size:var(--fs-lg); } p{ color:inherit; } small{ font-size:var(--fs-sm); } strong{ font-weight:var(--fw-bold); } /*============================================================== * 5. MEDIA ELEMENTS * ==============================================================*/ img{ border-radius:inherit; } svg{ fill:currentColor; } /*============================================================== * 6. LINKS & LISTS * ==============================================================*/ a{ transition:color var(--transition-base); } a:hover{ color:var(--color-primary); } /*============================================================== * 7. FORM ELEMENTS * ==============================================================*/ input, textarea, select{ outline:none; } button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible{ outline:3px solid rgba(91,201,255,.45); outline-offset:4px; } /*============================================================== * 8. CONTAINER * ==============================================================*/ .container{ width:100%; max-width:1260px; margin-inline:auto; padding-inline:24px; } /*============================================================== * 9. LAYOUT UTILITIES * ==============================================================*/ .d-flex{ display:flex; } .d-grid{ display:grid; } .d-block{ display:block; } .d-inline{ display:inline; } .align-center{ align-items:center; } .justify-center{ justify-content:center; } .justify-between{ justify-content:space-between; } .flex-column{ flex-direction:column; } /*============================================================== * 10. TEXT UTILITIES * ==============================================================*/ .text-center{ text-align:center; } .text-right{ text-align:right; } .text-left{ text-align:left; } .text-muted{ color:var(--color-muted); } .text-primary{ color:var(--color-primary); } .text-white{ color:var(--color-white); } /*============================================================== * 11. SPACING UTILITIES * ==============================================================*/ /* Margin Top */ .mt-1{margin-top:var(--space-1);} .mt-2{margin-top:var(--space-2);} .mt-3{margin-top:var(--space-3);} .mt-4{margin-top:var(--space-4);} .mt-5{margin-top:var(--space-5);} .mt-6{margin-top:var(--space-6);} /* Margin Bottom */ .mb-1{margin-bottom:var(--space-1);} .mb-2{margin-bottom:var(--space-2);} .mb-3{margin-bottom:var(--space-3);} .mb-4{margin-bottom:var(--space-4);} .mb-5{margin-bottom:var(--space-5);} .mb-6{margin-bottom:var(--space-6);} /* Padding Top */ .pt-1{padding-top:var(--space-1);} .pt-2{padding-top:var(--space-2);} .pt-3{padding-top:var(--space-3);} .pt-4{padding-top:var(--space-4);} .pt-5{padding-top:var(--space-5);} .pt-6{padding-top:var(--space-6);} /* Padding Bottom */ .pb-1{padding-bottom:var(--space-1);} .pb-2{padding-bottom:var(--space-2);} .pb-3{padding-bottom:var(--space-3);} .pb-4{padding-bottom:var(--space-4);} .pb-5{padding-bottom:var(--space-5);} .pb-6{padding-bottom:var(--space-6);} /*============================================================== * 12. RESPONSIVE FOUNDATION * ==============================================================*/ @media (max-width:991px){ .container{ padding-inline:20px; } } @media (max-width:768px){ :root{ --fs-hero:3rem; --fs-4xl:2.25rem; --space-7:72px; --space-8:96px; } .container{ padding-inline:16px; } } @media (max-width:576px){ :root{ --fs-hero:2.5rem; --fs-4xl:2rem; } } /*============================================================== BUTTON SYSTEM ------------------------------------------------------------ Compatible with: - Stage 1 Part 1 HTML - Part 2A Variables ==============================================================*/ /*============================================================== Base Button ==============================================================*/ .button{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 28px; font-family:var(--font-primary); font-size:var(--fs-base); font-weight:var(--fw-semibold); line-height:1; text-align:center; white-space:nowrap; border:1px solid transparent; border-radius:var(--radius-md); cursor:pointer; user-select:none; overflow:hidden; transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base); } /* Remove inherited hover color from global links */ .button:hover{ color:inherit; } /*============================================================== Primary Button ==============================================================*/ .button--primary{ color:var(--color-white); background:var(--gradient-primary); box-shadow:var(--shadow-md); } .button--primary:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); } .button--primary:active{ transform:translateY(-1px); } .button--primary:focus-visible{ outline:none; box-shadow: 0 0 0 4px rgba(91,201,255,.25), var(--shadow-lg); } /*============================================================== Outline Button ==============================================================*/ .button--outline{ color:var(--color-primary); border-color:var(--color-primary); background:transparent; } .button--outline:hover{ color:var(--color-white); background:var(--gradient-primary); border-color:transparent; transform:translateY(-2px); box-shadow:var(--shadow-md); } .button--outline:active{ transform:translateY(-1px); } .button--outline:focus-visible{ outline:none; box-shadow: 0 0 0 4px rgba(91,201,255,.22); } /*============================================================== Ghost Button ==============================================================*/ .button--ghost{ color:var(--color-heading); background:transparent; } .button--ghost:hover{ background:rgba(75,93,255,.08); color:var(--color-primary); } .button--ghost:active{ transform:translateY(1px); } .button--ghost:focus-visible{ outline:none; box-shadow: 0 0 0 4px rgba(91,201,255,.20); } /*============================================================== Large Button ==============================================================*/ .button--large{ padding:18px 36px; font-size:var(--fs-lg); border-radius:var(--radius-lg); } /*============================================================== Small Button ==============================================================*/ .button--small{ padding:10px 18px; font-size:var(--fs-sm); border-radius:var(--radius-sm); } /*============================================================== Disabled State ==============================================================*/ .button:disabled, .button[aria-disabled="true"]{ opacity:.55; pointer-events:none; cursor:not-allowed; box-shadow:none; } /*============================================================== Optional Shine Effect ==============================================================*/ .button::before{ content:""; position:absolute; inset:0; left:-130%; width:60%; background: linear-gradient( 120deg, transparent, rgba(255,255,255,.28), transparent ); transition:left .65s ease; } .button:hover::before{ left:140%; } /*============================================================== LOGO ==============================================================*/ .header__logo{ display:inline-flex; align-items:center; gap:12px; color:var(--color-white); font-weight:var(--fw-extra-bold); font-size:1.35rem; transition: color var(--transition-base), transform var(--transition-fast); } .header__logo:hover{ color:var(--color-accent); transform:translateY(-2px); } /*============================================================== Logo Icon ==============================================================*/ .header__logo-icon{ display:grid; place-items:center; width:46px; height:46px; border-radius:14px; color:var(--color-white); background:var(--gradient-primary); box-shadow:var(--shadow-md); flex-shrink:0; transition: transform var(--transition-fast), box-shadow var(--transition-base); } .header__logo:hover .header__logo-icon{ transform:rotate(-8deg) scale(1.05); box-shadow:var(--shadow-lg); } .header__logo-icon i{ font-size:1.15rem; } /*============================================================== Logo Text ==============================================================*/ .header__logo-text{ font-size:1.35rem; font-weight:var(--fw-extra-bold); letter-spacing:.03em; color:inherit; } /*============================================================== HEADER ------------------------------------------------------------ Compatible with: - Stage 1 Part 1 HTML - Part 2A Variables - Part 2B-1 Button System ==============================================================*/ /*============================================================== Sticky Header ==============================================================*/ .header{ position:fixed; top:0; left:0; width:100%; z-index: 999999 !important; padding:22px 0; background:rgba(5,8,22,.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--color-border-dark); box-shadow:0 10px 35px rgba(0,0,0,.12); transition: background var(--transition-base), box-shadow var(--transition-base), padding var(--transition-base); } /* وقتی نوار مدیریت وجود دارد */ .admin-bar .header { top: 32px !important; } /* موبایل */ @media screen and (max-width: 782px) { .admin-bar .header { top: 46px !important; } } /*============================================================== Header Container ==============================================================*/ .header__container{ display:flex; align-items:center; justify-content:space-between; gap:32px; } /*============================================================== Navigation ==============================================================*/ .header__nav{ flex:1; display:flex; justify-content:center; } .header__menu{ display:flex; align-items:center; gap:36px; } .header__item{ position:relative; } .header__link{ position:relative; display:inline-flex; align-items:center; padding:8px 0; color:rgba(255,255,255,.82); font-size:var(--fs-base); font-weight:var(--fw-medium); transition: color var(--transition-base); } .header__link:hover{ color:var(--color-white); } .header__link::after{ content:""; position:absolute; right:0; bottom:-8px; width:0; height:2px; border-radius:999px; background:var(--gradient-primary); transition:width var(--transition-base); } .header__link:hover::after{ width:100%; } .header__link--active{ color:var(--color-white); } .header__link--active::after{ width:100%; } /*============================================================== Header Actions ==============================================================*/ .header__actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; } .header__search{ width:46px; height:46px; display:grid; place-items:center; border-radius:var(--radius-md); color:var(--color-white); background:rgba(255,255,255,.05); border:1px solid var(--color-border-dark); transition: transform var(--transition-fast), background var(--transition-base), border-color var(--transition-base); } .header__search:hover{ background:rgba(75,93,255,.18); border-color:rgba(91,201,255,.35); transform:translateY(-2px); } .header__search:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(91,201,255,.25); } .header__search i{ font-size:1rem; } /*============================================================== Responsive Header ==============================================================*/ @media (max-width:991px){ .header{ padding:18px 0; } .header__container{ gap:20px; } /* ========================================================== CSS-only Scaffold Navigation is hidden until a future mobile menu is implemented. ========================================================== */ .header__nav{ display:none; } .header__actions{ gap:10px; } .header__actions .button{ padding:12px 20px; font-size:var(--fs-sm); } .header__search{ width:42px; height:42px; } } @media (max-width:576px){ .header{ padding:14px 0; } .header__logo{ font-size:1.1rem; gap:10px; } .header__logo-icon{ width:40px; height:40px; } .header__logo-icon i{ font-size:1rem; } .header__actions{ gap:8px; } /* Keep only search + primary CTA on very small screens. */ .header__actions .button--ghost{ display:none; } .header__actions .button{ padding:10px 16px; font-size:.82rem; } .header__search{ width:38px; height:38px; } } /*============================================================== HERO SECTION ------------------------------------------------------------ Stage 1 — Part 3A-1 Compatible with: • Part 1 HTML • Part 2A Variables • Part 2B Header ==============================================================*/ /*============================================================== HERO BASE ==============================================================*/ .hero{ position:relative; overflow:hidden; isolation:isolate; background:var(--color-bg-dark); color:var(--color-white); padding-top:140px; padding-bottom:120px; } /*============================================================== HERO CONTAINER ==============================================================*/ .hero__container{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:72px; } /*============================================================== DECORATIVE BACKGROUND LAYERS ==============================================================*/ .hero__bg{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; opacity:.9; z-index:0; } /* Left Glow */ .hero__bg--left{ width:520px; height:520px; top:-120px; left:-180px; background: radial-gradient( circle, rgba(91,201,255,.18) 0%, rgba(75,93,255,.14) 45%, transparent 75% ); } /* Right Glow */ .hero__bg--right{ width:620px; height:620px; right:-180px; top:120px; background: radial-gradient( circle, rgba(108,77,255,.22) 0%, rgba(91,201,255,.10) 42%, transparent 72% ); } /*============================================================== GRID OVERLAY ==============================================================*/ .hero__grid{ position:absolute; inset:0; opacity:.04; z-index:1; pointer-events:none; background-image: linear-gradient( rgba(255,255,255,.08) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.08) 1px, transparent 1px ); background-size:48px 48px; } /*============================================================== HERO CONTENT ==============================================================*/ .hero__content{ position:relative; z-index:5; display:flex; flex-direction:column; align-items:flex-start; } /*============================================================== EYEBROW ==============================================================*/ .hero__eyebrow{ display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-bottom:24px; padding:8px 18px; border-radius:999px; color:var(--color-accent); font-size:var(--fs-sm); font-weight:var(--fw-semibold); letter-spacing:.03em; border:1px solid rgba(91,201,255,.25); background:rgba(91,201,255,.08); backdrop-filter:blur(12px); } /*============================================================== HERO TITLE ==============================================================*/ .hero__title{ max-width:620px; margin-bottom:28px; color:var(--color-white); font-size:clamp(3rem,5vw,4.25rem); font-weight:var(--fw-extra-bold); line-height:1.15; text-wrap:balance; } /*============================================================== HIGHLIGHT ==============================================================*/ .hero__title-highlight{ display:inline-block; background:linear-gradient( 135deg, var(--color-accent), var(--color-secondary) ); -webkit-background-clip:text; background-clip:text; color:transparent; } /*============================================================== DESCRIPTION ==============================================================*/ .hero__description{ max-width:620px; margin-bottom:42px; color:#C4CBDA; font-size:1.05rem; line-height:2; font-weight:var(--fw-regular); } /*============================================================== CONTENT WIDTH HELPERS ==============================================================*/ .hero__content > *{ width:100%; } .hero__content > .hero__eyebrow{ width:auto; } /*============================================================== RESPONSIVE FOUNDATION ==============================================================*/ @media (max-width:991px){ .hero{ padding-top:120px; padding-bottom:90px; } .hero__container{ grid-template-columns:1fr; gap:64px; } .hero__content{ align-items:center; text-align:center; } .hero__title{ max-width:100%; } .hero__description{ max-width:700px; } } @media (max-width:576px){ .hero{ padding-top:100px; padding-bottom:72px; } .hero__container{ gap:48px; } .hero__eyebrow{ margin-bottom:20px; padding:8px 16px; } .hero__title{ margin-bottom:24px; line-height:1.2; } .hero__description{ margin-bottom:36px; font-size:1rem; line-height:1.9; } .hero__bg--left{ width:340px; height:340px; left:-120px; } .hero__bg--right{ width:360px; height:360px; right:-140px; } } /*============================================================== HERO ACTIONS ------------------------------------------------------------ Stage 1 — Part 3A-2 Compatible with: • Part 1 HTML • Part 2A Variables • Part 2B Button System ==============================================================*/ /*============================================================== CTA BUTTONS ==============================================================*/ .hero__buttons{ display:flex; align-items:center; gap:18px; margin-bottom:48px; flex-wrap:wrap; } .hero__buttons .button{ flex-shrink:0; } /*============================================================== FEATURE LIST ==============================================================*/ .hero__features{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:56px; } /*============================================================== FEATURE BADGE ==============================================================*/ .feature-badge{ display:flex; align-items:center; gap:16px; min-width:220px; padding:18px 20px; border-radius:var(--radius-lg); background:rgba(255,255,255,.04); border:1px solid var(--color-border-dark); backdrop-filter:blur(18px); transition: transform var(--transition-base), border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base); } .feature-badge:hover{ transform:translateY(-6px); border-color:rgba(91,201,255,.28); background:rgba(255,255,255,.06); box-shadow:var(--shadow-md); } /*============================================================== FEATURE ICON ==============================================================*/ .feature-badge__icon{ display:grid; place-items:center; width:52px; height:52px; border-radius:50%; color:var(--color-white); background:var(--gradient-primary); flex-shrink:0; box-shadow:0 10px 24px rgba(75,93,255,.30); } .feature-badge__icon i{ font-size:1.1rem; } /*============================================================== FEATURE CONTENT ==============================================================*/ .feature-badge__content{ display:flex; flex-direction:column; gap:2px; } .feature-badge__title{ color:var(--color-white); font-size:var(--fs-base); font-weight:var(--fw-semibold); line-height:1.4; } .feature-badge__text{ color:#B9C2D4; font-size:var(--fs-sm); line-height:1.7; } /*============================================================== CLIENTS ==============================================================*/ .hero__clients{ width:100%; } .hero__clients-title{ display:block; margin-bottom:18px; color:var(--color-muted); font-size:var(--fs-sm); font-weight:var(--fw-medium); } /*============================================================== CLIENT LIST ==============================================================*/ .hero__client-list{ display:flex; flex-wrap:wrap; gap:14px; } /*============================================================== CLIENT ITEM ==============================================================*/ .hero__client{ display:flex; align-items:center; justify-content:center; min-width:120px; height:52px; padding-inline:20px; border-radius:var(--radius-md); border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.03); color:#97A2BA; font-size:var(--fs-sm); font-weight:var(--fw-semibold); letter-spacing:.03em; filter:grayscale(100%); transition: transform var(--transition-base), color var(--transition-base), background var(--transition-base), border-color var(--transition-base); } .hero__client:hover{ transform:translateY(-4px); filter:none; color:var(--color-white); background:rgba(255,255,255,.06); border-color:rgba(91,201,255,.25); } /*============================================================== RESPONSIVE ==============================================================*/ @media (max-width:991px){ .hero__buttons{ justify-content:center; } .hero__buttons .button{ min-width:220px; } .hero__features{ justify-content:center; } .feature-badge{ width:min(320px,100%); } .hero__client-list{ justify-content:center; } } @media (max-width:576px){ /*------------------------------------------ Buttons ------------------------------------------*/ .hero__buttons{ flex-direction:column; align-items:stretch; gap:16px; margin-bottom:42px; } .hero__buttons .button{ width:100%; } /*------------------------------------------ Feature Badges ------------------------------------------*/ .hero__features{ gap:14px; margin-bottom:42px; } .feature-badge{ width:100%; min-width:0; padding:16px; } .feature-badge__icon{ width:46px; height:46px; } .feature-badge__title{ font-size:.95rem; } .feature-badge__text{ font-size:.82rem; } /*------------------------------------------ Clients ------------------------------------------*/ .hero__clients-title{ text-align:center; } .hero__client-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } .hero__client{ min-width:0; width:100%; height:48px; font-size:.82rem; } } /*============================================================== HERO VISUAL ------------------------------------------------------------ Stage 1 — Part 3B Pure CSS Illustration ==============================================================*/ /*============================================================== HERO VISUAL COLUMN ==============================================================*/ .hero__visual{ position:relative; display:flex; justify-content:center; align-items:center; min-height:720px; } /*============================================================== SCENE ==============================================================*/ .hero__scene{ position:relative; width:min(100%,560px); aspect-ratio:1/1; display:flex; justify-content:center; align-items:center; } /*============================================================== MAIN GLOW ==============================================================*/ .hero__glow{ position:absolute; inset:15%; border-radius:50%; background: radial-gradient( circle, rgba(91,201,255,.35), rgba(75,93,255,.22), rgba(108,77,255,.10), transparent 72% ); filter:blur(80px); animation:glowPulse 7s ease-in-out infinite; } /*============================================================== FLOATING ORBS ==============================================================*/ .hero__orb{ position:absolute; border-radius:50%; pointer-events:none; backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.08); background: radial-gradient( circle at 30% 30%, rgba(255,255,255,.55), rgba(91,201,255,.35), rgba(75,93,255,.15) ); box-shadow: 0 0 40px rgba(91,201,255,.20); } .hero__orb--one{ width:82px; height:82px; top:5%; left:10%; animation:orbFloatOne 7s ease-in-out infinite; } .hero__orb--two{ width:42px; height:42px; right:8%; top:22%; animation:orbFloatTwo 5.5s ease-in-out infinite; } .hero__orb--three{ width:58px; height:58px; bottom:12%; left:18%; animation:orbFloatThree 6.5s ease-in-out infinite; } /*============================================================== PLATFORM ==============================================================*/ .hero__platform{ position:absolute; bottom:60px; width:320px; height:320px; display:grid; place-items:center; } .hero__platform-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(91,201,255,.20); box-shadow: inset 0 0 40px rgba(91,201,255,.05), 0 0 40px rgba(75,93,255,.10); animation:ringRotate 18s linear infinite; } .hero__platform-ring::before{ content:""; position:absolute; inset:22px; border-radius:50%; border:1px dashed rgba(255,255,255,.10); } .hero__platform-ring--small{ inset:42px; animation-direction:reverse; animation-duration:12s; } /*============================================================== MAIN CUBE ==============================================================*/ .hero__cube{ position:relative; width:250px; height:250px; display:grid; place-items:center; z-index:3; transform-style:preserve-3d; animation:cubeFloat 6s ease-in-out infinite; } .hero__cube-face{ position:absolute; inset:0; border-radius:26px; overflow:hidden; display:grid; place-items:center; background: linear-gradient( 145deg, rgba(255,255,255,.08), rgba(255,255,255,.03) ); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(18px); box-shadow: 0 25px 80px rgba(0,0,0,.30), 0 0 60px rgba(91,201,255,.12); } .hero__cube-face::before{ content:""; position:absolute; inset:0; background: linear-gradient( 135deg, rgba(255,255,255,.10), transparent 40% ); } .hero__cube-face--front{ transform:translateZ(0); } /*============================================================== CSS BRAIN ==============================================================*/ .hero__brain{ position:relative; width:130px; height:130px; display:grid; place-items:center; } .hero__brain-core{ width:54px; height:54px; border-radius:50%; background: radial-gradient( circle, var(--color-accent), var(--color-secondary) ); box-shadow: 0 0 30px rgba(91,201,255,.45); animation:brainPulse 2.6s ease-in-out infinite; } /*============================================================== NEURAL WAVES ==============================================================*/ .hero__brain-wave{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(91,201,255,.22); animation:wavePulse 3s ease-out infinite; } .hero__brain-wave--2{ inset:-12px; animation-delay:.6s; } .hero__brain-wave--3{ inset:-24px; animation-delay:1.2s; } /*============================================================== KEYFRAMES ==============================================================*/ @keyframes glowPulse{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.08); opacity:1; } } @keyframes cubeFloat{ 0%,100%{ transform: translateY(0) rotate(-6deg); } 50%{ transform: translateY(-14px) rotate(6deg); } } @keyframes orbFloatOne{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-18px); } } @keyframes orbFloatTwo{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-10px,-16px); } } @keyframes orbFloatThree{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(16px); } } @keyframes brainPulse{ 0%,100%{ transform:scale(1); box-shadow:0 0 30px rgba(91,201,255,.45); } 50%{ transform:scale(1.08); box-shadow:0 0 55px rgba(91,201,255,.65); } } @keyframes wavePulse{ 0%{ transform:scale(.75); opacity:.8; } 100%{ transform:scale(1.35); opacity:0; } } @keyframes ringRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } /*============================================================== FLOATING INFO CARDS ------------------------------------------------------------ Stage 1 — Part 3C ==============================================================*/ /*============================================================== BASE CARD ==============================================================*/ .floating-card{ position:absolute; display:flex; align-items:center; gap:16px; width:230px; padding:18px; border-radius:var(--radius-xl); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); box-shadow: 0 20px 45px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base), background var(--transition-base); z-index:8; } .floating-card:hover{ transform:translateY(-8px) scale(1.02); border-color:rgba(91,201,255,.30); background:rgba(255,255,255,.08); box-shadow: 0 30px 70px rgba(0,0,0,.32), 0 0 40px rgba(91,201,255,.12); } /*============================================================== CARD POSITIONS ==============================================================*/ .floating-card--top{ top:48px; left:-24px; animation:cardFloatOne 6s ease-in-out infinite; } .floating-card--right{ top:45%; right:-42px; animation:cardFloatTwo 7s ease-in-out infinite; } .floating-card--bottom{ bottom:42px; left:22px; animation:cardFloatThree 6.5s ease-in-out infinite; } /*============================================================== CARD ICON ==============================================================*/ .floating-card__icon{ width:52px; height:52px; flex-shrink:0; display:grid; place-items:center; border-radius:16px; color:var(--color-white); background:var(--gradient-primary); box-shadow:0 12px 30px rgba(75,93,255,.28); } .floating-card__icon i{ font-size:1.1rem; } /*============================================================== CARD CONTENT ==============================================================*/ .floating-card__content{ display:flex; flex-direction:column; gap:4px; } .floating-card__title{ color:var(--color-white); font-size:var(--fs-base); font-weight:var(--fw-semibold); line-height:1.35; } .floating-card__text{ color:#B9C2D4; font-size:var(--fs-sm); line-height:1.6; } /*============================================================== CARD ANIMATIONS ==============================================================*/ @keyframes cardFloatOne{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } } @keyframes cardFloatTwo{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(12px); } } @keyframes cardFloatThree{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } } /*============================================================== HERO VISUAL RESPONSIVE ==============================================================*/ @media (max-width:1200px){ .hero__scene{ transform:scale(.92); } } @media (max-width:991px){ .hero__visual{ min-height:560px; order:-1; } .hero__scene{ width:min(520px,100%); } .floating-card{ width:210px; padding:16px; } .floating-card--top{ top:30px; left:0; } .floating-card--right{ right:0; } .floating-card--bottom{ left:10px; bottom:18px; } } @media (max-width:768px){ .hero__visual{ min-height:440px; } .hero__scene{ transform:scale(.82); } .floating-card{ width:190px; gap:12px; } .floating-card__icon{ width:44px; height:44px; } } @media (max-width:576px){ .hero__visual{ min-height:340px; } .hero__scene{ transform:scale(.72); } /* Keep the illustration clean on small devices. */ .floating-card{ display:none; } .hero__platform{ transform:scale(.82); } .hero__cube{ transform:scale(.88); } } /*============================================================== REDUCED MOTION SUPPORT ==============================================================*/ @media (prefers-reduced-motion: reduce){ .hero__orb, .hero__cube, .hero__glow, .hero__platform-ring, .hero__brain-core, .hero__brain-wave, .floating-card{ animation:none !important; } } /*============================================================== ABOUT SECTION ------------------------------------------------------------ Stage 2 — Part 2A Layout • Image • Typography ==============================================================*/ /*============================================================== SECTION BASE ==============================================================*/ .about{ position:relative; overflow:hidden; padding:120px 0; background:var(--color-bg-light); } /*============================================================== CONTAINER ==============================================================*/ .about__container{ display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:80px; position:relative; z-index:2; } /*============================================================== MEDIA ==============================================================*/ .about__media{ position:relative; display:flex; justify-content:center; align-items:center; } .about__image-wrapper{ position:relative; width:100%; max-width:540px; border-radius:var(--radius-xl); } .about__image{ display:block; width:100%; height:auto; border-radius:inherit; object-fit:cover; box-shadow:var(--shadow-xl); } /*============================================================== DECORATIVE SHAPES ==============================================================*/ .about__shape{ position:absolute; border-radius:50%; pointer-events:none; } .about__shape--one{ width:170px; height:170px; top:-32px; left:-40px; background: radial-gradient( circle, rgba(91,201,255,.32), transparent 72% ); filter:blur(10px); } .about__shape--two{ width:220px; height:220px; right:-55px; bottom:-55px; background: radial-gradient( circle, rgba(108,77,255,.18), transparent 72% ); filter:blur(18px); } /*============================================================== CONTENT ==============================================================*/ .about__content{ display:flex; flex-direction:column; align-items:flex-start; } /*============================================================== EYEBROW ==============================================================*/ .about__eyebrow{ display:inline-flex; align-items:center; gap:10px; margin-bottom:24px; padding:8px 18px; border-radius:999px; color:var(--color-primary); background:rgba(75,93,255,.08); border:1px solid rgba(75,93,255,.15); font-size:var(--fs-sm); font-weight:var(--fw-semibold); } /*============================================================== TITLE ==============================================================*/ .about__title{ margin-bottom:28px; color:var(--color-heading); font-size:clamp(2.2rem,4vw,3.2rem); font-weight:var(--fw-extra-bold); line-height:1.2; max-width:620px; } .about__title-highlight{ background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; color:transparent; } /*============================================================== DESCRIPTION ==============================================================*/ .about__description{ max-width:620px; margin-bottom:20px; color:var(--color-text); font-size:var(--fs-base); line-height:2; } .about__description:last-of-type{ margin-bottom:42px; } /*============================================================== RESPONSIVE ==============================================================*/ @media (max-width:991px){ .about{ padding:96px 0; } .about__container{ grid-template-columns:1fr; gap:60px; } .about__content{ align-items:center; text-align:center; } .about__image-wrapper{ max-width:500px; } } @media (max-width:576px){ .about{ padding:72px 0; } .about__container{ gap:42px; } .about__image-wrapper{ max-width:100%; } .about__shape--one{ width:120px; height:120px; } .about__shape--two{ width:150px; height:150px; } .about__eyebrow{ margin-bottom:20px; } .about__title{ margin-bottom:22px; } .about__description{ font-size:.98rem; } } /*============================================================== ABOUT FEATURES ------------------------------------------------------------ Stage 2 — Part 2B Feature Cards • CTA • Decorative Accents ==============================================================*/ /*============================================================== FEATURES WRAPPER ==============================================================*/ .about__features{ display:flex; flex-direction:column; gap:18px; width:100%; margin-bottom:48px; } /*============================================================== FEATURE CARD ==============================================================*/ .about-feature{ display:flex; align-items:flex-start; gap:18px; padding:22px 24px; border-radius:var(--radius-lg); background:var(--color-white); border:1px solid rgba(75,93,255,.08); box-shadow:var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base), background-color var(--transition-base); } .about-feature:hover{ transform:translateY(-6px); border-color:rgba(91,201,255,.28); box-shadow:var(--shadow-lg); } /*============================================================== FEATURE ICON ==============================================================*/ .about-feature__icon{ width:58px; height:58px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; color:var(--color-white); background:var(--gradient-primary); box-shadow:0 12px 28px rgba(75,93,255,.22); transition: transform var(--transition-base), box-shadow var(--transition-base); } .about-feature:hover .about-feature__icon{ transform:scale(1.08) rotate(-6deg); box-shadow:0 18px 36px rgba(75,93,255,.32); } .about-feature__icon i{ font-size:1.25rem; } /*============================================================== FEATURE CONTENT ==============================================================*/ .about-feature__content{ flex:1; display:flex; flex-direction:column; gap:6px; } .about-feature__title{ margin:0; color:var(--color-heading); font-size:1.05rem; font-weight:var(--fw-bold); line-height:1.4; } .about-feature__text{ margin:0; color:var(--color-text); font-size:var(--fs-sm); line-height:1.8; } /*============================================================== CTA AREA ==============================================================*/ .about__actions{ display:flex; align-items:center; gap:18px; margin-top:8px; } .about__actions .button{ min-width:210px; } /*============================================================== OPTIONAL DECORATIVE ACCENTS ==============================================================*/ .about::before{ content:""; position:absolute; width:340px; height:340px; top:-140px; right:-140px; border-radius:50%; background: radial-gradient( circle, rgba(91,201,255,.10), transparent 72% ); pointer-events:none; z-index:0; } .about::after{ content:""; position:absolute; width:260px; height:260px; left:-110px; bottom:-110px; border-radius:50%; background: radial-gradient( circle, rgba(108,77,255,.08), transparent 72% ); pointer-events:none; z-index:0; } /*============================================================== RESPONSIVE ==============================================================*/ @media (max-width:991px){ .about__features{ max-width:680px; } .about-feature{ text-align:right; } .about__actions{ justify-content:center; width:100%; } } @media (max-width:576px){ .about__features{ gap:14px; margin-bottom:36px; } .about-feature{ padding:18px; gap:14px; } .about-feature__icon{ width:48px; height:48px; } .about-feature__icon i{ font-size:1rem; } .about-feature__title{ font-size:1rem; } .about-feature__text{ font-size:.9rem; } .about__actions{ width:100%; } .about__actions .button{ width:100%; min-width:0; } } /*============================================================== SERVICES SECTION ------------------------------------------------------------ Stage 3 — Part 2A Section • Heading • Grid • Card Base ==============================================================*/ /*============================================================== SECTION BASE ==============================================================*/ .services{ position:relative; overflow:hidden; padding:120px 0; background:#081020; } .services::before{ content:""; position:absolute; inset:0; background: radial-gradient( circle at 20% 20%, rgba(91,201,255,.08), transparent 35% ), radial-gradient( circle at 80% 80%, rgba(108,77,255,.08), transparent 40% ); pointer-events:none; } .services>.container{ position:relative; z-index:2; } /*============================================================== SECTION HEADING ==============================================================*/ .section-heading{ max-width:760px; margin:0 auto 72px; text-align:center; } .section-heading__eyebrow{ display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; padding:8px 18px; border-radius:999px; background:rgba(91,201,255,.08); border:1px solid rgba(91,201,255,.15); color:var(--color-primary); font-size:var(--fs-sm); font-weight:var(--fw-semibold); } .section-heading__title{ margin-bottom:24px; color:var(--color-white); font-size:clamp(2rem,4vw,3rem); font-weight:var(--fw-extra-bold); line-height:1.2; } .section-heading__highlight{ background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; color:transparent; } .section-heading__description{ max-width:640px; margin:0 auto; color:rgba(255,255,255,.72); line-height:1.9; font-size:var(--fs-base); } /*============================================================== SERVICES GRID ==============================================================*/ .services__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:24px; } /*============================================================== SERVICE CARD ==============================================================*/ .service-card{ display:flex; flex-direction:column; align-items:flex-start; height:100%; padding:30px 24px; border-radius:var(--radius-xl); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 16px 40px rgba(0,0,0,.18); transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); } .service-card__icon{ width:64px; height:64px; margin-bottom:24px; display:grid; place-items:center; border-radius:50%; color:var(--color-white); background:var(--gradient-primary); box-shadow:0 12px 28px rgba(75,93,255,.28); } .service-card__icon i{ font-size:1.35rem; } .service-card__title{ margin-bottom:14px; color:var(--color-white); font-size:1.15rem; font-weight:var(--fw-bold); line-height:1.4; } .service-card__description{ flex:1; margin-bottom:26px; color:rgba(255,255,255,.70); font-size:var(--fs-sm); line-height:1.85; } .service-card__link{ display:inline-flex; align-items:center; gap:8px; color:var(--color-primary); font-weight:var(--fw-semibold); transition: color var(--transition-base), transform var(--transition-base); } .service-card__link i{ transition:transform var(--transition-base); } /*============================================================== RESPONSIVE GRID ==============================================================*/ @media (max-width:1400px){ .services__grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:991px){ .services{ padding:96px 0; } .section-heading{ margin-bottom:56px; } .services__grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:576px){ .services{ padding:72px 0; } .section-heading{ margin-bottom:42px; } .services__grid{ grid-template-columns:1fr; gap:18px; } .service-card{ padding:24px 20px; } .service-card__icon{ width:56px; height:56px; margin-bottom:18px; } .service-card__title{ font-size:1.05rem; } .service-card__description{ margin-bottom:20px; font-size:.95rem; } } /*============================================================== SERVICES SECTION ------------------------------------------------------------ Stage 3 — Part 2B Hover Effects • Interactions • Final Refinements ==============================================================*/ /*============================================================== SERVICE CARD INTERACTIONS ==============================================================*/ .service-card{ position:relative; overflow:hidden; isolation:isolate; } /* Soft glow overlay */ .service-card::before{ content:""; position:absolute; inset:-35%; background: radial-gradient( circle, rgba(91,201,255,.16), transparent 68% ); opacity:0; transform:scale(.8); transition: opacity var(--transition-base), transform .55s ease; z-index:-1; } /* Top accent line */ .service-card::after{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--gradient-primary); transform:scaleX(0); transform-origin:left; transition:transform .45s ease; } /* Card Hover */ .service-card:hover{ transform:translateY(-12px); border-color:rgba(91,201,255,.28); box-shadow: 0 28px 60px rgba(0,0,0,.35), 0 0 40px rgba(91,201,255,.08); } .service-card:hover::before{ opacity:1; transform:scale(1); } .service-card:hover::after{ transform:scaleX(1); } /*============================================================== ICON INTERACTION ==============================================================*/ .service-card__icon{ position:relative; overflow:hidden; } .service-card__icon::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: radial-gradient( circle, rgba(255,255,255,.30), transparent 70% ); opacity:0; transform:scale(.6); transition: opacity .4s ease, transform .4s ease; } .service-card:hover .service-card__icon{ transform: translateY(-4px) scale(1.08) rotate(-6deg); box-shadow: 0 20px 42px rgba(75,93,255,.35), 0 0 30px rgba(91,201,255,.25); } .service-card:hover .service-card__icon::before{ opacity:1; transform:scale(1); } .service-card:hover .service-card__icon i{ transform:scale(1.08); } .service-card__icon i{ transition:transform .35s ease; } /*============================================================== TYPOGRAPHY INTERACTION ==============================================================*/ .service-card__title{ transition:color var(--transition-base); } .service-card:hover .service-card__title{ color:var(--color-primary); } /*============================================================== LINK INTERACTION ==============================================================*/ .service-card__link{ position:relative; overflow:hidden; } .service-card__link::after{ content:""; position:absolute; bottom:-3px; right:0; width:100%; height:2px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .35s ease; } .service-card:hover .service-card__link{ color:var(--color-secondary); } .service-card:hover .service-card__link::after{ transform:scaleX(1); } .service-card:hover .service-card__link i{ transform:translateX(-6px); } /*============================================================== SUBTLE BACKGROUND PATTERN ==============================================================*/ .services{ background-image: radial-gradient( rgba(255,255,255,.025) 1px, transparent 1px ); background-size:34px 34px; } /*============================================================== ACCESSIBILITY ==============================================================*/ .service-card:focus-within{ border-color:var(--color-primary); box-shadow: 0 0 0 3px rgba(91,201,255,.18), 0 20px 50px rgba(0,0,0,.30); } .service-card__link:focus-visible{ outline:none; } /*============================================================== FINAL RESPONSIVE REFINEMENTS ==============================================================*/ @media (max-width:991px){ .services__grid{ gap:20px; } .service-card{ min-height:100%; } } @media (max-width:768px){ .service-card{ padding:22px; } .service-card__icon{ width:60px; height:60px; } } @media (max-width:576px){ .services__grid{ gap:16px; } .service-card{ border-radius:var(--radius-lg); padding:20px 18px; } .service-card:hover{ transform:translateY(-6px); } .service-card__icon{ width:52px; height:52px; } .service-card__icon i{ font-size:1.1rem; } .service-card__title{ font-size:1rem; } .service-card__description{ font-size:.92rem; line-height:1.8; } .service-card__link{ font-size:.92rem; } } /*============================================================== STAGE 4 — PART 2A CERTIFICATIONS + PORTFOLIO Base Layout • Cards • Responsive ==============================================================*/ /*============================================================== CERTIFICATIONS SECTION ==============================================================*/ .certifications{ position:relative; overflow:hidden; padding:120px 0; background:var(--color-bg-light); } .certifications>.container{ position:relative; z-index:2; } /*============================================================== CERTIFICATIONS GRID ==============================================================*/ .certifications__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } /*============================================================== CERTIFICATION CARD ==============================================================*/ .cert-card{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:36px 28px; border-radius:var(--radius-xl); background:var(--color-white); border:1px solid rgba(75,93,255,.08); box-shadow:var(--shadow-md); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .cert-card:hover{ transform:translateY(-8px); border-color:rgba(91,201,255,.22); box-shadow:var(--shadow-xl); } /*============================================================== CERTIFICATION ICON ==============================================================*/ .cert-card__icon{ width:72px; height:72px; margin-bottom:24px; display:grid; place-items:center; border-radius:50%; color:var(--color-white); background:var(--gradient-primary); box-shadow:0 14px 32px rgba(75,93,255,.24); } .cert-card__icon i{ font-size:1.45rem; } .cert-card__title{ margin-bottom:10px; color:var(--color-heading); font-size:1.15rem; font-weight:var(--fw-bold); } .cert-card__text{ color:var(--color-text); font-size:var(--fs-sm); line-height:1.8; } /*============================================================== PORTFOLIO SECTION ==============================================================*/ .portfolio{ position:relative; overflow:hidden; padding:120px 0; background:var(--color-bg-light); } .portfolio>.container{ position:relative; z-index:2; } /*============================================================== PORTFOLIO GRID ==============================================================*/ .portfolio__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; } /*============================================================== PORTFOLIO CARD ==============================================================*/ .portfolio-card{ overflow:hidden; border-radius:var(--radius-xl); background:var(--color-white); border:1px solid rgba(75,93,255,.08); box-shadow:var(--shadow-md); transition: transform var(--transition-base), box-shadow var(--transition-base); } .portfolio-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-xl); } /*============================================================== IMAGE ==============================================================*/ .portfolio-card__image{ display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; transition: transform .55s ease; } .portfolio-card:hover .portfolio-card__image{ transform:scale(1.06); } /*============================================================== CONTENT ==============================================================*/ .portfolio-card__content{ padding:22px; } .portfolio-card__title{ margin-bottom:10px; color:var(--color-heading); font-size:1.08rem; font-weight:var(--fw-bold); } .portfolio-card__text{ color:var(--color-text); font-size:var(--fs-sm); line-height:1.8; } /*============================================================== RESPONSIVE ==============================================================*/ @media (max-width:1200px){ .portfolio__grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:991px){ .certifications, .portfolio{ padding:96px 0; } .certifications__grid{ grid-template-columns:repeat(2,1fr); } .portfolio__grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:576px){ .certifications, .portfolio{ padding:72px 0; } .certifications__grid, .portfolio__grid{ grid-template-columns:1fr; gap:18px; } .cert-card{ padding:28px 22px; } .cert-card__icon{ width:60px; height:60px; margin-bottom:18px; } .portfolio-card__content{ padding:18px; } } /*============================================================== STAGE 4 — PART 2B CERTIFICATIONS + PORTFOLIO Premium Interactions • Decorative Effects • Accessibility ==============================================================*/ /*============================================================== CERTIFICATION CARD PREMIUM INTERACTIONS ==============================================================*/ .cert-card{ position:relative; overflow:hidden; isolation:isolate; } .cert-card::before{ content:""; position:absolute; inset:-35%; background: radial-gradient( circle, rgba(91,201,255,.14), transparent 70% ); opacity:0; transform:scale(.75); transition: opacity .45s ease, transform .55s ease; z-index:-1; } .cert-card::after{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--gradient-primary); transform:scaleX(0); transform-origin:left; transition:transform .4s ease; } .cert-card:hover{ transform:translateY(-12px); border-color:rgba(91,201,255,.22); box-shadow: 0 24px 50px rgba(10,22,40,.14), 0 0 30px rgba(91,201,255,.10); } .cert-card:hover::before{ opacity:1; transform:scale(1); } .cert-card:hover::after{ transform:scaleX(1); } /*============================================================== ICON ANIMATION ==============================================================*/ .cert-card__icon{ position:relative; transition: transform var(--transition-base), box-shadow var(--transition-base); } .cert-card__icon::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: radial-gradient( circle, rgba(255,255,255,.35), transparent 72% ); opacity:0; transform:scale(.7); transition:.4s ease; } .cert-card:hover .cert-card__icon{ transform: translateY(-4px) scale(1.08) rotate(-6deg); box-shadow: 0 20px 42px rgba(75,93,255,.30), 0 0 26px rgba(91,201,255,.18); } .cert-card:hover .cert-card__icon::before{ opacity:1; transform:scale(1); } .cert-card__icon i{ transition:transform .35s ease; } .cert-card:hover .cert-card__icon i{ transform:scale(1.1); } /*============================================================== PORTFOLIO CARD ==============================================================*/ .portfolio-card{ position:relative; isolation:isolate; } .portfolio-card::before{ content:""; position:absolute; inset:0; background: linear-gradient( to top, rgba(8,16,32,.90), rgba(8,16,32,.05) ); opacity:0; transition:opacity .45s ease; z-index:1; } /*============================================================== IMAGE ==============================================================*/ .portfolio-card__image{ transition: transform .65s ease, filter .45s ease; } .portfolio-card:hover .portfolio-card__image{ transform:scale(1.08); filter:brightness(.85); } /*============================================================== CONTENT ANIMATION ==============================================================*/ .portfolio-card__content{ position:absolute; left:24px; right:24px; bottom:22px; z-index:2; color:var(--color-white); transform:translateY(24px); opacity:0; transition: transform .45s ease, opacity .45s ease; } .portfolio-card:hover::before{ opacity:1; } .portfolio-card:hover .portfolio-card__content{ opacity:1; transform:translateY(0); } .portfolio-card__title{ color:inherit; } .portfolio-card__text{ color:rgba(255,255,255,.78); } /*============================================================== HOVER ACTION ICON ==============================================================*/ .portfolio-card::after{ content:"\f061"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; top:20px; left:20px; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; color:var(--color-white); background:rgba(255,255,255,.12); backdrop-filter:blur(8px); opacity:0; transform: translateY(-12px) rotate(-12deg); transition:.4s ease; z-index:2; } .portfolio-card:hover::after{ opacity:1; transform: translateY(0) rotate(0); } /*============================================================== DECORATIVE BACKGROUND BLOBS ==============================================================*/ .certifications::before{ content:""; position:absolute; width:320px; height:320px; right:-140px; top:-120px; border-radius:50%; background: radial-gradient( circle, rgba(91,201,255,.08), transparent 72% ); } .portfolio::after{ content:""; position:absolute; width:380px; height:380px; left:-170px; bottom:-170px; border-radius:50%; background: radial-gradient( circle, rgba(108,77,255,.08), transparent 72% ); } /*============================================================== ACCESSIBILITY ==============================================================*/ .cert-card:focus-within, .portfolio-card:focus-within{ border-color:var(--color-primary); box-shadow: 0 0 0 3px rgba(91,201,255,.18), var(--shadow-lg); } .portfolio-card:focus-visible{ outline:none; } /*============================================================== RESPONSIVE REFINEMENTS ==============================================================*/ @media (max-width:991px){ .portfolio-card__content{ left:18px; right:18px; bottom:18px; } } @media (max-width:576px){ .cert-card{ padding:24px 20px; } .cert-card__icon{ width:56px; height:56px; } .cert-card__title{ font-size:1rem; } .cert-card__text{ font-size:.92rem; } .portfolio-card__content{ position:relative; inset:auto; transform:none; opacity:1; background:var(--color-white); color:var(--color-heading); padding:18px; } .portfolio-card::before, .portfolio-card::after{ display:none; } .portfolio-card__text{ color:var(--color-text); } .portfolio-card:hover .portfolio-card__image{ transform:scale(1.03); } } /*============================================================== STAGE 5 — PART 2A BLOG + CTA Base Layout • Cards • Responsive ==============================================================*/ /*============================================================== BLOG SECTION ==============================================================*/ .blog{ position:relative; overflow:hidden; padding:120px 0; background:var(--color-bg-light); } .blog>.container{ position:relative; z-index:2; } /*============================================================== BLOG GRID ==============================================================*/ .blog__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:stretch; } /*============================================================== BLOG CARD ==============================================================*/ .blog-card{ display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius-xl); background:var(--color-white); border:1px solid rgba(75,93,255,.08); box-shadow:var(--shadow-md); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .blog-card:hover{ transform:translateY(-8px); border-color:rgba(91,201,255,.18); box-shadow:var(--shadow-xl); } /*============================================================== BLOG IMAGE ==============================================================*/ .blog-card__image-wrapper{ display:block; overflow:hidden; } .blog-card__image{ display:block; width:100%; aspect-ratio:16 / 10; object-fit:cover; transition:transform .6s ease; } .blog-card:hover .blog-card__image{ transform:scale(1.05); } /*============================================================== BLOG CONTENT ==============================================================*/ .blog-card__content{ display:flex; flex-direction:column; flex:1; padding:24px; } .blog-card__tag{ align-self:flex-start; margin-bottom:18px; padding:6px 14px; border-radius:999px; background:rgba(79,89,255,.08); color:var(--color-primary); font-size:.82rem; font-weight:var(--fw-semibold); } .blog-card__title{ margin-bottom:14px; color:var(--color-heading); font-size:1.12rem; font-weight:var(--fw-bold); line-height:1.55; } .blog-card__description{ flex:1; margin-bottom:24px; color:var(--color-text); line-height:1.9; font-size:var(--fs-sm); } /*============================================================== BLOG FOOTER ==============================================================*/ .blog-card__footer{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:18px; border-top:1px solid rgba(10,20,40,.08); } .blog-card__date{ display:inline-flex; align-items:center; gap:8px; color:var(--color-text-light); font-size:.86rem; } .blog-card__date i{ color:var(--color-primary); } .blog-card__link{ display:inline-flex; align-items:center; gap:8px; color:var(--color-primary); font-weight:var(--fw-semibold); transition: color var(--transition-fast), gap var(--transition-fast); } .blog-card__link:hover{ gap:12px; } /*============================================================== CTA SECTION ==============================================================*/ .cta{ padding-bottom:120px; /* background:var(--color-bg-light);*/ } .cta__box{ display:grid; grid-template-columns:1.3fr auto; align-items:center; gap:48px; padding:64px; border-radius:var(--radius-2xl); background:linear-gradient( 135deg, #4f59ff 0%, #7a5cff 100% ); box-shadow: 0 30px 70px rgba(79,89,255,.28); overflow:hidden; position:relative; } .cta__box>*{ position:relative; z-index:2; } /*============================================================== CTA TYPOGRAPHY ==============================================================*/ .cta { /*background: linear-gradient(135deg, #4F59FF 0%, #7A5CFF 100%);*/ color: #ffffff; } .cta__eyebrow, .cta__title, .cta__description { color: #ffffff; } .text-gradient-light{ color:#fff8c6; } .cta__description{ max-width:640px; color:rgba(255,255,255,.88); line-height:1.9; } /*============================================================== CTA ACTION ==============================================================*/ .cta__actions{ display:flex; justify-content:flex-end; align-items:center; } .cta__actions .button{ min-width:190px; background:#fff; color:var(--color-primary); box-shadow:0 18px 40px rgba(0,0,0,.15); } .cta__actions .button:hover{ color:#fff; } /*============================================================== RESPONSIVE ==============================================================*/ @media (max-width:1200px){ .blog__grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:991px){ .blog, .cta{ padding:96px 0; } .cta__box{ grid-template-columns:1fr; text-align:center; padding:48px; } .cta__actions{ justify-content:center; } } @media (max-width:576px){ .blog{ padding:72px 0; } .blog__grid{ grid-template-columns:1fr; gap:18px; } .blog-card__content{ padding:20px; } .blog-card__footer{ flex-direction:column; align-items:flex-start; } .cta{ padding:72px 0; } .cta__box{ padding:36px 24px; gap:28px; } .cta__title{ font-size:1.9rem; } .cta__actions{ width:100%; } .cta__actions .button{ width:100%; } } /*============================================================== STAGE 5 — PART 2B BLOG + CTA Premium Interactions • Decorative Effects • Accessibility ==============================================================*/ /*============================================================== BLOG CARD PREMIUM INTERACTIONS ==============================================================*/ .blog-card{ position:relative; isolation:isolate; } .blog-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: radial-gradient( circle at top right, rgba(91,201,255,.12), transparent 70% ); opacity:0; transition: opacity .45s ease; z-index:0; } .blog-card::after{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--gradient-primary); transform:scaleX(0); transform-origin:left; transition:transform .4s ease; } .blog-card:hover{ transform:translateY(-12px); border-color:rgba(91,201,255,.22); box-shadow: 0 28px 55px rgba(10,20,40,.14), 0 0 24px rgba(91,201,255,.08); } .blog-card:hover::before{ opacity:1; } .blog-card:hover::after{ transform:scaleX(1); } /*============================================================== IMAGE OVERLAY ==============================================================*/ .blog-card__image-wrapper{ position:relative; } .blog-card__image-wrapper::after{ content:""; position:absolute; inset:0; background: linear-gradient( to top, rgba(8,16,32,.45), rgba(8,16,32,0) ); opacity:0; transition:opacity .45s ease; } .blog-card:hover .blog-card__image{ transform:scale(1.08); } .blog-card:hover .blog-card__image-wrapper::after{ opacity:1; } /*============================================================== TAG ANIMATION ==============================================================*/ .blog-card__tag{ transition: transform .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease; } .blog-card:hover .blog-card__tag{ transform:translateY(-4px); background:var(--gradient-primary); color:#fff; box-shadow:0 10px 22px rgba(75,93,255,.22); } /*============================================================== TITLE & DESCRIPTION ==============================================================*/ .blog-card__title{ transition:color .35s ease; } .blog-card:hover .blog-card__title{ color:var(--color-primary); } .blog-card__description{ transition:opacity .35s ease; } .blog-card:hover .blog-card__description{ opacity:.92; } /*============================================================== READ MORE LINK ==============================================================*/ .blog-card__link{ position:relative; overflow:hidden; } .blog-card__link::after{ content:""; position:absolute; right:0; bottom:-3px; width:100%; height:2px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .35s ease; } .blog-card__link i{ transition: transform .35s ease; } .blog-card:hover .blog-card__link{ color:var(--color-secondary); } .blog-card:hover .blog-card__link::after{ transform:scaleX(1); } .blog-card:hover .blog-card__link i{ transform:translateX(-6px); } /*============================================================== CTA DECORATIVE EFFECTS ==============================================================*/ .cta__box{ isolation:isolate; } .cta__box::before{ content:""; position:absolute; width:320px; height:320px; top:-140px; right:-120px; border-radius:50%; background: radial-gradient( circle, rgba(255,255,255,.18), transparent 72% ); z-index:1; } .cta__box::after{ content:""; position:absolute; width:260px; height:260px; bottom:-120px; left:-80px; border-radius:50%; background: radial-gradient( circle, rgba(91,201,255,.20), transparent 72% ); animation:ctaOrb 10s ease-in-out infinite; z-index:1; } @keyframes ctaOrb{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-18px); } } /*============================================================== CTA BUTTON INTERACTION ==============================================================*/ .cta__actions .button{ transition: transform var(--transition-base), box-shadow var(--transition-base); } .cta__actions .button:hover{ transform: translateY(-4px) scale(1.02); box-shadow: 0 24px 48px rgba(0,0,0,.18); } /*============================================================== ACCESSIBILITY ==============================================================*/ .blog-card:focus-within{ border-color:var(--color-primary); box-shadow: 0 0 0 3px rgba(91,201,255,.18), var(--shadow-lg); } .blog-card__link:focus-visible, .blog-card__image-wrapper:focus-visible, .cta__actions .button:focus-visible{ outline:3px solid rgba(91,201,255,.35); outline-offset:4px; } /*============================================================== TOUCH DEVICE OPTIMIZATION ==============================================================*/ @media (hover:none){ .blog-card:hover{ transform:none; } .blog-card:hover .blog-card__image{ transform:none; } .blog-card:hover .blog-card__tag{ transform:none; } } /*============================================================== FINAL RESPONSIVE REFINEMENTS ==============================================================*/ @media (max-width:576px){ .blog-card__content{ padding:18px; } .blog-card__title{ font-size:1rem; } .blog-card__description{ font-size:.92rem; } .blog-card__tag{ font-size:.75rem; } .cta__box{ border-radius:calc(var(--radius-2xl) - 8px); } .cta__description{ font-size:.96rem; } .cta__box::before, .cta__box::after{ opacity:.55; } } /* ========================================================== STAGE 6 — PART 2A FAQ + FOOTER (BASE STYLING) ========================================================== */ /* ========================================================== FAQ SECTION ========================================================== */ .faq { position: relative; padding: var(--space-120) 0; background: var(--color-surface); overflow: hidden; } .faq::before{ content:""; position:absolute; inset:auto auto 0 -180px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, rgba(79,89,255,.08), transparent 72%); pointer-events:none; } .faq::after{ content:""; position:absolute; top:-160px; right:-120px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(122,92,255,.08), transparent 72%); pointer-events:none; } .faq__grid{ position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-32); margin-top:var(--space-64); z-index:2; } .faq__column{ display:flex; flex-direction:column; gap:var(--space-20); } /* ========================================================== FAQ ACCORDION Native
/ ========================================================== */ .faq-item{ background:#fff; border:1px solid rgba(20,34,56,.08); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); overflow:hidden; transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); } .faq-item[open]{ border-color:rgba(79,89,255,.25); box-shadow:var(--shadow-md); } .faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--space-16); padding:1.35rem 1.5rem; font-weight:700; color:var(--color-heading); transition:color var(--transition-fast); } .faq-item summary::-webkit-details-marker{ display:none; } /* custom indicator */ .faq-item summary::after{ content:"+"; width:34px; height:34px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:rgba(79,89,255,.08); color:var(--color-primary); font-size:1.15rem; font-weight:800; transition:all var(--transition-base); } .faq-item[open] summary::after{ content:"–"; background:linear-gradient( 135deg, var(--color-primary), var(--color-secondary) ); color:#fff; } .faq-item__content{ padding: 0 1.5rem 1.5rem; } .faq-item__content p{ margin:0; color:var(--color-text); line-height:1.9; } /* ========================================================== FOOTER ========================================================== */ .footer{ background:var(--color-dark); color:rgba(255,255,255,.72); position:relative; overflow:hidden; } .footer__top{ padding:var(--space-96) 0 var(--space-64); } .footer__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:var(--space-48); } .footer__title{ margin-bottom:1.15rem; font-size:1.05rem; color:#fff; font-weight:700; } /* ========================================================== BRAND COLUMN ========================================================== */ .footer__brand{ max-width:360px; } .footer__brand .header__logo{ margin-bottom:1.5rem; } .footer__description{ color:rgba(255,255,255,.68); line-height:2; margin-bottom:var(--space-24); } /* ========================================================== SOCIAL ICONS ========================================================== */ .footer__social{ display:flex; align-items:center; gap:.8rem; } .footer__social-link{ width:44px; height:44px; display:grid; place-items:center; border-radius:50%; text-decoration:none; color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); } /* ========================================================== FOOTER MENUS ========================================================== */ .footer__menu{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; } .footer__menu a{ color:rgba(255,255,255,.68); text-decoration:none; transition:color var(--transition-fast); } /* ========================================================== CONTACT LIST ========================================================== */ .footer__contact{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; } .footer__contact li{ display:flex; align-items:flex-start; gap:.8rem; line-height:1.8; } .footer__contact i{ margin-top:.25rem; color:var(--color-primary); } /* ========================================================== COPYRIGHT BAR ========================================================== */ .footer__bottom{ border-top:1px solid rgba(255,255,255,.08); padding:1.5rem 0; text-align:center; } .footer__copyright{ margin:0; color:rgba(255,255,255,.55); font-size:.95rem; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width:991px){ .faq{ padding:var(--space-96) 0; } .faq__grid{ grid-template-columns:1fr; gap:var(--space-24); } .footer__grid{ grid-template-columns:repeat(2,1fr); gap:var(--space-40); } } @media (max-width:576px){ .faq{ padding:var(--space-72) 0; } .faq-item summary{ padding:1.15rem; font-size:.98rem; } .faq-item__content{ padding: 0 1.15rem 1.15rem; } .footer__top{ padding:var(--space-72) 0 var(--space-48); } .footer__grid{ grid-template-columns:1fr; gap:var(--space-40); } .footer__brand{ max-width:100%; } .footer__social{ justify-content:flex-start; flex-wrap:wrap; } .footer__social-link{ width:40px; height:40px; } } /* ========================================================== STAGE 6 — PART 2B FAQ + FOOTER (PREMIUM INTERACTIONS & POLISH) ========================================================== */ /* ========================================================== FAQ — PREMIUM INTERACTIONS ========================================================== */ .faq-item{ position:relative; isolation:isolate; } .faq-item::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(circle at top left, rgba(79,89,255,.10), transparent 65%); opacity:0; transition:opacity var(--transition-base); pointer-events:none; z-index:0; } .faq-item > *{ position:relative; z-index:1; } .faq-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(79,89,255,.20); } .faq-item:hover::before{ opacity:1; } .faq-item summary{ transition: color var(--transition-fast), background var(--transition-fast), padding-inline var(--transition-fast); } .faq-item summary:hover{ color:var(--color-primary); background:rgba(79,89,255,.03); } .faq-item[open]{ background:linear-gradient( 180deg, rgba(79,89,255,.035), #ffffff 38% ); } .faq-item[open] summary{ color:var(--color-primary); } .faq-item summary::after{ transform:rotate(0deg); } .faq-item[open] summary::after{ transform:rotate(180deg) scale(1.05); box-shadow:0 12px 30px rgba(79,89,255,.30); } .faq-item__content{ animation:faqFade .35s ease; } @keyframes faqFade{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } } /* ========================================================== FAQ FOCUS STATES ========================================================== */ .faq-item summary:focus-visible{ outline:3px solid rgba(79,89,255,.25); outline-offset:4px; border-radius:var(--radius-lg); } .faq-item:focus-within{ border-color:var(--color-primary); box-shadow: 0 0 0 4px rgba(79,89,255,.08), var(--shadow-lg); } /* ========================================================== FOOTER LINKS ========================================================== */ .footer__menu a, .footer__contact a{ position:relative; display:inline-flex; align-items:center; gap:.45rem; } .footer__menu a::after, .footer__contact a::after{ content:""; position:absolute; right:0; bottom:-3px; width:0; height:2px; border-radius:999px; background:linear-gradient( 90deg, var(--color-primary), var(--color-secondary) ); transition: width var(--transition-base); } .footer__menu a:hover, .footer__contact a:hover{ color:#fff; transform:translateX(-4px); } .footer__menu a:hover::after, .footer__contact a:hover::after{ width:100%; } /* ========================================================== SOCIAL ICON INTERACTIONS ========================================================== */ .footer__social-link{ position:relative; overflow:hidden; } .footer__social-link::before{ content:""; position:absolute; inset:-40%; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%); opacity:0; transition:opacity var(--transition-base); } .footer__social-link:hover{ transform:translateY(-6px) scale(1.06); border-color:transparent; color:#fff; box-shadow:0 16px 40px rgba(0,0,0,.35); } .footer__social-link:hover::before{ opacity:1; } /* Optional brand hover colors */ .footer__social-link--instagram:hover{ background:#E4405F; } .footer__social-link--linkedin:hover{ background:#0A66C2; } .footer__social-link--twitter:hover{ background:#1DA1F2; } .footer__social-link--github:hover{ background:#333; } /* ========================================================== FOOTER DECORATIVE GLOW ========================================================== */ .footer::before{ content:""; position:absolute; width:520px; height:520px; left:-220px; top:-220px; border-radius:50%; background: radial-gradient(circle, rgba(79,89,255,.10), transparent 72%); pointer-events:none; } .footer::after{ content:""; position:absolute; right:-160px; bottom:-180px; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle, rgba(122,92,255,.12), transparent 70%); pointer-events:none; } /* ========================================================== FAQ DECORATIVE ACCENT ========================================================== */ .faq__grid::before{ content:""; position:absolute; inset:0; background-image: radial-gradient( rgba(79,89,255,.045) 1px, transparent 1px ); background-size:22px 22px; opacity:.35; pointer-events:none; } /* ========================================================== ACCESSIBILITY ========================================================== */ .footer__social-link:focus-visible, .footer__menu a:focus-visible, .footer__contact a:focus-visible{ outline:3px solid rgba(79,89,255,.30); outline-offset:4px; border-radius:10px; } /* ========================================================== TOUCH DEVICES ========================================================== */ @media (hover:none){ .faq-item:hover, .footer__social-link:hover, .footer__menu a:hover{ transform:none; } .footer__menu a:hover::after, .footer__contact a:hover::after{ width:0; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion:reduce){ .faq-item, .faq-item::before, .faq-item summary, .faq-item summary::after, .footer__menu a, .footer__social-link, .footer__social-link::before{ animation:none !important; transition:none !important; } } /* ========================================================== MOBILE REFINEMENTS ========================================================== */ @media (max-width:576px){ .faq-item{ border-radius:var(--radius-lg); } .faq-item:hover{ transform:translateY(-2px); } .faq-item summary{ line-height:1.7; } .footer__menu{ gap:.75rem; } .footer__social{ gap:.65rem; } .footer__social-link{ width:42px; height:42px; } } /* ========================================================== LIGHT SECTIONS — TEXT COLOR RESET Certifications • Portfolio • Blog • FAQ ========================================================== */ .certifications, .portfolio, .blog, .faq { background: var(--color-surface, #ffffff); color: var(--color-body, #70778B); } /* ---------------------------------------------------------- Headings ---------------------------------------------------------- */ .certifications h1, .certifications h2, .certifications h3, .certifications h4, .certifications h5, .certifications h6, .portfolio h1, .portfolio h2, .portfolio h3, .portfolio h4, .portfolio h5, .portfolio h6, .blog h1, .blog h2, .blog h3, .blog h4, .blog h5, .blog h6, .faq h1, .faq h2, .faq h3, .faq h4, .faq h5, .faq h6 { color: var(--color-heading, #111827); } /* ---------------------------------------------------------- Paragraphs & Lists ---------------------------------------------------------- */ .certifications p, .certifications li, .certifications span, .portfolio p, .portfolio li, .portfolio span, .blog p, .blog li, .blog span, .faq p, .faq li, .faq span { color: var(--color-body, #70778B); } /* ========================================================== CERTIFICATIONS ========================================================== */ .certifications .section-heading__eyebrow{ color: var(--color-primary); } .certifications .section-heading__title{ color: var(--color-heading); } .certifications .section-heading__description{ color: var(--color-body); } .certification-card{ color: var(--color-body); } .certification-card__title{ color: var(--color-heading); } .certification-card__text{ color: var(--color-body); } .certification-card__icon{ color:#fff; } /* ========================================================== PORTFOLIO ========================================================== */ .portfolio .section-heading__eyebrow{ color: var(--color-primary); } .portfolio .section-heading__title{ color: var(--color-heading); } .portfolio .section-heading__description{ color: var(--color-body); } .portfolio-card{ color: var(--color-body); } .portfolio-card__title{ color: var(--color-heading); } .portfolio-card__description{ color: var(--color-body); } .portfolio-card__category{ color: var(--color-primary); } /* ========================================================== BLOG ========================================================== */ .blog .section-heading__eyebrow{ color: var(--color-primary); } .blog .section-heading__title{ color: var(--color-heading); } .blog .section-heading__description{ color: var(--color-body); } .blog-card{ color: var(--color-body); } .blog-card__title{ color: var(--color-heading); } .blog-card__description{ color: var(--color-body); } .blog-card__date{ color: var(--color-body); } .blog-card__tag{ color: var(--color-primary); } .blog-card__link{ color: var(--color-primary); } .blog-card__link:hover{ color: var(--color-secondary); } /* ========================================================== FAQ ========================================================== */ .faq .section-heading__eyebrow{ color: var(--color-primary); } .faq .section-heading__title{ color: var(--color-heading); } .faq .section-heading__description{ color: var(--color-body); } .faq details{ color: var(--color-body); } .faq summary{ color: var(--color-heading); } .faq details p{ color: var(--color-body); } .faq details[open] summary{ color: var(--color-primary); } /* ========================================================== FOOTER ========================================================== */ .footer{ background:#050816; color:rgba(255,255,255,.72); } .footer__title, .footer__logo, .footer__heading{ color:#ffffff; } .footer__text, .footer__address, .footer__phone, .footer__email, .footer__copyright{ color:rgba(255,255,255,.72); } .footer a{ color:rgba(255,255,255,.72); transition:color var(--transition-base); } .footer a:hover{ color:#ffffff; } .footer__social a{ color:#ffffff; } .portfolio{ background: var(--color-surface); color: var(--color-heading); } /*============================================================== * ویجت نمایش قالب HTML * با پشتیبانی Font Awesome 5 * ==============================================================*/ .custom-html-widget { width: 100%; position: relative; } .custom-html-widget .error { padding: 15px; background: #f8d7da; border-radius: 8px; border: 1px solid #f5c6cb; color: #721c24; } /* استایل‌های پیش‌نمایش در ادیتور */ .custom-html-widget-preview { width: 100%; } .custom-html-widget-preview .fa, .custom-html-widget-preview .fas, .custom-html-widget-preview .far, .custom-html-widget-preview .fab { font-size: inherit; } /* استایل‌های پایه برای قالب‌ها */ .template-wrapper { padding: 20px; background: #ffffff; border-radius: 8px; } /* ریسپانسیو */ @media (max-width: 768px) { .custom-html-widget { padding: 10px; } }