/* ========================= THEME VARIABLES (GLOBAL) ========================= These variables make it easy to control colors, shadows, and rounding consistently across the entire site. */ :root{ --bg: #0b1020; /* Main page background color */ --card: rgba(255,255,255,0.06); /* Card background (slightly transparent) */ --card2: rgba(255,255,255,0.04); /* Secondary card background */ --text: rgba(255,255,255,0.92); /* Primary text color */ --text-secondary: rgba(255,255,255,0.82); /* Labels, secondary text */ --muted: rgba(255,255,255,0.68); /* Muted/subtitle text */ --line: rgba(255,255,255,0.12); /* Border/line color */ --accent: #7c5cff; /* Primary accent color (purple) */ --accent2: #2dd4bf; /* Secondary accent color (teal) */ --shadow: 0 18px 50px rgba(0,0,0,.35); /* Soft deep shadow used on elevated panels */ --radius: 18px; /* Default rounding */ --focus-ring: rgba(45,212,191,0.65); /* Accessible focus outline color */ } /* ========================= GLOBAL RESET / BASE ========================= */ *{ box-sizing: border-box; } /* Ensures padding/borders don’t break sizing */ html{ scroll-behavior: smooth; } /* Smooth scroll for anchor links */ body{ margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); /* Layered background: - Two radial gradients for glow effects - The base background color underneath */ background: radial-gradient(900px 400px at 15% 10%, rgba(124,92,255,.30), transparent 60%), radial-gradient(900px 400px at 85% 0%, rgba(45,212,191,.18), transparent 60%), var(--bg); } a{ color: inherit; text-decoration: none; } /* Links inherit color; no underline */ .container{ width: min(1120px, calc(100% - 40px)); margin: 0 auto; } /* Container: - Max width 1120px - Leaves 20px padding left/right on small screens (40px total) */ /* ========================= SCREEN-READER ONLY ========================= Makes text accessible to screen readers but invisible visually. */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ========================= SKIP LINK ========================= Hidden off-screen; becomes visible when focused via keyboard Tab. Must be the first element inside . */ .skip-link{ position: absolute; left: -9999px; top: 0; z-index: 99999; padding: 10px 18px; background: var(--accent); color: #fff; font-weight: 700; border-radius: 0 0 12px 0; text-decoration: none; } .skip-link:focus{ left: 0; outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* ========================= TOPBAR ========================= */ .topbar{ border-bottom: 1px solid var(--line); /* Thin separator line */ background: rgba(0,0,0,0.15); /* Transparent dark overlay */ backdrop-filter: blur(10px); /* Frosted glass effect */ } .topbar__inner{ display:flex; justify-content:space-between; align-items:center; padding: 10px 0; /* Vertical padding */ gap: 12px; font-size: 13px; /* Smaller text */ } .topbar__left{ display:flex; align-items:center; gap:10px; flex-wrap: wrap; } /* flex-wrap allows items to wrap to next line if not enough space */ .topbar__link{ color: var(--muted); } .topbar__link:hover{ color: var(--text); } /* Brighten on hover */ .dot{ color: rgba(255,255,255,0.35); } /* Separator dot color */ .pill{ padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; /* Fully rounded pill */ color: var(--muted); background: rgba(255,255,255,0.04); } .iconlink{ display:inline-flex; align-items:center; justify-content:center; width: 30px; height: 30px; border:1px solid var(--line); border-radius: 10px; color: var(--muted); } .iconlink:hover{ color: var(--text); background: rgba(255,255,255,0.06); } /* ========================= HEADER (STICKY NAV) ========================= */ .header{ position: sticky; /* Stays visible at top while scrolling */ top: 0; z-index: 50; /* Ensures it sits above page content */ border-bottom: 1px solid var(--line); background: rgba(11,16,32,0.65); /* Semi-transparent background */ backdrop-filter: blur(12px); /* Glass effect */ } .header__inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap: 16px; } /* ========================= BRAND / LOGO AREA ========================= */ .brand{ display:flex; align-items:center; gap: 12px; } /* Logo container (square with curved edges) */ .brand__mark{ width: 56px; /* adjust size here */ height: 56px; overflow: hidden; flex-shrink: 0; border-radius: 14px; /* curved square */ background: rgba(255,255,255,0.04); border: 1px solid var(--line); } .brand__logo{ width: 100%; height: 100%; object-fit: cover; /* ⬅ fills the box completely */ display: block; padding: 0; /* ⬅ NO margins */ } /* Brand text */ .brand__text{ min-width: 0; } .brand__name{ display: block; /* ensures it occupies its own line */ line-height: 1.15; padding-right: 6px; font-weight: 700; letter-spacing: .2px; } .brand__tag{ display: block; /* allows margin-top to take effect on a */ font-size: 12px; color: var(--muted); margin-top: 4px; } /* ========================= NAV MENU (DESKTOP) ========================= */ .nav__menu{ display:flex; align-items:center; gap: 18px; list-style:none; padding:0; margin:0; } .nav__menu a{ color: var(--muted); font-weight: 500; } .nav__menu a:hover{ color: var(--text); } /* ========================= NAV TOGGLE (MOBILE MENU BUTTON) ========================= */ .nav__toggle{ display:none; /* hidden on desktop; shown in @media */ width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.04); cursor:pointer; } .nav__toggle span{ display:block; width: 18px; height: 2px; background: rgba(255,255,255,0.75); margin: 4px auto; /* centers the hamburger lines */ border-radius: 2px; } /* ========================= BUTTONS ========================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap: 10px; padding: 12px 16px; border-radius: 14px; border: 1px solid transparent; /* Gradient button */ background: linear-gradient(135deg, var(--accent), rgba(45,212,191,.55)); color: #0b1020; font-weight: 700; cursor:pointer; } .btn:hover{ filter: brightness(1.05); } /* Slight pop on hover */ .btn--ghost{ background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--line); } .btn--link{ background: transparent; border: 1px dashed rgba(255,255,255,0.25); color: var(--muted); } .btn--link:hover{ color: var(--text); border-color: rgba(255,255,255,0.4); } .btn--small{ padding: 10px 14px; border-radius: 12px; font-size: 14px; } /* ========================= HERO SECTION ========================= */ .hero{ padding: 56px 0 18px; } .hero__grid{ display:grid; grid-template-columns: 1.15fr .85fr; /* left column wider than right */ gap: 28px; align-items: center; } .kicker{ color: rgba(45,212,191,0.85); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; margin: 0 0 12px; } .hero h1{ font-size: clamp(34px, 4.1vw, 52px); margin: 0 0 12px; } /* clamp(min, preferred, max) makes font responsive */ .lead{ color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0 0 18px; } .hero__cta{ display:flex; align-items:center; gap: 12px; flex-wrap: wrap; /* wraps buttons on small widths */ margin-bottom: 18px; } /* trust cards under hero text */ .hero__trust{ display:flex; gap: 12px; flex-wrap: wrap; } .trustcard{ padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); } .trustcard__big{ font-weight: 800; display:block; } .trustcard__small{ color: var(--muted); font-size: 13px; } /* right hero panel (mockup) */ .hero__panel{ border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.04); box-shadow: var(--shadow); overflow:hidden; } .hero__panelTop{ display:flex; gap: 8px; flex-wrap: wrap; padding: 14px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,0.12); } .chip{ display: inline-flex; /* allows icon + text to sit side by side */ align-items: center; gap: 6px; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,0.04); } /* Small icon inside hero chips */ .chip__icon{ width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex-shrink: 0; } .hero__mock{ padding: 16px; } /* grey placeholder lines for mock UI */ .mockline{ height: 10px; border-radius: 999px; background: rgba(255,255,255,0.12); margin-bottom: 10px; } .mockline.w80{ width: 80%; } .mockline.w60{ width: 60%; } .mockgrid{ margin-top: 16px; display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .mockcard{ height: 86px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); overflow: hidden; /* clips the image to the rounded corners */ } .mockcard__img{ width: 100%; height: 100%; object-fit: cover; /* fills box without stretching */ display: block; } .hero__note{ color: var(--muted); font-size: 12px; padding: 0 16px 14px; margin: 0; } /* ========================= SCROLL OFFSET FOR STICKY HEADER ========================= Prevents anchor links from hiding section headings behind the sticky nav. */ section[id]{ scroll-margin-top: 80px; } /* ========================= SECTIONS (GENERAL) ========================= */ .section{ padding: 56px 0; } /* alternate section background */ .section--alt{ background: rgba(255,255,255,0.02); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* section heading row */ .section__head{ display:flex; align-items:end; justify-content:space-between; gap: 16px; margin-bottom: 18px; } .section__head h2{ margin: 0; font-size: 30px; } .section__head p{ margin: 0; color: var(--muted); } /* cards layout */ .cards{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .cards--3{ grid-template-columns: repeat(3, 1fr); } .card{ border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.04); padding: 18px; } .card h3{ margin: 0 0 8px; } .card p{ margin: 0 0 12px; color: var(--muted); line-height: 1.7; } .bullets{ margin: 0; padding-left: 18px; color: var(--muted); } .bullets li{ margin: 6px 0; } /* callout banner */ .banner{ margin-top: 18px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid rgba(45,212,191,0.25); background: linear-gradient(135deg, rgba(124,92,255,0.18), rgba(45,212,191,0.10)); display:flex; justify-content:space-between; align-items:center; gap: 14px; } .banner p{ margin: 0; color: var(--muted); line-height: 1.6; } /* ========================= STATS ========================= */ .stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 10px; } .stat{ border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.04); padding: 16px; } .stat__num{ font-size: 32px; font-weight: 800; letter-spacing: .3px; } .stat__label{ color: var(--muted); margin-top: 8px; } /* ========================= VALUES ROW ========================= */ .values{ margin-top: 16px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .value{ border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,0.03); padding: 14px; display:flex; align-items:center; gap: 12px; } .value__icon{ width: 38px; height: 38px; border-radius: 14px; background: rgba(255,255,255,0.06); display:grid; place-items:center; /* centers the icon */ } .value__text{ font-weight: 700; color: var(--text-secondary); } /* ========================= PROJECTS / WORK GRID ========================= */ .grid2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .work__thumb img{ width: 100%; height: 100%; object-fit: cover; /* fills the area */ display: block; transition: transform 0.25s ease; } .work__thumb--clickable{ cursor: pointer; } .work__thumb--clickable:hover img{ transform: scale(1.03); } #modalImage{ max-width: 100%; max-height: 75vh; /* show full image within screen */ width: auto; height: auto; object-fit: contain; display: block; border-radius: 16px; } .work{ border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.04); overflow:hidden; } .work__thumb{ height: 160px; border-bottom: 1px solid var(--line); overflow: hidden; /* crops thumbnail cleanly */ background: radial-gradient(300px 140px at 20% 30%, rgba(124,92,255,.35), transparent 60%), radial-gradient(300px 140px at 80% 10%, rgba(45,212,191,.18), transparent 60%), rgba(0,0,0,0.2); } .work__body{ padding: 16px; } .work__body p{ color: var(--muted); line-height: 1.7; margin: 8px 0 12px; } .tags{ display:flex; gap: 8px; flex-wrap: wrap; } .tag{ font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,0.04); } /* ========================= TESTIMONIAL SLIDER ========================= */ .slider{ border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.04); padding: 18px; } .slide{ display:none; } /* all slides hidden by default */ .slide.is-active{ display:block; } /* only active slide visible */ .quote{ margin: 0 0 10px; font-size: 18px; line-height: 1.7; } .who{ margin: 0; color: var(--muted); } .slider__controls{ display:flex; gap: 10px; } .iconbtn{ width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--text); cursor:pointer; } .iconbtn:hover{ background: rgba(255,255,255,0.07); } /* ========================= POSTS / BLOG CARDS ========================= */ .post{ border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.04); padding: 18px; } .post__meta{ font-size: 12px; color: var(--muted); margin-bottom: 10px; } .post p{ color: var(--muted); line-height: 1.7; } .post__link{ color: rgba(45,212,191,0.9); font-weight: 700; } .post__link:hover{ color: var(--text); } /* ========================= CONTACT SECTION ========================= */ .contact{ display:grid; grid-template-columns: .9fr 1.1fr; /* info column slightly smaller than form */ gap: 16px; margin-top: 10px; } .infobox{ border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.04); padding: 16px; margin-bottom: 12px; } .infobox h3{ margin: 0 0 6px; } .infobox p{ margin: 0; color: var(--muted); line-height: 1.7; } .form{ border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.04); padding: 16px; } .form__row{ display:grid; grid-template-columns: repeat(2, 1fr); /* two inputs per row on desktop */ gap: 12px; } label{ display:block; font-weight: 600; font-size: 14px; color: var(--text-secondary); } input, textarea{ width: 100%; margin-top: 8px; padding: 12px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,0.18); color: var(--text); /* Do not suppress outline — handled explicitly on :focus below */ outline: 2px solid transparent; outline-offset: 2px; } input::placeholder, textarea::placeholder{ color: rgba(255,255,255,0.35); } input:focus, textarea:focus{ border-color: rgba(45,212,191,0.5); outline-color: var(--focus-ring); /* visible keyboard focus ring */ } .form__note{ margin-top: 10px; color: var(--muted); font-size: 14px; } .form__note--success{ color: var(--accent2); } /* teal — matches site accent */ .form__note--error{ color: #f87171; } /* soft red */ /* Honeypot — visually hidden from real users; bots fill it and are silently rejected */ .form__honeypot{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ========================= FOOTER ========================= */ .footer{ padding: 34px 0; border-top: 1px solid var(--line); background: rgba(0,0,0,0.2); } .footer__grid{ display:grid; grid-template-columns: 1fr 1.2fr; /* left column smaller than link columns */ gap: 16px; align-items:start; } .footer__cols{ display:grid; grid-template-columns: repeat(3, 1fr); /* 3 columns of links */ gap: 16px; } .footer__col h4{ margin: 0 0 10px; } .footer__col a{ display:block; color: var(--muted); margin: 8px 0; } .footer__col a:hover{ color: var(--text); } .footer__small{ color: var(--muted); margin-top: 12px; } /* ========================= MODAL ========================= */ .modal{ position: fixed; inset: 0; /* shorthand for top/right/bottom/left: 0 */ display: none; /* hidden until .is-open is added */ z-index: 9999; } .modal.is-open{ display: block; } .modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.6); /* dark overlay behind modal */ } .modal__card{ position: relative; width: min(820px, calc(100% - 40px)); margin: 8vh auto; /* centers vertically with top spacing */ border-radius: 18px; border: 1px solid var(--line); background: rgba(11,16,32,0.92); backdrop-filter: blur(10px); box-shadow: var(--shadow); overflow: hidden; } .modal__top{ padding: 14px 14px; border-bottom: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; } .modal__body{ padding: 14px; display: grid; place-items: center; /* centers the image */ } .videoStub{ height: 360px; border-radius: 16px; border: 1px dashed rgba(255,255,255,0.25); background: rgba(255,255,255,0.04); display:grid; place-items:center; /* centers text */ color: var(--muted); text-align:center; padding: 16px; } /* modal logo */ .modal__brand{ display: flex; align-items: center; gap: 10px; } /* Smaller logo inside modal */ .modal__brand .brand__mark{ width: 40px; height: 40px; border-radius: 12px; } /* ========================= RESPONSIVE BREAKPOINTS ========================= */ /* Tablet / smaller desktop adjustments */ @media (max-width: 920px){ .hero__grid{ grid-template-columns: 1fr; } /* stack hero columns */ .stats{ grid-template-columns: repeat(2, 1fr); } /* 4 → 2 columns */ .values{ grid-template-columns: repeat(2, 1fr); } .cards{ grid-template-columns: 1fr; } .cards--3{ grid-template-columns: 1fr; } .grid2{ grid-template-columns: 1fr; } .contact{ grid-template-columns: 1fr; } .footer__grid{ grid-template-columns: 1fr; } } /* Mobile menu + layout tweaks */ @media (max-width: 700px){ .nav__toggle{ display:inline-block; } /* show hamburger button */ .nav__menu{ position: absolute; right: 20px; top: 74px; /* menu drops below header */ flex-direction: column; align-items: stretch; gap: 10px; width: min(260px, calc(100vw - 40px)); padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: rgba(11,16,32,0.92); box-shadow: var(--shadow); display:none; /* hidden until toggled */ } .nav__menu.is-open{ display:flex; } /* show menu on toggle */ .nav__menu a{ padding: 10px 10px; border-radius: 12px; } .nav__menu a:hover{ background: rgba(255,255,255,0.06); } .form__row{ grid-template-columns: 1fr; } /* form goes 1 column */ /* Footer link columns stack on mobile */ .footer__cols{ grid-template-columns: 1fr; } } /* Very small screens (≤ 480px): simplify the topbar */ @media (max-width: 480px){ /* Hide the social icon cluster — contact info is higher priority */ .topbar__right{ display: none; } /* Stack phone and email so they don't overflow */ .topbar__left{ flex-direction: column; align-items: flex-start; gap: 4px; } /* Hide the bullet separator between phone and email when stacked */ .dot{ display: none; } }