/* * ══════════════════════════════════════════════ * Timexora v2 — Global Design System * ══════════════════════════════════════════════ * Aesthetic: Dark Ink on Warm Parchment * Philosophy: Minimal, refined, timeless. * Like a beautifully typeset horological manuscript. * ══════════════════════════════════════════════ */ /* Google Fonts — loaded via in for performance */ /* ══════════════════════════════════════════════ CSS Variables — Light Theme (Default) ══════════════════════════════════════════════ */ :root { /* ── Parchment Palette ── */ --bg-primary: #ffffff; /* warm parchment */ --bg-secondary: #F3EDE4; /* deeper parchment */ --bg-tertiary: #EBE3D7; /* card hover */ --bg-elevated: #FFFFFF; /* cards, modals */ --bg-code: #F0EBE3; /* code blocks */ /* ── Ink Palette ── */ --ink-primary: #1A1612; /* darkest ink — headings */ --ink-secondary: #3D3530; /* body text */ --ink-tertiary: #6B5E52; /* muted text */ --ink-quaternary: #9C8E80; /* placeholders, hints */ --ink-faint: #C4B8AA; /* borders, dividers */ /* ── Accent Colors ── */ --accent-primary: #B45309; /* warm amber — links, CTA */ --accent-hover: #92400E; /* amber dark */ --accent-light: #FEF3C7; /* amber tint bg */ --accent-sunrise: #F59E0B; /* golden — sunrise related */ --accent-sunset: #DC2626; /* warm red — sunset */ --accent-moon: #6366F1; /* indigo — moon/night */ --accent-prayer: #059669; /* emerald — prayer times */ --accent-success: #16A34A; /* green */ --accent-warning: #D97706; /* amber */ --accent-error: #DC2626; /* red */ --accent-info: #2563EB; /* blue */ /* ── Typography ── */ --font-display: 'DM Serif Display', Georgia, serif; --font-body: 'Outfit', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px */ --leading-tight: 1.25; --leading-normal: 1.6; --leading-relaxed: 1.75; /* ── Spacing ── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* ── Layout ── */ --content-width: 1200px; --content-narrow: 800px; --sidebar-width: 160px; --header-height: 64px; /* ── Borders & Radius ── */ --border-color: #DDD3C5; --border-light: #E8E0D4; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ── Shadows ── */ --shadow-sm: 0 1px 2px rgba(26, 22, 18, 0.05); --shadow-md: 0 4px 12px rgba(26, 22, 18, 0.08); --shadow-lg: 0 8px 30px rgba(26, 22, 18, 0.12); --shadow-xl: 0 16px 50px rgba(26, 22, 18, 0.15); --shadow-inner: inset 0 2px 6px rgba(26, 22, 18, 0.06); /* ── Transitions ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; } /* ══════════════════════════════════════════════ Dark Theme ══════════════════════════════════════════════ */ [data-theme="dark"] { --bg-primary: #141210; --bg-secondary: #1C1917; --bg-tertiary: #262220; --bg-elevated: #1E1B18; --bg-code: #1A1816; --ink-primary: #F5F0EB; --ink-secondary: #D4CBC0; --ink-tertiary: #A69888; --ink-quaternary: #786A5C; --ink-faint: #3D3530; --accent-primary: #F59E0B; --accent-hover: #FBBF24; --accent-light: #292317; --border-color: #332E28; --border-light: #262220; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5); --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.6); --shadow-inner: inset 0 2px 6px rgba(0, 0, 0, 0.3); } /* ══════════════════════════════════════════════ CSS Reset ══════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: var(--leading-normal); color: var(--ink-secondary); background-color: var(--bg-primary); min-height: 100vh; overflow-x: hidden; } /* ── Subtle parchment texture ── */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E"); } /* ══════════════════════════════════════════════ Typography ══════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--ink-primary); line-height: var(--leading-tight); font-weight: 400; /* DM Serif Display is naturally bold */ } h1 { font-size: var(--text-3xl); margin-bottom: var(--space-6); } h2 { font-size: var(--text-2xl); margin-bottom: var(--space-5); } h3 { font-size: var(--text-xl); margin-bottom: var(--space-4); } h4 { font-size: var(--text-lg); margin-bottom: var(--space-3); } h5 { font-size: var(--text-md); margin-bottom: var(--space-2); } h6 { font-size: var(--text-base);margin-bottom: var(--space-2); } p { margin-bottom: var(--space-4); /* max-width: 72ch; */ /* Hero/centered contexts: p tags need margin:auto to actually center */ /* Non-centered contexts: margin auto has no visible effect */ margin-left: auto; margin-right: auto; text-align: justify; } a { color: var(--accent-primary); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--accent-hover); } strong { font-weight: 600; color: var(--ink-primary); } em { font-style: italic; } small { font-size: var(--text-sm); color: var(--ink-tertiary); } code, pre { font-family: var(--font-mono); font-size: var(--text-sm); } code { background: var(--bg-code); padding: 2px 6px; border-radius: var(--radius-sm); color: var(--ink-primary); } pre { background: var(--bg-code); padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; border: 1px solid var(--border-light); } /* ══════════════════════════════════════════════ Page Layout — Ads | Content | Ads ══════════════════════════════════════════════ */ .page-layout { display: flex; justify-content: center; max-width: calc(var(--content-width) + var(--sidebar-width) * 2 + var(--space-8) * 2); margin: 0 auto; padding: var(--space-6) var(--space-4); gap: var(--space-6); min-height: calc(100vh - var(--header-height)); } .ad-sidebar { width: var(--sidebar-width); flex-shrink: 0; position: sticky; top: calc(var(--header-height) + var(--space-4)); height: fit-content; } /* When no ads — content auto-centers via justify-content: center */ .main-content { flex: 0 1 var(--content-width); min-width: 0; max-width: var(--content-width); width: 100%; } .content-wrapper { padding: var(--space-4) 0; } /* Hide sidebars on smaller screens */ @media (max-width: 1400px) { .ad-sidebar--right { display: none; } } @media (max-width: 1100px) { .ad-sidebar { display: none; } .page-layout { padding: var(--space-4) var(--space-4); } } /* ══════════════════════════════════════════════ Cards ══════════════════════════════════════════════ */ .card { background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-5); transition: all var(--duration-normal) var(--ease-out); } .card:hover { border-color: var(--border-color); box-shadow: var(--shadow-md); transform: translateY(-1px); } .card--flat { box-shadow: none; border: 1px solid var(--border-light); } .card--flat:hover { transform: none; } /* ══════════════════════════════════════════════ Buttons ══════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); border: 1px solid transparent; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); text-decoration: none; line-height: 1.4; white-space: nowrap; } .btn--primary { background: var(--ink-primary); color: var(--bg-primary); border-color: var(--ink-primary); } .btn--primary:hover { background: var(--ink-secondary); color: var(--bg-primary); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn--secondary { background: transparent; color: var(--ink-secondary); border-color: var(--border-color); } .btn--secondary:hover { background: var(--bg-secondary); border-color: var(--ink-quaternary); } .btn--accent { background: var(--accent-primary); color: #FFF; border-color: var(--accent-primary); } .btn--accent:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn--ghost { background: transparent; color: var(--ink-tertiary); border: none; padding: var(--space-2) var(--space-3); } .btn--ghost:hover { color: var(--ink-primary); background: var(--bg-secondary); } .btn--sm { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); } .btn--lg { font-size: var(--text-base); padding: var(--space-3) var(--space-8); } /* ══════════════════════════════════════════════ Form Elements ══════════════════════════════════════════════ */ input, select, textarea { font-family: var(--font-body); font-size: var(--text-base); color: var(--ink-secondary); background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); width: 100%; transition: all var(--duration-fast) var(--ease-out); outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-light); } input::placeholder, textarea::placeholder { color: var(--ink-quaternary); } /* ══════════════════════════════════════════════ Tags / Badges ══════════════════════════════════════════════ */ .tag { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: 500; padding: 3px 10px; border-radius: var(--radius-full); background: var(--bg-secondary); color: var(--ink-tertiary); border: 1px solid var(--border-light); } .tag--accent { background: var(--accent-light); color: var(--accent-primary); border-color: transparent; } /* ══════════════════════════════════════════════ Tables ══════════════════════════════════════════════ */ .table-wrapper { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border-light); } table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } thead { background: var(--bg-secondary); } th { font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-tertiary); padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 2px solid var(--border-color); } td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-light); color: var(--ink-secondary); } tbody tr:hover { background: var(--bg-secondary); } tbody tr:last-child td { border-bottom: none; } /* ══════════════════════════════════════════════ Section Dividers ══════════════════════════════════════════════ */ .section { margin-bottom: var(--space-10); } .section-title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--ink-primary); margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-light); } .divider { border: none; height: 1px; background: var(--border-light); margin: var(--space-8) 0; } /* ══════════════════════════════════════════════ Live Time Display ══════════════════════════════════════════════ */ .time-display { font-family: var(--font-mono); font-size: var(--text-4xl); font-weight: 500; color: var(--ink-primary); letter-spacing: -0.02em; line-height: 1; } .time-display--sm { font-size: var(--text-xl); } .time-display--md { font-size: var(--text-2xl); } .time-seconds { font-size: 0.6em; color: var(--ink-tertiary); font-weight: 400; } .time-period { font-family: var(--font-body); font-size: 0.35em; font-weight: 500; color: var(--ink-quaternary); text-transform: uppercase; letter-spacing: 0.1em; margin-left: var(--space-2); vertical-align: super; } /* ══════════════════════════════════════════════ Grid System ══════════════════════════════════════════════ */ .grid { display: grid; gap: var(--space-5); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } @media (min-width: 769px) and (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } /* ══════════════════════════════════════════════ Utility Classes ══════════════════════════════════════════════ */ .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--ink-tertiary); } .text-faint { color: var(--ink-quaternary); } .text-accent { color: var(--accent-primary); } .text-sm { font-size: var(--text-sm); } .text-xs { font-size: var(--text-xs); } .text-mono { font-family: var(--font-mono); } .mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ══════════════════════════════════════════════ Animations ══════════════════════════════════════════════ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ── Lazy Load Image Transitions ── */ img[data-src] { opacity: 0; transition: opacity var(--duration-slow) var(--ease-out); } img.loaded, img:not([data-src]) { opacity: 1; } /* ── Lazy Section (hidden until near viewport) ── */ [data-lazy-section]:not(.section--loaded) { min-height: 100px; } /* ── Smooth section reveal ── */ [data-animate] { transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } @keyframes spin { to { transform: rotate(360deg); } } .animate-fadeIn { animation: fadeIn 0.4s var(--ease-out) forwards; } .animate-fadeInUp { animation: fadeInUp 0.5s var(--ease-out) forwards; } .animate-pulse { animation: pulse 2s ease-in-out infinite; } /* Stagger delays for sequential reveals */ .stagger-1 { animation-delay: 0.05s; opacity: 0; } .stagger-2 { animation-delay: 0.1s; opacity: 0; } .stagger-3 { animation-delay: 0.15s; opacity: 0; } .stagger-4 { animation-delay: 0.2s; opacity: 0; } .stagger-5 { animation-delay: 0.25s; opacity: 0; } /* ══════════════════════════════════════════════ Loading Skeleton ══════════════════════════════════════════════ */ .skeleton { background: linear-gradient( 90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-sm); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ══════════════════════════════════════════════ Scrollbar Styling ══════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-quaternary); } /* ══════════════════════════════════════════════ Selection Color ══════════════════════════════════════════════ */ ::selection { background: var(--accent-primary); color: #FFF; } /* ══════════════════════════════════════════════ Print Styles ══════════════════════════════════════════════ */ @media print { .ad-sidebar, .site-header, .site-footer, .search-bar, .breadcrumb, .btn { display: none !important; } body { background: #FFF; color: #000; } .page-layout { max-width: 100%; } } /* ── Hidden attribute fix ── */ [hidden] { display: none !important; }