/* ============================================================================ Agentpesa — shared design tokens + theming Single source of truth for every page. Dark is the default; light is opt-in via data-theme="light" on . Never hardcode a surface or text colour in a page stylesheet — add a token here so both themes stay in step. ========================================================================== */ :root{ /* --- surfaces --- */ --ink:#07060F; --ink-2:#0C0B1A; --surface:#110F22; /* --- brand --- */ --brand:#7B3FE4; --brand-light:#9D6BF0; --secondary:#FF4FD8; --glow:#9D5FF0; --violet:#C9B0FF; --green:#3FD08A; --gold:#E6B765; /* --- text --- */ --text:#F6F5FF; --text-dim:rgba(246,245,255,0.62); --text-faint:rgba(246,245,255,0.40); --text-ghost:rgba(246,245,255,0.20); /* --- glass primitive --- */ --glass:rgba(255,255,255,0.045); --glass-strong:rgba(255,255,255,0.07); --glass-soft:rgba(255,255,255,0.04); --glass-hover:rgba(255,255,255,0.07); --glass-border:rgba(255,255,255,0.10); --glass-border-lit:rgba(201,176,255,0.40); --glass-sheen:rgba(255,255,255,0.08); /* --- chrome --- */ --nav-bg:rgba(10,9,22,0.72); --grad-a:#fff; /* opening stop of gradient headings */ --on-brand:#fff; /* text sitting on a brand gradient */ --store-bg:#fff; /* app-store badge */ --store-ink:#0b0a16; --shadow-lift:rgba(0,0,0,0.35); --orb-opacity:.55; --grain-opacity:.05; --spot-alpha:0.10; /* --- type --- */ --display:'Space Grotesk',sans-serif; --body:'Inter',sans-serif; --mono:'JetBrains Mono',monospace; --maxw:1140px; color-scheme:dark; } :root[data-theme="light"]{ --ink:#FAF9FD; --ink-2:#F2F0F9; --surface:#FFFFFF; --brand:#6D2FD6; --brand-light:#8B52E8; --secondary:#D82BB4; --glow:#8B52E8; --violet:#6B31C4; --green:#12844F; --gold:#8A6410; --text:#15121F; --text-dim:rgba(21,18,31,0.70); --text-faint:rgba(21,18,31,0.54); --text-ghost:rgba(21,18,31,0.36); --glass:rgba(21,18,31,0.030); --glass-strong:rgba(21,18,31,0.058); --glass-soft:rgba(21,18,31,0.026); --glass-hover:rgba(21,18,31,0.055); --glass-border:rgba(21,18,31,0.11); --glass-border-lit:rgba(109,47,214,0.40); --glass-sheen:rgba(255,255,255,0.70); --nav-bg:rgba(250,249,253,0.80); --grad-a:#15121F; --on-brand:#fff; --store-bg:#15121F; --store-ink:#fff; --shadow-lift:rgba(21,18,31,0.16); --orb-opacity:.30; --grain-opacity:.03; --spot-alpha:0.07; color-scheme:light; } /* Orbs are painted for a dark ground; soften them on light so they read as tint rather than smudge. */ :root[data-theme="light"] .orb-a{background:radial-gradient(circle,#B98BFF 0%,transparent 70%)} :root[data-theme="light"] .orb-b{background:radial-gradient(circle,#F5A3E6 0%,transparent 70%);opacity:.26} :root[data-theme="light"] .orb-c{background:radial-gradient(circle,#C9D6FF 0%,transparent 70%);opacity:.30} :root[data-theme="light"] .grain{mix-blend-mode:multiply} /* ============ THEME TOGGLE ============ */ .theme-toggle{ flex-shrink:0; width:38px;height:38px; display:inline-flex;align-items:center;justify-content:center; border-radius:11px; border:1px solid var(--glass-border); background:var(--glass); color:var(--text-dim); cursor:pointer; transition:color .25s,border-color .25s,background .25s,transform .25s; -webkit-tap-highlight-color:transparent; } .theme-toggle:hover{color:var(--text);border-color:var(--glass-border-lit);background:var(--glass-hover);transform:translateY(-1px)} .theme-toggle:focus-visible{outline:2px solid var(--violet);outline-offset:2px} .theme-toggle svg{width:17px;height:17px;display:block} /* one icon per theme — the other is folded away */ .theme-toggle .ic-moon{display:none} :root[data-theme="light"] .theme-toggle .ic-moon{display:block} :root[data-theme="light"] .theme-toggle .ic-sun{display:none} /* Nav sits in a row; keep the toggle beside the CTA on every page. */ .nav-end{display:flex;align-items:center;gap:12px} @media(max-width:560px){ .theme-toggle{width:36px;height:36px} .nav-end{gap:8px} /* the CTA overflowed small phones even before the toggle went in */ .nav-in .btn-primary{padding:11px 15px;font-size:13px;white-space:nowrap} .nav-in .logo img{height:30px} } @media(max-width:360px){ .nav-in .btn-primary{padding:10px 12px;font-size:12px} } /* Colour transitions on a theme flip, but never on first paint and never for people who asked for less motion. */ :root.theme-ready body, :root.theme-ready body *:not(.orb):not(.cur-ring):not(.cur-dot){ transition:background-color .28s ease, border-color .28s ease, color .28s ease; } @media(prefers-reduced-motion:reduce){ :root.theme-ready body, :root.theme-ready body *{transition:none!important} } /* The wordmark is white artwork — swap to the full-colour logo on light. URLs here resolve against this stylesheet, so one rule covers every depth. */ :root[data-theme="light"] .logo img, :root[data-theme="light"] .flogo img, :root[data-theme="light"] .foot-logo img{ content:url("../images/logo-inline-e.png"); } /* ============ MOBILE MENU ============ */ /* The burger only exists below the desktop breakpoint. Normalised here so every page flips at the same width (contact.html used to break at 900). */ .nav-burger{ display:none; flex-shrink:0; width:38px;height:38px; align-items:center;justify-content:center; border-radius:11px; border:1px solid var(--glass-border); background:var(--glass); color:var(--text); cursor:pointer; transition:color .25s,border-color .25s,background .25s; -webkit-tap-highlight-color:transparent; } .nav-burger:hover{border-color:var(--glass-border-lit);background:var(--glass-hover)} .nav-burger:focus-visible{outline:2px solid var(--violet);outline-offset:2px} .burger-box{position:relative;width:17px;height:12px} .burger-box i{ position:absolute;left:0;width:100%;height:1.8px;border-radius:2px; background:currentColor; transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .2s; } .burger-box i:nth-child(1){top:0} .burger-box i:nth-child(2){top:5.1px} .burger-box i:nth-child(3){top:10.2px} .nav-burger[aria-expanded="true"] .burger-box i:nth-child(1){transform:translateY(5.1px) rotate(45deg)} .nav-burger[aria-expanded="true"] .burger-box i:nth-child(2){opacity:0} .nav-burger[aria-expanded="true"] .burger-box i:nth-child(3){transform:translateY(-5.1px) rotate(-45deg)} /* panel drops from under the fixed header */ .nav-drawer{ position:fixed;left:0;right:0;top:72px;bottom:0; z-index:199; display:flex;flex-direction:column; padding:22px clamp(20px,5vw,48px) calc(28px + env(safe-area-inset-bottom)); background:var(--nav-bg); backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); border-top:1px solid var(--glass-border); overflow-y:auto;overscroll-behavior:contain; opacity:0;visibility:hidden;transform:translateY(-10px); transition:opacity .28s ease,transform .32s cubic-bezier(.16,1,.3,1),visibility .28s; } .nav-drawer.open{opacity:1;visibility:visible;transform:none} .nav-drawer ul{list-style:none;margin:0;padding:0} .nav-drawer li{border-bottom:1px solid var(--glass-border)} .nav-drawer a{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:17px 2px; font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.3px; color:var(--text-dim);text-decoration:none; transition:color .2s,padding-left .2s; } .nav-drawer a:hover,.nav-drawer a:focus-visible{color:var(--text);padding-left:8px} .nav-drawer a.active{color:var(--violet)} .nav-drawer a::after{ content:"";width:7px;height:7px;flex-shrink:0; border-right:1.8px solid currentColor;border-top:1.8px solid currentColor; transform:rotate(45deg);opacity:.45; } .nav-drawer .drawer-cta{margin-top:26px;display:block} .nav-drawer .drawer-cta a{ justify-content:center;padding:16px;border-radius:14px; background:linear-gradient(135deg,var(--brand),var(--secondary)); color:var(--on-brand);font-size:16px; box-shadow:0 10px 30px rgba(123,63,228,0.38); } .nav-drawer .drawer-cta a::after{display:none} .nav-drawer .drawer-cta a:hover{padding-left:16px;color:var(--on-brand)} .nav-drawer .drawer-foot{ margin-top:auto;padding-top:26px; font-family:var(--mono);font-size:11px;letter-spacing:.6px;color:var(--text-ghost); } body.nav-open{overflow:hidden} @media(max-width:920px){ .nav-burger{display:inline-flex} /* wins over each page's own rule so all pages switch at one width */ .nav-in .nav-links{display:none} } @media(min-width:921px){ .nav-drawer{display:none} } @media(prefers-reduced-motion:reduce){ .nav-drawer,.burger-box i,.nav-drawer a{transition:none!important} }