/* DADSSI, global stylesheet, shared by every page */ :root{ color-scheme: dark; --black: #07090B; --near-black: #0C0F12; --panel: #10141A; --line: #232830; --line-soft: #171B21; --white: #F4F6F8; --gray-1: #B4BAC3; --gray-2: #7D838E; --gray-3: #4E535C; --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace; /* Used sparingly, status/system indicators only, the site stays monochrome everywhere else on purpose. */ --accent-green: #3ECF8E; --accent-amber: #E8A33D; --accent-blue: #5B9BD5; --accent-red: #E05555; --container: 1440px; --pad: 40px; --radius: 10px; --radius-lg: 18px; --glow: 62,207,142; --ease: cubic-bezier(.22,.61,.36,1); } @media (max-width: 720px){ :root{ --pad: 20px; } } /* Light theme, toggled via [data-theme="light"] on , default is dark */ html[data-theme="light"]{ color-scheme: light; --black: #FAFAF8; --near-black: #F1F2EF; --panel: #EBEDE9; --line: #DDDFDA; --line-soft: #E8EAE5; --white: #101318; --gray-1: #454A52; --gray-2: #6B7079; --gray-3: #9CA0A8; } html[data-theme="light"] .site-header{ background:rgba(255,255,255,.78); } html[data-theme="light"] .mobile-nav{ background:rgba(255,255,255,.98); } html[data-theme="light"] .chat-launcher{ box-shadow:0 12px 30px -10px rgba(0,0,0,.18); } html[data-theme="light"] .chat-panel{ box-shadow:0 20px 50px -15px rgba(0,0,0,.22); } html, body{ transition:background-color .25s var(--ease), color .25s var(--ease); } /* RTL (Arabic) layout adjustments */ html[dir="rtl"] .eyebrow::before{ margin-left:0; } html[dir="rtl"] .service-card h3, html[dir="rtl"] .breadcrumbs .container, html[dir="rtl"] .footer-bottom{ direction:rtl; } html[dir="rtl"] .service-card h3 .arrow{ transform:scaleX(-1); } html[dir="rtl"] .service-card:hover h3 .arrow{ transform:scaleX(-1) translate(3px,-3px); } html[dir="rtl"] .vision-statement{ border-left:none; border-right:2px solid var(--white); padding-left:0; padding-right:44px; } html[dir="rtl"] .split .col-label{ text-align:right; } @media (max-width:640px){ html[dir="rtl"] .vision-statement{ padding-right:24px; } } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } ::selection{ background:var(--white); color:var(--black); } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:var(--black); } ::-webkit-scrollbar-thumb{ background:var(--line); border-radius:5px; border:2px solid var(--black); } ::-webkit-scrollbar-thumb:hover{ background:var(--gray-2); } @supports (scrollbar-color: auto){ html{ scrollbar-color:var(--line) transparent; } } :focus-visible{ outline:2px solid var(--white); outline-offset:3px; } .skip-link{ position:absolute; left:16px; top:-60px; z-index:2000; background:var(--white); color:var(--black); padding:12px 18px; border-radius:var(--radius); font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; transition:top .2s var(--ease); } .skip-link:focus-visible{ top:16px; } body{ background:var(--black); color:var(--white); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-wrap:break-word; } img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; } .container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--pad); } .eyebrow{ font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-1); display:inline-flex; align-items:center; gap:10px; } .eyebrow::before{ content:''; width:14px; height:1px; background:var(--accent-green); flex-shrink:0; } h1,h2,h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.01em; text-transform:uppercase; overflow-wrap:break-word; word-break:break-word; } h1{ font-size:clamp(34px,5.6vw,72px); line-height:1.06; letter-spacing:-0.015em; text-wrap:balance; } h2{ font-size:clamp(28px,3.4vw,42px); line-height:1.1; text-wrap:balance; } h3{ font-size:19px; line-height:1.3; text-transform:none; } p{ color:var(--gray-1); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px; border-radius:var(--radius); font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; line-height:1; transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); white-space:nowrap; } .btn-primary{ background:var(--white); color:var(--black); } .btn-primary:hover{ background:var(--gray-1); transform:translateY(-1px); } .btn-ghost{ border:1px solid var(--line); color:var(--white); } .btn-ghost:hover{ border-color:var(--white); background:var(--near-black); } .btn:focus-visible{ outline:2px solid var(--white); outline-offset:3px; } /* Header, constant translucent panel, no jarring change on scroll. Add a tiny extra border/shadow once scrolled, nothing more. */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(0,0,0,.72); backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%); border-bottom:1px solid var(--line-soft); transition:border-color .35s var(--ease), box-shadow .35s var(--ease); } .site-header.is-scrolled{ border-color:var(--line); box-shadow:0 8px 24px -16px rgba(0,0,0,.6); } .header-inner{ display:flex; align-items:center; justify-content:space-between; height:80px; } .logo{ display:flex; align-items:center; gap:10px; } .logo-mark-img{ height:30px; width:auto; display:block; transition:filter .25s var(--ease); } html[data-theme="light"] .logo-mark-img{ filter:invert(1); } .main-nav{ display:flex; align-items:center; gap:32px; } .main-nav a{ font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--gray-2); position:relative; padding:6px 0; transition:color .2s var(--ease); display:inline-block; } .main-nav a:hover{ color:var(--white); } .main-nav a.active{ color:var(--white); } .main-nav a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--white); } .header-actions{ display:flex; align-items:center; gap:14px; } .header-actions .btn-ghost{ padding:12px 20px; } .nav-toggle{ display:none; } /* Theme toggle button */ .theme-toggle{ padding:12px 14px; position:relative; width:42px; } .theme-icon{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:14px; line-height:1; transition:opacity .2s var(--ease); } .theme-icon-sun{ opacity:0; } .theme-icon-moon{ opacity:1; } html[data-theme="light"] .theme-icon-sun{ opacity:1; } html[data-theme="light"] .theme-icon-moon{ opacity:0; } .mobile-nav{ display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:999; background:rgba(0,0,0,.97); padding:110px 28px 40px; } .mobile-nav.is-open{ display:block; } .mobile-nav a{ display:block; padding:16px 0; border-bottom:1px solid var(--line); font-family:var(--font-display); font-size:22px; text-transform:uppercase; color:var(--white); } .mobile-nav .mobile-actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; } @media (max-width: 980px){ .main-nav{ display:none; } .header-actions .btn-ghost{ display:none; } .nav-toggle{ display:block; } } main{ padding-top:80px; } body{ animation:page-in .5s var(--ease); } @keyframes page-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *, body{ animation:none !important; transition:none !important; } } /* Breadcrumbs */ .breadcrumbs{ border-bottom:1px solid var(--line-soft); background:var(--near-black); } .breadcrumbs .container{ display:flex; align-items:center; gap:10px; padding:14px var(--pad); font-size:12px; letter-spacing:.04em; text-transform:uppercase; } .breadcrumbs a{ color:var(--gray-2); transition:color .2s var(--ease); } .breadcrumbs a:hover{ color:var(--white); } .breadcrumbs span.sep{ color:var(--gray-3); } .breadcrumbs span.current{ color:var(--white); } /* Error pages (404 / 500) */ html, body{ height:100%; } body{ display:flex; flex-direction:column; min-height:100vh; } #main-content{ flex:1; display:flex; flex-direction:column; } .site-footer{ margin-top:auto; } .error-page{ flex:1; display:flex; align-items:center; justify-content:center; text-align:center; } .error-page .container{ display:flex; flex-direction:column; align-items:center; } .error-page h1{ margin-top:18px; } .error-page p.lead{ max-width:520px; margin:22px 0 0; } .error-page .hero-ctas{ justify-content:center; margin-top:32px; } /* Hero (home) */ .hero{ padding:56px 0 90px; border-bottom:1px solid var(--line); } .hero h1{ max-width:920px; } .hero p.lead{ font-size:18px; max-width:560px; margin:26px 0 38px; color:var(--gray-1); } .hero-ctas{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .hero-stats{ margin-top:72px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); } .hero-stats div{ padding:26px 28px 0 0; min-width:0; } .hero-stats div:not(:first-child){ border-left:1px solid var(--line); padding-left:28px; } .hero-stats .num{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.2vw,38px); line-height:1; } .hero-stats .lbl{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-2); margin-top:10px; line-height:1.4; } @media (max-width:780px){ .hero-stats{ grid-template-columns:repeat(2,1fr); row-gap:24px; } .hero-stats div:nth-child(3){ border-left:none; padding-left:0; } } @media (max-width:420px){ .hero-stats{ grid-template-columns:1fr; row-gap:20px; } .hero-stats div:not(:first-child){ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:20px; } } /* Trust strip */ .trust{ border-bottom:1px solid var(--line); padding:30px 0; } .trust-inner{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; justify-content:space-between; } .trust p{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-2); white-space:nowrap; } .trust-logos{ display:flex; gap:36px; flex-wrap:wrap; font-family:var(--font-display); font-weight:700; color:var(--gray-1); font-size:15px; text-transform:uppercase; opacity:.7; } @media (max-width:560px){ .trust p{ white-space:normal; } } /* Sections */ .section{ padding:100px 0; border-bottom:1px solid var(--line); } .section-head{ max-width:660px; margin-bottom:56px; } .section-head h2{ margin-top:16px; } .section-head p{ margin-top:16px; font-size:16px; } /* Services grid (home) */ .services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .service-card{ background:var(--black); padding:38px 32px; display:flex; flex-direction:column; gap:18px; transition:background .25s var(--ease); } .service-card:hover{ background:var(--near-black); } .service-num{ font-family:var(--font-mono); font-size:12px; color:var(--accent-green); letter-spacing:.05em; } .service-card h3{ display:flex; align-items:center; justify-content:space-between; font-weight:700; gap:12px; } .service-card h3 .arrow{ font-size:16px; color:var(--gray-3); transition:transform .25s var(--ease), color .25s var(--ease); flex-shrink:0; } .service-card:hover h3 .arrow{ transform:translate(3px,-3px); color:var(--white); } .service-card p{ font-size:14px; flex:1; } @media (max-width: 980px){ .services-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 640px){ .services-grid{ grid-template-columns:1fr; } } /* Story / split layout (about) */ .split{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start; } .split .col-label{ position:sticky; top:120px; } .split p{ font-size:16px; margin-bottom:18px; max-width:620px; } .split p:last-child{ margin-bottom:0; } @media (max-width:900px){ .split{ grid-template-columns:1fr; gap:28px; } .split .col-label{ position:static; } } /* Values grid (about) */ .values-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .value-card{ background:var(--black); padding:38px 32px; } .value-num{ font-family:var(--font-display); font-size:12px; color:var(--gray-2); letter-spacing:.1em; } .value-card h3{ margin:16px 0 10px; font-weight:700; } .value-card p{ font-size:14px; } @media (max-width: 980px){ .values-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 640px){ .values-grid{ grid-template-columns:1fr; } } /* Service rows (about) */ .service-rows{ border-top:1px solid var(--line); } .service-row{ display:grid; grid-template-columns:80px 1fr 1fr; gap:32px; padding:34px 0; border-bottom:1px solid var(--line); align-items:start; } .service-row .num{ font-family:var(--font-display); font-size:13px; color:var(--gray-2); letter-spacing:.08em; } .service-row h3{ font-weight:700; } .service-row p{ font-size:14px; margin:0; } @media (max-width:780px){ .service-row{ grid-template-columns:1fr; gap:10px; } } /* Process (home) */ .process{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .process-step{ background:var(--black); padding:36px 30px; } .process-step .code{ font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-green); } .process-step h3{ margin:16px 0 10px; font-weight:700; } .process-step p{ font-size:14px; } @media (max-width:780px){ .process{ grid-template-columns:1fr; } } /* Stats row (about) */ .stats-row{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); } .stats-row div{ padding:30px 28px 0 0; } .stats-row div:not(:first-child){ border-left:1px solid var(--line); padding-left:28px; } .stats-row .num{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.2vw,38px); line-height:1; } .stats-row .lbl{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-2); margin-top:10px; line-height:1.4; } @media (max-width:780px){ .stats-row{ grid-template-columns:repeat(2,1fr); row-gap:24px; } .stats-row div:nth-child(3){ border-left:none; padding-left:0; } } /* Vision statement (About page only, intentionally not the boxed testimonial/leadership style used on the homepage) */ .vision-statement{ border-left:2px solid var(--white); padding-left:44px; max-width:820px; } .vision-statement p{ font-family:var(--font-display); font-weight:600; color:var(--white); font-size:clamp(22px,2.6vw,32px); line-height:1.45; text-transform:none; } @media (max-width:640px){ .vision-statement{ padding-left:24px; } } .testimonial, .leadership{ border:1px solid var(--line); padding:60px; } .testimonial blockquote, .leadership blockquote{ font-family:var(--font-display); font-size:clamp(20px,2.4vw,28px); font-weight:600; color:var(--white); line-height:1.4; max-width:780px; text-transform:none; } .testimonial cite, .leadership cite{ display:block; margin-top:26px; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--gray-2); } @media (max-width:780px){ .testimonial, .leadership{ padding:34px; } } /* CTA / pricing teaser banners */ .pricing-teaser, .cta-banner{ border:1px solid var(--line); padding:60px; display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; background:var(--near-black); } .pricing-teaser h2, .cta-banner h2{ max-width:480px; overflow-wrap:break-word; word-break:break-word; } @media (max-width:640px){ .pricing-teaser, .cta-banner{ padding:32px 24px; } } /* Footer */ .site-footer{ background:var(--black); } .footer-top{ padding:70px 0 50px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:40px; } .footer-brand .footer-logo{ display:inline-block; margin-bottom:22px; } .footer-brand .footer-logo-img{ height:52px; width:auto; display:block; transition:filter .25s var(--ease); } html[data-theme="light"] .footer-brand .footer-logo-img{ filter:invert(1); } .footer-brand p{ font-size:14px; max-width:260px; } /* ============================================================ Pricing page ============================================================ */ .price-range-strip{ display:flex; flex-wrap:wrap; border:1px solid var(--line); margin-top:48px; } .price-range-item{ flex:1; min-width:200px; padding:28px 32px; border-right:1px solid var(--line); } .price-range-item:last-child{ border-right:none; } .price-range-item .lbl{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-2); } .price-range-item .val{ font-family:var(--font-display); font-weight:800; font-size:clamp(20px,2.4vw,28px); margin-top:10px; letter-spacing:-.01em; } @media (max-width:640px){ .price-range-item{ border-right:none; border-bottom:1px solid var(--line); } .price-range-item:last-child{ border-bottom:none; } } .pricing-cats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px; } .pricing-cat{ background:var(--black); padding:42px 38px; } .pricing-cat .num{ font-family:var(--font-display); font-size:12px; color:var(--gray-2); letter-spacing:.1em; } .pricing-cat h3{ margin:14px 0 10px; font-weight:700; font-size:21px; } .pricing-cat .desc{ font-size:14px; margin-bottom:22px; max-width:480px; } .check-list{ display:grid; grid-template-columns:1fr 1fr; gap:9px 20px; } .check-list li{ font-size:13px; color:var(--gray-1); padding-left:17px; position:relative; line-height:1.5; } .check-list li::before{ content:''; position:absolute; left:0; top:7px; width:6px; height:6px; background:var(--gray-3); border-radius:50%; } .chatbot-sub{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft); } .chatbot-sub h4{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--white); margin-bottom:10px; font-weight:700; } .chatbot-sub .check-list{ grid-template-columns:1fr 1fr; } .check-list-3col{ grid-template-columns:repeat(3,1fr); } @media (max-width:980px){ .pricing-cats{ grid-template-columns:1fr; } } @media (max-width:780px){ .check-list-3col{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .check-list, .chatbot-sub .check-list, .check-list-3col{ grid-template-columns:1fr; } } html[dir="rtl"] .check-list li{ padding-left:0; padding-right:17px; } html[dir="rtl"] .check-list li::before{ left:auto; right:0; } .includes-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:40px; } .includes-item{ background:var(--black); padding:26px 24px; display:flex; align-items:flex-start; gap:12px; font-size:14px; color:var(--white); line-height:1.4; } .includes-item .tick{ flex-shrink:0; width:22px; height:22px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; margin-top:1px; } @media (max-width:980px){ .includes-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .includes-grid{ grid-template-columns:1fr; } } /* FAQ accordion (native
, no JS required) */ .faq-list{ border-top:1px solid var(--line); } .faq-item{ border-bottom:1px solid var(--line); padding:24px 0; } .faq-item summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--white); gap:20px; -webkit-tap-highlight-color:transparent; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-icon{ flex-shrink:0; font-size:20px; font-weight:400; color:var(--gray-2); transition:transform .25s var(--ease); line-height:1; } .faq-item[open] .faq-icon{ transform:rotate(45deg); } .faq-item p{ font-size:14px; margin-top:16px; max-width:760px; } /* Reusable numbered section label, e.g. "01, Website Development" */ .section-num{ font-family:var(--font-mono); font-size:12px; color:var(--accent-green); letter-spacing:.05em; } #main-content{ transition:opacity .18s var(--ease); } #main-content.is-loading{ opacity:0; } .footer-col h4{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-2); margin-bottom:18px; font-weight:600; } .footer-col ul{ display:flex; flex-direction:column; gap:12px; } .footer-col a{ font-size:14px; color:var(--gray-1); transition:color .2s var(--ease); } .footer-col a:hover{ color:var(--white); } .footer-bottom{ border-top:1px solid var(--line); padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; } .footer-bottom p{ font-size:13px; color:var(--gray-2); } .footer-legal{ display:flex; gap:24px; flex-wrap:wrap; } .footer-legal a{ font-size:13px; color:var(--gray-2); } .footer-legal a:hover{ color:var(--white); } @media (max-width:980px){ .footer-top{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .footer-top{ grid-template-columns:1fr; } } .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in-view{ opacity:1; transform:translateY(0); } /* Chat widget */ .chat-launcher{ position:fixed; bottom:26px; right:26px; z-index:1100; display:flex; align-items:center; gap:10px; padding:14px 20px; background:var(--white); color:var(--black); border-radius:var(--radius); font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; box-shadow:0 12px 30px -10px rgba(0,0,0,.6); transition:transform .25s var(--ease), background .25s var(--ease); } .chat-launcher:hover{ background:var(--gray-1); transform:translateY(-2px); } .chat-launcher .ico{ width:8px; height:8px; border-radius:50%; background:var(--black); flex-shrink:0; } .chat-panel{ position:fixed; bottom:26px; right:26px; z-index:1100; width:340px; max-width:calc(100% - 32px); background:var(--near-black); border:1px solid var(--line); display:none; flex-direction:column; box-shadow:0 20px 50px -15px rgba(0,0,0,.7); } .chat-panel.is-open{ display:flex; } .chat-panel-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); } .chat-panel-header .title{ font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; display:flex; align-items:center; gap:8px; } .chat-panel-header .title .dot{ width:6px; height:6px; border-radius:50%; background:var(--white); } .chat-panel-header button{ color:var(--gray-2); font-size:18px; line-height:1; } .chat-panel-header button:hover{ color:var(--white); } .chat-body{ padding:18px; font-size:13px; color:var(--gray-1); line-height:1.6; max-height:320px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; } .chat-body p{ margin-bottom:12px; } .chat-msg{ padding:9px 13px; border-radius:var(--radius); max-width:88%; white-space:pre-wrap; } .chat-msg-agent{ background:var(--near-black); border:1px solid var(--line); align-self:flex-start; } .chat-msg-user{ background:var(--white); color:var(--black); align-self:flex-end; } html[data-theme="light"] .chat-msg-user{ background:var(--black); color:var(--white); } .chat-typing{ display:flex; align-items:center; gap:4px; padding:13px 15px; } .chat-typing span{ width:6px; height:6px; border-radius:50%; background:var(--gray-2); animation:chatTypingBounce 1.1s infinite ease-in-out; } .chat-typing span:nth-child(2){ animation-delay:.15s; } .chat-typing span:nth-child(3){ animation-delay:.3s; } @keyframes chatTypingBounce{ 0%, 60%, 100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } } .chat-input-row{ display:flex; border-top:1px solid var(--line); } .chat-input-row input{ flex:1; background:transparent; border:none; padding:14px 16px; color:var(--white); font-size:13px; font-family:var(--font-body); } .chat-input-row input::placeholder{ color:var(--gray-3); } .chat-input-row input:disabled{ cursor:not-allowed; } .chat-input-row button{ padding:0 18px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-2); } .chat-input-row button:disabled{ cursor:not-allowed; } /* ============================================================ Auth pages (login / register) ============================================================ */ .auth-wrap{ display:flex; justify-content:center; padding:70px 0 100px; } .auth-card{ width:100%; max-width:440px; border:1px solid var(--line); padding:44px 38px; background:var(--panel); box-shadow:0 30px 80px -30px rgba(0,0,0,.5); } .auth-card h1{ font-size:24px; margin-bottom:8px; } .auth-card .sub{ font-size:14px; margin-bottom:32px; } .field{ margin-bottom:18px; } .field label{ display:block; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-2); margin-bottom:8px; } .field input{ width:100%; padding:13px 16px; background:var(--near-black); border:1px solid var(--line); color:var(--white); font-family:var(--font-body); font-size:14px; transition:border-color .2s var(--ease); } .field input:focus{ outline:none; border-color:var(--white); } .field input::placeholder{ color:var(--gray-3); } .auth-submit{ width:100%; justify-content:center; margin-top:6px; } .auth-divider{ display:flex; align-items:center; gap:14px; margin:26px 0; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-3); } .auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background:var(--line); } .btn-google{ width:100%; justify-content:center; display:flex; align-items:center; gap:10px; background:#FFFFFF; color:#1f1f1f; border:1px solid #DDDDDD; } .btn-google:hover{ background:#f1f1f1; } .btn-google svg{ width:18px; height:18px; flex-shrink:0; } .btn-discord, .btn-github{ width:100%; justify-content:center; display:flex; align-items:center; gap:10px; margin-top:10px; } .btn-discord svg, .btn-github svg{ width:18px; height:18px; flex-shrink:0; } .btn-discord{ background:#5865F2; color:#FFFFFF; border:1px solid #5865F2; } .btn-discord:hover{ background:#4752C4; } .btn-github{ background:#181717; color:#FFFFFF; border:1px solid #333333; } .btn-github:hover{ background:#2b2b2b; } .auth-foot{ margin-top:28px; font-size:13px; text-align:center; } .auth-foot a{ color:var(--white); text-decoration:underline; } .auth-alert{ padding:13px 16px; margin-bottom:22px; font-size:13px; border:1px solid var(--line); background:var(--near-black); color:var(--white); } .auth-alert.is-error{ border-color:#7a2e2e; } .auth-alert.is-success{ border-color:#2e6b47; } .auth-alert.is-info{ border-color:var(--gray-2); } /* ============================================================ Legal / policy pages ============================================================ */ .legal-content{ max-width:820px; } .legal-content h2{ font-size:20px; margin:44px 0 14px; text-transform:none; } .legal-content h2:first-child{ margin-top:0; } .legal-content p{ font-size:14px; margin-bottom:14px; } .legal-content ul{ margin:0 0 14px; padding-left:20px; } .legal-content li{ font-size:14px; margin-bottom:8px; color:var(--gray-1); } .legal-updated{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-2); margin-bottom:36px; } html[dir="rtl"] .legal-content ul{ padding-left:0; padding-right:20px; } /* ============================================================ Cookie consent banner ============================================================ */ .cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:200; background:var(--black); border-top:1px solid var(--line); padding:22px var(--pad); display:none; transform:translateY(100%); transition:transform .35s var(--ease); } .cookie-banner.is-visible{ display:block; } .cookie-banner.is-shown{ transform:translateY(0); } .cookie-banner-inner{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; } .cookie-banner p{ font-size:13px; color:var(--gray-1); max-width:640px; margin:0; } .cookie-banner a{ color:var(--white); text-decoration:underline; } .cookie-banner-actions{ display:flex; gap:12px; flex-wrap:wrap; } .cookie-banner .btn{ padding:11px 22px; font-size:12px; } @media (max-width:640px){ .cookie-banner-inner{ flex-direction:column; align-items:flex-start; } .cookie-banner-actions{ width:100%; } .cookie-banner-actions .btn{ flex:1; } } /* Password field with show/hide toggle */ .pw-field{ position:relative; } .pw-field input{ padding-right:44px; } .pw-toggle{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; opacity:.5; font-size:15px; transition:opacity .2s var(--ease); } .pw-toggle:hover, .pw-toggle.is-active{ opacity:1; } html[dir="rtl"] .pw-field input{ padding-right:16px; padding-left:44px; } html[dir="rtl"] .pw-toggle{ right:auto; left:4px; } /* Password strength meter */ .pw-strength{ display:flex; gap:4px; margin-top:8px; } .pw-strength span{ height:3px; flex:1; background:var(--line); transition:background .2s var(--ease); } .pw-strength.s1 span:nth-child(1){ background:#7a3b3b; } .pw-strength.s2 span:nth-child(-n+2){ background:#8a6a2e; } .pw-strength.s3 span:nth-child(-n+3){ background:#6a7a3b; } .pw-strength.s4 span{ background:#2e6b47; } .pw-hint{ font-size:12px; color:var(--gray-2); margin-top:8px; } /* Name / phone row layouts on register */ .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .phone-row{ display:grid; grid-template-columns:110px 1fr; gap:10px; } .field select{ width:100%; padding:13px 12px; background:var(--near-black); border:1px solid var(--line); color:var(--white); font-family:var(--font-body); font-size:13px; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23808080'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; } .field select:focus{ outline:none; border-color:var(--white); } .field .optional-tag{ color:var(--gray-3); text-transform:none; letter-spacing:0; font-size:11px; } @media (max-width:480px){ .field-row{ grid-template-columns:1fr; } .phone-row{ grid-template-columns:100px 1fr; } } /* Account pill in header/mobile-nav when logged in */ .account-pill{ display:inline-flex; align-items:center; gap:8px; } .account-dot{ width:7px; height:7px; border-radius:50%; background:#4ea86f; display:inline-block; } /* Chat widget locked state (not logged in) */ .chat-locked{ text-align:center; padding:40px 20px; } .chat-locked p{ font-size:14px; color:var(--gray-1); } /* The header is position:fixed at 80px tall and removed from normal document flow, so the first thing after it (breadcrumbs on some pages, #main-content directly on others) needs to clear that height itself. Handled once here on body rather than per page type, so no page can end up hidden behind the header regardless of which it opens with. */ body{ padding-top:80px; } /* Inner-page hero (about, contact, pricing, login, dashboard, etc.) This class had no matching CSS rule at all before, so every page using it opened with zero breathing room under the header. */ .page-hero{ padding:56px 0 64px; border-bottom:1px solid var(--line); } @media (max-width:640px){ .page-hero{ padding:36px 0 44px; } } /* Terms agreement checkbox row on registration */ .agree-row{ display:flex; align-items:flex-start; gap:10px; margin:4px 0 22px; font-size:13px; color:var(--gray-1); cursor:pointer; line-height:1.5; } .agree-row input{ margin-top:3px; flex-shrink:0; width:16px; height:16px; accent-color:var(--white); cursor:pointer; } .agree-row a{ color:var(--white); text-decoration:underline; } /* ============================================================ Small button size variant (used on dashboard profile/balance cards) ============================================================ */ .btn-sm{ padding:9px 16px; font-size:11px; } /* ============================================================ Privacy / screen-sharing mode. The mask itself is decided server-side (see includes/privacy.php), so there's no real sensitive text in the page to hide, this just styles the toggle button, which now renders its on/off icon from the server too. ============================================================ */ .privacy-toggle{ position:relative; display:inline-flex; align-items:center; justify-content:center; } .privacy-toggle svg{ width:17px; height:17px; } /* ============================================================ Dashboard: profile-completion reminder banner ============================================================ */ .profile-reminder{ position:relative; border:1px solid var(--line); background:var(--panel); padding:26px 30px; margin-bottom:32px; } .profile-reminder h3{ font-size:16px; margin:0 0 8px; padding-right:30px; } .profile-reminder p{ font-size:13.5px; color:var(--gray-1); margin:0 0 18px; max-width:600px; } .profile-reminder-close{ position:absolute; top:18px; right:20px; background:transparent; border:none; color:var(--gray-2); font-size:22px; line-height:1; cursor:pointer; padding:4px; } .profile-reminder-close:hover{ color:var(--white); } .profile-reminder-form{ display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; } .profile-reminder-form .field{ margin-bottom:0; min-width:200px; } @media (max-width:640px){ .profile-reminder-form{ flex-direction:column; align-items:stretch; } } /* ============================================================ Dashboard: balance card (PayPal top-up, coming soon) ============================================================ */ .balance-card{ border:1px solid var(--line); background:var(--panel); padding:26px 30px; margin-bottom:32px; max-width:420px; } .balance-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .badge-soon{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-2); border:1px solid var(--line); padding:4px 9px; } .balance-amount{ font-family:var(--font-display); font-size:34px; font-weight:700; margin-bottom:16px; } .balance-note{ font-size:12px; color:var(--gray-2); margin:10px 0 0; } /* ============================================================ Dashboard: linked accounts (Google / GitHub / Discord) ============================================================ */ .linked-accounts-list{ border:1px solid var(--line); background:var(--panel); } .linked-account-row{ display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--line); gap:16px; } .linked-account-row:last-child{ border-bottom:none; } .linked-account-info{ display:flex; flex-direction:column; gap:4px; } .linked-account-info strong{ font-size:14px; } .linked-account-status{ font-size:12px; color:var(--gray-3); } .linked-account-status.is-linked{ color:#3fae6f; } .linked-account-form{ margin:0; } /* ============================================================ Chat widget: "thinking" indicator shown while waiting on a reply ============================================================ */ .chat-msg-typing{ display:flex; align-items:center; gap:5px; padding:11px 14px; } .chat-msg-typing .dot{ width:6px; height:6px; border-radius:50%; background:var(--gray-2); animation:chatTypingBounce 1.1s infinite ease-in-out; } .chat-msg-typing .dot:nth-child(2){ animation-delay:.15s; } .chat-msg-typing .dot:nth-child(3){ animation-delay:.3s; } @keyframes chatTypingBounce{ 0%, 60%, 100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } } /* ============================================================ Dashboard: Project Workspace card ============================================================ */ .project-card{ background:var(--black); border:1px solid var(--line); padding:38px 36px; margin-bottom:8px; position:relative; overflow:hidden; } .project-card::before{ content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--white); opacity:.08; } .project-card .num{ font-family:var(--font-display); font-size:12px; color:var(--gray-2); letter-spacing:.1em; } .project-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:16px 0 12px; } .project-card-head strong{ font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:-.01em; line-height:1.3; } .project-card p{ font-size:14px; color:var(--gray-2); margin-bottom:22px; max-width:460px; line-height:1.6; } .project-card .btn{ min-width:200px; justify-content:center; } /* Status badges, shared between the dashboard card and the full status view */ .status-badge{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:6px 13px; border-radius:20px; border:1px solid var(--line); color:var(--gray-1); white-space:nowrap; flex-shrink:0; } .status-draft{ color:var(--gray-2); } .status-submitted{ color:var(--accent-blue); border-color:var(--accent-blue); } .status-under-review{ color:var(--accent-amber); border-color:var(--accent-amber); } .status-awaiting-client{ color:var(--accent-amber); border-color:var(--accent-amber); } .status-in-progress{ color:#5bb5d5; border-color:#5bb5d5; } .status-on-hold{ color:#c77b3f; border-color:#c77b3f; } .status-completed{ color:var(--accent-green); border-color:var(--accent-green); } .status-cancelled{ color:var(--accent-red); border-color:var(--accent-red); } /* Simple industry-only settings panel */ .settings-panel{ background:var(--black); border:1px solid var(--line); padding:30px 32px; } /* ============================================================ Project request form ============================================================ */ .project-form-section{ background:var(--black); border:1px solid var(--line); padding:40px; margin-bottom:1px; } .project-form-section .section-num{ display:block; margin-bottom:14px; } .project-form-section h3{ font-family:var(--font-display); font-size:19px; font-weight:700; text-transform:uppercase; letter-spacing:-.01em; margin-bottom:8px; } .project-form-section .section-intro{ font-size:13px; color:var(--gray-2); margin-bottom:26px; max-width:520px; } .project-form-section h4{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-3); margin:22px 0 12px; font-weight:600; } .project-form-section h4:first-of-type{ margin-top:0; } .field-hint{ font-size:12px; color:var(--gray-3); margin:-6px 0 16px; } .project-form textarea{ width:100%; padding:14px 16px; background:var(--near-black); border:1px solid var(--line); color:var(--white); font-family:var(--font-body); font-size:14px; resize:vertical; transition:border-color .2s var(--ease); } .project-form textarea:focus{ outline:none; border-color:var(--white); } .project-form input[type="file"]{ width:100%; padding:12px; background:var(--near-black); border:1px solid var(--line); color:var(--gray-1); font-size:13px; } .service-group{ margin-bottom:4px; } .service-checklist{ display:grid; grid-template-columns:repeat(2, 1fr); gap:9px 20px; } .service-check{ display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--gray-1); cursor:pointer; line-height:1.4; padding:2px 0; transition:color .15s var(--ease); } .service-check:hover{ color:var(--white); } .service-check input{ margin-top:3px; flex-shrink:0; width:15px; height:15px; accent-color:var(--white); cursor:pointer; } @media (max-width:560px){ .service-checklist{ grid-template-columns:1fr; } } .style-checklist{ display:flex; flex-wrap:wrap; gap:10px; } .style-check{ position:relative; } .style-check input{ position:absolute; opacity:0; } .style-check span{ display:inline-block; padding:9px 16px; border:1px solid var(--line); border-radius:20px; font-size:12px; color:var(--gray-2); cursor:pointer; transition:all .15s var(--ease); } .style-check input:checked + span{ background:var(--white); color:var(--black); border-color:var(--white); font-weight:600; } .style-check:hover span{ border-color:var(--gray-1); } .project-form-submit{ background:var(--black); border:1px solid var(--line); border-top:none; padding:32px 40px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .project-form-submit p{ font-size:12px; color:var(--gray-3); max-width:400px; margin:0; } .project-form-submit .btn{ width:100%; justify-content:center; } @media (min-width:480px){ .project-form-submit .btn{ width:auto; } } @media (max-width:480px){ .project-form-submit{ padding:24px 22px; } } /* ============================================================ Locked project status view ============================================================ */ .project-status-card{ background:var(--black); border:1px solid var(--line); padding:44px; } .project-status-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:6px; } .project-status-head h2{ font-family:var(--font-display); font-size:24px; font-weight:700; margin-top:8px; letter-spacing:-.01em; } .project-status-note{ font-size:13px; color:var(--gray-2); margin-bottom:8px; } /* Status stepper: horizontal progression through the workflow */ .status-stepper{ display:flex; margin:34px 0 8px; border-top:1px solid var(--line); padding-top:24px; } .status-step{ flex:1; position:relative; padding-right:14px; } .status-step:last-child{ padding-right:0; } .status-step-bar{ height:3px; background:var(--line); margin-bottom:10px; border-radius:2px; overflow:hidden; } .status-step.is-done .status-step-bar{ background:var(--white); } .status-step.is-current .status-step-bar{ background:var(--white); opacity:.55; } .status-step-label{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-3); line-height:1.3; } .status-step.is-done .status-step-label, .status-step.is-current .status-step-label{ color:var(--gray-1); } .status-step.is-cancelled .status-step-bar{ background:#c75f5f; } @media (max-width:640px){ .status-stepper{ flex-wrap:wrap; gap:12px 0; } .status-step{ flex:0 0 50%; padding-right:10px; } } .chat-gate{ margin:26px 0; padding:18px 20px; border:1px dashed var(--line); font-size:13px; color:var(--gray-2); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .project-detail-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px 28px; margin:30px 0; padding-top:30px; border-top:1px solid var(--line-soft); } .project-detail{ display:flex; flex-direction:column; gap:5px; } .project-detail span{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-3); } .project-detail strong{ font-size:14px; font-weight:600; } .project-detail-block{ margin-top:26px; padding-top:26px; border-top:1px solid var(--line-soft); } .project-detail-block > span{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-3); display:block; margin-bottom:12px; } .project-detail-block p{ font-size:14px; color:var(--gray-1); line-height:1.7; } .service-tags{ display:flex; flex-wrap:wrap; gap:8px; } .service-tag{ font-size:12px; padding:6px 13px; border:1px solid var(--line); border-radius:20px; color:var(--gray-1); } .attachment-list{ list-style:none; padding:0; margin:0; } .attachment-list li{ margin-bottom:8px; } .attachment-list a{ font-size:13px; color:var(--white); text-decoration:underline; } @media (max-width:640px){ .project-detail-grid{ grid-template-columns:1fr; } .project-status-head{ flex-direction:column; } .project-form-section{ padding:28px 22px; } .project-status-card{ padding:28px 22px; } } /* ============================================================ Project chat ============================================================ */ .project-chat-thread{ border:1px solid var(--line); background:var(--panel); padding:24px; max-height:520px; overflow-y:auto; margin-bottom:20px; display:flex; flex-direction:column; gap:16px; } .project-chat-empty{ font-size:13px; color:var(--gray-3); text-align:center; padding:20px 0; } .project-chat-msg{ max-width:80%; } .project-chat-msg.is-mine{ align-self:flex-end; text-align:right; } .project-chat-msg-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; flex-wrap:wrap; } .project-chat-msg.is-mine .project-chat-msg-head{ justify-content:flex-end; } .project-chat-msg-head strong{ font-size:13px; } .project-chat-msg-role{ font-size:11px; color:var(--gray-3); text-transform:uppercase; letter-spacing:.04em; } .project-chat-msg-head time{ font-size:11px; color:var(--gray-3); } .project-chat-msg p{ font-size:14px; color:var(--gray-1); line-height:1.5; background:var(--near-black); border:1px solid var(--line); padding:10px 14px; border-radius:var(--radius); display:inline-block; text-align:left; } .project-chat-msg.is-mine p{ background:var(--white); color:var(--black); border-color:var(--white); } .project-chat-attachments{ list-style:none; padding:0; margin:6px 0 0; } .project-chat-attachments a{ font-size:12px; color:var(--white); text-decoration:underline; } .project-chat-composer{ border:1px solid var(--line); background:var(--panel); padding:18px; } .project-chat-composer textarea{ width:100%; padding:12px 14px; background:var(--near-black); border:1px solid var(--line); color:var(--white); font-family:var(--font-body); font-size:14px; resize:vertical; margin-bottom:12px; } .project-chat-composer textarea:focus{ outline:none; border-color:var(--white); } .project-chat-composer-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .project-chat-composer-actions input[type="file"]{ font-size:12px; color:var(--gray-2); max-width:60%; } @media (max-width:560px){ .project-chat-msg{ max-width:100%; } .project-chat-composer-actions{ flex-direction:column; align-items:stretch; } .project-chat-composer-actions input[type="file"]{ max-width:100%; } } /* ============================================================ Staff "Access Chats" listing ============================================================ */ .chat-list{ display:flex; flex-direction:column; border:1px solid var(--line); } .chat-list-item{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 26px; border-bottom:1px solid var(--line); background:var(--black); transition:background .15s var(--ease); } .chat-list-item:last-child{ border-bottom:none; } .chat-list-item:hover{ background:var(--near-black); } .chat-list-item.is-locked{ opacity:.55; } .chat-list-item-main{ display:flex; flex-direction:column; gap:5px; min-width:0; } .chat-list-item-main strong{ font-size:14px; } .chat-list-item-meta{ font-size:12px; color:var(--gray-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chat-list-item-side{ display:flex; align-items:center; gap:14px; flex-shrink:0; } .chat-list-item-count{ font-size:11px; color:var(--gray-2); white-space:nowrap; } @media (max-width:560px){ .chat-list-item{ flex-direction:column; align-items:flex-start; gap:10px; padding:18px 20px; } .chat-list-item-side{ width:100%; justify-content:space-between; } } /* Status history log on the client project status view */ .status-history{ margin:20px 0 8px; padding-top:18px; border-top:1px solid var(--line-soft); } .status-history-row{ display:flex; align-items:center; gap:10px; padding:7px 0; font-size:12px; } .status-history-dot{ width:6px; height:6px; border-radius:50%; background:var(--gray-2); flex-shrink:0; } .status-history-label{ color:var(--gray-1); font-weight:600; min-width:120px; } .status-history-time{ color:var(--gray-3); } @media (max-width:480px){ .status-history-row{ flex-wrap:wrap; } .status-history-label{ min-width:0; } } /* Chat image attachment previews */ .project-chat-images{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .project-chat-images img{ width:110px; height:110px; object-fit:cover; border-radius:var(--radius); border:1px solid var(--line); cursor:pointer; transition:opacity .15s var(--ease); } .project-chat-images img:hover{ opacity:.85; } @media (max-width:480px){ .project-chat-images img{ width:88px; height:88px; } } /* ============================================================ Language switcher (Google Translate under the hood) ============================================================ */ .lang-switch{ position:relative; } .lang-switch-btn{ padding:0 16px; min-width:56px; justify-content:center; } .lang-code{ font-size:12px; font-weight:700; letter-spacing:.06em; } .lang-switch-menu{ display:none; position:absolute; top:calc(100% + 8px); right:0; min-width:150px; background:var(--near-black); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 16px 36px -14px rgba(0,0,0,.5); padding:6px; z-index:1200; } .lang-switch.is-open .lang-switch-menu{ display:block; } .lang-switch-menu a{ display:block; padding:10px 12px; font-size:13px; color:var(--gray-1); border-radius:var(--radius); transition:background .15s var(--ease), color .15s var(--ease); } .lang-switch-menu a:hover{ background:var(--line-soft); color:var(--white); } .lang-switch-menu a.active{ color:var(--white); font-weight:600; } .mobile-lang-switch{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; } .mobile-lang-switch a{ padding:9px 16px; border:1px solid var(--line); border-radius:var(--radius); font-family:var(--font-body); font-size:13px; text-transform:none; color:var(--gray-1); } .mobile-lang-switch a.active{ color:var(--white); border-color:var(--white); font-weight:600; } /* ============================================================ Project request form step wizard (QCM-style, one step at a time) ============================================================ */ .form-wizard-progress{ margin-bottom:24px; } .form-wizard-bar{ height:3px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:10px; } .form-wizard-bar-fill{ height:100%; background:var(--white); transition:width .35s var(--ease); } .form-wizard-step-label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-3); } .form-wizard-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:28px; padding-top:24px; border-top:1px solid var(--line-soft); } /* ============================================================ Hero terminal — the site's core "we run real infrastructure" visual signature, deliberately looks like a real status/monitoring readout rather than decoration for its own sake. ============================================================ */ .hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; } .hero-copy{ min-width:0; } .terminal-window{ background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,0,0,.6); } html[data-theme="light"] .terminal-window{ box-shadow:0 40px 80px -30px rgba(0,0,0,.18); } .terminal-bar{ display:flex; align-items:center; gap:8px; padding:13px 16px; background:var(--near-black); border-bottom:1px solid var(--line); } .terminal-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; } .terminal-dot:nth-child(1){ background:#FF5F57; } .terminal-dot:nth-child(2){ background:#FEBC2E; } .terminal-dot:nth-child(3){ background:#28C840; } .terminal-title{ margin-left:8px; font-family:var(--font-mono); font-size:11px; color:var(--gray-2); } .terminal-body{ padding:22px 24px 24px; font-family:var(--font-mono); font-size:13px; line-height:1.9; } .terminal-line{ display:flex; align-items:center; gap:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .terminal-prompt{ color:var(--accent-green); font-weight:600; } .terminal-cmd{ color:var(--white); } .terminal-cursor{ display:inline-block; width:7px; height:14px; background:var(--white); margin-left:2px; animation:termBlink 1.1s step-end infinite; } @keyframes termBlink{ 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } } .terminal-out{ color:var(--gray-1); font-size:12.5px; justify-content:space-between; } .terminal-out .left{ display:flex; align-items:center; gap:9px; min-width:0; overflow:hidden; text-overflow:ellipsis; } .term-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; background:var(--accent-green); box-shadow:0 0 8px var(--accent-green); } .terminal-val{ color:var(--accent-green); flex-shrink:0; } .terminal-meta{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft); color:var(--gray-3); font-size:11px; white-space:normal; } @media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } .terminal-window{ max-width:520px; } } @media (max-width:480px){ .terminal-body{ padding:18px 16px 20px; font-size:12px; } .terminal-line{ gap:6px; } } /* Subtle engineering-blueprint texture behind the hero, barely there. */ .hero{ position:relative; } .hero::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:linear-gradient(to bottom, black, transparent 75%); mask-image:linear-gradient(to bottom, black, transparent 75%); opacity:.5; } .hero .container{ position:relative; z-index:1; } /* ============================================================ Design system v2 — full visual overhaul layer. Same markup, same class names, elevated aesthetic: atmospheric depth, glass surfaces, glow interactions. ============================================================ */ /* --- Atmosphere: layered aurora behind every page --- */ body{ background: radial-gradient(1100px 700px at 85% -10%, rgba(var(--glow), .08), transparent 60%), radial-gradient(900px 650px at -12% 25%, rgba(91,155,213,.06), transparent 55%), radial-gradient(700px 500px at 50% 115%, rgba(var(--glow), .05), transparent 60%), var(--black); background-attachment: fixed; } html[data-theme="light"] body{ background: radial-gradient(1100px 700px at 85% -10%, rgba(var(--glow), .10), transparent 60%), radial-gradient(900px 650px at -12% 25%, rgba(91,155,213,.07), transparent 55%), var(--black); background-attachment: fixed; } /* --- Headline treatment: subtle metallic gradient on h1/h2 --- */ h1, h2{ background:linear-gradient(180deg, var(--white) 55%, var(--gray-1) 130%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--white); } @supports not (background-clip:text){ h1, h2{ background:none; -webkit-text-fill-color:currentColor; } } /* --- Buttons: pill geometry, gradient primary, glow on hover --- */ .btn{ border-radius:999px; padding:15px 30px; } .btn-primary{ background:linear-gradient(180deg, var(--white), var(--gray-1)); box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 8px 24px -12px rgba(0,0,0,.8); } .btn-primary:hover{ background:linear-gradient(180deg, var(--white), var(--white)); transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 14px 32px -12px rgba(var(--glow), .45); } .btn-ghost{ backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .btn-ghost:hover{ border-color:rgba(var(--glow), .6); background:rgba(var(--glow), .07); } .header-actions .btn-ghost, .theme-toggle, .lang-switch-btn{ border-radius:999px; } /* --- Header: floating glass with gradient hairline --- */ .site-header{ background:rgba(7,9,11,.6); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); border-bottom:1px solid transparent; border-image:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent) 1; } html[data-theme="light"] .site-header{ background:rgba(250,250,248,.65); } .main-nav a.active::after{ height:2px; border-radius:2px; background:linear-gradient(90deg, rgb(var(--glow)), transparent); } /* --- Card mosaics -> floating card grids --- */ .services-grid, .values-grid, .process, .pricing-cats, .includes-grid{ gap:16px; background:transparent; border:none; } .service-card, .value-card, .process-step, .pricing-cat, .includes-item{ border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(160deg, var(--panel) 0%, var(--black) 70%); position:relative; transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); } .service-card:hover, .value-card:hover, .process-step:hover, .pricing-cat:hover{ transform:translateY(-5px); border-color:rgba(var(--glow), .45); box-shadow:0 24px 48px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--glow), .12), 0 12px 40px -18px rgba(var(--glow), .25); } .service-card::after, .pricing-cat::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(420px 200px at 20% 0%, rgba(var(--glow), .09), transparent 65%); opacity:0; transition:opacity .3s var(--ease); } .service-card:hover::after, .pricing-cat:hover::after{ opacity:1; } /* --- Hero: aurora bloom + refined grid mask --- */ .hero::after{ content:''; position:absolute; pointer-events:none; z-index:0; top:-140px; right:-120px; width:640px; height:640px; background:radial-gradient(circle, rgba(var(--glow), .13), transparent 62%); filter:blur(20px); } .hero::before{ opacity:.35; } .hero p.lead{ font-size:19px; } /* --- Terminal window: elevated with a glow ring --- */ .terminal-window{ border-radius:16px; border-color:rgba(var(--glow), .18); box-shadow: 0 0 0 1px rgba(var(--glow), .07), 0 50px 100px -40px rgba(0,0,0,.8), 0 24px 70px -30px rgba(var(--glow), .22); } .terminal-bar{ background:rgba(255,255,255,.03); } html[data-theme="light"] .terminal-bar{ background:rgba(0,0,0,.04); } /* --- Stats: gradient numerals with accent tick --- */ .hero-stats .num, .stats-row .num{ background:linear-gradient(180deg, var(--white), rgba(var(--glow), .85) 160%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero-stats{ border-top-color:transparent; position:relative; } .hero-stats::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, rgba(var(--glow), .5), var(--line) 30%, var(--line) 70%, transparent); } /* --- Forms: soft radius, green focus ring --- */ .field input, .field select, .project-form textarea, .project-chat-composer textarea{ border-radius:var(--radius); } .field input:focus, .field select:focus, .project-form textarea:focus, .project-chat-composer textarea:focus{ border-color:rgba(var(--glow), .65); box-shadow:0 0 0 3px rgba(var(--glow), .14); } .auth-card{ border-radius:var(--radius-lg); background:linear-gradient(170deg, var(--panel), var(--black) 80%); border-color:var(--line); box-shadow:0 40px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02) inset; } .auth-alert, .profile-reminder, .balance-card, .linked-accounts-list, .project-card, .project-status-card, .project-form-section, .settings-panel, .project-chat-thread, .project-chat-composer, .chat-list, .testimonial, .leadership, .pricing-teaser, .cta-banner, .price-range-strip{ border-radius:var(--radius-lg); } .project-form-submit{ border-top:1px solid var(--line); margin-top:16px; border-radius:var(--radius-lg); } .project-card::before{ border-radius:3px 0 0 3px; background:rgb(var(--glow)); opacity:.55; } /* --- Pricing teaser / CTA banners: gradient wash --- */ .pricing-teaser, .cta-banner{ background: radial-gradient(600px 300px at 90% 0%, rgba(var(--glow), .10), transparent 60%), linear-gradient(160deg, var(--panel), var(--black)); border-color:rgba(var(--glow), .2); } /* --- FAQ, trust strip, breadcrumbs polish --- */ .faq-item summary:hover .faq-icon{ color:rgb(var(--glow)); } .trust-logos span{ transition:opacity .2s var(--ease), color .2s var(--ease); } .trust-logos span:hover{ opacity:1; color:var(--white); } .breadcrumbs{ background:transparent; } /* --- Chat widget: pill launcher with live pulse, rounded panel --- */ .chat-launcher{ border-radius:999px; box-shadow:0 16px 40px -14px rgba(0,0,0,.7), 0 0 0 1px var(--line); } .chat-launcher .ico{ background:rgb(var(--glow)); animation:chatPulse 2.2s infinite; } @keyframes chatPulse{ 0%, 100%{ box-shadow:0 0 0 0 rgba(var(--glow), .5); } 55%{ box-shadow:0 0 0 7px rgba(var(--glow), 0); } } .chat-panel{ border-radius:var(--radius-lg); overflow:hidden; } .chat-panel-header .title .dot{ background:rgb(var(--glow)); } .chat-msg{ border-radius:14px; } .chat-msg-user{ border-bottom-right-radius:4px; } .chat-msg-agent{ border-bottom-left-radius:4px; } /* --- Footer: gradient hairline crown --- */ .site-footer{ position:relative; } .site-footer::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(var(--glow), .4) 25%, var(--line) 60%, transparent); } /* --- Language switcher menu: glass dropdown --- */ .lang-switch-menu{ border-radius:14px; padding:8px; background:rgba(12,15,18,.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } html[data-theme="light"] .lang-switch-menu{ background:rgba(250,250,248,.92); } .lang-switch-menu a{ border-radius:9px; } .lang-switch-menu a.active{ background:rgba(var(--glow), .1); color:rgb(var(--glow)); } .mobile-lang-switch a{ border-radius:999px; } .mobile-nav{ background:rgba(7,9,11,.97); } /* --- Translating state: spinner inside the language button, page untouched --- */ .lang-switch-btn{ position:relative; } .lang-switch-btn.is-loading .lang-code{ opacity:0; } .lang-switch-btn.is-loading::after{ content:''; position:absolute; top:50%; left:50%; width:14px; height:14px; margin:-8px 0 0 -8px; border-radius:50%; border:2px solid var(--line); border-top-color:rgb(var(--glow)); animation:langSpin .7s linear infinite; } @keyframes langSpin{ to{ transform:rotate(360deg); } } /* --- Selection + status stepper accent --- */ ::selection{ background:rgb(var(--glow)); color:#06130C; } .status-step.is-done .status-step-bar{ background:rgb(var(--glow)); } .status-step.is-current .status-step-bar{ background:rgb(var(--glow)); opacity:.5; } .form-wizard-bar-fill{ background:linear-gradient(90deg, rgb(var(--glow)), var(--white)); } /* --- Reveal animation: slightly springier --- */ .reveal{ transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s cubic-bezier(.16,1,.3,1); } @media (prefers-reduced-motion: reduce){ .chat-launcher .ico{ animation:none; } body{ background-attachment:scroll; } }