/* TheHubLTD — supplemental styles layered OVER the production app.css. * Global look (typography, nav, footer, grid) comes from /Content/css/app.css; * these style only the interior-page components that have no legacy markup yet * (gallery cards, detail, bag, checkout stepper, account). Scoped to avoid * fighting the production stylesheet. */ :root { --hub-black: #1a1a1a; --hub-gray: #666; --hub-light: #f4f2ee; --hub-accent: #8a7350; --hub-red: #a33; } .page-content { min-height: 50vh; padding-bottom: 3rem; } .hub-page-title { font-size: 1.3rem; text-transform: uppercase; letter-spacing: .15em; border-bottom: 2px solid var(--hub-black); padding-bottom: .5rem; margin: 1.2rem 0 1.5rem; } /* home featured strip — app.css supplies item width (194px) and centering. Two gaps to fill: ui-template ships visibility:hidden (the Elliptical runtime unhid it), and the caption's uppercase/letterspacing came from the legacy font stack. */ /* app.css hides several elements that the Elliptical runtime revealed once it had bound/cloned them. We render server-side, so they're real content from the start and must be visible: ui-template{visibility:hidden} — templates were cloned, the clone unhidden [role=form]>form{visibility:hidden} — forms revealed after data binding */ ui-template { visibility: visible; } [role=form] > form { visibility: visible; } carousel-outer-container.multi carousel-item a { text-align: center; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; line-height: 1.5; margin-top: .7rem; color: #484c48; } carousel-outer-container.multi carousel-item > div { width: 100%; } /* product detail */ .detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; } .detail-images .main img { max-width: 100%; } .detail-images .thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; } .detail-images .thumbs img { width: 64px; height: 64px; object-fit: cover; border: 1px solid #ddd; cursor: pointer; } .detail-info h1 { font-size: 1.4rem; margin-top: 0; } .detail-info .price { font-size: 1.15rem; margin: .75rem 0; } .detail-info .sale { color: var(--hub-red); } .detail-info select { display: block; width: 100%; max-width: 320px; margin: .4rem 0 1rem; padding: .45rem; } .detail-info label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; } .detail-desc { margin-top: 1.5rem; line-height: 1.55; } .detail-msg { margin-top: 1rem; font-size: .9rem; color: var(--hub-accent); } /* bag */ .bag-table { width: 100%; border-collapse: collapse; } .bag-table th, .bag-table td { border-bottom: 1px solid #eee; padding: .7rem; text-align: left; font-size: .9rem; vertical-align: middle; } .bag-table img { width: 64px; } .bag-table input[type=number] { width: 64px; padding: .3rem; } .bag-summary { margin-top: 1.5rem; max-width: 340px; margin-left: auto; font-size: .95rem; } .bag-summary div { display: flex; justify-content: space-between; padding: .25rem 0; } .bag-summary .total { font-weight: 700; border-top: 2px solid var(--hub-black); padding-top: .5rem; } .brand-columns { columns: 3; font-size: .95rem; line-height: 2; } .form-narrow { max-width: 380px; } .form-narrow input { display: block; width: 100%; padding: .5rem; margin: .35rem 0 1rem; border: 1px solid #ccc; } .form-narrow label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; } .form-error { color: var(--hub-red); font-size: .9rem; margin-bottom: 1rem; } /* account */ .account-nav { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.6rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid #eee; padding-bottom: .8rem; } /* sticky-reveal toolbar: the runtime slid it in past the y-offset */ ui-sticky-reveal { position: fixed; top: 0; left: 0; width: 100%; z-index: 10999; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); display: flex; justify-content: center; align-items: center; transform: translateY(-100%); transition: transform .25s ease; } ui-sticky-reveal.show { transform: translateY(0); } ui-sticky-reveal ui-icons { display: flex; gap: 1.1em; align-items: center; } ui-sticky-reveal screen-icon a { color: #484c48; } ui-sticky-reveal .sm-logo { font-family: 'Baskerville', Georgia, serif; font-size: 1.3em; letter-spacing: .05em; } ui-sticky-reveal .sm-logo .hub { font-weight: 700; } ui-sticky-reveal mark.bag { background: none; color: #f6684c; font-size: .7em; vertical-align: super; } /* featured brands panel: app.css styles the header; give the link list layout */ ui-sliding-panel .app-featured-brands { height: 100%; display: flex; flex-direction: column; } ui-sliding-panel .app-featured-brands header { padding: 0 1em; } ui-sliding-panel .app-featured-brands header .label { display: flex; align-items: baseline; gap: .8em; } ui-sliding-panel .app-featured-brands header .med-logo .hub { font-weight: 700; } ui-sliding-panel .app-featured-brands header [data-role=close] { cursor: pointer; font-size: 1.3em; } ui-sliding-panel .app-featured-brands > ui-template { display: flex; flex-direction: column; height: 100%; } ui-sliding-panel .app-featured-brands section { flex: 1; overflow-y: auto; padding: 0 1.5em; } ui-sliding-panel .app-featured-brands section a { display: block; padding: .7em 0; border-bottom: 1px solid #eee; font-size: .95rem; } ui-sliding-panel .app-featured-brands footer { padding: 1em 1.5em; background: #f4f2ee; } ui-sliding-panel .app-featured-brands footer a { display: block; padding: .35em 0; font-size: .85rem; } /* product-bag popup: app.css positions/styles it and .show reveals it; the Elliptical runtime played a slideInDown transition — do that in CSS */ @keyframes hub-slide-down { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } } product-bag.slide-down { animation: hub-slide-down .35s ease-out; } /* Touch layout: app.css shrinks product-bag to a 100x100 black toast and swaps ui-template for touch-template. The legacy controller used fadeIn 300ms in, then fadeOut 1000ms after a 3s hold — mirror those durations. */ @keyframes hub-fade-in { from { opacity: 0; } to { opacity: .85; } } @keyframes hub-fade-out { from { opacity: .85; } to { opacity: 0; } } product-bag.fade-in { animation: hub-fade-in .3s ease-out; } product-bag.fade-out { animation: hub-fade-out 1s ease-out forwards; } /* The desktop slide-down must not follow product-bag into the touch layout — its translateY would fight the toast's centred position. */ @media only screen and (max-width: 1360px) { product-bag.slide-down { animation: none; } } /* Touch: .actions is a flex row with space-between, so the two buttons size to their own text and "Add to Shopping Bag" comes out wider than "Add to Wish List". Let them share the row equally instead. min-width:0 stops the longer label forcing its button wider than its flex basis. */ @media only screen and (max-width: 1360px) { hub-product > ui-template product-details .actions { gap: .75em; } hub-product > ui-template product-details .actions > .ui-button { flex: 1 1 0; min-width: 0; text-align: center; } } product-bag .icon-close { cursor: pointer; } product-bag bag-actions .ui-button { cursor: pointer; } /* Cascading selections: a swatch whose colour is not stocked with the shopper's other picks. Dimmed rather than removed, so the row doesn't reflow on every change and the colour is still visibly offered by the product. */ .color-swatches img.unavailable { opacity: .25; cursor: default; filter: grayscale(100%); } /* from the legacy Sign-In.cshtml inline