/*
Theme Name: CinePress
Template: foxiz
Theme URI: https://cinesist.com
Author: Cinesist
Author URI: https://cinesist.com
Description: Customizations to Foxiz Theme. This is the Theme that Cinesist will be using for our Project
Version: 1.0
Tags: custom-background, custom-menu, featured-images, theme-options, custom-colors, translation-ready, threaded-comments, translation-ready
*/
/*
-----------------
>>> TABLE OF CONTENTS:
1 - CSS Variables(root)
2 - General
3 - Icon Fonts
4 - Swiper Slider
5 - Header
6 - Post Entry
7 - Post Modules
8 - Blocks
9 - Single
10 - Archives
11 - Pages
12 - Footer
13 - Responsive
14 - Print
15 - Forms
16 - UI/UX
17 - Snarkive
-----------------
*/
/*
-----------------
1 - CSS Variables
-----------------
*/
/* White Spy Colors For Light Mode */
:root {
--flex-gray-1: #bab6b6;
--flex-gray-7: rgba(255, 255, 255, 0.35) !important;
--news-letter-bg: #e5e5e5;
--shadow-1: 5px 10px 20px 0px #00000051;
--shadow-7: #00000051;
--round-10: 10px; /* Standard Border Radius */
--page-bg-color: #FFFFFF;
/* Cinesist Branded Colors */
--gc-color: #d45f35; /* Primary Orange Color */
--gc-spy: #e5e5e5; /* White Spy Color */
/* Set your ticket stub colors */
--ticket-bg-color: #f1f1f1;
--ticket-text-color: #555555;
--ticket-text-hover: #d45f35; /* Kept your orange! */
--ticket-text-current: #111111;
/* Cinescore Review Section Colors */
--review-color: #d45f35;
}
/* Black Spy Colors for Dark Mode */
[data-theme='dark'], .light-scheme {
--flex-gray-1: #2a2a2a;
--flex-gray-7: rgba(0, 0, 0, 0.35) !important;
--news-letter-bg: #1a1b1f;
--shadow-1: 5px 10px 20px 0px #0000004d;
--page-bg-color: #111111;
/* Cinesist Branded Colors */
--gc-color: #d45f35; /* Primary Orange Color */
--gc-spy: #1a1b1f; /* Black Spy Color */
/* Set your ticket stub colors */
--ticket-bg-color: #5e5e5e;
--ticket-text-color: #AAAAAA;
--ticket-text-hover: #d45f35; /* Kept your orange! */
--ticket-text-current: #FFFFFF;
}
/*
-----------------
2 - General
-----------------
*/
/* Comments Section Style */
#comment {
border-width: 2px;
border-style: groove;
border-color: var(--g-color);
border-radius: 10px;
box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.3),
inset 0px -2px 5px rgba(255, 255, 255, 0.5);
}
/*
-----------------
3 - Icon Fonts
-----------------
*/
/* Elementor Icon Dark Mode Fix */
.elementor-icon-list-icon svg {
fill: var(--body-fcolor); /* Ensure icons adapt to Mode color */
}
/*
-----------------
4 - Swiper Slider
-----------------
*/
/*
-----------------
5 - Header
-----------------
*/
/*
-----------------
6 - Post Entry
-----------------
*/
/* Featured Image Container Style */
.s-feat-holder {
border-radius: var(--round-10); /* More Rounded Corners */
box-shadow: var(--shadow-1); /* Use Uniform Shadow Variable */
}
/* Featured Image Gradient Overlay */
.single-header-content:before {
background: linear-gradient(to top, var(--dark-accent) 30%, transparent 100%);
}
/* Post Title Style */
.s-title {
margin-bottom: 5px;
}
/*
-----------------
7 - Post Modules
-----------------
*/
/* Hightlight Post Module Wrapper Style */
.s-hl.s-hl-1 {
background-color: var(--news-letter-bg);
border-radius: var(--round-10); /* More Rounded Corners */
box-shadow: 5px 10px 20px 0px var(--shadow-7);
}
/* Highlight Post Module Style */
.s-hl-1 .s-hl-heading {
opacity: 0.55;
z-index: 1;
}
.s-hl-1 .hl-point:not(:last-child) {
padding-bottom: var(--s-hl-gap);
border-bottom: none;
}
/* Cinescore Quick Section Styles */
.sqview {
border-top: 2px solid var(--g-color);
border-radius: var(--round-10); /* More Rounded Corners */
box-shadow: 5px 10px 20px 0px var(--shadow-7);
}
/* Cinescore Section Styles */
.review-section {
background-color: var(--news-letter-bg);
border-top: 2px solid var(--g-color);
border-radius: var(--round-10); /* More Rounded Corners */
box-shadow: 5px 10px 20px 0px var(--shadow-7);
}
/* Cinescore Meta Score Style */
.review-quickview-meta .meta-score {
font-size: max(28px, 2rem) !important;
line-height: 1;
}
/* Cinescore Meta Rating Word Style */
.meta-text {
font-size: 16px !important;
font-weight: 700; /* Bold for Emphasis */
}
/* Remove Foxiz Text Related Post Links from Posts */
.widget.entry-widget .related-sec {
width: 100%;
max-width: 100%;
padding: 0;
border: none;
border-radius: 0;
background-color: transparent;
box-shadow: none;
display: none;
}
/**
* Cinescore Content Section
**/
/* Cinescore Breakdown Label Info Line Style */
.review-label-info {
border-left: 3px solid var(--review-color);
}
/*
-----------------
8 - Blocks
-----------------
*/
/*
-----------------
9 - Single
-----------------
*/
/* Blog Pages Body Styles */
/* Adjust Blog Pages Content Width */
@media (min-width: 992px) {
.grid-container > *:nth-child(1) {
flex: 0 0 70%;
width: 66.67%;
}
}
/* Adjust Blog Font Size */
.eplus-wrapper {
font-size: 18px;
}
/*
-----------------
10 - Archives
-----------------
*/
/*
-----------------
11 - Pages
-----------------
*/
/*
-----------------
12 - Footer
-----------------
*/
/* Style Footer Top Section */
.rb-section.fw-widget.top-footer.edge-padding {
margin-top: 20px;
padding-top: 10px;
background-color: var(--flex-gray-1);
border-top-width: 2px;
border-top-style: groove;
}
/*
-----------------
13 - Responsive
-----------------
*/
/*
-----------------
14 - Print
-----------------
*/
/*
-----------------
15 - Forms
-----------------
*/
/* Style All Input Forms */
input[type='text'], input[type='tel'], input[type='password'],
input[type='email'], input[type='url'], input[type='search'],
input[type='number'] {
border: 1px solid #d45f3559;
}
/* Post News-Letter Form Style */
#mailpoet_form_1 {
border: 2px solid var(--g-color);
border-radius: var(--round-10); /* More Rounded Corners */
background: var(--news-letter-bg); /* Use variable for background color change */
text-align: left;
}
/* Footer Newsletter Form Style */
#mailpoet_form_2 {
border: 2px solid var(--g-color);
border-radius: var(--round-10); /* More Rounded Corners */
background: var(--news-letter-bg); /* Use variable for background color change */
text-align: left;
}
/* Style User Review Comment Section */
.comment-box-wrap.entry-sec.rb-user-reviews {
background-color: var(--news-letter-bg);
border-style: solid;
border-width: 1px 1px 1px 1px;
--border-top-width: 1px;
--border-right-width: 1px;
--border-bottom-width: 1px;
--border-left-width: 1px;
border-color: var(--e-global-color-fb66372);
--border-color: var(--e-global-color-fb66372);
border-radius: var(--round-10); /* More Rounded Corners */
box-shadow: 5px 10px 20px 0px rgba(0, 0, 0, 0.5);
--margin-top: 20px;
--margin-bottom: 0px;
--margin-left: 0px;
--margin-right: 0px;
padding: 20px
}
/*
-----------------
16 - UI/UX
-----------------
*/
/* Movie Ticket Breadcrumb Navigation Style */
/* 1. Reset the main nav container */
nav.rank-math-breadcrumb {
background: none;
padding: 0;
border-radius: 0;
margin-top: 20px;
margin-bottom: 25px;
overflow: visible; /* Allows cutouts to "pop" */
}
/* 2. Use Flexbox for the inner wrapper */
nav.rank-math-breadcrumb .breadcrumb-inner {
margin: 0;
padding: 0;
display: flex; /* Aligns all stubs in a row */
align-items: center;
}
/* 3. Hide the original Rank Math separator */
nav.rank-math-breadcrumb .separator {
display: none;
}
/* 4. Style ALL stubs (links and the last item) */
nav.rank-math-breadcrumb a,
nav.rank-math-breadcrumb .last {
display: block;
position: relative; /* Crucial for positioning the cutouts */
background: var(--ticket-bg-color);
padding: 10px 20px; /* More padding for the cutout space */
color: var(--ticket-text-color);
font-size: 14px;
line-height: 1.2;
text-decoration: none;
transition: all 0.2s ease;
}
/* 5. Add the "torn" cutouts to BOTH sides of every stub */
nav.rank-math-breadcrumb a::before,
nav.rank-math-breadcrumb a::after,
nav.rank-math-breadcrumb .last::before,
nav.rank-math-breadcrumb .last::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 20px; /* Size of the cutout */
height: 20px; /* Size of the cutout */
border-radius: 50%;
background-color: var(--page-bg-color); /* This "punches" the hole */
}
/* Position the left cutout */
nav.rank-math-breadcrumb a::before,
nav.rank-math-breadcrumb .last::before {
left: -10px; /* Moves it halfway out */
box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* Optional: adds a subtle shadow */
}
/* Position the right cutout */
nav.rank-math-breadcrumb a::after,
nav.rank-math-breadcrumb .last::after {
right: -10px; /* Moves it halfway out */
box-shadow: -2px 0 5px rgba(0,0,0,0.1); /* Optional: adds a subtle shadow */
}
/* 6. Fix the ends of the ticket chain */
/* --- The FIRST item ("Home") --- */
nav.rank-math-breadcrumb a:first-child {
border-radius: 8px 0 0 8px; /* Rounds the outer-left corners */
}
/* Hide its left-side cutout */
nav.rank-math-breadcrumb a:first-child::before {
display: none;
}
/* --- The LAST item (Current Page) --- */
nav.rank-math-breadcrumb .last {
border-radius: 0 8px 8px 0; /* Rounds the outer-right corners */
color: var(--ticket-text-current);
font-weight: 500;
}
/* Hide its right-side cutout */
nav.rank-math-breadcrumb .last::after {
display: none;
}
/* 7. Styling the links */
nav.rank-math-breadcrumb a:hover {
color: var(--ticket-text-hover);
background: #333; /* A slight background change on hover */
z-index: 2; /* Brings it "on top" of the next stub */
}
/* Review Stars Style */
.rb-review-stars {
color: var(--g-color);
}
/* Review Star Filled In Style */
rbi rbi-star-o {
color: var(--g-color);
}
/*
-----------------
17 - Snarkive
-----------------
*/
/**
* Snarkive Linked Profiles Box Style
**/
.snarkive-links-box {
background-color: var(--gc-spy);
border-radius: 12px;
padding: 20px 25px;
margin-top: 30px;
border: 1px solid #333;
}
.snarkive-links-box h3 {
color: var(--gc-color); /* Cinesist Primary Orange Color */
font-size: 18px;
font-weight: 700;
margin-top: 0;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #333;
}
.snarkive-links-list {
display: flex;
flex-wrap: wrap;
gap: 10px; /* Spacing between tags */
}
/* * This is the new "pill" tag.
* It's now the tag itself.
*/
.snarkive-tag-link {
display: inline-flex;
align-items: center;
background-color: var(--page-bg-color);
color: #DDDDDD;
border-radius: 5px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
overflow: hidden;
box-shadow: var(--shadow-1);
padding: 3px 7px 3px 7px; /* Padding around the tag */
}
.snarkive-tag-link:hover {
opacity: 0.75;
}
/* * This styles the thumbnail image
*/
.snarkive-tag-link img {
width: 28px; /* Size of the thumbnail */
height: 28px; /* Size of the thumbnail */
object-fit: cover;
margin-right: 10px; /* Space between image and text */
}
/* * This styles the fallback icon (if no image)
*/
.snarkive-tag-link .snarkive-tag-icon {
width: 28px;
height: 28px;
margin-right: 10px;
background-color: #555; /* Fallback dot color */
border-right: 1px solid #444;
}
/* * This styles the text part of the tag
*/
.snarkive-tag-link span {
padding-right: 12px; /* Add padding to the text */
/* The color is inherited from the tag */
}