/* MyDataOrg global styles. */ body { background-color: #f8f9fa; } /* Dark theme (Bootstrap 5.3 sets data-bs-theme on ) - match the page background so the body doesn't stay light in dark mode. */ html[data-bs-theme="dark"] body { background-color: #212529; } /* Cards get a subtle shadow for depth. */ .card { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } .card.text-decoration-none:hover { box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15); transform: translateY(-2px); transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } /* Navbar link contrast on the dark background. */ .navbar-dark .nav-link { color: rgba(255, 255, 255, 0.75); } .navbar-dark .nav-link.active, .navbar-dark .nav-link:hover { color: #fff; } /* Slight top spacing for embedded tables/cards after the navbar. */ .table thead th { border-bottom-width: 1px; } /* --- Home page hero logo ------------------------------------------------ */ /* Framed logo: theme-aware surface + border (Bootstrap CSS variables adapt to light/dark) with a soft shadow so it reads as a polished brand mark. */ .hero-logo { background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08); padding: 1.5rem; } .hero-logo img { max-height: 260px; width: auto; } /* --- Coin Flip app -------------------------------------------------------- */ /* A coin drawn entirely in CSS: two faces stacked in 3D, spun by JS by rotating the parent around the Y axis. */ .coin-scene { perspective: 800px; } .coin { position: relative; width: 9rem; height: 9rem; cursor: pointer; transform-style: preserve-3d; transition: transform 2.2s cubic-bezier(0.18, 0.6, 0.25, 1); will-change: transform; } .coin-face { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: inset 0 0 0 0.4rem rgba(0, 0, 0, 0.08), 0 0.5rem 1rem rgba(0, 0, 0, 0.25); } /* Decorative inner ring around each face's symbol. */ .coin-face::before { content: ""; position: absolute; inset: 0.9rem; border: 2px solid currentColor; border-radius: 50%; opacity: 0.5; } .coin-face.heads { background: radial-gradient(circle at 35% 30%, #ffedb0, #f2c14e 45%, #d19e2f 75%, #a87c17); color: #7a5a08; } .coin-face.tails { background: radial-gradient(circle at 35% 30%, #ffffff, #dcdcdc 45%, #b0b0b0 75%, #8e8e8e); color: #565656; transform: rotateY(180deg); } .coin-symbol { font-size: 2.5rem; font-weight: 700; font-family: Georgia, "Times New Roman", serif; } .coin:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 4px; border-radius: 50%; } /* Respect users who ask for less motion: skip the spin, jump straight to the result (transitionend still fires so the outcome is shown). */ @media (prefers-reduced-motion: reduce) { .coin { transition-duration: 0.01s; } } /* --- Roll Dice app -------------------------------------------------------- */ /* Dice are drawn in CSS: a rounded face holding a 3x3 grid in which the pip dots occupy the cells that make up each face's standard layout. */ .dice-tray { perspective: 600px; } .die { width: 4.5rem; height: 4.5rem; border-radius: 0.75rem; border: 1px solid rgba(0, 0, 0, 0.15); background: linear-gradient(145deg, #ffffff, #e9e9e9); box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15), inset 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.08); padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out; } .die:hover { transform: translateY(-2px); } .die:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 2px; } .die-pips { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; padding: 0.4rem; } .die-cell { display: flex; align-items: center; justify-content: center; } .pip { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #212529; } /* Held ("frozen") dice get a primary ring and muted pips. */ .die-held { border-color: var(--bs-primary); box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.35), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15); } .die-held .pip { background: #6c757d; } /* While rolling: shake the die and blur its pips while the values flicker. */ @keyframes die-roll { 0% { transform: translateY(0) rotate(0deg); } 20% { transform: translateY(-10px) rotate(10deg); } 40% { transform: translateY(6px) rotate(-12deg); } 60% { transform: translateY(-6px) rotate(8deg); } 80% { transform: translateY(3px) rotate(-6deg); } 100% { transform: translateY(0) rotate(0deg); } } .die.rolling { animation: die-roll 2.6s ease; } .die.rolling .pip { filter: blur(1px); } @media (prefers-reduced-motion: reduce) { .die.rolling { animation-duration: 0.01s; } }