/* ========================================================================== Mediator Town — style.css Core design tokens, reset, typography, layout primitives and components. Breakpoint overrides live in responsive.css. Keyframes live in animations.css. ========================================================================== */ /* ---------- Design tokens ---------- */ /* Light palette lives on bare :root; dark overrides sit in the [data-theme="dark"] block right after it. data-theme is always set on before first paint by theme-init.js (from localStorage, falling back to the OS preference), so there's no separate prefers-color-scheme branch needed here — the attribute is the single source of truth. */ :root{ /* Brand colors — warm amber/coral light palette */ --color-bg:#FFFFFF; --color-bg-warm:#FFF7ED; --color-bg-blue:#FFF1E0; --color-bg-green:#E6FBF7; --color-surface:#FFFFFF; --color-surface-2:#FFFBF6; --color-primary:#E8600C; --color-primary-dark:#B84908; --color-primary-light:#F58B3D; --color-green:#14B8A6; --color-green-dark:#0F766E; --color-purple:#92400E; --color-coral:#C63A1E; --color-text:#221A12; --color-text-secondary:#6B5F55; --color-border:#EDE0D2; --color-tag-coral-bg:#FCE6DE; --color-tag-purple-bg:#FBEED2; /* Brand-locked accents (not swapped by theme, used for specific, recognizable UI) */ --color-whatsapp:#25D366; --color-whatsapp-dark:#128C4A; /* Dark surface + glass, used for the hero and header in both themes. Neutral black, not purple-tinted — matches the dark-mode glass panels. */ --color-surface-dark:#050506; --color-surface-dark-2:#121214; --color-on-dark:#F5F5F7; --color-on-dark-secondary:#A1A1A6; --glass-bg:rgba(255,255,255,.06); --glass-bg-strong:rgba(255,255,255,.1); --glass-border:rgba(255,255,255,.14); /* Elevation */ --shadow-sm: 0 1px 2px rgba(34,26,18,0.07), 0 1px 1px rgba(34,26,18,0.05); --shadow-md: 0 8px 24px rgba(34,26,18,0.09), 0 2px 6px rgba(34,26,18,0.05); --shadow-lg: 0 24px 60px rgba(34,26,18,0.14), 0 8px 20px rgba(34,26,18,0.07); --shadow-glow-blue: 0 16px 40px rgba(232,96,12,0.30); --shadow-glow-green: 0 16px 40px rgba(20,184,166,0.26); --shadow-glow-pink: 0 16px 40px rgba(198,58,30,0.24); --header-bg: rgba(255,255,255,.86); /* Radii */ --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px; --radius-2xl:40px; --radius-pill:999px; /* Spacing scale */ --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --space-10:8rem; /* Type scale */ --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 2.75rem; --text-5xl: 3.5rem; --text-6xl: 4.25rem; /* Fonts */ --font-display:'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif; --font-body:'Inter', system-ui, -apple-system, sans-serif; /* Motion */ --ease-out: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --dur-fast: .18s; --dur-base: .35s; --dur-slow: .7s; --container-w: 1240px; --header-h: 84px; } /* ---------- Dark theme overrides ---------- Stepped elevation so adjacent regions never collapse into the same flat black: --color-surface-dark (hero/footer/announcement, not theme-swapped, see below) is the darkest anchor; --color-bg, --color-bg-warm and --color-surface each step one notch lighter, so a plain section, an alternating-tint section and a card are always visually distinct from each other and from the hero/footer bookending them. */ :root[data-theme="dark"]{ /* Neutral black/charcoal surfaces — Apple-style dark chrome. Purple stays as the accent color (buttons, links, icons) below; it's the brand color, not the surface color, so it's intentionally unchanged. */ --color-bg:#0A0A0C; --color-bg-warm:#131316; --color-bg-blue:rgba(155,107,243,.16); --color-bg-green:rgba(34,211,238,.14); --color-surface:#1C1C20; --color-surface-2:#242428; --color-primary:#9B6BF3; --color-primary-dark:#6C3CE9; --color-primary-light:#C4B5FD; --color-green:#22D3EE; --color-green-dark:#5EEAD4; --color-purple:#FBBF24; --color-coral:#F472B6; --color-text:#F5F5F7; --color-text-secondary:#A1A1A6; --color-border:rgba(255,255,255,.12); --color-tag-coral-bg:rgba(244,114,182,.16); --color-tag-purple-bg:rgba(251,191,36,.16); --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.2); --shadow-md: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.25); --shadow-lg: 0 24px 60px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.3); --shadow-glow-blue: 0 16px 40px rgba(155,107,243,.35); --shadow-glow-green: 0 16px 40px rgba(34,211,238,.30); --shadow-glow-pink: 0 16px 40px rgba(244,114,182,.28); --header-bg: rgba(10,10,12,.78); /* Liquid-Glass surface tokens (dark mode only) — translucent black glass panels with a blurred backdrop, a bright top-edge "specular highlight" border, and a soft ambient shadow for depth, in place of flat opaque cards. Neutral black, matching --color-surface above — not tinted purple, since purple is the accent color that sits on top of the glass (buttons, links, icons), not the glass material itself. */ --glass-surface: rgba(28,28,32,.55); --glass-surface-2: rgba(36,36,40,.5); --glass-border: rgba(255,255,255,.18); --glass-blur: blur(16px) saturate(160%); --glass-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 32px rgba(0,0,0,.4); } /* ---------- Dark mode: Liquid-Glass surfaces ---------- Every card-like panel becomes a translucent, blurred glass pane instead of a flat opaque fill — same layout and spacing, just the surface material changes. Higher selector specificity (attribute + class) means this safely overrides each component's own `background:var(--color-surface)` without needing to touch those rules or worry about source order. */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .contact-form-card, :root[data-theme="dark"] .contact-info-card, :root[data-theme="dark"] .faq-item, :root[data-theme="dark"] .portfolio-card, :root[data-theme="dark"] .service-panel, :root[data-theme="dark"] .device-frame, :root[data-theme="dark"] .biz-card, :root[data-theme="dark"] .need-chip, :root[data-theme="dark"] .pricing-card, :root[data-theme="dark"] .mt-modal, :root[data-theme="dark"] .dropdown, :root[data-theme="dark"] .synergy-card, :root[data-theme="dark"] .project-meta-item, :root[data-theme="dark"] .policy-table-wrap, :root[data-theme="dark"] .quote-callout-icon{ background:var(--glass-surface); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow); } :root[data-theme="dark"] .mt-consent-banner{ background:var(--glass-surface); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow); } :root[data-theme="dark"] .browser-url, :root[data-theme="dark"] .compare-table, :root[data-theme="dark"] .article-image, :root[data-theme="dark"] .about-visual{ background:var(--glass-surface-2); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } *{ margin:0; padding:0; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; /* Brand-colored scrollbar. Uses --color-primary directly, so it's automatically orange in light mode and purple in dark mode with no extra theme rule needed. */ scrollbar-width:thin; scrollbar-color:var(--color-primary) var(--color-bg); } ::-webkit-scrollbar{ width:12px; height:12px; } ::-webkit-scrollbar-track{ background:var(--color-bg); } ::-webkit-scrollbar-thumb{ background:var(--color-primary); border-radius:999px; border:3px solid var(--color-bg); background-clip:padding-box; } ::-webkit-scrollbar-thumb:hover{ background:var(--color-primary-dark); } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } body{ font-family:var(--font-body); font-size:var(--text-base); line-height:1.65; color:var(--color-text); background:var(--color-bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg,picture,video{ display:block; max-width:100%; height:auto; } a{ color:inherit; text-decoration:none; } ul,ol{ list-style:none; } button,input,textarea,select{ font:inherit; color:inherit; } button{ background:none; border:none; cursor:pointer; } h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:800; line-height:1.12; letter-spacing:-0.02em; color:var(--color-text); } table{ border-collapse:collapse; width:100%; } /* ---------- Focus & accessibility ---------- */ :focus-visible{ outline:2.5px solid var(--color-primary); outline-offset:3px; border-radius:4px; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--color-primary); color:#fff; padding:.85rem 1.5rem; border-radius:0 0 10px 0; font-weight:700; } .skip-link:focus{ left:0; } .visually-hidden{ position:absolute !important; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ---------- Layout primitives ---------- */ .container{ width:100%; max-width:var(--container-w); margin-inline:auto; padding-inline:var(--space-6); } .section{ padding-block: var(--space-9); position:relative; } .section-tight{ padding-block: var(--space-7); } .section-head{ max-width:680px; margin-bottom:var(--space-8); } .section-head.center{ margin-inline:auto; text-align:center; } .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:700; font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--color-primary); background:var(--color-bg-blue); padding:.4rem .9rem; border-radius:var(--radius-pill); margin-bottom:var(--space-4); } .eyebrow::before{ content:''; width:6px;height:6px; border-radius:50%; background:var(--color-green); flex-shrink:0; } /* .on-dark only changes appearance in dark mode — in light mode the hero itself is light, so the default .eyebrow look already fits. */ :root[data-theme="dark"] .eyebrow.on-dark{ color:var(--color-on-dark); background:var(--glass-bg-strong); border:1px solid var(--glass-border); } h2.section-title{ font-size:var(--text-4xl); margin-bottom:var(--space-4); } .section-sub{ font-size:var(--text-lg); color:var(--color-text-secondary); line-height:1.6; } .bg-warm{ background:var(--color-bg-warm); } .bg-blue-tint{ background:var(--color-bg-blue); } .bg-green-tint{ background:var(--color-bg-green); } /* gradient text for emphasis words */ /* A bright band sits in the middle of an otherwise-normal 2-tone gradient and is animated off to the side at rest, so the text reads exactly like the plain primary-to-coral gradient it always was; sheen.css (below) sweeps that band across every ~8s, the way a light catches foil. */ .text-gradient{ background:linear-gradient(100deg, var(--color-primary) 0%, var(--color-coral) 42%, #FFDCC2 50%, var(--color-coral) 58%, var(--color-primary) 100%); background-size:280% 100%; background-position:0% 50%; -webkit-background-clip:text; background-clip:text; color:transparent; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-family:var(--font-display); font-weight:700; font-size:var(--text-base); padding:1rem 1.75rem; border-radius:var(--radius-pill); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); white-space:nowrap; position:relative; } .btn svg{ width:18px; height:18px; flex-shrink:0; } .btn-primary{ background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color:#fff; box-shadow:var(--shadow-glow-blue); } .btn-primary:hover{ background:linear-gradient(135deg, var(--color-primary-light), var(--color-primary)); transform:translateY(-3px); box-shadow:0 20px 44px rgba(108,60,233,0.4); } .btn-primary:active{ transform:translateY(-1px); } .btn-secondary{ background:var(--color-surface); color:var(--color-text); border:1.5px solid var(--color-border); } .btn-secondary:hover{ border-color:var(--color-primary); color:var(--color-primary); transform:translateY(-3px); box-shadow:var(--shadow-md); } .btn-ghost{ background:transparent; color:var(--color-text); padding:.6rem 0; border-radius:0; font-weight:700; } .btn-ghost::after{ content:''; display:block; height:2px; background:var(--color-primary); width:0; transition:width var(--dur-base) var(--ease-out); margin-top:2px; } .btn-ghost:hover::after{ width:100%; } .btn-whatsapp{ background:var(--color-whatsapp); color:#fff; box-shadow:0 16px 40px rgba(37,211,102,0.30); } .btn-whatsapp:hover{ background:var(--color-whatsapp-dark); transform:translateY(-3px); } .btn-block{ width:100%; } .btn-lg{ padding:1.15rem 2.1rem; font-size:var(--text-lg); } /* ---------- Header / Nav ---------- */ /* Note: the frosted-glass blur lives on ::before rather than directly on .site-header. A `backdrop-filter` (or `transform`/`filter`) on an element makes it a containing block for any `position:fixed` descendants — and the mobile nav panel below is `position:fixed`. Put the filter on the header itself and the fixed nav gets sized against the ~70px header box instead of the viewport, collapsing to content-height instead of covering the screen. Keeping the filter on a non-ancestor pseudo-element avoids that trap entirely. */ .site-header{ position:sticky; top:0; z-index:500; border-bottom:1px solid var(--color-border); } .site-header::before{ content:''; position:absolute; inset:0; z-index:0; background:var(--header-bg); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); } .header-inner{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:var(--space-5); max-width:none; width:100%; } .logo{ display:inline-flex; align-items:center; gap:.65rem; flex-shrink:0; /* Symmetric padding, not a larger font: keeps the visual mark the same size while growing the actual tap target closer to the ~44px minimum mobile touch-target guideline (its text-only content box alone was under 20px tall). */ padding-block:.9rem; margin-block:-.9rem; } .logo-word{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:-.01em; color:var(--color-text); line-height:1; } .logo-word span{ background:linear-gradient(100deg, var(--color-primary) 10%, var(--color-coral) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; } .nav-toggle-input{ display:none; } .nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px;height:44px; border-radius:var(--radius-sm); cursor:pointer; flex-shrink:0; } .nav-toggle span{ display:block; width:22px;height:2.5px; background:var(--color-text); border-radius:2px; margin-inline:auto; transition: transform var(--dur-base) var(--ease-in-out), opacity var(--dur-base) var(--ease-in-out); } .site-nav{ display:flex; align-items:center; gap:var(--space-6); } .site-nav > ul{ display:flex; align-items:center; gap:var(--space-6); } .site-nav > ul > li{ position:relative; } .site-nav > ul > li > a{ font-family:var(--font-display); font-weight:600; font-size:var(--text-sm); padding:.5rem .1rem; position:relative; } .site-nav > ul > li > a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--color-primary); transition:width var(--dur-base) var(--ease-out); } .site-nav > ul > li > a:hover::after, .site-nav > ul > li > a[aria-current="page"]::after{ width:100%; } .site-nav > ul > li > a[aria-current="page"]{ color:var(--color-primary); } .has-dropdown > a{ display:inline-flex; align-items:center; gap:.3rem; } .has-dropdown > a::before{ content:''; width:7px;height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-4px; transition:transform var(--dur-base) var(--ease-out); order:2; } .dropdown{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); min-width:220px; padding:.5rem; opacity:0; visibility:hidden; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base); } .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .has-dropdown:hover > a::before{ transform:rotate(225deg); margin-top:2px; } .dropdown li a{ display:block; padding:.7rem .85rem; border-radius:var(--radius-sm); font-size:var(--text-sm); font-weight:600; color:var(--color-text); } .dropdown li a:hover{ background:var(--color-bg-blue); color:var(--color-primary); } .dropdown li + li{ margin-top:2px; } .nav-cta{ flex-shrink:0; padding:.78rem 1.4rem; font-size:var(--text-sm); } /* ---------- Theme toggle ---------- */ .theme-toggle{ flex-shrink:0; width:42px;height:42px; border-radius:50%; display:flex;align-items:center;justify-content:center; border:1.5px solid var(--color-border); background:var(--color-surface); color:var(--color-text); transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), background var(--dur-fast); } .theme-toggle:hover{ border-color:var(--color-primary); color:var(--color-primary); transform:translateY(-2px); } .theme-toggle svg{ width:19px;height:19px; } .theme-toggle .icon-sun{ display:none; } .theme-toggle .icon-moon{ display:block; } :root[data-theme="dark"] .theme-toggle .icon-sun{ display:block; } :root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; } /* ---------- Hero shared ---------- Light mode: warm gradient banner, dark text. Dark mode: the navy/violet mesh, plus small corner-anchored 3D wireframe accents (.accent-3d, see below and three-scene.js) — never a single object sitting behind the copy itself. */ .hero{ padding-top:var(--space-9); padding-bottom:var(--space-9); position:relative; overflow:hidden; background:var(--color-bg-warm); color:var(--color-text); border-bottom:1px solid var(--color-border); } .hero::before{ content:''; position:absolute; inset:0; z-index:0; background: radial-gradient(680px 420px at 14% -6%, rgba(232,96,12,.22), transparent 60%), radial-gradient(560px 420px at 100% 10%, rgba(20,184,166,.18), transparent 60%), radial-gradient(620px 460px at 50% 120%, rgba(198,58,30,.14), transparent 60%), var(--color-bg-warm); } .hero::after{ content:''; position:absolute; inset:0; z-index:0; opacity:.4; background-image:radial-gradient(rgba(34,26,18,.07) 1px, transparent 1px); background-size:26px 26px; mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 90%); } :root[data-theme="dark"] .hero{ background:var(--color-surface-dark); color:var(--color-on-dark); } :root[data-theme="dark"] .hero::before{ background: radial-gradient(680px 420px at 14% -6%, rgba(108,60,233,.14), transparent 60%), radial-gradient(560px 420px at 100% 10%, rgba(34,211,238,.08), transparent 60%), radial-gradient(620px 460px at 50% 120%, rgba(190,24,101,.08), transparent 60%), var(--color-surface-dark); } :root[data-theme="dark"] .hero::after{ opacity:.5; background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); } .hero .container{ position:relative; z-index:1; } /* Small corner-anchored 3D wireframe accents. These sit at the same negative-offset corner positions a plain decorative blob used to occupy (top-left/bottom-right of a hero, a corner of the final-cta band) — already outside the text column by design — never centered behind copy. Dark-mode only; inert (and never loads Three.js) in light mode. */ .accent-3d{ position:absolute; z-index:0; opacity:0; pointer-events:none; transition:opacity .8s var(--ease-out); } :root[data-theme="dark"] .accent-3d{ opacity:.85; } .accent-3d canvas{ display:block; width:100%; height:100%; } .page-hero{ padding-top:var(--space-8); padding-bottom:var(--space-8); background:var(--color-bg-warm); color:var(--color-text); position:relative; overflow:hidden; border-bottom:1px solid var(--color-border); } .page-hero::before{ content:''; position:absolute; inset:0; z-index:0; background: radial-gradient(520px 360px at 10% 0%, rgba(232,96,12,.2), transparent 62%), radial-gradient(480px 360px at 100% 100%, rgba(20,184,166,.16), transparent 62%), var(--color-bg-warm); } :root[data-theme="dark"] .page-hero{ background:var(--color-surface-dark); color:var(--color-on-dark); } :root[data-theme="dark"] .page-hero::before{ background: radial-gradient(520px 360px at 10% 0%, rgba(108,60,233,.13), transparent 62%), radial-gradient(480px 360px at 100% 100%, rgba(34,211,238,.08), transparent 62%), var(--color-surface-dark); } .page-hero .container{ position:relative; z-index:1; } .page-hero .hero-sub{ color:var(--color-text-secondary); } .page-hero h1{ color:var(--color-text); } .breadcrumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; font-size:var(--text-xs); font-weight:600; color:var(--color-text-secondary); margin-bottom:var(--space-5); } .breadcrumbs a{ color:var(--color-text-secondary); } .breadcrumbs a:hover{ color:var(--color-text); } .breadcrumbs span[aria-current]{ color:var(--color-text); } /* ---------- Cards (services, process, tools) ---------- */ .card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-6); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; } .card-icon{ width:52px;height:52px; border-radius:14px; display:flex;align-items:center;justify-content:center; margin-bottom:var(--space-4); flex-shrink:0; } .card h3{ font-size:var(--text-xl); margin-bottom:var(--space-2); } .card p{ color:var(--color-text-secondary); font-size:var(--text-sm); line-height:1.65; } /* ---------- Marquee ---------- */ .marquee-wrap{ border-block:1px solid var(--color-border); background:var(--color-bg-warm); overflow:hidden; padding-block:var(--space-5); } .marquee-track{ display:flex; width:max-content; gap:var(--space-7); animation: marquee-scroll 32s linear infinite; } .marquee-wrap:hover .marquee-track{ animation-play-state:paused; } .marquee-item{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); color:var(--color-text-secondary); white-space:nowrap; } .marquee-item .dot{ width:6px;height:6px;border-radius:50%;background:var(--color-coral); } /* ---------- Footer ---------- */ .site-footer{ background:var(--color-surface-dark); color:var(--color-on-dark-secondary); padding-top:var(--space-9); border-top:1px solid rgba(255,255,255,.08); box-shadow:0 -1px 0 rgba(255,255,255,.03); } .footer-grid{ display:grid; grid-template-columns:minmax(240px,340px) repeat(3,max-content); justify-content:space-between; gap:var(--space-7); padding-bottom:var(--space-8); max-width:none; width:100%; } .footer-brand p{ color:var(--color-on-dark-secondary); margin-block:var(--space-4); max-width:32ch; font-size:var(--text-sm); } .footer-brand .logo-word{ color:#fff; } .footer-social{ display:flex; gap:.6rem; } .footer-social a{ width:40px;height:40px; border-radius:50%; background:var(--glass-bg-strong); border:1px solid var(--glass-border); display:flex;align-items:center;justify-content:center; transition:background var(--dur-fast), transform var(--dur-fast); } .footer-social a:hover{ background:var(--color-whatsapp); border-color:transparent; transform:translateY(-3px); } .footer-social svg{ width:18px;height:18px; } .footer-col h3{ font-family:var(--font-display); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.12em; color:#8781A6; margin-bottom:var(--space-4); } .footer-col ul li{ margin-bottom:.7rem; } .footer-col a{ color:var(--color-on-dark-secondary); font-size:var(--text-sm); transition:color var(--dur-fast); } .footer-col a:hover{ color:#fff; } .footer-bottom{ border-top:1px solid var(--glass-border); padding-block:var(--space-5); display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:space-between; font-size:var(--text-xs); max-width:none; width:100%; color:#8781A6; } /* ---------- Forms ---------- */ .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); } .form-field{ display:flex; flex-direction:column; gap:.5rem; } .form-field.full{ grid-column:1 / -1; } .form-field label{ font-weight:700; font-size:var(--text-sm); } .form-field .required{ color:var(--color-coral); } .form-field input, .form-field select, .form-field textarea{ border:1.5px solid var(--color-border); border-radius:var(--radius-sm); padding:.85rem 1rem; font-size:var(--text-base); background:var(--color-surface); transition:border-color var(--dur-fast), box-shadow var(--dur-fast); width:100%; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--color-primary); box-shadow:0 0 0 4px var(--color-bg-blue); outline:none; } .form-field textarea{ resize:vertical; min-height:140px; } .form-hint{ font-size:var(--text-xs); color:var(--color-text-secondary); } /* ---------- Misc utility ---------- */ .tag{ display:inline-flex; align-items:center; font-size:var(--text-xs); font-weight:700; padding:.3rem .75rem; border-radius:var(--radius-pill); } .tag-blue{ background:var(--color-bg-blue); color:var(--color-primary); } .tag-green{ background:var(--color-bg-green); color:var(--color-green-dark); } .tag-coral{ background:var(--color-tag-coral-bg); color:var(--color-coral); } .tag-purple{ background:var(--color-tag-purple-bg); color:var(--color-purple); } .divider{ height:1px; background:var(--color-border); border:0; } .center-text{ text-align:center; } hr.section-rule{ border:0; height:1px; background:var(--color-border); margin-block:var(--space-8); } /* ========================================================================== Glass / mesh components (shared, used across hero + several panels) ========================================================================== */ .glass-panel{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-2xl); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%); box-shadow:0 24px 70px rgba(0,0,0,.35); } .chip{ display:inline-flex; align-items:center; gap:.5rem; background:var(--glass-bg-strong); border:1px solid var(--glass-border); color:var(--color-on-dark); font-size:var(--text-xs); font-weight:700; padding:.5rem .9rem; border-radius:var(--radius-pill); } .chip .chip-dot{ width:7px;height:7px;border-radius:50%; background:var(--color-green); flex-shrink:0; } /* ========================================================================== Homepage-specific & shared section components ========================================================================== */ /* ---------- Hero (home) ---------- */ .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-8); align-items:center; } .hero h1{ font-size:var(--text-6xl); margin-bottom:var(--space-5); color:var(--color-text); } .hero h1 em{ font-style:normal; } .hero-sub{ font-size:var(--text-lg); color:var(--color-text-secondary); max-width:50ch; margin-bottom:var(--space-6); } .hero-actions{ display:flex; gap:var(--space-4); margin-bottom:var(--space-5); flex-wrap:wrap; } /* Small credibility row under the hero CTAs, same idea as a competitor's "Free discovery call / Fixed-scope quotes / No hidden costs" line under their hero buttons — quick trust signals before the bigger stats row. */ .hero-trust{ display:flex; gap:var(--space-5); flex-wrap:wrap; margin-bottom:var(--space-7); } .hero-trust li{ display:flex; align-items:center; gap:.4rem; font-size:var(--text-sm); font-weight:600; color:var(--color-text-secondary); } .hero-trust svg{ width:16px; height:16px; color:var(--color-green-dark); flex-shrink:0; } .hero-stats{ display:grid; grid-template-columns:repeat(3,auto); gap:var(--space-6); } .hero-stat strong{ display:block; font-family:var(--font-display); font-size:var(--text-2xl); color:var(--color-text); } .hero-stat span{ font-size:var(--text-xs); color:var(--color-text-secondary); } .hero-visual{ position:relative; min-height:460px; transform-style:preserve-3d; perspective:1200px; } /* Mouse-parallax tilt, driven by --mx/--my custom properties main.js sets on .hero as the pointer moves (normalized -1..1). Applied to the whole visual rather than individual floating cards, since those already carry their own `drift` keyframe animation and a second transform source on the same element would just get overridden by the cascade. */ .hero-visual-inner{ /* Service accent, rewritten per rotation by hero-rotator.js. Declared here rather than on .ai-mock so the floating cards, which are siblings of the panel rather than children, pick it up as well. */ --svc-a:#F58B3D; --svc-b:#C2530A; --svc-d:#7C3006; --svc-l:#FDBA74; --svc-rgb:232,96,12; transition: transform .2s var(--ease-out); transform: rotateX(calc(var(--my, 0) * -5deg)) rotateY(calc(var(--mx, 0) * 7deg)); transform-style:preserve-3d; } /* AI assistant + site-preview mock (replaces the old SEO gauge/SERP browser mock). Deliberately always a dark "app preview" card, in both themes, rather than a translucent glass panel that inherits the page background — it reads as a screenshot mockup, not a themed page section, so it needs to stay legible whether it's floating over a light warm hero or a dark one. */ /* Per-service accent. hero-rotator.js overwrites these four custom properties on this element as the panel rotates, so the avatar, the reply bubble, the scene accents and the panel's own glow all retrace to whichever service is on screen. The values below are the defaults for the first service, so the no-JS render is still correct. --svc-b is the reply bubble's lightest stop and is kept dark enough for white body text in every service; --svc-a is only ever used behind icons and shapes, never behind text, so it can be much brighter. */ .ai-mock{ padding:1.5rem; max-width:440px; margin-inline:auto; position:relative; z-index:2; background: radial-gradient(360px 200px at 88% -12%, rgba(var(--svc-rgb), .22), transparent 68%), linear-gradient(165deg, rgba(29,25,64,.96), rgba(11,10,30,.98)); border-color:rgba(255,255,255,.14); } .ai-mock-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem; } .ai-mock-avatar{ width:38px;height:38px;border-radius:50%; background:linear-gradient(135deg, var(--svc-a), var(--svc-b)); display:flex;align-items:center;justify-content:center; flex-shrink:0; box-shadow:0 8px 20px rgba(var(--svc-rgb), .45); } .ai-mock-avatar svg{ width:19px;height:19px; color:#fff; } .ai-mock-head strong{ display:block; color:#fff; font-family:var(--font-display); font-size:var(--text-sm); } .ai-mock-head span{ display:flex; align-items:center; gap:.35rem; font-size:var(--text-xs); color:var(--color-on-dark-secondary); } .ai-mock-head .online-dot{ width:7px;height:7px;border-radius:50%; background:#34D399; flex-shrink:0; } .ai-mock-bubbles{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.1rem; } .ai-bubble{ border-radius:16px; padding:.75rem 1rem; font-size:.82rem; line-height:1.5; max-width:86%; } .ai-bubble.in{ background:var(--glass-bg-strong); border:1px solid var(--glass-border); color:var(--color-on-dark); border-bottom-left-radius:4px; } .ai-bubble.out{ background:linear-gradient(135deg, var(--svc-b), var(--svc-d)); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; } .ai-mock-site{ border-radius:14px; border:1px solid var(--glass-border); background:rgba(255,255,255,.04); overflow:hidden; } .ai-mock-site-bar{ display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border-bottom:1px solid var(--glass-border); } .ai-mock-site-bar span{ width:7px;height:7px;border-radius:50%; background:rgba(255,255,255,.25); } .ai-mock-site-bar .url{ margin-left:.4rem; font-size:.68rem; color:var(--color-on-dark-secondary); } /* A fixed min-height keeps the panel (and the floating cards positioned around it) from resizing as the scenes below swap between services. */ .ai-mock-site-body{ padding:.9rem; display:flex; flex-direction:column; gap:.5rem; min-height:132px; } .ai-mock-line{ height:8px; border-radius:5px; background:rgba(255,255,255,.12); } .ai-mock-line.w70{ width:70%; } .ai-mock-line.w50{ width:50%; } .ai-mock-line.w90{ width:90%; } .ai-mock-swatches{ display:flex; gap:.4rem; margin-top:.3rem; } .ai-mock-swatches span{ width:34px; height:34px; border-radius:8px; } /* ---------- Hero mock scenes (hero-rotator.js) ---------- Small abstract wireframes that swap with the conversation above, so the preview underneath matches what's being discussed: a cart and checkout for the ecommerce answer, a search result for SEO, a calendar for booking, and so on. Deliberately built from the same muted white-alpha shapes as the original mock so the panel keeps reading as one screenshot rather than nine different designs. */ .ms{ display:flex; flex-direction:column; gap:.45rem; flex:1; } .ms-row{ display:flex; align-items:center; gap:.4rem; } .ms-row.between{ justify-content:space-between; } .ms-row.grow > *{ flex:1; } .ms-bar{ height:8px; border-radius:5px; background:rgba(255,255,255,.12); } .ms-bar.dim{ background:rgba(255,255,255,.07); } .ms-txt{ font-size:.6rem; font-weight:600; color:var(--color-on-dark-secondary); white-space:nowrap; } .ms-txt.strong{ color:#fff; font-weight:700; } .ms-txt.accent{ color:var(--svc-l); font-weight:700; } /* chat widget (AI chatbot) */ .ms-chatbox{ margin-top:auto; display:flex; gap:.45rem; align-items:flex-start; background:rgba(255,255,255,.07); border:1px solid var(--glass-border); border-radius:10px; padding:.5rem; } .ms-avatar-sm{ width:20px;height:20px;border-radius:50%; flex-shrink:0; background:linear-gradient(135deg, var(--svc-a), var(--svc-b)); } .ms-chatbox .ms-chatlines{ display:flex; flex-direction:column; gap:.3rem; flex:1; padding-top:.2rem; min-width:0; } .ms-chatlines i{ display:block; height:6px; border-radius:4px; background:rgba(255,255,255,.16); } /* Chat widget sitting on a website (AI chatbot scene). Anchored bottom-RIGHT because the "Search Visibility" floating card covers the bottom-left of the panel — the old layout put the avatar right underneath it. */ .ms-widget{ margin-top:auto; margin-left:auto; display:flex; align-items:center; gap:.5rem; min-width:152px; background:linear-gradient(135deg, rgba(var(--svc-rgb), .3), rgba(255,255,255,.07)); border:1px solid rgba(255,255,255,.18); border-radius:11px; padding:.5rem .6rem; position:relative; box-shadow:0 10px 22px rgba(0,0,0,.3); } .ms-widget-av{ width:23px; height:23px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg, var(--svc-a), var(--svc-b)); box-shadow:0 4px 12px rgba(var(--svc-rgb), .5); } .ms-widget-body{ display:flex; flex-direction:column; gap:.35rem; flex:1; min-width:0; } .ms-widget-name{ display:block; height:5px; width:62%; border-radius:3px; background:rgba(255,255,255,.34); } .ms-widget .ms-typing{ align-self:flex-start; padding-bottom:0; } .ms-badge{ position:absolute; top:-7px; right:-7px; width:17px; height:17px; border-radius:50%; background:var(--color-coral); color:#fff; font-size:.5rem; font-weight:800; line-height:1; display:flex; align-items:center; justify-content:center; } /* Typing dots sit at the right end of the row on purpose: the bottom-left of the panel is covered by the "Search Visibility" floating card, so anything that needs to be seen has to stay out of that corner. */ .ms-typing{ display:flex; align-items:center; gap:5px; align-self:flex-end; flex-shrink:0; padding-bottom:.1rem; } .ms-typing i{ width:7px; height:7px; border-radius:50%; background:var(--svc-l); box-shadow:0 0 8px rgba(var(--svc-rgb), .8); } /* map + rating (Google Business Profile) */ .ms-map{ flex:1; min-height:56px; border-radius:8px; position:relative; background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/100% 14px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/18px 100%, rgba(34,211,238,.08); border:1px solid var(--glass-border); } .ms-pin{ position:absolute; top:44%; left:46%; width:11px; height:11px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--svc-a); box-shadow:0 0 0 4px rgba(var(--svc-rgb), .3); } .ms-stars{ font-size:.6rem; color:#FBBF24; letter-spacing:.06em; } /* call waveform (AI voice agent). Explicit height, not min-height: the bars size themselves with a percentage, which only resolves against a parent with a definite height — under flex:1/min-height they collapsed to nothing. */ /* AI on the left, waveform in the middle, the human caller on the right - the call visually flows between the two speakers rather than just showing an audio level. Chunkier pill-shaped bars than a normal waveform, matching a solid audio-icon look rather than a thin one. */ .ms-call-row{ display:flex; align-items:center; gap:.5rem; height:46px; } .ms-caller{ width:25px; height:25px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .ms-caller svg{ width:14px; height:14px; } .ms-caller.bot{ background:linear-gradient(135deg, var(--svc-a), var(--svc-b)); color:#fff; box-shadow:0 4px 10px rgba(var(--svc-rgb),.45); } .ms-caller.human{ background:rgba(255,255,255,.14); color:var(--color-on-dark); border:1px solid rgba(255,255,255,.2); } .ms-wave{ display:flex; align-items:center; justify-content:space-between; gap:2.5px; flex:1; height:100%; } .ms-wave i{ flex:1; min-width:3px; min-height:4px; border-radius:3px; background:linear-gradient(180deg, var(--svc-a), var(--svc-b)); } .ms-callbtn{ width:22px;height:22px;border-radius:50%; flex-shrink:0; } .ms-callbtn.end{ background:rgba(239,68,68,.85); } .ms-callbtn.on{ background:rgba(52,211,153,.85); } /* wireframe columns (website build) */ .ms-col{ height:34px; border-radius:6px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.06); } /* swatches pushed right, clear of the floating card in the bottom-left */ .ms-row.to-right{ justify-content:flex-end; } /* build progress bar (website scene) */ .ms-progress{ display:block; flex:1; max-width:120px; height:6px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; } .ms-progress i{ display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg, var(--svc-a), var(--svc-l)); } /* file view (llms.txt) */ .ms-code{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; gap:.3rem; } .ms-code span{ font-size:.58rem; line-height:1.5; color:var(--color-on-dark-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ms-code span b{ color:var(--svc-l); font-weight:700; } .ms-code span.on{ color:#fff; } /* products + cart + checkout (ecommerce) */ .ms-prod{ height:38px; border-radius:7px; border:1px solid rgba(255,255,255,.08); } .ms-prod:nth-child(1){ background:linear-gradient(140deg, rgba(155,107,243,.35), rgba(155,107,243,.12)); } .ms-prod:nth-child(2){ background:linear-gradient(140deg, rgba(34,211,238,.32), rgba(34,211,238,.1)); } .ms-prod:nth-child(3){ background:linear-gradient(140deg, rgba(244,114,182,.32), rgba(244,114,182,.1)); } .ms-cta{ margin-top:auto; text-align:center; border-radius:7px; padding:.4rem; font-size:.6rem; font-weight:700; color:#fff; background:linear-gradient(135deg, var(--svc-b), var(--svc-d)); } /* search result (SEO) */ .ms-serp{ display:flex; flex-direction:column; gap:.25rem; } .ms-serp .u{ font-size:.56rem; color:#5EEAD4; } .ms-serp .t{ font-size:.66rem; font-weight:700; color:#93C5FD; } .ms-chip{ font-size:.55rem; font-weight:800; padding:.12rem .4rem; border-radius:999px; background:rgba(52,211,153,.18); color:#6EE7B7; } /* node flow (automation) */ .ms-flow{ display:flex; align-items:center; gap:0; flex:1; min-height:42px; } .ms-node{ width:26px;height:26px;border-radius:7px; flex-shrink:0; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); } .ms-node.accent{ background:linear-gradient(135deg, var(--svc-a), var(--svc-b)); border-color:transparent; } /* position:relative + overflow so the travelling data dot (animations.css) is clipped to the wire it runs along */ .ms-link{ flex:1; height:2px; background:rgba(255,255,255,.14); position:relative; overflow:hidden; } /* calendar + slots (booking) */ .ms-cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; flex:1; } .ms-cal i{ border-radius:2px; background:rgba(255,255,255,.08); min-height:7px; } .ms-cal i.on{ background:var(--svc-a); } .ms-slot{ font-size:.55rem; font-weight:700; padding:.2rem .4rem; border-radius:5px; color:var(--color-on-dark-secondary); background:rgba(255,255,255,.07); } .ms-slot.on{ background:rgba(var(--svc-rgb), .34); color:#fff; } .floating-card{ position:absolute; background:linear-gradient(165deg, rgba(29,25,64,.96), rgba(11,10,30,.98)); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:var(--radius-md); box-shadow:0 20px 45px rgba(0,0,0,.35); padding:.8rem 1.1rem; display:flex; align-items:center; gap:.65rem; font-size:var(--text-xs); font-weight:700; color:var(--color-on-dark); z-index:3; } /* The card itself keeps the drift/float animation, so the rotating hero content sits in this inner wrapper instead — an entrance transform on .floating-card would be overwritten by the drift keyframe on every frame. It carries the flex row so the card looks identical to before the split. */ .floating-card .fc-inner{ display:flex; align-items:center; gap:.65rem; } .floating-card .fc-icon{ width:34px;height:34px;border-radius:10px; display:flex;align-items:center;justify-content:center; flex-shrink:0; } .floating-card svg{ width:17px;height:17px; } /* Beats the .icon-* tone classes on specificity, so both cards track the service colour instead of staying on a fixed palette. */ .floating-card .fc-icon{ background:rgba(var(--svc-rgb), .2); color:var(--svc-l); } .rank-card{ top:0; right:-2%; } .keyword-card{ bottom:4%; left:-8%; } /* ---------- Skills marquee already in base; icons in marquee ---------- */ .marquee-item svg{ width:18px;height:18px; color:var(--color-primary); flex-shrink:0; } /* ---------- About (home) ---------- */ .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); align-items:center; } .about-copy p{ color:var(--color-text-secondary); margin-bottom:var(--space-4); max-width:54ch; } .about-points{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-5); } .about-point{ display:flex; gap:.7rem; align-items:flex-start; font-weight:700; font-size:var(--text-sm); } .about-point svg{ width:20px;height:20px; color:var(--color-green-dark); flex-shrink:0; margin-top:.1rem; } .about-visual{ position:relative; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:var(--space-6); display:grid; grid-template-columns:1fr 1fr; gap:0; } .about-col{ padding:var(--space-4); } .about-col + .about-col{ border-left:1px solid var(--color-border); } .about-col-label{ font-family:var(--font-display); font-weight:800; font-size:var(--text-sm); margin-bottom:var(--space-3); display:flex; align-items:center; gap:.5rem; } .about-col-label .dot{ width:8px;height:8px;border-radius:50%; } .about-col ul li{ font-size:var(--text-sm); color:var(--color-text-secondary); padding-block:.4rem; border-bottom:1px solid var(--color-border); } .about-col ul li:last-child{ border-bottom:0; } /* ---------- Services preview / grid ---------- */ .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); } .card-icon svg{ width:24px;height:24px; } .icon-blue{ background:var(--color-bg-blue); color:var(--color-primary); } .icon-green{ background:var(--color-bg-green); color:var(--color-green-dark); } .icon-coral{ background:var(--color-tag-coral-bg); color:var(--color-coral); } .icon-purple{ background:var(--color-tag-purple-bg); color:var(--color-purple); } .card-link{ display:inline-flex; align-items:center; gap:.35rem; margin-top:var(--space-4); font-size:var(--text-sm); font-weight:700; color:var(--color-primary); } .card-link svg{ width:15px;height:15px; transition:transform var(--dur-fast) var(--ease-out); } .card:hover .card-link svg{ transform:translateX(4px); } /* ---------- Portfolio preview / grid ---------- */ .portfolio-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-6); } .portfolio-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; } .portfolio-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,var(--color-bg-blue),var(--color-bg-green)); } .portfolio-media .site-frame{ position:absolute; inset:14px 14px 0 14px; background:var(--color-surface); border-radius:10px 10px 0 0; box-shadow:0 10px 30px rgba(21,19,43,.14); overflow:hidden; } .site-frame-bar{ display:flex; gap:.3rem; padding:.5rem .65rem; border-bottom:1px solid var(--color-border); } .site-frame-bar span{ width:6px;height:6px;border-radius:50%; background:var(--color-border); } .site-frame-body{ padding:.7rem; display:flex; flex-direction:column; gap:.4rem; } .site-frame-body .line{ height:7px; border-radius:4px; background:var(--color-bg-warm); } .site-frame-body .line.w60{ width:60%; } .site-frame-body .line.w80{ width:80%; } .site-frame-body .line.w40{ width:40%; } .site-frame-body.shot{ padding:0; flex:1; min-height:0; } .site-frame-body.shot img, .site-frame-body.shot video{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; } .portfolio-body{ padding:var(--space-5); display:flex; flex-direction:column; gap:.6rem; flex:1; } .portfolio-tags{ display:flex; gap:.4rem; flex-wrap:wrap; } .portfolio-body h3{ font-size:var(--text-xl); } .portfolio-body p{ color:var(--color-text-secondary); font-size:var(--text-sm); } .portfolio-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:var(--space-3); border-top:1px solid var(--color-border); } .portfolio-foot a{ font-size:var(--text-sm); font-weight:700; color:var(--color-primary); display:inline-flex; align-items:center; gap:.3rem; } .portfolio-foot a svg{ width:14px;height:14px; } /* Compact "image not in yet" state for a portfolio-media slot, used by projects whose screenshot/gif hasn't been added to assets/ yet. */ .media-pending{ display:flex; align-items:center; justify-content:center; padding:var(--space-5); text-align:center; } .media-pending-inner{ display:flex; flex-direction:column; align-items:center; gap:.6rem; color:var(--color-text-secondary); } .media-pending-inner svg{ width:30px; height:30px; opacity:.6; } .media-pending-inner span{ font-size:var(--text-xs); font-weight:600; max-width:22ch; } /* ---------- Portfolio slider (homepage) ---------- A native horizontal-scroll + scroll-snap carousel — no dependency, works with touch/trackpad swipe and keyboard out of the box. slider.js adds autoplay, arrow/dot controls and drag-to-scroll on top. */ .portfolio-slider-wrap{ position:relative; } .portfolio-slider{ display:flex; gap:var(--space-6); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:.25rem .25rem var(--space-4); margin:-.25rem -.25rem 0; -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab; } .portfolio-slider.dragging{ scroll-behavior:auto; cursor:grabbing; scroll-snap-type:none; } .portfolio-slider::-webkit-scrollbar{ display:none; } .portfolio-slider .portfolio-card{ flex:0 0 auto; width:340px; scroll-snap-align:start; } .slider-controls{ display:flex; align-items:center; justify-content:center; gap:var(--space-4); margin-top:var(--space-6); } .slider-arrow{ flex-shrink:0; width:44px;height:44px; border-radius:50%; border:1.5px solid var(--color-border); background:var(--color-surface); color:var(--color-text); display:flex;align-items:center;justify-content:center; transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), color var(--dur-fast); } .slider-arrow svg{ width:18px;height:18px; } .slider-arrow:hover{ border-color:var(--color-primary); color:var(--color-primary); transform:translateY(-2px); } .slider-dots{ display:flex; align-items:center; gap:.5rem; } .slider-dot{ width:8px;height:8px;border-radius:50%; background:var(--color-border); transition:background var(--dur-base), transform var(--dur-base), width var(--dur-base); } .slider-dot.active{ background:var(--color-primary); width:22px; border-radius:var(--radius-pill); } /* Portfolio teaser card (links out to the AI Portfolio / full portfolio) */ .portfolio-teaser{ background:linear-gradient(150deg, var(--color-surface-dark), var(--color-surface-dark-2)); color:#fff; border-radius:var(--radius-lg); padding:var(--space-6); display:flex; flex-direction:column; justify-content:center; gap:var(--space-3); position:relative; overflow:hidden; } .portfolio-teaser::before{ content:''; position:absolute; inset:0; background:radial-gradient(320px 240px at 100% 0%, rgba(34,211,238,.35), transparent 70%); } .portfolio-teaser > *{ position:relative; z-index:1; } .portfolio-teaser h3{ color:#fff; font-size:var(--text-xl); } .portfolio-teaser p{ color:var(--color-on-dark-secondary); font-size:var(--text-sm); } /* ---------- Process ---------- */ .process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); position:relative; } .process-step{ position:relative; padding-top:var(--space-2); } .process-step-top{ display:flex; align-items:center; gap:.65rem; margin-bottom:var(--space-4); } .process-num{ width:48px;height:48px; border-radius:50%; border:2px solid var(--color-primary); color:var(--color-primary); display:flex;align-items:center;justify-content:center; font-family:var(--font-display); font-weight:800; flex-shrink:0; } .process-icon{ width:36px;height:36px;border-radius:10px; background:var(--color-bg-warm); display:flex;align-items:center;justify-content:center; flex-shrink:0; } .process-icon svg{ width:18px;height:18px; color:var(--color-text-secondary); } .process-step h3{ font-size:var(--text-lg); margin-bottom:var(--space-2); } .process-step p{ font-size:var(--text-sm); color:var(--color-text-secondary); } /* ---------- Why work with us ---------- */ .why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); } .why-grid.category-grid{ grid-template-columns:repeat(3,1fr); } .why-item{ display:flex; gap:var(--space-4); padding:var(--space-5); border-radius:var(--radius-lg); } .why-item .card-icon{ margin-bottom:0; } .why-item h3{ font-size:var(--text-lg); margin-bottom:.35rem; } .why-item p{ font-size:var(--text-sm); color:var(--color-text-secondary); } /* ---------- Tools & Platforms ---------- */ .tools-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:var(--space-4); } .tool-chip{ display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center; padding:var(--space-4) var(--space-2); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); } .tool-chip .tool-icon{ width:40px;height:40px; border-radius:10px; background:var(--color-bg-warm); display:flex;align-items:center;justify-content:center; } .tool-chip .tool-icon svg{ width:20px;height:20px; color:var(--color-primary); } .tool-chip span{ font-size:.74rem; font-weight:700; line-height:1.3; } /* ---------- FAQ (native
/, no JS) ---------- */ .faq-list{ max-width:800px; margin-inline:auto; display:flex; flex-direction:column; gap:var(--space-4); } .faq-item{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6); } .faq-item summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary .faq-icon{ width:28px; height:28px; border-radius:50%; flex-shrink:0; background:var(--color-bg-blue); color:var(--color-primary); display:flex; align-items:center; justify-content:center; transition:transform var(--dur-base) var(--ease-out); } .faq-item[open] summary .faq-icon{ transform:rotate(45deg); } .faq-item p{ color:var(--color-text-secondary); margin-top:var(--space-3); line-height:1.7; } /* ---------- Final CTA ---------- */ .final-cta{ background:linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-dark) 55%, var(--color-coral) 130%); border-radius:var(--radius-xl); padding:var(--space-8) var(--space-7); color:#fff; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); } .final-cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); position:relative; z-index:2; } .final-cta h2{ color:#fff; font-size:var(--text-3xl); margin-bottom:var(--space-2); } .final-cta p{ color:rgba(255,255,255,.85); max-width:46ch; } .final-cta .btn-secondary{ background:#fff; color:#221A12; border:0; } .final-cta .btn-whatsapp{ box-shadow:none; } .final-cta-actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; } /* ========================================================================== Services page components ========================================================================== */ .intro-block{ max-width:760px; } .intro-block p{ color:var(--color-text-secondary); font-size:var(--text-lg); line-height:1.7; } .quote-callout{ display:flex; align-items:center; gap:var(--space-6); background:linear-gradient(120deg, var(--color-bg-warm), var(--color-bg-green)); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-6) var(--space-7); margin-bottom:var(--space-8); } .quote-callout-icon{ width:60px;height:60px;border-radius:var(--radius-md); background:var(--color-surface); border:1px solid var(--color-border); display:flex;align-items:center;justify-content:center; flex-shrink:0; box-shadow:var(--shadow-sm); } .quote-callout-icon svg{ width:28px;height:28px; color:var(--color-primary); } .quote-callout-body{ flex:1; } .quote-callout-body h2{ font-size:var(--text-xl); margin-bottom:.3rem; } .quote-callout-body p{ color:var(--color-text-secondary); font-size:var(--text-sm); max-width:60ch; } .quote-callout-actions{ flex-shrink:0; } .services-detail-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); align-items:center; padding-block:var(--space-8); } .services-detail-row + .services-detail-row{ border-top:1px solid var(--color-border); } .services-detail-row.reverse .service-copy{ order:2; } .services-detail-row.reverse .service-visual{ order:1; } .service-copy .eyebrow{ margin-bottom:var(--space-3); } .service-copy h2{ font-size:var(--text-3xl); margin-bottom:var(--space-3); scroll-margin-top:110px; } .service-copy > p{ color:var(--color-text-secondary); margin-bottom:var(--space-4); max-width:52ch; } .service-best-for{ margin-top:var(--space-5); padding:var(--space-4) var(--space-5); border-radius:var(--radius-md); background:var(--color-bg-warm); border:1px solid var(--color-border); font-size:var(--text-sm); } .service-best-for strong{ display:block; margin-bottom:.25rem; font-family:var(--font-display); } .service-panel{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-6); box-shadow:var(--shadow-lg); position:relative; z-index:2; transition: transform var(--dur-base) var(--ease-out); } .service-panel:hover{ transform:translateY(-4px); } .service-panel-header{ display:flex; align-items:center; gap:.85rem; margin-bottom:var(--space-5); padding-bottom:var(--space-4); border-bottom:1px solid var(--color-border); } .service-panel-header h3{ font-size:var(--text-lg); } .service-panel-header span{ display:block; font-size:var(--text-xs); color:var(--color-text-secondary); font-weight:600; } .service-checklist li{ display:flex; gap:.65rem; align-items:flex-start; padding-block:.6rem; border-bottom:1px dashed var(--color-border); font-size:var(--text-sm); color:var(--color-text-secondary); } .service-checklist li:last-child{ border-bottom:0; padding-bottom:0; } .service-checklist li:first-child{ padding-top:0; } .service-checklist svg{ width:18px;height:18px; color:var(--color-green-dark); flex-shrink:0; margin-top:.15rem; } /* ---------- Synergy / comparison section ---------- */ .synergy-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); } .synergy-card{ padding:var(--space-6); border-radius:var(--radius-lg); } .synergy-card h3{ font-size:var(--text-xl); margin-bottom:var(--space-2); } .synergy-card p{ color:var(--color-text-secondary); font-size:var(--text-sm); } .synergy-link-icon{ width:44px;height:44px;border-radius:12px; display:flex;align-items:center;justify-content:center; margin-bottom:var(--space-4); } /* ========================================================================== Portfolio detail page components (SEO projects, website projects, AI portfolio) ========================================================================== */ .project-block{ padding-block:var(--space-8); } .project-block + .project-block{ border-top:1px solid var(--color-border); } .project-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-5); flex-wrap:wrap; margin-bottom:var(--space-5); } .project-head h2{ font-size:var(--text-3xl); margin-block:.5rem .35rem; scroll-margin-top:110px; } .project-industry{ color:var(--color-text-secondary); font-size:var(--text-sm); font-weight:600; } .project-overview{ font-size:var(--text-lg); color:var(--color-text-secondary); max-width:78ch; margin-bottom:var(--space-6); line-height:1.7; } .project-shot{ border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); margin-bottom:var(--space-6); background:var(--color-surface); } .project-shot .site-frame-bar{ border-bottom:1px solid var(--color-border); background:var(--color-bg-warm); } .project-shot img{ display:block; width:100%; height:auto; max-height:420px; object-fit:cover; object-position:top center; } .project-shot video{ display:block; width:100%; height:auto; max-height:420px; } .project-meta-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); } .project-meta-item{ /* Grid items default to min-width:auto, so a long unwrapped h3 label (uppercase, letter-spaced) keeps this at its content width instead of shrinking to the 1fr track — the classic grid-overflow trap. */ min-width:0; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-5); } .project-meta-item h3{ font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--color-primary); margin-bottom:var(--space-2); display:flex; align-items:center; gap:.4rem; } .project-meta-item p{ font-size:var(--text-sm); color:var(--color-text-secondary); line-height:1.65; } .project-toc{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:var(--space-7); } .project-toc a{ font-size:var(--text-sm); font-weight:700; padding:.55rem 1.1rem; border-radius:var(--radius-pill); background:var(--color-bg-blue); color:var(--color-primary); } .project-toc a:hover{ background:var(--color-primary); color:#fff; } .placeholder-note{ display:flex; gap:.7rem; align-items:flex-start; background:var(--color-bg-warm); border:1px dashed var(--color-primary); border-radius:var(--radius-md); padding:var(--space-4) var(--space-5); margin-bottom:var(--space-6); font-size:var(--text-sm); color:var(--color-text-secondary); } .placeholder-note svg{ width:20px;height:20px; color:var(--color-primary); flex-shrink:0; margin-top:.1rem; } .placeholder-note strong{ color:var(--color-text); } /* ---------- Website / AI project (single, richer layout) ---------- */ .web-project-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-8); align-items:start; } .web-project-points{ display:flex; flex-direction:column; gap:var(--space-5); margin-top:var(--space-6); } .web-project-point{ display:flex; gap:var(--space-4); } .web-project-point .num{ width:34px;height:34px;border-radius:10px; background:var(--color-bg-green); color:var(--color-green-dark); display:flex;align-items:center;justify-content:center; font-family:var(--font-display); font-weight:800; flex-shrink:0; } .web-project-point h3{ font-size:var(--text-base); margin-bottom:.2rem; } .web-project-point p{ font-size:var(--text-sm); color:var(--color-text-secondary); } .device-stack{ position:relative; max-width:440px; margin-inline:auto; } .device-frame{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; } .device-frame.tablet{ max-width:420px; margin-inline:auto; } .device-frame.tablet img, .device-frame.tablet video{ display:block; width:100%; height:auto; } /* Small browser chrome bar, used on the device-frame preview */ .browser-bar{ display:flex; align-items:center; gap:.4rem; padding:.7rem .9rem; border-bottom:1px solid var(--color-border); background:var(--color-bg-warm); } .browser-bar .dot{ width:9px;height:9px;border-radius:50%; flex-shrink:0; } .browser-bar .dot.red{ background:#FF6259; } .browser-bar .dot.yellow{ background:#FFC02E; } .browser-bar .dot.green{ background:#28C940; } .browser-url{ margin-left:.6rem; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-pill); padding:.3rem .9rem; font-size:.7rem; color:var(--color-text-secondary); flex:1; } /* ========================================================================== Contact page components ========================================================================== */ .contact-grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:var(--space-8); align-items:start; } .contact-form-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-7); box-shadow:var(--shadow-lg); } .contact-form-card h2{ font-size:var(--text-2xl); margin-bottom:var(--space-2); } .contact-form-card > p{ color:var(--color-text-secondary); margin-bottom:var(--space-6); } .contact-side{ display:flex; flex-direction:column; gap:var(--space-5); } .contact-info-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-6); } .contact-info-card h3{ font-size:var(--text-lg); margin-bottom:var(--space-4); } .contact-info-row{ display:flex; align-items:center; gap:.85rem; padding-block:.75rem; border-bottom:1px solid var(--color-border); } .contact-info-row:last-child{ border-bottom:0; padding-bottom:0; } .contact-info-row:first-child{ padding-top:0; } .contact-info-row .ci-icon{ width:42px;height:42px;border-radius:12px; display:flex;align-items:center;justify-content:center; flex-shrink:0; } .contact-info-row strong{ display:block; font-size:var(--text-sm); } .contact-info-row span{ font-size:var(--text-xs); color:var(--color-text-secondary); } .contact-steps li{ display:flex; gap:.75rem; padding-block:.6rem; font-size:var(--text-sm); color:var(--color-text-secondary); } .contact-steps .step-num{ width:24px;height:24px;border-radius:50%; background:var(--color-bg-blue); color:var(--color-primary); font-family:var(--font-display); font-weight:800; font-size:.75rem; display:flex;align-items:center;justify-content:center; flex-shrink:0; } /* ---------- 404 page ---------- */ .error-page{ text-align:center; padding-block:var(--space-10); } .error-code{ font-family:var(--font-display); font-weight:800; font-size:8rem; line-height:1; background:linear-gradient(120deg, var(--color-primary), var(--color-coral)); -webkit-background-clip:text; background-clip:text; color:transparent; } .error-page h1{ font-size:var(--text-3xl); margin-top:var(--space-4); margin-bottom:var(--space-3); } .error-page p{ color:var(--color-text-secondary); max-width:46ch; margin-inline:auto; margin-bottom:var(--space-6); } .error-actions{ display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; margin-bottom:var(--space-7); } .error-links{ display:flex; gap:var(--space-5); justify-content:center; flex-wrap:wrap; } .error-links a{ font-weight:700; font-size:var(--text-sm); color:var(--color-primary); } .error-links a:hover{ text-decoration:underline; } /* ========================================================================== Long-form article prose (blog posts, landing-page copy) ========================================================================== */ .article-meta{ display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-sm); color:var(--color-on-dark-secondary); flex-wrap:wrap; } .article-meta .dot-sep{ width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.6; } .article-prose{ max-width:70ch; margin-inline:auto; } .article-prose > * + *{ margin-top:var(--space-5); } .article-prose h2{ font-size:var(--text-2xl); margin-top:var(--space-8); } .article-prose h3{ font-size:var(--text-xl); margin-top:var(--space-6); } .article-prose p{ color:var(--color-text-secondary); font-size:var(--text-lg); line-height:1.75; } .article-prose ul, .article-prose ol{ padding-left:1.3em; color:var(--color-text-secondary); font-size:var(--text-lg); line-height:1.75; } .article-prose ul{ list-style:disc; } .article-prose ol{ list-style:decimal; } .article-prose li + li{ margin-top:.5rem; } .article-prose a{ color:var(--color-primary); text-decoration:underline; text-underline-offset:.2em; } .article-prose a:hover{ color:var(--color-primary-dark); } .article-prose strong{ color:var(--color-text); } .article-prose .lede{ font-size:var(--text-xl); color:var(--color-text); line-height:1.6; } .article-prose table{ font-size:var(--text-sm); } .article-prose th, .article-prose td{ text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--color-border); } .article-prose th{ font-family:var(--font-display); font-weight:700; color:var(--color-text); } .article-table-wrap{ max-width:70ch; margin-inline:auto; overflow-x:auto; } .article-cta-inline{ border:1.5px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); background:var(--color-bg-warm); } .article-cta-inline p{ margin-bottom:var(--space-3); } .article-image{ margin-block:var(--space-6); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--color-border); background:var(--color-surface); box-shadow:var(--shadow-sm); } .article-image img{ width:100%; height:auto; display:block; object-fit:cover; } .article-image figcaption{ padding:var(--space-3) var(--space-4); font-size:var(--text-sm); color:var(--color-text-secondary); border-top:1px solid var(--color-border); background:var(--color-bg-warm); line-height:1.5; text-align:center; }