/* ========================================================================== Minds Catalyst — Design System Dark / editorial-premium theme ========================================================================== */ /* ---- Brand typeface: Söhne (licensed, see assets/brand/fonts) ---- */ @font-face { font-family: 'Soehne'; src: url('../brand/fonts/soehne-buch.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Soehne'; src: url('../brand/fonts/soehne-kraftig.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Soehne'; src: url('../brand/fonts/soehne-dreiviertelfett.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Soehne Breit'; src: url('../brand/fonts/soehne-breit-kraftig.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Soehne Breit'; src: url('../brand/fonts/soehne-breit-dreiviertelfett.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Lenis (index.html only) owns scroll interpolation itself — native smooth-scroll fighting it frame-by-frame is what reads as stutter. Lenis auto-tags with this class, so it's a clean hook without touching pages that don't load it. */ html.lenis { scroll-behavior: auto; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul { list-style: none; } input, textarea { font: inherit; color: inherit; } /* ---- Tokens ---- */ :root { --bg: #0a0d0c; --bg-elev: #101514; --bg-elev-2: #161d1b; --text: #f2f5f3; --text-dim: #9aa8a4; --text-dimmer: #64706c; --accent: #2cb6a8; --accent-2: #8fe9d9; --accent-soft: rgba(44, 182, 168, 0.14); --accent-line: rgba(44, 182, 168, 0.35); --border: rgba(242, 245, 243, 0.09); --border-strong: rgba(242, 245, 243, 0.16); --font-display: 'Soehne Breit', 'Soehne', sans-serif; --font-body: 'Soehne Breit', 'Soehne', sans-serif; --font-mono: 'Soehne Breit', 'Soehne', sans-serif; --container: 1360px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* padding (not margin) reserves space below the fixed nav — margin-top on the first child collapses through body and stops working on some mobile viewports */ padding-top: 5.75rem; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 2rem; } @media (max-width: 768px) { .container { padding-inline: 1.25rem; } } /* Mobile gets tightened description copy (~30% shorter) site-wide; desktop keeps the full text. Pair a .desc-full/.desc-short on matching elements (both block, e.g. two

, or both inline, e.g. two ). */ .desc-short { display: none; } @media (max-width: 640px) { .desc-full { display: none; } p.desc-short, li.desc-short, div.desc-short { display: block; } span.desc-short { display: inline; } } /* ---- Grain overlay (fixed, GPU-cheap) ---- */ .grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml;utf8,"); transform: translateZ(0); } /* ---- Ambient background glow ---- */ .glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(700px 500px at 82% -5%, rgba(44, 182, 168, 0.14), transparent 60%), radial-gradient(900px 600px at -10% 30%, rgba(143, 233, 217, 0.08), transparent 65%); } /* ---- Typography helpers ---- */ .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 0.4rem 0.85rem; border-radius: 999px; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; color: var(--text); } .section-head { max-width: 640px; margin-bottom: 2.4rem; } .section-head.section-head-flush { max-width: none; } .section-head.section-head-flush p { max-width: none; } .section-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); line-height: 1.06; letter-spacing: -0.02em; margin-top: 1rem; } .section-head p { color: var(--text-dim); font-size: 1.05rem; margin-top: 1.1rem; max-width: 52ch; } .section-head p + p { margin-top: 1.1rem; } /* Homepage mobile: align description copy to the Process step's subtext size (0.88rem), per the user's chosen reference — hero lede, Portofoliu and MoreEnergy section intros. Bento titles/descriptions and portfolio card titles are intentionally left alone (kept at their own sizes). */ @media (max-width: 640px) { body.page-home .hero-copy p.lede { font-size: 0.88rem; } body.page-home .problem-copy p { font-size: 0.88rem; } body.page-home .section-head p { font-size: 0.88rem; } } .section-head-wide { max-width: 760px; } .nowrap-lg { white-space: nowrap; } @media (max-width: 760px) { .nowrap-lg { white-space: normal; } } .section { position: relative; padding-block: clamp(2.6rem, 4.5vw, 4.2rem); } .section-tight { padding-block: clamp(1.8rem, 3vw, 2.6rem); } @media (max-width: 640px) { .section { padding-block: 2rem; } .section-tight { padding-block: 1.4rem; } } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0.4rem 0.4rem 1.4rem; border-radius: 999px; font-size: 0.92rem; font-weight: 500; transition: transform 0.5s var(--ease-spring), background 0.4s var(--ease); white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem; border-radius: 50%; flex-shrink: 0; transition: transform 0.5s var(--ease-spring), background 0.4s var(--ease); } .btn-icon svg { width: 15px; height: 15px; } .btn-primary { background: var(--text); color: var(--bg); padding-block: 0.55rem; } .btn-primary .btn-icon { background: rgba(11, 10, 8, 0.12); } .btn-primary:hover { background: var(--accent); } .btn-primary:hover .btn-icon { transform: translate(2px, -2px) scale(1.05); } .btn-ghost { border: 1px solid var(--border-strong); color: var(--text); padding-block: 0.55rem; } .btn-ghost .btn-icon { background: rgba(245, 241, 232, 0.06); } .btn-ghost:hover { border-color: var(--accent-line); color: var(--accent); } .btn-ghost:hover .btn-icon { transform: translate(2px, -2px) scale(1.05); background: var(--accent-soft); } .btn-accent { background: var(--accent); color: var(--bg); padding-block: 0.55rem; } .btn-accent .btn-icon { background: rgba(10, 13, 12, 0.16); } .btn-accent:hover { background: var(--accent-2); } .btn-accent:hover .btn-icon { transform: translate(2px, -2px) scale(1.05); } /* ========================================================================== Nav ========================================================================== */ .nav-wrap { position: fixed; top: 1.1rem; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: var(--container); margin-inline: auto; padding-inline: 2rem; transition: transform 0.5s var(--ease), opacity 0.5s var(--ease); } .nav-wrap.nav-hidden { transform: translateY(-8rem); opacity: 0; } .nav { width: auto; min-width: 0; flex-shrink: 1; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.6rem 0.7rem 0.6rem 1.4rem; border-radius: 999px; background: rgba(19, 18, 16, 0.72); border: 1px solid var(--border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -12px rgba(0,0,0,0.5); transition: background 0.4s var(--ease), border-color 0.4s var(--ease); } .brand { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0; } .brand-mark { height: 58px; width: auto; object-fit: contain; flex-shrink: 0; } .brand-mark-lg { height: 79px; } .nav-links { display: flex; align-items: center; gap: 1.7rem; font-size: 0.98rem; color: var(--text-dim); white-space: nowrap; } .nav-links > li > a { position: relative; padding-block: 0.3rem; transition: color 0.3s var(--ease), font-weight 0.15s; } .nav-links > li > a::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--accent); transition: width 0.4s var(--ease); } .nav-links > li > a:hover, .nav-links > li > a:focus-visible, .nav-links > li > a:active { color: var(--accent); font-weight: 700; } .nav-links > li > a:hover::after, .nav-links > li > a:focus-visible::after { width: 100%; } /* ---- Mega menu ---- */ .nav-item { position: relative; } .nav-trigger { display: flex; align-items: center; gap: 0.32rem; font: inherit; color: var(--text-dim); background: none; border: none; cursor: pointer; padding-block: 0.3rem; position: relative; transition: color 0.3s var(--ease), font-weight 0.15s; } .nav-trigger::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--accent); transition: width 0.4s var(--ease); } .nav-trigger:hover, .nav-item.is-open .nav-trigger { color: var(--accent); font-weight: 700; } .nav-trigger:hover::after, .nav-item.is-open .nav-trigger::after { width: 100%; } .nav-trigger svg { width: 9px; height: 9px; transition: transform 0.35s var(--ease-spring); flex-shrink: 0; } .nav-item.is-open .nav-trigger svg { transform: rotate(180deg); } .mega-panel { position: absolute; top: calc(100% + 0.9rem); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 232px; background: rgba(16, 21, 20, 0.98); border: 1px solid var(--border-strong); border-radius: 1rem; padding: 0.4rem; display: flex; flex-direction: column; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.6); z-index: 60; } .nav-item.is-open .mega-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .mega-panel a { display: block; padding: 0.6rem 0.9rem; border-radius: 0.6rem; font-size: 0.88rem; color: var(--text-dim); white-space: nowrap; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .mega-panel a:hover { background: var(--accent-soft); color: var(--accent); } .nav-cta { display: flex; align-items: center; gap: 0.6rem; } .nav-burger { display: none; position: relative; width: 40px; height: 40px; border-radius: 50%; background: rgba(245,241,232,0.06); flex-shrink: 0; } .nav-burger span { position: absolute; left: 11px; width: 18px; height: 1.5px; background: var(--text); transition: transform 0.5s var(--ease-spring), opacity 0.3s var(--ease), top 0.3s var(--ease); } .nav-burger span:nth-child(1) { top: 15px; } .nav-burger span:nth-child(2) { top: 21px; } .nav-burger span:nth-child(3) { top: 27px; } .nav-burger.is-open span:nth-child(1) { top: 20px; transform: rotate(45deg); } .nav-burger.is-open span:nth-child(2) { opacity: 0; } .nav-burger.is-open span:nth-child(3) { top: 20px; transform: rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 45; background: rgba(11, 10, 8, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-y: auto; padding: 6.5rem 1.5rem 3rem; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), visibility 0.5s; } .mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .mobile-group { width: 100%; max-width: 380px; margin-bottom: 2.1rem; opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .mobile-menu.is-open .mobile-group { opacity: 1; transform: translateY(0); } .mobile-group:nth-child(1) { transition-delay: 0.08s; } .mobile-group:nth-child(2) { transition-delay: 0.15s; } .mobile-group:nth-child(3) { transition-delay: 0.22s; } .mobile-group:nth-child(4) { transition-delay: 0.29s; } .mobile-group-label { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dimmer); margin-bottom: 0.7rem; } .mobile-group a { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--text); padding-block: 0.35rem; } .mobile-group.mobile-cta-group { text-align: center; } .mobile-group.mobile-cta-group a { display: inline-flex; } .nav-mobile-about { display: none; } @media (max-width: 1180px) { .nav-links, .nav-cta .btn-ghost, .nav-cta .cart-trigger { display: none; } .nav-burger { display: block; } .nav-cta { gap: 0.5rem; } .nav-mobile-about { display: inline-flex; padding: 0.5rem 1rem; font-size: 0.85rem; } } @media (max-width: 400px) { .nav-mobile-about { padding: 0.5rem 0.8rem; font-size: 0.78rem; } } @media (max-width: 600px) { .brand-mark, .brand-mark-lg { height: 53px; } .brand { margin-left: 0.5rem; } } @media (max-width: 400px) { .nav-wrap { gap: 0.75rem; padding-inline: 1rem; } .nav { padding-left: 0.85rem; gap: 0.75rem; } } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; padding-top: clamp(2.6rem, 5vw, 4rem); padding-bottom: clamp(2.6rem, 5vw, 4rem); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } } .hero-copy h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.025em; margin-top: 1.4rem; } .spark { color: var(--accent); position: relative; white-space: nowrap; } .spark.is-shimmer { background: linear-gradient(100deg, var(--accent) 30%, var(--accent-2) 45%, var(--text) 50%, var(--accent-2) 55%, var(--accent) 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 4.5s ease-in-out infinite; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -60% 0; } } .hero-copy p.lede { color: var(--text-dim); font-size: 1.05rem; max-width: 46ch; margin-top: 1.6rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; } .hero-visual { position: relative; aspect-ratio: 4 / 5; border-radius: 1.75rem; background: linear-gradient(155deg, var(--bg-elev-2), var(--bg-elev) 60%); border: 1px solid var(--border); overflow: hidden; } .hero-visual .orb { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(44,182,168,0.55), rgba(143,233,217,0.03) 70%); filter: blur(6px); top: 8%; right: -10%; --px: 0px; --py: 0px; transform: translate(var(--px), var(--py)); transition: transform 0.6s var(--ease); animation: float 9s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translate(var(--px), var(--py)); } 50% { transform: translate(var(--px), calc(var(--py) - 18px)); } } .hero-visual .grid-lines { position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at 60% 40%, black, transparent 75%); } .hero-visual .badge { position: absolute; left: 1.4rem; bottom: 1.4rem; right: 1.4rem; padding: 1.1rem 1.3rem; border-radius: 1.1rem; background: rgba(19,18,16,0.75); border: 1px solid var(--border-strong); backdrop-filter: blur(8px); } .hero-visual .badge .label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dimmer); } .hero-visual .badge .value { font-family: var(--font-display); font-size: 1.35rem; margin-top: 0.35rem; } .hero-stats { margin-top: clamp(2rem, 3.5vw, 3rem); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .hero-stats .stat { padding: 1.8rem 1.5rem; border-left: 1px solid var(--border); } .hero-stats .stat:first-child { border-left: none; } .hero-stats .stat .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.8rem); color: var(--accent); letter-spacing: -0.02em; } .hero-stats .stat .num span { font-family: var(--font-body); font-weight: 500; font-size: 1rem; color: var(--text); letter-spacing: 0; margin-left: 0.15rem; } .hero-stats .stat .num .count-num { font-family: inherit; font-weight: inherit; font-size: inherit; color: inherit; letter-spacing: inherit; margin-left: 0; } .hero-stats .stat .lbl { font-size: 0.85rem; color: var(--text-dim); margin-top: 0.5rem; max-width: 30ch; } @media (max-width: 768px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } .hero-stats .stat:nth-child(3) { border-left: none; } } /* Mobile: bigger numbers, label stacked underneath instead of inline. */ @media (max-width: 640px) { .hero-stats .stat { padding: 1.5rem 1rem; text-align: center; } .hero-stats .stat .num { display: flex; flex-direction: column; align-items: center; font-size: clamp(2.21rem, 10.2vw, 2.72rem); } .hero-stats .stat .num span { margin-left: 0; margin-top: 0.4rem; font-size: 0.78rem; } } /* ========================================================================== Problem section ========================================================================== */ .problem-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 4rem; align-items: start; } @media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; gap: 2.5rem; } } .problem-grid .section-head { margin-bottom: 0; } @media (min-width: 901px) { .problem-grid .section-head { position: sticky; top: 120px; } } .tag-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; } .tag-chip { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.5rem 0.95rem; } .problem-copy p { color: var(--text-dim); font-size: 1.05rem; max-width: 58ch; } .problem-copy p + p { margin-top: 1.1rem; } .problem-copy strong { color: var(--text); font-weight: 500; } .problem-block + .problem-block { margin-top: 1.8rem; } @media (max-width: 640px) { .values-badge-block { display: none; } } /* ========================================================================== Bento products ========================================================================== */ .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; } .bento .card-shell { display: block; width: auto; margin-bottom: 0; } .bento .card-core { min-height: 0; } .bento .card-body { position: relative; padding: 1.76rem 2rem 1.92rem; align-items: flex-start; justify-content: flex-start; text-align: left; min-height: 134px; } .bento .card-body .idx { font-family: var(--font-mono); font-size: 0.94rem; letter-spacing: 0.1em; color: var(--accent); } .bento .card-body h3 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.2; margin-top: 0.9rem; } .bento .card-body p { color: var(--text-dim); font-size: 1.05rem; line-height: 1.4; margin-top: 0.55rem; width: 100%; } .bento-arrow { position: absolute; right: 1.7rem; bottom: 1.6rem; display: flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); opacity: 0; transform: translate(-5px, 5px); transition: opacity 0.35s var(--ease), transform 0.4s var(--ease-spring), background 0.3s var(--ease); } .bento-arrow svg { width: 13px; height: 13px; } @media (hover: hover) and (pointer: fine) { .bento .card-shell:hover .bento-arrow { opacity: 1; transform: translate(0, 0); } .bento .card-shell:hover .bento-arrow { background: var(--accent); color: var(--bg); } } @media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .card-body { padding: 1.8rem 1.6rem 2rem; min-height: 150px; } } /* Event-format cards (Șase formate) on mobile: compact 2-up boxes. Placed after the base/980px .bento rules (not before) so it actually wins the cascade at equal specificity — an earlier version of this block sat above them in the file and was silently overridden on every shared property. */ @media (max-width: 640px) { .bento { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } .bento .card-shell { width: auto; margin-bottom: 0; min-width: 0; } .bento .card-core { min-height: 0; min-width: 0; } .bento .card-body { padding: 1.15rem 0.9rem 1.25rem; align-items: flex-start; justify-content: flex-start; text-align: left; min-height: 6.6rem; min-width: 0; } .bento .card-body .idx { font-size: 0.58rem; } .bento .card-body h3 { font-size: 0.92rem; line-height: 1.24; margin-top: 0.4rem; min-width: 0; width: 100%; } .bento .card-body p { font-size: 0.88rem; line-height: 1.4; margin-top: 0.35rem; max-width: none; min-width: 0; width: 100%; white-space: normal; overflow: visible; text-overflow: clip; } } .card-shell { position: relative; padding: 0.35rem; border-radius: 1.6rem; background: rgba(242,245,243,0.03); border: 1px solid var(--border); transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; isolation: isolate; } .card-shell::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--accent-line), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; z-index: 1; } /* Cursor-follow effects (spotlight border, brand-drip, lift) are desktop-only: touch devices apply :hover on tap and never clear it without a second tap elsewhere, so the card would otherwise freeze mid-effect after a tap. */ @media (hover: hover) and (pointer: fine) { .card-shell:hover { border-color: var(--accent-line); transform: translateY(-6px); box-shadow: 0 22px 48px -20px rgba(0,0,0,0.55); } .card-shell:hover::before { opacity: 1; } } .card-core { position: relative; height: 100%; border-radius: calc(1.6rem - 0.35rem); background: var(--bg-elev); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); display: flex; flex-direction: column; overflow: hidden; } .card-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; padding: 1.1rem 1.2rem; gap: 0.6rem; } .card-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.38) 100%); pointer-events: none; } .card-photo .photo-tag { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(242,245,243,0.85); } .card-photo .status-photo { position: relative; z-index: 1; } .photo-ai-poster { background: url('../brand/photos/event-ai-poster.jpg') center center / cover no-repeat; } .photo-moreenergy-cana-01 { background: url('../brand/photos/moreenergy-cana-01.jpg') center 25% / cover no-repeat; filter: grayscale(1) contrast(1.08) brightness(1.02); } .photo-moreenergy-cana-02 { background: url('../brand/photos/moreenergy-cana-02.jpg') center 25% / cover no-repeat; filter: grayscale(1) contrast(1.1) brightness(1); } .photo-moreenergy-sapca { background: url('../brand/photos/moreenergy-sapca.jpg') center 20% / cover no-repeat; filter: grayscale(1) contrast(1.35) brightness(0.88); } .card-body { padding: 1.6rem 1.9rem 1.9rem; display: flex; flex-direction: column; flex-grow: 1; } @media (max-width: 640px) { .hero-feature { display: none; } } .hero-feature .card-body { padding: 2rem 2.2rem 2.2rem; } .hero-feature .card-body p { max-width: 46ch; } .hero-feature .photo-ai-poster { padding: 1.6rem; background-color: var(--bg-elev); background-image: url('../brand/photos/event-ai-poster.jpg'); background-repeat: no-repeat; background-position: center; background-size: contain; background-origin: content-box; background-clip: content-box; } /* Badge moves to the clear top-right corner of the flyer, away from the Minds Catalyst logo baked into the image at bottom-left. */ .photo-ai-poster .status-photo { position: absolute; top: 1.1rem; right: 1.2rem; left: auto; bottom: auto; } .card-body .top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .card-body .idx { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dimmer); } .card-body .status { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-line); background: var(--accent-soft); padding: 0.3rem 0.6rem; border-radius: 999px; } .card-body h3 { font-size: 1.4rem; margin-top: 1rem; } .card-body .meta { font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--accent); font-size: 0.85rem; margin-top: 0.5rem; } .card-body p { color: var(--text-dim); font-size: 0.92rem; margin-top: 0.9rem; max-width: 42ch; flex-grow: 1; } .card-body .card-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.4rem; font-size: 0.85rem; color: var(--text); } .card-body .card-link-accent { font-weight: 700; color: var(--accent); } .card-body .card-link svg { width: 13px; height: 13px; transition: transform 0.4s var(--ease-spring); } @media (hover: hover) and (pointer: fine) { .card-shell:hover .card-link svg { transform: translate(3px, -3px); } .card-shell:hover .card-photo { transform: scale(1.045); } } .card-photo { transition: transform 0.4s ease; } .card-core-wide { flex-direction: row; } .card-core-wide .card-photo { aspect-ratio: auto; width: 38%; flex-shrink: 0; align-items: center; } .card-core-wide .card-body { justify-content: center; } .card-core-wide .card-body p { max-width: 56ch; } @media (max-width: 980px) { .card-core-wide { flex-direction: column; } .card-core-wide .card-photo { width: 100%; aspect-ratio: 16 / 10; } } /* ========================================================================== Projects grid — auto-looping carousel, same technique as the logos marquee ========================================================================== */ .projects-track-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); } /* Mobile: portfolio only (despre.html's Competențe keeps its auto-loop) — no frame, no auto-loop, a plain natively hand-scrollable row. Whoever wants to see every project just swipes through it themselves. */ @media (max-width: 640px) { #proiecte .projects-track-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } #proiecte .projects-track-wrap::-webkit-scrollbar { display: none; } #proiecte .projects-grid { animation: none; } #proiecte .projects-grid .card-shell[aria-hidden="true"] { display: none; } } .projects-grid { display: flex; align-items: stretch; gap: 1.1rem; width: max-content; animation: marquee-scroll 42s linear infinite; } @media (hover: hover) and (pointer: fine) { .projects-grid:hover { animation-play-state: paused; } } .projects-grid .card-shell { flex: 0 0 auto; width: min(340px, 78vw); } .projects-grid .card-shell.competente-card { width: min(380px, 80vw); } .competente-card .card-core::after { content: ''; position: absolute; inset: 0; background: radial-gradient(140% 110% at 50% 0%, rgba(242,245,243,0.07), transparent 70%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 0; } @media (hover: hover) and (pointer: fine) { .competente-card:hover .card-core::after { opacity: 1; } } .projects-grid .card-body p { flex-grow: 0; } /* Portfolio card content: title (event) / venue (subtitle) / count (stat) — stacked and evenly distributed across the card so nothing feels cramped or leaves dead space, regardless of how long each project's title is. */ #proiecte .card-body { justify-content: space-between; } #proiecte .card-body h3 { font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.22; } #proiecte .card-body .portfolio-venue { color: var(--text-dim); font-size: 0.86rem; margin-top: 0.7rem; max-width: none; } #proiecte .card-body .portfolio-count { display: block; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); margin-top: 1.3rem; } @media (max-width: 640px) { #proiecte .card-body h3 { font-size: 1.12rem; } #proiecte .card-body .portfolio-venue { font-size: 0.8rem; margin-top: 0.5rem; } #proiecte .card-body .portfolio-count { font-size: 0.72rem; margin-top: 0.9rem; } } .projects-grid .card-photo-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Cursor-follow reveal of the brand mark, tiled and blended in turquoise — only visible in a soft circle around the pointer. Added per-card via the .card-mark-drip element (portfolio + competențe cards only). */ .card-mark-drip { position: absolute; inset: 0; background-image: url('../brand/logos/mark.svg'); background-repeat: repeat; background-size: 34px 34px; mix-blend-mode: screen; opacity: 0; -webkit-mask-image: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), black 0%, transparent 72%); mask-image: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), black 0%, transparent 72%); transition: opacity 0.35s ease; pointer-events: none; z-index: 2; } @media (hover: hover) and (pointer: fine) { .card-shell:hover .card-mark-drip { opacity: 0.9; } } @media (max-width: 980px) { .projects-grid { gap: 0.9rem; } } @media (max-width: 640px) { .projects-grid { gap: 0.6rem; } } .photo-placeholder { background: radial-gradient(55% 75% at var(--ph-x, 50%) var(--ph-y, 30%), var(--ph-color, rgba(44,182,168,0.3)), transparent 70%), repeating-linear-gradient(90deg, rgba(242,245,243,0.05) 0 1px, transparent 1px 34px), repeating-linear-gradient(0deg, rgba(242,245,243,0.05) 0 1px, transparent 1px 34px), linear-gradient(160deg, #131b19, #0a0d0c 70%); } /* ---- Real photos inside card-photo (absolute-fill, keeps flex overlay children working) ---- */ .card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .photo-bw { filter: grayscale(1) contrast(0.92) brightness(1.04); transition: filter 0.5s var(--ease), transform 0.6s var(--ease); } /* ---- Portfolio detail gallery ---- */ .portfolio-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.4rem; } .portfolio-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1rem; border: 1px solid var(--border); } .video-frame { position: relative; display: block; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; border-radius: 1.2rem; border: 1px solid var(--border-strong); background: var(--bg-elev); margin-top: 2rem; overflow: hidden; } .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .video-block { max-width: 640px; margin-top: 2rem; } .video-block + .video-block { margin-top: 2.4rem; } .video-block .video-frame { margin-top: 0.6rem; } .ep-meta { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dimmer); margin-bottom: 0.35rem; } .episode-list { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.8rem; max-width: 640px; } .episode-list li { list-style: none; } .episode-list a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); font-size: 0.98rem; font-weight: 500; transition: color 0.3s var(--ease); } .episode-list a:hover { color: var(--accent); } .episode-list a svg { width: 13px; height: 13px; flex-shrink: 0; transition: transform 0.4s var(--ease-spring); } .episode-list a:hover svg { transform: translate(3px, -3px); } @media (max-width: 980px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .projects-grid { grid-template-columns: 1fr; } .portfolio-gallery { grid-template-columns: repeat(2, 1fr); } } /* ---- eBooks strip ---- */ .ebooks-strip { display: grid; grid-template-columns: minmax(340px, 460px) 1fr; align-items: center; gap: 3.5rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-block: 3.2rem; } .ebooks-visual { aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden; border: 1px solid var(--border-strong); box-shadow: 0 20px 50px -20px rgba(0,0,0,0.5); transition: box-shadow 0.35s ease, border-color 0.35s ease; } .ebooks-visual:hover { border-color: var(--accent-line); box-shadow: 0 26px 56px -20px rgba(0,0,0,0.6); } .ebooks-visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .ebooks-visual:hover img { transform: scale(1.045); } .ebooks-copy h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.25; margin-top: 0.9rem; max-width: 34ch; } .ebooks-copy p { color: var(--text-dim); margin-top: 0.9rem; max-width: 52ch; } @media (max-width: 640px) { .ebooks-copy p { font-size: 0.88rem; } } .ebooks-copy .card-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.3rem; font-size: 0.92rem; } .ebooks-copy .card-link svg { width: 13px; height: 13px; transition: transform 0.4s var(--ease-spring); } .ebooks-copy .card-link:hover svg { transform: translate(3px, -3px); } @media (max-width: 760px) { .ebooks-strip { grid-template-columns: 1fr; } .ebooks-visual { max-width: 380px; } } /* ========================================================================== Client logos carousel + partners ========================================================================== */ .logos-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dimmer); text-align: center; } .logos-track-wrap { margin-top: 2rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); } .logos-track { display: flex; width: max-content; /* Reverse direction from the portfolio carousel above it, so the two don't read as one repeated motion moving the same way. */ animation: marquee-scroll 30s linear infinite reverse; } @media (hover: hover) and (pointer: fine) { .logos-track:hover { animation-play-state: paused; } } .logos-item { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--text-dimmer); padding-inline: 2.4rem; white-space: nowrap; transition: color 0.4s var(--ease); } .logos-item.is-active { color: var(--accent); } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================================== Brand reel — looping logo sting. Four quadrants fly in and assemble the mark, which dissolves into a center-out color sweep with an internal light sheen; the sweep retracts and the wordmark wipes into view, holds, then wipes out to restart the loop. Everything shares one 9s timeline. ========================================================================== */ .brand-reel { position: relative; height: clamp(154px, 21vw, 238px); border-radius: 1.6rem; overflow: hidden; isolation: isolate; background: linear-gradient(160deg, var(--bg-elev-2), var(--bg-elev)); border: 1px solid var(--border-strong); } .brand-reel::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(480px 300px at 50% 46%, var(--accent-soft), transparent 70%); animation: reel-glow 6s ease-in-out infinite; pointer-events: none; z-index: 0; } .reel-mark-assembly { position: absolute; top: 50%; left: 50%; width: 77px; height: 77px; transform: translate(-50%, -50%); z-index: 2; } .reel-mark-piece { position: absolute; width: 38px; height: 38px; background-image: url('../brand/logos/mark.svg'); background-size: 200% 200%; animation: reel-piece 9s cubic-bezier(0.22, 1, 0.36, 1) infinite; } .reel-mark-piece:nth-child(1) { top: 0; left: 0; background-position: 0% 0%; } .reel-mark-piece:nth-child(2) { top: 0; right: 0; background-position: 100% 0%; } .reel-mark-piece:nth-child(3) { bottom: 0; left: 0; background-position: 0% 100%; } .reel-mark-piece:nth-child(4) { bottom: 0; right: 0; background-position: 100% 100%; } .reel-sweep { position: absolute; inset: 0; background: linear-gradient(120deg, var(--accent), var(--accent-2) 55%, var(--accent)); clip-path: inset(0 50% 0 50%); animation: reel-sweep 9s cubic-bezier(0.76, 0, 0.24, 1) infinite; z-index: 1; } .reel-glare { position: absolute; top: -20%; bottom: -20%; width: 26%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent); transform: translateX(-160%) skewX(-12deg); animation: reel-glare 2.3s ease-in-out infinite; } .reel-word { position: absolute; top: 50%; left: 50%; width: min(41.6%, 216px); height: auto; transform: translate(-50%, -50%); clip-path: inset(0 100% 0 0); filter: blur(6px); opacity: 0; animation: reel-word 9s cubic-bezier(0.22, 1, 0.36, 1) infinite; z-index: 2; } @keyframes reel-glow { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } @keyframes reel-piece { 0% { transform: translate(var(--fx), var(--fy)) scale(0.4) rotate(-25deg); opacity: 0; } 9% { transform: translate(0, 0) scale(1.1) rotate(3deg); opacity: 1; } 13% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; } 22% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; } 29% { transform: translate(0, 0) scale(2.4) rotate(0deg); opacity: 0; } 100% { transform: translate(0, 0) scale(2.4) rotate(0deg); opacity: 0; } } @keyframes reel-sweep { 0% { clip-path: inset(0 50% 0 50%); } 24% { clip-path: inset(0 50% 0 50%); } 34% { clip-path: inset(0 0% 0 0%); } 50% { clip-path: inset(0 0% 0 0%); } 58% { clip-path: inset(0 100% 0 0%); } 100% { clip-path: inset(0 100% 0 0%); } } @keyframes reel-glare { 0%, 100% { transform: translateX(-160%) skewX(-12deg); } 50% { transform: translateX(260%) skewX(-12deg); } } @keyframes reel-word { 0% { clip-path: inset(0 100% 0 0); filter: blur(6px); opacity: 0; } 56% { clip-path: inset(0 100% 0 0); filter: blur(6px); opacity: 0; } 66% { clip-path: inset(0 0% 0 0); filter: blur(0px); opacity: 1; } 90% { clip-path: inset(0 0% 0 0); filter: blur(0px); opacity: 1; } 97% { clip-path: inset(0 0% 0 100%); filter: blur(4px); opacity: 0; } 100% { clip-path: inset(0 100% 0 0); filter: blur(6px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .brand-reel::before, .reel-mark-piece, .reel-sweep, .reel-glare, .reel-word { animation: none; } .reel-mark-assembly, .reel-sweep { display: none; } .reel-word { opacity: 1; clip-path: none; filter: none; } } /* ========================================================================== Process ========================================================================== */ .process-track-wrap { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); padding-top: 2.4rem; } .process-rail { position: absolute; left: 0; right: 0; top: calc(2.4rem + 0.4rem); height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong) 6%, var(--border-strong) 94%, transparent); z-index: 0; } .process-track { display: flex; align-items: flex-start; gap: 0; width: max-content; animation: marquee-scroll 34s linear infinite; position: relative; z-index: 1; } .process-track:hover { animation-play-state: paused; } .process-card { flex: 0 0 auto; width: min(280px, 74vw); padding: 0 2.2rem 0 0; position: relative; } .process-num { position: absolute; top: -2.1rem; right: 1.6rem; font-family: var(--font-display); font-size: 4.2rem; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--border-strong); opacity: 0.55; pointer-events: none; transition: -webkit-text-stroke-color 0.4s var(--ease), opacity 0.4s var(--ease); } .process-card:hover .process-num { -webkit-text-stroke-color: var(--accent-line); opacity: 1; } .process-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent-line); margin-bottom: 1.4rem; transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease-spring); } .process-card:hover .process-dot { background: var(--accent); border-color: var(--accent); transform: scale(1.35); } .process-card h4 { font-size: 1.05rem; font-weight: 500; position: relative; z-index: 1; } .process-card p { color: var(--text-dim); font-size: 0.88rem; margin-top: 0.6rem; max-width: 30ch; position: relative; z-index: 1; } @media (max-width: 900px) { .process-card { width: min(240px, 70vw); padding-right: 1.6rem; } .process-num { font-size: 3.4rem; top: -1.7rem; right: 1.1rem; } } /* ========================================================================== Empty-state testimonials ========================================================================== */ .empty-panel { border: 1px dashed var(--border-strong); border-radius: 1.6rem; padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } .empty-panel .ring { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--accent-line); display: flex; align-items: center; justify-content: center; color: var(--accent); } .empty-panel h3 { font-size: 1.3rem; font-weight: 500; } .empty-panel p { color: var(--text-dim); max-width: 46ch; font-size: 0.95rem; } /* ========================================================================== Contact / CTA ========================================================================== */ .cta-panel { border-radius: 2rem; border: 1px solid var(--border); background: linear-gradient(160deg, var(--bg-elev-2), var(--bg-elev)); padding: clamp(2.5rem, 6vw, 4.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } @media (max-width: 900px) { .cta-panel { grid-template-columns: 1fr; } } .cta-panel-stacked { grid-template-columns: 1fr; max-width: 540px; padding: clamp(2rem, 5vw, 3.2rem); } .cta-copy h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-top: 1rem; } .cta-copy p { color: var(--text-dim); margin-top: 1.1rem; max-width: 42ch; } .cta-contact { margin-top: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; font-size: 0.95rem; } @media (max-width: 640px) { .cta-copy p, .cta-contact { font-size: 0.88rem; } } .cta-contact a { color: var(--accent); } .cta-contact .btn { margin-top: 0.7rem; color: var(--bg); } .field { position: relative; margin-bottom: 1.1rem; } .field label { position: absolute; left: 1.1rem; top: 1rem; font-size: 0.95rem; color: var(--text-dimmer); pointer-events: none; transition: transform 0.3s var(--ease), font-size 0.3s var(--ease), color 0.3s var(--ease); transform-origin: left top; } .field input, .field textarea { width: 100%; padding: 1.4rem 1.1rem 0.6rem; border-radius: 0.9rem; background: rgba(245,241,232,0.03); border: 1px solid var(--border-strong); transition: border-color 0.3s var(--ease), background 0.3s var(--ease); } .field textarea { min-height: 100px; resize: vertical; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-line); background: rgba(245,241,232,0.05); } .field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-0.55rem) scale(0.78); color: var(--accent); } @media (max-width: 640px) { .field label { font-size: 0.88rem; } .field input, .field textarea { font-size: 0.88rem; } } /* ========================================================================== Footer ========================================================================== */ .footer { position: relative; overflow: hidden; padding-block: 4.6rem 2.4rem; background: radial-gradient(900px 380px at 12% -10%, rgba(44, 182, 168, 0.09), transparent 65%); } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line) 22%, var(--accent-line) 78%, transparent); } .footer::after { content: ''; position: absolute; right: -4%; bottom: -22%; width: 340px; height: 340px; background-image: url('../brand/logos/mark.svg'); background-repeat: no-repeat; background-size: contain; opacity: 0.04; pointer-events: none; z-index: 0; } .footer-top, .footer-bottom { position: relative; z-index: 1; } .footer-top { display: grid; grid-template-columns: 1.6fr repeat(2, 1fr); gap: 3rem; } @media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } } .footer-logo-white { height: 3.1rem; width: auto; object-fit: contain; } /* Despre agenție: match footer logo to the header logo on this page, at every breakpoint (header itself drops to 44px under 600px). */ body.page-despre .footer-logo-white, body.page-home .footer-logo-white { height: 79px; } @media (max-width: 600px) { body.page-despre .footer-logo-white, body.page-home .footer-logo-white { height: 53px; } } .footer-brand p { color: var(--text-dim); font-size: 1.05rem; margin-top: 1.1rem; max-width: 32ch; } .footer-col h5 { display: inline-flex; align-items: center; gap: 0.4rem; width: fit-content; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 0.4rem 0.85rem 0.4rem 0.7rem; border-radius: 999px; margin-bottom: 1.4rem; transition: border-color 0.35s var(--ease), background 0.35s var(--ease); } .footer-col:hover h5 { border-color: var(--accent); background: rgba(44, 182, 168, 0.2); } .mini-star { display: inline-block; width: 0.9em; height: 0.9em; object-fit: contain; transition: transform 0.5s var(--ease-spring); } .footer-col:hover .mini-star { transform: scale(1.4) rotate(20deg); } .footer-col ul { display: flex; flex-direction: column; gap: 0.85rem; } .footer-col a { position: relative; display: inline-flex; align-items: center; color: var(--text-dim); font-size: 1.05rem; transition: color 0.3s var(--ease), transform 0.3s var(--ease-spring); } .footer-col a .link-arrow { display: inline-block; margin-left: 0.35rem; opacity: 0; transform: translate(-4px, 2px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease-spring); color: var(--accent); } .footer-col a .link-arrow svg { width: 11px; height: 11px; } @media (hover: hover) and (pointer: fine) { .footer-col a:hover { color: var(--accent); transform: translateX(3px); } .footer-col a:hover .link-arrow { opacity: 1; transform: translate(0, 0); } } .footer-bottom { margin-top: 2.8rem; padding-top: 1.7rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; color: var(--text-dimmer); } /* Mobile: match the site's mobile description size everywhere in the footer. */ @media (max-width: 640px) { .footer-brand p, .footer-col a, .footer-bottom { font-size: 0.88rem; } } /* ========================================================================== About page — company essence + hero + timeline ========================================================================== */ .essence-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (max-width: 700px) { .essence-grid { grid-template-columns: 1fr; } } .essence-card { position: relative; padding: 1.8rem 1.9rem; border: 1px solid var(--border); border-radius: 1.3rem; background: linear-gradient(160deg, rgba(242,245,243,0.05), rgba(242,245,243,0.015)); transition: border-color 0.35s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } @media (hover: hover) and (pointer: fine) { .essence-card:hover { border-color: var(--accent-line); transform: translateY(-4px) scale(1.015); box-shadow: 0 18px 40px -20px rgba(0,0,0,0.5); } } .essence-card h3 { font-size: 1.2rem; margin-top: 0.9rem; white-space: nowrap; } .essence-card p { color: var(--text-dim); font-size: 1.05rem; margin-top: 1rem; max-width: 50ch; } .essence-full { grid-column: 1 / -1; } @media (max-width: 700px) { .essence-card h3 { white-space: normal; } } .about-hero { padding-top: clamp(2rem, 4vw, 3.2rem); padding-bottom: clamp(1.2rem, 2.5vw, 2rem); } .about-grid { display: grid; grid-template-columns: minmax(240px, 0.62fr) 1.38fr; gap: 3rem; align-items: start; } @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 2.5rem; } } .about-photo-wrap { position: relative; width: 100%; max-width: 420px; opacity: 0; transform: scale(0.92); transition: opacity 1s var(--ease), transform 1s var(--ease-spring); border-radius: 1.6rem; border: 1px solid var(--border-strong); overflow: hidden; } @media (max-width: 860px) { .about-photo-wrap { max-width: 320px; margin-inline: auto; } } .about-photo-wrap.is-visible { opacity: 1; transform: scale(1); } .about-photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; animation: about-photo-breathe 10s ease-in-out infinite; } @keyframes about-photo-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } } @media (prefers-reduced-motion: reduce) { .about-photo { animation: none; } } .statement-box { position: relative; margin-top: 1.3rem; padding: clamp(1.1rem, 2.6vw, 1.5rem) clamp(1.6rem, 4vw, 2.2rem); border: 1px solid var(--border-strong); border-radius: 1.2rem; background: linear-gradient(160deg, var(--bg-elev-2), var(--bg-elev)); overflow: hidden; transition: border-color 0.5s var(--ease), transform 0.5s var(--ease); } .statement-box::before { content: ''; position: absolute; inset: 0; background: radial-gradient(560px 320px at 12% -15%, var(--accent-soft), transparent 65%); pointer-events: none; } .statement-box::after { content: '“'; position: absolute; top: -1rem; left: 1.2rem; font-family: var(--font-display); font-size: 4.4rem; line-height: 1; color: var(--accent); opacity: 0.16; pointer-events: none; transition: opacity 1.1s var(--ease) 0.25s, transform 1.1s var(--ease-spring) 0.25s; } html.css-reveal .statement-box::after { opacity: 0; transform: translateY(10px); } html.css-reveal .statement-box.is-visible::after { opacity: 0.16; transform: translateY(0); } .statement-box:hover { border-color: var(--accent-line); transform: translateY(-2px); } .statement-box p { position: relative; color: var(--text); font-family: var(--font-display); font-weight: 500; font-size: clamp(0.92rem, 1.35vw, 1.15rem); line-height: 1.4; letter-spacing: -0.01em; max-width: none; } @media (min-width: 780px) { .statement-box p { white-space: nowrap; } } .statement-accent { color: var(--accent); } .about-role { font-family: var(--font-mono); color: var(--accent); font-size: 0.95rem; margin-top: 0.8rem; letter-spacing: 0.02em; } .about-intro h1 { font-size: clamp(2.2rem, 4vw, 3rem); margin-top: 1rem; } .about-intro .lede { color: var(--text-dim); font-size: 1.05rem; line-height: 1.5; margin-top: 1.3rem; max-width: 56ch; } .about-intro .lede + .lede { margin-top: 1.1rem; } .about-intro .btn { margin-top: 1.8rem; } .academic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.6rem; } @media (max-width: 700px) { .academic-grid { grid-template-columns: 1fr; } } .academic-item { padding: 1.6rem 1.7rem; border: 1px solid var(--border); border-radius: 1.3rem; background: rgba(242,245,243,0.02); transition: border-color 0.35s var(--ease); } .academic-item:hover { border-color: var(--accent-line); } .academic-item h4 { font-size: 1.1rem; } .academic-item p { color: var(--text-dim); font-size: 1.05rem; margin-top: 0.6rem; max-width: 42ch; } .academic-item .academic-school { color: var(--text-dimmer); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em; margin-top: 0.8rem; } /* ---- Two parallel columns: moderare paneluri + co-organizare RBL ---- */ .mention-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; } @media (max-width: 860px) { .mention-columns { grid-template-columns: 1fr; gap: 2.8rem; } } .mention-col h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.08; letter-spacing: -0.02em; margin-top: 1rem; } /* Despre agenție: some titles run long enough to wrap past 2 lines on phones at the site-wide h2 size. Same size as homepage titles up to this breakpoint; only below it do we trim slightly so they sit in 2 lines. */ @media (max-width: 640px) { body.page-despre .section-head h2, body.page-despre .mention-col h2 { font-size: 1.65rem; } } .mention-col-lede { color: var(--text-dim); font-size: 1.05rem; margin-top: 1rem; max-width: 46ch; } /* Despre agenție: bring the (shared, site-wide) .section-head p size down to the page's predominant description size, without touching the other pages that reuse .section-head. */ body.page-despre .section-head p { font-size: 1.05rem; } .mention-col-divider { position: relative; } @media (min-width: 861px) { .mention-col-divider { padding-left: 3.5rem; } .mention-col-divider::before { content: ''; position: absolute; left: -1.75rem; top: 0.3rem; bottom: 0.3rem; width: 1px; background: linear-gradient(180deg, transparent, var(--border-strong) 12%, var(--border-strong) 88%, transparent); } } /* ---- Simple mention list: conference panels, credits, low-key entries ---- */ .mention-list { display: flex; flex-direction: column; margin-top: 1.8rem; } .mention-list li { position: relative; list-style: none; display: flex; align-items: flex-start; padding: 1.1rem 0 1.1rem 1.1rem; border-top: 1px solid var(--border); transition: padding-left 0.3s var(--ease), border-color 0.3s var(--ease); } .mention-list li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform 0.4s var(--ease); } .mention-list li:hover { padding-left: 1.5rem; border-color: var(--accent-line); } .mention-list li:hover::before { transform: scaleY(1); } .mention-list li:first-child { padding-top: 0; border-top: none; } .mention-list li:last-child { padding-bottom: 0; } .mention-list .ep-meta { display: block; margin-bottom: 0.45rem; font-size: 0.78rem; } .mention-list p { color: var(--text-dim); font-size: 1.05rem; line-height: 1.5; } .mention-list li > span:last-child, .mention-list li > .mention-body { min-width: 0; flex: 1 1 auto; color: var(--text-dim); font-size: 1.05rem; } .mention-group + .mention-group { margin-top: 2.2rem; } .mention-group h3 { font-size: 1.15rem; color: var(--text-dim); font-weight: 500; } .mention-tag { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 0.28rem 0.6rem; border-radius: 999px; min-width: 5.4rem; flex-shrink: 0; margin-right: 0.9rem; margin-top: 0.1rem; transition: background 0.3s var(--ease), color 0.3s var(--ease); } .mention-list li:hover .mention-tag { background: var(--accent); color: var(--bg); } .media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.6rem; align-items: start; } @media (max-width: 760px) { .media-grid { grid-template-columns: 1fr; } } .media-grid .card-body p { flex-grow: 0; font-size: 1.05rem; } /* Despre agenție: Competențe carousel shares .card-body with the homepage portfolio, so scope its bump to this page only. */ body.page-despre .projects-grid .card-body p { font-size: 1.05rem; } .timeline { position: relative; } .timeline::before { content: ''; position: absolute; left: 1.19rem; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--accent), var(--accent-line) 70%, transparent); } .timeline-item { position: relative; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1.5rem; padding-bottom: 2.2rem; } .timeline-item:last-child { padding-bottom: 0; } .timeline-dot { grid-column: 1; justify-self: center; align-self: start; margin-top: 0.35rem; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent-line); position: relative; z-index: 1; transition: transform 0.6s var(--ease-spring), background 0.4s var(--ease), border-color 0.4s var(--ease); } .timeline-item.is-visible .timeline-dot { background: var(--accent); border-color: var(--accent); transform: scale(1.35); } .timeline-year { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; color: var(--accent); } .timeline-content h4 { font-size: 1.2rem; margin-top: 0.4rem; } .timeline-content p { color: var(--text-dim); font-size: 1.05rem; margin-top: 0.6rem; max-width: 62ch; } @media (max-width: 560px) { .timeline-item { grid-template-columns: 1.5rem 1fr; gap: 1rem; } .timeline::before { left: 0.69rem; } } /* Despre agenție mobile: match the homepage's mobile description size (0.88rem) across every "text under a title" element on this page. Placed after all the desktop declarations above (not before) so it actually wins the cascade at equal specificity. */ @media (max-width: 640px) { body.page-despre .section-head p, body.page-despre .essence-card p, body.page-despre .about-intro .lede, body.page-despre .academic-item p, body.page-despre .mention-col-lede, body.page-despre .mention-list p, body.page-despre .mention-list li > span:last-child, body.page-despre .mention-list li > .mention-body, body.page-despre .media-grid .card-body p, body.page-despre .projects-grid .card-body p, body.page-despre .timeline-content p { font-size: 0.88rem; } } /* ========================================================================== Shop (#MoreEnergy merch) ========================================================================== */ .shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; max-width: 640px; } .shop-grid .card-photo { aspect-ratio: 1 / 1; } .shop-grid .card-body p { font-size: 1.05rem; } .shop-grid .card-body .price-tag { display: block; margin-top: 0.9rem; } .price-tag { font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent); white-space: nowrap; } .price-tag-lg { font-family: var(--font-mono); font-size: 1.4rem; color: var(--accent); } .card-body .top-row .price-tag { padding-top: 0.1rem; } @media (max-width: 640px) { .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; } .shop-grid .card-shell { min-width: 0; margin-bottom: 0; } .shop-grid .card-core { min-width: 0; } .shop-grid .card-body { padding: 0.9rem 0.95rem 1.05rem; min-width: 0; } .shop-grid .card-body h3 { font-size: 0.92rem; line-height: 1.24; margin-top: 0; min-width: 0; width: 100%; } .shop-grid .card-body p { font-size: 0.88rem; line-height: 1.4; margin-top: 0.35rem; max-width: none; min-width: 0; } .shop-grid .card-body .price-tag { font-size: 0.76rem; margin-top: 0.6rem; } .shop-grid .card-body .card-link { margin-top: 0.7rem; font-size: 0.76rem; } } /* ---- Add to cart button feedback ---- */ .add-to-cart-btn.is-added { background: var(--accent-2); } /* ---- Cart trigger + badge ---- */ .cart-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text); cursor: pointer; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); } .cart-trigger:hover { border-color: var(--accent-line); color: var(--accent); } .cart-trigger svg { width: 17px; height: 17px; } .cart-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--accent); color: #08120f; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } .cart-badge[hidden] { display: none; } /* ---- Cart panel ---- */ .cart-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(5,7,6,0.6); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s; } .cart-overlay.is-open { opacity: 1; visibility: visible; } .cart-panel { position: fixed; top: 0; right: 0; height: 100%; z-index: 91; width: min(400px, 92vw); background: var(--bg-elev); border-left: 1px solid var(--border); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.5s var(--ease-spring); } .cart-panel.is-open { transform: translateX(0); } .cart-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.6rem; border-bottom: 1px solid var(--border); flex-shrink: 0; } .cart-panel-head h4 { font-size: 1.05rem; } .cart-close { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); } .cart-close:hover { border-color: var(--accent-line); color: var(--accent); } .cart-items { flex-grow: 1; overflow-y: auto; padding: 1.2rem 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; } .cart-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); } .cart-item:last-child { border-bottom: none; padding-bottom: 0; } .cart-item-name { font-size: 0.9rem; } .cart-item-meta { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.35rem; font-family: var(--font-mono); } .cart-item-remove { color: var(--text-dimmer); font-size: 0.75rem; text-decoration: underline; background: none; border: none; cursor: pointer; margin-top: 0.5rem; padding: 0; } .cart-item-remove:hover { color: var(--accent); } .cart-item-price { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent); white-space: nowrap; } .cart-empty { color: var(--text-dim); font-size: 0.9rem; padding-block: 2.5rem; text-align: center; } .cart-footer { padding: 1.4rem 1.6rem 1.7rem; border-top: 1px solid var(--border); flex-shrink: 0; } .cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); margin-bottom: 1.1rem; } .cart-subtotal span:last-child { font-size: 1.1rem; color: var(--accent); } .cart-note { color: var(--text-dimmer); font-size: 0.76rem; margin-top: 0.9rem; text-align: center; } /* ========================================================================== Scroll reveal ========================================================================== */ /* Base: just opacity, so nothing flashes before JS runs. GSAP (when present) drives the slide-up/blur itself via inline styles and clears them when done, so it must never inherit the CSS transform/filter below — that treatment is scoped to html.css-reveal, set by main.js only when GSAP isn't available (see the fallback branch of the scroll-reveal init). */ .reveal { opacity: 0; } html.css-reveal .reveal { transform: translateY(28px); filter: blur(6px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); } html.css-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); } .reveal-delay-1 { transition-delay: 0.08s; } .reveal-delay-2 { transition-delay: 0.16s; } .reveal-delay-3 { transition-delay: 0.24s; } /* Stagger-group children (process-row, shop-grid, hero-stats): pre-hidden so there's no flash before GSAP (or the JS fallback) reveals them. */ .shop-grid > *, .hero-stats > *, .problem-copy > .problem-block, .bento > *, .mention-list > * { opacity: 0; } /* CSS-fallback pages (no GSAP, e.g. despre.html) get their own slide+blur transition here, since the JS fallback only toggles opacity/.is-visible — without this, group children would just snap from hidden to shown. */ html.css-reveal .shop-grid > *, html.css-reveal .hero-stats > *, html.css-reveal .problem-copy > .problem-block, html.css-reveal .bento > *, html.css-reveal .mention-list > * { transform: translateY(20px); filter: blur(4px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease); } html.css-reveal .shop-grid > *.is-visible, html.css-reveal .hero-stats > *.is-visible, html.css-reveal .problem-copy > .problem-block.is-visible, html.css-reveal .bento > *.is-visible, html.css-reveal .mention-list > *.is-visible { transform: translateY(0); filter: blur(0); } /* ========================================================================== Custom cursor: turquoise brand mark. Desktop + fine-pointer only — the html.custom-cursor-active class is added by main.js only after it confirms (hover: hover) and (pointer: fine), so touch/no-JS visitors never lose the native cursor. cursor:none is scoped to that class (not global), which is what makes the "fails to load" fallback automatic: no JS run = no class = native cursor untouched. ========================================================================== */ html.custom-cursor-active, html.custom-cursor-active * { cursor: none !important; } html.custom-cursor-active input, html.custom-cursor-active textarea { cursor: text !important; } #customCursor { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 9999; pointer-events: none; } #customCursor .cc-icon { position: absolute; left: -3px; top: -3px; width: 22px; height: 22px; transform: translateY(0) rotate(0deg); transition: transform 0.18s var(--ease-spring); } #customCursor .cc-icon img { width: 100%; height: 100%; max-width: none; display: block; transition: filter 0.18s ease; } /* Single "save" dip-and-tilt on hover of clickable elements — no loop, no full rotation. */ #customCursor.is-hover .cc-icon { transform: translateY(1.5px) rotate(-5deg); } #customCursor.is-hover .cc-icon img { filter: brightness(1.3); } @media (prefers-reduced-motion: reduce) { #customCursor .cc-icon, #customCursor .cc-icon img { transition: none; } } /* Belt-and-suspenders: if a device matches (hover:hover)+(pointer:fine) at load but is actually touch-primary (some convertibles), don't strand the user with an invisible native cursor and no custom one reacting to touch. */ @media (hover: none), (pointer: coarse) { html.custom-cursor-active, html.custom-cursor-active * { cursor: auto !important; } #customCursor { display: none !important; } } /* ---- Scroll-to-top button (all pages, mobile + desktop) ---- */ .scroll-top-btn { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 45; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--border-strong); background: rgba(10, 14, 12, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .scroll-top-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-top-btn svg { width: 15px; height: 15px; } @media (hover: hover) and (pointer: fine) { .scroll-top-btn:hover { border-color: var(--accent-line); color: var(--accent); } } @media (max-width: 640px) { .scroll-top-btn { right: 1rem; bottom: 1rem; width: 2.3rem; height: 2.3rem; } .scroll-top-btn svg { width: 13px; height: 13px; } }