/* ============================================================ main.css — Design Tokens & Global Styles Mersin Sevgibağı Huzurevi ============================================================ */ /* --- Google Font import is handled via in --- */ /* ---- CSS Custom Properties (Design Tokens) ---- */ :root { /* Brand palette — teal/green-teal, trustworthy & warm */ --brand-50: #f0fdfa; --brand-100: #ccfbf1; --brand-300: #5eead4; --brand-400: #2dd4bf; --brand-500: #14b8a6; --brand-600: #0d9488; /* primary action */ --brand-700: #0f766e; --brand-900: #134e4a; /* Warm neutrals */ --warm-50: #fdf8f6; --warm-100: #f2e8e5; /* Slate scale */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; /* Typography */ --font-sans: 'Inter', sans-serif; /* Spacing scale */ --section-py: 5rem; /* 80px */ --container-max: 80rem; /* 1280px */ /* Radius */ --radius-sm: 0.5rem; --radius-md: 1rem; --radius-lg: 1.5rem; --radius-xl: 2rem; --radius-2xl: 2.5rem; --radius-3xl: 3rem; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); --shadow-brand: 0 10px 30px rgba(13,148,136,.3); /* Transitions */ --transition-base: 150ms ease; --transition-smooth: 300ms ease; --transition-slow: 500ms ease; } /* ---- Reset / Base ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); color: var(--slate-700); background-color: var(--slate-50); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: inherit; border: none; background: none; } ul, ol { list-style: none; } /* ---- Text selection ---- */ ::selection { background-color: var(--brand-500); color: #fff; } /* ---- Focus visible (accessibility) ---- */ :focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px; border-radius: var(--radius-sm); } /* ---- Utility: Container ---- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: 1rem; } @media (min-width: 640px) { .container { padding-inline: 1.5rem; } } @media (min-width: 1024px) { .container { padding-inline: 2rem; } } /* ---- Utility: sr-only (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: 0; } /* ---- Utility: Fade-in animation ---- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeInUp 1s ease-in-out both; } /* ---- Utility: Section spacing ---- */ .section { padding-block: var(--section-py); } /* ---- Utility: Section header ---- */ .section-eyebrow { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-600); margin-bottom: .5rem; } .section-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--slate-800); line-height: 1.2; } .section-subtitle { color: var(--slate-600); margin-top: .75rem; max-width: 42rem; } /* ---- Utility: Button ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; padding: 1rem 2rem; border-radius: 9999px; font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); cursor: pointer; white-space: nowrap; } .btn:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px; } .btn-primary { background-color: var(--brand-600); color: #fff; box-shadow: var(--shadow-brand); } .btn-primary:hover { background-color: var(--brand-500); transform: translateY(-2px); box-shadow: 0 14px 36px rgba(13,148,136,.4); } .btn-ghost { background-color: rgba(255,255,255,.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); color: #fff; } .btn-ghost:hover { background-color: rgba(255,255,255,.2); } /* ---- Utility: Badge / chip ---- */ .badge { display: inline-block; padding: .25rem .75rem; border-radius: 9999px; font-size: .8125rem; font-weight: 600; letter-spacing: .05em; } /* ---- Utility: Card ---- */ .card { background: #fff; border-radius: var(--radius-2xl); border: 1px solid var(--slate-100); transition: box-shadow var(--transition-smooth), transform var(--transition-smooth); } .card:hover { box-shadow: var(--shadow-xl); transform: translateY(-6px); } /* ---- Utility: Icon box ---- */ .icon-box { display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: var(--radius-lg); background-color: var(--brand-100); color: var(--brand-600); font-size: 2rem; transition: transform var(--transition-smooth); } /* ---- Backgrounds ---- */ .bg-brand-600 { background-color: var(--brand-600); } .bg-brand-900 { background-color: var(--brand-900); } .bg-warm-50 { background-color: var(--warm-50); } .bg-white { background-color: #fff; } .bg-slate-50 { background-color: var(--slate-50); }