/* ===================================================================== OcteDigital — main.css Soft 3D claymorphism growth-system look. Mobile-first. RTL + LTR. Light + dark themes via CSS variables (class "dark" on ). ===================================================================== */ /* ---------------- Design tokens ---------------- */ :root { /* Brand palette */ --charcoal: #151515; --red: #81000F; --red-bright:#a3121f; --warm-white:#FFFDF8; --soft-red: #FDECEC; --gray: #6B7280; /* Accents */ --teal: #1FB6C1; --amber: #F6A93B; --coral: #FF6E5B; --indigo: #5B5BD6; /* Themed surfaces (light) */ --bg: var(--warm-white); --surface: #FFFFFF; --surface-2: #FFF7F5; --surface-tint: var(--soft-red); --text: var(--charcoal); --text-soft: var(--gray); --line: rgba(21,21,21,.08); --line-strong: rgba(21,21,21,.14); --footer-bg: var(--charcoal); --footer-text: var(--warm-white); --footer-soft: #9aa1ac; /* Radii */ --r-panel: 32px; --r-card: 24px; --r-chip: 14px; --r-pill: 999px; /* Shadows */ --sh-soft: 0 20px 40px -12px rgba(21,21,21,.12); --sh-lift: 0 30px 60px -16px rgba(21,21,21,.20); --sh-red: 0 30px 60px -20px rgba(129,0,15,.28); --sh-chip: 0 8px 22px -8px rgba(21,21,21,.18); /* Layout */ --container: 1280px; --gutter: 20px; /* Type — Portfolio typography: IBM Plex Sans (Latin) + IBM Plex Sans Arabic + Cairo (Arabic) */ --font-head: 'IBM Plex Sans', 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif; --font-body: 'IBM Plex Sans', 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif; --ease: cubic-bezier(.22,.61,.36,1); /* ---- Phase 8.7 variables (accent = site red) ---- */ --accent: var(--red); --card-bg: #FFFFFF; --border: rgba(21,21,21,0.09); --text-main: var(--charcoal); --text-strong: var(--charcoal); --bg-soft-red: rgba(129, 0, 15, 0.04); --bg-warm: #FFFDF8; } :root.dark { --accent: var(--red-bright); --card-bg: #1d1d1d; --border: rgba(255,253,248,0.10); --text-main: var(--warm-white); --text-strong: var(--warm-white); --bg-soft-red: rgba(129, 0, 15, 0.08); --bg-warm: #151515; --bg: var(--charcoal); --surface: #1d1d1d; --surface-2: #232323; --surface-tint: #241617; --text: var(--warm-white); --text-soft: #9aa1ac; --line: rgba(255,253,248,.10); --line-strong: rgba(255,253,248,.18); --red-bright: #c4313f; --sh-soft: 0 20px 40px -12px rgba(0,0,0,.55); --sh-lift: 0 30px 60px -16px rgba(0,0,0,.65); --sh-red: 0 30px 60px -20px rgba(0,0,0,.6); --sh-chip: 0 8px 22px -8px rgba(0,0,0,.55); --footer-bg: #0f0f0f; } html[lang="en"] { --font-head: 'IBM Plex Sans', 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif; --font-body: 'IBM Plex Sans', 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif; } /* ---------------- Reset / base ---------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.65; font-size: 16px; /* `clip` (not `hidden`) stops sideways scroll WITHOUT making a scroll container — `hidden` forces overflow-y:auto, which breaks the sticky .nav. */ overflow-x: clip; transition: background .4s var(--ease), color .4s var(--ease); min-height: 100vh; } img, svg, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ul { list-style: none; padding: 0; } h1, h2, h3, h4, .display { font-family: var(--font-head); line-height: 1.16; font-weight: 800; } :focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 8px; } /* ---------------- Layout helpers ---------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: 64px; position: relative; } .section--tint { background: var(--surface-tint); transition: background .4s var(--ease); } .panel-x { margin-inline: 8px; border-radius: var(--r-panel); } .center { text-align: center; } .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; } /* Section heading block */ .sec-head { max-width: 720px; margin-inline: auto; margin-bottom: 36px; text-align: center; } .sec-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--red); background: var(--surface-tint); padding: 7px 16px; border-radius: var(--r-pill); box-shadow: var(--sh-chip); margin-bottom: 14px; } :root.dark .sec-tag { color: #ff9aa3; } .sec-tag .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); } .sec-head h2 { font-size: clamp(26px, 5.4vw, 42px); margin-bottom: 12px; } .sec-head p { color: var(--text-soft); font-size: 16px; } /* Ambient blobs + dots (decorative) */ .blob { position: absolute; border-radius: 50%; background: var(--soft-red); filter: blur(10px); opacity: .7; pointer-events: none; z-index: 0; } :root.dark .blob { background: rgba(129,0,15,.20); opacity: .5; } .dot { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; } /* ---------------- Buttons ---------------- */ .btn { font-family: var(--font-head); font-weight: 700; font-size: 15px; border: none; border-radius: var(--r-pill); padding: 13px 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s; min-height: 48px; line-height: 1.1; text-align: center; } .btn .arr { display: inline-block; transition: transform .2s var(--ease); } .btn:hover .arr { transform: translateX(-4px); } html[lang="en"] .btn:hover .arr { transform: translateX(4px); } .btn-primary { background: var(--red); color: var(--warm-white); box-shadow: var(--sh-red); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 36px 70px -20px rgba(129,0,15,.42); } .btn-ghost { background: transparent; color: var(--text); border: 1.6px solid var(--line-strong); } .btn-ghost:hover { transform: translateY(-3px); border-color: var(--red); color: var(--red); } :root.dark .btn-ghost:hover { color: #ff9aa3; border-color: #ff9aa3; } .btn-wa { background: #25D366; color: #07331a; box-shadow: 0 18px 36px -16px rgba(37,211,102,.5); } .btn-wa:hover { transform: translateY(-3px); } .btn-light { background: var(--warm-white); color: var(--red); } .btn-block { width: 100%; } .site-chat-button { position: fixed; bottom: 22px; right: 22px; left: auto; z-index: 90; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; max-width: calc(100vw - 32px); padding: 10px 18px 10px 12px; border: 1px solid color-mix(in srgb, var(--red) 24%, var(--line)); border-radius: var(--r-pill); background: var(--red); color: var(--warm-white); box-shadow: var(--sh-red); font-family: var(--font-head); font-size: 15px; font-weight: 800; line-height: 1.1; letter-spacing: 0; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } html[lang="en"] .site-chat-button { right: auto; left: 22px; } html[lang="ar"] .site-chat-button { right: 22px; left: auto; direction: rtl; } .site-chat-button:hover { transform: translateY(-3px); background: var(--red-bright); box-shadow: 0 36px 70px -20px rgba(129,0,15,.42); } .site-chat-button__icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--warm-white) 18%, transparent); } .site-chat-button__icon svg { width: 19px; height: 19px; } .site-chat-button__text { white-space: nowrap; } :root.dark .site-chat-button { border-color: color-mix(in srgb, #ff9aa3 28%, var(--line)); box-shadow: 0 24px 52px -18px rgba(0,0,0,.65); } @media (max-width: 479px) { .site-chat-button { bottom: 16px; right: 16px; left: auto; min-height: 52px; width: 52px; padding: 9px; justify-content: center; } html[lang="en"] .site-chat-button { right: auto; left: 16px; } html[lang="ar"] .site-chat-button { right: 16px; left: auto; } .site-chat-button__icon { width: 32px; height: 32px; } .site-chat-button__text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } } .mojeeb-chat-drag-handle { position: fixed; z-index: 10001; width: 92px; height: 26px; cursor: grab; touch-action: none; border-radius: var(--r-pill); } .mojeeb-chat-drag-handle::before { content: ""; position: absolute; top: 10px; left: 50%; width: 46px; height: 5px; border-radius: var(--r-pill); transform: translateX(-50%); background: color-mix(in srgb, var(--text-soft) 46%, transparent); opacity: .7; } .mojeeb-chat-drag-handle.is-dragging { cursor: grabbing; } @media (max-width: 767px) { .mojeeb-chat-drag-handle { display: none; } } /* ---------------- Images (real or placeholder) ---------------- */ .octe-img { width: 100%; height: auto; border-radius: var(--r-card); object-fit: cover; } .octe-img--ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px; background: radial-gradient(120px 90px at 30% 25%, rgba(255,110,91,.18), transparent 60%), radial-gradient(160px 120px at 75% 80%, rgba(31,182,193,.16), transparent 60%), var(--surface-tint); border: 1px dashed var(--line-strong); color: var(--text); } .octe-img__badge { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--red); background: var(--surface); padding: 8px 16px; border-radius: var(--r-pill); box-shadow: var(--sh-chip); max-width: 90%; } :root.dark .octe-img__badge { color: #ff9aa3; } .octe-img__file { font-size: 11px; color: var(--text-soft); font-family: monospace; opacity: .8; } /* ---------------- Blob icon + stars ---------------- */ .blob-ic { width: 26px; height: 26px; } .ic-tile { width: 50px; height: 50px; border-radius: 15px; flex: none; display: grid; place-items: center; box-shadow: var(--sh-chip); } .ic-tile.teal { background: color-mix(in srgb, var(--teal) 16%, var(--surface)); } .ic-tile.amber { background: color-mix(in srgb, var(--amber) 18%, var(--surface)); } .ic-tile.coral { background: color-mix(in srgb, var(--coral) 16%, var(--surface)); } .ic-tile.red { background: var(--soft-red); } .ic-tile.indigo { background: color-mix(in srgb, var(--indigo) 16%, var(--surface)); } :root.dark .ic-tile { background: var(--surface-2); } /* ---------------- Header / nav ---------------- */ .nav { position: sticky; top: 0; z-index: 100; backdrop-filter: saturate(140%) blur(12px); background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; gap: 14px; min-height: 66px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 20px; } .brand-logo { height: 40px; width: auto; object-fit: contain; flex: none; } /* Brand logo: full-colour on light surfaces, white silhouette on dark ones (dark-mode nav) */ :root.dark .nav .brand-logo { filter: brightness(0) invert(1); } .brand b { color: var(--red); } :root.dark .brand b { color: #ff9aa3; } /* Mobile header only: brand may shrink so the wordmark never slides under the controls */ @media (max-width: 767px) { .brand { min-width: 0; flex-shrink: 1; } .nav-inner .brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-right { flex: none; } } /* Tiny phones: keep the icon, drop the wordmark so the brand never truncates */ @media (max-width: 479px) { .nav-inner .brand span { display: none; } } .nav-links { display: none; } .nav-right { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; } .icon-btn { width: 44px; height: 44px; border-radius: 12px; flex: none; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: grid; place-items: center; font-size: 18px; transition: transform .2s var(--ease), border-color .2s, background .2s; } .icon-btn:hover { transform: translateY(-2px); border-color: var(--red); } /* Premium theme toggle — layered sun/moon that cross-fade + rotate on theme change */ .theme-toggle { position: relative; overflow: hidden; } .theme-toggle .theme-ic { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; transition: opacity .45s var(--ease), transform .55s var(--ease), color .2s; } .theme-toggle .theme-ic--moon { opacity: 1; transform: rotate(0) scale(1); } .theme-toggle .theme-ic--sun { opacity: 0; transform: rotate(-90deg) scale(.35); } :root.dark .theme-toggle .theme-ic--moon { opacity: 0; transform: rotate(90deg) scale(.35); } :root.dark .theme-toggle .theme-ic--sun { opacity: 1; transform: rotate(0) scale(1); } .theme-toggle:hover { color: var(--red); background: var(--surface-tint); } :root.dark .theme-toggle:hover { color: #ff9aa3; } .lang-btn { height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-family: var(--font-head); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; transition: transform .2s var(--ease), border-color .2s; } .lang-btn:hover { transform: translateY(-2px); border-color: var(--red); } .nav-cta { display: none; } /* Mobile menu panel */ .menu-toggle { display: grid; } .mobile-menu { position: fixed; inset: 66px 0 auto 0; z-index: 99; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--sh-soft); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform .28s var(--ease), opacity .28s var(--ease), visibility .28s; padding: 14px var(--gutter) 22px; } .mobile-menu.open { transform: translateY(0); opacity: 1; visibility: visible; } .mobile-menu a { display: block; padding: 14px 8px; font-family: var(--font-head); font-weight: 700; font-size: 17px; border-bottom: 1px solid var(--line); color: var(--text); } .mobile-menu a:last-of-type { border-bottom: none; } .mobile-menu a.active { color: var(--red); } .mobile-menu .btn { margin-top: 14px; } /* ---------------- Hero ---------------- */ .hero { position: relative; padding-block: 36px 8px; overflow: hidden; } .hero-grid { display: grid; gap: 18px; align-items: center; position: relative; z-index: 2; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; align-self: start; background: var(--surface); color: var(--red); font-family: var(--font-head); font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: var(--r-pill); box-shadow: var(--sh-chip); } :root.dark .eyebrow { color: #ff9aa3; } .eyebrow .pip { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); } .hero h1 { font-size: clamp(30px, 8vw, 60px); line-height: 1.1; margin: 4px 0 14px; } .hero h1 .hl { color: var(--red); } :root.dark .hero h1 .hl { color: #ff9aa3; } .hero .lead { font-size: clamp(15.5px, 4vw, 19px); color: var(--text-soft); max-width: 600px; margin-bottom: 22px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; } .hero-cta .btn { flex: 1 1 auto; min-width: 0; } .hero-note { margin-top: 16px; font-size: 13px; color: var(--text-soft); font-weight: 600; } .hero-visual { position: relative; } .hero-visual .octe-img { box-shadow: var(--sh-soft); border-radius: var(--r-panel); } /* ---------------- Trust strip ---------------- */ .trust { padding-block: 8px 40px; } .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .trust-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 14px; text-align: center; box-shadow: var(--sh-chip); position: relative; } .trust-card .num { font-family: var(--font-head); font-weight: 800; font-size: clamp(24px, 7vw, 34px); color: var(--red); font-variant-numeric: tabular-nums; } :root.dark .trust-card .num { color: #ff9aa3; } .trust-card .lbl { font-size: 12.5px; color: var(--text-soft); font-weight: 600; } /* ---------------- Problem ---------------- */ .problem-grid { display: grid; gap: 16px; } .problem-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; box-shadow: var(--sh-soft); position: relative; } .problem-card .x { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--soft-red); color: var(--red); font-size: 20px; font-weight: 800; margin-bottom: 14px; } :root.dark .problem-card .x { background: #2a1618; color: #ff9aa3; } .problem-card h3 { font-size: 19px; margin-bottom: 8px; } .problem-card p { color: var(--text-soft); font-size: 14.5px; } .section-cta { text-align: center; margin-top: 32px; } /* ---------------- System map (connected services) ---------------- */ .system { position: relative; display: grid; gap: 14px; } .core { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22px; gap: 14px; order: -1; } .core-orb { width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--red-bright), var(--red)); display: grid; place-items: center; color: var(--warm-white); box-shadow: var(--sh-red); position: relative; } .core-orb span { font-family: var(--font-head); font-weight: 800; font-size: 17px; padding: 0 10px; line-height: 1.2; } .core-orb::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--red) 38%, transparent); animation: spin 30s linear infinite; } .core p { font-size: 13.5px; color: var(--text-soft); max-width: 240px; } .node-col { display: grid; gap: 14px; } .node { display: flex; align-items: center; gap: 14px; text-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 16px; box-shadow: var(--sh-soft); position: relative; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .node:hover { translate: 0 -4px; box-shadow: var(--sh-lift); border-color: color-mix(in srgb, var(--red) 32%, var(--line)); } .node .meta h3 { font-size: 16.5px; margin-bottom: 2px; } .node .meta p { font-size: 13px; color: var(--text-soft); line-height: 1.5; } .node .go { margin-inline-start: auto; color: var(--red); font-weight: 800; font-size: 18px; flex: none; opacity: .55; transition: opacity .2s, transform .2s; } .node:hover .go { opacity: 1; } /* ===================================================================== Homepage micro-interactions Layered on top of the existing design — no layout / spacing changes. ===================================================================== */ /* Premium card hover: gentle lift + soft shadow + brand-red edge. The lift uses the individual `translate` property so it never collides with the reveal's `transform`; higher specificity than .reveal keeps this transition set (which still carries the reveal's transform/opacity). */ .trust-grid .trust-card, .problem-grid .problem-card, #system .node, .risk-grid .risk-card { transition: translate .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), transform .7s var(--ease), opacity .7s var(--ease); } .trust-card:hover, .problem-card:hover, .risk-card:hover { translate: 0 -4px; border-color: color-mix(in srgb, var(--red) 32%, var(--line)); } .problem-card:hover, .risk-card:hover { box-shadow: var(--sh-lift); } .trust-card:hover { box-shadow: var(--sh-soft); } /* softer, lighter for the small stat cards */ :root.dark .trust-card:hover, :root.dark .problem-card:hover, :root.dark .node:hover, :root.dark .risk-card:hover { border-color: color-mix(in srgb, var(--red-bright) 52%, var(--line)); } /* Stat progress bar — JS injects it only for percentage values. It sits in the card's existing lower padding (absolute), so it adds no height / no reflow. */ .stat-bar { position: absolute; inset-inline: 14px; inset-block-end: 9px; height: 3px; border-radius: var(--r-pill); overflow: hidden; background: color-mix(in srgb, var(--red) 12%, transparent); } .stat-bar__fill { height: 100%; width: 0; border-radius: inherit; background: var(--red); } :root.dark .stat-bar { background: color-mix(in srgb, #ff9aa3 16%, transparent); } :root.dark .stat-bar__fill { background: #ff9aa3; } /* Core orb — a slow, soft pulse so the system centre feels quietly alive. */ .core-orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; animation: corePulse 4s var(--ease) infinite; } @keyframes corePulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 30%, transparent); } 70% { box-shadow: 0 0 0 16px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* Core system — faint connection lines carrying slow red data particles. JS builds the (desktop / tablet only) and skips it under reduced-motion; lines paint behind the opaque module cards, so only the gaps show flow. */ .sys-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .sys-flow__line { stroke: color-mix(in srgb, var(--red) 20%, transparent); stroke-width: 1; fill: none; } .sys-flow__dots { stroke: var(--red); stroke-width: 3; stroke-linecap: round; fill: none; stroke-dasharray: 0.5 27; opacity: .75; animation: sysDots 3.4s linear infinite; } :root.dark .sys-flow__line { stroke: color-mix(in srgb, #ff9aa3 22%, transparent); } :root.dark .sys-flow__dots { stroke: #ff6e5b; } @keyframes sysDots { to { stroke-dashoffset: -27.5; } } /* ---------------- Comparison ---------------- */ .compare { display: grid; gap: 14px; } .compare-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; box-shadow: var(--sh-soft); } .compare-col.is-single { opacity: .96; } .compare-col.is-system { border: 2px solid var(--red); box-shadow: var(--sh-red); } .compare-col h3 { font-size: 18px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .compare-col.is-system h3 { color: var(--red); } :root.dark .compare-col.is-system h3 { color: #ff9aa3; } .compare-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14.5px; } .compare-row:first-of-type { border-top: none; } .compare-row .mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; margin-top: 1px; } .compare-row .mark.no { background: var(--soft-red); color: var(--red); } :root.dark .compare-row .mark.no { background: #2a1618; color: #ff9aa3; } .compare-row .mark.yes { background: color-mix(in srgb, var(--teal) 20%, var(--surface)); color: #0c6e76; } :root.dark .compare-row .mark.yes { color: var(--teal); background: #14302f; } .compare-row .crit { font-weight: 700; min-width: 76px; flex: none; color: var(--text); } /* ---------------- Proof / results ---------------- */ .proof-grid { display: grid; gap: 22px; align-items: center; } .proof-visual { position: relative; } .proof-visual .octe-img { box-shadow: var(--sh-soft); } .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; } .metric { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-chip); padding: 14px 10px; text-align: center; box-shadow: var(--sh-chip); } .metric .v { font-family: var(--font-head); font-weight: 800; font-size: clamp(20px,6vw,28px); color: var(--red); } :root.dark .metric .v { color: #ff9aa3; } .metric .k { font-size: 11.5px; color: var(--text-soft); font-weight: 600; } .case-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; box-shadow: var(--sh-soft); } .case-card .kicker { color: var(--teal); font-weight: 800; font-size: 13px; font-family: var(--font-head); } .case-card h3 { font-size: clamp(20px,5vw,26px); margin: 8px 0 10px; } .case-card p { color: var(--text-soft); font-size: 15px; margin-bottom: 16px; } /* ---------------- Process / How we work ---------------- */ /* Section canvas: very subtle top lighting + a soft vignette layered over the brand tint, kept faint so the cards stay the focus. Scoped to #process only, so the shared .section--tint (compare / about) is left untouched. */ #process { background: radial-gradient(1200px 460px at 50% -18%, rgba(255,255,255,.5), rgba(255,255,255,0) 62%), radial-gradient(125% 125% at 50% 44%, rgba(21,21,21,0) 60%, rgba(21,21,21,.05) 100%), var(--surface-tint); } :root.dark #process { background: radial-gradient(1200px 460px at 50% -18%, rgba(255,255,255,.06), rgba(255,255,255,0) 62%), radial-gradient(125% 125% at 50% 44%, rgba(0,0,0,0) 55%, rgba(0,0,0,.32) 100%), var(--surface-tint); } /* A little more breathing room under the heading block in this section. */ #process .sec-head { margin-bottom: clamp(38px, 6vw, 54px); } .process-flow { display: grid; gap: 22px; position: relative; } /* --- Step card ---------------------------------------------------------- */ .pstep { --pad: clamp(26px, 3.4vw, 34px); --off: 0px; /* vertical-rhythm offset, set per column */ position: relative; top: var(--off); background: var(--surface); border: 1px solid var(--line); border-radius: 28px; /* a touch larger — editorial, premium */ padding: var(--pad) clamp(24px, 3vw, 30px); box-shadow: var(--sh-soft); } /* minimal glass depth — a hair of top light, only read on the dark surface */ :root.dark .pstep { box-shadow: var(--sh-soft), inset 0 1px 0 rgba(255,255,255,.05); } /* Entrance keeps the staggered reveal (transform + opacity carry the per-card --rd delay); hover props run crisp at 300ms with no delay. The lift uses the individual `translate` property so it never collides with the reveal's transform. Higher specificity than .reveal so this transition set wins. */ .process-flow .pstep { transition: transform .7s var(--ease) var(--rd, 0s), opacity .7s var(--ease) var(--rd, 0s), translate .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } /* Restrained hover: a gentle 5px lift, a soft shadow bloom, a brand-tinted edge */ .pstep:hover { translate: 0 -5px; box-shadow: var(--sh-lift); border-color: color-mix(in srgb, #B10E1E 30%, var(--line)); } :root.dark .pstep:hover { box-shadow: var(--sh-lift), inset 0 1px 0 rgba(255,255,255,.06); } /* --- Card header: dark icon chip + refined step marker ------------------ */ .pstep__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: clamp(18px, 2.4vw, 24px); } /* Premium dark icon surface — fills with brand red on hover (no cyan block) */ .pstep__ic { width: 48px; height: 48px; border-radius: 14px; flex: none; display: grid; place-items: center; background: #18181B; border: 1px solid rgba(255,255,255,.10); color: #ECEAE4; transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } :root.dark .pstep__ic { background: #0f0f11; border-color: rgba(255,255,255,.12); } .pstep__ic svg { width: 22px; height: 22px; } .pstep:hover .pstep__ic { background: #B10E1E; border-color: #B10E1E; color: #fff; } /* Refined numbered marker (replaces the oversized ghost number) */ .pstep__step { display: inline-flex; align-items: center; gap: 7px; flex: none; font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .03em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-soft); padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--r-pill); transition: color .3s var(--ease), border-color .3s var(--ease); } .pstep__step::before { content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none; background: #B10E1E; /* small brand node — reads as a timeline point */ } .pstep:hover .pstep__step { color: var(--text); border-color: color-mix(in srgb, #B10E1E 26%, var(--line)); } /* --- Copy: clear title / description hierarchy -------------------------- */ .pstep__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(17px, 2.1vw, 19px); line-height: 1.32; letter-spacing: -.01em; color: var(--text); margin-bottom: 8px; } .pstep__desc { font-size: 14.5px; line-height: 1.75; color: var(--text-soft); } /* --- Delicate connective timeline (almost invisible) ------------------- */ /* A faint dotted segment sits in the gap at the icon-chip centre; the counter-offset (- --off) pins every segment to one baseline so a stepped card never breaks the line. Hidden on mobile and at the end of each row. */ .pstep::after { content: ""; display: none; position: absolute; top: calc(var(--pad) + 24px - var(--off)); inset-inline-start: calc(100% + 2px); width: 24px; height: 0; border-top: 1.5px dotted color-mix(in srgb, var(--text-soft) 45%, transparent); opacity: .55; pointer-events: none; } @media (min-width: 640px) { .process-flow { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } .process-flow .pstep:nth-child(2n) { --off: 16px; } .pstep::after { display: block; } .process-flow .pstep:nth-child(2n)::after { display: none; } } @media (min-width: 1024px) { .process-flow { grid-template-columns: repeat(3, 1fr); gap: 40px 28px; } .process-flow .pstep:nth-child(2n) { --off: 0px; } .process-flow .pstep:nth-child(3n+2) { --off: 16px; } .process-flow .pstep:nth-child(2n)::after { display: block; } .process-flow .pstep:nth-child(3n)::after { display: none; } } /* ---------------- Portfolio CTA ---------------- */ /* Offset the in-page jump-link target so it clears the ~67px sticky nav. The section's own top padding (56/88px) does most of the spacing, so only a small nudge is needed for a consistent landing gap across breakpoints. */ .portfolio-cta { scroll-margin-top: 32px; } @media (min-width: 768px) { .portfolio-cta { scroll-margin-top: 8px; } } .pf-panel { position: relative; overflow: hidden; background: radial-gradient(560px 320px at 88% 2%, rgba(31,182,193,.10), transparent 62%), radial-gradient(520px 340px at 2% 100%, rgba(255,110,91,.09), transparent 62%), var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--sh-soft); padding: 38px 22px; transition: box-shadow .4s var(--ease), border-color .4s var(--ease); } :root.dark .pf-panel { background: radial-gradient(560px 320px at 88% 2%, rgba(31,182,193,.16), transparent 62%), radial-gradient(520px 340px at 2% 100%, rgba(255,110,91,.12), transparent 62%), var(--surface); } .pf-panel:hover { box-shadow: var(--sh-lift); border-color: color-mix(in srgb, var(--red) 14%, var(--line)); } .pf-grid { position: relative; z-index: 2; display: grid; gap: 30px; align-items: center; } /* Copy column */ .pf-copy { text-align: center; } .pf-copy h2 { font-size: clamp(26px, 5.4vw, 42px); margin: 14px 0 12px; } .pf-copy > p { color: var(--text-soft); font-size: clamp(15px, 3.6vw, 17px); max-width: 520px; margin-inline: auto; } .pf-tags { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin: 20px 0 26px; } .pf-tags li { font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); padding: 7px 14px; border-radius: var(--r-pill); transition: transform .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); } .pf-tags li:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--red) 28%, var(--line)); color: var(--red); } :root.dark .pf-tags li:hover { color: #ff9aa3; } .pf-actions { display: flex; justify-content: center; } .pf-actions .btn { min-width: 216px; } /* Visual column — abstract portfolio-themed graphic */ .pf-visual { display: block; position: relative; } .pf-stage { position: relative; width: 100%; max-width: 440px; margin-inline: auto; aspect-ratio: 5 / 4; } .pf-stage::before { content: ""; position: absolute; inset: 12% 8%; z-index: 0; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--red) 18%, transparent), transparent 68%); filter: blur(28px); } /* Main "portfolio preview" card */ .pf-mock { position: absolute; inset-inline: 7%; top: 9%; z-index: 2; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sh-lift); padding: 14px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .pf-mock__head { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; } .pf-mock__head i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); } .pf-mock__head i:nth-child(1) { background: var(--coral); } .pf-mock__head i:nth-child(2) { background: var(--amber); } .pf-mock__head i:nth-child(3) { background: var(--teal); } .pf-mock__head span { margin-inline-start: auto; width: 72px; height: 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); } .pf-mock__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pf-tile { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; box-shadow: var(--sh-chip); transition: transform .45s var(--ease); } .pf-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.28), transparent 55%); } .pf-tile::after { content: ""; position: absolute; width: 42%; aspect-ratio: 1; border-radius: 50%; inset-block-end: 16%; inset-inline-end: 14%; background: rgba(255,255,255,.32); box-shadow: inset 0 0 0 2px rgba(255,255,255,.30); } .pf-tile--1 { background: linear-gradient(135deg, var(--red-bright), var(--red)); } .pf-tile--2 { background: linear-gradient(135deg, var(--teal), #0c7d86); } .pf-tile--3 { background: linear-gradient(135deg, var(--amber), #e08526); } .pf-tile--4 { background: linear-gradient(135deg, var(--indigo), #3d3db2); } .pf-tile--5 { background: linear-gradient(135deg, var(--coral), #e0513f); } .pf-tile--6 { background: linear-gradient(135deg, #3a3a3a, #1f1f1f); } .pf-tile--2::after, .pf-tile--5::after { inset-inline: 16% auto; width: 34%; border-radius: 6px; aspect-ratio: 1 / 1.9; inset-block-end: 18%; } /* Floating "featured" star badge */ .pf-badge { position: absolute; z-index: 3; top: 3%; inset-inline-end: 4%; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-soft); color: var(--amber); animation: pf-float 5.5s var(--ease) infinite; } /* Floating mini project chip */ .pf-chip { position: absolute; z-index: 3; bottom: 4%; inset-inline-start: 2%; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-soft); animation: pf-float 6.5s var(--ease) infinite .6s; } .pf-chip__orb { width: 26px; height: 26px; border-radius: 9px; flex: none; background: linear-gradient(135deg, var(--teal), var(--indigo)); box-shadow: var(--sh-chip); } .pf-chip__lines { display: grid; gap: 5px; } .pf-chip__lines b { display: block; width: 48px; height: 7px; border-radius: 999px; background: var(--line-strong); } .pf-chip__lines i { display: block; width: 30px; height: 6px; border-radius: 999px; background: var(--line); } /* Accent sparks */ .pf-spark { position: absolute; border-radius: 50%; z-index: 1; } .pf-spark--1 { width: 10px; height: 10px; background: var(--amber); top: 20%; inset-inline-start: 3%; animation: pf-float 4.8s var(--ease) infinite .2s; } .pf-spark--2 { width: 8px; height: 8px; background: var(--teal); bottom: 26%; inset-inline-end: 8%; animation: pf-float 5.2s var(--ease) infinite .9s; } .pf-spark--3 { width: 7px; height: 7px; background: var(--coral); top: 8%; inset-inline-start: 26%; animation: pf-float 6s var(--ease) infinite .4s; } /* Hover choreography — the whole panel reacts, the visual reacts more */ .pf-panel:hover .pf-mock { transform: translateY(-6px); box-shadow: 0 40px 72px -22px rgba(21,21,21,.28); } .pf-panel:hover .pf-tile { transform: scale(1.05); } .pf-panel:hover .pf-tile--2, .pf-panel:hover .pf-tile--4 { transition-delay: .05s; } .pf-panel:hover .pf-tile--3, .pf-panel:hover .pf-tile--6 { transition-delay: .1s; } .pf-visual:hover .pf-mock { transform: translateY(-10px); } .pf-visual:hover .pf-badge { transform: translate(4px, -4px); } html[lang="en"] .pf-visual:hover .pf-badge { transform: translate(-4px, -4px); } .pf-visual:hover .pf-chip { transform: translate(-4px, 4px); } html[lang="en"] .pf-visual:hover .pf-chip { transform: translate(4px, 4px); } :root.dark .pf-panel:hover .pf-mock { box-shadow: 0 40px 72px -22px rgba(0,0,0,.7); } @keyframes pf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @media (min-width: 900px) { .pf-panel { padding: 56px 56px; } .pf-grid { grid-template-columns: 1.02fr .98fr; gap: 48px; } .pf-copy { text-align: start; } .pf-copy > p { margin-inline: 0; } .pf-tags, .pf-actions { justify-content: flex-start; } .pf-stage { max-width: 420px; } } /* ---------------- Risk reduction ---------------- */ .risk-grid { display: grid; gap: 16px; margin-bottom: 22px; } .risk-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; box-shadow: var(--sh-soft); text-align: center; } .risk-card .ic-tile { margin-inline: auto; margin-bottom: 14px; } .risk-card h3 { font-size: 18px; margin-bottom: 7px; } .risk-card p { color: var(--text-soft); font-size: 14px; } .scarcity { display: flex; align-items: flex-start; gap: 12px; justify-content: center; text-align: center; background: var(--surface-tint); border-radius: var(--r-card); padding: 18px 20px; font-size: 14.5px; color: var(--text); max-width: 760px; margin-inline: auto; } .scarcity .pulse { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--red); margin-top: 5px; animation: pulse 2s infinite; } /* ---------------- CTA band ---------------- */ .cta-band { margin: 56px 8px 0; } .cta-inner { background: radial-gradient(circle at 80% 15%, var(--red-bright), var(--red)); border-radius: var(--r-panel); padding: 44px 26px; text-align: center; color: var(--warm-white); position: relative; overflow: hidden; box-shadow: var(--sh-red); } .cta-inner h2 { font-size: clamp(24px, 6vw, 42px); margin-bottom: 12px; color: var(--warm-white); } .cta-inner p { font-size: 16px; opacity: .94; max-width: 560px; margin-inline: auto; margin-bottom: 24px; } .cta-inner .blob { background: rgba(255,253,248,.12); filter: blur(4px); } .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* ---------------- Footer ---------------- */ footer.site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 52px 0 26px; margin-top: 64px; } .foot-grid { display: grid; gap: 30px; margin-bottom: 34px; } .foot-brand .brand { color: var(--footer-text); } .foot-brand .brand b { color: var(--coral); } /* Footer sits on charcoal in both themes -> keep the logo white */ .foot-brand .brand-logo { height: 40px; filter: brightness(0) invert(1); } .foot-brand p { color: var(--footer-soft); font-size: 14px; margin-top: 14px; max-width: 320px; } .foot-social { display: flex; gap: 10px; margin-top: 16px; } .foot-social a { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.07); display: grid; place-items: center; font-size: 16px; transition: background .2s, transform .2s; } .foot-social a:hover { background: var(--red); transform: translateY(-3px); } .foot-col h4 { font-family: var(--font-head); font-size: 16px; margin-bottom: 14px; color: var(--footer-text); } .foot-col a { display: block; color: var(--footer-soft); font-size: 14px; margin-bottom: 10px; transition: color .2s; } .foot-col a:hover { color: var(--coral); } .foot-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; color: var(--footer-soft); font-size: 13px; } /* ---------------- Scroll reveal + motion ---------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } .float { animation: float 6s ease-in-out infinite; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(129,0,15,.5); } 70% { box-shadow: 0 0 0 12px rgba(129,0,15,0); } 100% { box-shadow: 0 0 0 0 rgba(129,0,15,0); } } /* ===================================================================== Responsive — tablet (>=768px) ===================================================================== */ @media (min-width: 768px) { :root { --gutter: 32px; } .section { padding-block: 88px; } .sec-head { margin-bottom: 48px; } .hero { padding-block: 56px 16px; } .hero-grid { grid-template-columns: .98fr 1.02fr; gap: 36px; } .hero-cta .btn { flex: 0 1 auto; } .trust-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } .problem-grid { grid-template-columns: repeat(3, 1fr); } .compare { grid-template-columns: 1fr 1fr; } .proof-grid { grid-template-columns: 1.05fr 1fr; gap: 40px; } .risk-grid { grid-template-columns: repeat(3, 1fr); } .cta-band { margin-inline: 8px; } .cta-inner { padding: 60px 48px; } .foot-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; } .foot-bottom { flex-direction: row; justify-content: space-between; } /* System map: nodes left + right of a central core */ .system { grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .core { grid-column: 1 / -1; order: -1; } } @media (min-width: 1100px) { .nav-cta { display: inline-flex; font-size: 13px !important; padding: 10px 18px !important; min-height: 40px !important; white-space: nowrap; } .menu-toggle { display: none; } .mobile-menu { display: none; } .nav-links { display: flex; gap: 18px; margin-inline-start: 24px; font-weight: 600; font-size: 14.5px; } .nav-links a { color: var(--text-soft); transition: color .2s; } .nav-links a:hover, .nav-links a.active { color: var(--red); } :root.dark .nav-links a:hover, :root.dark .nav-links a.active { color: #ff9aa3; } } /* ===================================================================== Responsive — desktop (>=1024px) ===================================================================== */ @media (min-width: 1024px) { .section { padding-block: 104px; } .hero h1 { margin-top: 8px; } /* System map: 3 columns with the core in the middle */ .system { grid-template-columns: 1fr 1.15fr 1fr; gap: 20px; align-items: center; } .core { grid-column: 2; order: 0; } .core-orb { width: 168px; height: 168px; } .core-orb span { font-size: 20px; } .system .node-col { gap: 18px; } /* :first/last-of-type (not -child) so the JS data-flow overlay, when inserted as .system's first child, never shifts these column assignments. */ .system .node-col:first-of-type { grid-column: 1; } .system .node-col:last-of-type { grid-column: 3; } } /* ===================================================================== Accordion (FAQ + buying questions) ===================================================================== */ .accordion { display: grid; gap: 12px; max-width: 820px; margin-inline: auto; } .acc-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-chip); overflow: hidden; } .acc-head { width: 100%; text-align: start; background: none; border: none; padding: 18px 20px; font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; min-height: 56px; } .acc-head .chev { transition: transform .25s var(--ease); color: var(--red); flex: none; font-size: 24px; line-height: 1; } :root.dark .acc-head .chev { color: #ff9aa3; } .acc-item.open .acc-head .chev { transform: rotate(45deg); } .acc-body { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); } .acc-item.open .acc-body { max-height: 480px; } .acc-body p { padding: 0 20px 18px; color: var(--text-soft); font-size: 15px; line-height: 1.75; } /* ===================================================================== Services list + single service ===================================================================== */ .services-core { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-bottom: 40px; } .services-grid { display: grid; gap: 18px; } .svc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-soft); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .svc-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lift); } .svc-card .svc-img .octe-img { border-radius: 0; } .svc-card .svc-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .svc-card .svc-head { display: flex; align-items: center; gap: 12px; } .svc-card h3 { font-size: 19px; } .svc-card p { color: var(--text-soft); font-size: 14.5px; flex: 1; } .svc-card .go-link { color: var(--red); font-weight: 700; font-family: var(--font-head); font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; } :root.dark .svc-card .go-link { color: #ff9aa3; } /* Whole card clickable — primary link stretches across the entire card */ .svc-card { position: relative; cursor: pointer; } .svc-card .svc-body .go-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .svc-card:hover .svc-body .go-link { text-decoration: underline; } .service-hero { display: grid; gap: 24px; align-items: center; } .service-hero .octe-img { box-shadow: var(--sh-soft); } .svc-sections { display: grid; gap: 18px; } .svc-section-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; box-shadow: var(--sh-soft); } .svc-section-card .lbl { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800; font-size: 13px; color: var(--red); background: var(--surface-tint); padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: 12px; } :root.dark .svc-section-card .lbl { color: #ff9aa3; } .svc-section-card p { color: var(--text-soft); font-size: 15.5px; line-height: 1.7; } @media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .service-hero { grid-template-columns: 1fr 1fr; } .svc-sections { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } } /* ===================================================================== Forms + Contact page ===================================================================== */ .contact-sec { position: relative; overflow: hidden; } .contact-head { text-align: start; margin-inline: 0; max-width: 760px; } .contact-grid { display: grid; gap: 18px; align-items: start; } .form-card, .quick-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; box-shadow: var(--sh-soft); } .form-card h2, .quick-card h2 { font-size: 22px; margin-bottom: 16px; } .field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; } .field-row { display: grid; gap: 14px; } .field-row-3 { display: grid; gap: 14px; } .field .req { color: var(--red); font-weight: 700; } .form-micro { font-size: 13px; color: var(--text-soft); margin: -8px 0 14px; line-height: 1.5; } .field label { font-weight: 700; font-size: 14px; } .field .opt { color: var(--text-soft); font-weight: 500; font-size: 12px; } .field input, .field select, .field textarea { width: 100%; font-family: inherit; font-size: 15px; color: var(--text); background: var(--bg); border: 1.5px solid var(--line-strong); border-radius: 14px; padding: 13px 14px; min-height: 48px; transition: border-color .2s, box-shadow .2s; } .field textarea { min-height: 120px; resize: vertical; line-height: 1.6; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(129,0,15,.12); } .field .err { color: var(--red); font-size: 13px; font-weight: 600; } :root.dark .field .err { color: #ff9aa3; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .alert { border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; } .alert-success { background: color-mix(in srgb, var(--teal) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--teal) 35%, transparent); } .alert-success h2 { color: #0c6e76; margin-bottom: 6px; } :root.dark .alert-success h2 { color: var(--teal); } .alert-error { background: var(--soft-red); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); font-weight: 600; } :root.dark .alert-error { background: #2a1618; color: #ff9aa3; } .quick-card .quick-visual { margin-bottom: 16px; } .quick-card .muted { color: var(--text-soft); font-size: 14px; margin-bottom: 16px; } .quick-list { display: grid; gap: 12px; margin: 18px 0; } .quick-list li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; } .quick-list .ic-tile { width: 42px; height: 42px; border-radius: 12px; } .quick-card .hours { font-size: 13px; color: var(--text-soft); margin-bottom: 14px; } .promises { display: flex; flex-wrap: wrap; gap: 8px 16px; } .promises span { font-size: 13px; font-weight: 600; color: var(--text); } @media (min-width: 768px) { .contact-grid { grid-template-columns: 1.25fr 1fr; gap: 24px; } .field-row { grid-template-columns: 1fr 1fr; } .field-row-3 { grid-template-columns: 1fr 1fr 1fr; } } /* ===================================================================== Portfolio + Case study + About + Legal ===================================================================== */ .portfolio-grid { display: grid; gap: 18px; } .proj-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-soft); display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .proj-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lift); } .proj-card .octe-img { border-radius: 0; } .proj-card .proj-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .proj-chip { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, transparent); padding: 4px 11px; border-radius: var(--r-pill); } .proj-chip.case { color: var(--red); background: var(--surface-tint); } :root.dark .proj-chip.case { color: #ff9aa3; } .proj-card h3 { font-size: 18px; } .proj-card p { font-size: 14px; color: var(--text-soft); flex: 1; } .proj-card .go-link { color: var(--red); font-weight: 700; font-family: var(--font-head); font-size: 14px; display: inline-flex; gap: 6px; } :root.dark .proj-card .go-link { color: #ff9aa3; } .cs-hero { display: grid; gap: 22px; align-items: center; } .cs-hero .octe-img { box-shadow: var(--sh-soft); } .cs-blocks { display: grid; gap: 18px; max-width: 860px; } .cs-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; box-shadow: var(--sh-soft); } .cs-block h2 { font-size: 21px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; } .cs-block p { color: var(--text-soft); font-size: 16px; line-height: 1.7; } .cs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .cs-tags span { font-size: 12.5px; font-weight: 600; background: var(--surface-tint); color: var(--text); padding: 5px 12px; border-radius: var(--r-pill); } .about-grid { display: grid; gap: 24px; align-items: center; } .about-grid .octe-img { box-shadow: var(--sh-soft); } .values-grid { display: grid; gap: 16px; } .value-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; box-shadow: var(--sh-soft); } .value-card .ic-tile { margin-bottom: 14px; } .value-card h3 { font-size: 18px; margin-bottom: 7px; } .value-card p { color: var(--text-soft); font-size: 14.5px; } .legal { max-width: 820px; margin-inline: auto; } .legal .updated { color: var(--text-soft); font-size: 13px; margin-bottom: 24px; } .legal h2 { font-size: 20px; margin: 24px 0 8px; } .legal p { color: var(--text-soft); font-size: 15.5px; line-height: 1.8; margin-bottom: 8px; } @media (min-width: 768px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } .cs-hero { grid-template-columns: 1fr 1fr; } .about-grid { grid-template-columns: 1fr 1fr; } .values-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); } .values-grid { grid-template-columns: repeat(4, 1fr); } } /* ===================================================================== Accessibility — reduced motion ===================================================================== */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* ---------------- Article / insight content ---------------- */ /* ===================================================================== Phase 8.5 — Industry page components ===================================================================== */ /* --- Industry container override --- */ .industry-section .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .industry-section { padding: 72px 0; } @media (max-width: 767px) { .industry-section { padding: 44px 0; } } /* --- Industry hero --- */ .industry-hero { padding: 88px 0; } @media (max-width: 767px) { .industry-hero { padding: 56px 0; } } .industry-hero .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .industry-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } @media (max-width: 991px) { .industry-hero-grid { grid-template-columns: 1fr; gap: 32px; } } .industry-hero-copy { display: flex; flex-direction: column; gap: 20px; max-width: 540px; } .industry-hero-copy .sec-tag { align-self: flex-start; margin: 0; background: var(--surface-tint); color: var(--accent); padding: 6px 14px; border-radius: 20px; font-weight: 600; font-size: 13px; } .industry-hero-copy h1 { margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.2; font-weight: 800; } .industry-hero-copy .hero-intro { font-size: 18px; color: var(--text-soft); line-height: 1.8; margin: 0; max-width: 480px; } .industry-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; } .industry-hero-media { border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, var(--surface-tint), var(--surface-2)); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0,0,0,0.05); } .industry-hero-media img { width: 100%; height: 100%; object-fit: cover; } /* Unified Placeholders */ .industry-placeholder, .insight-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--surface-tint), var(--surface-2)); color: var(--text-soft); opacity: 0.6; min-height: 180px; } .industry-placeholder svg, .insight-placeholder svg { width: 32px; height: 32px; opacity: 0.8; } /* Industry Problem Card */ .industry-section { padding: 88px 0; } @media (max-width: 767px) { .industry-section { padding: 56px 0; } } .industry-section .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .industry-section-head { text-align: center; margin-bottom: 48px; max-width: 680px; margin-left: auto; margin-right: auto; } .industry-section-head h2 { margin: 0 0 12px; font-size: clamp(28px, 3vw, 36px); } .industry-section-head p { margin: 0; color: var(--text-soft); font-size: 16px; line-height: 1.7; } .industry-problem-card { display: flex; gap: 24px; align-items: flex-start; background: linear-gradient(145deg, var(--card-bg), var(--surface-tint)); border: 1px solid var(--border); border-radius: 20px; padding: 40px; max-width: 800px; margin: 0 auto; box-shadow: 0 8px 24px rgba(0,0,0,0.03); } @media (max-width: 599px) { .industry-problem-card { flex-direction: column; padding: 24px; } } .industry-problem-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; background: var(--card-bg); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--accent); border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.04); } .industry-problem-text { line-height: 1.8; color: var(--text-main); margin: 0; font-size: 16px; font-weight: 500; } /* Industry Arms Grid (Cards) */ .industry-arms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 991px) { .industry-arms-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .industry-arms-grid { grid-template-columns: 1fr; } } .industry-arm-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 32px 24px; display: flex; flex-direction: column; gap: 16px; transition: box-shadow 0.3s ease, transform 0.3s ease; height: 100%; } .industry-arm-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); transform: translateY(-4px); border-color: var(--accent); } .industry-arm-icon { display: inline-flex; margin-bottom: 8px; } .industry-arm-card h3 { font-size: 18px; margin: 0; font-weight: 700; } .industry-arm-card p { font-size: 15px; color: var(--text-soft); margin: 0; line-height: 1.7; flex-grow: 1; } .industry-arm-link { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .industry-arm-link:hover { text-decoration: underline; } /* First 30 Days (Timeline Cards) */ .industry-timeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 991px) { .industry-timeline-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .industry-timeline-grid { grid-template-columns: 1fr; } } .industry-timeline-card { background: var(--surface-tint); border: 1px solid var(--border); border-radius: 16px; padding: 32px 24px; position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; overflow: hidden; } .industry-timeline-num { font-size: 80px; font-weight: 900; color: var(--accent); opacity: 0.08; position: absolute; top: -10px; right: 16px; line-height: 1; pointer-events: none; } [dir="rtl"] .industry-timeline-num { right: auto; left: 16px; } .industry-timeline-card h4 { margin: 0; font-size: 18px; font-weight: 700; position: relative; z-index: 1; } .industry-timeline-card p { margin: 0; font-size: 15px; color: var(--text-soft); line-height: 1.7; position: relative; z-index: 1; flex-grow: 1; } /* KPIs (Metric Cards) */ .industry-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 991px) { .industry-kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .industry-kpi-grid { grid-template-columns: 1fr; } } .industry-kpi-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 32px 24px; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,0.03); display: flex; flex-direction: column; gap: 8px; justify-content: center; } .industry-kpi-value { display: block; font-size: clamp(32px, 4vw, 42px); font-weight: 800; color: var(--accent); line-height: 1.1; } .industry-kpi-label { display: block; font-size: 15px; color: var(--text-soft); font-weight: 500; } /* FAQ Accordion */ .industry-faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .industry-faq-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: box-shadow 0.2s; } .industry-faq-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.04); } .industry-faq-q { padding: 24px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; list-style: none; font-size: 17px; user-select: none; color: var(--text-main); } .industry-faq-q::-webkit-details-marker { display: none; } .industry-faq-q::after { content: '+'; font-size: 24px; font-weight: 400; color: var(--accent); flex-shrink: 0; transition: transform 0.3s ease; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--surface-tint); border-radius: 50%; } .industry-faq-item[open] .industry-faq-q::after { transform: rotate(45deg); background: var(--accent); color: #fff; } .industry-faq-a { padding: 0 24px 24px; font-size: 15px; color: var(--text-soft); line-height: 1.8; } .industry-faq-a p { margin: 0; } /* Final CTA */ .industry-cta { padding: 88px 0; } @media (max-width: 767px) { .industry-cta { padding: 56px 0; } } .industry-cta .container { max-width: 800px; margin: 0 auto; padding: 0 24px; } .industry-cta-card { background: linear-gradient(135deg, var(--card-bg) 0%, var(--surface-tint) 100%); border: 1px solid var(--border); border-radius: 24px; padding: 56px 40px; text-align: center; box-shadow: 0 12px 32px rgba(0,0,0,0.05); } @media (max-width: 599px) { .industry-cta-card { padding: 40px 24px; } } .industry-cta-card h2 { margin: 0 0 16px; font-size: clamp(28px, 3.5vw, 36px); } .industry-cta-card p { color: var(--text-soft); margin: 0 0 32px; font-size: 18px; line-height: 1.6; max-width: 500px; margin-left: auto; margin-right: auto; } /* ===================================================================== Industries Grid (Listing Page UI Polish) ===================================================================== */ .industries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media (max-width: 991px) { .industries-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 767px) { .industries-grid { grid-template-columns: 1fr; } } .industry-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.3s ease, transform 0.3s ease; height: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.02); } .industry-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.08); transform: translateY(-4px); border-color: var(--accent); } .industry-card-image { height: 220px; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; position: relative; } @media (max-width: 991px) { .industry-card-image { height: 180px; } } @media (max-width: 767px) { .industry-card-image { height: 160px; } } .industry-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .industry-card:hover .industry-card-image img { transform: scale(1.05); } .industry-card-body { padding: 32px 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; } .industry-card-body h3 { font-size: 22px; margin: 0; font-weight: 700; line-height: 1.3; } .industry-card-body p { font-size: 15px; color: var(--text-soft); margin: 0; line-height: 1.7; flex: 1; } .industry-card-services { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .industry-card-services .badge { background: var(--surface-tint); color: var(--text-main); font-size: 13px; padding: 6px 14px; border-radius: 20px; font-weight: 500; border: 1px solid var(--border); } .industry-card-cta { margin-top: auto; padding-top: 20px; display: flex; justify-content: flex-start; } .industry-card-cta .go-link { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .industry-card-cta .go-link:hover { text-decoration: underline; } /* Whole card clickable — primary link stretches across the entire card */ .industry-card { position: relative; cursor: pointer; } .industry-card-cta .go-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .industry-card:hover .industry-card-cta .go-link { text-decoration: underline; } /* ===================================================================== Phase 8.7 UI Polish & Spacing Refinement ===================================================================== */ :root { --bg-warm: #FFFDF8; --bg-soft-red: rgba(193, 18, 31, 0.04); } [data-theme="dark"] { --bg-warm: #1A1A1A; --bg-soft-red: rgba(193, 18, 31, 0.06); } /* 1. General Spacing & Container */ .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .section { padding: 88px 0; } @media (max-width: 767px) { .section { padding: 56px 0; } } .sec-head { margin-bottom: 44px; text-align: center; } @media (max-width: 767px) { .sec-head { margin-bottom: 32px; } } .article-hero { padding: 48px 0 32px; background: radial-gradient(circle at 50% 0%, rgba(193, 18, 31, 0.03) 0%, transparent 60%); text-align: center; border-bottom: 1px solid var(--border); } .article-hero-meta { margin-bottom: 16px; } .article-header-wrapper { max-width: 860px; margin: 0 auto; } .article-header-wrapper h1 { font-size: 36px; line-height: 1.3; margin-bottom: 16px; font-weight: 800; } .article-media-wrapper { max-width: 860px; margin: 32px auto; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, var(--surface-tint), var(--bg-soft-red)); border: 1px solid var(--border); } .article-media-wrapper.placeholder { height: 340px; display: flex; align-items: center; justify-content: center; color: var(--text-soft); opacity: 0.8; } .article-body { max-width: 760px; margin: 40px auto; font-size: 18px; line-height: 1.9; color: var(--text-main); } .article-body h2 { font-size: 28px; margin: 48px 0 24px; color: var(--text-strong); } .article-body h3 { font-size: 22px; margin: 32px 0 16px; color: var(--text-strong); } .article-body p { margin-bottom: 24px; } .article-body a { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(193, 18, 31, 0.3); text-underline-offset: 4px; } .article-body a:hover { text-decoration-color: var(--accent); } .article-body ul, .article-body ol { margin: 24px 0 32px; padding-inline-start: 24px; background: var(--surface-tint); border-radius: 12px; padding: 24px 40px; border: 1px solid var(--border); } .article-body li { margin-bottom: 12px; } .article-body blockquote { margin: 32px 0; padding: 24px 32px; background: var(--bg-soft-red); border-right: 4px solid var(--accent); border-radius: 12px; font-size: 20px; font-style: italic; color: var(--text-strong); } html[dir="ltr"] .article-body blockquote { border-right: none; border-left: 4px solid var(--accent); } /* 4. Insights Grid (insights.php & Related) */ .insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media (max-width: 991px) { .insights-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 767px) { .insights-grid { grid-template-columns: 1fr; } } .insight-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 16px rgba(0,0,0,0.02); } .insight-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.06); border-color: rgba(193, 18, 31, 0.3); } .insight-card-img { height: 220px; background: linear-gradient(135deg, var(--surface-tint), var(--bg-soft-red)); position: relative; overflow: hidden; } .insight-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .insight-card:hover .insight-card-img img { transform: scale(1.05); } .insight-card-img.placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-soft); } .insight-card-body { padding: 32px 24px; display: flex; flex-direction: column; flex: 1; } .insight-card-meta { font-size: 13px; color: var(--text-soft); margin-bottom: 12px; display: flex; gap: 12px; align-items: center; } .insight-card-cat { background: var(--bg-soft-red); color: var(--accent); padding: 4px 10px; border-radius: 12px; font-weight: 600; text-transform: uppercase; } .insight-card-body h3 { font-size: 20px; font-weight: 700; color: var(--text-strong); margin: 0 0 12px; line-height: 1.4; } .insight-card-excerpt { font-size: 15px; color: var(--text-soft); line-height: 1.6; margin: 0 0 24px; flex: 1; } .insight-card-footer { border-top: 1px solid var(--border); padding-top: 16px; display: flex; justify-content: flex-end; } .insight-card-footer .go-link { font-weight: 600; color: var(--accent); text-decoration: none; display: flex; align-items: center; gap: 6px; } .insight-card-footer .go-link:hover { text-decoration: underline; } /* Whole card clickable — primary link stretches across the entire card */ .insight-card { position: relative; cursor: pointer; } .insight-card-footer .go-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .insight-card:hover .insight-card-footer .go-link { text-decoration: underline; } /* ===================================================================== Phase 9 — Complete Responsive Design System Mobile-first responsive overhaul. 320px → 1440px+. No business logic changes. Preserves RTL, dark/light, all features. ===================================================================== */ /* ---------- Global overflow protection ---------- */ /* `clip` prevents horizontal scroll but keeps / from becoming scroll containers, which would defeat `position: sticky` on the site header (.nav). */ html { overflow-x: clip; } body { overflow-x: clip; } /* ---------- Body scroll lock when mobile menu is open ---------- */ body.menu-open { overflow: hidden; position: fixed; inset: 0; } /* Restore scroll position after closing (JS restores scrollTop) */ /* ---------- Mobile menu backdrop overlay ---------- */ .mobile-menu-backdrop { position: fixed; inset: 0; z-index: 98; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; -webkit-tap-highlight-color: transparent; } .mobile-menu-backdrop.open { opacity: 1; visibility: visible; } /* ---------- Improved mobile menu panel ---------- */ .mobile-menu { position: fixed; inset: 66px 0 0 0; z-index: 99; background: var(--surface); border-bottom: none; box-shadow: var(--sh-soft); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform .32s var(--ease), opacity .32s var(--ease), visibility .32s; padding: 14px var(--gutter) 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: calc(100vh - 66px); max-height: calc(100dvh - 66px); } .mobile-menu.open { transform: translateY(0); opacity: 1; visibility: visible; } .mobile-menu a { display: block; padding: 14px 12px; font-family: var(--font-head); font-weight: 700; font-size: 17px; border-bottom: 1px solid var(--line); color: var(--text); min-height: 48px; display: flex; align-items: center; transition: color .15s var(--ease), background .15s var(--ease); border-radius: 10px; margin-bottom: 2px; } .mobile-menu a:last-of-type { border-bottom: none; } .mobile-menu a.active { color: var(--red); background: var(--surface-tint); } .mobile-menu a:active { background: var(--surface-tint); } .mobile-menu .btn { margin-top: 14px; min-height: 52px; font-size: 16px; } /* ---------- Touch-friendly nav buttons ---------- */ .icon-btn, .lang-btn, .menu-toggle { min-width: 44px; min-height: 44px; } .btn { min-height: 48px; } /* Footer links/social: comfortable ≥44px tap targets on mobile only (desktop unchanged) */ @media (max-width: 767px) { .foot-social a { width: 44px; height: 44px; } .foot-col a { min-height: 44px; display: flex; align-items: center; padding-block: 8px; margin-bottom: 2px; } } /* ===================================================================== Responsive — Tiny phones (≤ 374px) ===================================================================== */ @media (max-width: 374px) { :root { --gutter: 14px; } .section { padding-block: 40px; } .sec-head { margin-bottom: 24px; } .sec-head h2 { font-size: 22px; } .sec-head p { font-size: 14px; } /* Hero */ .hero { padding-block: 24px 4px; } .hero h1 { font-size: 26px; } .hero .lead { font-size: 14px; } .hero-cta { flex-direction: column; } .hero-cta .btn { width: 100%; } .eyebrow { font-size: 11px; padding: 6px 12px; } /* Trust strip */ .trust-grid { grid-template-columns: 1fr; gap: 10px; } .trust-card { padding: 14px 12px; } .trust-card .num { font-size: 22px; } .trust-card .lbl { font-size: 11px; } /* Problem / Risk */ .problem-grid { grid-template-columns: 1fr; } .risk-grid { grid-template-columns: 1fr; } .problem-card { padding: 18px; } .risk-card { padding: 18px; } /* System map */ .system { grid-template-columns: 1fr; } .core-orb { width: 110px; height: 110px; } .core-orb span { font-size: 14px; } .node { padding: 14px; } .node .meta h3 { font-size: 14.5px; } .node .meta p { font-size: 12px; } /* Comparison */ .compare { grid-template-columns: 1fr; } .compare-col { padding: 16px; } /* Process */ .process-flow { grid-template-columns: 1fr; gap: 16px; } .process-flow .pstep { --off: 0px !important; } .pstep { padding: 20px 16px; } .pstep__title { font-size: 16px; } .pstep__desc { font-size: 13px; } .pstep::after { display: none !important; } /* Proof */ .proof-grid { grid-template-columns: 1fr; } .metrics { grid-template-columns: repeat(3, 1fr); gap: 6px; } .metric { padding: 10px 6px; } .metric .v { font-size: 18px; } .metric .k { font-size: 10px; } /* Portfolio CTA */ .pf-panel { padding: 24px 14px; } .pf-copy h2 { font-size: 22px; } .pf-tags { gap: 6px; } .pf-tags li { font-size: 11px; padding: 5px 10px; } /* CTA band */ .cta-band { margin-inline: 4px; } .cta-inner { padding: 30px 16px; } .cta-inner h2 { font-size: 22px; } .cta-inner p { font-size: 14px; } /* Footer */ .foot-grid { grid-template-columns: 1fr; gap: 24px; } .foot-bottom { flex-direction: column; gap: 10px; text-align: center; } footer.site-footer { padding: 36px 0 22px; } /* Accordion */ .acc-head { padding: 14px 14px; font-size: 14.5px; min-height: 48px; } .acc-body p { padding: 0 14px 14px; font-size: 14px; } /* Services */ .services-grid { grid-template-columns: 1fr; } .svc-sections { grid-template-columns: 1fr; } .service-hero { grid-template-columns: 1fr; } /* About */ .about-grid { grid-template-columns: 1fr; } .values-grid { grid-template-columns: 1fr; } .value-card { padding: 18px; } /* Contact */ .contact-grid { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } .field-row-3 { grid-template-columns: 1fr; } .form-card, .quick-card { padding: 18px; } .field input, .field select, .field textarea { font-size: 16px; /* prevents iOS zoom */ } /* Portfolio */ .portfolio-grid { grid-template-columns: 1fr; } .cs-hero { grid-template-columns: 1fr; } /* Industry */ .industry-hero-grid { grid-template-columns: 1fr; gap: 20px; } .industry-hero { padding: 36px 0; } .industry-hero-copy h1 { font-size: 26px; } .industry-hero-actions { flex-direction: column; } .industry-hero-actions .btn { width: 100%; } .industry-arms-grid { grid-template-columns: 1fr; gap: 14px; } .industry-timeline-grid { grid-template-columns: 1fr; gap: 14px; } .industry-kpi-grid { grid-template-columns: 1fr; gap: 14px; } .industry-arm-card { padding: 22px 18px; } /* Insights */ .insights-grid { grid-template-columns: 1fr; } .insight-card-img { height: 180px; } .insight-card-body { padding: 20px 16px; } .insight-card-body h3 { font-size: 17px; } /* Article */ .article-header-wrapper h1 { font-size: 24px; } .article-body { font-size: 16px; margin: 24px auto; padding: 0 4px; } .article-body h2 { font-size: 22px; margin: 32px 0 16px; } .article-body h3 { font-size: 18px; margin: 24px 0 12px; } .article-body ul, .article-body ol { padding: 16px 24px; } .article-body blockquote { padding: 16px 20px; font-size: 17px; } } /* ===================================================================== Responsive — Small phones (375px – 479px) ===================================================================== */ @media (min-width: 375px) and (max-width: 479px) { :root { --gutter: 16px; } .section { padding-block: 44px; } .sec-head { margin-bottom: 28px; } /* Hero */ .hero-cta { flex-direction: column; } .hero-cta .btn { width: 100%; } /* Trust */ .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .trust-card .num { font-size: 22px; } /* Problem / Risk */ .problem-grid { grid-template-columns: 1fr; } .risk-grid { grid-template-columns: 1fr; } /* System */ .system { grid-template-columns: 1fr; } /* Comparison */ .compare { grid-template-columns: 1fr; } /* Process */ .process-flow { grid-template-columns: 1fr; gap: 16px; } .process-flow .pstep { --off: 0px !important; } .pstep::after { display: none !important; } /* Proof */ .proof-grid { grid-template-columns: 1fr; } /* Footer */ .foot-grid { grid-template-columns: 1fr; gap: 24px; } .foot-bottom { flex-direction: column; gap: 10px; } footer.site-footer { padding: 40px 0 22px; } /* Portfolio CTA */ .pf-panel { padding: 28px 18px; } /* CTA */ .cta-inner { padding: 34px 20px; } /* Contact */ .contact-grid { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } .field-row-3 { grid-template-columns: 1fr; } .field input, .field select, .field textarea { font-size: 16px; } /* Services */ .services-grid { grid-template-columns: 1fr; } .service-hero { grid-template-columns: 1fr; } .svc-sections { grid-template-columns: 1fr; } /* About / Portfolio */ .about-grid { grid-template-columns: 1fr; } .values-grid { grid-template-columns: 1fr; } .portfolio-grid { grid-template-columns: 1fr; } .cs-hero { grid-template-columns: 1fr; } /* Industry */ .industry-hero-grid { grid-template-columns: 1fr; gap: 24px; } .industry-arms-grid { grid-template-columns: 1fr; } .industry-timeline-grid { grid-template-columns: 1fr; } .industry-kpi-grid { grid-template-columns: 1fr; } /* Insights */ .insights-grid { grid-template-columns: 1fr; } .insight-card-img { height: 190px; } } /* ===================================================================== Responsive — Large phones (480px – 767px) ===================================================================== */ @media (min-width: 480px) and (max-width: 767px) { :root { --gutter: 18px; } .section { padding-block: 52px; } /* Hero */ .hero-cta .btn { flex: 0 1 auto; } /* Trust */ .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } /* Problem / Risk */ .problem-grid { grid-template-columns: repeat(2, 1fr); } .risk-grid { grid-template-columns: repeat(2, 1fr); } /* System */ .system { grid-template-columns: 1fr; } /* Comparison */ .compare { grid-template-columns: 1fr; } /* Process */ .process-flow .pstep { --off: 0px !important; } /* Proof */ .proof-grid { grid-template-columns: 1fr; } /* Footer */ .foot-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } /* CTA */ .cta-inner { padding: 38px 24px; } /* Contact */ .contact-grid { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr 1fr; } .field-row-3 { grid-template-columns: 1fr 1fr; } /* Services */ .services-grid { grid-template-columns: repeat(2, 1fr); } .service-hero { grid-template-columns: 1fr; } .svc-sections { grid-template-columns: repeat(2, 1fr); } /* About / Portfolio */ .about-grid { grid-template-columns: 1fr; } .values-grid { grid-template-columns: repeat(2, 1fr); } .portfolio-grid { grid-template-columns: repeat(2, 1fr); } .cs-hero { grid-template-columns: 1fr; } /* Industry */ .industry-hero-grid { grid-template-columns: 1fr; gap: 28px; } .industry-arms-grid { grid-template-columns: repeat(2, 1fr); } .industry-timeline-grid { grid-template-columns: repeat(2, 1fr); } .industry-kpi-grid { grid-template-columns: repeat(2, 1fr); } /* Insights */ .insights-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .insight-card-img { height: 200px; } } /* ===================================================================== Responsive — Tablet override improvements (768px) ===================================================================== */ @media (min-width: 768px) and (max-width: 1023px) { /* Footer: 2-col on tablet for cleaner layout */ .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; } .foot-brand { grid-column: 1 / -1; } /* Contact */ .contact-grid { grid-template-columns: 1fr; gap: 20px; } /* Insights */ .insight-card-img { height: 200px; } } /* ===================================================================== Responsive — Laptop/Desktop improvements (1024px+) ===================================================================== */ @media (min-width: 1024px) { /* Contact grid side-by-side */ .contact-grid { grid-template-columns: 1.25fr 1fr; gap: 24px; } } /* ===================================================================== Responsive — Wide desktop (1440px+) ===================================================================== */ @media (min-width: 1440px) { :root { --container: 1340px; } .section { padding-block: 112px; } } /* ---------- Button active/touch states ---------- */ @media (hover: none) and (pointer: coarse) { .btn:active { transform: scale(.97); } .btn-primary:active { box-shadow: 0 12px 28px -12px rgba(129,0,15,.35); } .icon-btn:active { transform: scale(.93); } .svc-card:active { transform: translateY(-2px); } .problem-card:active, .risk-card:active { translate: 0 -2px; } .trust-card:active { translate: 0 -2px; } .node:active { translate: 0 -2px; } .pstep:active { translate: 0 -3px; } .insight-card:active { transform: translateY(-2px); } .industry-card:active { transform: translateY(-2px); } } /* ---------- Overflow safety on all major sections ---------- */ .hero, .trust, .section, .cta-band, footer.site-footer, .contact-sec, .portfolio-cta, .article-hero { overflow-x: hidden; } /* ---------- Responsive scarcity bar ---------- */ @media (max-width: 600px) { .scarcity { flex-direction: column; text-align: center; gap: 8px; padding: 14px 16px; font-size: 13.5px; } .scarcity .pulse { margin: 0 auto; } } /* ---------- Responsive case study blocks ---------- */ @media (max-width: 767px) { .cs-blocks { gap: 14px; } .cs-block { padding: 18px; } .cs-block h2 { font-size: 18px; } .cs-block p { font-size: 14.5px; } } /* ---------- Responsive legal pages ---------- */ @media (max-width: 767px) { .legal { padding-inline: 4px; } .legal h2 { font-size: 18px; } .legal p { font-size: 14.5px; } } /* ---------- Responsive article ---------- */ @media (max-width: 767px) { .article-hero { padding: 32px 0 24px; } .article-media-wrapper { margin: 20px auto; } .article-media-wrapper.placeholder { height: 220px; } }