/* ===================================================================== style.css β€” All the styling for Matts 3D Printing --------------------------------------------------------------------- THEME: dark "maker lab" look COLORS: black background + green & blue accents FONTS: Fredoka (fun headings) + DM Sans (clean body text) ===================================================================== */ /* --------------------------------------------------------------------- 1) COLOR VARIABLES ("paint cans") Define a color once here, then reuse it with var(--name). Change it here and it updates across the WHOLE site. Magic! ✨ --------------------------------------------------------------------- */ :root { --black: #0d1117; /* deep, almost-black page background */ --panel: #161b22; /* cards & bars (a little lighter) */ --line: #232a33; /* thin border lines */ --green: #2ee6a6; /* bright "filament" green (main accent) */ --blue: #3da9fc; /* electric blue (2nd accent) */ --white: #e6edf3; /* soft white for text */ --gray: #8b949e; /* muted gray for less-important text */ --radius: 14px; /* roundness of corners */ --maxw: 1100px; /* how wide the content can stretch */ } /* 🌞 LIGHT MODE β€” same variable NAMES (so nothing else has to change), just different VALUES. Toggled by the sun/moon button in the header which sets data-theme="light" on the element. */ :root[data-theme="light"] { --black: #f6f8fa; --panel: #ffffff; --line: #d0d7de; --green: #1aab7a; --blue: #1f7ad8; --white: #1f2328; /* primary text color (NOT actually white anymore!) */ --gray: #6e7781; } /* In light mode, the frosted header needs a light tint instead of dark */ :root[data-theme="light"] .site-header { background: rgba(246, 248, 250, 0.85); } /* The dotted-line "free shipping unlocked" panel needs a touch more contrast */ :root[data-theme="light"] .free-ship-bar.unlocked { background: rgba(46, 230, 166, 0.08); } /* --------------------------------------------------------------------- 2) RESET β€” make every browser start from the same place --------------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', system-ui, sans-serif; color: var(--white); background-color: var(--black); line-height: 1.6; /* Faint horizontal lines, like the layers of a 3D print 🧡 */ background-image: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 30px ); } h1, h2, h3, .logo-text { font-family: 'Fredoka', sans-serif; font-weight: 600; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* A reusable centered, width-limited container */ .header-inner, .footer-inner, .page-content { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: 22px; padding-right: 22px; } /* --------------------------------------------------------------------- 3) HEADER + NAVIGATION (the bar at the top of every page) --------------------------------------------------------------------- */ .site-header { position: sticky; /* stays stuck to the top as you scroll */ top: 0; z-index: 50; background: rgba(13, 17, 23, 0.85); backdrop-filter: blur(8px); /* frosted-glass blur behind the bar */ border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; /* logo left, menu right */ padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; gap: 10px; } /* ---- Logo (top left) ---- */ .logo { display: flex; align-items: center; gap: 10px; } .logo-badge { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; /* green-to-blue gradient = our two brand colors blended */ background: linear-gradient(135deg, var(--green), var(--blue)); box-shadow: 0 0 22px rgba(46, 230, 166, 0.35), /* soft green outer glow */ inset 0 0 0 1px rgba(255, 255, 255, 0.15); /* subtle edge highlight */ } .logo-text { font-size: 1.15rem; letter-spacing: 0.3px; color: var(--white); } .logo-text strong { color: var(--green); } /* make the "3D" pop */ /* ---- Menu links ---- */ .main-nav { display: flex; gap: 6px; flex-wrap: wrap; } .main-nav a { padding: 8px 14px; border-radius: 8px; color: var(--gray); font-weight: 500; transition: color 0.2s ease, background 0.2s ease; } .main-nav a:hover { color: var(--white); background: var(--panel); } /* The page you're on gets a green highlight */ .main-nav a.active { color: var(--green); background: rgba(46, 230, 166, 0.12); } /* --------------------------------------------------------------------- 4) PAGE CONTENT spacing --------------------------------------------------------------------- */ .page-content { padding-top: 56px; padding-bottom: 80px; min-height: 62vh; /* keeps the footer near the bottom on short pages */ } /* --------------------------------------------------------------------- 5) HERO (the big welcome area on the homepage) --------------------------------------------------------------------- */ .hero { text-align: center; padding-top: 20px; } .hero .eyebrow { display: inline-block; font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); border: 1px solid var(--line); padding: 6px 14px; border-radius: 999px; margin-bottom: 22px; } .hero h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); /* grows/shrinks with screen size */ line-height: 1.05; margin-bottom: 18px; } .hero h1 .pop { /* gradient-colored text for the exciting words */ background: linear-gradient(135deg, var(--green), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .lead { max-width: 620px; margin: 0 auto 30px; color: var(--gray); font-size: 1.1rem; } /* ✨ Trust strip under the hero CTAs β€” quick credibility badges that say "this is a real person, in a real place, who'll take care of you". */ .trust-strip { list-style: none; padding: 0; margin: 28px auto 0; max-width: 720px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; } .trust-strip li { color: var(--white); background: rgba(46, 230, 166, 0.08); border: 1px solid rgba(46, 230, 166, 0.25); border-radius: 999px; padding: 7px 14px; font-size: 0.92rem; font-weight: 500; } /* ✨ Buy reassurance β€” three quick check-marks under the "Add to Cart" button. Removes the last bit of hesitation right at the decision point. */ .buy-reassurance { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 6px; color: var(--gray); font-size: 0.92rem; } .buy-reassurance li { line-height: 1.4; } /* --------------------------------------------------------------------- 6) BUTTONS --------------------------------------------------------------------- */ .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .btn { display: inline-block; padding: 13px 24px; border-radius: 10px; font-family: 'Fredoka', sans-serif; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; } .btn:hover { transform: translateY(-2px); } /* gentle lift on hover */ .btn-primary { /* green = main action */ background: var(--green); color: #06231a; box-shadow: 0 6px 20px rgba(46, 230, 166, 0.30); } .btn-secondary { /* blue outline = 2nd action */ background: transparent; color: var(--blue); border-color: var(--blue); } .btn-secondary:hover { background: rgba(61, 169, 252, 0.12); } /* --------------------------------------------------------------------- 7) "WHAT I DO" feature cards --------------------------------------------------------------------- */ .features { display: grid; grid-template-columns: repeat(3, 1fr); /* three columns side by side */ gap: 18px; margin-top: 64px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; transition: transform 0.18s ease, border-color 0.18s ease; } .card:hover { transform: translateY(-4px); border-color: var(--green); } .card .icon { font-size: 1.9rem; margin-bottom: 12px; } .card h3 { font-size: 1.2rem; margin-bottom: 8px; } .card p { color: var(--gray); font-size: 0.96rem; } /* --------------------------------------------------------------------- 8) FOOTER --------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); background: var(--panel); padding: 30px 0; text-align: center; } .footer-brand { font-family: 'Fredoka', sans-serif; color: var(--white); font-size: 1.05rem; } .footer-credit { color: var(--green); margin: 6px 0; font-weight: 500; } .footer-copy { color: var(--gray); font-size: 0.85rem; } /* --------------------------------------------------------------------- 9) PHONE-SIZE TWEAKS (anything under 720px wide) --------------------------------------------------------------------- */ @media (max-width: 720px) { .features { grid-template-columns: 1fr; } /* stack cards */ .header-inner { justify-content: center; } /* center logo + menu */ } /* ===================================================================== ============================ PART 2 =============================== Styles for the Shop, Product page, Cart, Forms, and Admin area. ===================================================================== */ /* ---- Header right side: menu + cart together ---- */ .header-actions { display: flex; align-items: center; gap: 10px; } .cart-link { position: relative; font-size: 1.25rem; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); transition: border-color 0.2s ease, background 0.2s ease; } .cart-link:hover { border-color: var(--green); background: var(--panel); } .cart-count { position: absolute; top: -6px; right: -6px; background: var(--green); color: #06231a; font-size: 0.7rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; } /* ---- Account menu: the ☰ three-line dropdown in the header ---- */ .account-menu { position: relative; display: flex; align-items: center; } /* hide the real checkbox, but it still does the on/off work */ .acct-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* the three-line (☰) button */ .acct-button { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 42px; height: 38px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .acct-button:hover { border-color: var(--green); background: var(--panel); } .acct-button span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--white); transition: transform 0.25s ease, opacity 0.2s ease; } /* when the menu is open, the three lines morph into an βœ• */ .acct-toggle:checked ~ .acct-button span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .acct-toggle:checked ~ .acct-button span:nth-child(2) { opacity: 0; } .acct-toggle:checked ~ .acct-button span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* the dropdown panel (hidden until the checkbox is checked) */ .acct-dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 175px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: none; flex-direction: column; gap: 2px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); z-index: 60; } .acct-toggle:checked ~ .acct-dropdown { display: flex; } /* open it! */ .acct-dropdown a { padding: 10px 14px; border-radius: 8px; color: var(--white); font-weight: 500; } .acct-dropdown a:hover { background: var(--black); color: var(--green); } .acct-dropdown .acct-signup { color: var(--green); } .acct-divider { height: 1px; background: var(--line); margin: 4px 6px; } .acct-hi { padding: 8px 14px 10px; color: var(--gray); font-size: 0.85rem; border-bottom: 1px solid var(--line); margin-bottom: 4px; } /* ---- About page ---- */ .about-wrap { max-width: 720px; margin: 0 auto; } .about-text { color: var(--gray); font-size: 1.12rem; line-height: 1.85; } .about-text strong { color: var(--white); } /* ---- Sign Up / Log In page cards ---- */ .auth-wrap { display: grid; place-items: center; padding: 10px 0 30px; } .auth-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 34px; max-width: 420px; width: 100%; } .auth-card h1 { text-align: center; margin-bottom: 6px; font-size: 1.8rem; } .auth-card > .muted { text-align: center; display: block; margin-bottom: 20px; } .auth-switch { text-align: center; margin-top: 18px; color: var(--gray); } .auth-switch a { color: var(--green); font-weight: 500; } /* Profile card: little stats row at the top */ .profile-card { max-width: 480px; } .profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--black); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 20px; } .profile-stats div { text-align: center; } .profile-stats .stat-label { display: block; color: var(--gray); font-size: 0.78rem; margin-bottom: 2px; } .profile-stats strong { color: var(--white); font-size: 1.15rem; } .profile-stats a { color: var(--green); } /* ---- Verification code box + input ---- */ .code-box { background: var(--black); border: 2px dashed var(--blue); border-radius: 12px; padding: 16px; text-align: center; margin-bottom: 18px; } .code-box .code-digits { font-family: 'Fredoka', sans-serif; font-size: 2.1rem; letter-spacing: 8px; color: var(--green); margin: 4px 0; } .code-box .code-label { color: var(--gray); font-size: 0.8rem; } .code-input { text-align: center; font-family: 'Fredoka', sans-serif; font-size: 1.5rem; letter-spacing: 10px; } .linklike { background: none; border: none; padding: 0; color: var(--green); font: inherit; text-decoration: underline; cursor: pointer; } /* ---- 🎁 First-time visitor welcome popup ---- */ .welcome-popup { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); z-index: 1000; display: grid; place-items: center; padding: 20px; animation: welcome-fade-in 0.25s ease; } .welcome-popup[hidden] { display: none; } .welcome-popup-inner { background: var(--panel); border: 1px solid var(--green); border-radius: 18px; padding: 30px 30px 26px; max-width: 420px; width: 100%; text-align: center; position: relative; box-shadow: 0 0 60px rgba(46, 230, 166, 0.25); animation: welcome-pop-in 0.3s cubic-bezier(.2,1.2,.3,1); } .welcome-emoji { font-size: 3rem; line-height: 1; margin-bottom: 8px; } .welcome-popup-inner h2 { margin-bottom: 10px; font-size: 1.5rem; } .welcome-popup-inner .muted { margin-bottom: 8px; } .welcome-close { position: absolute; top: 8px; right: 14px; background: none; border: none; color: var(--gray); font-size: 1.8rem; cursor: pointer; line-height: 1; padding: 4px 8px; } .welcome-close:hover { color: var(--white); } .welcome-code-box { background: var(--black); border: 2px dashed var(--green); border-radius: 12px; padding: 14px 16px; margin: 14px 0 18px; display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; } .welcome-code-box code { font-family: 'Fredoka', monospace; font-size: 1.5rem; font-weight: 600; color: var(--green); letter-spacing: 2px; } @keyframes welcome-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes welcome-pop-in { from { transform: scale(0.92) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } /* ---- πŸ’° Admin quote form (on requests page) ---- */ .quote-form { background: rgba(46, 230, 166, 0.06); border: 1px solid var(--green); border-radius: 12px; padding: 12px 14px; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; } .quote-form .quote-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .quote-form label { color: var(--white); font-weight: 600; display: flex; align-items: center; gap: 8px; } .quote-form .quote-prefix { color: var(--green); font-weight: 700; font-family: 'Fredoka', sans-serif; font-size: 1.05rem; } .quote-form input[type="number"] { width: 100px; padding: 8px 12px; background: #0b0e13; border: 1px solid var(--line); border-radius: 8px; color: var(--white); font-family: 'Fredoka', sans-serif; font-size: 1.05rem; text-align: right; } .quote-form input[type="number"]:focus { outline: none; border-color: var(--green); } .quote-form textarea { width: 100%; padding: 8px 12px; background: #0b0e13; border: 1px solid var(--line); border-radius: 8px; color: var(--white); font-family: inherit; font-size: 0.92rem; resize: vertical; } .quote-form textarea:focus { outline: none; border-color: var(--green); } .quote-form button { align-self: flex-start; } /* ---- πŸ”Ž Shop search bar ---- */ .shop-search { display: flex; gap: 10px; max-width: 480px; margin: 0 auto 22px; align-items: center; position: relative; } .shop-search input { flex: 1; padding: 12px 16px; background: #0b0e13; border: 1px solid var(--line); border-radius: 999px; color: var(--white); font-family: inherit; font-size: 1rem; } .shop-search input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46, 230, 166, 0.18); } .search-clear { color: var(--gray); padding: 4px 12px; font-size: 1rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; } .search-clear:hover { color: var(--white); border-color: var(--gray); } .search-info { text-align: center; color: var(--gray); margin: 0 auto 24px; max-width: 600px; } .search-info a { color: var(--green); } /* ---- "Welcome back, Name!" greeting on the homepage ---- */ .welcome-back { display: inline-block; background: rgba(46, 230, 166, 0.12); border: 1px solid var(--green); color: var(--green); font-weight: 600; padding: 8px 18px; border-radius: 999px; margin-bottom: 18px; } /* ---- Simple page heading block ---- */ .page-head { text-align: center; margin-bottom: 36px; } .page-head h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin-bottom: 8px; } .empty-note { text-align: center; color: var(--gray); font-size: 1.1rem; margin: 30px 0; } /* ===================== SHOP: product grid ===================== */ .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .product-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.18s ease, border-color 0.18s ease; display: flex; flex-direction: column; } .product-card:hover { transform: translateY(-5px); border-color: var(--green); } .product-thumb { aspect-ratio: 4 / 3; background: #0b0e13; display: grid; place-items: center; overflow: hidden; } .product-thumb img { width: 100%; height: 100%; object-fit: cover; } .thumb-placeholder { font-size: 3rem; opacity: 0.5; } .thumb-placeholder.big { font-size: 6rem; } .product-info { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .product-info h3 { font-size: 1.2rem; } .price { color: var(--green); font-weight: 700; font-size: 1.15rem; font-family: 'Fredoka', sans-serif; } .swatch-block { margin: 8px 0 12px; } .swatch-label { font-size: 0.82rem; color: var(--gray); margin-bottom: 6px; } .swatch-label strong { color: var(--white); } .swatch-row { display: flex; gap: 7px; flex-wrap: wrap; } .swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.18); box-shadow: 0 1px 3px rgba(0,0,0,0.35); transition: transform 0.12s ease; } .swatch:hover { transform: scale(1.18); } .btn-block { display: block; text-align: center; width: 100%; margin-top: auto; } /* ===================== PRODUCT detail page ===================== */ .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; } .product-photo { background: #0b0e13; border: 1px solid var(--line); border-radius: var(--radius); aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; } .product-photo img { width: 100%; height: 100%; object-fit: cover; } .back-link { color: var(--gray); font-size: 0.9rem; display: inline-block; margin-bottom: 12px; } .back-link:hover { color: var(--green); } .product-buy h1 { font-size: 2rem; margin-bottom: 6px; } .detail-price { color: var(--green); font-size: 1.6rem; font-family: 'Fredoka', sans-serif; margin-bottom: 14px; } .detail-desc { color: var(--gray); margin-bottom: 24px; } /* ---- Forms (shared everywhere) ---- */ .field { margin-bottom: 18px; } .field > label, fieldset legend { display: block; font-weight: 500; margin-bottom: 8px; color: var(--white); } .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="number"], .field textarea, .styled-form input[type="text"], .styled-form input[type="email"], .styled-form input[type="password"], .styled-form input[type="number"], .styled-form textarea { width: 100%; padding: 12px 14px; background: #0b0e13; border: 1px solid var(--line); border-radius: 10px; color: var(--white); font-family: inherit; font-size: 1rem; } .field input:focus, .field textarea:focus, .styled-form input:focus, .styled-form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46, 230, 166, 0.18); } fieldset { border: none; } .qty-field input { max-width: 110px; } /* ---- Color picker (radio buttons that look like swatches) ---- */ .color-options { display: flex; flex-wrap: wrap; gap: 10px; } .color-option { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } /* hide the real radio circle, keep it usable by keyboard */ .color-option input { position: absolute; opacity: 0; width: 0; height: 0; } .color-option .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); } .color-option:hover { border-color: var(--gray); } /* the chosen color lights up green */ .color-option:has(input:checked) { border-color: var(--green); background: rgba(46, 230, 166, 0.12); } /* ---- Size/tier option picker ---- */ .option-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .option-choice { cursor: pointer; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; transition: border-color 0.15s ease, background 0.15s ease; } .option-choice input { accent-color: var(--green); } .option-choice:hover { border-color: var(--gray); } .option-choice:has(input:checked) { border-color: var(--green); background: rgba(46, 230, 166, 0.10); } .option-choice strong { color: var(--white); display: block; } .option-choice .opt-price { color: var(--green); font-weight: 600; font-family: 'Fredoka', sans-serif; } @media (max-width: 540px) { .option-list { grid-template-columns: 1fr; } } /* Tiny "from" prefix on prices that have multiple tiers */ .from-tag { font-family: 'DM Sans', sans-serif; font-size: 0.75em; color: var(--gray); font-weight: 400; text-transform: lowercase; margin-right: 2px; } /* Small tag showing the chosen option next to the cart item name */ .option-tag { background: rgba(46, 230, 166, 0.18); color: var(--green); font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; font-family: 'DM Sans', sans-serif; } /* ---- Font picker (each option shown in its own font) ---- */ .font-options { display: flex; flex-wrap: wrap; gap: 10px; } .font-option { cursor: pointer; } .font-option input { position: absolute; opacity: 0; width: 0; height: 0; } .font-sample { display: inline-block; padding: 10px 18px; border: 1px solid var(--line); border-radius: 10px; font-size: 1.3rem; color: var(--white); line-height: 1.2; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .font-option:hover .font-sample { border-color: var(--gray); } .font-option:has(input:checked) .font-sample { border-color: var(--green); background: rgba(46, 230, 166, 0.12); color: var(--green); } /* ---- Buttons (extra sizes) ---- */ .btn-big { font-size: 1.05rem; padding: 15px 28px; } .btn-small { padding: 7px 14px; font-size: 0.85rem; } .btn-ghost { background: transparent; color: var(--gray); border-color: var(--line); } .btn-ghost:hover { color: var(--white); border-color: var(--gray); } .btn-danger { background: #ff5c5c; color: #2a0808; } .btn-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* ===================== CART ===================== */ .cart-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .cart-row { display: grid; grid-template-columns: 2fr 80px 90px 90px 40px; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); background: var(--panel); } .cart-row:last-child { border-bottom: none; } .cart-main { display: flex; gap: 12px; align-items: center; } .cart-main .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); flex-shrink: 0; } .cart-main h3 { font-size: 1.05rem; } .cart-meta { color: var(--gray); font-size: 0.88rem; } .cart-price, .cart-line-total { font-family: 'Fredoka', sans-serif; } .cart-line-total { color: var(--green); } .cart-qty input { width: 64px; padding: 8px; text-align: center; background: #0b0e13; border: 1px solid var(--line); border-radius: 8px; color: var(--white); } .cart-remove button { background: none; border: none; color: var(--gray); cursor: pointer; font-size: 1.1rem; } .cart-remove button:hover { color: #ff5c5c; } .cart-footer { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 20px; gap: 20px; } .cart-actions { justify-content: flex-end; margin-top: 24px; } /* ---- Promo code box on the cart ---- */ .promo-box { margin-top: 18px; max-width: 420px; } .promo-form { display: flex; gap: 8px; } .promo-form input[type="text"] { flex: 1; padding: 10px 12px; background: #0b0e13; border: 1px solid var(--line); border-radius: 10px; color: var(--white); font-family: inherit; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; } .promo-form input:focus { outline: none; border-color: var(--green); } .promo-applied { background: rgba(46, 230, 166, 0.10); border: 1px dashed var(--green); color: var(--white); padding: 10px 14px; border-radius: 10px; } .promo-applied strong { color: var(--green); } /* admin: promo add row */ .promo-add-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .promo-add-row { grid-template-columns: 1fr; } } /* "Buy 5, get 1 free" deal banner */ .deal-banner { background: linear-gradient(90deg, rgba(46, 230, 166, 0.14), rgba(61, 169, 252, 0.14)); border: 1px solid var(--green); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; text-align: center; color: var(--white); font-weight: 500; } .deal-banner strong { color: var(--green); } /* Cart totals box (subtotal / discount / total) */ .cart-totals { min-width: 250px; } .cart-totals .t-line { display: flex; justify-content: space-between; gap: 30px; padding: 4px 0; color: var(--gray); } .cart-totals .t-total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; font-size: 1.25rem; color: var(--white); } .cart-totals .t-total strong { color: var(--green); font-family: 'Fredoka', sans-serif; } .t-free, .summary-sub.t-free { color: var(--green); } .summary-sub { color: var(--gray); } /* ===================== CHECKOUT ===================== */ .checkout-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: start; } .order-summary { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } .order-summary h3 { margin-bottom: 14px; } .summary-line { display: flex; justify-content: space-between; color: var(--gray); margin-bottom: 8px; } .summary-total { display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; font-size: 1.15rem; } .summary-total strong { color: var(--green); font-family: 'Fredoka', sans-serif; } .pickup-note { color: var(--gray); font-size: 0.85rem; margin-top: 16px; } .styled-form.narrow { max-width: 560px; margin: 0 auto; } /* The two-path landing on /custom.php (MakerWorld vs Tinkercad) */ .custom-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .custom-path-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .custom-path-card:hover { transform: translateY(-5px); border-color: var(--green); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35); } .path-icon { font-size: 3.4rem; margin-bottom: 12px; } .custom-path-card h2 { font-size: 1.5rem; margin-bottom: 12px; } .custom-path-card p { color: var(--gray); margin-bottom: 18px; } .path-perks { list-style: none; padding: 0; margin: 0 0 22px; color: var(--white); text-align: left; } .path-perks li { padding: 4px 0; } .custom-path-card .btn { width: 100%; margin-top: auto; } @media (max-width: 720px) { .custom-paths { grid-template-columns: 1fr; } } /* "How it works" numbered steps (Custom Requests page) */ .steps-list { list-style: none; counter-reset: step; margin: 0 auto 24px; padding: 0; max-width: 620px; } .steps-list li { counter-increment: step; position: relative; padding: 14px 16px 14px 60px; margin-bottom: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--white); } .steps-list li::before { content: counter(step); position: absolute; left: 14px; top: 12px; width: 32px; height: 32px; background: linear-gradient(135deg, var(--green), var(--blue)); color: #06231a; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.05rem; display: grid; place-items: center; border-radius: 50%; } /* Design link line in admin Requests */ .design-line { color: var(--gray); margin: 8px 0; } .design-line strong { color: var(--white); } .design-line a { color: var(--blue); text-decoration: underline; } /* Shipping picker on checkout + material picker on product page (same look) */ .shipping-options, .material-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .shipping-option, .material-option { cursor: pointer; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; transition: border-color 0.15s ease, background 0.15s ease; } .shipping-option input, .material-option input { accent-color: var(--green); } .shipping-option:hover, .material-option:hover { border-color: var(--gray); } .shipping-option:has(input:checked), .material-option:has(input:checked) { border-color: var(--green); background: rgba(46, 230, 166, 0.10); } .shipping-option strong, .material-option strong { color: var(--white); display: block; } .shipping-option .small, .material-option .small { display: block; } @media (max-width: 540px) { .shipping-options, .material-options { grid-template-columns: 1fr; } } /* ===================== CONTACT ===================== */ .contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px; align-items: start; } .contact-info p { margin-bottom: 12px; } .muted { color: var(--gray); } .notice-success { background: rgba(46, 230, 166, 0.14); border: 1px solid var(--green); color: var(--green); padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; } .notice-error { background: rgba(255, 92, 92, 0.14); border: 1px solid #ff5c5c; color: #ff8c8c; padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; } .notice-info { background: rgba(61, 169, 252, 0.14); border: 1px solid var(--blue); color: var(--white); padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; } .notice-info { background: rgba(61, 169, 252, 0.12); border: 1px solid var(--blue); color: var(--white); padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; } .notice-info strong { color: var(--blue); } .notice-info a { color: var(--green); font-weight: 600; } /* small "Admin" link in the footer */ .admin-tiny-link { color: var(--gray); text-decoration: underline; } .admin-tiny-link:hover { color: var(--green); } /* ===================================================================== ORDER TRACKER (the 4-step progress bar) ===================================================================== */ .track-lookup { display: flex; gap: 10px; max-width: 520px; margin: 0 auto 26px; } .track-lookup input[type="text"] { flex: 1; padding: 12px 14px; background: #0b0e13; border: 1px solid var(--line); border-radius: 10px; color: var(--white); font-family: inherit; font-size: 1rem; } .track-lookup input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,230,166,0.18); } .tracker-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px; } .tracker-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .tracker-head strong { font-family: 'Fredoka', sans-serif; font-size: 1.15rem; color: var(--white); } /* The stepper itself */ .tracker { display: flex; padding: 6px 8px 4px; } .tracker-step { flex: 1; text-align: center; position: relative; padding-top: 4px; } /* line connecting to the PREVIOUS step */ .tracker-step::before { content: ""; position: absolute; top: 19px; left: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; } .tracker-step:first-child::before { display: none; } .tracker-step.done::before, .tracker-step.current::before { background: var(--green); } .tracker-dot { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; background: var(--panel); border: 3px solid var(--line); color: var(--gray); display: grid; place-items: center; margin: 0 auto 8px; font-family: 'Fredoka', sans-serif; font-weight: 700; transition: all 0.2s ease; } .tracker-step.done .tracker-dot { background: var(--green); border-color: var(--green); color: #06231a; } .tracker-step.current .tracker-dot { border-color: var(--green); color: var(--green); box-shadow: 0 0 0 5px rgba(46, 230, 166, 0.18); } .tracker-label { font-size: 0.84rem; color: var(--gray); } .tracker-step.done .tracker-label, .tracker-step.current .tracker-label { color: var(--white); font-weight: 500; } .your-orders-title { font-size: 1.3rem; margin: 30px 0 14px; } /* ---- Tracker card additions: payment badge + order details ---- */ .tracker-head { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; flex-wrap: wrap; } .pay-badge { padding: 4px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .pay-paid { background: rgba(46, 230, 166, 0.18); color: var(--green); } .pay-unpaid { background: rgba(255, 210, 63, 0.18); color: #ffd23f; } .pay-pickup { background: rgba(61, 169, 252, 0.14); color: var(--blue); } .tracker-items { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } .tracker-section { font-size: 0.78rem; color: var(--gray); margin: 0 0 12px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; } .tracker-line { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); align-items: flex-start; } .tracker-line:last-of-type { border-bottom: none; } .tracker-line-main { display: flex; gap: 10px; align-items: flex-start; flex: 1; min-width: 0; } .tracker-line-main strong { color: var(--white); } .tracker-line-main .dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; border: 2px solid rgba(255, 255, 255, 0.18); } .tracker-line-price { color: var(--green); font-family: 'Fredoka', sans-serif; font-weight: 600; white-space: nowrap; } .tracker-totals { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); max-width: 340px; margin-left: auto; } .tracker-totals .t-line { display: flex; justify-content: space-between; gap: 30px; padding: 4px 0; color: var(--gray); } .tracker-totals .t-total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; font-size: 1.15rem; color: var(--white); } .tracker-totals .t-total strong { color: var(--green); font-family: 'Fredoka', sans-serif; } .tracker-totals .t-free { color: var(--green); } /* Estimated-delivery card on the order-placed page */ .delivery-est { display: inline-block; background: rgba(61, 169, 252, 0.12); border: 1px solid var(--blue); color: var(--white); padding: 12px 22px; border-radius: 999px; font-size: 1.05rem; margin: 18px 0 24px; } .delivery-est strong { color: var(--blue); } /* admin: little stage