/* ============================================================ Dollhouse Dolls -- main.css Dark/Light theme via [data-site-theme] on All original styles preserved + light mode overrides ============================================================ */ /* ???? CSS VARIABLES ???? */ :root { --bg: #000000; --bg2: #0d0d0d; --bg3: #0a0a0a; --card: #111111; --border: #222222; --border2: #2a2a2a; --border3: #333333; --text: #ffffff; --text2: #cccccc; --text3: #999999; --gray: #888888; --header-bg: #000000; --footer-bg: #0a0a0a; --input-bg: #060606; --overlay: rgba(0,0,0,.92); --shadow-pink: rgba(255,51,102,.15); --shadow-dark: rgba(0,0,0,.6); --pink: #ff3366; --gold: #f5c842; --green: #00c864; } /* ???? LIGHT MODE -- feminine blush/cream ???? */ [data-site-theme="light"] { --bg: #fdf4f7; --bg2: #fff0f4; --bg3: #fce8ef; --card: #ffffff; --border: #f0c0d0; --border2: #f5d0dc; --border3: #e8b8c8; --text: #2a1520; --text2: #5a3040; --text3: #8a6070; --gray: #9a7080; --header-bg: rgba(253,236,244,.97); --footer-bg: #fff0f4; --input-bg: #ffffff; --overlay: rgba(42,21,32,.82); --shadow-pink: rgba(255,51,102,.12); --shadow-dark: rgba(42,21,32,.2); } /* ???? 1. GLOBAL ???? */ *, *::before, *::after { box-sizing: border-box; } html { transition: background-color .3s, color .3s; } body, html { background-color: var(--bg) !important; color: var(--text); font-family: 'Open Sans', 'Raleway', sans-serif; margin: 0; padding: 0; transition: background-color .3s, color .3s; } #canvas, #box_wrapper { background-color: var(--bg) !important; transition: background-color .3s; } .dark-section, .ls, .ds { background-color: var(--bg2) !important; color: var(--text) !important; } /* ???? 2. HEADER & NAV ???? */ .page_header, header.page_header { background-color: var(--header-bg) !important; border-bottom: 1px solid var(--border3); padding: 30px 0 !important; transition: background-color .3s; } .header-row { display:flex; flex-direction:column; align-items:center; } .logo-col { margin-bottom:30px; text-align:center; } .logo img { max-height:120px; width:auto; } .menu-col { width:100%; text-align:center; } .mainmenu_wrapper { display:inline-block; width:100%; } .mainmenu { display:flex; justify-content:center; flex-wrap:wrap; list-style:none; padding:0; margin:0; } .mainmenu li { margin:5px 15px; } .mainmenu li a { color: var(--text) !important; font-weight:700; text-transform:uppercase; font-size:14px; letter-spacing:1px; transition:color .3s; padding:10px 5px; display:block; } .mainmenu li a:hover, .mainmenu li.active a { color: var(--pink) !important; } /* Submenu */ .mainmenu li { position:relative; } .mainmenu li .sub-menu { display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); background: var(--card); border:1px solid var(--border); border-top:2px solid var(--pink); border-radius:0 0 10px 10px; min-width:200px; z-index:9999; padding:6px 0; list-style:none; text-align:left; box-shadow: 0 8px 28px var(--shadow-dark); } .mainmenu li:hover > .sub-menu { display:block; } .mainmenu li .sub-menu li a { display:block !important; padding:10px 18px !important; color: var(--text2) !important; font-size:13px !important; font-weight:600 !important; text-transform:none !important; letter-spacing:.5px !important; white-space:nowrap; border-left:3px solid transparent; transition:all .2s; } .mainmenu li .sub-menu li a:hover { color: var(--pink) !important; background:rgba(255,51,102,.08); border-left-color:var(--pink); } /* ???? THEME TOGGLE (fixed top-right) ???? */ #siteThemeBtn { position:fixed; top:14px; right:16px; z-index:10000; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:6px 13px; display:flex; align-items:center; gap:7px; cursor:pointer; font-family:'Open Sans',Arial,sans-serif; font-size:11px; font-weight:700; color:#fff; backdrop-filter:blur(8px); transition:all .25s; box-shadow:0 2px 12px rgba(0,0,0,.3); } [data-site-theme="light"] #siteThemeBtn { background:rgba(255,255,255,.88) !important; border-color:rgba(255,51,102,.3) !important; color:#2a1520 !important; box-shadow:0 2px 12px rgba(255,51,102,.15); } #siteThemeTrack { width:36px; height:18px; background:#333; border-radius:999px; position:relative; flex-shrink:0; transition:background .3s; } [data-site-theme="light"] #siteThemeTrack { background: var(--pink); } #siteThemeThumb { width:14px; height:14px; background:#fff; border-radius:50%; position:absolute; top:2px; left:2px; transition:transform .3s; box-shadow:0 1px 3px rgba(0,0,0,.3); } [data-site-theme="light"] #siteThemeThumb { transform:translateX(18px); } /* ???? 3. GALLERY ???? */ .row-title { color: var(--text); text-align:center; font-size:28px; margin:60px 0 30px; text-transform:uppercase; letter-spacing:2px; border-bottom:2px solid var(--pink); display:inline-block; padding-bottom:10px; position:relative; left:50%; transform:translateX(-50%); } .google-gallery { display:flex; gap:18px; padding:20px; max-width:1400px; margin:0 auto 50px; align-items:stretch; } .gg-featured-wrap { flex:0 0 38%; max-width:38%; position:relative; overflow:hidden; background: var(--card); border-radius:28px; min-height:420px; box-shadow:0 0 30px var(--shadow-pink), 0 8px 32px var(--shadow-dark); transition:box-shadow .3s; } .gg-featured-wrap img, .gg-featured-wrap .gif-placeholder { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; } .gg-featured-wrap:hover { box-shadow:0 0 50px rgba(255,51,102,.35), 0 12px 40px var(--shadow-dark); } .gg-featured-wrap:hover img, .gg-featured-wrap:hover .gif-placeholder { transform:scale(1.04); } .gg-thumbs-wrap { flex:1; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:12px; } .gg-item { position:relative; overflow:hidden; background: var(--card); border-radius:20px; aspect-ratio:1/1; box-shadow:0 0 18px var(--shadow-pink), 0 4px 18px var(--shadow-dark); transition:box-shadow .3s, transform .3s; } .gg-item:hover { box-shadow:0 0 32px rgba(255,51,102,.35), 0 8px 28px var(--shadow-dark); transform:translateY(-3px); } .gg-item img, .gg-item .gif-placeholder { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; } .gg-item:hover img, .gg-item:hover .gif-placeholder { transform:scale(1.1); } .gif-placeholder { width:100%; height:100%; position:relative; overflow:hidden; background: var(--card); } .gif-placeholder img { width:100%; height:100%; object-fit:cover; filter:saturate(1.15) contrast(1.05); } .gif-badge { position:absolute; top:8px; left:8px; background:rgba(255,51,102,.85); color:#fff; font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:3px 7px; border-radius:3px; z-index:3; } .gg-overlay { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent, var(--overlay)); padding:18px 15px 15px; opacity:1; transition:opacity .3s; display:flex; flex-direction:column; z-index:2; } .model-name { font-weight:bold; font-size:16px; color:var(--pink); text-shadow:1px 1px 2px #000; } .model-specs { font-size:12px; color:#ccc; margin-top:4px; text-shadow:1px 1px 2px #000; } [data-site-theme="light"] .model-specs { color:#fff; } .video-icon { position:absolute; top:10px; right:10px; color:rgba(255,255,255,.8); font-size:24px; z-index:2; text-shadow:0 0 5px rgba(0,0,0,.5); } /* ???? 4. BANNER SCROLLER ???? */ .banner-scroller { background: var(--bg); overflow:hidden; padding:40px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .banner-track { display:flex; width:calc(250px * 14); animation:scroll 35s linear infinite; } .banner-item { width:250px; padding:0 10px; flex-shrink:0; } .banner-item img { width:100%; border-radius:16px; border:1px solid var(--border2); transition:box-shadow .3s; } .banner-item img:hover { box-shadow:0 0 18px rgba(255,51,102,.3); } @keyframes scroll { 0%{transform:translateX(0)} 100%{transform:translateX(calc(-250px * 7))} } @keyframes sponScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } @keyframes bannerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } /* ???? 5. FOOTER ???? */ .custom-footer { background-color: var(--footer-bg) !important; padding:80px 0 40px; color: var(--text3); border-top:2px solid var(--pink); transition:background-color .3s; } .custom-footer h4 { color:var(--text); margin-bottom:25px; text-transform:uppercase; font-size:18px; } .footer-logo img { max-height:80px; margin-bottom:20px; } .footer-links ul { list-style:none; padding:0; } .footer-links ul li { margin-bottom:10px; } .footer-links ul li a { color:var(--text3) !important; transition:color .3s; font-size:14px; } .footer-links ul li a:hover { color:var(--pink) !important; } .footer-contact p { margin-bottom:10px; font-size:14px; color:var(--text3); } /* ???? 6. LIGHT MODE -- section/card overrides ???? */ [data-site-theme="light"] .row-title { color:var(--text); } [data-site-theme="light"] .custom-footer { color:var(--text3); } [data-site-theme="light"] .custom-footer h4 { color:var(--text); } [data-site-theme="light"] .custom-footer p, [data-site-theme="light"] .footer-links ul li a { color:var(--text3) !important; } [data-site-theme="light"] .custom-footer a:hover, [data-site-theme="light"] .footer-links ul li a:hover { color:var(--pink) !important; } [data-site-theme="light"] input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]), [data-site-theme="light"] textarea, [data-site-theme="light"] select { background: var(--input-bg) !important; color: var(--text) !important; border-color: var(--border) !important; } /* ???? 7. RESPONSIVE ???? */ @media(max-width:1100px) { .gg-featured-wrap { flex:0 0 50%; max-width:50%; } .gg-thumbs-wrap { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr); } } @media(max-width:768px) { .google-gallery { flex-direction:column; } .gg-featured-wrap { flex:none; max-width:100%; min-height:320px; } .gg-thumbs-wrap { grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); } .mainmenu li { margin:5px 10px; } #siteThemeBtn { top:10px; right:10px; padding:5px 10px; font-size:10px; } }