/* moriLingo Web Ek CSS İyileştirmeleri */
/* =================================
RESPONSIVE TYPOGRAPHY
================================= */
@media (min-width: 1200px) {
body {
font-size: 16px;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
}
@media (max-width: 768px) {
body {
font-size: 14px;
}
h1 {
font-size: 1.75rem;
}
h2 {
font-size: 1.5rem;
}
}
/* =================================
SMOOTH SCROLLING
================================= */
html {
scroll-behavior: smooth;
}
/* =================================
CUSTOM SCROLLBAR
================================= */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #009688;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #00796B;
}
/* Dark mode scrollbar */
@media (prefers-color-scheme: dark) {
::-webkit-scrollbar-track {
background: #1E1E1E;
}
::-webkit-scrollbar-thumb {
background: #00695C;
}
::-webkit-scrollbar-thumb:hover {
background: #004D40;
}
}
/* =================================
FOCUS STATES (Accessibility)
================================= */
button:focus-visible,
a:focus-visible,
input:focus-visible {
outline: 2px solid #009688;
outline-offset: 2px;
}
/* =================================
LOADING STATES
================================= */
.loading {
position: relative;
pointer-events: none;
opacity: 0.6;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid #009688;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
/* =================================
ANIMATIONS
================================= */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.animate-fade-in {
animation: fadeIn 0.5s ease-out;
}
.animate-slide-in {
animation: slideInRight 0.5s ease-out;
}
/* =================================
CARD HOVER EFFECTS
================================= */
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 150, 136, 0.15);
}
/* =================================
UTILITY CLASSES
================================= */
.text-gradient {
background: linear-gradient(135deg, #009688 0%, #00796B 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.shadow-soft {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.shadow-medium {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.shadow-large {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
}
/* =================================
PRINT STYLES
================================= */
@media print {
body {
background: white !important;
}
.no-print {
display: none !important;
}
a[href]:after {
content: " (" attr(href) ")";
}
}
/* =================================
PERFORMANCE OPTIMIZATIONS
================================= */
/* GPU Acceleration */
.gpu-accelerated {
transform: translateZ(0);
will-change: transform;
}
/* Contain layout */
.contain-layout {
contain: layout;
}
.contain-paint {
contain: paint;
}
/* =================================
ACCESSIBILITY
================================= */
/* Skip to main content link */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #009688;
color: white;
padding: 8px;
text-decoration: none;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
/* Screen reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* =================================
ENHANCED MOBILE STYLES
================================= */
@media (max-width: 640px) {
/* Larger touch targets */
button,
a,
input[type="button"],
input[type="submit"] {
min-height: 44px;
min-width: 44px;
}
/* Better spacing for mobile */
.mobile-spacing {
padding: 16px;
}
/* Full width buttons on mobile */
.mobile-full-width {
width: 100% !important;
}
}
/* =================================
DARK MODE ENHANCEMENTS
================================= */
@media (prefers-color-scheme: dark) {
/* Better contrast in dark mode */
.dark-mode-high-contrast {
color: #FFFFFF;
}
/* Softer shadows in dark mode */
.shadow-soft {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* Adjust borders */
.border-color {
border-color: #333 !important;
}
}
/* =================================
REDUCED MOTION (Accessibility)
================================= */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* =================================
HIGH CONTRAST MODE (Accessibility)
================================= */
@media (prefers-contrast: high) {
button,
a {
border: 2px solid currentColor;
}
:focus-visible {
outline: 3px solid;
outline-offset: 3px;
}
}
moriLingo
Türkçe ⇄ Japonca Sözlük
Yükleniyor...