diff --git a/ventures/dollhouse/style.css b/ventures/dollhouse/style.css new file mode 100644 index 0000000..b67a9c6 --- /dev/null +++ b/ventures/dollhouse/style.css @@ -0,0 +1,412 @@ +/* Dollhouse Styles */ + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + line-height: 1.6; + color: #333; + background-color: #f8f9fa; +} + +/* Header */ +header { + background-color: #fff; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + padding: 15px 20px; + position: sticky; + top: 0; + z-index: 100; +} + +.header-content { + max-width: 1200px; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 15px; +} + +header h1 { + font-size: 1.5rem; + font-weight: 700; + margin: 0; +} + +header p { + font-size: 0.9rem; + margin: 0; + color: #666; +} + +.cta-button { + background-color: #007bff; + color: white; + border: none; + border-radius: 4px; + padding: 8px 16px; + font-size: 0.9rem; + font-weight: 600; + text-decoration: none; + cursor: pointer; + transition: background-color 0.2s; + white-space: nowrap; +} + +.cta-button:hover { + background-color: #0056b3; +} + +.cta-note { + font-size: 0.75rem; + color: #999; + margin: 0; +} + +/* Main Product Section */ +#try { + min-height: calc(100vh - 80px); + padding: 20px; + background-color: #fff; +} + +.product-container { + max-width: 1200px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 30px; +} + +@media (min-width: 992px) { + .product-container { + flex-direction: row; + } +} + +.editor-panel { + flex: 1; + display: flex; + flex-direction: column; + gap: 15px; +} + +.preview-panel { + flex: 1; + background-color: #f8f9fa; + border-radius: 8px; + padding: 20px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); +} + +.preview-panel h2 { + margin-bottom: 15px; + text-align: center; +} + +/* Toolbar */ +.toolbar { + display: flex; + flex-wrap: wrap; + gap: 10px; + padding: 10px; + background-color: #e9ecef; + border-radius: 6px; +} + +.tool-btn { + background-color: #fff; + border: 1px solid #ced4da; + border-radius: 4px; + padding: 8px 12px; + cursor: pointer; + font-size: 0.85rem; + transition: all 0.2s; +} + +.tool-btn:hover { + background-color: #f1f3f5; +} + +.tool-btn.active { + background-color: #007bff; + color: white; + border-color: #007bff; +} + +/* Canvas */ +.canvas-container { + position: relative; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 6px; + overflow: hidden; + min-height: 400px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); +} + +.grid-container { + position: relative; + background-color: #f8f9fa; + background-image: + linear-gradient(#eee 1px, transparent 1px), + linear-gradient(90deg, #eee 1px, transparent 1px); + background-size: 20px 20px; +} + +.grid-cell { + position: absolute; + border: 1px solid #eee; + cursor: crosshair; +} + +.walls-container, +.furniture-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.wall { + position: absolute; + background-color: #8B4513; + border: 1px solid #5D2906; + z-index: 10; +} + +.furniture { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-weight: bold; + font-size: 12px; + border-radius: 4px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + z-index: 20; + pointer-events: auto; + cursor: move; +} + +/* Controls */ +.controls { + display: flex; + gap: 10px; + justify-content: flex-end; +} + +.control-btn { + padding: 10px 15px; + border: 1px solid #ddd; + border-radius: 4px; + background-color: #fff; + cursor: pointer; + font-size: 0.9rem; + transition: all 0.2s; +} + +.control-btn:hover { + background-color: #f1f3f5; +} + +.control-btn.primary { + background-color: #28a745; + color: white; + border-color: #28a745; +} + +.control-btn.primary:hover { + background-color: #218838; +} + +/* Share Info */ +.share-info { + margin-top: 20px; + padding: 15px; + background-color: #e9f7ef; + border-radius: 4px; + font-size: 0.9rem; +} + +.share-info p { + margin: 0; +} + +/* Sections Styling */ +#how-it-works, +#why-this-exists, +#pricing, +#limits { + max-width: 1200px; + margin: 40px auto; + padding: 0 20px; +} + +#how-it-works h2, +#why-this-exists h2, +#pricing h2, +#limits h2 { + margin-bottom: 20px; + text-align: center; +} + +#how-it-works ol { + max-width: 600px; + margin: 0 auto; + padding-left: 20px; +} + +#how-it-works li, +#limits li { + margin-bottom: 10px; +} + +#why-this-exists ul { + max-width: 600px; + margin: 20px auto; + padding-left: 20px; +} + +#why-this-exists li { + margin-bottom: 10px; +} + +#why-this-exists a { + color: #007bff; + text-decoration: none; +} + +#why-this-exists a:hover { + text-decoration: underline; +} + +/* Pricing Tiers */ +.pricing-tiers { + display: flex; + flex-wrap: wrap; + gap: 30px; + justify-content: center; +} + +.tier { + flex: 1; + min-width: 300px; + max-width: 500px; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 8px; + padding: 25px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); +} + +.tier h3 { + margin-top: 0; + color: #007bff; +} + +.tier ul { + margin: 20px 0; + padding-left: 20px; +} + +.tier li { + margin-bottom: 10px; +} + +.tier-button { + display: inline-block; + background-color: #007bff; + color: white; + text-decoration: none; + padding: 10px 20px; + border-radius: 4px; + font-weight: 600; + transition: background-color 0.2s; + text-align: center; + width: 100%; +} + +.tier-button:hover { + background-color: #0056b3; +} + +/* Footer */ +footer { + max-width: 1200px; + margin: 40px auto; + padding: 20px; + text-align: center; + border-top: 1px solid #eee; +} + +footer p { + margin: 10px 0; +} + +footer a { + color: #007bff; + text-decoration: none; +} + +footer a:hover { + text-decoration: underline; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .header-content { + flex-direction: column; + align-items: flex-start; + } + + .cta-button { + align-self: flex-start; + } + + #try { + padding: 10px; + } + + .product-container { + gap: 20px; + } + + .toolbar { + flex-direction: row; + flex-wrap: wrap; + } + + .tool-btn { + flex: 1; + min-width: calc(50% - 5px); + } + + .controls { + flex-direction: column; + } + + .control-btn { + width: 100%; + } + + .tier { + min-width: 100%; + } +} + +/* Diorama SVG */ +#diorama-svg { + background-color: white; + border: 1px solid #ddd; + border-radius: 4px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); +} \ No newline at end of file