/* ============================================================================ DICE component skins (ticket D2) Presentation-only component layer. Loaded AFTER dice-tokens.css (and after Bootstrap) so it wins the cascade; uses enough specificity to beat Bootstrap defaults. Builds on the D1 tokens (var(--*)); each var() has a literal hex fallback. No behaviour / routing / JS-class-rename changes. Keep A6 a11y + contrast intact (visible focus rings, AA colours). ============================================================================ */ /* --------------------------------------------------------------------------- D2.1 — Buttons: flat (no BS3 gradient), clear hover + visible focus ring. Primary = --accent fill / --accent-ink text, hover --accent-strong. Default/secondary = outline. Scoped to .btn so it beats Bootstrap's .btn-default / .btn-primary background-image gradients. --------------------------------------------------------------------------- */ .btn { background-image:none; /* kill BS3 gradient */ border-radius:6px; border-radius:var(--radius); font-family:"Open Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-family:var(--font); font-weight:600; font-weight:var(--fw-heading); transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; } /* Focus ring for KEYBOARD focus only (a11y); no ring on mouse click. The outline:none is paired with the :focus-visible box-shadow indicator, so axe is satisfied. The :focus:not(:focus-visible) rule suppresses the mouse-focus ring (incl. Bootstrap's default .btn:focus shadow) — covers buttons AND the heart label (label.btn). */ .btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(31,128,190,0.5); /* --accent-2 @ 50% */ } .btn:focus:not(:focus-visible) { outline:none; box-shadow:none; } /* Primary */ .btn-primary { background-color:#0B599C; background-color:var(--accent); border-color:#0B599C; border-color:var(--accent); color:#FFFFFF; color:var(--accent-ink); } .btn-primary:hover, .btn-primary:active, .btn-primary.active { background-color:#094B82; background-color:var(--accent-strong); border-color:#094B82; border-color:var(--accent-strong); color:#FFFFFF; color:var(--accent-ink); } /* Default / secondary = outline */ .btn-default { background-color:#FFFFFF; background-color:var(--bg); border-color:#0B599C; border-color:var(--accent); color:#0B599C; color:var(--accent); } .btn-default:hover, .btn-default:active, .btn-default.active { background-color:#0B599C; background-color:var(--accent); border-color:#0B599C; border-color:var(--accent); color:#FFFFFF; color:var(--accent-ink); } /* --------------------------------------------------------------------------- D2.2 — Poster cards. panel-media-list.css loads in (after this file), so card rules carry an html prefix to out-specify it. .media-object already has object-fit:cover (aspect handled). Adds: hover lift + branded broken-image placeholder (img onerror adds .dice-img-broken). No DOM restructure; no JS-class renames. --------------------------------------------------------------------------- */ html .panel-media-list .media-list > li { transition:transform .15s ease, box-shadow .15s ease; } html .panel-media-list .media-list > li { position:relative; /* D2 polish r2 #1: clip the card wrapper so the image, the always-visible bottom title strip (.media-body), and the hover overlay all follow the rounded corners (no square corners poking past the rounded poster). */ border-radius:6px; border-radius:var(--radius); overflow:hidden; } html .panel-media-list .media-list > li:hover { transform:translateY(-4px); box-shadow:0 6px 18px rgba(0,0,0,0.15); z-index:2; } /* D2 polish #8: title-reveal on hover. The .media-img-overlay block (redundant, always-on title) is pinned over the card, hidden by default, faded in on hover alongside the lift. Robust full-card scrim (no dependence on .media-top height). pointer-events:none so the card link still receives clicks. */ html .panel-media-list .media-img-overlay { position:absolute; left:0; right:0; top:0; bottom:0; display:flex; flex-direction:column; justify-content:flex-end; padding:12px; margin:0; background:linear-gradient(to top, rgba(7,30,50,0.92) 0%, rgba(7,30,50,0.60) 45%, rgba(7,30,50,0.20) 100%); opacity:0; transition:opacity .2s ease; pointer-events:none; z-index:3; } html .panel-media-list .media-list > li:hover .media-img-overlay { opacity:1; } html .panel-media-list .media-img-overlay .card-title, html .panel-media-list .media-img-overlay .card-text { color:#FFFFFF; color:var(--accent-ink); margin:0 0 4px; } /* D2 polish r2 #2: darken the ALWAYS-VISIBLE bottom title strip (.media-body) for legibility over bright posters — was rgba(0,0,0,0.4) (faint). Navy 0.85 + white text (white-on-navy-.85 ≈ 9:1 worst-case over white poster = AA). */ html .panel-media-list .media-body { background-color:rgba(7,30,50,0.85); color:#FFFFFF; } html .panel-media-list .media-body .media-heading { color:#FFFFFF; } html .panel-media-list .media-body p { color:#E9E9E9; } /* Branded placeholder shown when a poster 404s (onerror -> .dice-img-broken). */ html img.dice-img-broken, html .panel-media-list .media-object.dice-img-broken, html .panel-media-list .media-object-back.dice-img-broken { /* D2 polish #7: flat neutral bg + a centered, FIXED-size DICE mark (no gradient, no %-stretch/blur). Card title still shows beneath in media-body. */ background-color:#F8F8F8; background-color:var(--bg-subtle); background-image:url('/assets/store/img/Dice_Logo_Transparent.png'); background-repeat:no-repeat; background-position:center; background-size:88px auto; color:transparent; /* hide the broken-alt glyph/text */ font-size:0; } /* A broken .media-object collapses (panel-media-list sets height:auto !important) to a thin strip — make the placeholder fill its box so the DICE mark centers. */ html .panel-media-list .media-object.dice-img-broken, html .panel-media-list .media-object-back.dice-img-broken { position:absolute; left:0; top:0; transform:none; width:100% !important; height:100% !important; } /* --------------------------------------------------------------------------- D2.5 — Tables skin: row hover, ink headers, right-aligned numerics, action icons. Applies where dice-components.css is loaded (store + marketplace, incl. the buyer Proposals table). Extending to admin/seller tables needs dice-tokens+components loaded on those layouts (restyles them broadly) — a separate decision, flagged. --------------------------------------------------------------------------- */ .table > thead > tr > th { color:#0B1B2B; color:var(--ink); font-weight:600; font-weight:var(--fw-heading); border-bottom:2px solid #F8F8F8; border-bottom:2px solid var(--bg-subtle); } .table > tbody > tr { transition:background-color .12s ease; } .table > tbody > tr:hover > td { background-color:#F8F8F8; background-color:var(--bg-subtle); } /* right-align numeric columns (uses existing cell classes) */ .table td.text-right, .table th.text-right, .table td.price-col, .table th.price-col, .table td.currency-col, .table th.currency-col { text-align:right; } /* action icons in table action cells */ .table .dice-action-icon, .table td .fa.action-icon { color:#0B599C; color:var(--accent); font-size:16px; } /* --------------------------------------------------------------------------- D2.6 — Footer column block (logo + Buyers/Sellers/Legal/Contact). Pairs with A7 (Support=mira@diceverse.io, FAQs=/marketplace/faqs preserved) and D1 (.text-muted copy stays #595959 via dice-tokens footer.footer rule). Built with token link colours so the legacy #37004E purple is not reintroduced. --------------------------------------------------------------------------- */ /* D2 polish #1: the legacy .footer is position:absolute; height:60px (sticky- footer) — the taller column block overflowed the 60px grey bg onto white ("half grey/half white"). Make the new footer a normal-flow, full-width block with one uniform background. */ .dice-footer.footer { position:relative; /* was static; relative + z-index lifts the footer above the anon login veil (index.php rgba(255,255,255,.65), z-index:2) that bled into it after the static change */ z-index:5; clear:both; height:auto; width:100%; background-color:#f5f5f5; /* uniform; #595959 copy = 6.42:1 AA */ padding-bottom:16px; padding-bottom:var(--space-3); flex-shrink:0; /* responsive sticky footer (see below) */ } /* D2 footer follow-up: responsive flexbox sticky footer. Polish #1 made .footer static (fixing the half-grey bg) which removed bottom-sticking — on short pages (login) the footer sat under the content with empty space BELOW it. Make the body a column flex, the content wrapper grow, and the footer not shrink: footer pins to the viewport bottom when content is short, flows after content when long (responsive to any window height). Neutralizes the legacy sticky-footer `body { margin-bottom:60px }`. */ html, body { min-height:100vh; } body { display:flex; flex-direction:column; margin-bottom:0; } #site-container { flex:1 0 auto; } .dice-footer .dice-footer-cols { display:flex; flex-wrap:wrap; gap:24px; gap:var(--space-4); align-items:flex-start; padding:24px 0 8px; padding:var(--space-4) 0 var(--space-2); } .dice-footer .dice-footer-brand { flex:1 1 160px; } .dice-footer .dice-footer-logo { max-width:140px; height:auto; } .dice-footer .dice-footer-col { flex:1 1 140px; } .dice-footer .dice-footer-col h5 { color:#0B1B2B; color:var(--ink); font-weight:600; font-weight:var(--fw-heading); font-size:14px; margin:0 0 8px; margin:0 0 var(--space-2); } .dice-footer .dice-footer-col ul { list-style:none; padding:0; margin:0; } .dice-footer .dice-footer-col li { margin-bottom:6px; } .dice-footer .dice-footer-col a { color:#595959; color:var(--muted); font-size:14px; } .dice-footer .dice-footer-col a:hover, .dice-footer .dice-footer-col a:focus { color:#0B599C; color:var(--accent); text-decoration:underline; } .dice-footer .dice-footer-copy { margin-top:8px; margin-top:var(--space-2); } /* D2 polish #4: breathing room between the hero/carousel and the category bar (was cramped right under the hero). 8px-grid. */ #home_top_slider { margin-bottom:24px; margin-bottom:var(--space-4); } /* D2 polish #6: subtle radius on poster thumbnails — listing cards (Featured/ category/search) + the content-detail poster. Consistent with hero/category. Rounds the image directly (panel-media-list .media-object is absolute; html prefix out-specifies panel-media-list.css which loads later). */ html .panel-media-list .media-object, html .panel-media-list .media-object-back { border-radius:6px; border-radius:var(--radius); } #issue-top-area .media-object-wrapper .media-object { border-radius:6px; border-radius:var(--radius); }