/* ============================================================ MOBILE — bespokelamp.art Activated by @media (max-width: 768px) JS also adds .is-mobile to before first paint so JS-driven components can react without flash. ============================================================ */ /* ── CONFIGURATOR: desktop hint banner (mobile only, show-once) ──────────── */ #desktop-hint { display: none; /* shown by JS only on mobile, only if not dismissed */ align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 14px; margin-bottom: 12px; border-left: 2px solid rgba(254,183,0,0.70); background: rgba(254,183,0,0.09); } #desktop-hint span { font-family: 'IBM Plex Mono','Courier New',monospace; font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(220,210,185,0.85); line-height: 1.5; } #desktop-hint button { background: none; border: none; cursor: pointer; font-size: 11px; color: rgba(220,210,185,0.55); padding: 2px 4px; flex-shrink: 0; transition: color 0.2s; line-height: 1; } #desktop-hint button:hover { color: rgba(220,210,185,0.9); } /* ── LANDING: desktop nudge line (mobile only) ────────────────────────────── */ .desktop-nudge { display: none; /* shown only on mobile via media query below */ } @media (max-width: 768px) { /* Show the landing nudge */ .desktop-nudge { display: block !important; margin-top: 14px; font-family: 'Inter', system-ui, sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 0.11em; color: rgba(176,125,48,0.55); text-align: center; } /* ── CONFIGURATOR: strip header/footer ── */ header { padding: 0 16px !important; height: 50px !important; } .h-nav { display: none !important; } .h-brand { font-size: 14px !important; letter-spacing: 0.1em !important; } .lang-tgl { gap: 4px !important; } footer { padding: 0 16px !important; height: 30px !important; } .f-coords { display: none !important; } /* ── CONFIGURATOR: collapse to single column ── */ .app { top: 50px !important; bottom: 30px !important; grid-template-columns: 1fr !important; } /* Step side fills full width */ .step-side { padding: 14px 18px 10px !important; border-right: none !important; } /* Hide the blueprint side entirely — accessible via FAB */ .blueprint-side { display: none !important; } /* Shrink the dial orbit to fit a phone */ .dial-orbit { width: 230px !important; height: 230px !important; margin: 0 auto 8px !important; } .orbit-ring { width: 170px !important; height: 170px !important; } .dial-center { width: 62px !important; height: 62px !important; } /* Recalculate satellite positions for smaller orbit (radius ~85px, center 115,115) */ .dial-sat[data-pos="0"] { top: 10% !important; left: 50% !important; } .dial-sat[data-pos="1"] { top: 29% !important; left: 82% !important; } .dial-sat[data-pos="2"] { top: 69% !important; left: 82% !important; } .dial-sat[data-pos="3"] { top: 88% !important; left: 50% !important; } .dial-sat[data-pos="4"] { top: 69% !important; left: 18% !important; } .dial-sat[data-pos="5"] { top: 29% !important; left: 18% !important; } /* Larger tap targets on dials (min 44×44 per WCAG) */ .dial-sat { width: 54px !important; height: 54px !important; } .dial-sat .s-lbl { font-size: 6.5px !important; } /* Dial hint */ .dial-hint { font-size: 7px !important; margin-bottom: 4px !important; } .dial-hint::before, .dial-hint::after { display: none !important; } /* Cards grid — 2 cols on phone (more space per card) */ .cards-grid { grid-template-columns: repeat(2, 1fr) !important; max-width: 100% !important; } .o-card { padding: 12px 8px !important; } /* Reduce title/subtitle margin */ .s-title { font-size: 22px !important; margin-bottom: 2px !important; } .s-sub { margin-bottom: 14px !important; } /* Step nav sticks to bottom cleanly */ .step-nav { padding: 10px 0 0 !important; } .btn-nav { padding: 9px 16px !important; font-size: 9px !important; } /* Intensity slider: a bit more touch-friendly */ input[type=range].int-slider { height: 4px !important; } input[type=range].int-slider::-webkit-slider-thumb { width: 22px !important; height: 22px !important; } .int-tick-lbl { font-size: 5.5px !important; } /* Upload zones: stack vertically */ .upload-row { grid-template-columns: 1fr !important; } /* Form rows: stack */ .form-row { grid-template-columns: 1fr !important; } /* Vision textarea: shorter */ .v-textarea { height: 56px !important; } /* ── BLUEPRINT FAB — floating chip to reveal blueprint overlay ── */ .m-fab { display: flex !important; position: fixed !important; bottom: 42px !important; right: 16px !important; z-index: 200 !important; align-items: center !important; gap: 6px !important; padding: 7px 14px !important; background: rgba(11,25,35,0.92) !important; border: 0.5px solid rgba(0,229,255,0.35) !important; backdrop-filter: blur(12px) !important; font-family: 'IBM Plex Mono','Courier New',monospace !important; font-size: 8px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(0,229,255,0.75) !important; cursor: pointer !important; box-shadow: 0 0 14px rgba(0,229,255,0.12) !important; transition: all 0.2s !important; } .m-fab::before { content: '⬡' !important; font-size: 10px !important; color: rgba(0,229,255,0.5) !important; } /* ── BLUEPRINT OVERLAY (shown when FAB tapped) ── */ .m-bp-overlay { display: none !important; position: fixed !important; inset: 50px 0 30px 0 !important; background: #0b1923 !important; z-index: 190 !important; flex-direction: column !important; overflow-y: auto !important; } .m-bp-overlay.open { display: flex !important; } .m-bp-close { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 16px !important; border-bottom: 0.5px solid rgba(255,255,255,0.08) !important; font-family: 'IBM Plex Mono','Courier New',monospace !important; font-size: 8px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(0,229,255,0.6) !important; cursor: pointer !important; } .m-bp-panels { display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 14px 16px !important; } /* ══════════════════════════════════ LANDING PAGE ══════════════════════════════════ */ nav { padding: 0 20px !important; height: 60px !important; } .nav-links { display: none !important; } .nav-brand { font-size: 18px !important; } /* Hero: single column, tighter text */ .hero { padding-top: 80px !important; min-height: unset !important; padding-bottom: 40px !important; } .hero-inner, .hero-content { max-width: 100% !important; padding: 0 24px !important; text-align: center !important; } .hero h1, .hero-title { font-size: clamp(32px, 10vw, 52px) !important; line-height: 1.1 !important; margin-bottom: 16px !important; } .hero-sub, .hero p { font-size: 14px !important; max-width: 100% !important; } .hero-cta, .cta-row { flex-direction: column !important; gap: 12px !important; align-items: stretch !important; margin-top: 24px !important; } .hero-cta a, .cta-row a, .btn-primary, .btn-secondary { width: 100% !important; text-align: center !important; padding: 14px 20px !important; } /* Feature / value prop grid */ .features-grid, .values-grid, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 20px !important; } .section-inner, .section-content, .container { padding-left: 24px !important; padding-right: 24px !important; } /* Steps / process row */ .steps-row, .process-row { flex-direction: column !important; gap: 24px !important; } /* Two-column split sections */ .split-section, .two-col { grid-template-columns: 1fr !important; gap: 24px !important; } /* ══════════════════════════════════ PORTFOLIO PAGE ══════════════════════════════════ */ .portfolio-grid, .lamps-grid, .gallery-grid { grid-template-columns: 1fr !important; gap: 20px !important; padding: 16px !important; } .portfolio-card, .lamp-card { max-width: 100% !important; } .portfolio-hero, .page-hero { padding: 80px 24px 32px !important; } .portfolio-filters, .filter-row { flex-wrap: wrap !important; gap: 8px !important; padding: 16px !important; } /* ══════════════════════════════════ BLOG PAGE ══════════════════════════════════ */ .blog-grid, .articles-grid, .posts-grid { grid-template-columns: 1fr !important; gap: 20px !important; padding: 16px !important; } .blog-hero, .blog-header { padding: 80px 24px 32px !important; } .article-overlay, .post-overlay { font-size: 13px !important; } /* ══════════════════════════════════ FLOW / PROCESS PAGE ══════════════════════════════════ */ /* Page header */ .page-header { padding: 90px 24px 40px !important; } .page-title { font-size: clamp(32px, 9vw, 48px) !important; } .page-sub { font-size: 14px !important; max-width: 100% !important; } /* Journey container: remove side padding */ .journey-container { padding: 40px 24px 60px !important; } /* Hide the central spine — doesn't make sense without the split layout */ .spine, .spine-glow { display: none !important; } /* Each step: collapse from 3-column grid to single column */ .step { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; margin-bottom: 40px !important; padding-left: 0 !important; } /* Reset all grid column/row assignments */ .step-left, .step-right, .step.even .step-left, .step.even .step-right { grid-column: unset !important; grid-row: unset !important; text-align: left !important; padding: 0 !important; } .step-center, .step.even .step-center { grid-column: unset !important; grid-row: unset !important; flex-direction: row !important; align-items: center !important; margin-bottom: 16px !important; width: 100% !important; } /* Node: smaller, sits inline with step number label */ .step-node { width: 48px !important; height: 48px !important; flex-shrink: 0 !important; } .step-node-num { font-size: 18px !important; } /* Hide the vertical connector between nodes */ .step-connector { display: none !important; } /* Step content: full width, no indentation */ .step-content { padding-top: 0 !important; width: 100% !important; } .step-title { font-size: clamp(22px, 6vw, 30px) !important; margin-bottom: 8px !important; } .step-detail { padding: 16px !important; } /* Branch cards: stack vertically */ .branch { margin: 0 0 32px !important; flex-direction: column !important; align-items: flex-start !important; } .branch-line { display: none !important; } .branch-card { width: 100% !important; max-width: 100% !important; } /* CTA section at bottom */ .journey-cta, .flow-cta { padding: 40px 24px !important; text-align: center !important; } .journey-cta .cta-title, .flow-cta h2 { font-size: clamp(28px, 8vw, 40px) !important; } } /* end @media (max-width: 768px) */