/* ============================================================= DreamWallAi Mobile AI Wallpapers – Core Styles ============================================================= Color System (easily adjustable): - Edit the CSS custom properties (variables) below in :root for light mode - For dark mode overrides, adjust inside @media (prefers-color-scheme: dark) - To force a theme manually, add data-theme="light" or data-theme="dark" on - Keep semantic naming (bg, text, accent) to reduce refactor friction */ :root { /* Semantic palette (LIGHT MODE DEFAULTS) */ --color-bg: #ffffff; --color-bg-alt: #f5f7f9; --color-surface: #ffffff; --color-border: #d9e0e7; --color-text: #1f2429; --color-text-dim: #5a636d; --color-accent: #4b65ff; --color-accent-hover: #374bd6; --color-focus: #ffbd2e; --color-danger: #d9534f; --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.12); /* Fonts: Inter for body/UI; Space Grotesk for brand. Both have safe fallbacks. */ --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif; --font-brand: "Space Grotesk", var(--font-sans); --max-width: 1180px; --transition: 0.18s ease; /* Image rendering behavior: change to 'cover' for cropped fill */ /* Image object-fit strategy: 'cover' fills the frame (recommended for immersive wallpapers). */ --image-object-fit: cover; /* change to 'contain' to avoid any cropping */ /* Layout spacing vars */ --gap-grid: 8px; /* increased uniform gap between cards (was 4px) */ --gap-grid-mobile: 8px; /* mobile portrait gap matching desktop */ --wallpaper-radius: 12px; /* rounding for wallpaper thumbnails */ --dl-btn-size: 42px; /* download button diameter */ --dl-btn-bg: linear-gradient(135deg,var(--color-accent) 0%, var(--color-accent-hover) 90%); --dl-btn-bg-hover: linear-gradient(135deg,var(--color-accent-hover) 0%, var(--color-accent) 90%); /* Brand typography tokens */ --brand-size: clamp(1.25rem, 1.15rem + 1.1vw, 2.2rem); --brand-weight: 800; /* 700..900 available depending on font */ --brand-tracking: 0.6px; /* Nav styling tokens */ --nav-link-px: .7rem; /* horizontal padding for nav links */ --nav-link-py: .38rem; /* vertical padding for nav links */ --nav-link-radius: 9px; /* rounded corners for nav links */ --nav-link-hover-bg: var(--color-surface); --nav-link-active-bg: var(--color-surface); /* ============================================ Site Background Presets (minimal, theme-aware) ------------------------------------------------ HOW TO SWITCH BACKGROUND: Change the value of --site-bg below to one of: var(--bg-none) var(--bg-duotone-corners) var(--bg-dot-grid) var(--bg-diagonal-hatch) var(--bg-top-glow) var(--bg-soft-mesh) TWEAKS: - Adjust alpha variables to intensify/subdue effects - Dot grid size/step via --bg-dot-size / --bg-dot-step - All presets end with var(--color-bg), so they respect theme colors ============================================ */ /* Selection (default): */ --site-bg: var(--bg-soft-mesh); /* Shared ink for subtle patterns (auto-dark overridden below) */ --bg-ink: rgba(0,0,0,.035); /* Duotone corner alphas */ --bg-duo-a1: .08; --bg-duo-a2: .06; /* Top glow alpha */ --bg-topglow-alpha: .10; /* Soft mesh alphas */ --bg-mesh-a1: .10; --bg-mesh-a2: .08; /* Soft mesh attachment: fixed keeps it stationary on scroll; set to 'scroll' if needed */ --bg-mesh-attachment: fixed; /* Dot grid tuning */ --bg-dot-size: 1px; --bg-dot-step: 22px; /* Preset definitions */ --bg-none: var(--color-bg); --bg-duotone-corners: radial-gradient(80vw 60vh at 100% 0%, rgba(75,101,255,var(--bg-duo-a1)), transparent 60%), radial-gradient(70vw 55vh at 0% 100%, rgba(55,75,214,var(--bg-duo-a2)), transparent 60%), var(--color-bg); --bg-dot-grid: radial-gradient(var(--bg-ink) var(--bg-dot-size), transparent var(--bg-dot-size)) 0 0/var(--bg-dot-step) var(--bg-dot-step), var(--color-bg); --bg-diagonal-hatch: repeating-linear-gradient(135deg, var(--bg-ink) 0 1px, transparent 1px 14px), var(--color-bg); --bg-top-glow: radial-gradient(60vw 40vh at 50% -10%, rgba(75,101,255,var(--bg-topglow-alpha)), transparent 65%), var(--color-bg); --bg-soft-mesh: radial-gradient(40vw 40vh at 20% 10%, rgba(75,101,255,var(--bg-mesh-a1)), transparent 65%) no-repeat var(--bg-mesh-attachment), radial-gradient(35vw 35vh at 80% 20%, rgba(55,75,214,var(--bg-mesh-a2)), transparent 60%) no-repeat var(--bg-mesh-attachment), var(--color-bg); /* Animated overlay hues (light defaults) */ --bg-anim-a: rgba(75,101,255,0.10); --bg-anim-b: rgba(55,75,214,0.08); } /* Dark scheme auto (overrides). Users can still force theme via data-theme attribute. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0e1215; --color-bg-alt: #161b21; --color-surface: #1d242b; --color-border: #2c353e; --color-text: #e6ecf2; --color-text-dim: #94a2b3; --color-accent: #6d8dff; --color-accent-hover: #4b65ff; --color-focus: #ffcc4d; /* Dark-mode background tuning */ --bg-ink: rgba(255,255,255,.06); --bg-duo-a1: .14; --bg-duo-a2: .10; --bg-topglow-alpha: .18; --bg-mesh-a1: .18; --bg-mesh-a2: .14; /* Dark-mode animated overlay tuning */ --bg-anim-a: rgba(109,141,255,0.16); --bg-anim-b: rgba(75,101,255,0.12); } } /* Explicit theme forcing */ :root[data-theme="dark"] { /* Mirror dark values for manual override */ --color-bg: #0e1215; --color-bg-alt: #161b21; --color-surface: #1d242b; --color-border: #2c353e; --color-text: #e6ecf2; --color-text-dim: #94a2b3; --color-accent: #6d8dff; --color-accent-hover: #4b65ff; --color-focus: #ffcc4d; /* Dark (forced) background tuning */ --bg-ink: rgba(255,255,255,.06); --bg-duo-a1: .14; --bg-duo-a2: .10; --bg-topglow-alpha: .18; --bg-mesh-a1: .18; --bg-mesh-a2: .14; --bg-anim-a: rgba(109,141,255,0.16); --bg-anim-b: rgba(75,101,255,0.12); } html { box-sizing: border-box; } *,*::before,*::after { box-sizing: inherit; } html,body { height: 100%; } body { margin: 0; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; /* Background uses selected preset (see --site-bg above) */ background: var(--site-bg); color: var(--color-text); line-height: 1.5; position: relative; /* create stacking context for animated overlay */ } /* Keep main content above animated overlay */ header, .main, .page, footer { position: relative; z-index: 1; } /* Animated background overlay (subtle) */ body::before { content: ""; position: fixed; inset: -20%; /* extend beyond viewport to avoid edges during rotation */ background: conic-gradient( from 0deg at 50% 50%, var(--bg-anim-a) 0deg, transparent 90deg, var(--bg-anim-b) 180deg, transparent 270deg, var(--bg-anim-a) 360deg ); filter: blur(28px); opacity: .34; pointer-events: none; z-index: 0; transform-origin: 50% 50%; } /* ============================================================= Self-hosted fonts (optional). Place files in assets/fonts/ If files are missing, fallbacks will be used automatically. Inter: Variable font for body/UI; Space Grotesk: brand display ============================================================== */ @font-face { font-family: 'Inter'; src: url('../fonts/Inter-Variable.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } img { max-width: 100%; display: block; } .visually-hidden { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .site-header { padding: 1rem clamp(.75rem,2vw,2rem); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem; background: var(--color-bg-alt); border-bottom:1px solid var(--color-border); } .brand__title { font-size: var(--brand-size); margin:0; letter-spacing: var(--brand-tracking); background: linear-gradient(90deg,var(--color-accent),var(--color-accent-hover)); -webkit-background-clip:text; background-clip:text; color:transparent; font-family: var(--font-brand); } .brand__title { font-weight: var(--brand-weight); display:flex; align-items:center; gap:.4rem; } .brand__title--plain { display:inline-block; gap:0; background:linear-gradient(90deg,var(--color-accent),var(--color-accent-hover)); -webkit-background-clip:text; background-clip:text; color:transparent; } .brand__title a { text-decoration:none; color:inherit; } .brand__tagline { margin:.2rem 0 0; font-size:.85rem; color: var(--color-text-dim); } .brand__tagline { font-weight:500; letter-spacing:.3px; } .brand__tagline .tagline-accent { background:linear-gradient(90deg,var(--color-accent) 0%, var(--color-accent-hover) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600; white-space:nowrap; } .site-nav ul { list-style:none; display:flex; gap:1rem; padding:0; margin:0; align-items:center; } .header-actions { margin-left:auto; display:flex; align-items:center; gap:.85rem; } .site-nav { margin:0; margin-top:2px; } .site-nav a { text-decoration:none; color: var(--color-accent); font-weight:600; padding: var(--nav-link-py) var(--nav-link-px); border-radius: var(--nav-link-radius); position:relative; transition: color var(--transition), background var(--transition), box-shadow var(--transition), transform .15s ease; } .site-nav a:hover, .site-nav a:focus { color: var(--color-accent-hover); background: var(--nav-link-hover-bg); box-shadow: var(--shadow-sm); } .site-nav a:active { transform: translateY(1px); } .site-nav a[aria-current="page"] { position:relative; } .site-nav a[aria-current="page"] { background: var(--nav-link-active-bg); } .site-nav a[aria-current="page"]::after { content:""; position:absolute; left:10%; right:10%; bottom:-4px; height:2px; background:var(--color-accent); border-radius:1px; opacity:.85; } .site-nav a:focus-visible { outline:2px solid var(--color-focus); outline-offset:2px; } /* Theme toggle */ .theme-toggle { position:relative; width:42px; height:42px; border:1px solid var(--color-border); background:var(--color-surface); border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; box-shadow:var(--shadow-sm); transition: background var(--transition), border-color var(--transition), transform .25s ease; } .theme-toggle:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; } .theme-toggle:active { transform:scale(.92); } .theme-toggle::before, .theme-toggle::after { content:""; position:absolute; border-radius:50%; transition:opacity .45s ease, transform .45s ease; } /* Sun (light) */ .theme-toggle::before { width:18px; height:18px; background: radial-gradient(circle at 30% 30%, #ffd965, #ffb347); box-shadow:0 0 0 2px rgba(255,205,96,.65), 0 0 8px 2px rgba(255,205,96,.55); opacity:1; } /* Moon (dark) */ .theme-toggle::after { width:18px; height:18px; background: radial-gradient(circle at 35% 35%, #cfd8ff, #7f8bff 70%); box-shadow:0 0 0 1px rgba(140,150,255,.5), 0 0 6px 2px rgba(120,130,255,.35); transform: translate(6px,-4px); opacity:0; } html[data-theme="dark"] .theme-toggle { background: var(--color-bg-alt); } html[data-theme="dark"] .theme-toggle::before { opacity:0; transform: translate(-6px,4px) scale(.6); } html[data-theme="dark"] .theme-toggle::after { opacity:1; transform: translate(0,0); } .main { padding: 1.5rem clamp(.75rem,2vw,2rem) 3rem; max-width: var(--max-width); margin: 0 auto; } .page.narrow { max-width: 780px; } .page { padding: 1.5rem clamp(.75rem,2vw,2rem) 3rem; max-width: var(--max-width); margin:0 auto; } .section-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; } .section-head h2 { margin:0; font-size: clamp(1.25rem, 1.1rem + .8vw, 2rem); } .controls input[type="search"] { padding:.55rem .8rem; border:1px solid var(--color-border); background:var(--color-surface); border-radius: var(--radius-sm); font:inherit; width: min(100%,18rem); color: var(--color-text); } .controls input[type="search"]:focus { outline:2px solid var(--color-focus); outline-offset:2px; } /* New gallery layout */ /* Base grid gap uses variable for easy tuning */ .wallpaper-grid { --grid-gap: var(--gap-grid); display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--grid-gap); } @media (max-width:700px) { /* Force exactly 2 columns on small (portrait) */ .wallpaper-grid { grid-template-columns:repeat(2,1fr); --grid-gap: var(--gap-grid-mobile); } body { padding-left:0; padding-right:0; } .main { padding-left:4px; padding-right:4px; } } @media (min-width:900px) { .wallpaper-grid { grid-template-columns:repeat(4,1fr); } } .wallpaper-item { position:relative; aspect-ratio:9/16; overflow:hidden; background:#000; border-radius:var(--wallpaper-radius); } .wallpaper-item img { width:100%; height:100%; object-fit:var(--image-object-fit); display:block; transition: transform .4s ease; border-radius:inherit; } .wallpaper-item:hover img { transform:scale(1.03); } .wallpaper-link { display:block; width:100%; height:100%; } .dl-btn { position:absolute; bottom:8px; right:8px; width:var(--dl-btn-size); height:var(--dl-btn-size); border:0; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.05rem; line-height:1; font-weight:600; color:#fff; background: var(--dl-btn-bg); box-shadow:0 4px 12px -2px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.25); backdrop-filter: saturate(160%) blur(6px); -webkit-backdrop-filter: saturate(160%) blur(6px); transition: background .35s ease, transform .25s ease, box-shadow .4s ease; } .dl-btn .dw-icon { display:block; width:60%; height:60%; } .dl-btn:hover { background: var(--dl-btn-bg-hover); transform: translateY(-2px); box-shadow:0 6px 18px -4px rgba(0,0,0,.55), 0 3px 6px rgba(0,0,0,.3); } .dl-btn:active { transform: translateY(0) scale(.94); box-shadow:0 2px 6px -1px rgba(0,0,0,.5); } .dl-btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-focus), 0 6px 18px -4px rgba(0,0,0,.55); } #scroll-sentinel { width:100%; height:1px; } .button { --btn-bg: var(--color-accent); --btn-bg-hover: var(--color-accent-hover); appearance:none; border:none; background: var(--btn-bg); color:#fff; padding:.55rem .85rem; font:inherit; font-size:.75rem; font-weight:600; letter-spacing:.5px; border-radius: var(--radius-sm); cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; box-shadow: var(--shadow-sm); } .button:hover, .button:focus { background: var(--btn-bg-hover); } .button:focus { outline:2px solid var(--color-focus); outline-offset:2px; } .button.secondary { --btn-bg: var(--color-border); --btn-bg-hover: var(--color-text-dim); color: var(--color-text); } .site-footer { padding:2rem clamp(.75rem,2vw,2rem); font-size:.75rem; color: var(--color-text-dim); border-top:1px solid var(--color-border); background: var(--color-bg-alt); } .site-footer a { color: var(--color-accent); text-decoration:none; } .site-footer a:hover { text-decoration:underline; } /* Utilities */ [data-empty="true"]::before { content: "No wallpapers found"; display:block; padding:2rem; text-align:center; color: var(--color-text-dim); } /* Animations */ @media (prefers-reduced-motion: no-preference) { .fade-in { animation: fade .5s ease; } @keyframes fade { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0);} } /* Rotate the animated overlay slowly for a living background effect */ body::before { animation: dw-bg-spin 45s linear infinite; } @keyframes dw-bg-spin { to { transform: rotate(360deg); } } } @media (prefers-reduced-motion: reduce) { body::before { animation: none !important; } } /* Responsive Tweaks */ @media (max-width: 640px) { .site-header { flex-direction:column; align-items:flex-start; } .brand__tagline { font-size:.75rem; } .site-nav { width:100%; } .site-nav ul { gap:.5rem; flex-wrap:wrap; } .site-nav a { padding:.6rem .8rem; } .wallpaper-grid { --min: 140px; } /* Larger touch target for download button on small screens */ :root { --dl-btn-size: 48px; } }