/* ============================================================================ DRIVE DIGITAL — UI/UX POLISH LAYER (v19) Loads AFTER style.css and desktop-refit.css. Fixes every unstyled or inconsistent component found in the full-site render audit (public pages, logged-in customer pages, auth, checkout, orders, account, reviews). 01 Global form system (the site previously had no front-end input base) 02 Page-hero & breadcrumb refinement 03 Tab systems (account tabs + auth tabs) 04 Cards, detail panels & tables 05 Orders & invoices 06 Cart line items & summary 07 Listing reviews block (was completely unstyled) 08 Checkout & contact layouts 09 Alerts, toasts, dev-OTP, empty states 10 Blog / prose typography 11 Topbar & mobile-nav leftovers 12 Micro-polish & consistency ========================================================================== */ /* --------------------------------------------------------------------------- 01 · GLOBAL FORM SYSTEM --------------------------------------------------------------------------- */ label{display:block;font-weight:600;font-size:.85rem;color:var(--black);margin:14px 0 6px} label small{font-weight:500} input:not([type=checkbox]):not([type=radio]):not([type=range]), select,textarea{ width:100%;background:#fff;border:1.5px solid var(--line);border-radius:10px; padding:12px 14px;font-family:var(--font-b);font-size:.95rem;color:var(--black); transition:border-color .15s,box-shadow .15s; } input::placeholder,textarea::placeholder{color:var(--gray-soft)} input:hover,select:hover,textarea:hover{border-color:#CFCFCF} input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(137,197,65,.16);outline:none} textarea{min-height:110px;resize:vertical;line-height:1.55} input[type=checkbox],input[type=radio]{width:16px;height:16px;accent-color:var(--green-deep);vertical-align:-2px;margin-right:6px} input:disabled,select:disabled{background:var(--disabled,#EDEDED);cursor:not-allowed} /* two-column form row (login signup, account, admin parity) */ .two{display:grid;grid-template-columns:1fr 1fr;gap:14px} .two label{margin-top:14px} @media(max-width:560px){.two{grid-template-columns:1fr}} /* generic form rows used on checkout / contact */ .f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .f-row>div{min-width:0} @media(max-width:640px){.f-row{grid-template-columns:1fr}} form .btn{margin-top:18px} /* --------------------------------------------------------------------------- 02 · PAGE-HERO & BREADCRUMB --------------------------------------------------------------------------- */ .page-hero{background:linear-gradient(180deg,var(--bg-soft),#fff);border-bottom:1px solid var(--line)} .page-hero h1{margin-top:6px} .page-hero p{color:var(--gray)} .breadcrumb{font-size:.78rem;color:var(--gray-soft);margin-bottom:10px} .breadcrumb a{color:var(--gray)} .breadcrumb a:hover{color:var(--green-deep)} /* --------------------------------------------------------------------------- 03 · TAB SYSTEMS --------------------------------------------------------------------------- */ .acct-tabs,.auth-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1.5px solid var(--line);margin-bottom:22px} .acct-tab,.auth-tab{ appearance:none;background:none;border:0;border-bottom:3px solid transparent; padding:12px 16px;margin-bottom:-1.5px;font-family:var(--font-d);font-weight:600; font-size:.9rem;color:var(--gray);cursor:pointer;border-radius:8px 8px 0 0; transition:color .15s,border-color .15s,background .15s;min-height:44px; } .acct-tab:hover,.auth-tab:hover{color:var(--black);background:var(--bg-soft)} .acct-tab.active,.auth-tab.active{color:var(--black);border-bottom-color:var(--green)} .tabpane{animation:paneIn .2s ease} @keyframes paneIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* --------------------------------------------------------------------------- 04 · CARDS, DETAIL PANELS & TABLES --------------------------------------------------------------------------- */ .detail-card{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--e-1)} .detail-card+.detail-card{margin-top:16px} .detail-card h3{font-size:1.05rem;margin-bottom:12px} .plan-table,table.plan-table{width:100%;border-collapse:collapse;font-size:.9rem} .plan-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--gray-soft);padding:10px 12px;border-bottom:2px solid var(--line);background:var(--bg-soft)} .plan-table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top} .plan-table tr:last-child td{border-bottom:0} .plan-table tr:hover td{background:var(--green-tint)} /* --------------------------------------------------------------------------- 05 · ORDERS & INVOICES --------------------------------------------------------------------------- */ .order-item{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--e-1)} .order-item+.order-item{margin-top:16px} .ohead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px} .ohead b{font-size:1.02rem} .order-items{margin:10px 0 4px;border-top:1px dashed var(--line);padding-top:10px} .order-row{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:.9rem;color:var(--gray)} .order-row b{color:var(--black)} .status-pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:5px 12px;background:var(--bg-soft);color:var(--gray)} .status-pill.ok,.status-paid{background:var(--green-tint);color:var(--green-deep)} .status-pill.dark{background:var(--black);color:var(--green)} /* --------------------------------------------------------------------------- 06 · CART LINE ITEMS & SUMMARY --------------------------------------------------------------------------- */ .cart-item{display:flex;gap:14px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:14px 16px} .cart-item+.cart-item{margin-top:12px} .cart-item:hover{border-color:var(--green)} .qbtn{width:34px;height:34px;min-height:34px;border-radius:9px;border:1.5px solid var(--line);background:#fff;font-size:1.05rem;font-weight:700;color:var(--black);cursor:pointer;display:inline-grid;place-items:center} .qbtn:hover{border-color:var(--green);color:var(--green-deep)} .ci-rm{background:none;border:0;color:var(--gray-soft);font-size:1rem;cursor:pointer;min-height:34px;padding:4px 8px;border-radius:8px} .ci-rm:hover{color:#8A2A2A;background:#FFF3F3} input[type=number].qty-input,.cart-item input[type=number]{width:56px;text-align:center;padding:8px 4px} /* --------------------------------------------------------------------------- 07 · LISTING REVIEWS (previously completely unstyled) --------------------------------------------------------------------------- */ .reviews-head{display:flex;justify-content:space-between;align-items:center;margin:8px 0 18px;flex-wrap:wrap;gap:12px} .reviews-score{display:flex;align-items:center;gap:10px} .reviews-score b{font-family:var(--font-d);font-size:1.8rem;color:var(--black)} .reviews-score small{color:var(--gray-soft);font-size:.8rem} .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .review-card{border:1.5px solid var(--line);border-radius:14px;padding:18px;background:#fff;transition:border-color .15s,transform .2s,box-shadow .2s} .review-card:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:var(--e-2)} .rc-top{display:flex;flex-direction:column;gap:3px;margin-bottom:8px} .rc-top b{font-size:.95rem;color:var(--black)} .review-card p{font-size:.87rem;color:var(--gray);margin-bottom:10px} .rc-by{font-size:.76rem;color:var(--gray-soft)} @media(max-width:960px){.reviews-grid{grid-template-columns:1fr 1fr}} @media(max-width:620px){.reviews-grid{grid-template-columns:1fr}} /* --------------------------------------------------------------------------- 08 · CHECKOUT & CONTACT LAYOUTS --------------------------------------------------------------------------- */ .enquiry{display:grid;grid-template-columns:1.2fr .8fr;gap:34px;align-items:start} .enquiry .c-line{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;margin-bottom:12px;font-size:.92rem} .enquiry .c-line b{color:var(--black)} @media(max-width:900px){.enquiry{grid-template-columns:1fr}} .summary-card,.checkout-summary{position:sticky;top:96px} /* --------------------------------------------------------------------------- 09 · ALERTS, TOASTS, DEV-OTP, EMPTY STATES --------------------------------------------------------------------------- */ .alert{border-radius:12px;padding:13px 16px;font-size:.9rem;font-weight:600;margin-bottom:16px;border:1.5px solid var(--line);background:var(--bg-soft);color:var(--gray)} .alert-ok{background:var(--green-tint);border-color:var(--green-tint-2);color:var(--green-deep)} .alert-err{background:#FFF6F6;border-color:#F2DADA;color:#8A2A2A} .dev-otp{background:var(--black);color:var(--green);border-radius:10px;padding:10px 14px;font-size:.9rem;margin-bottom:12px;letter-spacing:.03em} .toast{border-radius:12px;box-shadow:var(--e-3)} .empty-note{border:1.5px dashed var(--line);border-radius:14px;padding:28px;text-align:center;color:var(--gray-soft);background:var(--bg-soft);font-size:.92rem} /* --------------------------------------------------------------------------- 10 · BLOG / PROSE TYPOGRAPHY --------------------------------------------------------------------------- */ .prose h2{margin:34px 0 12px} .prose h3{margin:26px 0 10px} .prose p{margin-bottom:16px;color:var(--charcoal)} .prose ul,.prose ol{margin:0 0 18px 22px;color:var(--charcoal)} .prose li{margin-bottom:6px} .prose a{color:var(--green-deep);font-weight:600;text-decoration:underline;text-decoration-color:var(--green-tint-2);text-underline-offset:3px} .prose a:hover{text-decoration-color:var(--green)} .prose blockquote{border-left:3px solid var(--green);background:var(--green-tint);border-radius:0 12px 12px 0;padding:14px 18px;margin:0 0 18px;color:var(--gray)} .prose img{border-radius:14px} .prose code{background:var(--green-tint);color:var(--green-deep);padding:2px 7px;border-radius:6px;font-size:.88em} /* --------------------------------------------------------------------------- 11 · TOPBAR & MOBILE-NAV LEFTOVERS --------------------------------------------------------------------------- */ .ub-right{display:flex;align-items:center;white-space:nowrap} .ub-right a{margin-left:0;padding:0 8px} .mnav-cart span{position:relative} .plan-form{display:contents} /* --------------------------------------------------------------------------- 12 · MICRO-POLISH & CONSISTENCY --------------------------------------------------------------------------- */ .listing-cat{background:var(--green-tint);color:var(--green-deep);font-size:.7rem;font-weight:700;border-radius:999px;padding:4px 11px;letter-spacing:.02em} hr{border:0;border-top:1px solid var(--line);margin:22px 0} ::selection{background:var(--green);color:var(--black)} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:#D7D7D7;border-radius:8px;border:2px solid #fff} ::-webkit-scrollbar-thumb:hover{background:var(--green)} .auth-card .otp-box{border:0;padding:0} #msg:empty{display:none} a.btn,button.btn{user-select:none} .section-head .eyebrow+h2{margin-top:8px} img[loading=lazy]{background:var(--bg-soft)} /* Accessibility and responsive hardening */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:3px solid #6fa332!important; outline-offset:3px; box-shadow:0 0 0 5px rgba(137,197,65,.22); } button,.btn,.add-btn,.qbtn,.ci-rm,.hamburger{min-height:44px} input,select,textarea{font-size:max(16px,1rem)} img,svg,video{max-width:100%;height:auto} table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .toast:empty{display:none} @media(max-width:640px){ .container{width:min(100% - 28px,var(--container,1200px))} .btn{white-space:normal;text-align:center;justify-content:center} .news-form,.news-form input,.news-form button{width:100%;min-width:0} .float-stack{bottom:86px;right:14px} .modal-box{width:calc(100% - 28px);max-height:calc(100dvh - 32px);overflow:auto} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }