/* ============================================================ DG Homepage CSS — Split hero + concept picker ============================================================ */ /* ── Scroll-snap container (homepage only) ── dg-home.css is only loaded on the homepage, so targeting html is safe */ html { scroll-snap-type: y proximity; scroll-padding-top: var(--nav-height, 60px); } /* ── Hero: 100vh split layout ── */ .hero { width: 100%; height: 100vh; display: flex; position: relative; overflow: hidden; scroll-snap-align: start; } /* Left: Content */ .hero__left { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 3rem 2rem 3rem 5rem; position: relative; z-index: 1; max-width: 60%; opacity: 0; transform: translateX(-30px); animation: revealLeft 0.8s ease-out 1.8s forwards; } .hero__brand-line { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent); margin-bottom: 1.5rem; } .hero__headline { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; margin-bottom: 1rem; } .hero__headline .ai { color: var(--primary); } .hero__headline .ops { color: var(--secondary); } .hero__sub { font-size: 1.1rem; color: var(--ink-muted); line-height: 1.6; max-width: 560px; margin-bottom: 2rem; } /* Service pills */ .hero__services { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; } .service-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; cursor: default; transition: all 0.2s; opacity: 0; transform: translateY(8px); } .service-pill.show { opacity: 1; transform: translateY(0); } .service-pill:hover { transform: translateY(-1px); } .service-pill--understand { background: rgba(7,147,255,0.12); color: var(--primary); border: 1px solid rgba(7,147,255,0.25); } .service-pill--build { background: rgba(51,204,119,0.12); color: var(--secondary); border: 1px solid rgba(51,204,119,0.25); } .service-pill--sustain { background: rgba(245,166,35,0.12); color: var(--accent); border: 1px solid rgba(245,166,35,0.25); } .pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .service-pill--understand .pill-dot { background: var(--primary); } .service-pill--build .pill-dot { background: var(--secondary); } .service-pill--sustain .pill-dot { background: var(--accent); } /* Hero CTAs */ .hero__ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; } /* Right: Logo area */ .hero__right { flex: 0 0 40%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } /* Real logo mount — rendered by logo.js */ .hero-logo-mount { position: relative; width: clamp(280px, 35vw, 460px); height: clamp(280px, 35vw, 460px); } .hero-logo-mount .logoCanvas { width: 100%; height: 100%; position: relative; } .hero-logo-mount .logoCanvas svg { width: 100%; height: 100%; display: block; } .hero-logo-mount .logoOverlay { position: absolute; inset: 0; pointer-events: none; } /* Clickable logo (easter egg) */ .hero-logo-mount { cursor: pointer; } /* Hide the tagline overlay — hero left panel already shows it */ .hero-logo-mount .logoOverlay__tagline { display: none !important; } /* ── Centered logo intro ── Logo is translated to viewport center via GSAP, then slides back to hero__right while hero content reveals. Only active on desktop first-visit. The .dg-intro class is added to by an inline script in before first paint, so these elements are never visible until revealPageChrome(). */ .dg-intro #dg-nav, .dg-intro .explore-page, .dg-intro .dg-footer { opacity: 0; } .hero--intro .hero__left { animation: none; } .hero--intro .scroll-hint { opacity: 0; animation: none; } /* Scroll indicator — clickable anchor */ .scroll-hint { position: absolute; bottom: 2rem; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; color: var(--ink-muted); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; z-index: 2; animation: pulse 2.5s ease-in-out infinite; text-decoration: none; cursor: pointer; } .scroll-hint__arrow { font-size: 1.5rem; animation: bounce 2s ease-in-out infinite; } /* ── Explore "page" — snap section ── */ .explore-page { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; scroll-snap-align: start; padding-bottom: 8vh; } /* ── Transition + Concept Picker ── */ .transition { padding: 4rem 2rem 2rem; text-align: center; position: relative; z-index: 1; } /* Uses shared .dg-section__divider — zero top margin in transition context */ .transition .dg-section__divider { margin-top: 0; } .transition__text { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: clamp(1.8rem, 4.5vw, 2.8rem); margin-bottom: 0.6rem; } .transition__sub { color: var(--ink-muted); font-size: 1.2rem; max-width: 560px; margin: 0 auto; line-height: 1.5; } .concepts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 1200px; margin: 2.5rem auto; padding: 0 2rem; position: relative; z-index: 1; } .concept-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; cursor: pointer; transition: all 0.25s; position: relative; overflow: hidden; min-height: 180px; } .concept-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .concept-card--diagnostic::before { background: var(--primary); } .concept-card--blueprint::before { background: var(--secondary); } .concept-card--problems::before { background: var(--accent); } .concept-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px var(--shadow); border-color: var(--ink-muted); } .concept-card--diagnostic.active { box-shadow: 0 0 0 1px var(--primary); } .concept-card--blueprint.active { box-shadow: 0 0 0 1px var(--secondary); } .concept-card--problems.active { box-shadow: 0 0 0 1px var(--accent); } .concept-card__title { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 1.4rem; margin-bottom: 0.5rem; } .concept-card--diagnostic .concept-card__title { color: var(--primary); } .concept-card--blueprint .concept-card__title { color: var(--secondary); } .concept-card--problems .concept-card__title { color: var(--accent); } .concept-card__desc { font-size: 1.1rem; color: var(--ink-muted); line-height: 1.55; } .concept-card__prompt { margin-top: 1rem; font-size: 0.95rem; font-weight: 600; } .concept-card--diagnostic .concept-card__prompt { color: var(--primary); } .concept-card--blueprint .concept-card__prompt { color: var(--secondary); } .concept-card--problems .concept-card__prompt { color: var(--accent); } /* Concept content + footer flow freely (no snap) */ .concept-content, .dg-footer { scroll-snap-align: none; } /* Push terminal offscreen when a concept panel is open */ .terminal-spacer { display: none; } body:has(.concept-content.visible) .terminal-spacer { display: block; height: 30vh; } /* ── Concept Content Areas ── */ .concept-content { display: none; max-width: 1100px; margin: 0 auto; padding: 0 2rem 4rem; padding-top: calc(var(--nav-height, 60px) + 1rem); position: relative; z-index: 1; } .concept-content.visible { display: block; min-height: calc(100vh - var(--nav-height, 60px)); animation: slideIn 0.35s ease-out; } .cc-header { text-align: center; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .cc-header h2 { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 1.8rem; } .cc-back { background: none; border: none; color: var(--ink-muted); font-size: 1rem; cursor: pointer; margin-bottom: 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; font-family: inherit; } .cc-back:hover { color: var(--ink); } /* ── Diagnostic ── */ .diag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-bottom: 2rem; } .diag-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 10px; padding: 1.25rem 1.4rem; cursor: pointer; transition: all 0.2s; font-weight: 600; font-size: 1.1rem; } .diag-card:hover { border-left-color: var(--secondary); background: var(--surface-variant); transform: translateY(-2px); } .diag-card.active { border-left-color: var(--secondary); box-shadow: 0 0 0 1px var(--secondary); } .diag-result { display: none; margin-top: 1.25rem; } .diag-result.visible { display: block; animation: slideIn 0.3s ease-out; } .diag-result__label { font-family: 'Roboto', sans-serif; font-weight: 700; color: var(--secondary); font-size: 1.1rem; margin-bottom: 1rem; } .step { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.85rem; } .step__num { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .step__body { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.25rem; flex: 1; } .step__title { font-family: 'Roboto', sans-serif; font-weight: 700; color: var(--primary); font-size: 1.1rem; margin-bottom: 0.2rem; } .step__why { font-size: 1rem; color: var(--ink-muted); line-height: 1.5; } /* ── Blueprint ── */ .bp-canvas { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 2rem 1.5rem; } .bp-stages { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; } .bp-tag { text-align: center; font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; padding: 0.4rem 0.8rem; border-radius: 16px; display: inline-block; } .bp-tag--understand { background: rgba(7,147,255,0.15); color: var(--primary); border: 1px solid rgba(7,147,255,0.3); } .bp-tag--build { background: rgba(51,204,119,0.15); color: var(--secondary); border: 1px solid rgba(51,204,119,0.3); } .bp-tag--sustain { background: rgba(245,166,35,0.15); color: var(--accent); border: 1px solid rgba(245,166,35,0.3); } .bp-flow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; } .bp-col { display: flex; flex-direction: column; gap: 0.6rem; } .bp-node { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1.1rem; cursor: pointer; transition: all 0.2s; } .bp-node:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--shadow); } .bp-node--understand { border-left: 4px solid var(--primary); } .bp-node--build { border-left: 4px solid var(--secondary); } .bp-node--sustain { border-left: 4px solid var(--accent); } .bp-node__title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1.05rem; } .bp-node--understand .bp-node__title { color: var(--primary); } .bp-node--build .bp-node__title { color: var(--secondary); } .bp-node--sustain .bp-node__title { color: var(--accent); } .bp-node__liner { font-size: 0.9rem; color: var(--ink-muted); margin-top: 0.15rem; } .bp-detail { display: none; margin-top: 1.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; position: relative; } .bp-detail.visible { display: block; animation: slideIn 0.25s ease-out; } .bp-detail__close { position: absolute; top: 0.75rem; right: 1rem; background: none; border: none; color: var(--ink-muted); font-size: 1.3rem; cursor: pointer; font-family: inherit; } .bp-detail__title { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 1.3rem; margin-bottom: 0.5rem; } .bp-detail__text { font-size: 1.05rem; color: var(--ink-muted); line-height: 1.55; } /* ── Problem Board ── */ .pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; } .pb-note { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.2rem 1.25rem; cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden; } .pb-note::before { content: ''; position: absolute; top: 0; left: 0.8rem; right: 0.8rem; height: 3px; border-radius: 0 0 2px 2px; } .pb-note:nth-child(3n+1)::before { background: var(--primary); } .pb-note:nth-child(3n+2)::before { background: var(--secondary); } .pb-note:nth-child(3n+3)::before { background: var(--accent); } .pb-note:nth-child(3n+1) { transform: rotate(-0.3deg); } .pb-note:nth-child(3n+2) { transform: rotate(0.2deg); } .pb-note:nth-child(3n+3) { transform: rotate(-0.15deg); } .pb-note:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 6px 18px var(--shadow); } .pb-note.active { transform: rotate(0deg); border-color: var(--primary); } .pb-note__text { font-weight: 600; font-size: 1.05rem; line-height: 1.4; } .pb-exp { display: none; margin-top: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .pb-exp.visible { display: block; animation: slideIn 0.3s ease-out; } .pb-exp__top { padding: 1.5rem 2rem; border-bottom: 1px solid var(--border); position: relative; } .pb-exp__close { position: absolute; top: 0.75rem; right: 1rem; background: none; border: none; color: var(--ink-muted); font-size: 1.4rem; cursor: pointer; font-family: inherit; } .pb-exp__echo { font-weight: 600; color: var(--accent); font-style: italic; margin-bottom: 0.6rem; font-size: 1.15rem; } .pb-exp__dlabel { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); margin-bottom: 0.35rem; } .pb-exp__diag { font-size: 1.05rem; color: var(--ink-muted); line-height: 1.55; } .pb-exp__bottom { padding: 1.5rem 2rem; } .pb-exp__plabel { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--secondary); margin-bottom: 0.75rem; } .pb-step { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.65rem; } .pb-step__num { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--secondary); color: var(--secondary); font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pb-step__title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1.05rem; } .pb-step__why { font-size: 0.95rem; color: var(--ink-muted); line-height: 1.45; } .pb-exp__cta { text-align: center; padding: 0 2rem 1.5rem; } .pb-exp__cta-hint { font-size: 0.85rem; color: var(--ink-muted); margin-top: 0.35rem; } /* ── Animations ── */ @keyframes revealLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes pillIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } @keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } } /* ── Responsive: Tablet (768px–1024px) ── */ @media (min-width: 768px) and (max-width: 1024px) { .hero__left { padding: 3rem 1.5rem 3rem 3rem; max-width: 55%; } .hero__right { flex: 0 0 45%; } .hero__headline { font-size: clamp(1.6rem, 3.5vw, 2.4rem); } .hero__sub { font-size: 1rem; } .hero__services { gap: 0.4rem; } .service-pill { font-size: 0.75rem; padding: 0.35rem 0.7rem; } .concept-card { padding: 1.5rem; min-height: 150px; } .concept-card__title { font-size: 1.2rem; } .concept-card__desc { font-size: 1rem; } } /* ── Responsive: Mobile — hide scroll-hint (natural scrolling, no prompt needed) ── */ @media (max-width: 767px) { .scroll-hint { display: none; } } /* ── Responsive: Mobile (<768px) ── */ @media (max-width: 767px) { html { scroll-snap-type: none; } .hero { flex-direction: column-reverse; height: auto; min-height: 100vh; scroll-snap-align: none; } .explore-page { min-height: auto; scroll-snap-align: none; } .hero__left { max-width: 100%; padding: 2rem 1.5rem; animation-delay: 1s; } .hero__right { flex: 0 0 auto; padding: 3rem 1.5rem 0; } .hero-logo-mount { width: min(280px, 70vw); height: min(280px, 70vw); } .concepts { grid-template-columns: 1fr; } .diag-grid { grid-template-columns: 1fr; } .bp-stages, .bp-flow { grid-template-columns: 1fr; } .pb-grid { grid-template-columns: 1fr; } }