/* ========================================================================== THEMED STYLESHEET HOW IT WORKS: - :root holds all structural/layout vars (shadows, transitions, gradients, modal colors, pagination, etc.) — these never change between themes. - [data-theme="x"] on overrides only the colour tokens. - No body class needed. Just: USAGE: ← or neon-purple, ocean, emerald, crimson, gold, vaporwave JS to switch + persist: function setTheme(name) { document.documentElement.setAttribute('data-theme', name); localStorage.setItem('theme', name); } // On page load (no flash): (function() { document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') || 'default'); })(); ========================================================================== */ /* ========================================================================== ROOT — structural vars that never change between themes ========================================================================== */ :root { --transition: .3s ease; --overlay: rgba(0,0,0,.7); --shadow: rgba(0,0,0,.75); /* Nav gradient built from bg-dark — updated automatically when bg-dark changes */ --nav-bg-start: rgba(19,19,19,1); --nav-bg-end: rgba(65,62,62,1); /* Slider / gradient panels */ --gradient-panel: linear-gradient(to bottom, #323232 0%, #000 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.25) 200%); /* Modal (light surface — intentionally fixed) */ --modal-overlay: rgba(255,255,255,.6); --modal-bg: #ffffff; --modal-input-bg: #ffffff; --modal-border: #cccccc; --modal-sep: #d1d1d1; /* Pagination */ --pagination-active-bg: #ffffff; --pagination-active-color: #131313; /* Photo matte / card bg */ --photo-matte: #d5d4d0; --girl-photo-text:#1C1C1C; /* Webcam indicator */ --webcam-color: #32CD32; /* Non-themed text colour used by body */ --text-dark: #333333; --nav-text: #FFFFFF; /* default to white, overridden per theme */ } /* ========================================================================== BASE ========================================================================== */ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: var(--text-dark); background-color: var(--bg); margin: 0; } h2.latest { font-weight: 700; margin: 0; padding: 35px 10px 15px 10px; color: var(--primary); position: relative; display: inline-block; } /* ========================================================================== NAV ========================================================================== */ #nav { position: fixed; background: var(--nav-bg-start); background: linear-gradient(90deg, var(--nav-bg-start) 0%, var(--nav-bg-start) 59%, var(--nav-bg-end) 100%); width: 100%; display: grid; grid-template-columns: 200px auto; z-index: 999; } #nav .big-menu a { text-decoration: none; color: var(--nav-text); text-transform: uppercase; font-weight: 500; font-size: 18px; letter-spacing: .05em; padding: 15px; } #nav .big-menu a:hover { text-decoration: none; background-color: var(--primary); color: var(--nav-text); transition: var(--transition) background; } #nav .big-menu ul:first-child { z-index: 99999; } #nav .big-menu ul:nth-child(2) { grid-column: 2/3; } #nav .logo { grid-column: 1/2; display: grid; justify-items: start; max-width: 150px; margin-left: 10px; } .logo svg { width: 100%; padding-left: 25px; } #nav nav { text-align: right; } #nav ul { list-style: none; display: inline-block; margin: 0; padding-right: 25px; } #nav li { display: inline-grid; justify-items: end; margin-top: 11px; } #nav p { text-decoration: none; color: var(--text-dark); text-transform: uppercase; font-weight: 700; font-size: 15.4px; } #nav .nav-toggle { display: none; } #nav .join-btn a::before, #nav .logo a::before { content: none; } #nav .join-btn a { background-color: var(--primary); color: var(--btn-text); font-size: 1.5em; border: 1px solid var(--primary); padding: 10px 25px !important; letter-spacing: .05em; display: inline-block; text-transform: uppercase; transition: var(--transition) background; } #nav .join-btn a:hover { background: var(--bg-dark); border: 1px solid var(--border-light); text-decoration: none; } .nav-toggle-label { display: none; } @media screen and (max-width: 1122px) { #nav { justify-items: end; } #nav .nav-toggle:checked ~ nav { display: block; transform: scale(1,1); height: 400px; margin-top: -56px; } #nav .nav-toggle:checked ~ nav li { opacity: 1; transition: opacity 250ms ease-in-out 250ms; } #nav .nav-toggle-label { display: flex; justify-items: end; align-items: center; margin-right: 1.5em; top: 0; right: 0; height: 100%; cursor: pointer; } .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after { width: 2em; display: block; background: var(--text); height: 4px; border-radius: 2px; position: relative; } .nav-toggle-label span::before, .nav-toggle-label span::after { content: ''; position: absolute; } .nav-toggle-label span::before { bottom: 10px; } .nav-toggle-label span::after { top: 10px; } #nav .search-field { display: grid; } #nav nav { position: absolute; text-align: center; width: 100%; background: var(--bg-dark); opacity: .95; top: 130px; right: 0; transform: scale(1,0); transform-origin: top; transition: transform 400ms ease-in-out; z-index: 6; grid-column: 1/3; } #nav nav ul { display: block; right: 0; } #nav nav li { display: block; text-align: right; opacity: 0; transition: opacity 150ms ease-in-out; margin-bottom: 25px; } #nav .search-field input { margin: 0; } #nav .logo { grid-column: 1/2; display: grid; justify-items: start; max-width: 150px; margin-left: -188px; } #nav .join-btn a { font-size: 1em; } .pad-lr { padding: 0 5%; } #slider .logo-4k { margin-left: 1vw; } } /* ========================================================================== SEARCH ========================================================================== */ #search { width: 100px; height: 34px; padding: 0 12px; margin-bottom: 10px; font-size: 14px; line-height: 1.42857143; color: var(--text-muted); background-color: var(--search-bg); background-image: none; border: 1px solid var(--border); border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px var(--shadow); box-shadow: inset 0 1px 1px var(--shadow); transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } #search-field { margin-top: 0; } .search-field form { grid-row: 1; } .search-field a { grid-row: 1; margin-left: 5px; } .icon-search { margin-top: -12px; } .icon-search:before { content: '\e80b'; } .search-btn i { padding-top: -10px; } .search-btn { padding-top: 0; } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: 0.2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .autocomplete { position: relative; display: inline-block; } .autocomplete-items { position: absolute; border: 1px solid var(--border); border-bottom: none; border-top: none; z-index: 99; } .autocomplete-items div { cursor: pointer; background-color: var(--autocomplete-bg); border-bottom: 1px solid var(--autocomplete-border); } .autocomplete-items a::before { content: none !important; } .autocomplete-items a:hover { color: var(--text-muted) !important; } .autocomplete-items a { padding: 10px; display: block; text-transform: none !important; font-weight: normal !important; } .autocomplete-items span { padding: 10px; background-color: var(--text); border-bottom: 1px solid var(--border); margin: 0; text-align: center; display: block; } .autocomplete-items h5 { padding: 10px; color: var(--text); background-color: var(--surface-alt); border: 1px solid var(--autocomplete-border); margin: 0; } .autocomplete-items div:hover { background-color: var(--autocomplete-hover-bg); } .autocomplete-active { background-color: DodgerBlue !important; color: var(--text); } /* ========================================================================== SLIDER ========================================================================== */ #slider { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 80px 80px; box-shadow: 0 7px 5px 0 var(--shadow); padding-top: 75px; position: relative; } #slider .big-img { width: 100%; grid-column: 1/6; grid-row: 1/5; } #slider .big-star { display: none; } #slider .thtle-shadow { display: grid; grid-column: 1/6; grid-row: 3/5; background: var(--bg-dark); z-index: 2; opacity: .3; } #slider .logo-4k { position: absolute; bottom: 0; margin: 0 0 1% 1%; } #slider .title-text { display: flex; grid-column: 2/5; grid-row: 4/5; z-index: 2; color: var(--text); font-size: 2em; padding-left: 20px; padding-right: 20px; justify-items: center; text-shadow: 0 1px 2px var(--overlay); } #slider .title-text p { margin: 0; } #slider .title-text .slider-next-update { font-size: .7em; margin-bottom: -10px; } #slider .title-text .slider-date { font-size: .4em; margin-top: 10px; } #slider .title-text .slider-name { text-transform: uppercase; margin-top: 20px; } #slider .title-text .left { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: var(--secondary); z-index: 2; color: var(--text); font-size: 2em; padding-left: 20px; padding-right: 20px; text-shadow: 0 1px 2px var(--overlay); } #slider .title-text .right { background-color: rgba(0,0,0,0.8); z-index: 2; color: var(--text); font-size: 2em; padding-left: 20px; padding-right: 20px; text-shadow: 0 1px 2px var(--overlay); } #slider .title-text .left .slider-name { text-transform: uppercase; } #slider .title-text .left .slider-next-update { font-size: .7em; margin-top: -10px; } #slider .title-text .left .slider-date { font-size: .4em; margin-top: 0; } #slider .title-text .left p { margin: 0; } @media screen and (min-width: 1100px) { #slider { grid-template-columns: 1fr 1fr 1fr; padding-top: 3em; } #slider .title-text { grid-column: 1/5; grid-row: 3/4; } #slider .border-1 { grid-column: 1/2; grid-row: 1/-1; background: var(--gradient-panel); background-blend-mode: multiply; } #slider .border-2 { grid-column: -2/-1; grid-row: 1/-1; background: var(--gradient-panel); background-blend-mode: multiply; } #slider .big-img { grid-column: 1/6; grid-row: 1/5; } #slider .logo-4k { grid-column: 1/2; } #slider .big-star { margin-top: 84px; grid-column: 4/6; grid-row: 1/5; display: inline-grid; justify-items: end; z-index: 3; } } .big-star img { grid-column: 1; grid-row: 1; } #slider .big-star-txt { grid-column: 1; grid-row: 1; margin-top: 10px; margin-right: 60px; } #slider .star-txt1 { margin-top: 55px; margin-bottom: 0; font-size: 65px; margin-left: 40px; font-weight: 700; transform: rotate(-15deg); } #slider .star-txt2 { margin-left: 65px; margin-top: -30px; font-size: 35px; font-weight: 700; transform: rotate(-15deg); } .slider-text { position: absolute; bottom: 0; display: grid; grid-template-columns: auto 1fr auto; background-color: var(--overlay); width: 100%; color: var(--text); align-items: center; } .next-model-name p { color: var(--text); font-size: 2.5em; text-align: center; } .slider-date { color: var(--text-muted); font-size: 16px; } .slider-next-update { color: var(--primary); font-weight: bold; font-size: 1.5em; margin: 0; padding-left: 1em; } .logo-4k-new { padding-right: 1em; } @media screen and (max-width: 998px) { .slider-next-update { font-size: 1em; } .next-model-name p { font-size: 2em; padding: 0; } .logo-4k-new { width: 150px; } } @media screen and (max-width: 768px) { .slider-text { grid-template-columns: auto 1fr; grid-auto-rows: 1fr 1fr; } .logo-4k-new { padding-left: 1em; } } @media screen and (max-width: 630px) { .slider-text { grid-template-columns: 1fr; grid-template-rows: auto; } .slider-next-update { margin: 0; text-align: center; padding: 5px 0; } .logo-4k-new { margin: 0 auto; } } @media screen and (max-width: 600px) { #slider { grid-template-rows: 1fr 1fr 60px 30px; } #slider .title-text { font-size: 1.2em; } #slider .title-text .slider-name { margin-top: 10px; } #slider .logo-4k { margin: 0 0 1vw 1vw; width: 40vw; } } /* ========================================================================== HEADER CTA ========================================================================== */ .header-cta { position: absolute; z-index: 5; width: 100%; left: 50%; right: 50%; transform: translate(-50%, -50%); margin-bottom: -.6em; } .text-center { text-align: center; } .cta-sm { background: var(--primary); text-align: center; color: var(--text); font-size: 1.5em; padding: .4em 1em; font-weight: normal; transition: var(--transition) all; text-decoration: none; } .pad-lr { padding: 0 7%; } .pad-lr h3 { padding: 0 7%; font-size: 2em; font-family: inherit; font-weight: 500; text-align: center; line-height: 1.5; } @media screen and (max-width: 768px) { .pad-lr h3 { padding: 0 2%; font-size: 16px; } h1.last-updates { font-size: 27px; } } @media screen and (max-width: 600px) { .cta-sm { font-size: 1.5em; } } /* ========================================================================== WRAPPER / VIDEO GRID ========================================================================== */ h1.last-updates { color: var(--secondary); padding: 0 7%; font-weight: 700; margin: 0; font-size: 2.5em; padding-top: 1em; } .wrapper { display: grid; grid-template-columns: 1fr; padding: 0 7%; } .wrapper > div { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1em; margin-top: 20px; } .wrapper > .latest-video-newest-wrapper { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: 2em; } .latest-video-hover-wrapper { width: 100%; height: auto; margin-right: 10px; position: relative; } .latest-video-hover-wrapper .overlay-style { text-align: center; position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 1; transition: all .5s; color: var(--text); } .latest-video-hover-wrapper .overlay-style:hover { background: var(--overlay); } .latest-video-hover-wrapper .overlay-style img { width: 20%; } .wrapper .latest-video-hover-wrapper a { border: none; box-shadow: none; } .lv-info { background: var(--surface); padding: 10px; color: var(--text); } .wrapper a.white-btn { color: var(--text); transition: .2s ease all; display: block; overflow: hidden; text-overflow: ellipsis; border: none; box-shadow: none; font-size: 24px; font-weight: 500; } .wrapper a.white-btn:hover { text-decoration: underline; } .lv-info h5 { font-style: italic; color: var(--text-muted); margin: 0; } .lv-info h3 { margin: 0; padding-bottom: 0.5em; } .flex-vertical-center { display: flex; align-items: center; justify-content: center; flex-direction: column; } .lv-runtime { position: absolute; bottom: 0; right: 0; z-index: 1; padding: 1em; } .lv-runtime h3 { background: var(--bg-dark); color: var(--text); padding: .5em; font-size: 16px; margin: 0; } .wrapper a { display: grid; grid-template-rows: 30px 1fr 1fr 36px; overflow: hidden; text-decoration: none; } .video-thumb { position: relative; } .runtime { position: absolute; bottom: 0; right: 0; z-index: 1; padding-right: .5em; padding-bottom: .5em; } .runtime h5 { background: var(--bg-dark); color: var(--text); padding: .5em; margin: 0; } .video-title { background: transparent; color: var(--highlight); padding: 8px; position: relative; font-family: inherit; font-weight: 500; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .video-btn { color: var(--highlight); transition: .2s ease all; } .video h4 { font-size: 18px; margin: 5px 0 0 0; font-weight: 500; } .video h4 a:hover { color: var(--text); } .video h4:hover { text-decoration: underline; } .wrapper .added { grid-row: 4/5; grid-column: 1/-1; background: var(--bg-dark); z-index: 2; opacity: .7; font-size: 1.5em; color: var(--text); } .added-text { display: grid; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .5em; margin-right: 10px; margin-top: -7px; } .added-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 85px; } .wrapper .name { grid-row: 3/5; grid-column: 1; background: #fffc00; z-index: 2; opacity: .6; transform: rotate(-4deg); text-align: center; font-size: 1.5em; color: var(--text-dark); padding-top: 20px; margin-top: -4px; margin-bottom: 5px; width: 100%; margin-left: -10px; padding-right: 150px; box-shadow: 10px 10px 5px 0 var(--shadow); border: 2px solid var(--text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .name-new { padding: 10px; background: var(--primary); color: var(--text); margin-right: 10px; font-weight: 700; border: 1px solid var(--bg-dark); } .added-date { font-size: .7em; } .title-info { display: grid; grid-row: 4/5; grid-column: 1/-1; background: var(--bg-dark); z-index: 2; opacity: .7; font-size: 1.5em; color: var(--text); align-items: center; padding-left: 20px; padding-right: 20px; } .title-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wrapper a img, .wrapper a video { width: 99%; grid-row: 1/5; grid-column: 1; } @media screen and (max-width: 1100px) { .wrapper > div { grid-column: 2/3; grid-template-columns: 1fr 1fr; grid-gap: 1em; } } @media screen and (max-width: 900px) { .wrapper > div { grid-column: 2/3; grid-template-columns: 1fr; grid-gap: 1em; } .wrapper > .latest-video-newest-wrapper { grid-template-columns: 1fr; } } /* ========================================================================== MID CTA ========================================================================== */ .mid-cta { display: flex; align-items: center; justify-content: center; height: auto; position: relative; width: 100%; background-color: var(--primary); padding: 2em 0; margin-top: 0; } .mid-cta a { display: block; } .mid-text { margin: 0; padding: 1rem 1.3rem; position: relative; z-index: 2; font-size: 1.4rem; color: var(--text); } .wrapper > div.mid-cta { display: flex; background-color: var(--surface-alt); margin-top: 0; } @media (min-width: 530px) { .mid-text { font-size: 2em; } } @media (min-width: 998px) { .mid-text { font-size: 3vw; } } @media (max-width: 930px) { .wrapper > div.mid-cta { flex-direction: column; padding-top: 1em; text-align: center; } } @media (max-width: 530px) { .mid-text { font-size: 2em; padding: 0 1.3rem; } } /* ========================================================================== CTA BLOCKS ========================================================================== */ .cta-lg { background: var(--primary); border: 1px solid var(--primary); text-align: center; color: var(--btn-text); transition: var(--transition) background; } .cta-lg:hover { background: var(--bg-dark); border: 1px solid var(--border-light); text-decoration: none; } .pad { padding: 30px 0; margin: 2.5em 20%; } .cta-lg a { font-size: 3vw; font-weight: 800; padding: 35px 0; color: var(--btn-text); text-decoration: none; } .cta-lg:hover a { color: var(--btn-hover-text, var(--nav-text)) !important; } .background-center { background-repeat: no-repeat; background-position: 50%; padding: 2% 15% 2%; background-size: cover; } .background-center a { display: block; margin-top: 1em; } .caption-baner { padding: 16px 3%; background-color: rgba(22,22,22,0.8); margin-top: 1px; border: 2px solid var(--text); border-top-width: 3px; border-bottom-width: 3px; text-transform: uppercase; text-align: center; overflow: hidden; } .caption-banner-trigger { position: relative; top: -50vh; } .caption-baner h3 { font-size: 2em; line-height: 50px; margin: 0; color: var(--highlight); margin-bottom: 0.5rem; text-decoration: underline; } .caption-baner p { color: var(--text); font-size: 18px; margin: 0; text-transform: none; position: relative; } @media screen and (max-width: 600px) { .pad { margin: 2.5em 0; } .cta-lg a { font-size: 6vw; } .video h4 { margin: 5px 0 12px 0; } } /* ========================================================================== PAGINATION ========================================================================== */ #pagination .pagination-btns { display: grid; width: 75%; margin: 0 auto; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-gap: 0.5em; grid-column: 2/3; } @media screen and (min-width: 1514px) { #pagination .pagination-btns { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } } #pagination .pagination-btns div { align-items: center; display: grid; text-align: center; } #pagination .pagination-btns .dot-dot-dot { color: var(--pagination-link-color); font-size: 1.8em; border-right: 1px solid var(--pagination-link-color); } #pagination .pagination-btns div .active { background-color: var(--pagination-active-bg); border: 1px solid var(--pagination-active-bg); color: var(--pagination-active-color); padding: 8px 45px; text-decoration: none; font-size: 1.8em; display: block; } #pagination .pagination-btns div a { color: var(--pagination-link-color); padding: 8px 45px; text-decoration: none; transition: ease all; font-size: 1.8em; border: 1px solid var(--pagination-link-border); margin: 3px; display: block; } #pagination .pagination-btns div a:hover { background-color: var(--pagination-active-bg); color: var(--pagination-active-color); } @media screen and (max-width: 1100px) { .pagination-btns div a, .pagination-btns div .active { font-size: 1.3em !important; align-items: center; } } @media screen and (max-width: 900px) { #pagination .pagination-btns { grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); } #pagination .pagination-btns div .active { padding: 0; } #pagination .pagination-btns div a { padding: 0; margin: 0; } } @media screen and (max-width: 600px) { #pagination { grid-template-columns: 1fr; margin: 0 2em; } #pagination .pagination-btns { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-gap: .5em 0; grid-column: 2/3; } #pagination .pagination-btns div { display: inline; } } /* ========================================================================== FOOTER ========================================================================== */ footer { background: var(--bg-dark); text-align: center; color: var(--text-light); font-weight: 700; } footer .social-media { font-size: 1.5em; padding-top: 20px; text-align: left; margin-left: 40px; } footer a, footer h5, footer h6 { text-decoration: none; color: var(--text-muted); } footer a:hover { color: var(--text); } footer ul { list-style: none; text-align: center; margin-top: 0; padding-top: 20px; display: flex; flex-direction: row; justify-content: center; } footer ul li { padding: 1em; } footer h5 { margin: 0; } footer h6 { padding: 0 0 20px; margin: 0; } @media screen and (max-width: 768px) { footer ul { padding-top: 30px; padding-left: 0; flex-direction: column; } footer ul li { padding: .5em; } } /* ========================================================================== VIDEO PLAYER ========================================================================== */ #video-player-section { color: var(--text-muted); background: var(--gradient-panel); background-blend-mode: multiply; box-shadow: 0 7px 5px 0 var(--shadow); padding-top: 5.3em; } #video-player-section #kt_player { max-width: 900px; margin: 0 auto; } .video-text { max-width: 900px; margin: 0 auto; padding: 5px 20px 20px; } .video-info { width: 100%; color: var(--text-muted); } .video-info .active { fill: #ebdf0a; opacity: .9; } .video-info .unactive { fill: var(--text-muted); opacity: .9; } .video-info > div { display: grid; grid-template-columns: 1fr 1fr 1fr; } .video-info > div p { margin: 0; } .model-tags { color: var(--text-light); font-size: 1.2em; } .model-tags a { color: var(--secondary); text-decoration: none; } .download-full-movie h3 { text-transform: uppercase; color: var(--text); font-size: 2em; margin-bottom: 10px; } .download-full-movie h3::before, .download-full-movie::after { content: ''; display: block; height: 3px; background: var(--text); width: 100%; } .download-full-movie h3::before { margin-bottom: 10px; } .download-full-movie::after { margin-top: 20px; } .download-full-movie div { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .download-full-movie a { text-decoration: none; text-align: center; font-size: 1.3em; color: var(--text); padding: 10px; background: var(--surface-alt); margin-right: 1px; transition: .5s ease background; } .download-full-movie a:hover { background: var(--secondary); } /* ========================================================================== GALLERY ========================================================================== */ #gallery-section { margin-top: 50px; color: var(--text-light); } #gallery-section .thumbnails { max-width: 900px; margin: 0 auto; } .row-figure { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 1em; } .row-figure figure { margin: 0; width: 100%; overflow: hidden; } figure img { width: 100%; } .gallery-title { font-weight: 700; margin: 0; padding: 35px 10px 15px; color: var(--text); position: relative; display: inline-block; font-size: 2.2em; } .join-gallery { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: var(--primary); border: 1px solid var(--primary); text-align: center; font-size: 2.2em; font-weight: 600; padding: 10px 0; color: var(--btn-text); display: block; text-decoration: none; margin-top: 30px; transition: var(--transition) background; } .join-gallery:hover { color: var(--text-light); background: var(--bg-dark); border: 1px solid var(--border-light); } @media screen and (max-width: 600px) { .row-figure { grid-template-columns: 1fr 1fr 1fr 1fr; } } /* ========================================================================== CHECK MORE / MORE GIRLS ========================================================================== */ #check-more-section { margin-top: 50px; margin-bottom: 50px; color: var(--text-light); } .more-girls { max-width: 900px; margin: 0 auto; } .more-title { font-weight: 700; margin: 0; padding: 35px 10px 15px; color: var(--text); position: relative; display: inline-block; font-size: 2.2em; } .more-girl { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em; } .more-girl a { overflow: hidden; } .more-girl img { width: 100%; } .more-girls-btn p { margin: 20px; } .gallery-see-more { font-size: 2em; text-decoration: none; color: var(--text-light); width: 100%; text-align: center; background-color: var(--primary); padding-top: 10px; padding-bottom: 10px; margin-bottom: 20px; margin-top: 20px; display: block; font-weight: 700; } .gallery-see-more:hover { text-decoration: underline; opacity: .85; } @media screen and (max-width: 600px) { .more-girl { grid-template-columns: 1fr; } } /* ========================================================================== GIRL ALL (model grid) ========================================================================== */ .girl-all { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; justify-items: center; margin: 0 auto; margin-bottom: 50px; padding: 80px 14% 0 14%; } .girl-photo { max-width: 300px; padding: 5px; background: var(--photo-matte); margin: 10px; box-shadow: 0 7px 5px 0 var(--shadow); transform: rotate(0deg) scale(1,1); transition: 200ms linear; z-index: 0; } .girl-photo:hover { transform: rotate(-5deg) scale(1.2,1.2); transition: 300ms linear; z-index: 3; } .girl-photo a { text-decoration: none; } .girl-photo p { color: var(--girl-photo-text); opacity: .8; margin: 0; text-align: right; font-weight: 700; text-transform: uppercase; } .girl-photo img { width: 100%; } @media screen and (max-width: 1000px) { .girl-photo:hover { transform: scale(1.1,1.1); transition: 300ms linear; z-index: 3; } } @media screen and (max-width: 730px) { .girl-all { padding: 50px 5% 0 5%; } } @media screen and (max-width: 600px) { .girl-all { grid-template-columns: 1fr 1fr 1fr; } } @media screen and (min-width: 200px) and (max-width: 430px) { .girl-all { grid-template-columns: 1fr; } } /* ========================================================================== BIO ========================================================================== */ #bio-section { color: var(--text-light); } .bio-about { margin: 0 auto; padding: 100px 14% 0 14%; } .bio-photo { max-width: 200px; padding: 5px; background: var(--photo-matte); margin: 10px; position: absolute; transform: rotate(-10deg); box-shadow: 0 7px 5px 0 var(--shadow); } .bio-photo p { color: var(--girl-photo-text); opacity: .8; margin: 0; text-align: right; font-weight: 700; text-transform: uppercase; } .bio-photo img { width: 100%; } .bio { display: grid; grid-template-columns: minmax(auto, 255px) 1fr; } .stats { padding: 10px; } .stats ul { margin-top: 380px; padding: 0 15px 16px; } .stats ul li { list-style: none; line-height: 2; color: var(--text-muted); } .stats-white { color: var(--text); } .bio-text { margin: 0 20px 0 0; min-height: 340px; } .bio-text::before, .bio-videos::before { content: ''; display: block; height: 3px; background: var(--text); width: 100%; margin-top: 20px; } .bio-videos::before { margin-top: 5px; } .bio-text h1 { color: var(--primary); font-family: inherit; font-weight: 700; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bio-videos { width: 100%; } .bio-videos h3 { color: var(--primary); margin-left: 20px; font-size: 1.5em; } .bio-more-videos { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1em; } .bio-more-videos a { overflow: hidden; display: grid; grid-template-rows: 1fr 50px; text-decoration: none; } .bio-more-videos a p { background: var(--bg-dark); opacity: .7; color: var(--text); grid-row: 2/3; grid-column: 1; z-index: 3; padding: 10px; height: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; } .bio-videos-date { text-align: right; justify-items: end; } .bio-videos-photos { text-align: center; justify-items: center; } .bio-videos-webcam { text-align: left; justify-items: start; font-weight: bold; color: var(--webcam-color); } .bio-videos-webcam2 { text-align: left; justify-items: center; font-weight: bold; color: var(--webcam-color); } .bio-more-videos img { width: 100%; grid-row: 1/3; grid-column: 1; transform: scale(1,1); transition: 300ms linear; } .bio-more-videos img:hover { transform: scale(1.4,1.4); } @media screen and (max-width: 730px) { .bio-photo { margin-left: 70px; } .bio { grid-template-columns: 20px 1fr; padding-top: 320px; } .bio-more-videos { grid-template-columns: 1fr 1fr; } .bio-about { padding: 0; } } @media screen and (max-width: 600px) { .bio-more-videos { grid-template-columns: 1fr; } } /* ========================================================================== MODAL ========================================================================== */ .modal { display: none; position: fixed; z-index: 999999; left: 0; top: 0; height: 100%; width: 100%; overflow: auto; background-color: var(--modal-overlay); } .modal-content { background-color: var(--modal-bg); margin: 90px auto; max-width: 600px; box-shadow: 0 7px 5px 0 var(--shadow); animation-name: modalopen; animation-duration: 1s; } .closeBtn { color: #ccc; font-size: 30px; float: right; margin-top: -20px; margin-right: -5px; } .closeBtn:hover, .closeBtn:focus { color: var(--text); text-decoration: none; cursor: pointer; } .modal-header { background: var(--gradient-panel); background-blend-mode: multiply; padding: 20px; color: var(--photo-matte); } .modal-header h2 { margin: 0; } .modal-body { padding: 10px 20px; } .modal-body input { display: block; width: 90%; height: 34px; padding: 0 12px; margin-bottom: 10px; font-size: 20px; line-height: 1.42857143; color: var(--text-muted); background-color: var(--modal-input-bg); background-image: none; border: 1px solid var(--modal-border); border-radius: 4px; box-shadow: inset 0 1px 1px var(--shadow); transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .modal-footer { text-align: right; padding: 0 20px 20px !important; } .modal-footer::before { content: ''; display: block; height: 1px; background: var(--modal-sep); width: 100%; margin-bottom: 10px; } .modal-footer button { color: var(--text); background-color: var(--primary); border: none; padding: 10px 20px; text-transform: uppercase; font-weight: 700; font-size: 1.4em; cursor: pointer; border-radius: 3px; transition: var(--transition) background; } .modal-footer button:hover { background-color: var(--bg-dark); } @keyframes modalopen { from { opacity: 0; } to { opacity: 1; } } /* ========================================================================== MISC ========================================================================== */ .icon { font-family: fontello; } .test { background: var(--bg-dark); padding: 20px; } .site-details{ grid-column: 2/3; display: grid; grid-template-columns: 1fr; } .site-details-txt, h1{ font-size: 1.3em; font-weight: bold; color: #ffffff; margin-top: 20px; text-align: center; } .site-details-txt-color{ color: #f6fe27; } /* ========================================================================== CAMS ========================================================================== */ #last-cams{ display: grid; grid-gap: 1em; background: #fff; position: absolute; padding: 1em; right: 0; grid-template-columns: 1fr 1fr 1fr; border: 1px solid #555; top: 50px; } #nav a.view-all-cams-btn::before{ content: none; } #nav a.view-all-cams-btn:hover{ color: #ff0000 !important; } .cam-thumb a{ display: grid; grid-template-rows: 30px 1fr 1fr 36px; } .cam-thumb img{ width: 100%; grid-row: 1/5; grid-column: 1; } .info-cam{ display: grid; grid-row: 4/5; grid-column: 1/-1; background: #000; padding: 0px 10px 10px 10px; opacity: .5; } .name-cam{ display: grid; grid-row: 4/5; grid-column: 1/-1; background: #000; /* width: 100%; */ padding: 8px 10px 10px 10px; opacity: .5; color: #fff !important; } .online-cam{ display: grid; grid-row: 1/2; grid-column: 1/-1; /* background: #000; */ /* width: 100%; */ padding: 5px 10px; opacity: .5; color: #5ee632 !important; text-align: right; font-weight: 900; } .chat-btn{ display: grid; grid-row: 2/4; grid-column: 1/-1; background: #F05623; opacity: .8; color: #000; text-align: center; font-size: 2em; border-radius: 5px; width: 250px; margin: 0 auto; height: 42px; margin-top: 70px; display: none; } #live-cams-btn{ text-transform: uppercase; font-weight: 700; font-size: 15.4px; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #000; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; }