/* =====================================================================
World of Cupping Academy: CSS for the native Elementor build
---------------------------------------------------------------------
Layout, colors, fonts and spacing live in the Elementor widget settings
(JSON templates in /elementor). This file only holds what Elementor
cannot do from its panels. Keep it small.
===================================================================== */
/* 1. Page base: dark background and level numbers.
Cormorant Garamond draws old-style numbers by default ("25+", prices),
so all numbers are switched to lining figures. */
html,
body { background-color: #080808; }
body { color: #B9B9B9; font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; }
::selection { background: #C9A24D; color: #080808; }
/* Anchor links (#pricing) stop below the sticky header */
html { scroll-padding-top: 110px; }
/* 2. Metallic gold words inside a heading.
In a Heading widget write: Advanced */
.woca-gold-grad {
background: linear-gradient(180deg, #F1D993 0%, #E1C173 40%, #C9A24D 70%, #987329 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #C9A24D;
}
/* Silver version for a contrasting line in big display headings: … */
.woca-silver-grad {
background: linear-gradient(180deg, #FFFFFF 0%, #ECECEC 45%, #BDBDBD 75%, #8E8E8E 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #E6E6E6;
}
/* 3. Header (container CSS class: woca-header)
Frosted glass bar, darker and slimmer once the page scrolls
(Elementor Sticky adds .elementor-sticky--effects after 24px). */
.woca-header {
overflow-x: clip; /* the closed phone menu can never push the page sideways */
-webkit-backdrop-filter: saturate(140%) blur(14px);
backdrop-filter: saturate(140%) blur(14px);
transition: background-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
.woca-header.elementor-sticky--effects {
--padding-top: 8px;
--padding-bottom: 8px;
background-color: rgba(8, 8, 8, 0.9) !important;
box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.95);
}
.woca-header .elementor-widget-image img { transition: height 0.35s ease, width 0.35s ease; }
.woca-header.elementor-sticky--effects .woca-header__logo img { width: 46px !important; }
/* Menu item with CSS class "woca-menu-cta" (Appearance > Menus):
hidden in the desktop menu, a gold button at the bottom of the phone menu. */
.woca-header .elementor-nav-menu--main .woca-menu-cta { display: none; }
.woca-header .elementor-nav-menu--dropdown li.woca-menu-cta { padding: 16px 20px 20px; }
.woca-header .elementor-nav-menu--dropdown li.woca-menu-cta > a {
justify-content: center;
font-weight: 600;
color: #080808 !important;
background: linear-gradient(95deg, #A77B2D 0%, #E1C173 50%, #B98B35 100%) !important;
border-radius: 3px;
}
@media (min-width: 768px) {
.woca-header .elementor-nav-menu--dropdown li.woca-menu-cta { display: none; }
}
/* 4. Video popup for any element with the attribute data-woca-video
(Advanced > Attributes: data-woca-video|https://youtu.be/...).
Script: assets/js/woca-video.js */
.woca-lightbox {
position: fixed;
inset: 0;
z-index: 100000;
display: grid;
place-items: center;
padding: 20px;
background: rgba(0, 0, 0, 0.88);
}
.woca-lightbox__frame { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; }
.woca-lightbox__frame iframe { width: 100%; height: 100%; border: 1px solid #6F572A; border-radius: 6px; }
.woca-lightbox__close {
position: absolute;
top: 16px;
right: 16px;
width: 44px;
height: 44px;
font-size: 28px;
line-height: 1;
color: #E1C173;
background: rgba(8, 8, 8, 0.8);
border: 1px solid #6F572A;
border-radius: 50%;
cursor: pointer;
}
/* 5. Google Maps widget (CSS class: woca-map-dark): dark gold map to match the site */
.woca-map-dark iframe {
display: block;
border: 1px solid #6F572A !important;
border-radius: 14px;
filter: grayscale(1) invert(0.92) sepia(0.35) hue-rotate(5deg) contrast(0.9);
}
/* 6. Show / hide by login state (header Log in / Dashboard buttons).
CSS classes: woca-guest-only (logged out only), woca-member-only (logged in only).
The Log in button also has the class xoo-el-login-tgr, which opens the login popup. */
body.logged-in .woca-guest-only,
body:not(.logged-in) .woca-member-only { display: none !important; }
.xoo-el-login-tgr { cursor: pointer; }
/* 7. Header on laptops (1025 to 1300px): emblem only, so menu + Log in + Enroll fit on one line */
@media (min-width: 1025px) and (max-width: 1300px) {
.woca-header .woca-brand > .e-con { display: none; }
}
/* Header icon buttons: no text line-height under the icon, so they centre like the menu button */
.woca-header .elementor-widget-icon .elementor-icon-wrapper { line-height: 0; }
/* Student videos (elementor/parts/reviews.php): 5 across, a swipe row on tablet and phone. */
.woca-vreviews{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.woca-vreview{margin:0;aspect-ratio:9/16;border:1px solid rgba(201,162,77,.45);border-radius:12px;overflow:hidden;background:#000;box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.woca-vreview video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.woca-vreview--wide video{object-fit:contain}
@media (max-width:1024px){
.woca-vreviews{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:rgba(201,162,77,.5) transparent}
.woca-vreview{flex:0 0 31%;scroll-snap-align:start}
}
@media (max-width:767px){.woca-vreview{flex-basis:68%}}
/* Programs anatomy tiles: 5 across; tiles may shrink and long words wrap instead of pushing past the edge. */
.woca-tiles > .e-con{min-width:0}
.woca-tiles .elementor-icon-box-title{overflow-wrap:anywhere;hyphens:auto}
/* Programs card ribbon: spans the full card width (card padding 30px, 20px on phones). */
.woca-ribbon{width:calc(100% + 60px)!important;max-width:none!important}
@media (max-width:767px){.woca-ribbon{width:calc(100% + 40px)!important}}