/* ========================================================================== EduQuest Software Services — Flagship Design System & Site Styles Tokens: near-black ground, lime primary accent, cyan secondary accent. Typography: Space Grotesk (display/headings), Inter (body), Space Mono (technical/mono accent — eyebrows, labels, diagram text). 3D language: CSS-only depth via perspective, layered glass surfaces, dimensional borders and pointer-driven tilt (see assets/js/tilt.js). ========================================================================== */ :root { /* ---- Color: surfaces ---- */ --color-bg: #090b0e; --color-surface: #11151a; --color-surface-alt: #0c0f13; --color-surface-elevated: linear-gradient(155deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); --color-border: rgba(221, 240, 237, 0.14); --color-overlay: rgba(9, 11, 14, .92); --color-grid-line: rgba(217, 226, 223, .035); --color-glass-edge: linear-gradient(155deg, rgba(217, 226, 223, .28), rgba(217, 226, 223, .03) 42%, rgba(102, 246, 226, .22)); --color-cta-band: radial-gradient(circle at 50% 110%, rgba(203, 255, 70, .3), transparent 43%), #11170e; /* ---- Color: text ---- */ --color-text: #edf5f1; --color-text-body: #d9e2df; --color-text-muted: #899792; --color-success-text: #dfffb0; --color-error-text: #ff8a8a; /* ---- Color: accents ---- -accent/-accent-secondary are the FOREGROUND role (text, icons, thin borders/underlines) and shift value between themes for contrast. -surface variants are the FILL role (button/badge backgrounds, glow dots) and stay fixed — same bright neon in both themes, since a solid fill with its own dark-on-accent text doesn't need to change. */ --color-accent: #cbff46; --color-accent-secondary: #66f6e2; --color-accent-surface: #cbff46; --color-accent-secondary-surface: #66f6e2; /* ---- Radius ---- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-full: 999px; /* ---- Shadow / elevation ---- */ --shadow-soft: 0 12px 34px rgba(0, 0, 0, .22); --shadow-depth: 0 32px 80px rgba(0, 0, 0, .33); --shadow-glow-accent: 0 0 0 1px rgba(203, 255, 70, .5), 0 12px 34px rgba(203, 255, 70, .17); /* ---- Motion ---- */ --ease: cubic-bezier(.2, .8, .2, 1); --transition-fast: .22s var(--ease); --transition-medium: .35s var(--ease); /* ---- 3D ---- */ --perspective: 1400px; --tilt-max: 8deg; --nav-height: 76px; } /* ========================================================================== Light theme Set by assets/js/theme.js via data-theme="light" on (persisted in localStorage; defaults to dark on first visit regardless of OS preference — this is a manual toggle, not prefers-color-scheme). Layout, spacing, typography, motion and the "physical object" 3D language are untouched: only the token values below change. A handful of elements are deliberately exempt and stay fixed-dark in both themes — the hero diagram, dashboard/code-snippet project mockups — because they represent glowing screens/device UI, not page chrome. ========================================================================== */ html[data-theme="light"] { --color-bg: #f7f8f6; --color-surface: #ffffff; --color-surface-alt: #eef1ee; --color-surface-elevated: linear-gradient(155deg, rgba(9, 11, 14, .025), rgba(9, 11, 14, .006)); --color-border: rgba(9, 14, 12, .13); --color-overlay: rgba(255, 255, 255, .82); --color-grid-line: rgba(9, 11, 14, .05); --color-glass-edge: linear-gradient(155deg, rgba(9, 11, 14, .16), rgba(9, 11, 14, .02) 42%, rgba(15, 122, 108, .28)); --color-cta-band: radial-gradient(circle at 50% 110%, rgba(76, 107, 15, .14), transparent 45%), #eef6e2; --color-text: #0c0f0d; --color-text-body: #262e2b; --color-text-muted: #5c6862; --color-success-text: #3d6b12; --color-error-text: #c23434; /* Deep, saturated variants of the same lime/cyan hues — the bright dark-mode values fail text contrast on a light ground (~1.2:1), these hold ~5:1+. Fill/badge colors (-surface) stay the bright originals. */ --color-accent: #4a6b0f; --color-accent-secondary: #0f7a6c; } /* ---------- Reset ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; width: 100%; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--color-bg); color: var(--color-text-body); overflow-x: hidden; line-height: 1.5; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p { margin: 0; } h1, h2, h3, h4 { font-family: "Space Grotesk", "Inter", sans-serif; } /* ---------- Focus & accessibility ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; } .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 { position: absolute; top: -60px; left: 16px; z-index: 200; background: var(--color-accent-surface); color: #0d1108; font: 700 13px "Space Mono", monospace; padding: 10px 16px; border-radius: var(--radius-sm); transition: top var(--transition-fast); } .skip-link:focus { top: 16px; } .honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- Shared type & layout ---------- */ .mono { font-family: "Space Mono", monospace; } .site-shell { width: 100%; position: relative; overflow: hidden; } .grid-bg { background-image: linear-gradient(var(--color-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px); background-size: 44px 44px; } .section-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 110px 28px; position: relative; } .section-wrap--tight-top { padding-top: 80px; } section[id], #contact-form { scroll-margin-top: var(--nav-height); } .eyebrow { font: 700 11px/1.3 "Space Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); } .eyebrow--spaced { margin-top: 64px; } .display { font-family: "Space Grotesk", "Inter", sans-serif; letter-spacing: -.065em; line-height: .91; } .section-title { letter-spacing: -.052em; line-height: .98; font-weight: 700; color: var(--color-text); font-size: clamp(38px, 5vw, 70px); } .section-title--narrow { max-width: 650px; } .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 18px; } .section-lede { max-width: 380px; font-size: 15px; line-height: 1.7; color: var(--color-text-muted); } .section-lede--top { max-width: 420px; margin-top: 18px; } .muted { color: var(--color-text-muted); } .line { height: 1px; background: var(--color-border); } /* ========================================================================== 3D / Dimensional primitives Shared building blocks for the "physical object" visual language: glass surfaces with a soft gradient edge instead of a flat border, layered elevation shadows, and pointer-driven tilt (wired up in assets/js/tilt.js on any element carrying [data-tilt]). No WebGL — perspective/transform only, so it degrades to a flat card with zero extra cost. ========================================================================== */ .glass-panel { position: relative; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface-elevated); box-shadow: var(--shadow-depth); } .glass-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--color-glass-edge); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } [data-tilt] { transform-style: preserve-3d; transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium); will-change: transform; } .depth-shadow-1 { box-shadow: 0 10px 26px rgba(0, 0, 0, .26); } .depth-shadow-2 { box-shadow: var(--shadow-depth); } .depth-shadow-3 { box-shadow: 0 44px 100px rgba(0, 0, 0, .42), 0 0 60px rgba(102, 246, 226, .1); } /* ---------- Buttons ---------- */ .cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: var(--radius-full); padding: 13px 20px; font-size: 13px; font-weight: 700; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); border: 0; } .cta svg { width: 16px; height: 16px; transition: transform var(--transition-fast); } .cta:hover svg { transform: translate(2px, -2px); } .cta:hover { transform: translateY(-2px); } .cta-primary { background: var(--color-accent-surface); color: #101408; box-shadow: var(--shadow-glow-accent); } .cta-secondary { border: 1px solid var(--color-border); color: var(--color-text-body); background: rgba(255, 255, 255, .025); } .cta-secondary:hover { border-color: rgba(102, 246, 226, .5); background: rgba(102, 246, 226, .07); } .cta[disabled] { opacity: .6; cursor: not-allowed; transform: none; } /* ========================================================================== Navigation ========================================================================== */ .nav-blur { background: var(--color-overlay); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--color-border); } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; } .nav { margin: 0 auto; max-width: 1280px; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; height: var(--nav-height); } .brand { display: flex; align-items: center; gap: 11px; } .brand-mark { width: 132px; height: 54px; object-fit: contain; flex-shrink: 0; display: block; filter: drop-shadow(0 0 8px rgba(102, 246, 226, .3)); } .brand-name { font-family: "Space Grotesk", "Inter", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: -.02em; color: var(--color-text); } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-link { position: relative; color: var(--color-text-muted); font-size: 13px; padding: 6px 0; transition: color var(--transition-fast); } .nav-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--color-accent); transition: right var(--transition-fast); } .nav-link:hover, .nav-link:focus-visible { color: var(--color-text); } .nav-link:hover::after, .nav-link:focus-visible::after, .nav-link.is-active::after { right: 0; } .nav-link.is-active { color: var(--color-accent); } .nav-actions { display: flex; align-items: center; gap: 10px; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-accent); flex-shrink: 0; transition: border-color var(--transition-fast), color var(--transition-fast); } .theme-toggle:hover { border-color: rgba(102, 246, 226, .5); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-moon { display: none; } html[data-theme="light"] .theme-toggle .icon-sun { display: none; } html[data-theme="light"] .theme-toggle .icon-moon { display: inline-flex; } .menu-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-accent); flex-shrink: 0; } .menu-toggle svg { width: 20px; height: 20px; } .menu-toggle .icon-close { display: none; } .menu-toggle[aria-expanded="true"] .icon-menu { display: none; } .menu-toggle[aria-expanded="true"] .icon-close { display: inline-flex; } .mobile-menu { max-height: 0; opacity: 0; overflow: hidden; border-top: 0 solid var(--color-border); padding: 0 24px; background: var(--color-overlay); transition: max-height var(--transition-medium), opacity var(--transition-fast), padding var(--transition-medium); } .mobile-menu[data-open="true"] { max-height: 560px; opacity: 1; padding: 8px 24px 22px; border-top-width: 1px; } .mobile-menu .nav-link { display: block; padding: 12px 4px; font-size: 15px; border-bottom: 1px solid var(--color-border); } .mobile-menu .cta { margin-top: 14px; width: 100%; } body.menu-open { overflow: hidden; } /* ========================================================================== Hero ========================================================================== */ .hero { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; position: relative; isolation: isolate; padding-top: var(--nav-height); } .orb { position: absolute; pointer-events: none; border-radius: var(--radius-full); filter: blur(2px); opacity: .75; animation: drift 11s ease-in-out infinite alternate; } .orb-a { width: 510px; height: 510px; top: -190px; right: -130px; background: radial-gradient(circle, rgba(102, 246, 226, .17), transparent 68%); } .orb-b { width: 560px; height: 560px; bottom: -360px; left: -210px; background: radial-gradient(circle, rgba(203, 255, 70, .13), transparent 68%); animation-delay: -4s; } @keyframes drift { to { transform: translate(28px, 42px) scale(1.08); } } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 58px; align-items: center; width: 100%; } .hero-copy { position: relative; z-index: 2; max-width: 690px; } .status-chip { display: inline-flex; gap: 9px; align-items: center; padding: 8px 12px; border: 1px solid rgba(203, 255, 70, .24); background: rgba(203, 255, 70, .06); border-radius: var(--radius-full); } .status-chip .label { font: 700 10px "Space Mono", monospace; letter-spacing: .12em; color: var(--color-accent); } .signal { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-surface); box-shadow: 0 0 0 5px rgba(203, 255, 70, .13); animation: pulse 1.9s infinite; flex-shrink: 0; } @keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(203, 255, 70, 0); } } .hero-title { display: block; font-family: "Space Grotesk", "Inter", sans-serif; letter-spacing: -.065em; line-height: .91; margin-top: 26px; max-width: 680px; font-size: clamp(46px, 8vw, 104px); font-weight: 700; color: var(--color-text); } .hero-lede { margin-top: 26px; max-width: 610px; font-size: 18px; line-height: 1.75; color: var(--color-text-muted); } .hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 12px; } /* Top section on interior (non-Home) pages: clears the fixed nav without the Home hero's full-height/orb/flex treatment. */ .page-head { padding-top: calc(var(--nav-height) + 70px); padding-bottom: 20px; } /* Hero entrance: plays once on load, not scroll-triggered. Falls back to a plain visible state if the animation is removed (see reduced-motion). */ @keyframes heroReveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .enter-1 { animation: heroReveal .7s var(--ease) both; } .enter-2 { animation: heroReveal .7s .08s var(--ease) both; } .enter-3 { animation: heroReveal .7s .16s var(--ease) both; } .enter-4 { animation: heroReveal .7s .24s var(--ease) both; } .enter-5 { animation: heroReveal .8s .2s var(--ease) both; } .hero-diagram { max-width: 510px; width: 100%; margin-left: auto; perspective: var(--perspective); } .system-core { aspect-ratio: 1 / 1; width: 100%; position: relative; border: 1px solid rgba(102, 246, 226, .22); border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 48%, rgba(102, 246, 226, .15), transparent 60%), linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)); box-shadow: inset 0 0 80px rgba(102, 246, 226, .035), var(--shadow-depth); overflow: hidden; transform-style: preserve-3d; transition: transform .4s ease-out; } .system-core::before, .system-core::after { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(217, 226, 223, .09); border-radius: 50%; } .system-core::after { inset: 20%; border-style: dashed; animation: spin 24s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid rgba(217, 226, 223, .17); background: rgba(10, 14, 17, .82); box-shadow: 0 8px 25px rgba(0, 0, 0, .3); color: #ddeae5; font: 700 10px "Space Mono", monospace; letter-spacing: .05em; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .node svg { width: 14px; height: 14px; color: var(--color-accent-secondary-surface); flex-shrink: 0; } .node:hover, .node:focus-visible { border-color: var(--color-accent); box-shadow: 0 0 22px rgba(203, 255, 70, .28); transform: translateY(-2px) translateZ(18px); } .node-1 { top: 14%; left: 11%; } .node-2 { top: 12%; right: 9%; } .node-3 { top: 43%; right: 5%; } .node-4 { bottom: 14%; right: 16%; } .node-5 { bottom: 15%; left: 11%; } .node-6 { top: 43%; left: 4%; } .core-center { position: absolute; inset: 39%; z-index: 3; border-radius: 50%; display: grid; place-items: center; color: #101408; background: var(--color-accent-surface); box-shadow: 0 0 0 12px rgba(203, 255, 70, .08), 0 0 58px rgba(203, 255, 70, .4); animation: corepulse 3.6s ease-in-out infinite; } .core-center svg { width: 27px; height: 27px; } @keyframes corepulse { 50% { box-shadow: 0 0 0 16px rgba(203, 255, 70, .12), 0 0 70px rgba(203, 255, 70, .5); } } .wire { position: absolute; height: 1px; transform-origin: left; background: linear-gradient(90deg, transparent, var(--color-accent-secondary-surface), transparent); opacity: .8; animation: flow 2.8s linear infinite; } .w1 { width: 165px; top: 27%; left: 27%; transform: rotate(23deg); } .w2 { width: 147px; top: 28%; left: 52%; transform: rotate(143deg); } .w3 { width: 155px; top: 54%; left: 50%; transform: rotate(42deg); } .w4 { width: 154px; top: 63%; left: 25%; transform: rotate(-40deg); } @keyframes flow { 0% { opacity: .1; } 48% { opacity: 1; } 100% { opacity: .1; } } /* ========================================================================== Teasers (used on the Home page to point into full pages) ========================================================================== */ .text-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 700; font-size: 14px; color: var(--color-accent); } .text-link svg { width: 14px; height: 14px; transition: transform var(--transition-fast); } .text-link:hover svg, .text-link:focus-visible svg { transform: translate(3px, -3px); } .pill-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .pill { font: 700 10px "Space Mono", monospace; letter-spacing: .04em; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: rgba(255, 255, 255, .03); color: var(--color-text-body); } .teaser-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; } /* ---------- "What We Build" dimensional cards (index.html) ---------- */ .build-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 48px; } .build-card { padding: 28px 24px; } .build-card:hover { box-shadow: 0 44px 100px rgba(0, 0, 0, .42), 0 0 40px rgba(102, 246, 226, .1); } .build-title { margin-top: 20px; font-size: 19px; font-weight: 700; color: var(--color-text); } .build-copy { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--color-text-muted); } /* ---------- Flagship projects teaser (index.html) ---------- */ .home-projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 48px; } .cta-strip { margin-top: 20px; padding: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(203, 255, 70, .06), rgba(255, 255, 255, .015)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .cta-strip h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.03em; color: var(--color-text); max-width: 440px; } .cta-strip--spaced { margin-top: 60px; } /* ========================================================================== Intro / positioning ========================================================================== */ .intro-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; } .intro-copy { max-width: 570px; font-size: 18px; line-height: 1.8; color: var(--color-text-muted); } .intro-copy + .intro-copy { margin-top: 18px; } .flow-row { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 36px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .flow-step { padding: 20px 13px; border-right: 1px solid var(--color-border); min-height: 100px; display: flex; flex-direction: column; justify-content: space-between; } .flow-step:last-child { border-right: 0; } .flow-step span { font: 700 10px "Space Mono", monospace; color: var(--color-accent); } .flow-step strong { font-family: "Space Grotesk", "Inter", sans-serif; font-size: 13px; color: var(--color-text-body); font-weight: 700; } /* ========================================================================== Solutions ========================================================================== */ .solutions { background: var(--color-surface-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 48px; } .solution-card { min-height: 260px; position: relative; padding: 25px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)); transition: transform var(--transition-medium), border-color var(--transition-medium), background var(--transition-medium); display: flex; flex-direction: column; } .solution-card:hover, .solution-card:focus-within { transform: translateY(-6px) rotateX(2deg); border-color: rgba(102, 246, 226, .46); background: linear-gradient(145deg, rgba(102, 246, 226, .11), rgba(255, 255, 255, .025)); box-shadow: var(--shadow-depth); } .solution-card::after { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; right: -80px; bottom: -80px; border: 1px solid rgba(203, 255, 70, .25); transition: transform var(--transition-medium), background var(--transition-medium); } .solution-card:hover::after { transform: scale(1.35); background: rgba(203, 255, 70, .05); } .icon-box { width: 39px; height: 39px; border: 1px solid rgba(102, 246, 226, .28); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--color-accent-secondary); background: rgba(102, 246, 226, .07); flex-shrink: 0; } .icon-box svg { width: 19px; height: 19px; } .solution-label { margin-top: auto; padding-top: 16px; font: 700 10px "Space Mono", monospace; letter-spacing: .08em; color: var(--color-text-muted); position: relative; z-index: 1; } .solution-title { margin-top: 22px; font-size: 22px; font-weight: 700; color: var(--color-text); position: relative; z-index: 1; } .solution-copy { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--color-text-muted); position: relative; z-index: 1; } .solution-hints { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; } .solution-hints span { font: 700 9px "Space Mono", monospace; letter-spacing: .04em; padding: 5px 9px; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-muted); background: rgba(255, 255, 255, .02); } .solution-cases { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--color-text-muted); position: relative; z-index: 1; } .solution-cases strong { color: var(--color-text-body); font-weight: 700; } .solution-card .text-link { margin-top: 16px; font-size: 13px; position: relative; z-index: 1; } /* Asymmetric bento layout: the two cards EduQuest is leaning into hardest (SaaS & Platform Development, AI & Intelligent Systems) span two columns so the grid reads as ten distinct objects, not identical tiles. */ .solution-grid .solution-card:nth-child(2) { grid-column: span 2; } .solution-grid .solution-card:nth-child(3) { grid-column: span 2; } /* ---------- "What Can We Build?" project-type table (solutions.html) ---------- */ .table-scroll { margin-top: 32px; overflow-x: auto; } .info-table { width: 100%; min-width: 520px; border-collapse: collapse; } .info-table th { text-align: left; font: 700 10px "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); padding: 0 16px 12px 0; border-bottom: 1px solid var(--color-border); } .info-table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--color-border); font-size: 13.5px; line-height: 1.5; color: var(--color-text-body); } .info-table tr:last-child td { border-bottom: 0; } .info-table td:first-child { font-weight: 700; color: var(--color-text); white-space: nowrap; } /* ========================================================================== Technology / architecture ========================================================================== */ .tech-note { margin-top: 28px; max-width: 640px; font-size: 14px; line-height: 1.7; color: var(--color-text-muted); } /* ---------- Layered architecture stack (technology.html) ---------- */ .stack { margin-top: 46px; position: relative; display: flex; flex-direction: column; gap: 0; } .stack::before { content: ""; position: absolute; left: 34px; top: 34px; bottom: 34px; width: 1px; background: linear-gradient(to bottom, transparent, var(--color-accent-secondary), var(--color-accent), transparent); opacity: .5; } .stack-layer { position: relative; display: grid; grid-template-columns: 68px 1fr; gap: 22px; align-items: flex-start; padding: 26px 28px 26px 0; border-bottom: 1px solid var(--color-border); } .stack-layer:last-child { border-bottom: 0; } .stack-node { width: 68px; height: 68px; border-radius: var(--radius-md); display: grid; place-items: center; position: relative; z-index: 1; border: 1px solid var(--color-border); background: var(--color-surface-elevated); color: var(--color-accent-secondary); transition: transform var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium); } .stack-node svg { width: 26px; height: 26px; } .stack-layer:hover .stack-node, .stack-layer:focus-within .stack-node { transform: translateZ(14px) scale(1.05); border-color: var(--color-accent); box-shadow: var(--shadow-soft); } .stack-label { font: 700 10px "Space Mono", monospace; letter-spacing: .1em; color: var(--color-accent); } .stack-title { margin-top: 6px; font-size: 21px; font-weight: 700; color: var(--color-text); } .stack-copy { margin-top: 10px; max-width: 600px; font-size: 14px; line-height: 1.7; color: var(--color-text-muted); } .stack-tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; } .stack-tags span { font: 700 10px "Space Mono", monospace; letter-spacing: .04em; padding: 7px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-body); background: rgba(255, 255, 255, .025); } /* ========================================================================== Engineering philosophy ========================================================================== */ .principle-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 55px; border-top: 1px solid var(--color-border); } .principle { padding: 25px 23px 18px 0; border-right: 1px solid var(--color-border); min-height: 220px; } .principle:not(:first-child) { padding-left: 23px; } .principle:last-child { border-right: 0; } .principle-number { font: 700 12px "Space Mono", monospace; color: var(--color-accent); } .principle-title { margin-top: 14px; font-size: 19px; font-weight: 700; color: var(--color-text); } .principle-copy { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--color-text-muted); } /* ---------- Belief list (about.html) ---------- */ .belief-list { margin-top: 46px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .belief-item { padding: 22px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-elevated); text-align: center; transition: transform var(--transition-medium), border-color var(--transition-medium); } .belief-item:hover { transform: translateY(-4px); border-color: rgba(203, 255, 70, .4); } .belief-word { font-family: "Space Grotesk", "Inter", sans-serif; font-size: 16px; font-weight: 700; color: var(--color-text); } .belief-desc { margin-top: 8px; font-size: 12.5px; line-height: 1.55; color: var(--color-text-muted); } /* ========================================================================== Projects ========================================================================== */ .project-grid { display: grid; grid-template-columns: 1.16fr .84fr; gap: 14px; margin-top: 48px; } .project { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); min-height: 340px; padding: 27px; transition: border-color var(--transition-medium), transform var(--transition-medium); } .project:hover { border-color: rgba(203, 255, 70, .46); transform: translateY(-4px); } .project-main { grid-row: span 2; min-height: 690px; } .project-category { font: 700 10px "Space Mono", monospace; letter-spacing: .1em; color: var(--color-accent); } .project-title { margin-top: 12px; font-size: 26px; font-weight: 700; color: var(--color-text); } .project-copy { margin-top: 12px; font-size: 14.5px; line-height: 1.7; color: var(--color-text-muted); max-width: 46ch; } .project-meta { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .project-meta div span, .project-narrative div span { display: block; font: 700 9px "Space Mono", monospace; letter-spacing: .1em; color: var(--color-accent-secondary); } .project-meta div p, .project-narrative div p { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--color-text-muted); } .project-meta--full { grid-template-columns: repeat(5, 1fr); } .project-narrative { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; } .dashboard { margin-top: 30px; height: 320px; border: 1px solid rgba(102, 246, 226, .2); border-radius: var(--radius-md); padding: 18px; background: linear-gradient(130deg, #0b1114, #172529); position: relative; overflow: hidden; display: flex; } .dash-side { width: 27%; height: 100%; border-right: 1px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: 8px; padding-right: 12px; } .dash-side span { display: block; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, .1); } .dash-side span:first-child { background: rgba(102, 246, 226, .4); width: 70%; } .dash-bars { position: absolute; left: 38%; right: 8%; bottom: 15%; height: 48%; display: flex; align-items: flex-end; gap: 9px; } .dash-bars span { display: block; flex: 1; background: linear-gradient(to top, var(--color-accent-secondary-surface), rgba(102, 246, 226, .17)); border-radius: 3px 3px 0 0; } .dash-bars span:nth-child(1) { height: 29%; } .dash-bars span:nth-child(2) { height: 57%; } .dash-bars span:nth-child(3) { height: 42%; } .dash-bars span:nth-child(4) { height: 84%; } .dash-bars span:nth-child(5) { height: 64%; } .project-wire { height: 120px; margin-top: 24px; position: relative; background: linear-gradient(135deg, transparent 49.3%, rgba(102, 246, 226, .55) 50%, transparent 50.7%), linear-gradient(45deg, transparent 49.3%, rgba(203, 255, 70, .5) 50%, transparent 50.7%); background-size: 80px 80px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); } .project-code { margin-top: 20px; padding: 14px; border-left: 2px solid var(--color-accent-secondary-surface); background: #0a0d10; color: #9bb6af; font: 11px/1.8 "Space Mono", monospace; overflow-x: auto; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } /* ========================================================================== AI band ========================================================================== */ .ai-band { background: #d8fa50; color: #11150a; position: relative; overflow: hidden; } .ai-band .eyebrow, .ai-band .section-title { color: #11150a; } .ai-band::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(#11150a 1px, transparent 1px); background-size: 19px 19px; } .ai-layout { position: relative; z-index: 1; display: grid; grid-template-columns: .8fr 1.2fr; gap: 75px; align-items: center; } .ai-copy { max-width: 420px; font-size: 16px; line-height: 1.7; color: rgba(17, 21, 10, .78); margin-top: 18px; } .ai-tags { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; } .ai-tags li { font: 700 10px "Space Mono", monospace; letter-spacing: .04em; padding: 7px 11px; border: 1px solid rgba(17, 21, 10, .3); border-radius: var(--radius-full); background: rgba(255, 255, 255, .22); } .ai-chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .ai-chain div { padding: 15px 10px; border: 1px solid rgba(17, 21, 10, .32); min-height: 108px; background: rgba(255, 255, 255, .18); display: flex; flex-direction: column; justify-content: flex-end; position: relative; border-radius: var(--radius-sm); } .ai-chain div:not(:last-child)::after { content: "→"; position: absolute; right: -9px; top: 44%; font-size: 18px; z-index: 2; } .ai-chain .stage-num { font: 700 9px "Space Mono", monospace; opacity: .65; } .ai-chain .stage-title { margin-top: 8px; font: 700 12px "Space Mono", monospace; } .ai-chain .stage-sub { margin-top: 4px; font-size: 10.5px; line-height: 1.4; opacity: .75; } /* ========================================================================== Capabilities / Why EduQuest ========================================================================== */ .metrics { border-bottom: 1px solid var(--color-border); } .metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 48px; } .metric { padding: 5px 23px 6px 0; border-right: 1px solid var(--color-border); } .metric:not(:first-child) { padding-left: 23px; } .metric:last-child { border: 0; } .metric-index { font: 700 10px "Space Mono", monospace; color: var(--color-text-muted); } .metric-word { margin-top: 10px; font-family: "Space Grotesk", "Inter", sans-serif; font-size: clamp(22px, 5vw, 40px); line-height: 1.05; letter-spacing: -.03em; color: var(--color-accent); font-weight: 700; overflow-wrap: break-word; } .metric-desc { margin-top: 10px; font-size: 13.5px; color: var(--color-text-muted); } .metric-copy { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--color-text-muted); } /* ========================================================================== Development process ========================================================================== */ .pipeline { display: flex; margin-top: 45px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); overflow: auto; } .pipe { flex: 1; min-width: 140px; padding: 24px 15px; border-right: 1px solid var(--color-border); position: relative; opacity: 0; transform: translateY(14px); transition: opacity var(--transition-medium), transform var(--transition-medium); } .pipe.is-visible { opacity: 1; transform: translateY(0); } .pipe:last-child { border-right: 0; } .pipe::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-secondary-surface); position: absolute; top: -4px; box-shadow: 0 0 15px var(--color-accent-secondary-surface); } .pipe-number { font: 700 10px "Space Mono", monospace; color: var(--color-accent); } .pipe-title { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--color-text); } .pipe-copy { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--color-text-muted); } .pipeline-hint { display: none; margin-top: 12px; font-size: 10px; letter-spacing: .08em; color: var(--color-text-muted); text-align: center; } /* ========================================================================== Security ========================================================================== */ .security-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; } .security-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 30px; } .security-item { border: 1px solid var(--color-border); padding: 17px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .025); font-size: 14px; transition: transform var(--transition-medium), border-color var(--transition-medium); } .security-item:hover { transform: translateY(-3px); border-color: rgba(102, 246, 226, .4); } .security-item svg { display: block; color: var(--color-accent); width: 19px; height: 19px; margin-bottom: 16px; } /* ========================================================================== Final CTA + contact ========================================================================== */ .final-cta { padding: 105px 28px 90px; position: relative; overflow: hidden; border-top: 1px solid rgba(203, 255, 70, .3); background: var(--color-cta-band); text-align: center; } .final-cta--page-head { padding-top: calc(var(--nav-height) + 90px); border-top: 0; } .final-rings { position: absolute; width: 700px; height: 700px; border: 1px solid rgba(203, 255, 70, .29); border-radius: 50%; left: 50%; top: 40%; transform: translate(-50%, -10%); pointer-events: none; } .final-rings::before, .final-rings::after { content: ""; position: absolute; border: 1px solid rgba(203, 255, 70, .18); border-radius: 50%; inset: 13%; } .final-rings::after { inset: 27%; animation: spin 20s linear infinite; } .final-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; } .final-title { font-family: "Space Grotesk", "Inter", sans-serif; font-size: clamp(36px, 5vw, 62px); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; color: var(--color-text); } .final-copy { margin-top: 18px; font-size: 17px; line-height: 1.7; color: var(--color-text-muted); max-width: 520px; margin-left: auto; margin-right: auto; } .final-actions { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .contact-panel { margin-top: 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; } .contact-info h3 { font-size: 22px; font-weight: 700; color: var(--color-text); } .contact-info p { margin-top: 12px; font-size: 14.5px; line-height: 1.7; color: var(--color-text-muted); } .contact-email { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font: 700 14px "Space Mono", monospace; color: var(--color-accent-secondary); } .contact-email svg { width: 16px; height: 16px; } .contact-note { margin-top: 24px; padding: 14px 16px; border: 1px dashed var(--color-border); border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.6; color: var(--color-text-muted); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; } .field.full { grid-column: 1 / -1; } .field label { font: 700 11px "Space Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); } .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: rgba(255, 255, 255, .03); color: var(--color-text); font: 14px "Inter", sans-serif; transition: border-color var(--transition-fast), background var(--transition-fast); } .field input::placeholder, .field textarea::placeholder { color: var(--color-text-muted); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-accent-secondary); background: rgba(102, 246, 226, .04); outline: none; } .field textarea { resize: vertical; min-height: 110px; } .field-error { font-size: 12px; color: var(--color-error-text); min-height: 14px; } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--color-error-text); } .form-actions { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .form-status { margin-top: 18px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.6; display: none; } .form-status[data-state="success"] { display: block; border: 1px solid rgba(203, 255, 70, .4); background: rgba(203, 255, 70, .08); color: var(--color-success-text); } .form-status[data-state="error"] { display: block; border: 1px solid rgba(255, 138, 138, .4); background: rgba(255, 138, 138, .08); color: var(--color-error-text); } .spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(9, 11, 14, .3); border-top-color: #0d1108; animation: spin .7s linear infinite; display: none; } .cta[data-loading="true"] .spinner { display: inline-block; } .cta[data-loading="true"] .cta-label::after { content: "…"; } /* ========================================================================== Footer ========================================================================== */ .footer { background: var(--color-bg); border-top: 1px solid var(--color-border); } .footer-grid { display: grid; grid-template-columns: 1.25fr repeat(2, .65fr); gap: 40px; } .footer-brand { display: flex; align-items: center; gap: 11px; } .footer-tagline { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--color-text-muted); max-width: 320px; } .footer-heading { font: 700 10px "Space Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); } .footer-link { display: block; color: var(--color-text-muted); font-size: 13px; margin: 10px 0; transition: color var(--transition-fast); } .footer-link:hover, .footer-link:focus-visible { color: var(--color-accent); } .footer-bottom { margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--color-text-muted); } .whatsapp-float { position: fixed; right: 24px; bottom: 24px; z-index: 45; width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid rgba(37, 211, 102, .55); border-radius: 50%; background: #25d366; color: #06150b; box-shadow: 0 12px 30px rgba(0, 0, 0, .35), 0 0 22px rgba(37, 211, 102, .28); font-size: 27px; line-height: 1; text-decoration: none; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .whatsapp-float:hover, .whatsapp-float:focus-visible { color: #06150b; transform: translateY(-4px) scale(1.04); box-shadow: 0 16px 34px rgba(0, 0, 0, .4), 0 0 28px rgba(37, 211, 102, .4); } .whatsapp-float:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; } /* ========================================================================== Scroll reveal ========================================================================== */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .orb, .system-core::after, .core-center, .wire, .final-rings::after, .enter-1, .enter-2, .enter-3, .enter-4, .enter-5 { animation: none !important; } .signal { animation: none !important; box-shadow: 0 0 0 5px rgba(203, 255, 70, .13); } .system-core, [data-tilt] { transition: none !important; transform: none !important; } .mobile-menu { transition: none !important; } .reveal, .pipe { opacity: 1 !important; transform: none !important; transition: none !important; } * { scroll-behavior: auto !important; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1024px) { .solution-grid { grid-template-columns: repeat(2, 1fr); } .solution-grid .solution-card:nth-child(2), .solution-grid .solution-card:nth-child(3) { grid-column: span 2; } .ai-layout { gap: 44px; } .belief-list { grid-template-columns: repeat(3, 1fr); } .build-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .section-wrap { padding: 78px 20px; } .hero { min-height: auto; padding: 150px 0 78px; } .hero-grid, .intro-layout, .ai-layout, .security-grid, .contact-panel, .form-grid, .teaser-grid, .home-projects-grid { grid-template-columns: 1fr; gap: 38px; } .build-grid { grid-template-columns: 1fr 1fr; } .cta-strip { padding: 28px; flex-direction: column; align-items: flex-start; } .cta-strip .cta { width: 100%; justify-content: center; } .hero-diagram { margin: 0; max-width: 440px; } .solution-grid { grid-template-columns: 1fr; } .solution-grid .solution-card:nth-child(2), .solution-grid .solution-card:nth-child(3) { grid-column: span 1; } .info-table { min-width: 460px; } .flow-row { grid-template-columns: 1fr 1fr; } .flow-step { border-bottom: 1px solid var(--color-border); } .stack-layer { grid-template-columns: 52px 1fr; gap: 16px; padding-right: 0; } .stack-node { width: 52px; height: 52px; } .stack-node svg { width: 21px; height: 21px; } .stack::before { left: 26px; } .principle-grid, .metric-grid { grid-template-columns: 1fr 1fr; } .principle:nth-child(2) { border-right: 0; } .principle:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); } .metric:nth-child(2) { border-right: 0; } .metric:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); padding-bottom: 22px; } .metric:nth-child(n+3) { padding-top: 22px; } .belief-list { grid-template-columns: 1fr 1fr; } .project-grid { grid-template-columns: 1fr; } .project-main { grid-row: auto; min-height: 480px; } .ai-chain { grid-template-columns: 1fr 1fr; } .ai-chain div:nth-child(2)::after { content: none; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:first-child { grid-column: span 2; } .desktop-nav { display: none; } .menu-toggle { display: inline-flex; } .project-meta, .project-meta--full { grid-template-columns: 1fr 1fr; } .pipeline-hint { display: block; } } @media (min-width: 901px) { .mobile-menu, .menu-toggle { display: none !important; } } @media (max-width: 480px) { .brand-name { display: none; } .brand-mark { width: 118px; height: 48px; } .whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 25px; } .final-actions, .hero-actions { flex-direction: column; align-items: stretch; } .final-actions .cta, .hero-actions .cta { width: 100%; } .form-grid { grid-template-columns: 1fr; } .project-meta, .project-meta--full { grid-template-columns: 1fr; } .status-chip .label { font-size: 9px; } .metric-grid { grid-template-columns: 1fr; } .metric-grid .metric { border-right: 0; padding: 20px 0; border-bottom: 1px solid var(--color-border); } .metric-grid .metric:first-child { padding-top: 0; } .metric-grid .metric:last-child { border-bottom: 0; padding-bottom: 0; } .belief-list { grid-template-columns: 1fr; } .build-grid { grid-template-columns: 1fr; } }